@dragunio/fe-libs 0.1.5 → 0.1.7

package/dist/index.js

@@ -20,8 +20,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Avatar: () => Avatar,
+  AvatarGroup: () => AvatarGroup,
   Button: () => Button,
+  ButtonBar: () => ButtonBar,
+  Checkbox: () => Checkbox,
   ChevronDownIcon: () => ChevronDownIcon,
+  ChevronUpIcon: () => ChevronUpIcon,
   Chip: () => Chip,
   CloseIcon: () => CloseIcon,
   CurrencyInput: () => CurrencyInput,
@@ -31,10 +36,14 @@ __export(index_exports, {
   Loading: () => Loading,
   Message: () => Message,
   Modal: () => Modal,
+  MoreHorizontalIcon: () => MoreHorizontalIcon,
+  MoreVerticalIcon: () => MoreVerticalIcon,
   NumberInput: () => NumberInput,
   Pagination: () => Pagination,
   PlusIcon: () => PlusIcon,
   ProgressBar: () => ProgressBar,
+  RadioButton: () => RadioButton,
+  RadioGroup: () => RadioGroup,
   SearchIcon: () => SearchIcon,
   Selection: () => Selection,
   Skeleton: () => Skeleton,
@@ -143,6 +152,9 @@ var Button = (0, import_react.forwardRef)(
 );
 Button.displayName = "Button";
 
+// packages/button-bar/src/index.tsx
+var import_react2 = require("react");
+
 // packages/icons/src/svgItems/general.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var primaryColor = "#101828";
@@ -263,6 +275,18 @@ function ChevronDownIcon(props) {
     }
   ) });
 }
+function ChevronUpIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "path",
+    {
+      d: "m6 15 6-6 6 6",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 function CloseIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "path",
@@ -274,6 +298,20 @@ function CloseIcon(props) {
     }
   ) });
 }
+function MoreHorizontalIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "5", cy: "12", r: "1.75", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "1.75", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "19", cy: "12", r: "1.75", fill: "currentColor" })
+  ] });
+}
+function MoreVerticalIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { ...iconProps4(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "5", r: "1.75", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "12", r: "1.75", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "19", r: "1.75", fill: "currentColor" })
+  ] });
+}
 function SearchIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { ...iconProps4(props), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "11", cy: "11", r: "6.5", stroke: "currentColor", strokeWidth: "2" }),
@@ -289,12 +327,111 @@ function SearchIcon(props) {
   ] });
 }
 
-// packages/table/src/index.tsx
+// packages/button-bar/src/index.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var import_react3 = require("react");
+function ButtonBar({
+  actions,
+  maxVisible = actions.length,
+  moreButtonProps,
+  moreLabel = "More actions",
+  className,
+  ...props
+}) {
+  const [isMoreOpen, setIsMoreOpen] = (0, import_react2.useState)(false);
+  const rootRef = (0, import_react2.useRef)(null);
+  const moreMenuId = (0, import_react2.useId)();
+  const visibleCount = Math.max(0, Math.floor(maxVisible));
+  const visibleActions = actions.slice(0, visibleCount);
+  const overflowActions = actions.slice(visibleCount);
+  const hasOverflow = overflowActions.length > 0;
+  const {
+    onClick: onMoreClick,
+    disabled: moreDisabled,
+    "aria-label": moreAriaLabel,
+    ...moreButtonRestProps
+  } = moreButtonProps ?? {};
+  (0, import_react2.useEffect)(() => {
+    if (!isMoreOpen) return;
+    const onPointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) {
+        setIsMoreOpen(false);
+      }
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setIsMoreOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isMoreOpen]);
+  const renderAction = (action, shouldCloseMore = false) => {
+    const { id, onClick, disabled, ...buttonProps } = action;
+    return /* @__PURE__ */ (0, import_react3.createElement)(
+      Button,
+      {
+        ...buttonProps,
+        disabled,
+        key: id,
+        onClick: (event) => {
+          onClick?.(event);
+          if (shouldCloseMore && !disabled) setIsMoreOpen(false);
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      ...props,
+      className: ["fe-button-bar", className].filter(Boolean).join(" "),
+      ref: rootRef,
+      children: [
+        visibleActions.map((action) => renderAction(action)),
+        hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "fe-button-bar__more", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Button,
+            {
+              hierarchy: "secondary-gray",
+              ...moreButtonRestProps,
+              "aria-controls": moreMenuId,
+              "aria-expanded": isMoreOpen,
+              "aria-haspopup": "true",
+              "aria-label": moreAriaLabel ?? moreLabel,
+              disabled: moreDisabled,
+              icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MoreHorizontalIcon, {}),
+              iconOnly: true,
+              onClick: (event) => {
+                onMoreClick?.(event);
+                if (!event.defaultPrevented) setIsMoreOpen((open) => !open);
+              }
+            }
+          ),
+          isMoreOpen && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "div",
+            {
+              "aria-label": moreLabel,
+              className: "fe-button-bar__menu",
+              id: moreMenuId,
+              role: "group",
+              children: overflowActions.map((action) => renderAction(action, true))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// packages/table/src/index.tsx
+var import_react5 = require("react");
 
 // packages/pagination/src/index.tsx
-var import_react2 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 var range = (start, end) => Array.from({ length: Math.max(0, end - start + 1) }, (_, index) => start + index);
 function getItems(totalPages, page, siblingCount, boundaryCount) {
@@ -326,9 +463,9 @@ function Pagination({
   ...props
 }) {
   const safeTotalPages = Math.max(1, Math.floor(totalPages));
-  const [uncontrolledPage, setUncontrolledPage] = (0, import_react2.useState)(() => clamp(defaultPage, 1, safeTotalPages));
+  const [uncontrolledPage, setUncontrolledPage] = (0, import_react4.useState)(() => clamp(defaultPage, 1, safeTotalPages));
   const currentPage = clamp(page ?? uncontrolledPage, 1, safeTotalPages);
-  const items = (0, import_react2.useMemo)(
+  const items = (0, import_react4.useMemo)(
     () => getItems(safeTotalPages, currentPage, Math.max(0, siblingCount), Math.max(0, boundaryCount)),
     [safeTotalPages, currentPage, siblingCount, boundaryCount]
   );
@@ -337,9 +474,9 @@ function Pagination({
     if (page === void 0) setUncontrolledPage(resolvedPage);
     if (resolvedPage !== currentPage) onPageChange?.(resolvedPage);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("nav", { className: ["fe-pagination", className].filter(Boolean).join(" "), "aria-label": "Pagination", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u2039", "aria-label": previousLabel, disabled: disabled || currentPage === 1, onClick: () => selectPage(currentPage - 1) }),
-    items.map((item, index) => item === "start-ellipsis" || item === "end-ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "fe-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, `${item}-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("nav", { className: ["fe-pagination", className].filter(Boolean).join(" "), "aria-label": "Pagination", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u2039", "aria-label": previousLabel, disabled: disabled || currentPage === 1, onClick: () => selectPage(currentPage - 1) }),
+    items.map((item, index) => item === "start-ellipsis" || item === "end-ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, `${item}-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       Button,
       {
         className: "fe-pagination__button",
@@ -353,13 +490,13 @@ function Pagination({
       },
       item
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u203A", "aria-label": nextLabel, disabled: disabled || currentPage === safeTotalPages, onClick: () => selectPage(currentPage + 1) })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u203A", "aria-label": nextLabel, disabled: disabled || currentPage === safeTotalPages, onClick: () => selectPage(currentPage + 1) })
   ] });
 }
 
 // packages/table/src/index.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var TableContext = (0, import_react3.createContext)({ striped: false });
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var TableContext = (0, import_react5.createContext)({ striped: false });
 var MIN_COLUMN_WIDTH = 96;
 var MAX_COLUMN_WIDTH = 1200;
 function getColumnCount(headers, data) {
@@ -368,7 +505,7 @@ function getColumnCount(headers, data) {
 function getText(value) {
   if (typeof value === "string" || typeof value === "number") return String(value);
   if (Array.isArray(value)) return value.map(getText).join("");
-  if ((0, import_react3.isValidElement)(value)) return getText(value.props.children);
+  if ((0, import_react5.isValidElement)(value)) return getText(value.props.children);
   return "";
 }
 function autoColumnSize(columnIndex, headers, data) {
@@ -404,37 +541,37 @@ function DataTable({
 }) {
   const columnCount = getColumnCount(headers, data);
   const safeMinWidth = Math.max(1, minColumnWidth);
-  const generatedSizes = (0, import_react3.useMemo)(
+  const generatedSizes = (0, import_react5.useMemo)(
     () => getInitialColumnSizes(headers, data, defaultColumnSizes, safeMinWidth),
     [headers, data, defaultColumnSizes, safeMinWidth]
   );
-  const [uncontrolledSizes, setUncontrolledSizes] = (0, import_react3.useState)(generatedSizes);
+  const [uncontrolledSizes, setUncontrolledSizes] = (0, import_react5.useState)(generatedSizes);
   const shouldPaginate = pagination ?? pageSize !== void 0;
   const safePageSize = Math.max(1, Math.floor(pageSize ?? 10));
   const totalPages = Math.max(1, Math.ceil(data.length / safePageSize));
-  const [uncontrolledPage, setUncontrolledPage] = (0, import_react3.useState)(() => Math.min(Math.max(1, defaultPage), totalPages));
+  const [uncontrolledPage, setUncontrolledPage] = (0, import_react5.useState)(() => Math.min(Math.max(1, defaultPage), totalPages));
   const currentPage = Math.min(Math.max(1, page ?? uncontrolledPage), totalPages);
   const pagedData = shouldPaginate ? data.slice((currentPage - 1) * safePageSize, currentPage * safePageSize) : data;
-  const resizeState = (0, import_react3.useRef)();
-  const [isResizing, setIsResizing] = (0, import_react3.useState)(false);
+  const resizeState = (0, import_react5.useRef)();
+  const [isResizing, setIsResizing] = (0, import_react5.useState)(false);
   const sizes2 = columnSizes ? getInitialColumnSizes(headers, data, columnSizes, safeMinWidth).map((size) => Math.max(safeMinWidth, size)) : uncontrolledSizes.map((size) => Math.max(safeMinWidth, size));
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (columnSizes) return;
     setUncontrolledSizes((currentSizes) => {
       const nextSizes = generatedSizes.map((generatedSize, index) => currentSizes[index] ?? generatedSize);
       return sameSizes(currentSizes, nextSizes) ? currentSizes : nextSizes;
     });
   }, [columnSizes, generatedSizes]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (page === void 0 && uncontrolledPage > totalPages) setUncontrolledPage(totalPages);
   }, [page, totalPages, uncontrolledPage]);
-  const updateColumnSize = (0, import_react3.useCallback)((columnIndex, nextSize) => {
+  const updateColumnSize = (0, import_react5.useCallback)((columnIndex, nextSize) => {
     const clampedSize = Math.min(MAX_COLUMN_WIDTH, Math.max(safeMinWidth, Math.round(nextSize)));
     const nextSizes = sizes2.map((size, index) => index === columnIndex ? clampedSize : size);
     if (!columnSizes) setUncontrolledSizes(nextSizes);
     onColumnResize?.(nextSizes, columnIndex);
   }, [columnSizes, onColumnResize, safeMinWidth, sizes2]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const onPointerMove = (event) => {
       const activeResize = resizeState.current;
       if (!activeResize) return;
@@ -458,14 +595,14 @@ function DataTable({
     if (nextPage !== currentPage) onPageChange?.(nextPage);
   };
   const resolvedPaginationPosition = paginationPosition === "middle-bottom" ? "bottom-center" : paginationPosition;
-  const paginationControl = shouldPaginate && totalPages > 1 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `fe-table__pagination fe-table__pagination--${resolvedPaginationPosition}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Pagination, { page: currentPage, totalPages, onPageChange: changePage }) }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: [
+  const paginationControl = shouldPaginate && totalPages > 1 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `fe-table__pagination fe-table__pagination--${resolvedPaginationPosition}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Pagination, { page: currentPage, totalPages, onPageChange: changePage }) }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: [
     resolvedPaginationPosition === "top-right" && paginationControl,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("colgroup", { children: sizes2.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("col", { style: { width: `${size}px` } }, index)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("th", { scope: "col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("colgroup", { children: sizes2.map((size, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("col", { style: { width: `${size}px` } }, index)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("th", { scope: "col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "span",
           {
             className: "fe-table__resize-handle",
@@ -489,7 +626,7 @@ function DataTable({
           }
         )
       ] }, columnIndex)) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { children: pagedData.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { children: row[columnIndex] }, columnIndex)) }, shouldPaginate ? (currentPage - 1) * safePageSize + rowIndex : rowIndex)) })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: pagedData.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { children: row[columnIndex] }, columnIndex)) }, shouldPaginate ? (currentPage - 1) * safePageSize + rowIndex : rowIndex)) })
     ] }),
     resolvedPaginationPosition !== "top-right" && paginationControl
   ] });
@@ -507,52 +644,71 @@ function Table({
   paginationPosition,
   ...props
 }) {
-  if (headers || data) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, pagination, pageSize, page, defaultPage, onPageChange, paginationPosition, ...props });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
+  if (headers || data) return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, pagination, pageSize, page, defaultPage, onPageChange, paginationPosition, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
 }
 function TableHead(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { ...props });
 }
 function TableBody(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { ...props });
 }
 function TableRow({ children, ...props }) {
-  const { striped } = (0, import_react3.useContext)(TableContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { "data-striped": striped || void 0, ...props, children });
+  const { striped } = (0, import_react5.useContext)(TableContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { "data-striped": striped || void 0, ...props, children });
 }
 function TableCell({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("td", { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { ...props, children });
 }
 function TableHeader({ children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("th", { scope: "col", ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { scope: "col", ...props, children });
 }
 function TableCaption(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("caption", { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("caption", { ...props });
 }
 
 // packages/toggle/src/index.tsx
-var import_react4 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Toggle = (0, import_react4.forwardRef)(function Toggle2({ color = "#16a34a", label, className, style, id, ...props }, ref) {
-  const classes = ["fe-toggle", className].filter(Boolean).join(" ");
+var import_react6 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Toggle = (0, import_react6.forwardRef)(function Toggle2({
+  color = "#16a34a",
+  label,
+  labelPosition = "right",
+  className,
+  style,
+  id,
+  ...props
+}, ref) {
+  const classes = ["fe-toggle", `fe-toggle--label-${labelPosition}`, className].filter(Boolean).join(" ");
   const toggleStyle = {
     "--fe-toggle-color": color,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: classes, style: toggleStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { ref, id, className: "fe-toggle__input", type: "checkbox", role: "switch", ...props }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-toggle__label", children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: classes, style: toggleStyle, children: [
+    label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fe-toggle__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "input",
+      {
+        ref,
+        id,
+        className: "fe-toggle__input",
+        type: "checkbox",
+        role: "switch",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
+    label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "fe-toggle__label", children: label })
   ] });
 });
 Toggle.displayName = "Toggle";
 
 // packages/drawer/src/index.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Drawer({ open, onClose, title, footer, side = "right", width = 400, fullScreen = false, children, closeOnBackdropClick = true, className, style, ...props }) {
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -562,28 +718,28 @@ function Drawer({ open, onClose, title, footer, side = "right", width = 400, ful
   }, [onClose, open]);
   if (!open || typeof document === "undefined") return null;
   const panelStyle = !fullScreen && (side === "left" || side === "right") ? { ...style, width: typeof width === "number" ? `${width}px` : width } : style;
-  return (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
+  return (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
     if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("aside", { className: ["fe-drawer", `fe-drawer--${side}`, fullScreen && "fe-drawer--full-screen", className].filter(Boolean).join(" "), style: panelStyle, role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : "Drawer", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("header", { className: "fe-drawer__header", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("aside", { className: ["fe-drawer", `fe-drawer--${side}`, fullScreen && "fe-drawer--full-screen", className].filter(Boolean).join(" "), style: panelStyle, role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : "Drawer", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("header", { className: "fe-drawer__header", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fe-drawer__body", children }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("footer", { className: "fe-drawer__footer", children: footer })
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fe-drawer__body", children }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("footer", { className: "fe-drawer__footer", children: footer })
   ] }) }), document.body);
 }
 
 // packages/form-controls/src/controls/TextInput/text-input.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 
 // packages/tooltip/src/index.tsx
-var import_react6 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Tooltip({ content, children, placement = "top", disabled, className, ...props }) {
-  const [visible, setVisible] = (0, import_react6.useState)(false);
-  const id = (0, import_react6.useId)();
-  const trigger = (0, import_react6.cloneElement)(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
+  const [visible, setVisible] = (0, import_react8.useState)(false);
+  const id = (0, import_react8.useId)();
+  const trigger = (0, import_react8.cloneElement)(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
     children.props.onMouseEnter?.(event);
     setVisible(true);
   }, onMouseLeave: (event) => {
@@ -596,14 +752,14 @@ function Tooltip({ content, children, placement = "top", disabled, className, ..
     children.props.onBlur?.(event);
     setVisible(false);
   } });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
     trigger,
-    visible && !disabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
+    visible && !disabled && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
   ] });
 }
 
 // packages/form-controls/src/controls/Field/field.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function getFieldError(error, errorMessage) {
   if (errorMessage !== void 0 && errorMessage !== null) return errorMessage;
   if (typeof error !== "boolean") return error;
@@ -620,10 +776,10 @@ function FieldLabel({
   isRequired = false
 }) {
   if (!label) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "fe-field__label", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { id, children: label }),
-    isRequired && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" }),
-    description && descriptionDisplay === "tooltip" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Tooltip, { content: description, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "fe-field__label", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id, children: label }),
+    isRequired && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" }),
+    description && descriptionDisplay === "tooltip" && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Tooltip, { content: description, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "span",
       {
         className: "fe-field__info",
@@ -642,7 +798,7 @@ function FieldMessage({
   descriptionDisplay
 }) {
   if (error !== void 0 && error !== false && error !== null)
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "span",
       {
         id,
@@ -652,13 +808,13 @@ function FieldMessage({
       }
     );
   if (description && descriptionDisplay === "inline")
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { id, className: "fe-field__message", children: description });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id, className: "fe-field__message", children: description });
   return null;
 }
 
 // packages/form-controls/src/controls/TextInput/text-input.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var TextInput = (0, import_react7.forwardRef)(
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var TextInput = (0, import_react9.forwardRef)(
   function TextInput2({
     value,
     defaultValue = "",
@@ -688,12 +844,12 @@ var TextInput = (0, import_react7.forwardRef)(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = (0, import_react7.useId)();
+    const generatedId = (0, import_react9.useId)();
     const inputId = id ?? generatedId + "-input";
     const labelId = generatedId + "-label";
     const messageId2 = generatedId + "-message";
     const controlled = value !== void 0;
-    const [internalValue, setInternalValue] = (0, import_react7.useState)(defaultValue);
+    const [internalValue, setInternalValue] = (0, import_react9.useState)(defaultValue);
     const currentValue = controlled ? value : internalValue;
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
@@ -714,7 +870,7 @@ var TextInput = (0, import_react7.forwardRef)(
       onValueChange?.("");
       onClear?.();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "div",
       {
         className: [
@@ -723,7 +879,7 @@ var TextInput = (0, import_react7.forwardRef)(
           className
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             FieldLabel,
             {
               id: labelId,
@@ -733,10 +889,10 @@ var TextInput = (0, import_react7.forwardRef)(
               isRequired
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "fe-text-input__control", children: [
-            resolvedPrefix && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "fe-text-input__prefix", children: resolvedPrefix }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "fe-text-input__input-wrap", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "fe-text-input__control", children: [
+            resolvedPrefix && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fe-text-input__prefix", children: resolvedPrefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "fe-text-input__input-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "input",
                 {
                   ref,
@@ -758,26 +914,26 @@ var TextInput = (0, import_react7.forwardRef)(
                   ...props
                 }
               ),
-              isRequired && placeholder && !currentValue && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "fe-text-input__placeholder", "aria-hidden": "true", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: placeholder }),
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "fe-field__required", children: "*" })
+              isRequired && placeholder && !currentValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "fe-text-input__placeholder", "aria-hidden": "true", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fe-field__required", children: "*" })
               ] })
             ] }),
-            resolvedSuffix && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "fe-text-input__suffix", children: resolvedSuffix }),
-            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            resolvedSuffix && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fe-text-input__suffix", children: resolvedSuffix }),
+            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               Button,
               {
                 hierarchy: "tertiary-gray",
                 size: "24",
                 iconOnly: true,
-                icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon, { size: 14 }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon, { size: 14 }),
                 "aria-label": clearLabel,
                 onClick: clear,
                 className: "fe-text-input__clear"
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             FieldMessage,
             {
               id: messageId2,
@@ -794,9 +950,9 @@ var TextInput = (0, import_react7.forwardRef)(
 TextInput.displayName = "TextInput";
 
 // packages/form-controls/src/controls/TextArea/text-area.tsx
-var import_react8 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var TextArea = (0, import_react8.forwardRef)(
+var import_react10 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var TextArea = (0, import_react10.forwardRef)(
   function TextArea2({
     value,
     defaultValue = "",
@@ -808,6 +964,7 @@ var TextArea = (0, import_react8.forwardRef)(
     helperText,
     error,
     errorMessage,
+    autosize = false,
     clearable = false,
     onClear,
     clearLabel = "Clear text area",
@@ -822,12 +979,13 @@ var TextArea = (0, import_react8.forwardRef)(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = (0, import_react8.useId)();
+    const generatedId = (0, import_react10.useId)();
     const inputId = id ?? generatedId + "-input";
     const labelId = generatedId + "-label";
     const messageId2 = generatedId + "-message";
     const controlled = value !== void 0;
-    const [internalValue, setInternalValue] = (0, import_react8.useState)(defaultValue);
+    const [internalValue, setInternalValue] = (0, import_react10.useState)(defaultValue);
+    const textareaRef = (0, import_react10.useRef)(null);
     const currentValue = controlled ? value : internalValue;
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
@@ -841,21 +999,32 @@ var TextArea = (0, import_react8.forwardRef)(
       ariaLabelledBy,
       label ? labelId : void 0
     );
+    const resizeToContent = (textarea) => {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    };
+    (0, import_react10.useImperativeHandle)(ref, () => textareaRef.current, []);
+    (0, import_react10.useLayoutEffect)(() => {
+      if (autosize && textareaRef.current) {
+        resizeToContent(textareaRef.current);
+      }
+    }, [autosize, currentValue]);
     const clear = () => {
       if (!controlled) setInternalValue("");
       onValueChange?.("");
       onClear?.();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "div",
       {
         className: [
           "fe-text-area",
           hasError && "fe-text-area--error",
+          autosize && "fe-text-area--autosize",
           className
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             FieldLabel,
             {
               id: labelId,
@@ -865,11 +1034,11 @@ var TextArea = (0, import_react8.forwardRef)(
               isRequired
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "fe-text-area__control", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "fe-text-area__control", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "textarea",
               {
-                ref,
+                ref: textareaRef,
                 id: inputId,
                 value: currentValue,
                 placeholder,
@@ -882,30 +1051,31 @@ var TextArea = (0, import_react8.forwardRef)(
                 "aria-describedby": describedBy,
                 onChange: (event) => {
                   if (!controlled) setInternalValue(event.target.value);
+                  if (autosize) resizeToContent(event.currentTarget);
                   onValueChange?.(event.target.value);
                   onChange?.(event);
                 },
                 ...props
               }
             ),
-            isRequired && placeholder && !currentValue && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "fe-text-area__placeholder", "aria-hidden": "true", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: placeholder }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "fe-field__required", children: "*" })
+            isRequired && placeholder && !currentValue && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "fe-text-area__placeholder", "aria-hidden": "true", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: placeholder }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-field__required", children: "*" })
             ] }),
-            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               Button,
               {
                 hierarchy: "tertiary-gray",
                 size: "24",
                 iconOnly: true,
-                icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon, { size: 14 }),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon, { size: 14 }),
                 "aria-label": clearLabel,
                 onClick: clear,
                 className: "fe-text-area__clear"
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             FieldMessage,
             {
               id: messageId2,
@@ -922,10 +1092,10 @@ var TextArea = (0, import_react8.forwardRef)(
 TextArea.displayName = "TextArea";
 
 // packages/form-controls/src/controls/Selection/selection.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Selection = (0, import_react9.forwardRef)(
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Selection = (0, import_react11.forwardRef)(
   function Selection2({
     className,
     label,
@@ -954,7 +1124,7 @@ var Selection = (0, import_react9.forwardRef)(
     "aria-labelledby": ariaLabelledBy,
     ...props
   }, ref) {
-    const generatedId = (0, import_react9.useId)();
+    const generatedId = (0, import_react11.useId)();
     const triggerId = id ?? generatedId + "-trigger";
     const listboxId = triggerId + "-listbox";
     const labelId = generatedId + "-label";
@@ -972,7 +1142,7 @@ var Selection = (0, import_react9.forwardRef)(
       label ? labelId : void 0
     );
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = (0, import_react9.useState)(
+    const [internalValue, setInternalValue] = (0, import_react11.useState)(
       defaultValue ?? (multiple ? [] : "")
     );
     const selectedValue = isControlled ? value : internalValue;
@@ -980,13 +1150,13 @@ var Selection = (0, import_react9.forwardRef)(
     const selectedOptions = options.filter(
       (option) => selectedValues.some((item) => String(item) === String(option.value))
     );
-    const [open, setOpen] = (0, import_react9.useState)(false);
-    const [query, setQuery] = (0, import_react9.useState)("");
-    const [activeIndex, setActiveIndex] = (0, import_react9.useState)(0);
-    const rootRef = (0, import_react9.useRef)(null);
-    const menuRef = (0, import_react9.useRef)(null);
-    const [menuPosition, setMenuPosition] = (0, import_react9.useState)(null);
-    (0, import_react9.useEffect)(() => {
+    const [open, setOpen] = (0, import_react11.useState)(false);
+    const [query, setQuery] = (0, import_react11.useState)("");
+    const [activeIndex, setActiveIndex] = (0, import_react11.useState)(0);
+    const rootRef = (0, import_react11.useRef)(null);
+    const menuRef = (0, import_react11.useRef)(null);
+    const [menuPosition, setMenuPosition] = (0, import_react11.useState)(null);
+    (0, import_react11.useEffect)(() => {
       const close = (event) => {
         const target = event.target;
         if (!rootRef.current?.contains(target) && !menuRef.current?.contains(target))
@@ -995,7 +1165,7 @@ var Selection = (0, import_react9.forwardRef)(
       document.addEventListener("mousedown", close);
       return () => document.removeEventListener("mousedown", close);
     }, []);
-    (0, import_react9.useLayoutEffect)(() => {
+    (0, import_react11.useLayoutEffect)(() => {
       if (!open) return;
       const updateMenuPosition = () => {
         const rect = rootRef.current?.getBoundingClientRect();
@@ -1072,7 +1242,7 @@ var Selection = (0, import_react9.forwardRef)(
       }
       if (event.key === "Escape") setOpen(false);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         ref,
@@ -1087,7 +1257,7 @@ var Selection = (0, import_react9.forwardRef)(
         ].filter(Boolean).join(" "),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             FieldLabel,
             {
               id: labelId,
@@ -1097,8 +1267,8 @@ var Selection = (0, import_react9.forwardRef)(
               isRequired
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref: rootRef, className: "fe-selection__control", children: [
-            name && selectedValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: rootRef, className: "fe-selection__control", children: [
+            name && selectedValues.map((item) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "input",
               {
                 type: "hidden",
@@ -1107,7 +1277,7 @@ var Selection = (0, import_react9.forwardRef)(
               },
               String(item)
             )),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
               "button",
               {
                 id: triggerId,
@@ -1125,7 +1295,7 @@ var Selection = (0, import_react9.forwardRef)(
                 onClick: () => setOpen((current) => !current),
                 onKeyDown: onTriggerKeyDown,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "span",
                     {
                       className: [
@@ -1133,30 +1303,30 @@ var Selection = (0, import_react9.forwardRef)(
                         !selectedOptions.length && "is-placeholder",
                         tag && selectedOptions.length > 1 && "is-tags"
                       ].filter(Boolean).join(" "),
-                      children: displayLabel ? tag && multiple ? selectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                      children: displayLabel ? tag && multiple ? selectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                         "span",
                         {
                           className: "fe-selection__tag",
                           children: [
                             option.label,
-                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "aria-hidden": "true", children: "\xD7" })
+                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: "\xD7" })
                           ]
                         },
                         String(option.value)
-                      )) : displayLabel.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { children: [
+                      )) : displayLabel.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
                         item,
                         index < displayLabel.length - 1 ? ", " : ""
-                      ] }, index)) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: placeholder }),
-                        isRequired && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
+                      ] }, index)) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: placeholder }),
+                        isRequired && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                       ] })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-selection__actions", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-selection__actions", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
                 ]
               }
             ),
-            clearable && selectedOptions.length > 0 && !disabled && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            clearable && selectedOptions.length > 0 && !disabled && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "button",
               {
                 type: "button",
@@ -1166,7 +1336,7 @@ var Selection = (0, import_react9.forwardRef)(
               }
             ),
             open && menuPosition && (0, import_react_dom2.createPortal)(
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 "div",
                 {
                   ref: menuRef,
@@ -1181,9 +1351,9 @@ var Selection = (0, import_react9.forwardRef)(
                   role: "listbox",
                   "aria-multiselectable": multiple || void 0,
                   children: [
-                    searchable && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "fe-selection__search", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "aria-hidden": "true", children: "\u2315" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    searchable && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "fe-selection__search", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: "\u2315" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                         "input",
                         {
                           autoFocus: true,
@@ -1197,11 +1367,11 @@ var Selection = (0, import_react9.forwardRef)(
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
                       const isSelected = selectedValues.some(
                         (item) => String(item) === String(option.value)
                       );
-                      return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                         "button",
                         {
                           type: "button",
@@ -1215,8 +1385,8 @@ var Selection = (0, import_react9.forwardRef)(
                           onMouseMove: () => setActiveIndex(index),
                           onClick: () => choose(option),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: option.label }),
-                            isSelected && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: option.label }),
+                            isSelected && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                               "span",
                               {
                                 className: "fe-selection__check",
@@ -1228,14 +1398,14 @@ var Selection = (0, import_react9.forwardRef)(
                         },
                         String(option.value)
                       );
-                    }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "fe-selection__empty", children: "No matching options" }) })
+                    }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "fe-selection__empty", children: "No matching options" }) })
                   ]
                 }
               ),
               document.body
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             FieldMessage,
             {
               id: messageId2,
@@ -1252,8 +1422,8 @@ var Selection = (0, import_react9.forwardRef)(
 Selection.displayName = "Selection";
 
 // packages/form-controls/src/controls/NumberInput/number-input.tsx
-var import_react10 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function formatNumber(value, decimals = 2, thousandSeparator = ",", decimalSeparator = ".") {
   return new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 0,
@@ -1267,6 +1437,11 @@ function escapeRegExp(value) {
 function groupInteger(value, separator) {
   return value.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
 }
+function roundToDecimals(value, decimals) {
+  const precision = Math.min(Math.max(0, decimals), 15);
+  const multiplier = 10 ** precision;
+  return Math.round((value + Number.EPSILON) * multiplier) / multiplier;
+}
 function normalizeNumberInput(raw, options) {
   const { allowDecimal, decimalSeparator, thousandSeparator, min, max } = options;
   const decimals = Math.max(0, options.decimals);
@@ -1305,7 +1480,7 @@ function normalizeNumberInput(raw, options) {
     value
   };
 }
-var NumberInput = (0, import_react10.forwardRef)(
+var NumberInput = (0, import_react12.forwardRef)(
   function NumberInput2({
     value,
     defaultValue = null,
@@ -1329,17 +1504,27 @@ var NumberInput = (0, import_react10.forwardRef)(
     placeholder,
     required,
     endAdornment,
+    prefix,
+    suffix,
+    Prefix,
+    Suffix,
+    step = 1,
+    showStepper = true,
+    incrementLabel = "Increase value",
+    decrementLabel = "Decrease value",
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
+    onKeyDown,
     ...props
   }, ref) {
-    const generatedId = (0, import_react10.useId)();
+    const inputRef = (0, import_react12.useRef)(null);
+    const generatedId = (0, import_react12.useId)();
     const messageId2 = generatedId + "-message";
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = (0, import_react10.useState)(defaultValue);
-    const [focused, setFocused] = (0, import_react10.useState)(false);
+    const [internalValue, setInternalValue] = (0, import_react12.useState)(defaultValue);
+    const [focused, setFocused] = (0, import_react12.useState)(false);
     const actualValue = isControlled ? value ?? null : internalValue;
-    const [text, setText] = (0, import_react10.useState)(
+    const [text, setText] = (0, import_react12.useState)(
       actualValue === null ? "" : formatNumber(
         actualValue,
         decimals,
@@ -1360,7 +1545,9 @@ var NumberInput = (0, import_react10.forwardRef)(
       ariaLabelledBy,
       label ? labelId : void 0
     );
-    (0, import_react10.useEffect)(() => {
+    const resolvedPrefix = prefix ?? Prefix;
+    const resolvedSuffix = suffix ?? Suffix;
+    (0, import_react12.useEffect)(() => {
       if (!focused)
         setText(
           actualValue === null ? "" : formatNumber(
@@ -1384,8 +1571,38 @@ var NumberInput = (0, import_react10.forwardRef)(
       if (!isControlled) setInternalValue(next.value);
       onValueChange?.(next.value);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-      "label",
+    const setValue = (nextValue) => {
+      const clamped = Math.min(
+        max ?? Number.POSITIVE_INFINITY,
+        Math.max(min ?? Number.NEGATIVE_INFINITY, nextValue)
+      );
+      const normalized = roundToDecimals(
+        clamped,
+        allowDecimal ? decimals : 0
+      );
+      setText(
+        formatNumber(
+          normalized,
+          decimals,
+          thousandSeparator,
+          decimalSeparator
+        )
+      );
+      if (!isControlled) setInternalValue(normalized);
+      onValueChange?.(normalized);
+    };
+    const adjustValue = (direction) => {
+      if (props.disabled || props.readOnly || !Number.isFinite(step) || step <= 0)
+        return;
+      const baseValue = actualValue ?? min ?? 0;
+      setValue(baseValue + direction * step);
+      inputRef.current?.focus();
+    };
+    const stepIsUsable = Number.isFinite(step) && step > 0;
+    const disableIncrement = Boolean(props.disabled || props.readOnly) || !stepIsUsable || max !== void 0 && actualValue !== null && actualValue >= max;
+    const disableDecrement = Boolean(props.disabled || props.readOnly) || !stepIsUsable || min !== void 0 && actualValue !== null && actualValue <= min;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "div",
       {
         className: [
           "fe-number-input",
@@ -1393,7 +1610,7 @@ var NumberInput = (0, import_react10.forwardRef)(
           className
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             FieldLabel,
             {
               id: labelId,
@@ -1403,38 +1620,89 @@ var NumberInput = (0, import_react10.forwardRef)(
               isRequired
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "fe-number-input__control", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              "input",
-              {
-                ref,
-                inputMode: allowDecimal ? "decimal" : "numeric",
-                value: text,
-                placeholder,
-                required: isRequired || required,
-                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-required": isRequired || void 0,
-                "aria-labelledby": labelledBy,
-                "aria-describedby": describedBy
-              }
-            ),
-            isRequired && placeholder && !text && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "fe-number-input__placeholder", "aria-hidden": "true", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: placeholder }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-field__required", children: "*" })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "fe-number-input__control", children: [
+            resolvedPrefix && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fe-number-input__prefix", children: resolvedPrefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "fe-number-input__input-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                "input",
+                {
+                  ref: (node) => {
+                    inputRef.current = node;
+                    if (typeof ref === "function") ref(node);
+                    else if (ref) ref.current = node;
+                  },
+                  inputMode: allowDecimal ? "decimal" : "numeric",
+                  value: text,
+                  placeholder,
+                  required: isRequired || required,
+                  onFocus: (event) => {
+                    setFocused(true);
+                    onFocus?.(event);
+                  },
+                  onChange: (event) => updateValue(event.target.value),
+                  onBlur: (event) => {
+                    setFocused(false);
+                    onBlur?.(event);
+                  },
+                  onKeyDown: (event) => {
+                    onKeyDown?.(event);
+                    if (event.defaultPrevented) return;
+                    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                      event.preventDefault();
+                      adjustValue(event.key === "ArrowUp" ? 1 : -1);
+                    }
+                  },
+                  ...props,
+                  "aria-invalid": hasError || void 0,
+                  "aria-required": isRequired || void 0,
+                  "aria-labelledby": labelledBy,
+                  "aria-describedby": describedBy
+                }
+              ),
+              isRequired && placeholder && !text && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                "span",
+                {
+                  className: "fe-number-input__placeholder",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: placeholder }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fe-field__required", children: "*" })
+                  ]
+                }
+              )
             ] }),
-            endAdornment
+            resolvedSuffix && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fe-number-input__suffix", children: resolvedSuffix }),
+            endAdornment,
+            showStepper && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "fe-number-input__stepper", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                Button,
+                {
+                  hierarchy: "tertiary-gray",
+                  size: "24",
+                  iconOnly: true,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronUpIcon, { size: 12 }),
+                  "aria-label": incrementLabel,
+                  disabled: disableIncrement,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => adjustValue(1)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                Button,
+                {
+                  hierarchy: "tertiary-gray",
+                  size: "24",
+                  iconOnly: true,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronDownIcon, { size: 12 }),
+                  "aria-label": decrementLabel,
+                  disabled: disableDecrement,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => adjustValue(-1)
+                }
+              )
+            ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             FieldMessage,
             {
               id: messageId2,
@@ -1451,8 +1719,8 @@ var NumberInput = (0, import_react10.forwardRef)(
 NumberInput.displayName = "NumberInput";
 
 // packages/form-controls/src/controls/CurrencyInput/currency-input.tsx
-var import_react11 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function CurrencyInput({
   suffix = "VND",
   currencies,
@@ -1463,13 +1731,13 @@ function CurrencyInput({
   disabled,
   ...props
 }) {
-  const [internalCurrency, setInternalCurrency] = (0, import_react11.useState)(
+  const [internalCurrency, setInternalCurrency] = (0, import_react13.useState)(
     defaultCurrency ?? currencies?.[0]?.code ?? ""
   );
   const selectedCurrency = currency ?? internalCurrency;
   const current = currencies?.find((item) => item.code === selectedCurrency);
   const currencySuffix = current?.suffix ?? current?.code ?? suffix;
-  const endAdornment = currencies?.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const endAdornment = currencies?.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     Selection,
     {
       className: "fe-currency-input__currency",
@@ -1488,8 +1756,8 @@ function CurrencyInput({
         onCurrencyChange?.(next);
       }
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fe-currency-input__suffix", children: currencySuffix });
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fe-currency-input__suffix", children: currencySuffix });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     NumberInput,
     {
       ...props,
@@ -1501,8 +1769,8 @@ function CurrencyInput({
 }
 
 // packages/form-controls/src/controls/DateTimePicker/date-time-picker.tsx
-var import_react12 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var pad = (value) => String(value).padStart(2, "0");
 function formatDate(date, format) {
   return format.replace(/yyyy/g, String(date.getFullYear())).replace(/MM/g, pad(date.getMonth() + 1)).replace(/dd/g, pad(date.getDate())).replace(/HH/g, pad(date.getHours())).replace(/mm/g, pad(date.getMinutes()));
@@ -1538,7 +1806,7 @@ function DateTimePicker(props) {
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy
   } = props;
-  const generatedId = (0, import_react12.useId)();
+  const generatedId = (0, import_react14.useId)();
   const triggerId = id ?? generatedId + "-trigger";
   const labelId = generatedId + "-label";
   const messageId2 = generatedId + "-message";
@@ -1556,28 +1824,28 @@ function DateTimePicker(props) {
   );
   const isRange = mode === "range";
   const controlled = props.value !== void 0;
-  const [singleInternal, setSingleInternal] = (0, import_react12.useState)(
+  const [singleInternal, setSingleInternal] = (0, import_react14.useState)(
     (!isRange ? props.defaultValue : null) ?? null
   );
-  const [rangeInternal, setRangeInternal] = (0, import_react12.useState)(
+  const [rangeInternal, setRangeInternal] = (0, import_react14.useState)(
     (isRange ? props.defaultValue : void 0) ?? [null, null]
   );
   const singleValue = !isRange ? props.value ?? singleInternal : null;
   const rangeValue = isRange ? props.value ?? rangeInternal : [null, null];
-  const [open, setOpen] = (0, import_react12.useState)(false);
-  const [month, setMonth] = (0, import_react12.useState)(
+  const [open, setOpen] = (0, import_react14.useState)(false);
+  const [month, setMonth] = (0, import_react14.useState)(
     () => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date())
   );
-  const [editingEnd, setEditingEnd] = (0, import_react12.useState)(false);
-  const rootRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const [editingEnd, setEditingEnd] = (0, import_react14.useState)(false);
+  const rootRef = (0, import_react14.useRef)(null);
+  (0, import_react14.useEffect)(() => {
     const onPointerDown = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
     };
     document.addEventListener("mousedown", onPointerDown);
     return () => document.removeEventListener("mousedown", onPointerDown);
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const setSingle = (next) => {
@@ -1633,7 +1901,7 @@ function DateTimePicker(props) {
       setRange(editingEnd ? [rangeValue[0], next] : [next, rangeValue[1]]);
     else setSingle(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       ref: rootRef,
@@ -1643,7 +1911,7 @@ function DateTimePicker(props) {
         className
       ].filter(Boolean).join(" "),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           FieldLabel,
           {
             id: labelId,
@@ -1653,7 +1921,7 @@ function DateTimePicker(props) {
             isRequired
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "button",
           {
             id: triggerId,
@@ -1667,29 +1935,29 @@ function DateTimePicker(props) {
             "aria-expanded": open,
             onClick: () => setOpen((current) => !current),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": "true", children: "\u25F7" }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-hidden": "true", children: "\u25F7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                 "span",
                 {
                   className: !shownValue && placeholder ? "fe-datetime-picker__value is-placeholder" : "fe-datetime-picker__value",
                   children: [
                     shownValue || placeholder || (isRange ? "Select date range" : "Select date and time"),
-                    isRequired && placeholder && !shownValue && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
+                    isRequired && placeholder && !shownValue && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
                   ]
                 }
               )
             ]
           }
         ),
-        open && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        open && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "div",
           {
             className: "fe-datetime-picker__popper",
             role: "dialog",
             "aria-label": "Date and time picker",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fe-datetime-picker__month", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fe-datetime-picker__month", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1700,11 +1968,11 @@ function DateTimePicker(props) {
                     children: "\u2039"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("strong", { children: month.toLocaleDateString(locale, {
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("strong", { children: month.toLocaleDateString(locale, {
                   month: "long",
                   year: "numeric"
                 }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1716,12 +1984,12 @@ function DateTimePicker(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: day }, day)) }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: day }, day)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
                 const inMonth = day.getMonth() === month.getMonth();
                 const selected = isRange ? sameDay(day, rangeValue[0]) || sameDay(day, rangeValue[1]) : sameDay(day, singleValue);
                 const inRange = isRange && rangeValue[0] && rangeValue[1] && day > startOfDay(rangeValue[0]) && day < startOfDay(rangeValue[1]);
-                return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1736,8 +2004,8 @@ function DateTimePicker(props) {
                   day.toISOString()
                 );
               }) }),
-              isRange && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fe-datetime-picker__range-tabs", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              isRange && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fe-datetime-picker__range-tabs", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1746,7 +2014,7 @@ function DateTimePicker(props) {
                     children: "Start"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "button",
                   {
                     type: "button",
@@ -1756,9 +2024,9 @@ function DateTimePicker(props) {
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("label", { className: "fe-datetime-picker__time", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: "fe-datetime-picker__time", children: [
                 "Time",
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "input",
                   {
                     type: "time",
@@ -1771,7 +2039,7 @@ function DateTimePicker(props) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           FieldMessage,
           {
             id: messageId2,
@@ -1785,30 +2053,190 @@ function DateTimePicker(props) {
   );
 }
 
+// packages/form-controls/src/controls/Checkbox/checkbox.tsx
+var import_react15 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Checkbox = (0, import_react15.forwardRef)(
+  function Checkbox2({
+    label,
+    labelPosition = "right",
+    className,
+    style,
+    id,
+    disabled,
+    ...props
+  }, ref) {
+    const classes = [
+      "fe-checkbox",
+      `fe-checkbox--label-${labelPosition}`,
+      disabled && "fe-checkbox--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: classes, style, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-checkbox__label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "fe-checkbox__content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "input",
+          {
+            ref,
+            id,
+            className: "fe-checkbox__input",
+            type: "checkbox",
+            disabled,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-checkbox__control", "aria-hidden": "true" }),
+        label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-checkbox__label", children: label })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// packages/form-controls/src/controls/RadioButton/radio-button.tsx
+var import_react16 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var RadioButton = (0, import_react16.forwardRef)(
+  function RadioButton2({
+    label,
+    labelPosition = "right",
+    className,
+    style,
+    id,
+    disabled,
+    ...props
+  }, ref) {
+    const classes = [
+      "fe-radio-button",
+      `fe-radio-button--label-${labelPosition}`,
+      disabled && "fe-radio-button--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: classes, style, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-radio-button__label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "fe-radio-button__content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "input",
+          {
+            ref,
+            id,
+            className: "fe-radio-button__input",
+            type: "radio",
+            disabled,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-radio-button__control", "aria-hidden": "true" }),
+        label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-radio-button__label", children: label })
+      ] })
+    ] });
+  }
+);
+RadioButton.displayName = "RadioButton";
+
+// packages/form-controls/src/controls/RadioGroup/radio-group.tsx
+var import_react17 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var RadioGroup = (0, import_react17.forwardRef)(
+  function RadioGroup2({
+    label,
+    labelPosition = "top",
+    options,
+    name,
+    value,
+    defaultValue,
+    onChange,
+    disabled = false,
+    direction = "vertical",
+    isRequired = false,
+    className,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) {
+    const generatedId = (0, import_react17.useId)();
+    const groupName = name ?? `fe-radio-group-${generatedId}`;
+    const labelId = `${id ?? generatedId}-label`;
+    const isControlled = value !== void 0;
+    const classes = [
+      "fe-radio-group",
+      `fe-radio-group--label-${labelPosition}`,
+      `fe-radio-group--${direction}`,
+      disabled && "fe-radio-group--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (option, event) => {
+      if (event.target.checked) onChange?.(option.value, option, event);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref, className: classes, ...props, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { id: labelId, className: "fe-radio-group__label", children: [
+        label,
+        isRequired && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "div",
+        {
+          id,
+          className: "fe-radio-group__options",
+          role: "radiogroup",
+          "aria-label": label ? void 0 : ariaLabel,
+          "aria-labelledby": label ? labelId : ariaLabelledBy,
+          "aria-required": isRequired || void 0,
+          children: options.map((option) => {
+            const optionDisabled = disabled || option.disabled;
+            const optionValue = String(option.value);
+            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              RadioButton,
+              {
+                name: groupName,
+                value: optionValue,
+                label: option.label,
+                disabled: optionDisabled,
+                required: isRequired,
+                checked: isControlled ? option.value === value : void 0,
+                defaultChecked: !isControlled ? option.value === defaultValue : void 0,
+                onChange: (event) => handleChange(option, event)
+              },
+              optionValue
+            );
+          })
+        }
+      ),
+      label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { id: labelId, className: "fe-radio-group__label", children: [
+        label,
+        isRequired && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
+      ] })
+    ] });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+
 // packages/expandable-section/src/index.tsx
-var import_react13 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function ExpandableSection({ title, children, expanded, defaultExpanded = false, onExpandedChange, disabled, className, ...props }) {
-  const [internalExpanded, setInternalExpanded] = (0, import_react13.useState)(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = (0, import_react18.useState)(defaultExpanded);
   const isExpanded = expanded ?? internalExpanded;
-  const id = (0, import_react13.useId)();
+  const id = (0, import_react18.useId)();
   const toggle = () => {
     if (disabled) return;
     const next = !isExpanded;
     if (expanded === void 0) setInternalExpanded(next);
     onExpandedChange?.(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fe-expandable-section__content-inner", children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fe-expandable-section__content-inner", children }) })
   ] });
 }
 
 // packages/loading/src/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var sizes = {
   small: "16px",
   medium: "24px",
@@ -1821,15 +2249,15 @@ function Loading({ size = "medium", color = "#2878f0", label, className, style,
     "--fe-loading-color": color,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-loading__label", children: label }),
-    !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-loading__sr-only", children: "Loading" })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-loading__label", children: label }),
+    !label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-loading__sr-only", children: "Loading" })
   ] });
 }
 
 // packages/skeleton/src/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var pixels = (value) => typeof value === "number" ? `${value}px` : value;
 function SkeletonBase({ variant = "box", shape, width, height, count = 1, animated = true, className, style, ...props }) {
   const resolvedVariant = shape ?? variant;
@@ -1840,7 +2268,7 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
     "--fe-skeleton-height": resolvedHeight,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       className: ["fe-skeleton", `fe-skeleton--${resolvedVariant}`, animated && "fe-skeleton--animated", className].filter(Boolean).join(" "),
@@ -1852,16 +2280,16 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
   )) });
 }
 function SkeletonCircle({ size = 40, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
 }
 function SkeletonSquare({ size = 80, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SkeletonBase, { variant: "box", width: size, height: size, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SkeletonBase, { variant: "box", width: size, height: size, ...props });
 }
 function SkeletonBox({ width = "100%", height = 80, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SkeletonBase, { variant: "box", width, height, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SkeletonBase, { variant: "box", width, height, ...props });
 }
 function SkeletonLine({ width = "100%", height = 12, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SkeletonBase, { variant: "line", width, height, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SkeletonBase, { variant: "line", width, height, ...props });
 }
 var Skeleton = Object.assign(SkeletonBase, {
   Circle: SkeletonCircle,
@@ -1871,9 +2299,9 @@ var Skeleton = Object.assign(SkeletonBase, {
 });
 
 // packages/modal/src/index.tsx
-var import_react14 = require("react");
+var import_react19 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Modal({
   open,
   onClose,
@@ -1889,9 +2317,9 @@ function Modal({
   className,
   ...props
 }) {
-  const titleId = (0, import_react14.useId)();
-  const panelRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const titleId = (0, import_react19.useId)();
+  const panelRef = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -1903,9 +2331,9 @@ function Modal({
   if (!open || typeof document === "undefined") return null;
   const hasFooter = footer || actions.length > 0;
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
       if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
         ref: panelRef,
@@ -1917,17 +2345,17 @@ function Modal({
         tabIndex: -1,
         ...props,
         children: [
-          (title || description || closeButton) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("header", { className: "fe-modal__header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "fe-modal__heading", children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { id: titleId, children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: description })
+          (title || description || closeButton) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { className: "fe-modal__header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fe-modal__heading", children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { id: titleId, children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { children: description })
             ] }),
-            closeButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
+            closeButton && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fe-modal__body", children }),
-          hasFooter && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("footer", { className: "fe-modal__footer", children: [
-            footer && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fe-modal__footer-content", children: footer }),
-            actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { ...action, children: label }, index)) })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fe-modal__body", children }),
+          hasFooter && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("footer", { className: "fe-modal__footer", children: [
+            footer && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fe-modal__footer-content", children: footer }),
+            actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { ...action, children: label }, index)) })
           ] })
         ]
       }
@@ -1937,7 +2365,7 @@ function Modal({
 }
 
 // packages/progress/src/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ProgressBar({ value, max = 100, label, showValue = true, size = "medium", color = "#2878f0", className, style, "aria-label": ariaLabel, ...props }) {
   const indeterminate = value === null || value === void 0;
   const percentage = indeterminate ? 0 : Math.min(100, Math.max(0, Number(value) / Math.max(1, max) * 100));
@@ -1947,17 +2375,17 @@ function ProgressBar({ value, max = 100, label, showValue = true, size = "medium
     ...style
   };
   const visibleValue = `${Math.round(percentage)}%`;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
-    (label || !indeterminate && showValue) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "fe-progress__meta", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-progress__label", children: label }),
-      !indeterminate && showValue && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("output", { className: "fe-progress__value", children: visibleValue })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
+    (label || !indeterminate && showValue) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "fe-progress__meta", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fe-progress__label", children: label }),
+      !indeterminate && showValue && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("output", { className: "fe-progress__value", children: visibleValue })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fe-progress__track", role: "progressbar", "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Progress"), "aria-valuemin": indeterminate ? void 0 : 0, "aria-valuemax": indeterminate ? void 0 : max, "aria-valuenow": indeterminate ? void 0 : Number(value), "aria-valuetext": indeterminate ? "Loading" : visibleValue, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-progress__indicator" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fe-progress__track", role: "progressbar", "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Progress"), "aria-valuemin": indeterminate ? void 0 : 0, "aria-valuemax": indeterminate ? void 0 : max, "aria-valuenow": indeterminate ? void 0 : Number(value), "aria-valuetext": indeterminate ? "Loading" : visibleValue, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fe-progress__indicator" }) })
   ] });
 }
 
 // packages/chip/src/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var statuses = ["default", "info", "success", "warning", "error", "neutral", "pending", "processing"];
 function Chip({ children, status = "default", color, variant = "subtle", dot = false, onRemove, removeLabel = "Remove", className, style, ...props }) {
   const usesCustomColor = Boolean(color);
@@ -1966,16 +2394,16 @@ function Chip({ children, status = "default", color, variant = "subtle", dot = f
     ...style
   };
   const resolvedStatus = statuses.includes(status) ? status : "default";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
-    dot && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-chip__content", children }),
-    onRemove && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
+    dot && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fe-chip__content", children }),
+    onRemove && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
   ] });
 }
 
 // packages/message/src/index.tsx
-var import_react15 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var messageId = 0;
 var entries = [];
 var listeners = /* @__PURE__ */ new Set();
@@ -2008,22 +2436,22 @@ var message = {
 };
 var icons = { success: "\u2713", info: "i", warning: "!", error: "\xD7" };
 function Message({ maxCount = 4, closeLabel = "Close notification", className, ...props }) {
-  const [visibleEntries, setVisibleEntries] = (0, import_react15.useState)(entries);
-  (0, import_react15.useEffect)(() => {
+  const [visibleEntries, setVisibleEntries] = (0, import_react20.useState)(entries);
+  (0, import_react20.useEffect)(() => {
     const listener = (nextEntries) => setVisibleEntries(nextEntries);
     listeners.add(listener);
     return () => {
       listeners.delete(listener);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "fe-message__body", children: [
-      entry.title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("strong", { className: "fe-message__title", children: entry.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fe-message__content", children: entry.content })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fe-message__body", children: [
+      entry.title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("strong", { className: "fe-message__title", children: entry.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "fe-message__content", children: entry.content })
     ] }),
-    entry.action && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fe-message__action", children: entry.action }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
+    entry.action && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fe-message__action", children: entry.action }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
   ] }, entry.id)) });
 }
 ((Message2) => {
@@ -2037,8 +2465,8 @@ function Message({ maxCount = 4, closeLabel = "Close notification", className, .
 })(Message || (Message = {}));
 
 // packages/snackbar/src/index.tsx
-var import_react16 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Snackbar({
   open,
   message: message2,
@@ -2052,12 +2480,12 @@ function Snackbar({
 }) {
   const vertical = anchorOrigin.vertical ?? "bottom";
   const horizontal = anchorOrigin.horizontal ?? "center";
-  (0, import_react16.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!open || autoHideDuration === null) return void 0;
     const timer = window.setTimeout(() => onClose?.("timeout"), autoHideDuration);
     return () => window.clearTimeout(timer);
   }, [open, autoHideDuration, onClose]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (!open) return void 0;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose?.("escapeKeyDown");
@@ -2066,16 +2494,562 @@ function Snackbar({
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fe-snackbar__message", children: message2 }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fe-snackbar__action", children: action }),
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fe-snackbar__message", children: message2 }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fe-snackbar__action", children: action }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
   ] }) });
 }
+
+// packages/avatar/src/index.tsx
+var import_react22 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var FALLBACK_AVATARS = [
+  {
+    background: "#E0E7FF",
+    skin: "#F6C6A6",
+    hair: "#432818",
+    shirt: "#5B5BD6",
+    accent: "#A5B4FC",
+    hairStyle: 0,
+    expression: 0
+  },
+  {
+    background: "#FDE68A",
+    skin: "#E7AF87",
+    hair: "#5A3424",
+    shirt: "#D97706",
+    accent: "#FCD34D",
+    hairStyle: 1,
+    expression: 1
+  },
+  {
+    background: "#CCFBF1",
+    skin: "#F4C7A1",
+    hair: "#1F2937",
+    shirt: "#0F766E",
+    accent: "#5EEAD4",
+    hairStyle: 2,
+    expression: 2
+  },
+  {
+    background: "#FCE7F3",
+    skin: "#E5A47F",
+    hair: "#6B2D2D",
+    shirt: "#BE185D",
+    accent: "#F9A8D4",
+    hairStyle: 3,
+    expression: 3,
+    glasses: true
+  },
+  {
+    background: "#DBEAFE",
+    skin: "#8B5E3C",
+    hair: "#24130B",
+    shirt: "#2563EB",
+    accent: "#93C5FD",
+    hairStyle: 0,
+    expression: 1
+  },
+  {
+    background: "#DCFCE7",
+    skin: "#D99B72",
+    hair: "#3F2A20",
+    shirt: "#15803D",
+    accent: "#86EFAC",
+    hairStyle: 1,
+    expression: 2,
+    glasses: true
+  },
+  {
+    background: "#EDE9FE",
+    skin: "#F3C9AD",
+    hair: "#33221A",
+    shirt: "#7C3AED",
+    accent: "#C4B5FD",
+    hairStyle: 2,
+    expression: 3
+  },
+  {
+    background: "#FFE4E6",
+    skin: "#9B6547",
+    hair: "#27150D",
+    shirt: "#E11D48",
+    accent: "#FDA4AF",
+    hairStyle: 3,
+    expression: 0
+  },
+  {
+    background: "#FEF3C7",
+    skin: "#F0B88B",
+    hair: "#855F3B",
+    shirt: "#B45309",
+    accent: "#FBBF24",
+    hairStyle: 0,
+    expression: 2,
+    glasses: true
+  },
+  {
+    background: "#D1FAE5",
+    skin: "#F8D0B0",
+    hair: "#593A28",
+    shirt: "#047857",
+    accent: "#6EE7B7",
+    hairStyle: 1,
+    expression: 3
+  },
+  {
+    background: "#E0F2FE",
+    skin: "#CE8D65",
+    hair: "#372015",
+    shirt: "#0369A1",
+    accent: "#7DD3FC",
+    hairStyle: 2,
+    expression: 0
+  },
+  {
+    background: "#F3E8FF",
+    skin: "#F4C6A3",
+    hair: "#2B1B15",
+    shirt: "#9333EA",
+    accent: "#D8B4FE",
+    hairStyle: 3,
+    expression: 1,
+    glasses: true
+  },
+  {
+    background: "#FFE4C7",
+    skin: "#A96D4C",
+    hair: "#3A2116",
+    shirt: "#C2410C",
+    accent: "#FDBA74",
+    hairStyle: 0,
+    expression: 3
+  },
+  {
+    background: "#ECFCCB",
+    skin: "#F6CCA9",
+    hair: "#7C5135",
+    shirt: "#4D7C0F",
+    accent: "#BEF264",
+    hairStyle: 1,
+    expression: 0
+  },
+  {
+    background: "#CFFAFE",
+    skin: "#E7A27A",
+    hair: "#1F1814",
+    shirt: "#0E7490",
+    accent: "#67E8F9",
+    hairStyle: 2,
+    expression: 1,
+    glasses: true
+  },
+  {
+    background: "#FAE8FF",
+    skin: "#F5C9AA",
+    hair: "#5F3344",
+    shirt: "#A21CAF",
+    accent: "#F0ABFC",
+    hairStyle: 3,
+    expression: 2
+  },
+  {
+    background: "#E0E7FF",
+    skin: "#CF8F67",
+    hair: "#1E1B18",
+    shirt: "#4338CA",
+    accent: "#A5B4FC",
+    hairStyle: 0,
+    expression: 3,
+    glasses: true
+  },
+  {
+    background: "#FFEDD5",
+    skin: "#F7C9A6",
+    hair: "#4E3326",
+    shirt: "#EA580C",
+    accent: "#FDBA74",
+    hairStyle: 1,
+    expression: 0
+  },
+  {
+    background: "#D9F99D",
+    skin: "#A66A49",
+    hair: "#2B1911",
+    shirt: "#65A30D",
+    accent: "#BEF264",
+    hairStyle: 2,
+    expression: 1
+  },
+  {
+    background: "#FCE7F3",
+    skin: "#E9B08A",
+    hair: "#4A2F24",
+    shirt: "#DB2777",
+    accent: "#F9A8D4",
+    hairStyle: 3,
+    expression: 2,
+    glasses: true
+  },
+  {
+    background: "#DBEAFE",
+    skin: "#F2C3A1",
+    hair: "#312018",
+    shirt: "#1D4ED8",
+    accent: "#93C5FD",
+    hairStyle: 0,
+    expression: 0
+  },
+  {
+    background: "#CCFBF1",
+    skin: "#9D6244",
+    hair: "#1F130E",
+    shirt: "#0D9488",
+    accent: "#5EEAD4",
+    hairStyle: 1,
+    expression: 1,
+    glasses: true
+  },
+  {
+    background: "#FEE2E2",
+    skin: "#F6CBAA",
+    hair: "#75452A",
+    shirt: "#DC2626",
+    accent: "#FCA5A5",
+    hairStyle: 2,
+    expression: 2
+  },
+  {
+    background: "#EDE9FE",
+    skin: "#D98E65",
+    hair: "#412720",
+    shirt: "#6D28D9",
+    accent: "#C4B5FD",
+    hairStyle: 3,
+    expression: 3
+  },
+  {
+    background: "#FEF9C3",
+    skin: "#F5C7A4",
+    hair: "#2B1A12",
+    shirt: "#A16207",
+    accent: "#FDE047",
+    hairStyle: 0,
+    expression: 1,
+    glasses: true
+  },
+  {
+    background: "#DCFCE7",
+    skin: "#B97855",
+    hair: "#291A13",
+    shirt: "#16A34A",
+    accent: "#86EFAC",
+    hairStyle: 1,
+    expression: 2
+  },
+  {
+    background: "#E0F2FE",
+    skin: "#F6C5A2",
+    hair: "#6A4031",
+    shirt: "#0284C7",
+    accent: "#7DD3FC",
+    hairStyle: 2,
+    expression: 3,
+    glasses: true
+  },
+  {
+    background: "#FAE8FF",
+    skin: "#DE9B72",
+    hair: "#211714",
+    shirt: "#C026D3",
+    accent: "#F0ABFC",
+    hairStyle: 3,
+    expression: 0
+  },
+  {
+    background: "#FFE4E6",
+    skin: "#F7CEAF",
+    hair: "#42291E",
+    shirt: "#E11D48",
+    accent: "#FDA4AF",
+    hairStyle: 0,
+    expression: 2
+  },
+  {
+    background: "#ECFCCB",
+    skin: "#CE8C65",
+    hair: "#3C2419",
+    shirt: "#3F6212",
+    accent: "#BEF264",
+    hairStyle: 1,
+    expression: 3,
+    glasses: true
+  },
+  {
+    background: "#CFFAFE",
+    skin: "#F0BE99",
+    hair: "#29201B",
+    shirt: "#0891B2",
+    accent: "#67E8F9",
+    hairStyle: 2,
+    expression: 0
+  },
+  {
+    background: "#F3E8FF",
+    skin: "#A76B4B",
+    hair: "#241710",
+    shirt: "#7E22CE",
+    accent: "#D8B4FE",
+    hairStyle: 3,
+    expression: 1,
+    glasses: true
+  }
+];
+function getInitials(content) {
+  const words = content.trim().split(/\s+/).filter(Boolean);
+  return words.slice(-2).map((word) => Array.from(word)[0] ?? "").join("").toLocaleUpperCase();
+}
+function resolveSize(size) {
+  if (typeof size === "number") return `${size}px`;
+  return /^\d+(?:\.\d+)?$/.test(size) ? `${size}px` : size;
+}
+function resolveFontSize(size) {
+  const numericSize = typeof size === "number" ? size : Number(size);
+  if (Number.isFinite(numericSize)) {
+    return `${Math.min(28, Math.max(10, numericSize * 0.38))}px`;
+  }
+  return "1em";
+}
+function getFallbackIndex(index) {
+  if (!Number.isFinite(index)) return 0;
+  return Math.abs(Math.trunc(index)) % FALLBACK_AVATARS.length;
+}
+function AvatarFallbackIcon({ avatar }) {
+  const {
+    accent,
+    background,
+    expression,
+    glasses,
+    hair,
+    hairStyle,
+    shirt,
+    skin
+  } = avatar;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "svg",
+    {
+      className: "fe-avatar__fallback-icon",
+      viewBox: "0 0 24 24",
+      focusable: "false",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("rect", { width: "24", height: "24", fill: background }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "path",
+          {
+            d: "M3 24c.52-3.79 3.58-6.25 9-6.25S20.48 20.21 21 24",
+            fill: shirt
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "path",
+          {
+            d: "M8.1 17.65h7.8l1.05 2.05H7.05l1.05-2.05Z",
+            fill: accent,
+            opacity: ".72"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "10.25", r: "5.25", fill: skin }),
+        hairStyle === 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "path",
+          {
+            d: "M6.75 10.25C6.75 6.34 9.02 4 12.15 4c3.22 0 5.1 2.33 5.1 5.54-1.6-1.41-3.46-2.1-5.59-2.1-1.63 0-3.27.56-4.91 1.68Z",
+            fill: hair
+          }
+        ),
+        hairStyle === 1 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "path",
+          {
+            d: "M6.6 10.1c.16-3.93 2.57-6.2 5.62-6.2 3.57 0 5.3 2.75 5.08 6.32-1.42-1.23-2.91-1.82-4.48-1.82-2.4 0-3.9.65-6.22 1.7Z",
+            fill: hair
+          }
+        ),
+        hairStyle === 2 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "path",
+          {
+            d: "M6.8 10.55C6.8 6.28 9.43 4 12.2 4c3.46 0 5.13 2.83 4.93 6.38-1.38-1.58-3.03-2.38-4.92-2.38-1.81 0-3.61.85-5.41 2.55Z",
+            fill: hair
+          }
+        ),
+        hairStyle === 3 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "path",
+          {
+            d: "M6.66 10.1C6.94 6.12 9.18 4 12.1 4c3.77 0 5.2 2.95 5.18 6.21-1.5-1.07-3.1-1.6-4.8-1.6-2.18 0-3.98.5-5.82 1.49Z",
+            fill: hair
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "10.05", cy: "10.65", r: ".48", fill: "#3B2924" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "13.95", cy: "10.65", r: ".48", fill: "#3B2924" }),
+        expression === 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "path",
+          {
+            d: "M10.25 13.2c1.08.66 2.42.66 3.5 0",
+            fill: "none",
+            stroke: "#A94F4F",
+            strokeWidth: ".7",
+            strokeLinecap: "round"
+          }
+        ),
+        expression === 1 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "path",
+          {
+            d: "M10.5 13.2h3",
+            fill: "none",
+            stroke: "#A94F4F",
+            strokeWidth: ".7",
+            strokeLinecap: "round"
+          }
+        ),
+        expression === 2 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "path",
+          {
+            d: "M10.6 13.38c.84-.44 1.96-.44 2.8 0",
+            fill: "none",
+            stroke: "#A94F4F",
+            strokeWidth: ".7",
+            strokeLinecap: "round"
+          }
+        ),
+        expression === 3 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "13.2", r: ".82", fill: "#B95A5A" }),
+        glasses && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("g", { fill: "none", stroke: "#3C4355", strokeWidth: ".65", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "10", cy: "10.55", r: "1.45" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "14", cy: "10.55", r: "1.45" }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M11.45 10.55h1.1M8.55 10.55H7.5m9 0h-1.05" })
+        ] })
+      ]
+    }
+  );
+}
+function Avatar({
+  src,
+  content,
+  alt,
+  size = 40,
+  shape = "circle",
+  fallbackIndex,
+  className,
+  style,
+  role,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const [generatedFallbackIndex] = (0, import_react22.useState)(
+    () => Math.floor(Math.random() * FALLBACK_AVATARS.length)
+  );
+  const [failedImageSrc, setFailedImageSrc] = (0, import_react22.useState)();
+  const imageSrc = src?.trim();
+  const trimmedContent = content?.trim() ?? "";
+  const showImage = Boolean(imageSrc && failedImageSrc !== imageSrc);
+  const initials = trimmedContent ? getInitials(trimmedContent) : "";
+  const selectedFallback = FALLBACK_AVATARS[getFallbackIndex(fallbackIndex ?? generatedFallbackIndex)];
+  const avatarStyle = {
+    "--fe-avatar-size": resolveSize(size),
+    "--fe-avatar-font-size": resolveFontSize(size),
+    ...style
+  };
+  const fallbackLabel = (alt ?? trimmedContent) || "Avatar";
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "span",
+    {
+      className: ["fe-avatar", `fe-avatar--${shape}`, className].filter(Boolean).join(" "),
+      style: avatarStyle,
+      role: showImage ? role : role ?? "img",
+      "aria-label": showImage ? ariaLabel : ariaLabel ?? fallbackLabel,
+      ...props,
+      children: [
+        showImage && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "img",
+          {
+            className: "fe-avatar__image",
+            src: imageSrc,
+            alt: alt ?? trimmedContent,
+            onError: () => setFailedImageSrc(imageSrc)
+          }
+        ),
+        !showImage && initials && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fe-avatar__initials", "aria-hidden": "true", children: initials }),
+        !showImage && !initials && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AvatarFallbackIcon, { avatar: selectedFallback })
+      ]
+    }
+  );
+}
+function AvatarGroup({
+  children,
+  maxCount,
+  className,
+  style,
+  role,
+  ...props
+}) {
+  const avatars = import_react22.Children.toArray(children).filter(import_react22.isValidElement);
+  const hasMaxCount = typeof maxCount === "number" && Number.isFinite(maxCount) && maxCount > 0;
+  const itemLimit = hasMaxCount ? Math.floor(maxCount) : avatars.length;
+  const hasOverflow = avatars.length > itemLimit;
+  const visibleCount = hasOverflow ? Math.max(0, itemLimit - 1) : itemLimit;
+  const visibleAvatars = avatars.slice(0, visibleCount);
+  const overflowCount = avatars.length - visibleAvatars.length;
+  const firstAvatarSize = avatars[0]?.props.size ?? 40;
+  const overflowStyle = {
+    "--fe-avatar-size": resolveSize(firstAvatarSize),
+    "--fe-avatar-font-size": resolveFontSize(firstAvatarSize)
+  };
+  const singleContent = avatars.length === 1 ? avatars[0]?.props.content?.trim() ?? "" : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "div",
+    {
+      className: ["fe-avatar-group", className].filter(Boolean).join(" "),
+      style,
+      role: role ?? "group",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fe-avatar-group__items", children: [
+          visibleAvatars.map((avatar, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            "span",
+            {
+              className: "fe-avatar-group__item",
+              style: { zIndex: visibleAvatars.length - index },
+              children: avatar
+            },
+            avatar.key ?? index
+          )),
+          hasOverflow && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+            "span",
+            {
+              className: "fe-avatar-group__more",
+              style: overflowStyle,
+              role: "img",
+              "aria-label": `${overflowCount} more avatars`,
+              children: [
+                "+",
+                overflowCount
+              ]
+            }
+          )
+        ] }),
+        singleContent && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fe-avatar-group__content", children: singleContent })
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Avatar,
+  AvatarGroup,
   Button,
+  ButtonBar,
+  Checkbox,
   ChevronDownIcon,
+  ChevronUpIcon,
   Chip,
   CloseIcon,
   CurrencyInput,
@@ -2085,10 +3059,14 @@ function Snackbar({
   Loading,
   Message,
   Modal,
+  MoreHorizontalIcon,
+  MoreVerticalIcon,
   NumberInput,
   Pagination,
   PlusIcon,
   ProgressBar,
+  RadioButton,
+  RadioGroup,
   SearchIcon,
   Selection,
   Skeleton,