@dragunio/fe-libs 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -8,45 +8,60 @@ var hierarchyFromVariant = {
   danger: "primary"
 };
 var getIconSize = (size) => size === "24" ? 16 : 20;
-var Button = forwardRef(function Button2({
-  hierarchy,
-  variant,
-  size = "32",
-  color = "normal",
-  destructive,
-  iconOnly = false,
-  icon,
-  prefix,
-  suffix,
-  content,
-  loading = false,
-  alignCenter = false,
-  children,
-  className,
-  disabled,
-  type = "button",
-  ...props
-}, ref) {
-  const resolvedHierarchy = hierarchy ?? hierarchyFromVariant[variant ?? "primary"];
-  const resolvedDestructive = destructive || variant === "danger";
-  const isDisabled = disabled || loading;
-  const label = loading ? "Loading\u2026" : children ?? content;
-  const classes = [
-    "fe-button",
-    `fe-button--${resolvedHierarchy}`,
-    `fe-button--${size}`,
-    `fe-button--${color}`,
-    iconOnly && "fe-button--icon-only",
-    resolvedDestructive && "fe-button--destructive",
-    alignCenter && "fe-button--align-center",
-    className
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("button", { ref, className: classes, type, disabled: isDisabled, "aria-busy": loading || void 0, ...props, children: iconOnly ? icon : /* @__PURE__ */ jsxs(Fragment, { children: [
-    prefix && /* @__PURE__ */ jsx("span", { className: "fe-button__icon", children: prefix }),
-    /* @__PURE__ */ jsx("span", { className: "fe-button__label", children: label }),
-    suffix && /* @__PURE__ */ jsx("span", { className: "fe-button__icon", children: suffix })
-  ] }) });
-});
+var Button = forwardRef(
+  function Button2({
+    hierarchy,
+    variant,
+    size = "32",
+    color = "normal",
+    destructive,
+    iconOnly = false,
+    icon,
+    prefix,
+    suffix,
+    content,
+    loading = false,
+    alignCenter = false,
+    children,
+    className,
+    disabled,
+    type = "button",
+    ...props
+  }, ref) {
+    const resolvedHierarchy = hierarchy ?? hierarchyFromVariant[variant ?? "primary"];
+    const resolvedDestructive = destructive || variant === "danger";
+    const isDisabled = disabled || loading;
+    const label = loading ? "Loading\u2026" : children ?? content;
+    const hasLabel = label !== null && label !== void 0 && label !== false && label !== "";
+    const resolvedIconOnly = iconOnly || icon !== null && icon !== void 0 && !hasLabel;
+    const classes = [
+      "fe-button",
+      `fe-button--${resolvedHierarchy}`,
+      `fe-button--${size}`,
+      `fe-button--${color}`,
+      resolvedIconOnly && "fe-button--icon-only",
+      resolvedDestructive && "fe-button--destructive",
+      alignCenter && "fe-button--align-center",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: classes,
+        type,
+        disabled: isDisabled,
+        "aria-busy": loading || void 0,
+        ...props,
+        children: resolvedIconOnly ? icon : /* @__PURE__ */ jsxs(Fragment, { children: [
+          prefix && /* @__PURE__ */ jsx("span", { className: "fe-button__icon", children: prefix }),
+          /* @__PURE__ */ jsx("span", { className: "fe-button__label", children: label }),
+          suffix && /* @__PURE__ */ jsx("span", { className: "fe-button__icon", children: suffix })
+        ] })
+      }
+    );
+  }
+);
 Button.displayName = "Button";
 
 // packages/icons/src/index.tsx
@@ -82,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;
@@ -104,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);
   });
 }
@@ -121,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) => {
@@ -141,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;
@@ -166,66 +263,819 @@ 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 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__ */ 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";
+
+// packages/drawer/src/index.tsx
+import { useEffect as useEffect2 } from "react";
+import { createPortal } from "react-dom";
+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;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [onClose, open]);
+  if (!open || typeof document === "undefined") return null;
+  const panelStyle = !fullScreen && (side === "left" || side === "right") ? { ...style, width: typeof width === "number" ? `${width}px` : width } : style;
+  return createPortal(/* @__PURE__ */ jsx6("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
+    if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
+  }, children: /* @__PURE__ */ jsxs6("aside", { className: ["fe-drawer", `fe-drawer--${side}`, fullScreen && "fe-drawer--full-screen", className].filter(Boolean).join(" "), style: panelStyle, role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : "Drawer", ...props, children: [
+    /* @__PURE__ */ jsxs6("header", { className: "fe-drawer__header", children: [
+      title && /* @__PURE__ */ jsx6("h2", { children: title }),
+      /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "fe-drawer__body", children }),
+    footer && /* @__PURE__ */ jsx6("footer", { className: "fe-drawer__footer", children: footer })
+  ] }) }), document.body);
+}
+
+// packages/form-controls/src/index.tsx
+import {
+  forwardRef as forwardRef3,
+  useEffect as useEffect3,
+  useId,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+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] = 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] = useState3(false);
+  const [query, setQuery] = useState3("");
+  const [activeIndex, setActiveIndex] = useState3(0);
+  const rootRef = useRef2(null);
+  useEffect3(() => {
+    const close = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", close);
+    return () => document.removeEventListener("mousedown", close);
+  }, []);
+  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);
+    const selected = options.filter((option) => (Array.isArray(next) ? next : [next]).some((item) => String(item) === String(option.value)));
+    onChange?.(next, multiple ? selected : selected[0]);
+  };
+  const choose = (option) => {
+    if (option.disabled) return;
+    const isSelected = selectedValues.some((item) => String(item) === String(option.value));
+    if (multiple) commit(isSelected ? selectedValues.filter((item) => String(item) !== String(option.value)) : [...selectedValues, option.value]);
+    else {
+      commit(option.value);
+      setOpen(false);
+      setQuery("");
+    }
+  };
+  const clear = () => {
+    commit(multiple ? [] : "");
+    setQuery("");
+  };
+  const displayLabel = selectedOptions.length ? selectedOptions.map((option) => option.label) : null;
+  const onTriggerKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (disabled) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      setOpen(true);
+      setActiveIndex((current) => Math.max(0, Math.min(filteredOptions.length - 1, current + (event.key === "ArrowDown" ? 1 : -1))));
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (!open) setOpen(true);
+      else if (filteredOptions[activeIndex]) choose(filteredOptions[activeIndex]);
+    }
+    if (event.key === "Escape") setOpen(false);
+  };
+  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__ */ 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__ */ jsx7("span", { className: "fe-selection__actions", children: /* @__PURE__ */ jsx7("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
+      ] }),
+      clearable && selectedOptions.length > 0 && /* @__PURE__ */ jsx7("button", { type: "button", className: "fe-selection__clear", "aria-label": "Clear selection", onClick: clear }),
+      open && /* @__PURE__ */ jsxs7("div", { id: listboxId, className: "fe-selection__menu", 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__ */ 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__ */ 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__ */ jsx7("p", { className: "fe-selection__empty", children: "No matching options" }) })
+      ] })
+    ] }),
+    helperText && /* @__PURE__ */ jsx7("span", { className: "fe-selection__helper", children: helperText })
+  ] });
+});
+Selection.displayName = "Selection";
+function formatNumber(value, decimals = 2, thousandSeparator = ",", decimalSeparator = ".") {
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: decimals,
+    useGrouping: true
+  }).format(value).replace(/,/g, thousandSeparator).replace(/\./g, decimalSeparator);
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function groupInteger(value, separator) {
+  return value.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+}
+function normalizeNumberInput(raw, options) {
+  const { allowDecimal, decimalSeparator, thousandSeparator, min, max } = options;
+  const decimals = Math.max(0, options.decimals);
+  const negative = raw.trimStart().startsWith("-") && (min === void 0 || min < 0);
+  const decimalExpression = new RegExp(`[^0-9${allowDecimal ? escapeRegExp(decimalSeparator) : ""}]`, "g");
+  const cleaned = raw.replace(decimalExpression, "");
+  const decimalIndex = allowDecimal ? cleaned.indexOf(decimalSeparator) : -1;
+  const hasDecimal = decimalIndex >= 0;
+  const rawInteger = hasDecimal ? cleaned.slice(0, decimalIndex) : cleaned;
+  const rawFraction = hasDecimal ? cleaned.slice(decimalIndex + decimalSeparator.length).replace(new RegExp(escapeRegExp(decimalSeparator), "g"), "") : "";
+  const integer = rawInteger.replace(/^0+(?=\d)/, "") || (rawInteger ? "0" : "");
+  const fraction = rawFraction.slice(0, decimals);
+  if (!integer && !fraction) return { display: negative ? "-" : "", value: null };
+  const numericValue = Number(`${negative ? "-" : ""}${integer || "0"}${hasDecimal ? `.${fraction || "0"}` : ""}`);
+  if (!Number.isFinite(numericValue)) return { display: "", value: null };
+  const lowerBound = min === void 0 ? numericValue : Math.max(numericValue, min);
+  const value = max === void 0 ? lowerBound : Math.min(lowerBound, max);
+  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, errorMessage, className, onBlur, onFocus, "aria-describedby": ariaDescribedBy, ...props }, ref) {
+  const generatedId = useId();
+  const messageId2 = `${generatedId}-message`;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState3(defaultValue);
+  const [focused, setFocused] = useState3(false);
+  const actualValue = isControlled ? value ?? null : internalValue;
+  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]);
+  const updateValue = (nextText) => {
+    const next = normalizeNumberInput(nextText, { allowDecimal, decimals, decimalSeparator, thousandSeparator, min, max });
+    setText(next.display);
+    const nextValue = next.value;
+    if (!isControlled) setInternalValue(nextValue);
+    onValueChange?.(nextValue);
+  };
+  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, "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] = 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__ */ 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__ */ 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");
+function formatDate(date, format) {
+  return format.replace(/yyyy/g, String(date.getFullYear())).replace(/MM/g, pad(date.getMonth() + 1)).replace(/dd/g, pad(date.getDate())).replace(/HH/g, pad(date.getHours())).replace(/mm/g, pad(date.getMinutes()));
+}
+function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function sameDay(first, second) {
+  return !!first && !!second && startOfDay(first).getTime() === startOfDay(second).getTime();
+}
+function mergeDateTime(day, time) {
+  const [hours, minutes] = time.split(":").map(Number);
+  const next = new Date(day);
+  next.setHours(hours || 0, minutes || 0, 0, 0);
+  return next;
+}
+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] = 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] = 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) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, []);
+  const setSingle = (next) => {
+    if (!controlled) setSingleInternal(next);
+    props.onChange?.(next);
+  };
+  const setRange = (next) => {
+    if (!controlled) setRangeInternal(next);
+    props.onChange?.(next);
+  };
+  const selectDay = (day) => {
+    if (!isRange) {
+      setSingle(mergeDateTime(day, singleValue ? `${pad(singleValue.getHours())}:${pad(singleValue.getMinutes())}` : "00:00"));
+      setOpen(false);
+      return;
+    }
+    const [start, end] = rangeValue;
+    if (!start || end || editingEnd) {
+      setRange([mergeDateTime(day, start ? `${pad(start.getHours())}:${pad(start.getMinutes())}` : "00:00"), null]);
+      setEditingEnd(false);
+      return;
+    }
+    const nextEnd = mergeDateTime(day, "00:00");
+    setRange(nextEnd < start ? [nextEnd, start] : [start, nextEnd]);
+    setEditingEnd(false);
+  };
+  const shownValue = isRange ? [rangeValue[0] && formatDate(rangeValue[0], format), rangeValue[1] && formatDate(rangeValue[1], format)].filter(Boolean).join(" \u2014 ") : singleValue && formatDate(singleValue, format);
+  const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);
+  const offset = (firstDay.getDay() + 6) % 7;
+  const days = Array.from({ length: 42 }, (_, index) => new Date(month.getFullYear(), month.getMonth(), index - offset + 1));
+  const selectedForTime = isRange ? editingEnd ? rangeValue[1] : rangeValue[0] : singleValue;
+  const setTime = (time) => {
+    if (!selectedForTime) return;
+    const next = mergeDateTime(selectedForTime, time);
+    if (isRange) setRange(editingEnd ? [rangeValue[0], next] : [next, rangeValue[1]]);
+    else setSingle(next);
+  };
+  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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs7("label", { className: "fe-datetime-picker__time", children: [
+        "Time",
+        /* @__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 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] = useState4(false);
+  const id = useId2();
+  const trigger = cloneElement(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
+    children.props.onMouseEnter?.(event);
+    setVisible(true);
+  }, onMouseLeave: (event) => {
+    children.props.onMouseLeave?.(event);
+    setVisible(false);
+  }, onFocus: (event) => {
+    children.props.onFocus?.(event);
+    setVisible(true);
+  }, onBlur: (event) => {
+    children.props.onBlur?.(event);
+    setVisible(false);
+  } });
+  return /* @__PURE__ */ jsxs8("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
+    trigger,
+    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 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] = useState5(defaultExpanded);
+  const isExpanded = expanded ?? internalExpanded;
+  const id = useId3();
+  const toggle = () => {
+    if (disabled) return;
+    const next = !isExpanded;
+    if (expanded === void 0) setInternalExpanded(next);
+    onExpandedChange?.(next);
+  };
+  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 createPortal2 } 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 createPortal2(
+    /* @__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__ */ 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,
@@ -233,5 +1083,11 @@ export {
   TableHead,
   TableHeader,
   TableRow,
-  getIconSize
+  TextArea,
+  TextInput,
+  Toggle,
+  Tooltip,
+  formatNumber,
+  getIconSize,
+  message
 };