@dragunio/fe-libs 0.1.3 → 0.1.5

package/dist/index.mjs

@@ -1,3 +1,27 @@
+import {
+  ChevronDownIcon,
+  CloseIcon,
+  PlusIcon,
+  SearchIcon,
+  arrow_left,
+  check_square_fill,
+  chevron_down,
+  chevron_left,
+  chevron_right,
+  chevron_up,
+  copy,
+  key,
+  lock,
+  lock_unlocked,
+  log_out,
+  minus_square,
+  plus,
+  plus_square,
+  search,
+  trash,
+  x_close
+} from "./chunk-3TCR34LS.mjs";
+
 // packages/button/src/index.tsx
 import { forwardRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -64,32 +88,6 @@ var Button = forwardRef(
 );
 Button.displayName = "Button";
 
-// packages/icons/src/index.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var iconProps = ({ size, ...props }) => ({
-  width: size ?? 20,
-  height: size ?? 20,
-  fill: "none",
-  viewBox: "0 0 24 24",
-  "aria-hidden": true,
-  ...props
-});
-function PlusIcon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...iconProps(props), children: /* @__PURE__ */ jsx2("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
-}
-function ChevronDownIcon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...iconProps(props), children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
-}
-function CloseIcon(props) {
-  return /* @__PURE__ */ jsx2("svg", { ...iconProps(props), children: /* @__PURE__ */ jsx2("path", { d: "m6 6 12 12M18 6 6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
-}
-function SearchIcon(props) {
-  return /* @__PURE__ */ jsxs2("svg", { ...iconProps(props), children: [
-    /* @__PURE__ */ jsx2("circle", { cx: "11", cy: "11", r: "6.5", stroke: "currentColor", strokeWidth: "2" }),
-    /* @__PURE__ */ jsx2("path", { d: "m16 16 4 4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
-  ] });
-}
-
 // packages/table/src/index.tsx
 import {
   createContext,
@@ -104,7 +102,7 @@ import {
 
 // packages/pagination/src/index.tsx
 import { useMemo, useState } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 var range = (start, end) => Array.from({ length: Math.max(0, end - start + 1) }, (_, index) => start + index);
 function getItems(totalPages, page, siblingCount, boundaryCount) {
@@ -147,9 +145,9 @@ function Pagination({
     if (page === void 0) setUncontrolledPage(resolvedPage);
     if (resolvedPage !== currentPage) onPageChange?.(resolvedPage);
   };
-  return /* @__PURE__ */ jsxs3("nav", { className: ["fe-pagination", className].filter(Boolean).join(" "), "aria-label": "Pagination", ...props, children: [
-    /* @__PURE__ */ jsx3(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u2039", "aria-label": previousLabel, disabled: disabled || currentPage === 1, onClick: () => selectPage(currentPage - 1) }),
-    items.map((item, index) => item === "start-ellipsis" || item === "end-ellipsis" ? /* @__PURE__ */ jsx3("span", { className: "fe-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, `${item}-${index}`) : /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2("nav", { className: ["fe-pagination", className].filter(Boolean).join(" "), "aria-label": "Pagination", ...props, children: [
+    /* @__PURE__ */ jsx2(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__ */ jsx2("span", { className: "fe-pagination__ellipsis", "aria-hidden": "true", children: "\u2026" }, `${item}-${index}`) : /* @__PURE__ */ jsx2(
       Button,
       {
         className: "fe-pagination__button",
@@ -163,12 +161,12 @@ function Pagination({
       },
       item
     )),
-    /* @__PURE__ */ jsx3(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u203A", "aria-label": nextLabel, disabled: disabled || currentPage === safeTotalPages, onClick: () => selectPage(currentPage + 1) })
+    /* @__PURE__ */ jsx2(Button, { className: "fe-pagination__button fe-pagination__button--control", hierarchy: "secondary-gray", size: "40", iconOnly: true, icon: "\u203A", "aria-label": nextLabel, disabled: disabled || currentPage === safeTotalPages, onClick: () => selectPage(currentPage + 1) })
   ] });
 }
 
 // packages/table/src/index.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var TableContext = createContext({ striped: false });
 var MIN_COLUMN_WIDTH = 96;
 var MAX_COLUMN_WIDTH = 1200;
@@ -268,14 +266,14 @@ function DataTable({
     if (nextPage !== currentPage) onPageChange?.(nextPage);
   };
   const resolvedPaginationPosition = paginationPosition === "middle-bottom" ? "bottom-center" : paginationPosition;
-  const paginationControl = shouldPaginate && totalPages > 1 ? /* @__PURE__ */ jsx4("div", { className: `fe-table__pagination fe-table__pagination--${resolvedPaginationPosition}`, children: /* @__PURE__ */ jsx4(Pagination, { page: currentPage, totalPages, onPageChange: changePage }) }) : null;
-  return /* @__PURE__ */ jsxs4("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: [
+  const paginationControl = shouldPaginate && totalPages > 1 ? /* @__PURE__ */ jsx3("div", { className: `fe-table__pagination fe-table__pagination--${resolvedPaginationPosition}`, children: /* @__PURE__ */ jsx3(Pagination, { page: currentPage, totalPages, onPageChange: changePage }) }) : null;
+  return /* @__PURE__ */ jsxs3("div", { className: "fe-table", "data-resizing": isResizing || void 0, children: [
     resolvedPaginationPosition === "top-right" && paginationControl,
-    /* @__PURE__ */ jsxs4("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
-      /* @__PURE__ */ jsx4("colgroup", { children: sizes2.map((size, index) => /* @__PURE__ */ jsx4("col", { style: { width: `${size}px` } }, index)) }),
-      /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsx4("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsxs4("th", { scope: "col", children: [
-        /* @__PURE__ */ jsx4("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
-        /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsxs3("table", { className: ["fe-table__table", className].filter(Boolean).join(" "), "data-fe-table": true, "data-striped": striped || void 0, ...props, children: [
+      /* @__PURE__ */ jsx3("colgroup", { children: sizes2.map((size, index) => /* @__PURE__ */ jsx3("col", { style: { width: `${size}px` } }, index)) }),
+      /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsxs3("th", { scope: "col", children: [
+        /* @__PURE__ */ jsx3("span", { className: "fe-table__header-content", children: headers[columnIndex] ?? `Column ${columnIndex + 1}` }),
+        /* @__PURE__ */ jsx3(
           "span",
           {
             className: "fe-table__resize-handle",
@@ -299,7 +297,7 @@ function DataTable({
           }
         )
       ] }, columnIndex)) }) }),
-      /* @__PURE__ */ jsx4("tbody", { children: pagedData.map((row, rowIndex) => /* @__PURE__ */ jsx4("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsx4("td", { children: row[columnIndex] }, columnIndex)) }, shouldPaginate ? (currentPage - 1) * safePageSize + rowIndex : rowIndex)) })
+      /* @__PURE__ */ jsx3("tbody", { children: pagedData.map((row, rowIndex) => /* @__PURE__ */ jsx3("tr", { children: Array.from({ length: columnCount }, (_, columnIndex) => /* @__PURE__ */ jsx3("td", { children: row[columnIndex] }, columnIndex)) }, shouldPaginate ? (currentPage - 1) * safePageSize + rowIndex : rowIndex)) })
     ] }),
     resolvedPaginationPosition !== "top-right" && paginationControl
   ] });
@@ -317,42 +315,42 @@ function Table({
   paginationPosition,
   ...props
 }) {
-  if (headers || data) return /* @__PURE__ */ jsx4(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, pagination, pageSize, page, defaultPage, onPageChange, paginationPosition, ...props });
-  return /* @__PURE__ */ jsx4(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ jsx4("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
+  if (headers || data) return /* @__PURE__ */ jsx3(DataTable, { headers: headers ?? [], data: data ?? [], striped: striped ?? true, pagination, pageSize, page, defaultPage, onPageChange, paginationPosition, ...props });
+  return /* @__PURE__ */ jsx3(TableContext.Provider, { value: { striped: striped ?? false }, children: /* @__PURE__ */ jsx3("table", { "data-fe-table": true, "data-striped": striped || void 0, ...props, children }) });
 }
 function TableHead(props) {
-  return /* @__PURE__ */ jsx4("thead", { ...props });
+  return /* @__PURE__ */ jsx3("thead", { ...props });
 }
 function TableBody(props) {
-  return /* @__PURE__ */ jsx4("tbody", { ...props });
+  return /* @__PURE__ */ jsx3("tbody", { ...props });
 }
 function TableRow({ children, ...props }) {
   const { striped } = useContext(TableContext);
-  return /* @__PURE__ */ jsx4("tr", { "data-striped": striped || void 0, ...props, children });
+  return /* @__PURE__ */ jsx3("tr", { "data-striped": striped || void 0, ...props, children });
 }
 function TableCell({ children, ...props }) {
-  return /* @__PURE__ */ jsx4("td", { ...props, children });
+  return /* @__PURE__ */ jsx3("td", { ...props, children });
 }
 function TableHeader({ children, ...props }) {
-  return /* @__PURE__ */ jsx4("th", { scope: "col", ...props, children });
+  return /* @__PURE__ */ jsx3("th", { scope: "col", ...props, children });
 }
 function TableCaption(props) {
-  return /* @__PURE__ */ jsx4("caption", { ...props });
+  return /* @__PURE__ */ jsx3("caption", { ...props });
 }
 
 // packages/toggle/src/index.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var Toggle = forwardRef2(function Toggle2({ color = "#16a34a", label, className, style, id, ...props }, ref) {
   const classes = ["fe-toggle", className].filter(Boolean).join(" ");
   const toggleStyle = {
     "--fe-toggle-color": color,
     ...style
   };
-  return /* @__PURE__ */ jsxs5("label", { className: classes, style: toggleStyle, children: [
-    /* @__PURE__ */ jsx5("input", { ref, id, className: "fe-toggle__input", type: "checkbox", role: "switch", ...props }),
-    /* @__PURE__ */ jsx5("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
-    label && /* @__PURE__ */ jsx5("span", { className: "fe-toggle__label", children: label })
+  return /* @__PURE__ */ jsxs4("label", { className: classes, style: toggleStyle, children: [
+    /* @__PURE__ */ jsx4("input", { ref, id, className: "fe-toggle__input", type: "checkbox", role: "switch", ...props }),
+    /* @__PURE__ */ jsx4("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ jsx4("span", { className: "fe-toggle__label", children: label })
   ] });
 });
 Toggle.displayName = "Toggle";
@@ -360,7 +358,7 @@ Toggle.displayName = "Toggle";
 // packages/drawer/src/index.tsx
 import { useEffect as useEffect2 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function Drawer({ open, onClose, title, footer, side = "right", width = 400, fullScreen = false, children, closeOnBackdropClick = true, className, style, ...props }) {
   useEffect2(() => {
     if (!open) return;
@@ -372,26 +370,47 @@ function Drawer({ open, onClose, title, footer, side = "right", width = 400, ful
   }, [onClose, open]);
   if (!open || typeof document === "undefined") return null;
   const panelStyle = !fullScreen && (side === "left" || side === "right") ? { ...style, width: typeof width === "number" ? `${width}px` : width } : style;
-  return createPortal(/* @__PURE__ */ jsx6("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
+  return createPortal(/* @__PURE__ */ jsx5("div", { className: "fe-drawer-backdrop", role: "presentation", onMouseDown: (event) => {
     if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-  }, children: /* @__PURE__ */ jsxs6("aside", { className: ["fe-drawer", `fe-drawer--${side}`, fullScreen && "fe-drawer--full-screen", className].filter(Boolean).join(" "), style: panelStyle, role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : "Drawer", ...props, children: [
-    /* @__PURE__ */ jsxs6("header", { className: "fe-drawer__header", children: [
-      title && /* @__PURE__ */ jsx6("h2", { children: title }),
-      /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
+  }, children: /* @__PURE__ */ jsxs5("aside", { className: ["fe-drawer", `fe-drawer--${side}`, fullScreen && "fe-drawer--full-screen", className].filter(Boolean).join(" "), style: panelStyle, role: "dialog", "aria-modal": "true", "aria-label": typeof title === "string" ? title : "Drawer", ...props, children: [
+    /* @__PURE__ */ jsxs5("header", { className: "fe-drawer__header", children: [
+      title && /* @__PURE__ */ jsx5("h2", { children: title }),
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Close drawer", onClick: onClose, children: "\xD7" })
     ] }),
-    /* @__PURE__ */ jsx6("div", { className: "fe-drawer__body", children }),
-    footer && /* @__PURE__ */ jsx6("footer", { className: "fe-drawer__footer", children: footer })
+    /* @__PURE__ */ jsx5("div", { className: "fe-drawer__body", children }),
+    footer && /* @__PURE__ */ jsx5("footer", { className: "fe-drawer__footer", children: footer })
   ] }) }), document.body);
 }
 
-// packages/form-controls/src/index.tsx
-import {
-  forwardRef as forwardRef3,
-  useEffect as useEffect3,
-  useId,
-  useRef as useRef2,
-  useState as useState3
-} from "react";
+// packages/form-controls/src/controls/TextInput/text-input.tsx
+import { forwardRef as forwardRef3, useId as useId2, useState as useState4 } from "react";
+
+// packages/tooltip/src/index.tsx
+import { cloneElement, useId, useState as useState3 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function Tooltip({ content, children, placement = "top", disabled, className, ...props }) {
+  const [visible, setVisible] = useState3(false);
+  const id = useId();
+  const trigger = cloneElement(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
+    children.props.onMouseEnter?.(event);
+    setVisible(true);
+  }, onMouseLeave: (event) => {
+    children.props.onMouseLeave?.(event);
+    setVisible(false);
+  }, onFocus: (event) => {
+    children.props.onFocus?.(event);
+    setVisible(true);
+  }, onBlur: (event) => {
+    children.props.onBlur?.(event);
+    setVisible(false);
+  } });
+  return /* @__PURE__ */ jsxs6("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
+    trigger,
+    visible && !disabled && /* @__PURE__ */ jsx6("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
+  ] });
+}
+
+// packages/form-controls/src/controls/Field/field.tsx
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function getFieldError(error, errorMessage) {
   if (errorMessage !== void 0 && errorMessage !== null) return errorMessage;
@@ -401,161 +420,655 @@ function getFieldError(error, errorMessage) {
 function getDescribedBy(existing, messageId2) {
   return [existing, messageId2].filter(Boolean).join(" ") || void 0;
 }
-var TextInput = forwardRef3(function TextInput2({ value, defaultValue = "", onChange, onValueChange, label, helperText, error, errorMessage, clearable = false, onClear, clearLabel = "Clear input", className, disabled, readOnly, id, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
-  const generatedId = useId();
-  const inputId = id ?? `${generatedId}-input`;
-  const labelId = `${generatedId}-label`;
-  const messageId2 = `${generatedId}-message`;
-  const controlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState3(defaultValue);
-  const currentValue = controlled ? value : internalValue;
-  const fieldError = getFieldError(error, errorMessage);
-  const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
-  const displayedMessage = hasError ? fieldError : helperText;
-  const describedBy = getDescribedBy(ariaDescribedBy, displayedMessage ? messageId2 : void 0);
-  const clear = () => {
-    if (!controlled) setInternalValue("");
-    onValueChange?.("");
-    onClear?.();
-  };
-  const labelledBy = getDescribedBy(ariaLabelledBy, label ? labelId : void 0);
-  return /* @__PURE__ */ jsxs7("label", { className: ["fe-text-input", hasError && "fe-text-input--error", className].filter(Boolean).join(" "), children: [
-    label && /* @__PURE__ */ jsx7("span", { id: labelId, className: "fe-text-input__label", children: label }),
-    /* @__PURE__ */ jsxs7("span", { className: "fe-text-input__control", children: [
-      /* @__PURE__ */ jsx7("input", { ref, id: inputId, value: currentValue, disabled, readOnly, "aria-invalid": hasError || void 0, "aria-labelledby": labelledBy, "aria-describedby": describedBy, onChange: (event) => {
-        if (!controlled) setInternalValue(event.target.value);
-        onValueChange?.(event.target.value);
-        onChange?.(event);
-      }, ...props }),
-      clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ jsx7(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ jsx7(CloseIcon, { size: 14 }), "aria-label": clearLabel, onClick: clear, className: "fe-text-input__clear" })
-    ] }),
-    displayedMessage && /* @__PURE__ */ jsx7("span", { id: messageId2, className: hasError ? "fe-text-input__error" : "fe-text-input__helper", children: displayedMessage })
+function FieldLabel({
+  id,
+  label,
+  description,
+  descriptionDisplay,
+  isRequired = false
+}) {
+  if (!label) return null;
+  return /* @__PURE__ */ jsxs7("span", { className: "fe-field__label", children: [
+    /* @__PURE__ */ jsx7("span", { id, children: label }),
+    isRequired && /* @__PURE__ */ jsx7("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" }),
+    description && descriptionDisplay === "tooltip" && /* @__PURE__ */ jsx7(Tooltip, { content: description, children: /* @__PURE__ */ jsx7(
+      "span",
+      {
+        className: "fe-field__info",
+        tabIndex: 0,
+        role: "img",
+        "aria-label": "More information",
+        children: "i"
+      }
+    ) })
   ] });
-});
+}
+function FieldMessage({
+  id,
+  error,
+  description,
+  descriptionDisplay
+}) {
+  if (error !== void 0 && error !== false && error !== null)
+    return /* @__PURE__ */ jsx7(
+      "span",
+      {
+        id,
+        className: "fe-field__message fe-field__message--error",
+        role: "alert",
+        children: error
+      }
+    );
+  if (description && descriptionDisplay === "inline")
+    return /* @__PURE__ */ jsx7("span", { id, className: "fe-field__message", children: description });
+  return null;
+}
+
+// packages/form-controls/src/controls/TextInput/text-input.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var TextInput = forwardRef3(
+  function TextInput2({
+    value,
+    defaultValue = "",
+    onChange,
+    onValueChange,
+    label,
+    description,
+    descriptionDisplay = "inline",
+    helperText,
+    error,
+    errorMessage,
+    clearable = false,
+    onClear,
+    clearLabel = "Clear input",
+    className,
+    disabled,
+    readOnly,
+    id,
+    prefix,
+    suffix,
+    Prefix,
+    Suffix,
+    isRequired = false,
+    placeholder,
+    required,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) {
+    const generatedId = useId2();
+    const inputId = id ?? generatedId + "-input";
+    const labelId = generatedId + "-label";
+    const messageId2 = generatedId + "-message";
+    const controlled = value !== void 0;
+    const [internalValue, setInternalValue] = useState4(defaultValue);
+    const currentValue = controlled ? value : internalValue;
+    const fieldError = getFieldError(error, errorMessage);
+    const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
+    const resolvedDescription = description ?? helperText;
+    const hasMessage = hasError || resolvedDescription && descriptionDisplay === "inline";
+    const describedBy = getDescribedBy(
+      ariaDescribedBy,
+      hasMessage ? messageId2 : void 0
+    );
+    const resolvedPrefix = prefix ?? Prefix;
+    const resolvedSuffix = suffix ?? Suffix;
+    const labelledBy = getDescribedBy(
+      ariaLabelledBy,
+      label ? labelId : void 0
+    );
+    const clear = () => {
+      if (!controlled) setInternalValue("");
+      onValueChange?.("");
+      onClear?.();
+    };
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: [
+          "fe-text-input",
+          hasError && "fe-text-input--error",
+          className
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsx8(
+            FieldLabel,
+            {
+              id: labelId,
+              label,
+              description: resolvedDescription,
+              descriptionDisplay,
+              isRequired
+            }
+          ),
+          /* @__PURE__ */ jsxs8("span", { className: "fe-text-input__control", children: [
+            resolvedPrefix && /* @__PURE__ */ jsx8("span", { className: "fe-text-input__prefix", children: resolvedPrefix }),
+            /* @__PURE__ */ jsxs8("span", { className: "fe-text-input__input-wrap", children: [
+              /* @__PURE__ */ jsx8(
+                "input",
+                {
+                  ref,
+                  id: inputId,
+                  value: currentValue,
+                  placeholder,
+                  required: isRequired || required,
+                  disabled,
+                  readOnly,
+                  "aria-invalid": hasError || void 0,
+                  "aria-required": isRequired || void 0,
+                  "aria-labelledby": labelledBy,
+                  "aria-describedby": describedBy,
+                  onChange: (event) => {
+                    if (!controlled) setInternalValue(event.target.value);
+                    onValueChange?.(event.target.value);
+                    onChange?.(event);
+                  },
+                  ...props
+                }
+              ),
+              isRequired && placeholder && !currentValue && /* @__PURE__ */ jsxs8("span", { className: "fe-text-input__placeholder", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx8("span", { children: placeholder }),
+                /* @__PURE__ */ jsx8("span", { className: "fe-field__required", children: "*" })
+              ] })
+            ] }),
+            resolvedSuffix && /* @__PURE__ */ jsx8("span", { className: "fe-text-input__suffix", children: resolvedSuffix }),
+            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ jsx8(
+              Button,
+              {
+                hierarchy: "tertiary-gray",
+                size: "24",
+                iconOnly: true,
+                icon: /* @__PURE__ */ jsx8(CloseIcon, { size: 14 }),
+                "aria-label": clearLabel,
+                onClick: clear,
+                className: "fe-text-input__clear"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx8(
+            FieldMessage,
+            {
+              id: messageId2,
+              error: fieldError,
+              description: resolvedDescription,
+              descriptionDisplay
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 TextInput.displayName = "TextInput";
-var TextArea = forwardRef3(function TextArea2({ value, defaultValue = "", onChange, onValueChange, label, helperText, error, errorMessage, clearable = false, onClear, clearLabel = "Clear text area", className, disabled, readOnly, id, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
-  const generatedId = useId();
-  const inputId = id ?? `${generatedId}-input`;
-  const labelId = `${generatedId}-label`;
-  const messageId2 = `${generatedId}-message`;
-  const controlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState3(defaultValue);
-  const currentValue = controlled ? value : internalValue;
-  const fieldError = getFieldError(error, errorMessage);
-  const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
-  const displayedMessage = hasError ? fieldError : helperText;
-  const describedBy = getDescribedBy(ariaDescribedBy, displayedMessage ? messageId2 : void 0);
-  const clear = () => {
-    if (!controlled) setInternalValue("");
-    onValueChange?.("");
-    onClear?.();
-  };
-  const labelledBy = getDescribedBy(ariaLabelledBy, label ? labelId : void 0);
-  return /* @__PURE__ */ jsxs7("label", { className: ["fe-text-area", hasError && "fe-text-area--error", className].filter(Boolean).join(" "), children: [
-    label && /* @__PURE__ */ jsx7("span", { id: labelId, className: "fe-text-area__label", children: label }),
-    /* @__PURE__ */ jsxs7("span", { className: "fe-text-area__control", children: [
-      /* @__PURE__ */ jsx7("textarea", { ref, id: inputId, value: currentValue, disabled, readOnly, "aria-invalid": hasError || void 0, "aria-labelledby": labelledBy, "aria-describedby": describedBy, onChange: (event) => {
-        if (!controlled) setInternalValue(event.target.value);
-        onValueChange?.(event.target.value);
-        onChange?.(event);
-      }, ...props }),
-      clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ jsx7(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ jsx7(CloseIcon, { size: 14 }), "aria-label": clearLabel, onClick: clear, className: "fe-text-area__clear" })
-    ] }),
-    displayedMessage && /* @__PURE__ */ jsx7("span", { id: messageId2, className: hasError ? "fe-text-area__error" : "fe-text-area__helper", children: displayedMessage })
-  ] });
-});
+
+// packages/form-controls/src/controls/TextArea/text-area.tsx
+import { forwardRef as forwardRef4, useId as useId3, useState as useState5 } from "react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var TextArea = forwardRef4(
+  function TextArea2({
+    value,
+    defaultValue = "",
+    onChange,
+    onValueChange,
+    label,
+    description,
+    descriptionDisplay = "inline",
+    helperText,
+    error,
+    errorMessage,
+    clearable = false,
+    onClear,
+    clearLabel = "Clear text area",
+    className,
+    disabled,
+    readOnly,
+    id,
+    isRequired = false,
+    placeholder,
+    required,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) {
+    const generatedId = useId3();
+    const inputId = id ?? generatedId + "-input";
+    const labelId = generatedId + "-label";
+    const messageId2 = generatedId + "-message";
+    const controlled = value !== void 0;
+    const [internalValue, setInternalValue] = useState5(defaultValue);
+    const currentValue = controlled ? value : internalValue;
+    const fieldError = getFieldError(error, errorMessage);
+    const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
+    const resolvedDescription = description ?? helperText;
+    const hasMessage = hasError || resolvedDescription && descriptionDisplay === "inline";
+    const describedBy = getDescribedBy(
+      ariaDescribedBy,
+      hasMessage ? messageId2 : void 0
+    );
+    const labelledBy = getDescribedBy(
+      ariaLabelledBy,
+      label ? labelId : void 0
+    );
+    const clear = () => {
+      if (!controlled) setInternalValue("");
+      onValueChange?.("");
+      onClear?.();
+    };
+    return /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: [
+          "fe-text-area",
+          hasError && "fe-text-area--error",
+          className
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsx9(
+            FieldLabel,
+            {
+              id: labelId,
+              label,
+              description: resolvedDescription,
+              descriptionDisplay,
+              isRequired
+            }
+          ),
+          /* @__PURE__ */ jsxs9("span", { className: "fe-text-area__control", children: [
+            /* @__PURE__ */ jsx9(
+              "textarea",
+              {
+                ref,
+                id: inputId,
+                value: currentValue,
+                placeholder,
+                required: isRequired || required,
+                disabled,
+                readOnly,
+                "aria-invalid": hasError || void 0,
+                "aria-required": isRequired || void 0,
+                "aria-labelledby": labelledBy,
+                "aria-describedby": describedBy,
+                onChange: (event) => {
+                  if (!controlled) setInternalValue(event.target.value);
+                  onValueChange?.(event.target.value);
+                  onChange?.(event);
+                },
+                ...props
+              }
+            ),
+            isRequired && placeholder && !currentValue && /* @__PURE__ */ jsxs9("span", { className: "fe-text-area__placeholder", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx9("span", { children: placeholder }),
+              /* @__PURE__ */ jsx9("span", { className: "fe-field__required", children: "*" })
+            ] }),
+            clearable && currentValue && !disabled && !readOnly && /* @__PURE__ */ jsx9(
+              Button,
+              {
+                hierarchy: "tertiary-gray",
+                size: "24",
+                iconOnly: true,
+                icon: /* @__PURE__ */ jsx9(CloseIcon, { size: 14 }),
+                "aria-label": clearLabel,
+                onClick: clear,
+                className: "fe-text-area__clear"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx9(
+            FieldMessage,
+            {
+              id: messageId2,
+              error: fieldError,
+              description: resolvedDescription,
+              descriptionDisplay
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 TextArea.displayName = "TextArea";
-var Selection = forwardRef3(function Selection2({ className, label, helperText, error, options, placeholder = "Select an option", size = "medium", id, value, defaultValue, onChange, multiple = false, searchable = false, tag = false, clearable = false, disabled = false, name, onKeyDown, ...props }, ref) {
-  const generatedId = useId();
-  const listboxId = id ?? generatedId;
-  const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState3(defaultValue ?? (multiple ? [] : ""));
-  const selectedValue = isControlled ? value : internalValue;
-  const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue === "" || selectedValue === null || selectedValue === void 0 ? [] : [selectedValue];
-  const selectedOptions = options.filter((option) => selectedValues.some((item) => String(item) === String(option.value)));
-  const [open, setOpen] = useState3(false);
-  const [query, setQuery] = useState3("");
-  const [activeIndex, setActiveIndex] = useState3(0);
-  const rootRef = useRef2(null);
-  useEffect3(() => {
-    const close = (event) => {
-      if (!rootRef.current?.contains(event.target)) setOpen(false);
+
+// packages/form-controls/src/controls/Selection/selection.tsx
+import {
+  forwardRef as forwardRef5,
+  useEffect as useEffect3,
+  useId as useId4,
+  useLayoutEffect,
+  useRef as useRef2,
+  useState as useState6
+} from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var Selection = forwardRef5(
+  function Selection2({
+    className,
+    label,
+    isRequired = false,
+    description,
+    descriptionDisplay = "inline",
+    helperText,
+    error,
+    errorMessage,
+    options,
+    placeholder = "Select an option",
+    size = "medium",
+    id,
+    value,
+    defaultValue,
+    onChange,
+    multiple = false,
+    searchable = false,
+    tag = false,
+    clearable = false,
+    disabled = false,
+    name,
+    onKeyDown,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) {
+    const generatedId = useId4();
+    const triggerId = id ?? generatedId + "-trigger";
+    const listboxId = triggerId + "-listbox";
+    const labelId = generatedId + "-label";
+    const messageId2 = generatedId + "-message";
+    const fieldError = getFieldError(error, errorMessage);
+    const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
+    const resolvedDescription = description ?? helperText;
+    const hasMessage = hasError || resolvedDescription && descriptionDisplay === "inline";
+    const describedBy = getDescribedBy(
+      ariaDescribedBy,
+      hasMessage ? messageId2 : void 0
+    );
+    const labelledBy = getDescribedBy(
+      ariaLabelledBy,
+      label ? labelId : void 0
+    );
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = useState6(
+      defaultValue ?? (multiple ? [] : "")
+    );
+    const selectedValue = isControlled ? value : internalValue;
+    const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue === "" || selectedValue === null || selectedValue === void 0 ? [] : [selectedValue];
+    const selectedOptions = options.filter(
+      (option) => selectedValues.some((item) => String(item) === String(option.value))
+    );
+    const [open, setOpen] = useState6(false);
+    const [query, setQuery] = useState6("");
+    const [activeIndex, setActiveIndex] = useState6(0);
+    const rootRef = useRef2(null);
+    const menuRef = useRef2(null);
+    const [menuPosition, setMenuPosition] = useState6(null);
+    useEffect3(() => {
+      const close = (event) => {
+        const target = event.target;
+        if (!rootRef.current?.contains(target) && !menuRef.current?.contains(target))
+          setOpen(false);
+      };
+      document.addEventListener("mousedown", close);
+      return () => document.removeEventListener("mousedown", close);
+    }, []);
+    useLayoutEffect(() => {
+      if (!open) return;
+      const updateMenuPosition = () => {
+        const rect = rootRef.current?.getBoundingClientRect();
+        if (rect)
+          setMenuPosition({
+            top: rect.bottom + 7,
+            left: rect.left,
+            width: rect.width
+          });
+      };
+      updateMenuPosition();
+      window.addEventListener("resize", updateMenuPosition);
+      document.addEventListener("scroll", updateMenuPosition, true);
+      return () => {
+        window.removeEventListener("resize", updateMenuPosition);
+        document.removeEventListener("scroll", updateMenuPosition, true);
+      };
+    }, [open]);
+    const filteredOptions = options.filter(
+      (option) => !query || (option.searchText ?? (typeof option.label === "string" ? option.label : String(option.value))).toLowerCase().includes(query.toLowerCase())
+    );
+    const commit = (next) => {
+      if (!isControlled) setInternalValue(next);
+      const selected = options.filter(
+        (option) => (Array.isArray(next) ? next : [next]).some(
+          (item) => String(item) === String(option.value)
+        )
+      );
+      onChange?.(next, multiple ? selected : selected[0]);
     };
-    document.addEventListener("mousedown", close);
-    return () => document.removeEventListener("mousedown", close);
-  }, []);
-  const filteredOptions = options.filter((option) => !query || (option.searchText ?? (typeof option.label === "string" ? option.label : String(option.value))).toLowerCase().includes(query.toLowerCase()));
-  const commit = (next) => {
-    if (!isControlled) setInternalValue(next);
-    const selected = options.filter((option) => (Array.isArray(next) ? next : [next]).some((item) => String(item) === String(option.value)));
-    onChange?.(next, multiple ? selected : selected[0]);
-  };
-  const choose = (option) => {
-    if (option.disabled) return;
-    const isSelected = selectedValues.some((item) => String(item) === String(option.value));
-    if (multiple) commit(isSelected ? selectedValues.filter((item) => String(item) !== String(option.value)) : [...selectedValues, option.value]);
-    else {
-      commit(option.value);
-      setOpen(false);
+    const choose = (option) => {
+      if (option.disabled) return;
+      const isSelected = selectedValues.some(
+        (item) => String(item) === String(option.value)
+      );
+      if (multiple)
+        commit(
+          isSelected ? selectedValues.filter(
+            (item) => String(item) !== String(option.value)
+          ) : [...selectedValues, option.value]
+        );
+      else {
+        commit(option.value);
+        setOpen(false);
+        setQuery("");
+      }
+    };
+    const clear = () => {
+      commit(multiple ? [] : "");
       setQuery("");
-    }
-  };
-  const clear = () => {
-    commit(multiple ? [] : "");
-    setQuery("");
-  };
-  const displayLabel = selectedOptions.length ? selectedOptions.map((option) => option.label) : null;
-  const onTriggerKeyDown = (event) => {
-    onKeyDown?.(event);
-    if (disabled) return;
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      event.preventDefault();
-      setOpen(true);
-      setActiveIndex((current) => Math.max(0, Math.min(filteredOptions.length - 1, current + (event.key === "ArrowDown" ? 1 : -1))));
-    }
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      if (!open) setOpen(true);
-      else if (filteredOptions[activeIndex]) choose(filteredOptions[activeIndex]);
-    }
-    if (event.key === "Escape") setOpen(false);
-  };
-  return /* @__PURE__ */ jsxs7("div", { ref, className: ["fe-selection", `fe-selection--${size}`, open && "fe-selection--open", clearable && selectedOptions.length > 0 && "fe-selection--clearable", error && "fe-selection--error", disabled && "fe-selection--disabled", className].filter(Boolean).join(" "), ...props, children: [
-    label && /* @__PURE__ */ jsx7("span", { className: "fe-selection__label", children: label }),
-    /* @__PURE__ */ jsxs7("div", { ref: rootRef, className: "fe-selection__control", children: [
-      name && selectedValues.map((item) => /* @__PURE__ */ jsx7("input", { type: "hidden", name: multiple ? `${name}[]` : name, value: item }, String(item))),
-      /* @__PURE__ */ jsxs7("button", { type: "button", className: "fe-selection__trigger", disabled, "aria-invalid": error || void 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": listboxId, onClick: () => setOpen((current) => !current), onKeyDown: onTriggerKeyDown, children: [
-        /* @__PURE__ */ jsx7("span", { className: ["fe-selection__value", !selectedOptions.length && "is-placeholder", tag && selectedOptions.length > 1 && "is-tags"].filter(Boolean).join(" "), children: displayLabel ? tag && multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsxs7("span", { className: "fe-selection__tag", children: [
-          option.label,
-          /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\xD7" })
-        ] }, String(option.value))) : displayLabel.map((item, index) => /* @__PURE__ */ jsxs7("span", { children: [
-          item,
-          index < displayLabel.length - 1 ? ", " : ""
-        ] }, index)) : placeholder }),
-        /* @__PURE__ */ jsx7("span", { className: "fe-selection__actions", children: /* @__PURE__ */ jsx7("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
-      ] }),
-      clearable && selectedOptions.length > 0 && /* @__PURE__ */ jsx7("button", { type: "button", className: "fe-selection__clear", "aria-label": "Clear selection", onClick: clear }),
-      open && /* @__PURE__ */ jsxs7("div", { id: listboxId, className: "fe-selection__menu", role: "listbox", "aria-multiselectable": multiple || void 0, children: [
-        searchable && /* @__PURE__ */ jsxs7("div", { className: "fe-selection__search", children: [
-          /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u2315" }),
-          /* @__PURE__ */ jsx7("input", { autoFocus: true, value: query, onChange: (event) => {
-            setQuery(event.target.value);
-            setActiveIndex(0);
-          }, placeholder: "Search\u2026", "aria-label": "Search options" })
-        ] }),
-        /* @__PURE__ */ jsx7("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
-          const isSelected = selectedValues.some((item) => String(item) === String(option.value));
-          return /* @__PURE__ */ jsxs7("button", { type: "button", className: [isSelected && "is-selected", index === activeIndex && "is-active"].filter(Boolean).join(" "), role: "option", "aria-selected": isSelected, disabled: option.disabled, onMouseMove: () => setActiveIndex(index), onClick: () => choose(option), children: [
-            /* @__PURE__ */ jsx7("span", { children: option.label }),
-            isSelected && /* @__PURE__ */ jsx7("span", { className: "fe-selection__check", "aria-hidden": "true", children: "\u2713" })
-          ] }, String(option.value));
-        }) : /* @__PURE__ */ jsx7("p", { className: "fe-selection__empty", children: "No matching options" }) })
-      ] })
-    ] }),
-    helperText && /* @__PURE__ */ jsx7("span", { className: "fe-selection__helper", children: helperText })
-  ] });
-});
+    };
+    const displayLabel = selectedOptions.length ? selectedOptions.map((option) => option.label) : null;
+    const onTriggerKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (disabled) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        setOpen(true);
+        setActiveIndex(
+          (current) => Math.max(
+            0,
+            Math.min(
+              filteredOptions.length - 1,
+              current + (event.key === "ArrowDown" ? 1 : -1)
+            )
+          )
+        );
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (!open) setOpen(true);
+        else if (filteredOptions[activeIndex])
+          choose(filteredOptions[activeIndex]);
+      }
+      if (event.key === "Escape") setOpen(false);
+    };
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref,
+        className: [
+          "fe-selection",
+          "fe-selection--" + size,
+          open && "fe-selection--open",
+          clearable && selectedOptions.length > 0 && "fe-selection--clearable",
+          hasError && "fe-selection--error",
+          disabled && "fe-selection--disabled",
+          className
+        ].filter(Boolean).join(" "),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx10(
+            FieldLabel,
+            {
+              id: labelId,
+              label,
+              description: resolvedDescription,
+              descriptionDisplay,
+              isRequired
+            }
+          ),
+          /* @__PURE__ */ jsxs10("div", { ref: rootRef, className: "fe-selection__control", children: [
+            name && selectedValues.map((item) => /* @__PURE__ */ jsx10(
+              "input",
+              {
+                type: "hidden",
+                name: multiple ? name + "[]" : name,
+                value: item
+              },
+              String(item)
+            )),
+            /* @__PURE__ */ jsxs10(
+              "button",
+              {
+                id: triggerId,
+                type: "button",
+                className: "fe-selection__trigger",
+                disabled,
+                "aria-label": ariaLabel,
+                "aria-invalid": hasError || void 0,
+                "aria-required": isRequired || void 0,
+                "aria-labelledby": labelledBy,
+                "aria-describedby": describedBy,
+                "aria-haspopup": "listbox",
+                "aria-expanded": open,
+                "aria-controls": listboxId,
+                onClick: () => setOpen((current) => !current),
+                onKeyDown: onTriggerKeyDown,
+                children: [
+                  /* @__PURE__ */ jsx10(
+                    "span",
+                    {
+                      className: [
+                        "fe-selection__value",
+                        !selectedOptions.length && "is-placeholder",
+                        tag && selectedOptions.length > 1 && "is-tags"
+                      ].filter(Boolean).join(" "),
+                      children: displayLabel ? tag && multiple ? selectedOptions.map((option) => /* @__PURE__ */ jsxs10(
+                        "span",
+                        {
+                          className: "fe-selection__tag",
+                          children: [
+                            option.label,
+                            /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", children: "\xD7" })
+                          ]
+                        },
+                        String(option.value)
+                      )) : displayLabel.map((item, index) => /* @__PURE__ */ jsxs10("span", { children: [
+                        item,
+                        index < displayLabel.length - 1 ? ", " : ""
+                      ] }, index)) : /* @__PURE__ */ jsxs10(Fragment2, { children: [
+                        /* @__PURE__ */ jsx10("span", { children: placeholder }),
+                        isRequired && /* @__PURE__ */ jsx10("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx10("span", { className: "fe-selection__actions", children: /* @__PURE__ */ jsx10("span", { className: "fe-selection__chevron", "aria-hidden": "true" }) })
+                ]
+              }
+            ),
+            clearable && selectedOptions.length > 0 && !disabled && /* @__PURE__ */ jsx10(
+              "button",
+              {
+                type: "button",
+                className: "fe-selection__clear",
+                "aria-label": "Clear selection",
+                onClick: clear
+              }
+            ),
+            open && menuPosition && createPortal2(
+              /* @__PURE__ */ jsxs10(
+                "div",
+                {
+                  ref: menuRef,
+                  id: listboxId,
+                  className: "fe-selection__menu",
+                  style: {
+                    position: "fixed",
+                    top: menuPosition.top,
+                    left: menuPosition.left,
+                    width: menuPosition.width
+                  },
+                  role: "listbox",
+                  "aria-multiselectable": multiple || void 0,
+                  children: [
+                    searchable && /* @__PURE__ */ jsxs10("div", { className: "fe-selection__search", children: [
+                      /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", children: "\u2315" }),
+                      /* @__PURE__ */ jsx10(
+                        "input",
+                        {
+                          autoFocus: true,
+                          value: query,
+                          onChange: (event) => {
+                            setQuery(event.target.value);
+                            setActiveIndex(0);
+                          },
+                          placeholder: "Search\u2026",
+                          "aria-label": "Search options"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx10("div", { className: "fe-selection__options", children: filteredOptions.length ? filteredOptions.map((option, index) => {
+                      const isSelected = selectedValues.some(
+                        (item) => String(item) === String(option.value)
+                      );
+                      return /* @__PURE__ */ jsxs10(
+                        "button",
+                        {
+                          type: "button",
+                          className: [
+                            isSelected && "is-selected",
+                            index === activeIndex && "is-active"
+                          ].filter(Boolean).join(" "),
+                          role: "option",
+                          "aria-selected": isSelected,
+                          disabled: option.disabled,
+                          onMouseMove: () => setActiveIndex(index),
+                          onClick: () => choose(option),
+                          children: [
+                            /* @__PURE__ */ jsx10("span", { children: option.label }),
+                            isSelected && /* @__PURE__ */ jsx10(
+                              "span",
+                              {
+                                className: "fe-selection__check",
+                                "aria-hidden": "true",
+                                children: "\u2713"
+                              }
+                            )
+                          ]
+                        },
+                        String(option.value)
+                      );
+                    }) : /* @__PURE__ */ jsx10("p", { className: "fe-selection__empty", children: "No matching options" }) })
+                  ]
+                }
+              ),
+              document.body
+            )
+          ] }),
+          /* @__PURE__ */ jsx10(
+            FieldMessage,
+            {
+              id: messageId2,
+              error: fieldError,
+              description: resolvedDescription,
+              descriptionDisplay
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 Selection.displayName = "Selection";
+
+// packages/form-controls/src/controls/NumberInput/number-input.tsx
+import { forwardRef as forwardRef6, useEffect as useEffect4, useId as useId5, useState as useState7 } from "react";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function formatNumber(value, decimals = 2, thousandSeparator = ",", decimalSeparator = ".") {
   return new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 0,
@@ -564,7 +1077,7 @@ function formatNumber(value, decimals = 2, thousandSeparator = ",", decimalSepar
   }).format(value).replace(/,/g, thousandSeparator).replace(/\./g, decimalSeparator);
 }
 function escapeRegExp(value) {
-  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return value.replace(/[.*+?^$\x7B\x7D()|[\]\\]/g, "\\$&");
 }
 function groupInteger(value, separator) {
   return value.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
@@ -573,7 +1086,10 @@ function normalizeNumberInput(raw, options) {
   const { allowDecimal, decimalSeparator, thousandSeparator, min, max } = options;
   const decimals = Math.max(0, options.decimals);
   const negative = raw.trimStart().startsWith("-") && (min === void 0 || min < 0);
-  const decimalExpression = new RegExp(`[^0-9${allowDecimal ? escapeRegExp(decimalSeparator) : ""}]`, "g");
+  const decimalExpression = new RegExp(
+    "[^0-9" + (allowDecimal ? escapeRegExp(decimalSeparator) : "") + "]",
+    "g"
+  );
   const cleaned = raw.replace(decimalExpression, "");
   const decimalIndex = allowDecimal ? cleaned.indexOf(decimalSeparator) : -1;
   const hasDecimal = decimalIndex >= 0;
@@ -581,64 +1097,227 @@ function normalizeNumberInput(raw, options) {
   const rawFraction = hasDecimal ? cleaned.slice(decimalIndex + decimalSeparator.length).replace(new RegExp(escapeRegExp(decimalSeparator), "g"), "") : "";
   const integer = rawInteger.replace(/^0+(?=\d)/, "") || (rawInteger ? "0" : "");
   const fraction = rawFraction.slice(0, decimals);
-  if (!integer && !fraction) return { display: negative ? "-" : "", value: null };
-  const numericValue = Number(`${negative ? "-" : ""}${integer || "0"}${hasDecimal ? `.${fraction || "0"}` : ""}`);
+  if (!integer && !fraction)
+    return { display: negative ? "-" : "", value: null };
+  const numericValue = Number(
+    (negative ? "-" : "") + (integer || "0") + (hasDecimal ? "." + (fraction || "0") : "")
+  );
   if (!Number.isFinite(numericValue)) return { display: "", value: null };
   const lowerBound = min === void 0 ? numericValue : Math.max(numericValue, min);
   const value = max === void 0 ? lowerBound : Math.min(lowerBound, max);
-  if (value !== numericValue) return { display: formatNumber(value, decimals, thousandSeparator, decimalSeparator), value };
-  return { display: `${negative ? "-" : ""}${groupInteger(integer || "0", thousandSeparator)}${hasDecimal ? `${decimalSeparator}${fraction}` : ""}`, value };
-}
-var NumberInput = forwardRef3(function NumberInput2({ value, defaultValue = null, onValueChange, allowDecimal = true, decimals = 2, min, max, decimalSeparator = ".", thousandSeparator = ",", label, helperText, error, errorMessage, className, onBlur, onFocus, "aria-describedby": ariaDescribedBy, ...props }, ref) {
-  const generatedId = useId();
-  const messageId2 = `${generatedId}-message`;
-  const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = useState3(defaultValue);
-  const [focused, setFocused] = useState3(false);
-  const actualValue = isControlled ? value ?? null : internalValue;
-  const [text, setText] = useState3(actualValue === null ? "" : formatNumber(actualValue, decimals, thousandSeparator, decimalSeparator));
-  const fieldError = getFieldError(error, errorMessage);
-  const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
-  const displayedMessage = hasError ? fieldError : helperText;
-  const describedBy = getDescribedBy(ariaDescribedBy, displayedMessage ? messageId2 : void 0);
-  useEffect3(() => {
-    if (!focused) setText(actualValue === null ? "" : formatNumber(actualValue, decimals, thousandSeparator, decimalSeparator));
-  }, [actualValue, decimalSeparator, decimals, focused, thousandSeparator]);
-  const updateValue = (nextText) => {
-    const next = normalizeNumberInput(nextText, { allowDecimal, decimals, decimalSeparator, thousandSeparator, min, max });
-    setText(next.display);
-    const nextValue = next.value;
-    if (!isControlled) setInternalValue(nextValue);
-    onValueChange?.(nextValue);
+  if (value !== numericValue)
+    return {
+      display: formatNumber(
+        value,
+        decimals,
+        thousandSeparator,
+        decimalSeparator
+      ),
+      value
+    };
+  return {
+    display: (negative ? "-" : "") + groupInteger(integer || "0", thousandSeparator) + (hasDecimal ? decimalSeparator + fraction : ""),
+    value
   };
-  return /* @__PURE__ */ jsxs7("label", { className: ["fe-number-input", hasError && "fe-number-input--error", className].filter(Boolean).join(" "), children: [
-    label && /* @__PURE__ */ jsx7("span", { className: "fe-number-input__label", children: label }),
-    /* @__PURE__ */ jsx7("input", { ref, inputMode: allowDecimal ? "decimal" : "numeric", value: text, onFocus: (event) => {
-      setFocused(true);
-      onFocus?.(event);
-    }, onChange: (event) => updateValue(event.target.value), onBlur: (event) => {
-      setFocused(false);
-      onBlur?.(event);
-    }, ...props, "aria-invalid": hasError || void 0, "aria-describedby": describedBy }),
-    displayedMessage && /* @__PURE__ */ jsx7("span", { id: messageId2, className: hasError ? "fe-number-input__error" : "fe-number-input__helper", children: displayedMessage })
-  ] });
-});
+}
+var NumberInput = forwardRef6(
+  function NumberInput2({
+    value,
+    defaultValue = null,
+    onValueChange,
+    allowDecimal = true,
+    decimals = 2,
+    min,
+    max,
+    decimalSeparator = ".",
+    thousandSeparator = ",",
+    label,
+    description,
+    descriptionDisplay = "inline",
+    helperText,
+    error,
+    errorMessage,
+    isRequired = false,
+    className,
+    onBlur,
+    onFocus,
+    placeholder,
+    required,
+    endAdornment,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) {
+    const generatedId = useId5();
+    const messageId2 = generatedId + "-message";
+    const isControlled = value !== void 0;
+    const [internalValue, setInternalValue] = useState7(defaultValue);
+    const [focused, setFocused] = useState7(false);
+    const actualValue = isControlled ? value ?? null : internalValue;
+    const [text, setText] = useState7(
+      actualValue === null ? "" : formatNumber(
+        actualValue,
+        decimals,
+        thousandSeparator,
+        decimalSeparator
+      )
+    );
+    const fieldError = getFieldError(error, errorMessage);
+    const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
+    const labelId = generatedId + "-label";
+    const resolvedDescription = description ?? helperText;
+    const hasMessage = hasError || resolvedDescription && descriptionDisplay === "inline";
+    const describedBy = getDescribedBy(
+      ariaDescribedBy,
+      hasMessage ? messageId2 : void 0
+    );
+    const labelledBy = getDescribedBy(
+      ariaLabelledBy,
+      label ? labelId : void 0
+    );
+    useEffect4(() => {
+      if (!focused)
+        setText(
+          actualValue === null ? "" : formatNumber(
+            actualValue,
+            decimals,
+            thousandSeparator,
+            decimalSeparator
+          )
+        );
+    }, [actualValue, decimalSeparator, decimals, focused, thousandSeparator]);
+    const updateValue = (nextText) => {
+      const next = normalizeNumberInput(nextText, {
+        allowDecimal,
+        decimals,
+        decimalSeparator,
+        thousandSeparator,
+        min,
+        max
+      });
+      setText(next.display);
+      if (!isControlled) setInternalValue(next.value);
+      onValueChange?.(next.value);
+    };
+    return /* @__PURE__ */ jsxs11(
+      "label",
+      {
+        className: [
+          "fe-number-input",
+          hasError && "fe-number-input--error",
+          className
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsx11(
+            FieldLabel,
+            {
+              id: labelId,
+              label,
+              description: resolvedDescription,
+              descriptionDisplay,
+              isRequired
+            }
+          ),
+          /* @__PURE__ */ jsxs11("span", { className: "fe-number-input__control", children: [
+            /* @__PURE__ */ jsx11(
+              "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__ */ jsxs11("span", { className: "fe-number-input__placeholder", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx11("span", { children: placeholder }),
+              /* @__PURE__ */ jsx11("span", { className: "fe-field__required", children: "*" })
+            ] }),
+            endAdornment
+          ] }),
+          /* @__PURE__ */ jsx11(
+            FieldMessage,
+            {
+              id: messageId2,
+              error: fieldError,
+              description: resolvedDescription,
+              descriptionDisplay
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 NumberInput.displayName = "NumberInput";
-function CurrencyInput({ suffix = "VND", currencies, currency, defaultCurrency, onCurrencyChange, className, ...props }) {
-  const [internalCurrency, setInternalCurrency] = useState3(defaultCurrency ?? currencies?.[0]?.code ?? "");
+
+// packages/form-controls/src/controls/CurrencyInput/currency-input.tsx
+import { useState as useState8 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function CurrencyInput({
+  suffix = "VND",
+  currencies,
+  currency,
+  defaultCurrency,
+  onCurrencyChange,
+  className,
+  disabled,
+  ...props
+}) {
+  const [internalCurrency, setInternalCurrency] = useState8(
+    defaultCurrency ?? currencies?.[0]?.code ?? ""
+  );
   const selectedCurrency = currency ?? internalCurrency;
   const current = currencies?.find((item) => item.code === selectedCurrency);
   const currencySuffix = current?.suffix ?? current?.code ?? suffix;
-  return /* @__PURE__ */ jsxs7("div", { className: ["fe-currency-input", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx7(NumberInput, { ...props, className: "fe-currency-input__number" }),
-    currencies?.length ? /* @__PURE__ */ jsx7("select", { className: "fe-currency-input__currency", "aria-label": "Currency", value: selectedCurrency, onChange: (event) => {
-      const next = currencies.find((item) => item.code === event.target.value);
-      if (!next) return;
-      if (currency === void 0) setInternalCurrency(next.code);
-      onCurrencyChange?.(next);
-    }, children: currencies.map((item) => /* @__PURE__ */ jsx7("option", { value: item.code, children: item.label ?? item.code }, item.code)) }) : /* @__PURE__ */ jsx7("span", { className: "fe-currency-input__suffix", children: currencySuffix })
-  ] });
+  const endAdornment = currencies?.length ? /* @__PURE__ */ jsx12(
+    Selection,
+    {
+      className: "fe-currency-input__currency",
+      "aria-label": "Currency",
+      options: currencies.map((item) => ({
+        label: item.label ?? item.code,
+        value: item.code
+      })),
+      disabled,
+      value: selectedCurrency,
+      size: "small",
+      onChange: (value) => {
+        const next = currencies.find((item) => item.code === String(value));
+        if (!next) return;
+        if (currency === void 0) setInternalCurrency(next.code);
+        onCurrencyChange?.(next);
+      }
+    }
+  ) : /* @__PURE__ */ jsx12("span", { className: "fe-currency-input__suffix", children: currencySuffix });
+  return /* @__PURE__ */ jsx12(
+    NumberInput,
+    {
+      ...props,
+      disabled,
+      className: ["fe-currency-input", className].filter(Boolean).join(" "),
+      endAdornment
+    }
+  );
 }
+
+// packages/form-controls/src/controls/DateTimePicker/date-time-picker.tsx
+import { useEffect as useEffect5, useId as useId6, useRef as useRef3, useState as useState9 } from "react";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var pad = (value) => String(value).padStart(2, "0");
 function formatDate(date, format) {
   return format.replace(/yyyy/g, String(date.getFullYear())).replace(/MM/g, pad(date.getMonth() + 1)).replace(/dd/g, pad(date.getDate())).replace(/HH/g, pad(date.getHours())).replace(/mm/g, pad(date.getMinutes()));
@@ -656,24 +1335,66 @@ function mergeDateTime(day, time) {
   return next;
 }
 function DateTimePicker(props) {
-  const { label, format = "dd/MM/yyyy HH:mm", disabled, placeholder, locale = "en-US", className, mode = "single" } = props;
+  const {
+    label,
+    description,
+    descriptionDisplay = "inline",
+    helperText,
+    error,
+    errorMessage,
+    isRequired = false,
+    format = "dd/MM/yyyy HH:mm",
+    disabled,
+    placeholder,
+    locale = "en-US",
+    className,
+    mode = "single",
+    id,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy
+  } = props;
+  const generatedId = useId6();
+  const triggerId = id ?? generatedId + "-trigger";
+  const labelId = generatedId + "-label";
+  const messageId2 = generatedId + "-message";
+  const fieldError = getFieldError(error, errorMessage);
+  const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
+  const resolvedDescription = description ?? helperText;
+  const hasMessage = hasError || resolvedDescription && descriptionDisplay === "inline";
+  const describedBy = getDescribedBy(
+    ariaDescribedBy,
+    hasMessage ? messageId2 : void 0
+  );
+  const labelledBy = getDescribedBy(
+    ariaLabelledBy,
+    label ? labelId : void 0
+  );
   const isRange = mode === "range";
   const controlled = props.value !== void 0;
-  const [singleInternal, setSingleInternal] = useState3((!isRange ? props.defaultValue : null) ?? null);
-  const [rangeInternal, setRangeInternal] = useState3((isRange ? props.defaultValue : void 0) ?? [null, null]);
+  const [singleInternal, setSingleInternal] = useState9(
+    (!isRange ? props.defaultValue : null) ?? null
+  );
+  const [rangeInternal, setRangeInternal] = useState9(
+    (isRange ? props.defaultValue : void 0) ?? [null, null]
+  );
   const singleValue = !isRange ? props.value ?? singleInternal : null;
   const rangeValue = isRange ? props.value ?? rangeInternal : [null, null];
-  const [open, setOpen] = useState3(false);
-  const [month, setMonth] = useState3(() => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date()));
-  const [editingEnd, setEditingEnd] = useState3(false);
-  const rootRef = useRef2(null);
-  useEffect3(() => {
+  const [open, setOpen] = useState9(false);
+  const [month, setMonth] = useState9(
+    () => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date())
+  );
+  const [editingEnd, setEditingEnd] = useState9(false);
+  const rootRef = useRef3(null);
+  useEffect5(() => {
     const onPointerDown = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
     };
     document.addEventListener("mousedown", onPointerDown);
     return () => document.removeEventListener("mousedown", onPointerDown);
   }, []);
+  useEffect5(() => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
   const setSingle = (next) => {
     if (!controlled) setSingleInternal(next);
     props.onChange?.(next);
@@ -684,13 +1405,24 @@ function DateTimePicker(props) {
   };
   const selectDay = (day) => {
     if (!isRange) {
-      setSingle(mergeDateTime(day, singleValue ? `${pad(singleValue.getHours())}:${pad(singleValue.getMinutes())}` : "00:00"));
+      setSingle(
+        mergeDateTime(
+          day,
+          singleValue ? pad(singleValue.getHours()) + ":" + pad(singleValue.getMinutes()) : "00:00"
+        )
+      );
       setOpen(false);
       return;
     }
     const [start, end] = rangeValue;
     if (!start || end || editingEnd) {
-      setRange([mergeDateTime(day, start ? `${pad(start.getHours())}:${pad(start.getMinutes())}` : "00:00"), null]);
+      setRange([
+        mergeDateTime(
+          day,
+          start ? pad(start.getHours()) + ":" + pad(start.getMinutes()) : "00:00"
+        ),
+        null
+      ]);
       setEditingEnd(false);
       return;
     }
@@ -698,97 +1430,200 @@ function DateTimePicker(props) {
     setRange(nextEnd < start ? [nextEnd, start] : [start, nextEnd]);
     setEditingEnd(false);
   };
-  const shownValue = isRange ? [rangeValue[0] && formatDate(rangeValue[0], format), rangeValue[1] && formatDate(rangeValue[1], format)].filter(Boolean).join(" \u2014 ") : singleValue && formatDate(singleValue, format);
+  const shownValue = isRange ? [
+    rangeValue[0] && formatDate(rangeValue[0], format),
+    rangeValue[1] && formatDate(rangeValue[1], format)
+  ].filter(Boolean).join(" \u2014 ") : singleValue && formatDate(singleValue, format);
   const firstDay = new Date(month.getFullYear(), month.getMonth(), 1);
   const offset = (firstDay.getDay() + 6) % 7;
-  const days = Array.from({ length: 42 }, (_, index) => new Date(month.getFullYear(), month.getMonth(), index - offset + 1));
+  const days = Array.from(
+    { length: 42 },
+    (_, index) => new Date(month.getFullYear(), month.getMonth(), index - offset + 1)
+  );
   const selectedForTime = isRange ? editingEnd ? rangeValue[1] : rangeValue[0] : singleValue;
   const setTime = (time) => {
     if (!selectedForTime) return;
     const next = mergeDateTime(selectedForTime, time);
-    if (isRange) setRange(editingEnd ? [rangeValue[0], next] : [next, rangeValue[1]]);
+    if (isRange)
+      setRange(editingEnd ? [rangeValue[0], next] : [next, rangeValue[1]]);
     else setSingle(next);
   };
-  return /* @__PURE__ */ jsxs7("div", { ref: rootRef, className: ["fe-datetime-picker", className].filter(Boolean).join(" "), children: [
-    label && /* @__PURE__ */ jsx7("span", { className: "fe-datetime-picker__label", children: label }),
-    /* @__PURE__ */ jsxs7("button", { type: "button", className: "fe-datetime-picker__trigger", disabled, "aria-expanded": open, onClick: () => setOpen((current) => !current), children: [
-      /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\u25F7" }),
-      /* @__PURE__ */ jsx7("span", { children: shownValue || placeholder || (isRange ? "Select date range" : "Select date and time") })
-    ] }),
-    open && /* @__PURE__ */ jsxs7("div", { className: "fe-datetime-picker__popper", role: "dialog", "aria-label": "Date and time picker", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "fe-datetime-picker__month", children: [
-        /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Previous month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() - 1, 1)), children: "\u2039" }),
-        /* @__PURE__ */ jsx7("strong", { children: month.toLocaleDateString(locale, { month: "long", year: "numeric" }) }),
-        /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": "Next month", onClick: () => setMonth((current) => new Date(current.getFullYear(), current.getMonth() + 1, 1)), children: "\u203A" })
-      ] }),
-      /* @__PURE__ */ jsx7("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ jsx7("span", { children: day }, day)) }),
-      /* @__PURE__ */ jsx7("div", { className: "fe-datetime-picker__days", children: days.map((day) => {
-        const inMonth = day.getMonth() === month.getMonth();
-        const selected = isRange ? sameDay(day, rangeValue[0]) || sameDay(day, rangeValue[1]) : sameDay(day, singleValue);
-        const inRange = isRange && rangeValue[0] && rangeValue[1] && day > startOfDay(rangeValue[0]) && day < startOfDay(rangeValue[1]);
-        return /* @__PURE__ */ jsx7("button", { type: "button", className: [!inMonth && "is-other-month", selected && "is-selected", inRange && "is-in-range"].filter(Boolean).join(" "), onClick: () => selectDay(day), children: day.getDate() }, day.toISOString());
-      }) }),
-      isRange && /* @__PURE__ */ jsxs7("div", { className: "fe-datetime-picker__range-tabs", children: [
-        /* @__PURE__ */ jsx7("button", { type: "button", className: !editingEnd ? "is-active" : "", onClick: () => setEditingEnd(false), children: "Start" }),
-        /* @__PURE__ */ jsx7("button", { type: "button", className: editingEnd ? "is-active" : "", onClick: () => setEditingEnd(true), children: "End" })
-      ] }),
-      /* @__PURE__ */ jsxs7("label", { className: "fe-datetime-picker__time", children: [
-        "Time",
-        /* @__PURE__ */ jsx7("input", { type: "time", value: selectedForTime ? `${pad(selectedForTime.getHours())}:${pad(selectedForTime.getMinutes())}` : "00:00", onChange: (event) => setTime(event.target.value), disabled: !selectedForTime })
-      ] })
-    ] })
-  ] });
-}
-
-// packages/tooltip/src/index.tsx
-import { cloneElement, useId as useId2, useState as useState4 } from "react";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-function Tooltip({ content, children, placement = "top", disabled, className, ...props }) {
-  const [visible, setVisible] = useState4(false);
-  const id = useId2();
-  const trigger = cloneElement(children, { "aria-describedby": visible ? id : void 0, onMouseEnter: (event) => {
-    children.props.onMouseEnter?.(event);
-    setVisible(true);
-  }, onMouseLeave: (event) => {
-    children.props.onMouseLeave?.(event);
-    setVisible(false);
-  }, onFocus: (event) => {
-    children.props.onFocus?.(event);
-    setVisible(true);
-  }, onBlur: (event) => {
-    children.props.onBlur?.(event);
-    setVisible(false);
-  } });
-  return /* @__PURE__ */ jsxs8("span", { className: ["fe-tooltip", `fe-tooltip--${placement}`, className].filter(Boolean).join(" "), ...props, children: [
-    trigger,
-    visible && !disabled && /* @__PURE__ */ jsx8("span", { id, role: "tooltip", className: "fe-tooltip__content", children: content })
-  ] });
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      ref: rootRef,
+      className: [
+        "fe-datetime-picker",
+        hasError && "fe-datetime-picker--error",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx13(
+          FieldLabel,
+          {
+            id: labelId,
+            label,
+            description: resolvedDescription,
+            descriptionDisplay,
+            isRequired
+          }
+        ),
+        /* @__PURE__ */ jsxs12(
+          "button",
+          {
+            id: triggerId,
+            type: "button",
+            className: "fe-datetime-picker__trigger",
+            disabled,
+            "aria-invalid": hasError || void 0,
+            "aria-required": isRequired || void 0,
+            "aria-labelledby": labelledBy,
+            "aria-describedby": describedBy,
+            "aria-expanded": open,
+            onClick: () => setOpen((current) => !current),
+            children: [
+              /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", children: "\u25F7" }),
+              /* @__PURE__ */ jsxs12(
+                "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__ */ jsx13("span", { className: "fe-field__required", "aria-hidden": "true", children: "*" })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxs12(
+          "div",
+          {
+            className: "fe-datetime-picker__popper",
+            role: "dialog",
+            "aria-label": "Date and time picker",
+            children: [
+              /* @__PURE__ */ jsxs12("div", { className: "fe-datetime-picker__month", children: [
+                /* @__PURE__ */ jsx13(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Previous month",
+                    onClick: () => setMonth(
+                      (current) => new Date(current.getFullYear(), current.getMonth() - 1, 1)
+                    ),
+                    children: "\u2039"
+                  }
+                ),
+                /* @__PURE__ */ jsx13("strong", { children: month.toLocaleDateString(locale, {
+                  month: "long",
+                  year: "numeric"
+                }) }),
+                /* @__PURE__ */ jsx13(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Next month",
+                    onClick: () => setMonth(
+                      (current) => new Date(current.getFullYear(), current.getMonth() + 1, 1)
+                    ),
+                    children: "\u203A"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx13("div", { className: "fe-datetime-picker__weekdays", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => /* @__PURE__ */ jsx13("span", { children: day }, day)) }),
+              /* @__PURE__ */ jsx13("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__ */ jsx13(
+                  "button",
+                  {
+                    type: "button",
+                    className: [
+                      !inMonth && "is-other-month",
+                      selected && "is-selected",
+                      inRange && "is-in-range"
+                    ].filter(Boolean).join(" "),
+                    onClick: () => selectDay(day),
+                    children: day.getDate()
+                  },
+                  day.toISOString()
+                );
+              }) }),
+              isRange && /* @__PURE__ */ jsxs12("div", { className: "fe-datetime-picker__range-tabs", children: [
+                /* @__PURE__ */ jsx13(
+                  "button",
+                  {
+                    type: "button",
+                    className: !editingEnd ? "is-active" : "",
+                    onClick: () => setEditingEnd(false),
+                    children: "Start"
+                  }
+                ),
+                /* @__PURE__ */ jsx13(
+                  "button",
+                  {
+                    type: "button",
+                    className: editingEnd ? "is-active" : "",
+                    onClick: () => setEditingEnd(true),
+                    children: "End"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs12("label", { className: "fe-datetime-picker__time", children: [
+                "Time",
+                /* @__PURE__ */ jsx13(
+                  "input",
+                  {
+                    type: "time",
+                    value: selectedForTime ? pad(selectedForTime.getHours()) + ":" + pad(selectedForTime.getMinutes()) : "00:00",
+                    onChange: (event) => setTime(event.target.value),
+                    disabled: !selectedForTime
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          FieldMessage,
+          {
+            id: messageId2,
+            error: fieldError,
+            description: resolvedDescription,
+            descriptionDisplay
+          }
+        )
+      ]
+    }
+  );
 }
 
 // packages/expandable-section/src/index.tsx
-import { useId as useId3, useState as useState5 } from "react";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useId as useId7, useState as useState10 } from "react";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function ExpandableSection({ title, children, expanded, defaultExpanded = false, onExpandedChange, disabled, className, ...props }) {
-  const [internalExpanded, setInternalExpanded] = useState5(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = useState10(defaultExpanded);
   const isExpanded = expanded ?? internalExpanded;
-  const id = useId3();
+  const id = useId7();
   const toggle = () => {
     if (disabled) return;
     const next = !isExpanded;
     if (expanded === void 0) setInternalExpanded(next);
     onExpandedChange?.(next);
   };
-  return /* @__PURE__ */ jsxs9("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
-    /* @__PURE__ */ jsxs9("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
-      /* @__PURE__ */ jsx9("span", { children: title }),
-      /* @__PURE__ */ jsx9("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
+  return /* @__PURE__ */ jsxs13("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ jsxs13("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
+      /* @__PURE__ */ jsx14("span", { children: title }),
+      /* @__PURE__ */ jsx14("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
     ] }),
-    /* @__PURE__ */ jsx9("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ jsx9("div", { className: "fe-expandable-section__content-inner", children }) })
+    /* @__PURE__ */ jsx14("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ jsx14("div", { className: "fe-expandable-section__content-inner", children }) })
   ] });
 }
 
 // packages/loading/src/index.tsx
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var sizes = {
   small: "16px",
   medium: "24px",
@@ -801,15 +1636,15 @@ function Loading({ size = "medium", color = "#2878f0", label, className, style,
     "--fe-loading-color": color,
     ...style
   };
-  return /* @__PURE__ */ jsxs10("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
-    /* @__PURE__ */ jsx10("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
-    label && /* @__PURE__ */ jsx10("span", { className: "fe-loading__label", children: label }),
-    !label && /* @__PURE__ */ jsx10("span", { className: "fe-loading__sr-only", children: "Loading" })
+  return /* @__PURE__ */ jsxs14("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
+    /* @__PURE__ */ jsx15("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ jsx15("span", { className: "fe-loading__label", children: label }),
+    !label && /* @__PURE__ */ jsx15("span", { className: "fe-loading__sr-only", children: "Loading" })
   ] });
 }
 
 // packages/skeleton/src/index.tsx
-import { Fragment as Fragment2, jsx as jsx11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16 } from "react/jsx-runtime";
 var pixels = (value) => typeof value === "number" ? `${value}px` : value;
 function SkeletonBase({ variant = "box", shape, width, height, count = 1, animated = true, className, style, ...props }) {
   const resolvedVariant = shape ?? variant;
@@ -820,7 +1655,7 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
     "--fe-skeleton-height": resolvedHeight,
     ...style
   };
-  return /* @__PURE__ */ jsx11(Fragment2, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx16(Fragment3, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ jsx16(
     "div",
     {
       className: ["fe-skeleton", `fe-skeleton--${resolvedVariant}`, animated && "fe-skeleton--animated", className].filter(Boolean).join(" "),
@@ -832,16 +1667,16 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
   )) });
 }
 function SkeletonCircle({ size = 40, ...props }) {
-  return /* @__PURE__ */ jsx11(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
+  return /* @__PURE__ */ jsx16(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
 }
 function SkeletonSquare({ size = 80, ...props }) {
-  return /* @__PURE__ */ jsx11(SkeletonBase, { variant: "box", width: size, height: size, ...props });
+  return /* @__PURE__ */ jsx16(SkeletonBase, { variant: "box", width: size, height: size, ...props });
 }
 function SkeletonBox({ width = "100%", height = 80, ...props }) {
-  return /* @__PURE__ */ jsx11(SkeletonBase, { variant: "box", width, height, ...props });
+  return /* @__PURE__ */ jsx16(SkeletonBase, { variant: "box", width, height, ...props });
 }
 function SkeletonLine({ width = "100%", height = 12, ...props }) {
-  return /* @__PURE__ */ jsx11(SkeletonBase, { variant: "line", width, height, ...props });
+  return /* @__PURE__ */ jsx16(SkeletonBase, { variant: "line", width, height, ...props });
 }
 var Skeleton = Object.assign(SkeletonBase, {
   Circle: SkeletonCircle,
@@ -851,9 +1686,9 @@ var Skeleton = Object.assign(SkeletonBase, {
 });
 
 // packages/modal/src/index.tsx
-import { useEffect as useEffect4, useId as useId4, useRef as useRef3 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useId as useId8, useRef as useRef4 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function Modal({
   open,
   onClose,
@@ -869,9 +1704,9 @@ function Modal({
   className,
   ...props
 }) {
-  const titleId = useId4();
-  const panelRef = useRef3(null);
-  useEffect4(() => {
+  const titleId = useId8();
+  const panelRef = useRef4(null);
+  useEffect6(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -882,10 +1717,10 @@ function Modal({
   }, [onClose, open]);
   if (!open || typeof document === "undefined") return null;
   const hasFooter = footer || actions.length > 0;
-  return createPortal2(
-    /* @__PURE__ */ jsx12("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
+  return createPortal3(
+    /* @__PURE__ */ jsx17("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
       if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-    }, children: /* @__PURE__ */ jsxs11(
+    }, children: /* @__PURE__ */ jsxs15(
       "div",
       {
         ref: panelRef,
@@ -897,17 +1732,17 @@ function Modal({
         tabIndex: -1,
         ...props,
         children: [
-          (title || description || closeButton) && /* @__PURE__ */ jsxs11("header", { className: "fe-modal__header", children: [
-            /* @__PURE__ */ jsxs11("div", { className: "fe-modal__heading", children: [
-              title && /* @__PURE__ */ jsx12("h2", { id: titleId, children: title }),
-              description && /* @__PURE__ */ jsx12("p", { children: description })
+          (title || description || closeButton) && /* @__PURE__ */ jsxs15("header", { className: "fe-modal__header", children: [
+            /* @__PURE__ */ jsxs15("div", { className: "fe-modal__heading", children: [
+              title && /* @__PURE__ */ jsx17("h2", { id: titleId, children: title }),
+              description && /* @__PURE__ */ jsx17("p", { children: description })
             ] }),
-            closeButton && /* @__PURE__ */ jsx12(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ jsx12(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
+            closeButton && /* @__PURE__ */ jsx17(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ jsx17(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
           ] }),
-          /* @__PURE__ */ jsx12("div", { className: "fe-modal__body", children }),
-          hasFooter && /* @__PURE__ */ jsxs11("footer", { className: "fe-modal__footer", children: [
-            footer && /* @__PURE__ */ jsx12("div", { className: "fe-modal__footer-content", children: footer }),
-            actions.length > 0 && /* @__PURE__ */ jsx12("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ jsx12(Button, { ...action, children: label }, index)) })
+          /* @__PURE__ */ jsx17("div", { className: "fe-modal__body", children }),
+          hasFooter && /* @__PURE__ */ jsxs15("footer", { className: "fe-modal__footer", children: [
+            footer && /* @__PURE__ */ jsx17("div", { className: "fe-modal__footer-content", children: footer }),
+            actions.length > 0 && /* @__PURE__ */ jsx17("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ jsx17(Button, { ...action, children: label }, index)) })
           ] })
         ]
       }
@@ -917,7 +1752,7 @@ function Modal({
 }
 
 // packages/progress/src/index.tsx
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 function ProgressBar({ value, max = 100, label, showValue = true, size = "medium", color = "#2878f0", className, style, "aria-label": ariaLabel, ...props }) {
   const indeterminate = value === null || value === void 0;
   const percentage = indeterminate ? 0 : Math.min(100, Math.max(0, Number(value) / Math.max(1, max) * 100));
@@ -927,17 +1762,17 @@ function ProgressBar({ value, max = 100, label, showValue = true, size = "medium
     ...style
   };
   const visibleValue = `${Math.round(percentage)}%`;
-  return /* @__PURE__ */ jsxs12("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
-    (label || !indeterminate && showValue) && /* @__PURE__ */ jsxs12("div", { className: "fe-progress__meta", children: [
-      label && /* @__PURE__ */ jsx13("span", { className: "fe-progress__label", children: label }),
-      !indeterminate && showValue && /* @__PURE__ */ jsx13("output", { className: "fe-progress__value", children: visibleValue })
+  return /* @__PURE__ */ jsxs16("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
+    (label || !indeterminate && showValue) && /* @__PURE__ */ jsxs16("div", { className: "fe-progress__meta", children: [
+      label && /* @__PURE__ */ jsx18("span", { className: "fe-progress__label", children: label }),
+      !indeterminate && showValue && /* @__PURE__ */ jsx18("output", { className: "fe-progress__value", children: visibleValue })
     ] }),
-    /* @__PURE__ */ jsx13("div", { className: "fe-progress__track", role: "progressbar", "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Progress"), "aria-valuemin": indeterminate ? void 0 : 0, "aria-valuemax": indeterminate ? void 0 : max, "aria-valuenow": indeterminate ? void 0 : Number(value), "aria-valuetext": indeterminate ? "Loading" : visibleValue, children: /* @__PURE__ */ jsx13("span", { className: "fe-progress__indicator" }) })
+    /* @__PURE__ */ jsx18("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__ */ jsx18("span", { className: "fe-progress__indicator" }) })
   ] });
 }
 
 // packages/chip/src/index.tsx
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var statuses = ["default", "info", "success", "warning", "error", "neutral", "pending", "processing"];
 function Chip({ children, status = "default", color, variant = "subtle", dot = false, onRemove, removeLabel = "Remove", className, style, ...props }) {
   const usesCustomColor = Boolean(color);
@@ -946,16 +1781,16 @@ function Chip({ children, status = "default", color, variant = "subtle", dot = f
     ...style
   };
   const resolvedStatus = statuses.includes(status) ? status : "default";
-  return /* @__PURE__ */ jsxs13("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
-    dot && /* @__PURE__ */ jsx14("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx14("span", { className: "fe-chip__content", children }),
-    onRemove && /* @__PURE__ */ jsx14(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ jsx14(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
+  return /* @__PURE__ */ jsxs17("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
+    dot && /* @__PURE__ */ jsx19("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx19("span", { className: "fe-chip__content", children }),
+    onRemove && /* @__PURE__ */ jsx19(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ jsx19(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
   ] });
 }
 
 // packages/message/src/index.tsx
-import { useEffect as useEffect5, useState as useState6 } from "react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useState as useState11 } from "react";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 var messageId = 0;
 var entries = [];
 var listeners = /* @__PURE__ */ new Set();
@@ -988,22 +1823,22 @@ var message = {
 };
 var icons = { success: "\u2713", info: "i", warning: "!", error: "\xD7" };
 function Message({ maxCount = 4, closeLabel = "Close notification", className, ...props }) {
-  const [visibleEntries, setVisibleEntries] = useState6(entries);
-  useEffect5(() => {
+  const [visibleEntries, setVisibleEntries] = useState11(entries);
+  useEffect7(() => {
     const listener = (nextEntries) => setVisibleEntries(nextEntries);
     listeners.add(listener);
     return () => {
       listeners.delete(listener);
     };
   }, []);
-  return /* @__PURE__ */ jsx15("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ jsxs14("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
-    /* @__PURE__ */ jsx15("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
-    /* @__PURE__ */ jsxs14("div", { className: "fe-message__body", children: [
-      entry.title && /* @__PURE__ */ jsx15("strong", { className: "fe-message__title", children: entry.title }),
-      /* @__PURE__ */ jsx15("div", { className: "fe-message__content", children: entry.content })
+  return /* @__PURE__ */ jsx20("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ jsxs18("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
+    /* @__PURE__ */ jsx20("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
+    /* @__PURE__ */ jsxs18("div", { className: "fe-message__body", children: [
+      entry.title && /* @__PURE__ */ jsx20("strong", { className: "fe-message__title", children: entry.title }),
+      /* @__PURE__ */ jsx20("div", { className: "fe-message__content", children: entry.content })
     ] }),
-    entry.action && /* @__PURE__ */ jsx15("span", { className: "fe-message__action", children: entry.action }),
-    /* @__PURE__ */ jsx15(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
+    entry.action && /* @__PURE__ */ jsx20("span", { className: "fe-message__action", children: entry.action }),
+    /* @__PURE__ */ jsx20(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
   ] }, entry.id)) });
 }
 ((Message2) => {
@@ -1017,8 +1852,8 @@ function Message({ maxCount = 4, closeLabel = "Close notification", className, .
 })(Message || (Message = {}));
 
 // packages/snackbar/src/index.tsx
-import { useEffect as useEffect6 } from "react";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useEffect as useEffect8 } from "react";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function Snackbar({
   open,
   message: message2,
@@ -1032,12 +1867,12 @@ function Snackbar({
 }) {
   const vertical = anchorOrigin.vertical ?? "bottom";
   const horizontal = anchorOrigin.horizontal ?? "center";
-  useEffect6(() => {
+  useEffect8(() => {
     if (!open || autoHideDuration === null) return void 0;
     const timer = window.setTimeout(() => onClose?.("timeout"), autoHideDuration);
     return () => window.clearTimeout(timer);
   }, [open, autoHideDuration, onClose]);
-  useEffect6(() => {
+  useEffect8(() => {
     if (!open) return void 0;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose?.("escapeKeyDown");
@@ -1046,10 +1881,10 @@ function Snackbar({
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
   if (!open) return null;
-  return /* @__PURE__ */ jsx16("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs15("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
-    /* @__PURE__ */ jsx16("span", { className: "fe-snackbar__message", children: message2 }),
-    action && /* @__PURE__ */ jsx16("span", { className: "fe-snackbar__action", children: action }),
-    onClose && /* @__PURE__ */ jsx16(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
+  return /* @__PURE__ */ jsx21("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs19("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx21("span", { className: "fe-snackbar__message", children: message2 }),
+    action && /* @__PURE__ */ jsx21("span", { className: "fe-snackbar__action", children: action }),
+    onClose && /* @__PURE__ */ jsx21(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
   ] }) });
 }
 export {
@@ -1087,7 +1922,24 @@ export {
   TextInput,
   Toggle,
   Tooltip,
+  arrow_left,
+  check_square_fill,
+  chevron_down,
+  chevron_left,
+  chevron_right,
+  chevron_up,
+  copy,
   formatNumber,
   getIconSize,
-  message
+  key,
+  lock,
+  lock_unlocked,
+  log_out,
+  message,
+  minus_square,
+  plus,
+  plus_square,
+  search,
+  trash,
+  x_close
 };