@usefidel/design-system 0.15.0 → 0.17.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,33 +914,378 @@ 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 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__ */ 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 jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function Tag({ dot, 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" }),
+    children
+  ] });
+}
+
+// src/components/MultiSelect/MultiSelect.tsx
+import { useEffect as useEffect4, useId as useId6, useRef as useRef5, useState as useState6 } from "react";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+function ChevronIcon2() {
+  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__ */ 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,
+  options,
+  value,
+  onChange,
+  disabled = false,
+  selectAllLabel = "Select all",
+  clearLabel = "Clear",
+  id,
+  className
+}) {
+  const genId = useId6();
+  const triggerId = id ?? genId;
+  const listId = `${genId}-list`;
+  const rootRef = useRef5(null);
+  const triggerRef = useRef5(null);
+  const listRef = useRef5(null);
+  const [open, setOpen] = useState6(false);
+  const [activeIndex, setActiveIndex] = useState6(0);
+  const selected = new Set(value);
+  const enabled = options.filter((o) => !o.disabled);
+  useEffect4(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    const raf = requestAnimationFrame(() => listRef.current?.focus());
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      cancelAnimationFrame(raf);
+    };
+  }, [open]);
+  const close = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  const toggle = (o) => {
+    if (!o || o.disabled) return;
+    const next = selected.has(o.value) ? value.filter((v) => v !== o.value) : options.filter((x) => x.value === o.value || selected.has(x.value)).map((x) => x.value);
+    onChange(next);
+  };
+  const onTriggerKeyDown = (e) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setActiveIndex(0);
+      setOpen(true);
+    }
+  };
+  const onListKeyDown = (e) => {
+    const last = options.length - 1;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => i >= last ? 0 : i + 1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => i <= 0 ? last : i - 1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActiveIndex(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setActiveIndex(last);
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggle(options[activeIndex]);
+    } else if (e.key === "Escape" || e.key === "Tab") {
+      if (e.key === "Escape") e.preventDefault();
+      close();
+    }
+  };
+  const triggerClasses = ["fds-multiselect__trigger", open ? "fds-multiselect__trigger--open" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs15("div", { ref: rootRef, className: ["fds-multiselect", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs15(
+      "button",
+      {
+        type: "button",
+        id: triggerId,
+        ref: triggerRef,
+        className: triggerClasses,
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? listId : void 0,
+        onClick: () => setOpen((o) => !o),
+        onKeyDown: onTriggerKeyDown,
+        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__ */ jsx17("span", { className: `fds-multiselect__chevron${open ? " fds-multiselect__chevron--open" : ""}`, children: /* @__PURE__ */ jsx17(ChevronIcon2, {}) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs15("div", { className: "fds-multiselect__popover", children: [
+      /* @__PURE__ */ jsx17(
+        "div",
+        {
+          ref: listRef,
+          id: listId,
+          role: "listbox",
+          "aria-multiselectable": "true",
+          "aria-label": label,
+          tabIndex: 0,
+          className: "fds-multiselect__list",
+          "aria-activedescendant": `${listId}-opt-${activeIndex}`,
+          onKeyDown: onListKeyDown,
+          children: options.map((o, i) => {
+            const checked = selected.has(o.value);
+            return /* @__PURE__ */ jsxs15(
+              "div",
+              {
+                id: `${listId}-opt-${i}`,
+                role: "option",
+                "aria-selected": checked,
+                "aria-disabled": o.disabled || void 0,
+                className: [
+                  "fds-multiselect__option",
+                  i === activeIndex ? "fds-multiselect__option--active" : "",
+                  o.disabled ? "fds-multiselect__option--disabled" : ""
+                ].filter(Boolean).join(" "),
+                onMouseEnter: () => setActiveIndex(i),
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => toggle(o),
+                children: [
+                  /* @__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
+            );
+          })
+        }
+      ),
+      /* @__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 })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/SearchInput/SearchInput.tsx
+import { forwardRef as forwardRef3 } from "react";
+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__ */ 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__ */ 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 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));
+  const end = Math.min(pageCount - 1, Math.max(page + 1, 5));
+  const items = [1];
+  if (start > 2) items.push(null);
+  for (let p = start; p <= end; p++) items.push(p);
+  if (end < pageCount - 1) items.push(null);
+  items.push(pageCount);
+  return items;
+}
+function Arrow2({ dir }) {
+  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;
+  const go = (p) => {
+    if (p >= 1 && p <= pageCount && p !== page) onPageChange(p);
+  };
+  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__ */ 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",
+      to,
+      " of ",
+      total
+    ] }),
+    /* @__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__ */ jsx19("span", { className: "fds-pagination__gap", "aria-hidden": "true", children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx19(
+          "button",
+          {
+            type: "button",
+            className: `fds-pagination__page${p === page ? " fds-pagination__page--current" : ""}`,
+            "aria-current": p === page ? "page" : void 0,
+            "aria-label": `Page ${p}`,
+            onClick: () => go(p),
+            children: p
+          },
+          p
+        )
+      ),
+      /* @__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 jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+function EmptyState({ illustration, title, description, action, footer, className, ...rest }) {
+  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__ */ jsxs18("div", { className: "fds-empty__actions", children: [
+      action,
+      footer != null && /* @__PURE__ */ jsx20("div", { className: "fds-empty__footer", children: footer })
+    ] })
+  ] });
+}
+function StackedCardsIllustration({ className }) {
+  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__ */ 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__ */ 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 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__ */ jsx22("span", { className: "fds-skeleton-lines", style: { width: px(width) }, "aria-hidden": "true", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx22(
+      "span",
+      {
+        className: classes,
+        style: { height: px(height), width: i === lines - 1 ? "60%" : void 0, ...style },
+        ...rest
+      },
+      i
+    )) });
+  }
+  const size = shape === "circle" ? { width: px(width ?? height ?? 16), height: px(height ?? width ?? 16) } : { width: px(width), height: px(height) };
+  return /* @__PURE__ */ jsx22("span", { className: classes, style: { ...size, ...style }, "aria-hidden": "true", ...rest });
+}
+function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
+  return /* @__PURE__ */ jsx22("div", { role: "status", "aria-busy": "true", "aria-label": label, className, ...rest, children });
+}
 export {
   AppNav,
   Avatar,
+  Badge,
   Button,
+  ButtonLink,
+  Callout,
   DiffPropertyList,
   DiffSection,
+  EmptyState,
   MismatchCard,
   Modal,
+  MultiSelect,
+  Pagination,
+  SearchInput,
   SectionHeader,
   SegmentedControl,
   Select,
   SettingsSection,
+  Skeleton,
+  SkeletonGroup,
   Split,
+  StackedCardsIllustration,
   TabNav,
+  Tag,
   Toggle,
   breakpoints
 };