@usefidel/design-system 0.16.0 → 0.18.0

package/dist/index.js

@@ -23,9 +23,33 @@ function Button({
   ] });
 }
 
+// src/components/Button/ButtonLink.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ButtonLink({
+  variant = "primary",
+  size = "medium",
+  leftIcon,
+  rightIcon,
+  className,
+  children,
+  ...rest
+}) {
+  const classes = [
+    "fds-button",
+    `fds-button--${variant}`,
+    `fds-button--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs2("a", { className: classes, ...rest, children: [
+    leftIcon != null && /* @__PURE__ */ jsx2("span", { className: "fds-button__icon", "aria-hidden": "true", children: leftIcon }),
+    children != null && /* @__PURE__ */ jsx2("span", { className: "fds-button__label", children }),
+    rightIcon != null && /* @__PURE__ */ jsx2("span", { className: "fds-button__icon", "aria-hidden": "true", children: rightIcon })
+  ] });
+}
+
 // src/components/MismatchCard/MismatchCard.tsx
 import { useState } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function MismatchCard({
   title,
   properties,
@@ -39,18 +63,18 @@ function MismatchCard({
   const visible = expanded || !canToggle ? properties : properties.slice(0, collapsedCount);
   const hiddenCount = properties.length - collapsedCount;
   const classes = ["fds-mismatch-card", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs2("div", { className: classes, ...rest, children: [
-    /* @__PURE__ */ jsxs2("div", { className: "fds-mismatch-card__content", children: [
-      /* @__PURE__ */ jsx2("p", { className: "fds-mismatch-card__title", title, children: title }),
-      /* @__PURE__ */ jsx2("div", { className: "fds-mismatch-card__rows", children: visible.map((prop, i) => /* @__PURE__ */ jsxs2("div", { className: "fds-mismatch-card__row", children: [
-        /* @__PURE__ */ jsx2("span", { className: "fds-mismatch-card__label", children: prop.label }),
-        /* @__PURE__ */ jsxs2("div", { className: "fds-mismatch-card__values", children: [
-          /* @__PURE__ */ jsx2("span", { className: "fds-mismatch-card__live", children: prop.live }),
-          /* @__PURE__ */ jsx2("span", { className: "fds-mismatch-card__design", children: prop.design })
+  return /* @__PURE__ */ jsxs3("div", { className: classes, ...rest, children: [
+    /* @__PURE__ */ jsxs3("div", { className: "fds-mismatch-card__content", children: [
+      /* @__PURE__ */ jsx3("p", { className: "fds-mismatch-card__title", title, children: title }),
+      /* @__PURE__ */ jsx3("div", { className: "fds-mismatch-card__rows", children: visible.map((prop, i) => /* @__PURE__ */ jsxs3("div", { className: "fds-mismatch-card__row", children: [
+        /* @__PURE__ */ jsx3("span", { className: "fds-mismatch-card__label", children: prop.label }),
+        /* @__PURE__ */ jsxs3("div", { className: "fds-mismatch-card__values", children: [
+          /* @__PURE__ */ jsx3("span", { className: "fds-mismatch-card__live", children: prop.live }),
+          /* @__PURE__ */ jsx3("span", { className: "fds-mismatch-card__design", children: prop.design })
         ] })
       ] }, `${prop.label}-${i}`)) })
     ] }),
-    canToggle && /* @__PURE__ */ jsxs2(
+    canToggle && /* @__PURE__ */ jsxs3(
       "button",
       {
         type: "button",
@@ -58,8 +82,8 @@ function MismatchCard({
         "aria-expanded": expanded,
         onClick: () => setExpanded((v) => !v),
         children: [
-          /* @__PURE__ */ jsx2(Chevron, { direction: expanded ? "up" : "down" }),
-          /* @__PURE__ */ jsx2("span", { className: "fds-mismatch-card__toggle-label", children: expanded ? "Show less" : showMoreLabel(hiddenCount) })
+          /* @__PURE__ */ jsx3(Chevron, { direction: expanded ? "up" : "down" }),
+          /* @__PURE__ */ jsx3("span", { className: "fds-mismatch-card__toggle-label", children: expanded ? "Show less" : showMoreLabel(hiddenCount) })
         ]
       }
     )
@@ -69,7 +93,7 @@ function showMoreLabel(hiddenCount) {
   return `Show ${hiddenCount} more ${hiddenCount === 1 ? "mismatch" : "mismatches"}`;
 }
 function Chevron({ direction }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       className: `fds-mismatch-card__chevron fds-mismatch-card__chevron--${direction}`,
@@ -78,7 +102,7 @@ function Chevron({ direction }) {
       viewBox: "0 0 20 20",
       fill: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(
         "path",
         {
           d: "M6 8.5 10 12l4-3.5",
@@ -94,7 +118,7 @@ function Chevron({ direction }) {
 
 // src/components/DiffSection/DiffSection.tsx
 import { useState as useState2 } from "react";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function plural(n, one, many) {
   return `${n} ${n === 1 ? one : many}`;
 }
@@ -118,7 +142,7 @@ function DiffSection({
     headerless && "fds-diff-section--flat",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: classes,
@@ -126,7 +150,7 @@ function DiffSection({
       "data-flat": headerless ? "true" : void 0,
       ...rest,
       children: [
-        !headerless && /* @__PURE__ */ jsxs3(
+        !headerless && /* @__PURE__ */ jsxs4(
           "button",
           {
             type: "button",
@@ -134,18 +158,18 @@ function DiffSection({
             "aria-expanded": expanded,
             onClick: () => setExpanded((v) => !v),
             children: [
-              /* @__PURE__ */ jsxs3("span", { className: "fds-diff-section__head-left", children: [
-                number != null && /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__number", children: number }),
-                name != null && /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__name", children: name })
+              /* @__PURE__ */ jsxs4("span", { className: "fds-diff-section__head-left", children: [
+                number != null && /* @__PURE__ */ jsx4("span", { className: "fds-diff-section__number", children: number }),
+                name != null && /* @__PURE__ */ jsx4("span", { className: "fds-diff-section__name", children: name })
               ] }),
-              /* @__PURE__ */ jsxs3("span", { className: "fds-diff-section__head-right", children: [
-                /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__count", children: plural(count, "mismatch", "mismatches") }),
-                /* @__PURE__ */ jsx3(HeaderChevron, { expanded })
+              /* @__PURE__ */ jsxs4("span", { className: "fds-diff-section__head-right", children: [
+                /* @__PURE__ */ jsx4("span", { className: "fds-diff-section__count", children: plural(count, "mismatch", "mismatches") }),
+                /* @__PURE__ */ jsx4(HeaderChevron, { expanded })
               ] })
             ]
           }
         ),
-        open && /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__body", children: elements.map((el, ei) => /* @__PURE__ */ jsx3(
+        open && /* @__PURE__ */ jsx4("div", { className: "fds-diff-section__body", children: elements.map((el, ei) => /* @__PURE__ */ jsx4(
           ElementRow,
           {
             element: el,
@@ -174,15 +198,15 @@ function ElementRow({
     if (!isControlled) setInternalOpen(next);
     onToggle?.(index, next);
   };
-  const lines = /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsxs3("div", { className: "fds-diff-section__element-head-inner", children: [
-      /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__element-name", children: element.name }),
-      /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__element-count", children: plural(element.properties.length, "property", "properties") }),
-      hasDetail && /* @__PURE__ */ jsx3(Chevron2, { open, className: "fds-diff-section__element-caret" })
+  const lines = /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsxs4("div", { className: "fds-diff-section__element-head-inner", children: [
+      /* @__PURE__ */ jsx4("span", { className: "fds-diff-section__element-name", children: element.name }),
+      /* @__PURE__ */ jsx4("span", { className: "fds-diff-section__element-count", children: plural(element.properties.length, "property", "properties") }),
+      hasDetail && /* @__PURE__ */ jsx4(Chevron2, { open, className: "fds-diff-section__element-caret" })
     ] }),
-    /* @__PURE__ */ jsx3(DiffPropertyList, { properties: element.properties })
+    /* @__PURE__ */ jsx4(DiffPropertyList, { properties: element.properties })
   ] });
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: "fds-diff-section__element",
@@ -192,7 +216,7 @@ function ElementRow({
       onMouseEnter: onHover ? () => onHover(index, true) : void 0,
       onMouseLeave: onHover ? () => onHover(index, false) : void 0,
       children: [
-        hasDetail ? /* @__PURE__ */ jsx3(
+        hasDetail ? /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -201,27 +225,27 @@ function ElementRow({
             onClick: toggle,
             children: lines
           }
-        ) : /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__element-head", children: lines }),
-        element.sourceUrl != null && /* @__PURE__ */ jsx3(ViewSource, { href: element.sourceUrl, label: element.sourceLabel ?? "View source" }),
-        hasDetail && open && /* @__PURE__ */ jsx3("div", { className: "fds-diff-section__detail", children: element.detail })
+        ) : /* @__PURE__ */ jsx4("div", { className: "fds-diff-section__element-head", children: lines }),
+        element.sourceUrl != null && /* @__PURE__ */ jsx4(ViewSource, { href: element.sourceUrl, label: element.sourceLabel ?? "View source" }),
+        hasDetail && open && /* @__PURE__ */ jsx4("div", { className: "fds-diff-section__detail", children: element.detail })
       ]
     }
   );
 }
 function DiffPropertyList({ properties, className, ...rest }) {
   const classes = ["fds-diff-section__lines", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx3("div", { className: classes, ...rest, children: properties.map((line, li) => /* @__PURE__ */ jsxs3("div", { className: "fds-diff-section__line", children: [
-    /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__prop", children: line.property }),
-    /* @__PURE__ */ jsxs3("span", { className: "fds-diff-section__delta", children: [
-      /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__live", children: line.live }),
-      /* @__PURE__ */ jsx3(Arrow, {}),
-      /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__design", children: line.design })
+  return /* @__PURE__ */ jsx4("div", { className: classes, ...rest, children: properties.map((line, li) => /* @__PURE__ */ jsxs4("div", { className: "fds-diff-section__line", children: [
+    /* @__PURE__ */ jsx4("span", { className: "fds-diff-section__prop", children: line.property }),
+    /* @__PURE__ */ jsxs4("span", { className: "fds-diff-section__delta", children: [
+      /* @__PURE__ */ jsx4("span", { className: "fds-diff-section__live", children: line.live }),
+      /* @__PURE__ */ jsx4(Arrow, {}),
+      /* @__PURE__ */ jsx4("span", { className: "fds-diff-section__design", children: line.design })
     ] }),
-    line.trailing != null && /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__trailing", children: line.trailing })
+    line.trailing != null && /* @__PURE__ */ jsx4("span", { className: "fds-diff-section__trailing", children: line.trailing })
   ] }, `${line.property}-${li}`)) });
 }
 function ViewSource({ href, label }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "a",
     {
       className: "fds-diff-section__source",
@@ -230,8 +254,8 @@ function ViewSource({ href, label }) {
       rel: "noreferrer noopener",
       onClick: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsx3("span", { className: "fds-diff-section__source-label", children: label }),
-        /* @__PURE__ */ jsx3("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4("span", { className: "fds-diff-section__source-label", children: label }),
+        /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx4(
           "path",
           {
             d: "M7.5 12.5 12.5 7.5M8 7.5h4.5V12",
@@ -250,7 +274,7 @@ function HeaderChevron({ expanded }) {
     "fds-diff-section__header-chevron",
     expanded && "fds-diff-section__header-chevron--expanded"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx3("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", className: classes, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", className: classes, children: /* @__PURE__ */ jsx4(
     "path",
     {
       d: "M5 11 9 7l4 4",
@@ -267,7 +291,7 @@ function Chevron2({ open, className }) {
     open && "fds-diff-section__chevron--open",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx3("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", className: classes, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", className: classes, children: /* @__PURE__ */ jsx4(
     "path",
     {
       d: "M4.5 3 8 6l-3.5 3",
@@ -279,7 +303,7 @@ function Chevron2({ open, className }) {
   ) });
 }
 function Arrow() {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "svg",
     {
       className: "fds-diff-section__arrow",
@@ -288,7 +312,7 @@ function Arrow() {
       viewBox: "0 0 10 10",
       fill: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx4(
         "path",
         {
           d: "M1.5 5h6.5M5.5 2.5 8 5 5.5 7.5",
@@ -312,12 +336,12 @@ import {
   useRef,
   useState as useState3
 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ChevronIcon() {
-  return /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", "aria-hidden": "true", className: "fds-select__chevronIcon", children: /* @__PURE__ */ jsx4("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", "aria-hidden": "true", className: "fds-select__chevronIcon", children: /* @__PURE__ */ jsx5("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function CheckIcon() {
-  return /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M4.5 10.5l3 3 8-8.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx5("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M4.5 10.5l3 3 8-8.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 var Select = forwardRef(function Select2({
   options,
@@ -440,15 +464,15 @@ var Select = forwardRef(function Select2({
     open ? "fds-select__trigger--open" : "",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: rootRef,
       className: ["fds-select-field", containerClassName].filter(Boolean).join(" "),
       children: [
-        label != null && /* @__PURE__ */ jsx4("label", { htmlFor: triggerId, className: "fds-select__label", children: label }),
-        /* @__PURE__ */ jsxs4("div", { className: "fds-select", children: [
-          /* @__PURE__ */ jsxs4(
+        label != null && /* @__PURE__ */ jsx5("label", { htmlFor: triggerId, className: "fds-select__label", children: label }),
+        /* @__PURE__ */ jsxs5("div", { className: "fds-select", children: [
+          /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -464,20 +488,20 @@ var Select = forwardRef(function Select2({
               onClick: () => !disabled && setOpen((o) => !o),
               onKeyDown,
               children: [
-                (selected?.avatar ?? leadingIcon) != null && /* @__PURE__ */ jsx4("span", { className: "fds-select__lead", children: selected?.avatar ?? leadingIcon }),
-                /* @__PURE__ */ jsx4(
+                (selected?.avatar ?? leadingIcon) != null && /* @__PURE__ */ jsx5("span", { className: "fds-select__lead", children: selected?.avatar ?? leadingIcon }),
+                /* @__PURE__ */ jsx5(
                   "span",
                   {
                     className: `fds-select__value${selected ? "" : " fds-select__value--placeholder"}`,
                     children: selected ? selected.label : placeholder
                   }
                 ),
-                /* @__PURE__ */ jsx4("span", { className: "fds-select__chevron", children: /* @__PURE__ */ jsx4(ChevronIcon, {}) })
+                /* @__PURE__ */ jsx5("span", { className: "fds-select__chevron", children: /* @__PURE__ */ jsx5(ChevronIcon, {}) })
               ]
             }
           ),
-          open && /* @__PURE__ */ jsxs4("div", { className: "fds-select__popover", children: [
-            searchable && /* @__PURE__ */ jsx4("div", { className: "fds-select__search", children: /* @__PURE__ */ jsx4(
+          open && /* @__PURE__ */ jsxs5("div", { className: "fds-select__popover", children: [
+            searchable && /* @__PURE__ */ jsx5("div", { className: "fds-select__search", children: /* @__PURE__ */ jsx5(
               "input",
               {
                 ref: searchRef,
@@ -492,7 +516,7 @@ var Select = forwardRef(function Select2({
                 "aria-autocomplete": "list"
               }
             ) }),
-            /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsxs5(
               "div",
               {
                 ref: listRef,
@@ -503,8 +527,8 @@ var Select = forwardRef(function Select2({
                 "aria-activedescendant": activeIndex >= 0 ? `${listId}-opt-${activeIndex}` : void 0,
                 onKeyDown: searchable ? void 0 : onKeyDown,
                 children: [
-                  filtered.length === 0 && /* @__PURE__ */ jsx4("div", { className: "fds-select__empty", children: "No results" }),
-                  filtered.map((o, i) => /* @__PURE__ */ jsxs4(
+                  filtered.length === 0 && /* @__PURE__ */ jsx5("div", { className: "fds-select__empty", children: "No results" }),
+                  filtered.map((o, i) => /* @__PURE__ */ jsxs5(
                     "div",
                     {
                       id: `${listId}-opt-${i}`,
@@ -520,12 +544,12 @@ var Select = forwardRef(function Select2({
                       onMouseDown: (e) => e.preventDefault(),
                       onClick: () => choose(i),
                       children: [
-                        o.avatar != null && /* @__PURE__ */ jsx4("span", { className: "fds-select__optAvatar", children: o.avatar }),
-                        /* @__PURE__ */ jsxs4("span", { className: "fds-select__optText", children: [
-                          /* @__PURE__ */ jsx4("span", { className: "fds-select__optLabel", children: o.label }),
-                          o.secondary != null && /* @__PURE__ */ jsx4("span", { className: "fds-select__optSecondary", children: o.secondary })
+                        o.avatar != null && /* @__PURE__ */ jsx5("span", { className: "fds-select__optAvatar", children: o.avatar }),
+                        /* @__PURE__ */ jsxs5("span", { className: "fds-select__optText", children: [
+                          /* @__PURE__ */ jsx5("span", { className: "fds-select__optLabel", children: o.label }),
+                          o.secondary != null && /* @__PURE__ */ jsx5("span", { className: "fds-select__optSecondary", children: o.secondary })
                         ] }),
-                        o.value === value && /* @__PURE__ */ jsx4("span", { className: "fds-select__check", children: /* @__PURE__ */ jsx4(CheckIcon, {}) })
+                        o.value === value && /* @__PURE__ */ jsx5("span", { className: "fds-select__check", children: /* @__PURE__ */ jsx5(CheckIcon, {}) })
                       ]
                     },
                     o.value
@@ -535,8 +559,8 @@ var Select = forwardRef(function Select2({
             )
           ] })
         ] }),
-        hasMessage && /* @__PURE__ */ jsx4("p", { id: msgId, className: error ? "fds-select__error" : "fds-select__hint", children: error ?? hint }),
-        name != null && /* @__PURE__ */ jsx4("input", { type: "hidden", name, value: value ?? "" })
+        hasMessage && /* @__PURE__ */ jsx5("p", { id: msgId, className: error ? "fds-select__error" : "fds-select__hint", children: error ?? hint }),
+        name != null && /* @__PURE__ */ jsx5("input", { type: "hidden", name, value: value ?? "" })
       ]
     }
   );
@@ -544,13 +568,13 @@ var Select = forwardRef(function Select2({
 
 // src/components/Toggle/Toggle.tsx
 import { forwardRef as forwardRef2, useId as useId2 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var Toggle = forwardRef2(function Toggle2({ size = "medium", label, description, className, id, disabled, ...rest }, ref) {
   const generatedId = useId2();
   const inputId = id ?? generatedId;
   const classes = ["fds-toggle", `fds-toggle--${size}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs5("div", { className: classes, "data-disabled": disabled ? "" : void 0, children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs6("div", { className: classes, "data-disabled": disabled ? "" : void 0, children: [
+    /* @__PURE__ */ jsx6(
       "input",
       {
         ...rest,
@@ -562,11 +586,11 @@ var Toggle = forwardRef2(function Toggle2({ size = "medium", label, description,
         className: "fds-toggle__input"
       }
     ),
-    /* @__PURE__ */ jsxs5("label", { htmlFor: inputId, className: "fds-toggle__control", children: [
-      /* @__PURE__ */ jsx5("span", { className: "fds-toggle__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("span", { className: "fds-toggle__thumb" }) }),
-      (label != null || description != null) && /* @__PURE__ */ jsxs5("span", { className: "fds-toggle__text", children: [
-        label != null && /* @__PURE__ */ jsx5("span", { className: "fds-toggle__label", children: label }),
-        description != null && /* @__PURE__ */ jsx5("span", { className: "fds-toggle__description", children: description })
+    /* @__PURE__ */ jsxs6("label", { htmlFor: inputId, className: "fds-toggle__control", children: [
+      /* @__PURE__ */ jsx6("span", { className: "fds-toggle__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx6("span", { className: "fds-toggle__thumb" }) }),
+      (label != null || description != null) && /* @__PURE__ */ jsxs6("span", { className: "fds-toggle__text", children: [
+        label != null && /* @__PURE__ */ jsx6("span", { className: "fds-toggle__label", children: label }),
+        description != null && /* @__PURE__ */ jsx6("span", { className: "fds-toggle__description", children: description })
       ] })
     ] })
   ] });
@@ -574,7 +598,7 @@ var Toggle = forwardRef2(function Toggle2({ size = "medium", label, description,
 
 // src/components/AppNav/AppNav.tsx
 import { useEffect as useEffect2, useId as useId3, useRef as useRef2, useState as useState4 } from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function AppNav({
   logo,
   actions,
@@ -606,9 +630,9 @@ function AppNav({
     };
   }, [open]);
   const classes = ["fds-app-nav", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs6("nav", { ref: navRef, className: classes, ...rest, children: [
-    /* @__PURE__ */ jsx6("div", { className: "fds-app-nav__logo", children: logo }),
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7("nav", { ref: navRef, className: classes, ...rest, children: [
+    /* @__PURE__ */ jsx7("div", { className: "fds-app-nav__logo", children: logo }),
+    /* @__PURE__ */ jsx7(
       "div",
       {
         id: linksId,
@@ -620,8 +644,8 @@ function AppNav({
         children
       }
     ),
-    actions != null && /* @__PURE__ */ jsx6("div", { className: "fds-app-nav__actions", children: actions }),
-    /* @__PURE__ */ jsx6(
+    actions != null && /* @__PURE__ */ jsx7("div", { className: "fds-app-nav__actions", children: actions }),
+    /* @__PURE__ */ jsx7(
       "button",
       {
         ref: toggleRef,
@@ -631,22 +655,22 @@ function AppNav({
         "aria-expanded": open,
         "aria-controls": linksId,
         onClick: () => setOpen((v) => !v),
-        children: /* @__PURE__ */ jsx6("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: open ? /* @__PURE__ */ jsx6("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) : /* @__PURE__ */ jsx6("path", { d: "M3 6h14M3 10h14M3 14h14", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) })
+        children: /* @__PURE__ */ jsx7("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: open ? /* @__PURE__ */ jsx7("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) : /* @__PURE__ */ jsx7("path", { d: "M3 6h14M3 10h14M3 14h14", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) })
       }
     )
   ] });
 }
 
 // src/components/TabNav/TabNav.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function TabNav({ children, className, ...rest }) {
   const classes = ["fds-tab-nav", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx7("nav", { className: classes, ...rest, children });
+  return /* @__PURE__ */ jsx8("nav", { className: classes, ...rest, children });
 }
 
 // src/components/SettingsSection/SettingsSection.tsx
 import { useId as useId4 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function SettingsSection({
   title,
   description,
@@ -656,19 +680,19 @@ function SettingsSection({
 }) {
   const titleId = useId4();
   const classes = ["fds-settings-section", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs7("section", { className: classes, "aria-labelledby": titleId, ...rest, children: [
-    /* @__PURE__ */ jsxs7("div", { className: "fds-settings-section__head", children: [
-      /* @__PURE__ */ jsx8("h2", { id: titleId, className: "fds-settings-section__title", children: title }),
-      description != null && /* @__PURE__ */ jsx8("p", { className: "fds-settings-section__description", children: description })
+  return /* @__PURE__ */ jsxs8("section", { className: classes, "aria-labelledby": titleId, ...rest, children: [
+    /* @__PURE__ */ jsxs8("div", { className: "fds-settings-section__head", children: [
+      /* @__PURE__ */ jsx9("h2", { id: titleId, className: "fds-settings-section__title", children: title }),
+      description != null && /* @__PURE__ */ jsx9("p", { className: "fds-settings-section__description", children: description })
     ] }),
-    /* @__PURE__ */ jsx8("div", { className: "fds-settings-section__body", children })
+    /* @__PURE__ */ jsx9("div", { className: "fds-settings-section__body", children })
   ] });
 }
 
 // src/components/Modal/Modal.tsx
 import { useEffect as useEffect3, useId as useId5, useRef as useRef3 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 function Modal({
   open,
@@ -730,14 +754,14 @@ function Modal({
   if (!open || typeof document === "undefined") return null;
   const classes = ["fds-modal", `fds-modal--${size}`, tone === "danger" && "fds-modal--danger", className].filter(Boolean).join(" ");
   return createPortal(
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       "div",
       {
         className: "fds-modal__scrim",
         onMouseDown: (e) => {
           if (e.target === e.currentTarget && dismissible) onClose();
         },
-        children: /* @__PURE__ */ jsxs8(
+        children: /* @__PURE__ */ jsxs9(
           "div",
           {
             ref: dialogRef,
@@ -748,7 +772,7 @@ function Modal({
             "aria-describedby": description != null ? descriptionId : void 0,
             tabIndex: -1,
             children: [
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "button",
                 {
                   type: "button",
@@ -756,18 +780,18 @@ function Modal({
                   onClick: onClose,
                   disabled: !dismissible,
                   "aria-label": "Close",
-                  children: /* @__PURE__ */ jsx9("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx9("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                  children: /* @__PURE__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx10("path", { d: "M4 4l8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
                 }
               ),
-              tone === "danger" && /* @__PURE__ */ jsx9("div", { className: "fds-modal__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs8("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-                /* @__PURE__ */ jsx9("path", { d: "M10 3.5L17.5 16.5H2.5L10 3.5z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
-                /* @__PURE__ */ jsx9("path", { d: "M10 8.5v3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-                /* @__PURE__ */ jsx9("circle", { cx: "10", cy: "14.25", r: "0.9", fill: "currentColor" })
+              tone === "danger" && /* @__PURE__ */ jsx10("div", { className: "fds-modal__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsxs9("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+                /* @__PURE__ */ jsx10("path", { d: "M10 3.5L17.5 16.5H2.5L10 3.5z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+                /* @__PURE__ */ jsx10("path", { d: "M10 8.5v3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+                /* @__PURE__ */ jsx10("circle", { cx: "10", cy: "14.25", r: "0.9", fill: "currentColor" })
               ] }) }),
-              /* @__PURE__ */ jsx9("h2", { id: titleId, className: "fds-modal__title", children: title }),
-              description != null && /* @__PURE__ */ jsx9("p", { id: descriptionId, className: "fds-modal__description", children: description }),
-              children != null && /* @__PURE__ */ jsx9("div", { className: "fds-modal__content", children }),
-              actions != null && /* @__PURE__ */ jsx9("div", { className: "fds-modal__actions", children: actions })
+              /* @__PURE__ */ jsx10("h2", { id: titleId, className: "fds-modal__title", children: title }),
+              description != null && /* @__PURE__ */ jsx10("p", { id: descriptionId, className: "fds-modal__description", children: description }),
+              children != null && /* @__PURE__ */ jsx10("div", { className: "fds-modal__content", children }),
+              actions != null && /* @__PURE__ */ jsx10("div", { className: "fds-modal__actions", children: actions })
             ]
           }
         )
@@ -779,7 +803,7 @@ function Modal({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { useRef as useRef4 } from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function SegmentedControl({
   options,
   value,
@@ -802,9 +826,9 @@ function SegmentedControl({
     refs.current[next]?.focus();
   };
   const classes = ["fds-segmented", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx10("div", { role: "tablist", "aria-label": ariaLabel, className: classes, children: options.map((option, i) => {
+  return /* @__PURE__ */ jsx11("div", { role: "tablist", "aria-label": ariaLabel, className: classes, children: options.map((option, i) => {
     const selected = option.value === value;
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs10(
       "button",
       {
         ref: (el) => {
@@ -821,7 +845,7 @@ function SegmentedControl({
         onKeyDown: (e) => onKeyDown(e, i),
         children: [
           option.label,
-          option.count != null && /* @__PURE__ */ jsx10("span", { className: "fds-segmented__count", children: option.count })
+          option.count != null && /* @__PURE__ */ jsx11("span", { className: "fds-segmented__count", children: option.count })
         ]
       },
       option.value
@@ -841,7 +865,7 @@ var breakpoints = {
 
 // src/components/Avatar/Avatar.tsx
 import { useState as useState5 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function initialsFor(name) {
   const words = name.trim().split(/[\s._@-]+/).filter(Boolean);
   if (words.length === 0) return "?";
@@ -852,11 +876,11 @@ function Avatar({ name, src, size = "medium", className, ...rest }) {
   const [failedSrc, setFailedSrc] = useState5(null);
   const showImage = !!src && src !== failedSrc;
   const classes = ["fds-avatar", `fds-avatar--${size}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx11("span", { className: classes, role: "img", "aria-label": name, ...rest, children: showImage ? /* @__PURE__ */ jsx11("img", { className: "fds-avatar__img", src, alt: "", onError: () => setFailedSrc(src) }) : /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: initialsFor(name) }) });
+  return /* @__PURE__ */ jsx12("span", { className: classes, role: "img", "aria-label": name, ...rest, children: showImage ? /* @__PURE__ */ jsx12("img", { className: "fds-avatar__img", src, alt: "", onError: () => setFailedSrc(src) }) : /* @__PURE__ */ jsx12("span", { "aria-hidden": "true", children: initialsFor(name) }) });
 }
 
 // src/components/SectionHeader/SectionHeader.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function SectionHeader({
   title,
   description,
@@ -866,14 +890,14 @@ function SectionHeader({
   ...rest
 }) {
   const classes = ["fds-section-header", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs10("div", { className: classes, ...rest, children: [
-    /* @__PURE__ */ jsx12(Heading, { id: titleId, className: "fds-section-header__title", children: title }),
-    description != null && /* @__PURE__ */ jsx12("p", { className: "fds-section-header__description", children: description })
+  return /* @__PURE__ */ jsxs11("div", { className: classes, ...rest, children: [
+    /* @__PURE__ */ jsx13(Heading, { id: titleId, className: "fds-section-header__title", children: title }),
+    description != null && /* @__PURE__ */ jsx13("p", { className: "fds-section-header__description", children: description })
   ] });
 }
 
 // src/components/Split/Split.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function Split({
   aside,
   children,
@@ -890,47 +914,48 @@ function Split({
     sticky && "fds-split--sticky",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: classes,
       style: { "--fds-split-aside": asideWidth, ...style },
       ...rest,
       children: [
-        /* @__PURE__ */ jsx13("div", { className: "fds-split__aside", children: aside }),
-        /* @__PURE__ */ jsx13("div", { className: "fds-split__main", children })
+        /* @__PURE__ */ jsx14("div", { className: "fds-split__aside", children: aside }),
+        /* @__PURE__ */ jsx14("div", { className: "fds-split__main", children })
       ]
     }
   );
 }
 
 // src/components/Badge/Badge.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function Badge({ tone = "neutral", icon, className, children, ...rest }) {
   const classes = ["fds-badge", `fds-badge--${tone}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs12("span", { className: classes, ...rest, children: [
-    icon != null && /* @__PURE__ */ jsx14("span", { className: "fds-badge__icon", "aria-hidden": "true", children: icon }),
+  return /* @__PURE__ */ jsxs13("span", { className: classes, ...rest, children: [
+    icon != null && /* @__PURE__ */ jsx15("span", { className: "fds-badge__icon", "aria-hidden": "true", children: icon }),
     children
   ] });
 }
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
-function Tag({ dot, className, children, ...rest }) {
-  return /* @__PURE__ */ jsxs13("span", { className: ["fds-tag", className].filter(Boolean).join(" "), ...rest, children: [
-    dot && /* @__PURE__ */ jsx15("span", { className: `fds-dot fds-dot--${dot}`, "aria-hidden": "true" }),
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function Tag({ dot, icon, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs14("span", { className: ["fds-tag", className].filter(Boolean).join(" "), ...rest, children: [
+    dot && /* @__PURE__ */ jsx16("span", { className: `fds-dot fds-dot--${dot}`, "aria-hidden": "true" }),
+    icon != null && /* @__PURE__ */ jsx16("span", { className: "fds-tag__icon", "aria-hidden": "true", children: icon }),
     children
   ] });
 }
 
 // src/components/MultiSelect/MultiSelect.tsx
 import { useEffect as useEffect4, useId as useId6, useRef as useRef5, useState as useState6 } from "react";
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function ChevronIcon2() {
-  return /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", className: "fds-multiselect__chevronIcon", children: /* @__PURE__ */ jsx16("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx17("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", className: "fds-multiselect__chevronIcon", children: /* @__PURE__ */ jsx17("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function CheckIcon2() {
-  return /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx16("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx17("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx17("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function MultiSelect({
   label,
@@ -1004,8 +1029,8 @@ function MultiSelect({
     }
   };
   const triggerClasses = ["fds-multiselect__trigger", open ? "fds-multiselect__trigger--open" : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs14("div", { ref: rootRef, className: ["fds-multiselect", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15("div", { ref: rootRef, className: ["fds-multiselect", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs15(
       "button",
       {
         type: "button",
@@ -1019,18 +1044,18 @@ function MultiSelect({
         onClick: () => setOpen((o) => !o),
         onKeyDown: onTriggerKeyDown,
         children: [
-          /* @__PURE__ */ jsx16("span", { className: "fds-multiselect__label", children: label }),
-          value.length > 0 && /* @__PURE__ */ jsxs14("span", { className: "fds-multiselect__count", "aria-label": `${value.length} of ${options.length} selected`, children: [
+          /* @__PURE__ */ jsx17("span", { className: "fds-multiselect__label", children: label }),
+          value.length > 0 && /* @__PURE__ */ jsxs15("span", { className: "fds-multiselect__count", "aria-label": `${value.length} of ${options.length} selected`, children: [
             value.length,
             "/",
             options.length
           ] }),
-          /* @__PURE__ */ jsx16("span", { className: `fds-multiselect__chevron${open ? " fds-multiselect__chevron--open" : ""}`, children: /* @__PURE__ */ jsx16(ChevronIcon2, {}) })
+          /* @__PURE__ */ jsx17("span", { className: `fds-multiselect__chevron${open ? " fds-multiselect__chevron--open" : ""}`, children: /* @__PURE__ */ jsx17(ChevronIcon2, {}) })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs14("div", { className: "fds-multiselect__popover", children: [
-      /* @__PURE__ */ jsx16(
+    open && /* @__PURE__ */ jsxs15("div", { className: "fds-multiselect__popover", children: [
+      /* @__PURE__ */ jsx17(
         "div",
         {
           ref: listRef,
@@ -1044,7 +1069,7 @@ function MultiSelect({
           onKeyDown: onListKeyDown,
           children: options.map((o, i) => {
             const checked = selected.has(o.value);
-            return /* @__PURE__ */ jsxs14(
+            return /* @__PURE__ */ jsxs15(
               "div",
               {
                 id: `${listId}-opt-${i}`,
@@ -1060,10 +1085,10 @@ function MultiSelect({
                 onMouseDown: (e) => e.preventDefault(),
                 onClick: () => toggle(o),
                 children: [
-                  /* @__PURE__ */ jsx16("span", { className: `fds-multiselect__box${checked ? " fds-multiselect__box--checked" : ""}`, "aria-hidden": "true", children: checked && /* @__PURE__ */ jsx16(CheckIcon2, {}) }),
-                  o.dot && /* @__PURE__ */ jsx16("span", { className: `fds-dot fds-dot--${o.dot}`, "aria-hidden": "true" }),
-                  /* @__PURE__ */ jsx16("span", { className: "fds-multiselect__optLabel", children: o.label }),
-                  o.count != null && /* @__PURE__ */ jsx16("span", { className: "fds-multiselect__optCount", children: o.count })
+                  /* @__PURE__ */ jsx17("span", { className: `fds-multiselect__box${checked ? " fds-multiselect__box--checked" : ""}`, "aria-hidden": "true", children: checked && /* @__PURE__ */ jsx17(CheckIcon2, {}) }),
+                  o.dot && /* @__PURE__ */ jsx17("span", { className: `fds-dot fds-dot--${o.dot}`, "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx17("span", { className: "fds-multiselect__optLabel", children: o.label }),
+                  o.count != null && /* @__PURE__ */ jsx17("span", { className: "fds-multiselect__optCount", children: o.count })
                 ]
               },
               o.value
@@ -1071,9 +1096,9 @@ function MultiSelect({
           })
         }
       ),
-      /* @__PURE__ */ jsxs14("div", { className: "fds-multiselect__footer", children: [
-        /* @__PURE__ */ jsx16("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange(enabled.map((o) => o.value)), children: selectAllLabel }),
-        /* @__PURE__ */ jsx16("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange([]), children: clearLabel })
+      /* @__PURE__ */ jsxs15("div", { className: "fds-multiselect__footer", children: [
+        /* @__PURE__ */ jsx17("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange(enabled.map((o) => o.value)), children: selectAllLabel }),
+        /* @__PURE__ */ jsx17("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange([]), children: clearLabel })
       ] })
     ] })
   ] });
@@ -1081,21 +1106,21 @@ function MultiSelect({
 
 // src/components/SearchInput/SearchInput.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var SearchInput = forwardRef3(function SearchInput2({ shortcut, containerClassName, className, value, ...rest }, ref) {
   const empty = value === void 0 || value === "";
-  return /* @__PURE__ */ jsxs15("div", { className: ["fds-search", containerClassName].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsxs15("svg", { className: "fds-search__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx17("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
-      /* @__PURE__ */ jsx17("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+  return /* @__PURE__ */ jsxs16("div", { className: ["fds-search", containerClassName].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs16("svg", { className: "fds-search__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx18("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
+      /* @__PURE__ */ jsx18("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
     ] }),
-    /* @__PURE__ */ jsx17("input", { ref, type: "search", value, className: ["fds-search__input", className].filter(Boolean).join(" "), ...rest }),
-    shortcut && empty && /* @__PURE__ */ jsx17("kbd", { className: "fds-search__kbd", "aria-hidden": "true", children: shortcut })
+    /* @__PURE__ */ jsx18("input", { ref, type: "search", value, className: ["fds-search__input", className].filter(Boolean).join(" "), ...rest }),
+    shortcut && empty && /* @__PURE__ */ jsx18("kbd", { className: "fds-search__kbd", "aria-hidden": "true", children: shortcut })
   ] });
 });
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 function pageItems(page, pageCount) {
   if (pageCount <= 7) return Array.from({ length: pageCount }, (_, i) => i + 1);
   const start = Math.max(2, Math.min(page - 1, pageCount - 4));
@@ -1108,7 +1133,7 @@ function pageItems(page, pageCount) {
   return items;
 }
 function Arrow2({ dir }) {
-  return /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx18("path", { d: dir === "prev" ? "M12 15l-5-5 5-5" : "M8 5l5 5-5 5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx19("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx19("path", { d: dir === "prev" ? "M12 15l-5-5 5-5" : "M8 5l5 5-5 5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function Pagination({ page, pageCount, onPageChange, total, pageSize, variant = "full", className }) {
   if (pageCount <= 1) return null;
@@ -1118,8 +1143,8 @@ function Pagination({ page, pageCount, onPageChange, total, pageSize, variant =
   const showRange = variant === "full" && total != null && pageSize != null;
   const from = (page - 1) * (pageSize ?? 0) + 1;
   const to = Math.min(page * (pageSize ?? 0), total ?? 0);
-  return /* @__PURE__ */ jsxs16("nav", { className: ["fds-pagination", `fds-pagination--${variant}`, className].filter(Boolean).join(" "), "aria-label": "Pagination", children: [
-    showRange && /* @__PURE__ */ jsxs16("p", { className: "fds-pagination__range", children: [
+  return /* @__PURE__ */ jsxs17("nav", { className: ["fds-pagination", `fds-pagination--${variant}`, className].filter(Boolean).join(" "), "aria-label": "Pagination", children: [
+    showRange && /* @__PURE__ */ jsxs17("p", { className: "fds-pagination__range", children: [
       "Showing ",
       from,
       "\u2013",
@@ -1127,15 +1152,15 @@ function Pagination({ page, pageCount, onPageChange, total, pageSize, variant =
       " of ",
       total
     ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "fds-pagination__controls", children: [
-      /* @__PURE__ */ jsx18("button", { type: "button", className: "fds-pagination__arrow", onClick: () => go(page - 1), disabled: page <= 1, "aria-label": "Previous page", children: /* @__PURE__ */ jsx18(Arrow2, { dir: "prev" }) }),
-      variant === "compact" ? /* @__PURE__ */ jsxs16("span", { className: "fds-pagination__status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "fds-pagination__controls", children: [
+      /* @__PURE__ */ jsx19("button", { type: "button", className: "fds-pagination__arrow", onClick: () => go(page - 1), disabled: page <= 1, "aria-label": "Previous page", children: /* @__PURE__ */ jsx19(Arrow2, { dir: "prev" }) }),
+      variant === "compact" ? /* @__PURE__ */ jsxs17("span", { className: "fds-pagination__status", "aria-live": "polite", children: [
         "Page ",
         page,
         " of ",
         pageCount
       ] }) : pageItems(page, pageCount).map(
-        (p, i) => p === null ? /* @__PURE__ */ jsx18("span", { className: "fds-pagination__gap", "aria-hidden": "true", children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx18(
+        (p, i) => p === null ? /* @__PURE__ */ jsx19("span", { className: "fds-pagination__gap", "aria-hidden": "true", children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx19(
           "button",
           {
             type: "button",
@@ -1148,54 +1173,80 @@ function Pagination({ page, pageCount, onPageChange, total, pageSize, variant =
           p
         )
       ),
-      /* @__PURE__ */ jsx18("button", { type: "button", className: "fds-pagination__arrow", onClick: () => go(page + 1), disabled: page >= pageCount, "aria-label": "Next page", children: /* @__PURE__ */ jsx18(Arrow2, { dir: "next" }) })
+      /* @__PURE__ */ jsx19("button", { type: "button", className: "fds-pagination__arrow", onClick: () => go(page + 1), disabled: page >= pageCount, "aria-label": "Next page", children: /* @__PURE__ */ jsx19(Arrow2, { dir: "next" }) })
     ] })
   ] });
 }
 
 // src/components/EmptyState/EmptyState.tsx
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function EmptyState({ illustration, title, description, action, footer, className, ...rest }) {
-  return /* @__PURE__ */ jsxs17("div", { className: ["fds-empty", className].filter(Boolean).join(" "), ...rest, children: [
-    illustration != null && /* @__PURE__ */ jsx19("div", { className: "fds-empty__illustration", children: illustration }),
-    /* @__PURE__ */ jsxs17("div", { className: "fds-empty__text", children: [
-      /* @__PURE__ */ jsx19("h2", { className: "fds-empty__title", children: title }),
-      description != null && /* @__PURE__ */ jsx19("p", { className: "fds-empty__description", children: description })
+  return /* @__PURE__ */ jsxs18("div", { className: ["fds-empty", className].filter(Boolean).join(" "), ...rest, children: [
+    illustration != null && /* @__PURE__ */ jsx20("div", { className: "fds-empty__illustration", children: illustration }),
+    /* @__PURE__ */ jsxs18("div", { className: "fds-empty__text", children: [
+      /* @__PURE__ */ jsx20("h2", { className: "fds-empty__title", children: title }),
+      description != null && /* @__PURE__ */ jsx20("p", { className: "fds-empty__description", children: description })
     ] }),
-    (action != null || footer != null) && /* @__PURE__ */ jsxs17("div", { className: "fds-empty__actions", children: [
+    (action != null || footer != null) && /* @__PURE__ */ jsxs18("div", { className: "fds-empty__actions", children: [
       action,
-      footer != null && /* @__PURE__ */ jsx19("div", { className: "fds-empty__footer", children: footer })
+      footer != null && /* @__PURE__ */ jsx20("div", { className: "fds-empty__footer", children: footer })
     ] })
   ] });
 }
 function StackedCardsIllustration({ className }) {
-  return /* @__PURE__ */ jsxs17("div", { className: ["fds-stacked-cards", className].filter(Boolean).join(" "), "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx19("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--back" }),
-    /* @__PURE__ */ jsxs17("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--front", children: [
-      /* @__PURE__ */ jsxs17("div", { className: "fds-stacked-cards__lines", children: [
-        /* @__PURE__ */ jsx19("span", {}),
-        /* @__PURE__ */ jsx19("span", {}),
-        /* @__PURE__ */ jsx19("span", {})
+  return /* @__PURE__ */ jsxs18("div", { className: ["fds-stacked-cards", className].filter(Boolean).join(" "), "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx20("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--back" }),
+    /* @__PURE__ */ jsxs18("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--front", children: [
+      /* @__PURE__ */ jsxs18("div", { className: "fds-stacked-cards__lines", children: [
+        /* @__PURE__ */ jsx20("span", {}),
+        /* @__PURE__ */ jsx20("span", {}),
+        /* @__PURE__ */ jsx20("span", {})
       ] }),
-      /* @__PURE__ */ jsxs17("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", className: "fds-stacked-cards__status", children: [
-        /* @__PURE__ */ jsx19("rect", { x: "0.75", y: "0.75", width: "16.5", height: "16.5", rx: "8.25", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsx19("circle", { cx: "9", cy: "9", r: "3", className: "fds-stacked-cards__statusDot" })
+      /* @__PURE__ */ jsxs18("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", className: "fds-stacked-cards__status", children: [
+        /* @__PURE__ */ jsx20("rect", { x: "0.75", y: "0.75", width: "16.5", height: "16.5", rx: "8.25", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx20("circle", { cx: "9", cy: "9", r: "3", className: "fds-stacked-cards__statusDot" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx19("div", { className: "fds-stacked-cards__badge", children: /* @__PURE__ */ jsxs17("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", children: [
-      /* @__PURE__ */ jsx19("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
-      /* @__PURE__ */ jsx19("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+    /* @__PURE__ */ jsx20("div", { className: "fds-stacked-cards__badge", children: /* @__PURE__ */ jsxs18("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", children: [
+      /* @__PURE__ */ jsx20("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
+      /* @__PURE__ */ jsx20("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
     ] }) })
   ] });
 }
 
+// src/components/Callout/Callout.tsx
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+function Callout({
+  tone = "neutral",
+  icon,
+  title,
+  titleAside,
+  children,
+  action,
+  className,
+  ...rest
+}) {
+  const classes = ["fds-callout", `fds-callout--${tone}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs19("div", { className: classes, ...rest, children: [
+    icon != null && /* @__PURE__ */ jsx21("span", { className: "fds-callout__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxs19("div", { className: "fds-callout__body", children: [
+      /* @__PURE__ */ jsxs19("p", { className: "fds-callout__title", children: [
+        /* @__PURE__ */ jsx21("span", { children: title }),
+        titleAside != null && /* @__PURE__ */ jsx21("span", { className: "fds-callout__aside", children: titleAside })
+      ] }),
+      children != null && /* @__PURE__ */ jsx21("div", { className: "fds-callout__text", children })
+    ] }),
+    action != null && /* @__PURE__ */ jsx21("div", { className: "fds-callout__action", children: action })
+  ] });
+}
+
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var px = (v) => typeof v === "number" ? `${v}px` : v;
 function Skeleton({ shape = "rect", width, height, lines = 1, className, style, ...rest }) {
   const classes = ["fds-skeleton", `fds-skeleton--${shape}`, className].filter(Boolean).join(" ");
   if (shape === "text" && lines > 1) {
-    return /* @__PURE__ */ jsx20("span", { className: "fds-skeleton-lines", style: { width: px(width) }, "aria-hidden": "true", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx22("span", { className: "fds-skeleton-lines", style: { width: px(width) }, "aria-hidden": "true", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx22(
       "span",
       {
         className: classes,
@@ -1206,16 +1257,200 @@ function Skeleton({ shape = "rect", width, height, lines = 1, className, style,
     )) });
   }
   const size = shape === "circle" ? { width: px(width ?? height ?? 16), height: px(height ?? width ?? 16) } : { width: px(width), height: px(height) };
-  return /* @__PURE__ */ jsx20("span", { className: classes, style: { ...size, ...style }, "aria-hidden": "true", ...rest });
+  return /* @__PURE__ */ jsx22("span", { className: classes, style: { ...size, ...style }, "aria-hidden": "true", ...rest });
 }
 function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
-  return /* @__PURE__ */ jsx20("div", { role: "status", "aria-busy": "true", "aria-label": label, className, ...rest, children });
+  return /* @__PURE__ */ jsx22("div", { role: "status", "aria-busy": "true", "aria-label": label, className, ...rest, children });
+}
+
+// src/components/Card/Card.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+function Card({ tone = "default", padding = "md", className, children, ...rest }) {
+  const classes = ["fds-card", `fds-card--${tone}`, `fds-card--pad-${padding}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx23("div", { className: classes, ...rest, children });
+}
+
+// src/components/Stat/Stat.tsx
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+function Stat({ label, value, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs20("div", { className: ["fds-stat", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx24("p", { className: "fds-stat__label", children: label }),
+    /* @__PURE__ */ jsx24("p", { className: "fds-stat__value", children: value }),
+    children != null && /* @__PURE__ */ jsx24("div", { className: "fds-stat__detail", children })
+  ] });
+}
+
+// src/components/Checkbox/Checkbox.tsx
+import {
+  forwardRef as forwardRef4,
+  useEffect as useEffect5,
+  useId as useId7,
+  useImperativeHandle as useImperativeHandle2,
+  useRef as useRef6
+} from "react";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+var Checkbox = forwardRef4(function Checkbox2({ label, description, indeterminate = false, className, id, disabled, ...rest }, ref) {
+  const generatedId = useId7();
+  const inputId = id ?? generatedId;
+  const inputRef = useRef6(null);
+  useImperativeHandle2(ref, () => inputRef.current);
+  useEffect5(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs21(
+    "div",
+    {
+      className: ["fds-checkbox", className].filter(Boolean).join(" "),
+      "data-disabled": disabled ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx25(
+          "input",
+          {
+            ...rest,
+            id: inputId,
+            ref: inputRef,
+            type: "checkbox",
+            disabled,
+            className: "fds-checkbox__input"
+          }
+        ),
+        /* @__PURE__ */ jsxs21("label", { htmlFor: inputId, className: "fds-checkbox__control", children: [
+          /* @__PURE__ */ jsxs21("span", { className: "fds-checkbox__box", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx25("svg", { className: "fds-checkbox__tick", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx25("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            /* @__PURE__ */ jsx25("svg", { className: "fds-checkbox__dash", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx25("path", { d: "M3 6h6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) })
+          ] }),
+          (label != null || description != null) && /* @__PURE__ */ jsxs21("span", { className: "fds-checkbox__text", children: [
+            label != null && /* @__PURE__ */ jsx25("span", { className: "fds-checkbox__label", children: label }),
+            description != null && /* @__PURE__ */ jsx25("span", { className: "fds-checkbox__description", children: description })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/Radio/Radio.tsx
+import { forwardRef as forwardRef5, useId as useId8 } from "react";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+var Radio = forwardRef5(function Radio2({ label, description, className, id, disabled, ...rest }, ref) {
+  const generatedId = useId8();
+  const inputId = id ?? generatedId;
+  return /* @__PURE__ */ jsxs22("div", { className: ["fds-radio", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
+    /* @__PURE__ */ jsx26("input", { ...rest, id: inputId, ref, type: "radio", disabled, className: "fds-radio__input" }),
+    /* @__PURE__ */ jsxs22("label", { htmlFor: inputId, className: "fds-radio__control", children: [
+      /* @__PURE__ */ jsx26("span", { className: "fds-radio__circle", "aria-hidden": "true" }),
+      (label != null || description != null) && /* @__PURE__ */ jsxs22("span", { className: "fds-radio__text", children: [
+        label != null && /* @__PURE__ */ jsx26("span", { className: "fds-radio__label", children: label }),
+        description != null && /* @__PURE__ */ jsx26("span", { className: "fds-radio__description", children: description })
+      ] })
+    ] })
+  ] });
+});
+
+// src/components/Accordion/Accordion.tsx
+import { useId as useId9, useState as useState7 } from "react";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+function Accordion({
+  summary,
+  actions,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  className,
+  ...rest
+}) {
+  const [openState, setOpenState] = useState7(defaultOpen);
+  const open = openProp ?? openState;
+  const bodyId = useId9();
+  const toggle = () => {
+    const next = !open;
+    if (openProp === void 0) setOpenState(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      className: ["fds-accordion", className].filter(Boolean).join(" "),
+      "data-open": open ? "" : void 0,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs23("div", { className: "fds-accordion__header", children: [
+          /* @__PURE__ */ jsx27(
+            "button",
+            {
+              type: "button",
+              className: "fds-accordion__trigger",
+              "aria-expanded": open,
+              "aria-controls": bodyId,
+              onClick: toggle,
+              children: summary
+            }
+          ),
+          actions != null && /* @__PURE__ */ jsx27("div", { className: "fds-accordion__actions", children: actions }),
+          /* @__PURE__ */ jsx27("span", { className: "fds-accordion__chevron", "aria-hidden": "true", onClick: toggle, children: /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx27("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+        ] }),
+        /* @__PURE__ */ jsx27("div", { id: bodyId, className: "fds-accordion__body", hidden: !open, children })
+      ]
+    }
+  );
+}
+
+// src/components/StepList/StepList.tsx
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+var STATUS_TEXT = {
+  done: "Done",
+  active: "In progress",
+  pending: "Not started",
+  failed: "Failed"
+};
+function StepIcon({ status }) {
+  const common = { viewBox: "0 0 24 24", width: 18, height: 18, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+  if (status === "done") {
+    return /* @__PURE__ */ jsxs24("svg", { ...common, children: [
+      /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx28("path", { d: "M8 12.5l2.5 2.5 5-5.5" })
+    ] });
+  }
+  if (status === "active") {
+    return /* @__PURE__ */ jsx28("svg", { ...common, className: "fds-steps__spinner", children: /* @__PURE__ */ jsx28("path", { d: "M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" }) });
+  }
+  if (status === "failed") {
+    return /* @__PURE__ */ jsxs24("svg", { ...common, children: [
+      /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx28("path", { d: "M12 7.5v5.5M12 16.5v.01" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx28("svg", { ...common, children: /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "9" }) });
+}
+function StepList({ steps, className, ...rest }) {
+  return /* @__PURE__ */ jsx28("ol", { className: ["fds-steps", className].filter(Boolean).join(" "), ...rest, children: steps.map((step) => /* @__PURE__ */ jsxs24(
+    "li",
+    {
+      className: `fds-steps__step fds-steps__step--${step.status}`,
+      "aria-current": step.status === "active" ? "step" : void 0,
+      children: [
+        /* @__PURE__ */ jsx28("span", { className: "fds-steps__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx28(StepIcon, { status: step.status }) }),
+        /* @__PURE__ */ jsx28("span", { className: "fds-steps__label", children: step.label }),
+        /* @__PURE__ */ jsxs24("span", { className: "fds-steps__sr", children: [
+          ", ",
+          STATUS_TEXT[step.status]
+        ] })
+      ]
+    },
+    step.id
+  )) });
 }
 export {
+  Accordion,
   AppNav,
   Avatar,
   Badge,
   Button,
+  ButtonLink,
+  Callout,
+  Card,
+  Checkbox,
   DiffPropertyList,
   DiffSection,
   EmptyState,
@@ -1223,6 +1458,7 @@ export {
   Modal,
   MultiSelect,
   Pagination,
+  Radio,
   SearchInput,
   SectionHeader,
   SegmentedControl,
@@ -1232,6 +1468,8 @@ export {
   SkeletonGroup,
   Split,
   StackedCardsIllustration,
+  Stat,
+  StepList,
   TabNav,
   Tag,
   Toggle,