@dragunio/fe-libs 0.1.5 → 0.1.6

package/dist/index.mjs

@@ -1,5 +1,6 @@
 import {
   ChevronDownIcon,
+  ChevronUpIcon,
   CloseIcon,
   PlusIcon,
   SearchIcon,
@@ -20,7 +21,7 @@ import {
   search,
   trash,
   x_close
-} from "./chunk-3TCR34LS.mjs";
+} from "./chunk-NDMLXSI5.mjs";
 
 // packages/button/src/index.tsx
 import { forwardRef } from "react";
@@ -339,18 +340,39 @@ function TableCaption(props) {
 }
 
 // packages/toggle/src/index.tsx
-import { forwardRef as forwardRef2 } from "react";
+import {
+  forwardRef as forwardRef2
+} from "react";
 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(" ");
+var Toggle = forwardRef2(function Toggle2({
+  color = "#16a34a",
+  label,
+  labelPosition = "right",
+  className,
+  style,
+  id,
+  ...props
+}, ref) {
+  const classes = ["fe-toggle", `fe-toggle--label-${labelPosition}`, className].filter(Boolean).join(" ");
   const toggleStyle = {
     "--fe-toggle-color": color,
     ...style
   };
   return /* @__PURE__ */ jsxs4("label", { className: classes, style: toggleStyle, children: [
-    /* @__PURE__ */ jsx4("input", { ref, id, className: "fe-toggle__input", type: "checkbox", role: "switch", ...props }),
+    label && labelPosition === "top" && /* @__PURE__ */ jsx4("span", { className: "fe-toggle__label", children: label }),
+    /* @__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 })
+    label && labelPosition === "right" && /* @__PURE__ */ jsx4("span", { className: "fe-toggle__label", children: label })
   ] });
 });
 Toggle.displayName = "Toggle";
@@ -602,7 +624,14 @@ var TextInput = forwardRef3(
 TextInput.displayName = "TextInput";
 
 // packages/form-controls/src/controls/TextArea/text-area.tsx
-import { forwardRef as forwardRef4, useId as useId3, useState as useState5 } from "react";
+import {
+  forwardRef as forwardRef4,
+  useId as useId3,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef as useRef2,
+  useState as useState5
+} from "react";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var TextArea = forwardRef4(
   function TextArea2({
@@ -616,6 +645,7 @@ var TextArea = forwardRef4(
     helperText,
     error,
     errorMessage,
+    autosize = false,
     clearable = false,
     onClear,
     clearLabel = "Clear text area",
@@ -636,6 +666,7 @@ var TextArea = forwardRef4(
     const messageId2 = generatedId + "-message";
     const controlled = value !== void 0;
     const [internalValue, setInternalValue] = useState5(defaultValue);
+    const textareaRef = useRef2(null);
     const currentValue = controlled ? value : internalValue;
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
@@ -649,6 +680,16 @@ var TextArea = forwardRef4(
       ariaLabelledBy,
       label ? labelId : void 0
     );
+    const resizeToContent = (textarea) => {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    };
+    useImperativeHandle(ref, () => textareaRef.current, []);
+    useLayoutEffect(() => {
+      if (autosize && textareaRef.current) {
+        resizeToContent(textareaRef.current);
+      }
+    }, [autosize, currentValue]);
     const clear = () => {
       if (!controlled) setInternalValue("");
       onValueChange?.("");
@@ -660,6 +701,7 @@ var TextArea = forwardRef4(
         className: [
           "fe-text-area",
           hasError && "fe-text-area--error",
+          autosize && "fe-text-area--autosize",
           className
         ].filter(Boolean).join(" "),
         children: [
@@ -677,7 +719,7 @@ var TextArea = forwardRef4(
             /* @__PURE__ */ jsx9(
               "textarea",
               {
-                ref,
+                ref: textareaRef,
                 id: inputId,
                 value: currentValue,
                 placeholder,
@@ -690,6 +732,7 @@ var TextArea = forwardRef4(
                 "aria-describedby": describedBy,
                 onChange: (event) => {
                   if (!controlled) setInternalValue(event.target.value);
+                  if (autosize) resizeToContent(event.currentTarget);
                   onValueChange?.(event.target.value);
                   onChange?.(event);
                 },
@@ -734,8 +777,8 @@ import {
   forwardRef as forwardRef5,
   useEffect as useEffect3,
   useId as useId4,
-  useLayoutEffect,
-  useRef as useRef2,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef3,
   useState as useState6
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
@@ -798,8 +841,8 @@ var Selection = forwardRef5(
     const [open, setOpen] = useState6(false);
     const [query, setQuery] = useState6("");
     const [activeIndex, setActiveIndex] = useState6(0);
-    const rootRef = useRef2(null);
-    const menuRef = useRef2(null);
+    const rootRef = useRef3(null);
+    const menuRef = useRef3(null);
     const [menuPosition, setMenuPosition] = useState6(null);
     useEffect3(() => {
       const close = (event) => {
@@ -810,7 +853,7 @@ var Selection = forwardRef5(
       document.addEventListener("mousedown", close);
       return () => document.removeEventListener("mousedown", close);
     }, []);
-    useLayoutEffect(() => {
+    useLayoutEffect2(() => {
       if (!open) return;
       const updateMenuPosition = () => {
         const rect = rootRef.current?.getBoundingClientRect();
@@ -1067,7 +1110,13 @@ var Selection = forwardRef5(
 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 {
+  forwardRef as forwardRef6,
+  useEffect as useEffect4,
+  useId as useId5,
+  useRef as useRef4,
+  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", {
@@ -1082,6 +1131,11 @@ function escapeRegExp(value) {
 function groupInteger(value, separator) {
   return value.replace(/\B(?=(\d{3})+(?!\d))/g, separator);
 }
+function roundToDecimals(value, decimals) {
+  const precision = Math.min(Math.max(0, decimals), 15);
+  const multiplier = 10 ** precision;
+  return Math.round((value + Number.EPSILON) * multiplier) / multiplier;
+}
 function normalizeNumberInput(raw, options) {
   const { allowDecimal, decimalSeparator, thousandSeparator, min, max } = options;
   const decimals = Math.max(0, options.decimals);
@@ -1144,10 +1198,20 @@ var NumberInput = forwardRef6(
     placeholder,
     required,
     endAdornment,
+    prefix,
+    suffix,
+    Prefix,
+    Suffix,
+    step = 1,
+    showStepper = true,
+    incrementLabel = "Increase value",
+    decrementLabel = "Decrease value",
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
+    onKeyDown,
     ...props
   }, ref) {
+    const inputRef = useRef4(null);
     const generatedId = useId5();
     const messageId2 = generatedId + "-message";
     const isControlled = value !== void 0;
@@ -1175,6 +1239,8 @@ var NumberInput = forwardRef6(
       ariaLabelledBy,
       label ? labelId : void 0
     );
+    const resolvedPrefix = prefix ?? Prefix;
+    const resolvedSuffix = suffix ?? Suffix;
     useEffect4(() => {
       if (!focused)
         setText(
@@ -1199,8 +1265,38 @@ var NumberInput = forwardRef6(
       if (!isControlled) setInternalValue(next.value);
       onValueChange?.(next.value);
     };
+    const setValue = (nextValue) => {
+      const clamped = Math.min(
+        max ?? Number.POSITIVE_INFINITY,
+        Math.max(min ?? Number.NEGATIVE_INFINITY, nextValue)
+      );
+      const normalized = roundToDecimals(
+        clamped,
+        allowDecimal ? decimals : 0
+      );
+      setText(
+        formatNumber(
+          normalized,
+          decimals,
+          thousandSeparator,
+          decimalSeparator
+        )
+      );
+      if (!isControlled) setInternalValue(normalized);
+      onValueChange?.(normalized);
+    };
+    const adjustValue = (direction) => {
+      if (props.disabled || props.readOnly || !Number.isFinite(step) || step <= 0)
+        return;
+      const baseValue = actualValue ?? min ?? 0;
+      setValue(baseValue + direction * step);
+      inputRef.current?.focus();
+    };
+    const stepIsUsable = Number.isFinite(step) && step > 0;
+    const disableIncrement = Boolean(props.disabled || props.readOnly) || !stepIsUsable || max !== void 0 && actualValue !== null && actualValue >= max;
+    const disableDecrement = Boolean(props.disabled || props.readOnly) || !stepIsUsable || min !== void 0 && actualValue !== null && actualValue <= min;
     return /* @__PURE__ */ jsxs11(
-      "label",
+      "div",
       {
         className: [
           "fe-number-input",
@@ -1219,35 +1315,86 @@ var NumberInput = forwardRef6(
             }
           ),
           /* @__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: "*" })
+            resolvedPrefix && /* @__PURE__ */ jsx11("span", { className: "fe-number-input__prefix", children: resolvedPrefix }),
+            /* @__PURE__ */ jsxs11("span", { className: "fe-number-input__input-wrap", children: [
+              /* @__PURE__ */ jsx11(
+                "input",
+                {
+                  ref: (node) => {
+                    inputRef.current = node;
+                    if (typeof ref === "function") ref(node);
+                    else if (ref) ref.current = node;
+                  },
+                  inputMode: allowDecimal ? "decimal" : "numeric",
+                  value: text,
+                  placeholder,
+                  required: isRequired || required,
+                  onFocus: (event) => {
+                    setFocused(true);
+                    onFocus?.(event);
+                  },
+                  onChange: (event) => updateValue(event.target.value),
+                  onBlur: (event) => {
+                    setFocused(false);
+                    onBlur?.(event);
+                  },
+                  onKeyDown: (event) => {
+                    onKeyDown?.(event);
+                    if (event.defaultPrevented) return;
+                    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                      event.preventDefault();
+                      adjustValue(event.key === "ArrowUp" ? 1 : -1);
+                    }
+                  },
+                  ...props,
+                  "aria-invalid": hasError || void 0,
+                  "aria-required": isRequired || void 0,
+                  "aria-labelledby": labelledBy,
+                  "aria-describedby": describedBy
+                }
+              ),
+              isRequired && placeholder && !text && /* @__PURE__ */ 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
+            resolvedSuffix && /* @__PURE__ */ jsx11("span", { className: "fe-number-input__suffix", children: resolvedSuffix }),
+            endAdornment,
+            showStepper && /* @__PURE__ */ jsxs11("span", { className: "fe-number-input__stepper", children: [
+              /* @__PURE__ */ jsx11(
+                Button,
+                {
+                  hierarchy: "tertiary-gray",
+                  size: "24",
+                  iconOnly: true,
+                  icon: /* @__PURE__ */ jsx11(ChevronUpIcon, { size: 12 }),
+                  "aria-label": incrementLabel,
+                  disabled: disableIncrement,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => adjustValue(1)
+                }
+              ),
+              /* @__PURE__ */ jsx11(
+                Button,
+                {
+                  hierarchy: "tertiary-gray",
+                  size: "24",
+                  iconOnly: true,
+                  icon: /* @__PURE__ */ jsx11(ChevronDownIcon, { size: 12 }),
+                  "aria-label": decrementLabel,
+                  disabled: disableDecrement,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => adjustValue(-1)
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ jsx11(
             FieldMessage,
@@ -1316,7 +1463,7 @@ function CurrencyInput({
 }
 
 // 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 { useEffect as useEffect5, useId as useId6, useRef as useRef5, 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) {
@@ -1384,7 +1531,7 @@ function DateTimePicker(props) {
     () => new Date((isRange ? rangeValue[0] : singleValue) ?? /* @__PURE__ */ new Date())
   );
   const [editingEnd, setEditingEnd] = useState9(false);
-  const rootRef = useRef3(null);
+  const rootRef = useRef5(null);
   useEffect5(() => {
     const onPointerDown = (event) => {
       if (!rootRef.current?.contains(event.target)) setOpen(false);
@@ -1600,30 +1747,190 @@ function DateTimePicker(props) {
   );
 }
 
-// packages/expandable-section/src/index.tsx
-import { useId as useId7, useState as useState10 } from "react";
+// packages/form-controls/src/controls/Checkbox/checkbox.tsx
+import { forwardRef as forwardRef7 } from "react";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+var Checkbox = forwardRef7(
+  function Checkbox2({
+    label,
+    labelPosition = "right",
+    className,
+    style,
+    id,
+    disabled,
+    ...props
+  }, ref) {
+    const classes = [
+      "fe-checkbox",
+      `fe-checkbox--label-${labelPosition}`,
+      disabled && "fe-checkbox--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs13("label", { className: classes, style, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ jsx14("span", { className: "fe-checkbox__label", children: label }),
+      /* @__PURE__ */ jsxs13("span", { className: "fe-checkbox__content", children: [
+        /* @__PURE__ */ jsx14(
+          "input",
+          {
+            ref,
+            id,
+            className: "fe-checkbox__input",
+            type: "checkbox",
+            disabled,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx14("span", { className: "fe-checkbox__control", "aria-hidden": "true" }),
+        label && labelPosition === "right" && /* @__PURE__ */ jsx14("span", { className: "fe-checkbox__label", children: label })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// packages/form-controls/src/controls/RadioButton/radio-button.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+var RadioButton = forwardRef8(
+  function RadioButton2({
+    label,
+    labelPosition = "right",
+    className,
+    style,
+    id,
+    disabled,
+    ...props
+  }, ref) {
+    const classes = [
+      "fe-radio-button",
+      `fe-radio-button--label-${labelPosition}`,
+      disabled && "fe-radio-button--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs14("label", { className: classes, style, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ jsx15("span", { className: "fe-radio-button__label", children: label }),
+      /* @__PURE__ */ jsxs14("span", { className: "fe-radio-button__content", children: [
+        /* @__PURE__ */ jsx15(
+          "input",
+          {
+            ref,
+            id,
+            className: "fe-radio-button__input",
+            type: "radio",
+            disabled,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx15("span", { className: "fe-radio-button__control", "aria-hidden": "true" }),
+        label && labelPosition === "right" && /* @__PURE__ */ jsx15("span", { className: "fe-radio-button__label", children: label })
+      ] })
+    ] });
+  }
+);
+RadioButton.displayName = "RadioButton";
+
+// packages/form-controls/src/controls/RadioGroup/radio-group.tsx
+import { forwardRef as forwardRef9, useId as useId7 } from "react";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+var RadioGroup = forwardRef9(
+  function RadioGroup2({
+    label,
+    labelPosition = "top",
+    options,
+    name,
+    value,
+    defaultValue,
+    onChange,
+    disabled = false,
+    direction = "vertical",
+    isRequired = false,
+    className,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) {
+    const generatedId = useId7();
+    const groupName = name ?? `fe-radio-group-${generatedId}`;
+    const labelId = `${id ?? generatedId}-label`;
+    const isControlled = value !== void 0;
+    const classes = [
+      "fe-radio-group",
+      `fe-radio-group--label-${labelPosition}`,
+      `fe-radio-group--${direction}`,
+      disabled && "fe-radio-group--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (option, event) => {
+      if (event.target.checked) onChange?.(option.value, option, event);
+    };
+    return /* @__PURE__ */ jsxs15("div", { ref, className: classes, ...props, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ jsxs15("span", { id: labelId, className: "fe-radio-group__label", children: [
+        label,
+        isRequired && /* @__PURE__ */ jsx16("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsx16(
+        "div",
+        {
+          id,
+          className: "fe-radio-group__options",
+          role: "radiogroup",
+          "aria-label": label ? void 0 : ariaLabel,
+          "aria-labelledby": label ? labelId : ariaLabelledBy,
+          "aria-required": isRequired || void 0,
+          children: options.map((option) => {
+            const optionDisabled = disabled || option.disabled;
+            const optionValue = String(option.value);
+            return /* @__PURE__ */ jsx16(
+              RadioButton,
+              {
+                name: groupName,
+                value: optionValue,
+                label: option.label,
+                disabled: optionDisabled,
+                required: isRequired,
+                checked: isControlled ? option.value === value : void 0,
+                defaultChecked: !isControlled ? option.value === defaultValue : void 0,
+                onChange: (event) => handleChange(option, event)
+              },
+              optionValue
+            );
+          })
+        }
+      ),
+      label && labelPosition === "right" && /* @__PURE__ */ jsxs15("span", { id: labelId, className: "fe-radio-group__label", children: [
+        label,
+        isRequired && /* @__PURE__ */ jsx16("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
+      ] })
+    ] });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+
+// packages/expandable-section/src/index.tsx
+import { useId as useId8, useState as useState10 } from "react";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 function ExpandableSection({ title, children, expanded, defaultExpanded = false, onExpandedChange, disabled, className, ...props }) {
   const [internalExpanded, setInternalExpanded] = useState10(defaultExpanded);
   const isExpanded = expanded ?? internalExpanded;
-  const id = useId7();
+  const id = useId8();
   const toggle = () => {
     if (disabled) return;
     const next = !isExpanded;
     if (expanded === void 0) setInternalExpanded(next);
     onExpandedChange?.(next);
   };
-  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" })
+  return /* @__PURE__ */ jsxs16("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ jsxs16("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
+      /* @__PURE__ */ jsx17("span", { children: title }),
+      /* @__PURE__ */ jsx17("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
     ] }),
-    /* @__PURE__ */ jsx14("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ jsx14("div", { className: "fe-expandable-section__content-inner", children }) })
+    /* @__PURE__ */ jsx17("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ jsx17("div", { className: "fe-expandable-section__content-inner", children }) })
   ] });
 }
 
 // packages/loading/src/index.tsx
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var sizes = {
   small: "16px",
   medium: "24px",
@@ -1636,15 +1943,15 @@ function Loading({ size = "medium", color = "#2878f0", label, className, style,
     "--fe-loading-color": color,
     ...style
   };
-  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" })
+  return /* @__PURE__ */ jsxs17("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
+    /* @__PURE__ */ jsx18("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ jsx18("span", { className: "fe-loading__label", children: label }),
+    !label && /* @__PURE__ */ jsx18("span", { className: "fe-loading__sr-only", children: "Loading" })
   ] });
 }
 
 // packages/skeleton/src/index.tsx
-import { Fragment as Fragment3, jsx as jsx16 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19 } 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;
@@ -1655,7 +1962,7 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
     "--fe-skeleton-height": resolvedHeight,
     ...style
   };
-  return /* @__PURE__ */ jsx16(Fragment3, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx19(Fragment3, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ jsx19(
     "div",
     {
       className: ["fe-skeleton", `fe-skeleton--${resolvedVariant}`, animated && "fe-skeleton--animated", className].filter(Boolean).join(" "),
@@ -1667,16 +1974,16 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
   )) });
 }
 function SkeletonCircle({ size = 40, ...props }) {
-  return /* @__PURE__ */ jsx16(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
+  return /* @__PURE__ */ jsx19(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
 }
 function SkeletonSquare({ size = 80, ...props }) {
-  return /* @__PURE__ */ jsx16(SkeletonBase, { variant: "box", width: size, height: size, ...props });
+  return /* @__PURE__ */ jsx19(SkeletonBase, { variant: "box", width: size, height: size, ...props });
 }
 function SkeletonBox({ width = "100%", height = 80, ...props }) {
-  return /* @__PURE__ */ jsx16(SkeletonBase, { variant: "box", width, height, ...props });
+  return /* @__PURE__ */ jsx19(SkeletonBase, { variant: "box", width, height, ...props });
 }
 function SkeletonLine({ width = "100%", height = 12, ...props }) {
-  return /* @__PURE__ */ jsx16(SkeletonBase, { variant: "line", width, height, ...props });
+  return /* @__PURE__ */ jsx19(SkeletonBase, { variant: "line", width, height, ...props });
 }
 var Skeleton = Object.assign(SkeletonBase, {
   Circle: SkeletonCircle,
@@ -1686,9 +1993,9 @@ var Skeleton = Object.assign(SkeletonBase, {
 });
 
 // packages/modal/src/index.tsx
-import { useEffect as useEffect6, useId as useId8, useRef as useRef4 } from "react";
+import { useEffect as useEffect6, useId as useId9, useRef as useRef6 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function Modal({
   open,
   onClose,
@@ -1704,8 +2011,8 @@ function Modal({
   className,
   ...props
 }) {
-  const titleId = useId8();
-  const panelRef = useRef4(null);
+  const titleId = useId9();
+  const panelRef = useRef6(null);
   useEffect6(() => {
     if (!open) return;
     const onKeyDown = (event) => {
@@ -1718,9 +2025,9 @@ function Modal({
   if (!open || typeof document === "undefined") return null;
   const hasFooter = footer || actions.length > 0;
   return createPortal3(
-    /* @__PURE__ */ jsx17("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
+    /* @__PURE__ */ jsx20("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
       if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-    }, children: /* @__PURE__ */ jsxs15(
+    }, children: /* @__PURE__ */ jsxs18(
       "div",
       {
         ref: panelRef,
@@ -1732,17 +2039,17 @@ function Modal({
         tabIndex: -1,
         ...props,
         children: [
-          (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 })
+          (title || description || closeButton) && /* @__PURE__ */ jsxs18("header", { className: "fe-modal__header", children: [
+            /* @__PURE__ */ jsxs18("div", { className: "fe-modal__heading", children: [
+              title && /* @__PURE__ */ jsx20("h2", { id: titleId, children: title }),
+              description && /* @__PURE__ */ jsx20("p", { children: description })
             ] }),
-            closeButton && /* @__PURE__ */ jsx17(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ jsx17(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
+            closeButton && /* @__PURE__ */ jsx20(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ jsx20(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
           ] }),
-          /* @__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)) })
+          /* @__PURE__ */ jsx20("div", { className: "fe-modal__body", children }),
+          hasFooter && /* @__PURE__ */ jsxs18("footer", { className: "fe-modal__footer", children: [
+            footer && /* @__PURE__ */ jsx20("div", { className: "fe-modal__footer-content", children: footer }),
+            actions.length > 0 && /* @__PURE__ */ jsx20("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ jsx20(Button, { ...action, children: label }, index)) })
           ] })
         ]
       }
@@ -1752,7 +2059,7 @@ function Modal({
 }
 
 // packages/progress/src/index.tsx
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs19 } 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));
@@ -1762,17 +2069,17 @@ function ProgressBar({ value, max = 100, label, showValue = true, size = "medium
     ...style
   };
   const visibleValue = `${Math.round(percentage)}%`;
-  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 })
+  return /* @__PURE__ */ jsxs19("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
+    (label || !indeterminate && showValue) && /* @__PURE__ */ jsxs19("div", { className: "fe-progress__meta", children: [
+      label && /* @__PURE__ */ jsx21("span", { className: "fe-progress__label", children: label }),
+      !indeterminate && showValue && /* @__PURE__ */ jsx21("output", { className: "fe-progress__value", children: visibleValue })
     ] }),
-    /* @__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" }) })
+    /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "fe-progress__indicator" }) })
   ] });
 }
 
 // packages/chip/src/index.tsx
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs20 } 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);
@@ -1781,16 +2088,16 @@ function Chip({ children, status = "default", color, variant = "subtle", dot = f
     ...style
   };
   const resolvedStatus = statuses.includes(status) ? status : "default";
-  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" })
+  return /* @__PURE__ */ jsxs20("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
+    dot && /* @__PURE__ */ jsx22("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx22("span", { className: "fe-chip__content", children }),
+    onRemove && /* @__PURE__ */ jsx22(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ jsx22(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
   ] });
 }
 
 // packages/message/src/index.tsx
 import { useEffect as useEffect7, useState as useState11 } from "react";
-import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 var messageId = 0;
 var entries = [];
 var listeners = /* @__PURE__ */ new Set();
@@ -1831,14 +2138,14 @@ function Message({ maxCount = 4, closeLabel = "Close notification", className, .
       listeners.delete(listener);
     };
   }, []);
-  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 })
+  return /* @__PURE__ */ jsx23("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ jsxs21("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
+    /* @__PURE__ */ jsx23("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
+    /* @__PURE__ */ jsxs21("div", { className: "fe-message__body", children: [
+      entry.title && /* @__PURE__ */ jsx23("strong", { className: "fe-message__title", children: entry.title }),
+      /* @__PURE__ */ jsx23("div", { className: "fe-message__content", children: entry.content })
     ] }),
-    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.action && /* @__PURE__ */ jsx23("span", { className: "fe-message__action", children: entry.action }),
+    /* @__PURE__ */ jsx23(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
   ] }, entry.id)) });
 }
 ((Message2) => {
@@ -1853,7 +2160,7 @@ function Message({ maxCount = 4, closeLabel = "Close notification", className, .
 
 // packages/snackbar/src/index.tsx
 import { useEffect as useEffect8 } from "react";
-import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 function Snackbar({
   open,
   message: message2,
@@ -1881,15 +2188,17 @@ function Snackbar({
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
   if (!open) return null;
-  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") })
+  return /* @__PURE__ */ jsx24("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ jsxs22("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsx24("span", { className: "fe-snackbar__message", children: message2 }),
+    action && /* @__PURE__ */ jsx24("span", { className: "fe-snackbar__action", children: action }),
+    onClose && /* @__PURE__ */ jsx24(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
   ] }) });
 }
 export {
   Button,
+  Checkbox,
   ChevronDownIcon,
+  ChevronUpIcon,
   Chip,
   CloseIcon,
   CurrencyInput,
@@ -1903,6 +2212,8 @@ export {
   Pagination,
   PlusIcon,
   ProgressBar,
+  RadioButton,
+  RadioGroup,
   SearchIcon,
   Selection,
   Skeleton,