@dragunio/fe-libs 0.1.5 → 0.1.6

package/dist/index.js

@@ -21,7 +21,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
+  Checkbox: () => Checkbox,
   ChevronDownIcon: () => ChevronDownIcon,
+  ChevronUpIcon: () => ChevronUpIcon,
   Chip: () => Chip,
   CloseIcon: () => CloseIcon,
   CurrencyInput: () => CurrencyInput,
@@ -35,6 +37,8 @@ __export(index_exports, {
   Pagination: () => Pagination,
   PlusIcon: () => PlusIcon,
   ProgressBar: () => ProgressBar,
+  RadioButton: () => RadioButton,
+  RadioGroup: () => RadioGroup,
   SearchIcon: () => SearchIcon,
   Selection: () => Selection,
   Skeleton: () => Skeleton,
@@ -263,6 +267,18 @@ function ChevronDownIcon(props) {
     }
   ) });
 }
+function ChevronUpIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "path",
+    {
+      d: "m6 15 6-6 6 6",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 function CloseIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { ...iconProps4(props), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "path",
@@ -533,16 +549,35 @@ function TableCaption(props) {
 // packages/toggle/src/index.tsx
 var import_react4 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Toggle = (0, import_react4.forwardRef)(function Toggle2({ color = "#16a34a", label, className, style, id, ...props }, ref) {
-  const classes = ["fe-toggle", className].filter(Boolean).join(" ");
+var Toggle = (0, import_react4.forwardRef)(function Toggle2({
+  color = "#16a34a",
+  label,
+  labelPosition = "right",
+  className,
+  style,
+  id,
+  ...props
+}, ref) {
+  const classes = ["fe-toggle", `fe-toggle--label-${labelPosition}`, className].filter(Boolean).join(" ");
   const toggleStyle = {
     "--fe-toggle-color": color,
     ...style
   };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: classes, style: toggleStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { ref, id, className: "fe-toggle__input", type: "checkbox", role: "switch", ...props }),
+    label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-toggle__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "input",
+      {
+        ref,
+        id,
+        className: "fe-toggle__input",
+        type: "checkbox",
+        role: "switch",
+        ...props
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-toggle__control", "aria-hidden": "true" }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-toggle__label", children: label })
+    label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "fe-toggle__label", children: label })
   ] });
 });
 Toggle.displayName = "Toggle";
@@ -808,6 +843,7 @@ var TextArea = (0, import_react8.forwardRef)(
     helperText,
     error,
     errorMessage,
+    autosize = false,
     clearable = false,
     onClear,
     clearLabel = "Clear text area",
@@ -828,6 +864,7 @@ var TextArea = (0, import_react8.forwardRef)(
     const messageId2 = generatedId + "-message";
     const controlled = value !== void 0;
     const [internalValue, setInternalValue] = (0, import_react8.useState)(defaultValue);
+    const textareaRef = (0, import_react8.useRef)(null);
     const currentValue = controlled ? value : internalValue;
     const fieldError = getFieldError(error, errorMessage);
     const hasError = fieldError !== void 0 && fieldError !== false && fieldError !== null;
@@ -841,6 +878,16 @@ var TextArea = (0, import_react8.forwardRef)(
       ariaLabelledBy,
       label ? labelId : void 0
     );
+    const resizeToContent = (textarea) => {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    };
+    (0, import_react8.useImperativeHandle)(ref, () => textareaRef.current, []);
+    (0, import_react8.useLayoutEffect)(() => {
+      if (autosize && textareaRef.current) {
+        resizeToContent(textareaRef.current);
+      }
+    }, [autosize, currentValue]);
     const clear = () => {
       if (!controlled) setInternalValue("");
       onValueChange?.("");
@@ -852,6 +899,7 @@ var TextArea = (0, import_react8.forwardRef)(
         className: [
           "fe-text-area",
           hasError && "fe-text-area--error",
+          autosize && "fe-text-area--autosize",
           className
         ].filter(Boolean).join(" "),
         children: [
@@ -869,7 +917,7 @@ var TextArea = (0, import_react8.forwardRef)(
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "textarea",
               {
-                ref,
+                ref: textareaRef,
                 id: inputId,
                 value: currentValue,
                 placeholder,
@@ -882,6 +930,7 @@ var TextArea = (0, import_react8.forwardRef)(
                 "aria-describedby": describedBy,
                 onChange: (event) => {
                   if (!controlled) setInternalValue(event.target.value);
+                  if (autosize) resizeToContent(event.currentTarget);
                   onValueChange?.(event.target.value);
                   onChange?.(event);
                 },
@@ -1267,6 +1316,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);
@@ -1329,10 +1383,20 @@ var NumberInput = (0, import_react10.forwardRef)(
     placeholder,
     required,
     endAdornment,
+    prefix,
+    suffix,
+    Prefix,
+    Suffix,
+    step = 1,
+    showStepper = true,
+    incrementLabel = "Increase value",
+    decrementLabel = "Decrease value",
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
+    onKeyDown,
     ...props
   }, ref) {
+    const inputRef = (0, import_react10.useRef)(null);
     const generatedId = (0, import_react10.useId)();
     const messageId2 = generatedId + "-message";
     const isControlled = value !== void 0;
@@ -1360,6 +1424,8 @@ var NumberInput = (0, import_react10.forwardRef)(
       ariaLabelledBy,
       label ? labelId : void 0
     );
+    const resolvedPrefix = prefix ?? Prefix;
+    const resolvedSuffix = suffix ?? Suffix;
     (0, import_react10.useEffect)(() => {
       if (!focused)
         setText(
@@ -1384,8 +1450,38 @@ var NumberInput = (0, import_react10.forwardRef)(
       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__ */ (0, import_jsx_runtime15.jsxs)(
-      "label",
+      "div",
       {
         className: [
           "fe-number-input",
@@ -1404,35 +1500,86 @@ var NumberInput = (0, import_react10.forwardRef)(
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "fe-number-input__control", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-              "input",
-              {
-                ref,
-                inputMode: allowDecimal ? "decimal" : "numeric",
-                value: text,
-                placeholder,
-                required: isRequired || required,
-                onFocus: (event) => {
-                  setFocused(true);
-                  onFocus?.(event);
-                },
-                onChange: (event) => updateValue(event.target.value),
-                onBlur: (event) => {
-                  setFocused(false);
-                  onBlur?.(event);
-                },
-                ...props,
-                "aria-invalid": hasError || void 0,
-                "aria-required": isRequired || void 0,
-                "aria-labelledby": labelledBy,
-                "aria-describedby": describedBy
-              }
-            ),
-            isRequired && placeholder && !text && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "fe-number-input__placeholder", "aria-hidden": "true", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: placeholder }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-field__required", children: "*" })
+            resolvedPrefix && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-number-input__prefix", children: resolvedPrefix }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "fe-number-input__input-wrap", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "input",
+                {
+                  ref: (node) => {
+                    inputRef.current = node;
+                    if (typeof ref === "function") ref(node);
+                    else if (ref) ref.current = node;
+                  },
+                  inputMode: allowDecimal ? "decimal" : "numeric",
+                  value: text,
+                  placeholder,
+                  required: isRequired || required,
+                  onFocus: (event) => {
+                    setFocused(true);
+                    onFocus?.(event);
+                  },
+                  onChange: (event) => updateValue(event.target.value),
+                  onBlur: (event) => {
+                    setFocused(false);
+                    onBlur?.(event);
+                  },
+                  onKeyDown: (event) => {
+                    onKeyDown?.(event);
+                    if (event.defaultPrevented) return;
+                    if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                      event.preventDefault();
+                      adjustValue(event.key === "ArrowUp" ? 1 : -1);
+                    }
+                  },
+                  ...props,
+                  "aria-invalid": hasError || void 0,
+                  "aria-required": isRequired || void 0,
+                  "aria-labelledby": labelledBy,
+                  "aria-describedby": describedBy
+                }
+              ),
+              isRequired && placeholder && !text && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                "span",
+                {
+                  className: "fe-number-input__placeholder",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: placeholder }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-field__required", children: "*" })
+                  ]
+                }
+              )
             ] }),
-            endAdornment
+            resolvedSuffix && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "fe-number-input__suffix", children: resolvedSuffix }),
+            endAdornment,
+            showStepper && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "fe-number-input__stepper", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                Button,
+                {
+                  hierarchy: "tertiary-gray",
+                  size: "24",
+                  iconOnly: true,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronUpIcon, { size: 12 }),
+                  "aria-label": incrementLabel,
+                  disabled: disableIncrement,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => adjustValue(1)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                Button,
+                {
+                  hierarchy: "tertiary-gray",
+                  size: "24",
+                  iconOnly: true,
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDownIcon, { size: 12 }),
+                  "aria-label": decrementLabel,
+                  disabled: disableDecrement,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => adjustValue(-1)
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             FieldMessage,
@@ -1785,30 +1932,190 @@ function DateTimePicker(props) {
   );
 }
 
-// packages/expandable-section/src/index.tsx
+// packages/form-controls/src/controls/Checkbox/checkbox.tsx
 var import_react13 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
+var Checkbox = (0, import_react13.forwardRef)(
+  function Checkbox2({
+    label,
+    labelPosition = "right",
+    className,
+    style,
+    id,
+    disabled,
+    ...props
+  }, ref) {
+    const classes = [
+      "fe-checkbox",
+      `fe-checkbox--label-${labelPosition}`,
+      disabled && "fe-checkbox--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: classes, style, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fe-checkbox__label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "fe-checkbox__content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "input",
+          {
+            ref,
+            id,
+            className: "fe-checkbox__input",
+            type: "checkbox",
+            disabled,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fe-checkbox__control", "aria-hidden": "true" }),
+        label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fe-checkbox__label", children: label })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// packages/form-controls/src/controls/RadioButton/radio-button.tsx
+var import_react14 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var RadioButton = (0, import_react14.forwardRef)(
+  function RadioButton2({
+    label,
+    labelPosition = "right",
+    className,
+    style,
+    id,
+    disabled,
+    ...props
+  }, ref) {
+    const classes = [
+      "fe-radio-button",
+      `fe-radio-button--label-${labelPosition}`,
+      disabled && "fe-radio-button--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: classes, style, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-radio-button__label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "fe-radio-button__content", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "input",
+          {
+            ref,
+            id,
+            className: "fe-radio-button__input",
+            type: "radio",
+            disabled,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-radio-button__control", "aria-hidden": "true" }),
+        label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-radio-button__label", children: label })
+      ] })
+    ] });
+  }
+);
+RadioButton.displayName = "RadioButton";
+
+// packages/form-controls/src/controls/RadioGroup/radio-group.tsx
+var import_react15 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var RadioGroup = (0, import_react15.forwardRef)(
+  function RadioGroup2({
+    label,
+    labelPosition = "top",
+    options,
+    name,
+    value,
+    defaultValue,
+    onChange,
+    disabled = false,
+    direction = "vertical",
+    isRequired = false,
+    className,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) {
+    const generatedId = (0, import_react15.useId)();
+    const groupName = name ?? `fe-radio-group-${generatedId}`;
+    const labelId = `${id ?? generatedId}-label`;
+    const isControlled = value !== void 0;
+    const classes = [
+      "fe-radio-group",
+      `fe-radio-group--label-${labelPosition}`,
+      `fe-radio-group--${direction}`,
+      disabled && "fe-radio-group--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    const handleChange = (option, event) => {
+      if (event.target.checked) onChange?.(option.value, option, event);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { ref, className: classes, ...props, children: [
+      label && labelPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { id: labelId, className: "fe-radio-group__label", children: [
+        label,
+        isRequired && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "div",
+        {
+          id,
+          className: "fe-radio-group__options",
+          role: "radiogroup",
+          "aria-label": label ? void 0 : ariaLabel,
+          "aria-labelledby": label ? labelId : ariaLabelledBy,
+          "aria-required": isRequired || void 0,
+          children: options.map((option) => {
+            const optionDisabled = disabled || option.disabled;
+            const optionValue = String(option.value);
+            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              RadioButton,
+              {
+                name: groupName,
+                value: optionValue,
+                label: option.label,
+                disabled: optionDisabled,
+                required: isRequired,
+                checked: isControlled ? option.value === value : void 0,
+                defaultChecked: !isControlled ? option.value === defaultValue : void 0,
+                onChange: (event) => handleChange(option, event)
+              },
+              optionValue
+            );
+          })
+        }
+      ),
+      label && labelPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { id: labelId, className: "fe-radio-group__label", children: [
+        label,
+        isRequired && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fe-radio-group__required", "aria-hidden": "true", children: "*" })
+      ] })
+    ] });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+
+// packages/expandable-section/src/index.tsx
+var import_react16 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function ExpandableSection({ title, children, expanded, defaultExpanded = false, onExpandedChange, disabled, className, ...props }) {
-  const [internalExpanded, setInternalExpanded] = (0, import_react13.useState)(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = (0, import_react16.useState)(defaultExpanded);
   const isExpanded = expanded ?? internalExpanded;
-  const id = (0, import_react13.useId)();
+  const id = (0, import_react16.useId)();
   const toggle = () => {
     if (disabled) return;
     const next = !isExpanded;
     if (expanded === void 0) setInternalExpanded(next);
     onExpandedChange?.(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("section", { className: ["fe-expandable-section", isExpanded && "fe-expandable-section--expanded", disabled && "fe-expandable-section--disabled", className].filter(Boolean).join(" "), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { className: "fe-expandable-section__trigger", type: "button", "aria-expanded": isExpanded, "aria-controls": id, disabled, onClick: toggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fe-expandable-section__chevron", "aria-hidden": "true" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "fe-expandable-section__content-inner", children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { id, className: "fe-expandable-section__content", "aria-hidden": !isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fe-expandable-section__content-inner", children }) })
   ] });
 }
 
 // packages/loading/src/index.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var sizes = {
   small: "16px",
   medium: "24px",
@@ -1821,15 +2128,15 @@ function Loading({ size = "medium", color = "#2878f0", label, className, style,
     "--fe-loading-color": color,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-loading__label", children: label }),
-    !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-loading__sr-only", children: "Loading" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: ["fe-loading", className].filter(Boolean).join(" "), style: loadingStyle, role: "status", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-loading__spinner", "aria-hidden": "true" }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-loading__label", children: label }),
+    !label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-loading__sr-only", children: "Loading" })
   ] });
 }
 
 // packages/skeleton/src/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var pixels = (value) => typeof value === "number" ? `${value}px` : value;
 function SkeletonBase({ variant = "box", shape, width, height, count = 1, animated = true, className, style, ...props }) {
   const resolvedVariant = shape ?? variant;
@@ -1840,7 +2147,7 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
     "--fe-skeleton-height": resolvedHeight,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_jsx_runtime23.Fragment, { children: Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       className: ["fe-skeleton", `fe-skeleton--${resolvedVariant}`, animated && "fe-skeleton--animated", className].filter(Boolean).join(" "),
@@ -1852,16 +2159,16 @@ function SkeletonBase({ variant = "box", shape, width, height, count = 1, animat
   )) });
 }
 function SkeletonCircle({ size = 40, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SkeletonBase, { variant: "circle", width: size, height: size, ...props });
 }
 function SkeletonSquare({ size = 80, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SkeletonBase, { variant: "box", width: size, height: size, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SkeletonBase, { variant: "box", width: size, height: size, ...props });
 }
 function SkeletonBox({ width = "100%", height = 80, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SkeletonBase, { variant: "box", width, height, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SkeletonBase, { variant: "box", width, height, ...props });
 }
 function SkeletonLine({ width = "100%", height = 12, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SkeletonBase, { variant: "line", width, height, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SkeletonBase, { variant: "line", width, height, ...props });
 }
 var Skeleton = Object.assign(SkeletonBase, {
   Circle: SkeletonCircle,
@@ -1871,9 +2178,9 @@ var Skeleton = Object.assign(SkeletonBase, {
 });
 
 // packages/modal/src/index.tsx
-var import_react14 = require("react");
+var import_react17 = require("react");
 var import_react_dom3 = require("react-dom");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Modal({
   open,
   onClose,
@@ -1889,9 +2196,9 @@ function Modal({
   className,
   ...props
 }) {
-  const titleId = (0, import_react14.useId)();
-  const panelRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const titleId = (0, import_react17.useId)();
+  const panelRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -1903,9 +2210,9 @@ function Modal({
   if (!open || typeof document === "undefined") return null;
   const hasFooter = footer || actions.length > 0;
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fe-modal-backdrop", role: "presentation", onMouseDown: (event) => {
       if (event.target === event.currentTarget && closeOnBackdropClick) onClose();
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "div",
       {
         ref: panelRef,
@@ -1917,17 +2224,17 @@ function Modal({
         tabIndex: -1,
         ...props,
         children: [
-          (title || description || closeButton) && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("header", { className: "fe-modal__header", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "fe-modal__heading", children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { id: titleId, children: title }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: description })
+          (title || description || closeButton) && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("header", { className: "fe-modal__header", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "fe-modal__heading", children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { id: titleId, children: title }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: description })
             ] }),
-            closeButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
+            closeButton && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { hierarchy: "tertiary-gray", size: "32", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CloseIcon, {}), "aria-label": closeLabel, onClick: onClose })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fe-modal__body", children }),
-          hasFooter && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("footer", { className: "fe-modal__footer", children: [
-            footer && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fe-modal__footer-content", children: footer }),
-            actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { ...action, children: label }, index)) })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fe-modal__body", children }),
+          hasFooter && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("footer", { className: "fe-modal__footer", children: [
+            footer && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fe-modal__footer-content", children: footer }),
+            actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fe-modal__actions", children: actions.map(({ label, ...action }, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { ...action, children: label }, index)) })
           ] })
         ]
       }
@@ -1937,7 +2244,7 @@ function Modal({
 }
 
 // packages/progress/src/index.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function ProgressBar({ value, max = 100, label, showValue = true, size = "medium", color = "#2878f0", className, style, "aria-label": ariaLabel, ...props }) {
   const indeterminate = value === null || value === void 0;
   const percentage = indeterminate ? 0 : Math.min(100, Math.max(0, Number(value) / Math.max(1, max) * 100));
@@ -1947,17 +2254,17 @@ function ProgressBar({ value, max = 100, label, showValue = true, size = "medium
     ...style
   };
   const visibleValue = `${Math.round(percentage)}%`;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
-    (label || !indeterminate && showValue) && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "fe-progress__meta", children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-progress__label", children: label }),
-      !indeterminate && showValue && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("output", { className: "fe-progress__value", children: visibleValue })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: ["fe-progress", `fe-progress--${size}`, indeterminate && "fe-progress--indeterminate", className].filter(Boolean).join(" "), style: progressStyle, ...props, children: [
+    (label || !indeterminate && showValue) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fe-progress__meta", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fe-progress__label", children: label }),
+      !indeterminate && showValue && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("output", { className: "fe-progress__value", children: visibleValue })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "fe-progress__track", role: "progressbar", "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Progress"), "aria-valuemin": indeterminate ? void 0 : 0, "aria-valuemax": indeterminate ? void 0 : max, "aria-valuenow": indeterminate ? void 0 : Number(value), "aria-valuetext": indeterminate ? "Loading" : visibleValue, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "fe-progress__indicator" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fe-progress__track", role: "progressbar", "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Progress"), "aria-valuemin": indeterminate ? void 0 : 0, "aria-valuemax": indeterminate ? void 0 : max, "aria-valuenow": indeterminate ? void 0 : Number(value), "aria-valuetext": indeterminate ? "Loading" : visibleValue, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fe-progress__indicator" }) })
   ] });
 }
 
 // packages/chip/src/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var statuses = ["default", "info", "success", "warning", "error", "neutral", "pending", "processing"];
 function Chip({ children, status = "default", color, variant = "subtle", dot = false, onRemove, removeLabel = "Remove", className, style, ...props }) {
   const usesCustomColor = Boolean(color);
@@ -1966,16 +2273,16 @@ function Chip({ children, status = "default", color, variant = "subtle", dot = f
     ...style
   };
   const resolvedStatus = statuses.includes(status) ? status : "default";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
-    dot && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "fe-chip__content", children }),
-    onRemove && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: ["fe-chip", `fe-chip--${variant}`, `fe-chip--${usesCustomColor ? "custom" : resolvedStatus}`, className].filter(Boolean).join(" "), style: chipStyle, ...props, children: [
+    dot && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fe-chip__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fe-chip__content", children }),
+    onRemove && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CloseIcon, { size: 14 }), "aria-label": removeLabel, onClick: onRemove, className: "fe-chip__remove" })
   ] });
 }
 
 // packages/message/src/index.tsx
-var import_react15 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react18 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var messageId = 0;
 var entries = [];
 var listeners = /* @__PURE__ */ new Set();
@@ -2008,22 +2315,22 @@ var message = {
 };
 var icons = { success: "\u2713", info: "i", warning: "!", error: "\xD7" };
 function Message({ maxCount = 4, closeLabel = "Close notification", className, ...props }) {
-  const [visibleEntries, setVisibleEntries] = (0, import_react15.useState)(entries);
-  (0, import_react15.useEffect)(() => {
+  const [visibleEntries, setVisibleEntries] = (0, import_react18.useState)(entries);
+  (0, import_react18.useEffect)(() => {
     const listener = (nextEntries) => setVisibleEntries(nextEntries);
     listeners.add(listener);
     return () => {
       listeners.delete(listener);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "fe-message__body", children: [
-      entry.title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("strong", { className: "fe-message__title", children: entry.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fe-message__content", children: entry.content })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: ["fe-message-viewport", className].filter(Boolean).join(" "), "aria-live": "polite", ...props, children: visibleEntries.slice(-Math.max(1, maxCount)).map((entry) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `fe-message fe-message--${entry.severity ?? "info"}`, role: entry.severity === "error" ? "alert" : "status", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fe-message__icon", "aria-hidden": "true", children: icons[entry.severity ?? "info"] }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "fe-message__body", children: [
+      entry.title && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("strong", { className: "fe-message__title", children: entry.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fe-message__content", children: entry.content })
     ] }),
-    entry.action && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "fe-message__action", children: entry.action }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
+    entry.action && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fe-message__action", children: entry.action }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { className: "fe-message__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => dismiss(entry.id) })
   ] }, entry.id)) });
 }
 ((Message2) => {
@@ -2037,8 +2344,8 @@ function Message({ maxCount = 4, closeLabel = "Close notification", className, .
 })(Message || (Message = {}));
 
 // packages/snackbar/src/index.tsx
-var import_react16 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Snackbar({
   open,
   message: message2,
@@ -2052,12 +2359,12 @@ function Snackbar({
 }) {
   const vertical = anchorOrigin.vertical ?? "bottom";
   const horizontal = anchorOrigin.horizontal ?? "center";
-  (0, import_react16.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!open || autoHideDuration === null) return void 0;
     const timer = window.setTimeout(() => onClose?.("timeout"), autoHideDuration);
     return () => window.clearTimeout(timer);
   }, [open, autoHideDuration, onClose]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!open) return void 0;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose?.("escapeKeyDown");
@@ -2066,16 +2373,18 @@ function Snackbar({
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fe-snackbar__message", children: message2 }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fe-snackbar__action", children: action }),
-    onClose && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: ["fe-snackbar", `fe-snackbar--${vertical}`, `fe-snackbar--${horizontal}`, className].filter(Boolean).join(" "), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "fe-snackbar__content", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fe-snackbar__message", children: message2 }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fe-snackbar__action", children: action }),
+    onClose && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { className: "fe-snackbar__close", hierarchy: "tertiary-gray", size: "24", iconOnly: true, icon: "\xD7", "aria-label": closeLabel, onClick: () => onClose("closeButton") })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
+  Checkbox,
   ChevronDownIcon,
+  ChevronUpIcon,
   Chip,
   CloseIcon,
   CurrencyInput,
@@ -2089,6 +2398,8 @@ function Snackbar({
   Pagination,
   PlusIcon,
   ProgressBar,
+  RadioButton,
+  RadioGroup,
   SearchIcon,
   Selection,
   Skeleton,