@usefidel/design-system 0.23.1 → 0.25.0

package/dist/index.cjs

@@ -21,9 +21,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Accordion: () => Accordion,
+  AppLayout: () => AppLayout,
   AppNav: () => AppNav,
   Avatar: () => Avatar,
+  AvatarLabelGroup: () => AvatarLabelGroup,
   Badge: () => Badge,
+  BrandButton: () => BrandButton,
   Button: () => Button,
   ButtonLink: () => ButtonLink,
   Callout: () => Callout,
@@ -31,13 +34,16 @@ __export(index_exports, {
   Checkbox: () => Checkbox,
   DiffPropertyList: () => DiffPropertyList,
   DiffSection: () => DiffSection,
+  Divider: () => Divider,
   EmptyState: () => EmptyState,
   IconButton: () => IconButton,
   Input: () => Input,
+  ListLabel: () => ListLabel,
   Menu: () => Menu,
   MismatchCard: () => MismatchCard,
   Modal: () => Modal,
   MultiSelect: () => MultiSelect,
+  PageHeader: () => PageHeader,
   Pagination: () => Pagination,
   PricingCard: () => PricingCard,
   Radio: () => Radio,
@@ -47,18 +53,28 @@ __export(index_exports, {
   SegmentedControl: () => SegmentedControl,
   Select: () => Select,
   SettingsSection: () => SettingsSection,
+  Sidebar: () => Sidebar,
+  SidebarItem: () => SidebarItem,
   Skeleton: () => Skeleton,
   SkeletonGroup: () => SkeletonGroup,
+  Spinner: () => Spinner,
   Split: () => Split,
   StackedCardsIllustration: () => StackedCardsIllustration,
   Stat: () => Stat,
+  StatusDot: () => StatusDot,
   StepList: () => StepList,
   Swatch: () => Swatch,
   TabNav: () => TabNav,
   Table: () => Table,
   Tag: () => Tag,
+  Toast: () => Toast,
+  ToastRegion: () => ToastRegion,
   Toggle: () => Toggle,
-  breakpoints: () => breakpoints
+  Tooltip: () => Tooltip,
+  WorkspaceAvatar: () => WorkspaceAvatar,
+  WorkspaceSwitcher: () => WorkspaceSwitcher,
+  breakpoints: () => breakpoints,
+  useSidebar: () => useSidebar
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1387,39 +1403,63 @@ function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "status", "aria-busy": "true", "aria-label": label, className, ...rest, children });
 }
 
-// src/components/Card/Card.tsx
+// src/components/Spinner/Spinner.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
+function Spinner({ size = 24, label, className, ...rest }) {
+  const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "svg",
+    {
+      className: ["fds-spinner", className].filter(Boolean).join(" "),
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      ...a11y,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { className: "fds-spinner__track", cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { className: "fds-spinner__arc", d: "M12 2a10 10 0 0 1 10 10" })
+      ]
+    }
+  );
+}
+
+// src/components/Card/Card.tsx
+var import_jsx_runtime24 = require("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__ */ (0, import_jsx_runtime23.jsx)("div", { className: classes, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: classes, ...rest, children });
 }
 
 // src/components/Stat/Stat.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function Stat({ label, value, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: ["fds-stat", className].filter(Boolean).join(" "), ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "fds-stat__label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "fds-stat__value", children: value }),
-    children != null && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "fds-stat__detail", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: ["fds-stat", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "fds-stat__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "fds-stat__value", children: value }),
+    children != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fds-stat__detail", children })
   ] });
 }
 
 // src/components/Swatch/Swatch.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Swatch({ color, name, value, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: ["fds-swatch", className].filter(Boolean).join(" "), ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fds-swatch__color", style: { "--fds-swatch-color": color }, "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "fds-swatch__body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "fds-swatch__name", children: name }),
-      value != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "fds-swatch__value", children: value }),
-      children != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fds-swatch__detail", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: ["fds-swatch", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fds-swatch__color", style: { "--fds-swatch-color": color }, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "fds-swatch__body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "fds-swatch__name", children: name }),
+      value != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "fds-swatch__value", children: value }),
+      children != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fds-swatch__detail", children })
     ] })
   ] });
 }
 
 // src/components/Checkbox/Checkbox.tsx
 var import_react12 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, description, indeterminate = false, className, id, disabled, ...rest }, ref) {
   const generatedId = (0, import_react12.useId)();
   const inputId = id ?? generatedId;
@@ -1428,13 +1468,13 @@ var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, descri
   (0, import_react12.useEffect)(() => {
     if (inputRef.current) inputRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "div",
     {
       className: ["fds-checkbox", className].filter(Boolean).join(" "),
       "data-disabled": disabled ? "" : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "input",
           {
             ...rest,
@@ -1445,14 +1485,14 @@ var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, descri
             className: "fds-checkbox__input"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { htmlFor: inputId, className: "fds-checkbox__control", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "fds-checkbox__box", "aria-hidden": "true", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { className: "fds-checkbox__tick", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { className: "fds-checkbox__dash", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M3 6h6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { htmlFor: inputId, className: "fds-checkbox__control", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "fds-checkbox__box", "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { className: "fds-checkbox__tick", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { className: "fds-checkbox__dash", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M3 6h6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) })
           ] }),
-          (label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "fds-checkbox__text", children: [
-            label != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-checkbox__label", children: label }),
-            description != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-checkbox__description", children: description })
+          (label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "fds-checkbox__text", children: [
+            label != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-checkbox__label", children: label }),
+            description != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-checkbox__description", children: description })
           ] })
         ] })
       ]
@@ -1462,17 +1502,17 @@ var Checkbox = (0, import_react12.forwardRef)(function Checkbox2({ label, descri
 
 // src/components/Radio/Radio.tsx
 var import_react13 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Radio = (0, import_react13.forwardRef)(function Radio2({ label, description, className, id, disabled, ...rest }, ref) {
   const generatedId = (0, import_react13.useId)();
   const inputId = id ?? generatedId;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: ["fds-radio", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("input", { ...rest, id: inputId, ref, type: "radio", disabled, className: "fds-radio__input" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { htmlFor: inputId, className: "fds-radio__control", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-radio__circle", "aria-hidden": "true" }),
-      (label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "fds-radio__text", children: [
-        label != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-radio__label", children: label }),
-        description != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-radio__description", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: ["fds-radio", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("input", { ...rest, id: inputId, ref, type: "radio", disabled, className: "fds-radio__input" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { htmlFor: inputId, className: "fds-radio__control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio__circle", "aria-hidden": "true" }),
+      (label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "fds-radio__text", children: [
+        label != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio__label", children: label }),
+        description != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio__description", children: description })
       ] })
     ] })
   ] });
@@ -1480,13 +1520,13 @@ var Radio = (0, import_react13.forwardRef)(function Radio2({ label, description,
 
 // src/components/RadioCard/RadioCard.tsx
 var import_react14 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var RadioCard = (0, import_react14.forwardRef)(function RadioCard2({ label, description, icon, meta, className, id, disabled, ...rest }, ref) {
   const generatedId = (0, import_react14.useId)();
   const inputId = id ?? generatedId;
   const descriptionId = description != null ? `${inputId}-description` : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: ["fds-radio-card", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: ["fds-radio-card", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "input",
       {
         ...rest,
@@ -1498,21 +1538,21 @@ var RadioCard = (0, import_react14.forwardRef)(function RadioCard2({ label, desc
         className: "fds-radio-card__input"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { htmlFor: inputId, className: "fds-radio-card__body", children: [
-      icon != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio-card__icon", "aria-hidden": "true", children: icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "fds-radio-card__text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio-card__label", children: label }),
-        description != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { id: descriptionId, className: "fds-radio-card__description", children: description }),
-        meta != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio-card__meta", children: meta })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("label", { htmlFor: inputId, className: "fds-radio-card__body", children: [
+      icon != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fds-radio-card__icon", "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "fds-radio-card__text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fds-radio-card__label", children: label }),
+        description != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { id: descriptionId, className: "fds-radio-card__description", children: description }),
+        meta != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fds-radio-card__meta", children: meta })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-radio-card__circle", "aria-hidden": "true" })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fds-radio-card__circle", "aria-hidden": "true" })
     ] })
   ] });
 });
 
 // src/components/Accordion/Accordion.tsx
 var import_react15 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Accordion({
   summary,
   actions,
@@ -1531,15 +1571,15 @@ function Accordion({
     if (openProp === void 0) setOpenState(next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       className: ["fds-accordion", className].filter(Boolean).join(" "),
       "data-open": open ? "" : void 0,
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "fds-accordion__header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "fds-accordion__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "button",
             {
               type: "button",
@@ -1550,17 +1590,17 @@ function Accordion({
               children: summary
             }
           ),
-          actions != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "fds-accordion__actions", children: actions }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fds-accordion__chevron", "aria-hidden": "true", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+          actions != null && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fds-accordion__actions", children: actions }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fds-accordion__chevron", "aria-hidden": "true", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { id: bodyId, className: "fds-accordion__body", hidden: !open, children })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { id: bodyId, className: "fds-accordion__body", hidden: !open, children })
       ]
     }
   );
 }
 
 // src/components/StepList/StepList.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var STATUS_TEXT = {
   done: "Done",
   active: "In progress",
@@ -1570,32 +1610,32 @@ var STATUS_TEXT = {
 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__ */ (0, import_jsx_runtime30.jsxs)("svg", { ...common, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M8 12.5l2.5 2.5 5-5.5" })
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("svg", { ...common, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M8 12.5l2.5 2.5 5-5.5" })
     ] });
   }
   if (status === "active") {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { ...common, className: "fds-steps__spinner", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("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" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { ...common, className: "fds-steps__spinner", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime30.jsxs)("svg", { ...common, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("path", { d: "M12 7.5v5.5M12 16.5v.01" })
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("svg", { ...common, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M12 7.5v5.5M12 16.5v.01" })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { ...common, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("circle", { cx: "12", cy: "12", r: "9" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { ...common, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("circle", { cx: "12", cy: "12", r: "9" }) });
 }
 function StepList({ steps, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("ol", { className: ["fds-steps", className].filter(Boolean).join(" "), ...rest, children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("ol", { className: ["fds-steps", className].filter(Boolean).join(" "), ...rest, children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "li",
     {
       className: `fds-steps__step fds-steps__step--${step.status}`,
       "aria-current": step.status === "active" ? "step" : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fds-steps__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StepIcon, { status: step.status }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fds-steps__label", children: step.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "fds-steps__sr", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fds-steps__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StepIcon, { status: step.status }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fds-steps__label", children: step.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "fds-steps__sr", children: [
           ", ",
           STATUS_TEXT[step.status]
         ] })
@@ -1607,7 +1647,7 @@ function StepList({ steps, className, ...rest }) {
 
 // src/components/Input/Input.tsx
 var import_react16 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var Input = (0, import_react16.forwardRef)(function Input2({ label, hint, error, leadingIcon, trailing, id, className, containerClassName, readOnly, disabled, ...rest }, ref) {
   const genId = (0, import_react16.useId)();
   const inputId = id ?? genId;
@@ -1618,11 +1658,11 @@ var Input = (0, import_react16.forwardRef)(function Input2({ label, hint, error,
     error ? "fds-input__box--error" : "",
     readOnly || disabled ? "fds-input__box--locked" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: ["fds-input", containerClassName].filter(Boolean).join(" "), children: [
-    label != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("label", { htmlFor: inputId, className: "fds-input__label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: boxClasses, children: [
-      leadingIcon != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fds-input__icon", "aria-hidden": "true", children: leadingIcon }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: ["fds-input", containerClassName].filter(Boolean).join(" "), children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("label", { htmlFor: inputId, className: "fds-input__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: boxClasses, children: [
+      leadingIcon != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fds-input__icon", "aria-hidden": "true", children: leadingIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "input",
         {
           ref,
@@ -1635,14 +1675,14 @@ var Input = (0, import_react16.forwardRef)(function Input2({ label, hint, error,
           ...rest
         }
       ),
-      trailing != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "fds-input__trailing", children: trailing })
+      trailing != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fds-input__trailing", children: trailing })
     ] }),
-    message != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { id: msgId, className: error ? "fds-input__error" : "fds-input__hint", children: message })
+    message != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { id: msgId, className: error ? "fds-input__error" : "fds-input__hint", children: message })
   ] });
 });
 
 // src/components/IconButton/IconButton.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function IconButton({
   icon,
   variant = "outlined",
@@ -1652,26 +1692,71 @@ function IconButton({
   ...rest
 }) {
   const classes = ["fds-icon-button", `fds-icon-button--${variant}`, `fds-icon-button--${size}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type, className: classes, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "fds-icon-button__icon", "aria-hidden": "true", children: icon }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("button", { type, className: classes, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fds-icon-button__icon", "aria-hidden": "true", children: icon }) });
 }
 
 // src/components/Menu/Menu.tsx
 var import_react17 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-function Menu({ trigger, items, align = "end", className }) {
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var isItem = (e) => !("type" in e);
+function searchText(it) {
+  if (it.keywords) return it.keywords;
+  return typeof it.label === "string" ? it.label : "";
+}
+function visibleEntries(items, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return items.map((_, i) => i);
+  const matches = (i) => {
+    const e = items[i];
+    return isItem(e) && searchText(e).toLowerCase().includes(q);
+  };
+  const out = [];
+  items.forEach((e, i) => {
+    if (isItem(e)) {
+      if (matches(i)) out.push(i);
+    } else if (e.type === "label") {
+      for (let j = i + 1; j < items.length && isItem(items[j]); j++) {
+        if (matches(j)) {
+          out.push(i);
+          break;
+        }
+      }
+    }
+  });
+  return out;
+}
+function Menu({
+  trigger,
+  items,
+  align = "end",
+  placement = "bottom",
+  search,
+  width = "auto",
+  block = false,
+  className
+}) {
   const listId = (0, import_react17.useId)();
   const rootRef = (0, import_react17.useRef)(null);
   const listRef = (0, import_react17.useRef)(null);
+  const searchRef = (0, import_react17.useRef)(null);
   const [open, setOpen] = (0, import_react17.useState)(false);
-  const [active, setActive] = (0, import_react17.useState)(0);
-  const enabled = items.map((it, i) => it.disabled ? -1 : i).filter((i) => i >= 0);
+  const [query, setQuery] = (0, import_react17.useState)("");
+  const [active, setActive] = (0, import_react17.useState)(-1);
+  const shown = visibleEntries(items, query);
+  const enabled = shown.filter((i) => {
+    const e = items[i];
+    return isItem(e) && !e.disabled;
+  });
   (0, import_react17.useEffect)(() => {
     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());
+    const raf = requestAnimationFrame(
+      () => (searchRef.current && !searchRef.current.disabled ? searchRef.current : listRef.current)?.focus()
+    );
     return () => {
       document.removeEventListener("mousedown", onDown);
       cancelAnimationFrame(raf);
@@ -1682,20 +1767,26 @@ function Menu({ trigger, items, align = "end", className }) {
     setOpen(false);
     triggerEl()?.focus();
   };
-  const openAt = (index) => {
-    setActive(index);
+  const openAt = (which) => {
+    setQuery("");
+    const all = visibleEntries(items, "").filter((i) => {
+      const e = items[i];
+      return isItem(e) && !e.disabled;
+    });
+    setActive((which === "first" ? all[0] : all[all.length - 1]) ?? -1);
     setOpen(true);
   };
   const choose = (i) => {
-    const it = items[i];
-    if (!it || it.disabled) return;
+    const e = items[i];
+    if (!e || !isItem(e) || e.disabled) return;
     close();
-    it.onSelect();
+    e.onSelect();
   };
   const step = (dir) => {
     if (enabled.length === 0) return;
     const at = enabled.indexOf(active);
-    setActive(enabled[(at + dir + enabled.length) % enabled.length]);
+    const next = at === -1 ? dir === 1 ? 0 : enabled.length - 1 : (at + dir + enabled.length) % enabled.length;
+    setActive(enabled[next]);
   };
   const onListKeyDown = (e) => {
     if (e.key === "ArrowDown") {
@@ -1704,13 +1795,13 @@ function Menu({ trigger, items, align = "end", className }) {
     } else if (e.key === "ArrowUp") {
       e.preventDefault();
       step(-1);
-    } else if (e.key === "Home") {
+    } else if (e.key === "Home" && !search) {
       e.preventDefault();
-      setActive(enabled[0] ?? 0);
-    } else if (e.key === "End") {
+      setActive(enabled[0] ?? -1);
+    } else if (e.key === "End" && !search) {
       e.preventDefault();
-      setActive(enabled[enabled.length - 1] ?? 0);
-    } else if (e.key === "Enter" || e.key === " ") {
+      setActive(enabled[enabled.length - 1] ?? -1);
+    } else if (e.key === "Enter" || e.key === " " && !search) {
       e.preventDefault();
       choose(active);
     } else if (e.key === "Escape") {
@@ -1718,6 +1809,14 @@ function Menu({ trigger, items, align = "end", className }) {
       close();
     } else if (e.key === "Tab") setOpen(false);
   };
+  const onQuery = (value) => {
+    setQuery(value);
+    const first = visibleEntries(items, value).find((i) => {
+      const e = items[i];
+      return isItem(e) && !e.disabled;
+    });
+    setActive(first ?? -1);
+  };
   const own = trigger.props;
   const wired = (0, import_react17.cloneElement)(trigger, {
     "aria-haspopup": "menu",
@@ -1726,63 +1825,110 @@ function Menu({ trigger, items, align = "end", className }) {
     onClick: (e) => {
       own.onClick?.(e);
       if (open) setOpen(false);
-      else openAt(enabled[0] ?? 0);
+      else openAt("first");
     },
     onKeyDown: (e) => {
       own.onKeyDown?.(e);
       if (!open && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ")) {
         e.preventDefault();
-        openAt(enabled[0] ?? 0);
+        openAt("first");
       } else if (!open && e.key === "ArrowUp") {
         e.preventDefault();
-        openAt(enabled[enabled.length - 1] ?? 0);
+        openAt("last");
       }
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { ref: rootRef, className: ["fds-menu", className].filter(Boolean).join(" "), children: [
-    wired,
-    open && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      "div",
-      {
-        ref: listRef,
-        id: listId,
-        role: "menu",
-        tabIndex: -1,
-        className: `fds-menu__list fds-menu__list--${align}`,
-        "aria-activedescendant": `${listId}-item-${active}`,
-        onKeyDown: onListKeyDown,
-        children: items.map((it, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-          "div",
-          {
-            id: `${listId}-item-${i}`,
-            role: "menuitem",
-            "aria-disabled": it.disabled || void 0,
-            className: [
-              "fds-menu__item",
-              it.tone === "danger" ? "fds-menu__item--danger" : "",
-              i === active ? "fds-menu__item--active" : "",
-              it.disabled ? "fds-menu__item--disabled" : ""
-            ].filter(Boolean).join(" "),
-            onMouseEnter: () => !it.disabled && setActive(i),
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: () => choose(i),
-            children: [
-              it.icon != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fds-menu__icon", "aria-hidden": "true", children: it.icon }),
-              it.label
-            ]
-          },
-          i
-        ))
-      }
-    )
-  ] });
+  const listClasses = [
+    "fds-menu__list",
+    `fds-menu__list--${placement}`,
+    placement === "right" ? "" : `fds-menu__list--${align}`,
+    width === "wide" ? "fds-menu__list--wide" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    "div",
+    {
+      ref: rootRef,
+      className: ["fds-menu", block ? "fds-menu--block" : "", className].filter(Boolean).join(" "),
+      children: [
+        wired,
+        open && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: listClasses, onKeyDown: onListKeyDown, children: [
+          search && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "fds-menu__search", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react.Search, { "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "input",
+              {
+                ref: searchRef,
+                type: "text",
+                value: query,
+                placeholder: search.placeholder,
+                disabled: search.disabled,
+                "aria-label": search.placeholder,
+                "aria-controls": listId,
+                "aria-activedescendant": active >= 0 ? `${listId}-item-${active}` : void 0,
+                onChange: (e) => onQuery(e.target.value)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            "div",
+            {
+              ref: listRef,
+              id: listId,
+              role: "menu",
+              tabIndex: -1,
+              className: "fds-menu__items",
+              "aria-activedescendant": (!search || search.disabled) && active >= 0 ? `${listId}-item-${active}` : void 0,
+              children: [
+                shown.length === 0 && search && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "fds-menu__empty", children: search.emptyLabel }),
+                shown.map((i) => {
+                  const e = items[i];
+                  if (!isItem(e)) {
+                    return e.type === "label" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "fds-menu__label", role: "presentation", children: e.label }, i) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "fds-menu__divider", role: "separator" }, i);
+                  }
+                  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+                    "div",
+                    {
+                      id: `${listId}-item-${i}`,
+                      role: "menuitem",
+                      "aria-disabled": e.disabled || void 0,
+                      "aria-current": e.selected || void 0,
+                      className: [
+                        "fds-menu__item",
+                        e.tone === "danger" ? "fds-menu__item--danger" : "",
+                        i === active ? "fds-menu__item--active" : "",
+                        e.disabled ? "fds-menu__item--disabled" : ""
+                      ].filter(Boolean).join(" "),
+                      onMouseEnter: () => !e.disabled && setActive(i),
+                      onMouseDown: (ev) => ev.preventDefault(),
+                      onClick: () => choose(i),
+                      children: [
+                        e.avatar != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fds-menu__avatar", "aria-hidden": "true", children: e.avatar }),
+                        e.icon != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fds-menu__icon", "aria-hidden": "true", children: e.icon }),
+                        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "fds-menu__text", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fds-menu__title", children: e.label }),
+                          e.description != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fds-menu__description", children: e.description })
+                        ] }),
+                        e.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fds-menu__trailing", children: e.trailing }),
+                        e.selected && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react.Check, { className: "fds-menu__check", "aria-hidden": "true" })
+                      ]
+                    },
+                    i
+                  );
+                })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function Table({ columns, rows, rowKey, empty, className, "aria-label": ariaLabel, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: ["fds-table", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("table", { className: "fds-table__table", "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: ["fds-table", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("table", { className: "fds-table__table", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("tr", { children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "th",
       {
         scope: "col",
@@ -1792,17 +1938,17 @@ function Table({ columns, rows, rowKey, empty, className, "aria-label": ariaLabe
       },
       c.key
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("tbody", { children: [
-      rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { className: c.align === "end" ? "fds-table__cell--end" : void 0, children: c.cell(row) }, c.key)) }, rowKey(row))),
-      rows.length === 0 && empty != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { colSpan: columns.length, className: "fds-table__empty", children: empty }) })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("tbody", { children: [
+      rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("tr", { children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: c.align === "end" ? "fds-table__cell--end" : void 0, children: c.cell(row) }, c.key)) }, rowKey(row))),
+      rows.length === 0 && empty != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { colSpan: columns.length, className: "fds-table__empty", children: empty }) })
     ] })
   ] }) });
 }
 
 // src/components/PricingCard/PricingCard.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function CheckIcon3() {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function PricingCard({
   eyebrow,
@@ -1820,36 +1966,415 @@ function PricingCard({
   ...rest
 }) {
   const classes = ["fds-pricing-card", highlighted ? "fds-pricing-card--highlighted" : "", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("article", { className: classes, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "fds-pricing-card__top", children: [
-      eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fds-pricing-card__eyebrow", children: eyebrow }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("h3", { className: "fds-pricing-card__title", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("article", { className: classes, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "fds-pricing-card__top", children: [
+      eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fds-pricing-card__eyebrow", children: eyebrow }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("h3", { className: "fds-pricing-card__title", children: [
         title,
         badge
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("p", { className: "fds-pricing-card__price", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fds-pricing-card__amount", children: price }),
-        period != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fds-pricing-card__period", children: period })
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "fds-pricing-card__price", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fds-pricing-card__amount", children: price }),
+        period != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fds-pricing-card__period", children: period })
       ] }),
-      description != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "fds-pricing-card__description", children: description }),
-      action != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "fds-pricing-card__action", children: action })
+      description != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "fds-pricing-card__description", children: description }),
+      action != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "fds-pricing-card__action", children: action })
     ] }),
-    features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "fds-pricing-card__features", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "fds-pricing-card__featuresTitle", children: featuresTitle }),
-      featuresIntro != null && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "fds-pricing-card__intro", children: featuresIntro }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { className: "fds-pricing-card__list", children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "fds-pricing-card__feature", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "fds-pricing-card__check", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CheckIcon3, {}) }),
+    features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "fds-pricing-card__features", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "fds-pricing-card__featuresTitle", children: featuresTitle }),
+      featuresIntro != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "fds-pricing-card__intro", children: featuresIntro }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "fds-pricing-card__list", children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("li", { className: "fds-pricing-card__feature", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "fds-pricing-card__check", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckIcon3, {}) }),
         f
       ] }, i)) })
     ] })
   ] });
 }
+
+// src/components/StatusDot/StatusDot.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function StatusDot({ status, label, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "span",
+    {
+      className: ["fds-status-dot", `fds-status-dot--${status}`, className].filter(Boolean).join(" "),
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      ...rest
+    }
+  );
+}
+
+// src/components/ListLabel/ListLabel.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function ListLabel({ className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: ["fds-list-label", className].filter(Boolean).join(" "), ...rest, children });
+}
+
+// src/components/Divider/Divider.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function Divider({ orientation = "horizontal", className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "hr",
+    {
+      className: ["fds-divider", `fds-divider--${orientation}`, className].filter(Boolean).join(" "),
+      "aria-orientation": orientation,
+      ...rest
+    }
+  );
+}
+
+// src/components/Tooltip/Tooltip.tsx
+var import_react18 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var GAP = 8;
+function place(rect, side) {
+  switch (side) {
+    case "right":
+      return { top: rect.top + rect.height / 2, left: rect.right + GAP };
+    case "left":
+      return { top: rect.top + rect.height / 2, left: rect.left - GAP };
+    case "top":
+      return { top: rect.top - GAP, left: rect.left + rect.width / 2 };
+    case "bottom":
+      return { top: rect.bottom + GAP, left: rect.left + rect.width / 2 };
+  }
+}
+function Tooltip({ content, children, side = "right", delay = 400, disabled = false }) {
+  const id = (0, import_react18.useId)();
+  const timer = (0, import_react18.useRef)();
+  const [pos, setPos] = (0, import_react18.useState)(null);
+  (0, import_react18.useEffect)(() => () => window.clearTimeout(timer.current), []);
+  (0, import_react18.useEffect)(() => {
+    if (disabled) setPos(null);
+  }, [disabled]);
+  const show = (el, wait) => {
+    window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => setPos(place(el.getBoundingClientRect(), side)), wait);
+  };
+  const hide = () => {
+    window.clearTimeout(timer.current);
+    setPos(null);
+  };
+  if (disabled) return children;
+  const own = children.props;
+  const trigger = (0, import_react18.cloneElement)(children, {
+    "aria-describedby": pos ? id : own["aria-describedby"],
+    onMouseEnter: (e) => {
+      own.onMouseEnter?.(e);
+      show(e.currentTarget, delay);
+    },
+    onMouseLeave: (e) => {
+      own.onMouseLeave?.(e);
+      hide();
+    },
+    onFocus: (e) => {
+      own.onFocus?.(e);
+      if (e.currentTarget.matches(":focus-visible")) show(e.currentTarget, 0);
+    },
+    onBlur: (e) => {
+      own.onBlur?.(e);
+      hide();
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    trigger,
+    pos && (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        "div",
+        {
+          id,
+          role: "tooltip",
+          className: `fds-tooltip fds-tooltip--${side}`,
+          style: { top: pos.top, left: pos.left },
+          children: content
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+// src/components/BrandButton/BrandButton.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function BrandButton({ mark, hoverIcon, type = "button", className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("button", { type, className: ["fds-brand-button", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "fds-brand-button__mark", "aria-hidden": "true", children: mark }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "fds-brand-button__hover", "aria-hidden": "true", children: hoverIcon ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react2.PanelLeftOpen, {}) })
+  ] });
+}
+
+// src/components/Sidebar/SidebarContext.ts
+var import_react19 = require("react");
+var SidebarContext = (0, import_react19.createContext)(null);
+function useSidebar() {
+  return (0, import_react19.useContext)(SidebarContext);
+}
+
+// src/components/SidebarItem/SidebarItem.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function SidebarItem({
+  as,
+  icon,
+  leading,
+  active = false,
+  iconOnly,
+  className,
+  children,
+  ...rest
+}) {
+  const sidebar = useSidebar();
+  const compact = iconOnly ?? sidebar?.collapsed ?? false;
+  const Component = as ?? "a";
+  const classes = [
+    "fds-sidebar-item",
+    active ? "fds-sidebar-item--active" : "",
+    compact ? "fds-sidebar-item--icon-only" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Tooltip, { content: children, disabled: !compact, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(Component, { className: classes, "aria-current": active ? "page" : void 0, ...rest, children: [
+    (leading ?? icon) != null && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: leading != null ? "fds-sidebar-item__leading" : "fds-sidebar-item__icon", "aria-hidden": "true", children: leading ?? icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "fds-sidebar-item__label", children })
+  ] }) });
+}
+
+// src/components/Sidebar/Sidebar.tsx
+var import_react20 = require("react");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+function SidebarRoot({
+  collapsed: controlled,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  shortcut = true,
+  className,
+  children,
+  "aria-label": ariaLabel = "Main",
+  ...rest
+}) {
+  const [own, setOwn] = (0, import_react20.useState)(defaultCollapsed);
+  const collapsed = controlled ?? own;
+  const setCollapsed = (0, import_react20.useCallback)(
+    (next) => {
+      if (controlled === void 0) setOwn(next);
+      onCollapsedChange?.(next);
+    },
+    [controlled, onCollapsedChange]
+  );
+  const toggle = (0, import_react20.useCallback)(() => setCollapsed(!collapsed), [collapsed, setCollapsed]);
+  (0, import_react20.useEffect)(() => {
+    if (!shortcut) return;
+    const onKey = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "\\") {
+        e.preventDefault();
+        toggle();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [shortcut, toggle]);
+  const state = (0, import_react20.useMemo)(() => ({ collapsed, setCollapsed, toggle }), [collapsed, setCollapsed, toggle]);
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SidebarContext.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "nav",
+    {
+      className: ["fds-sidebar", collapsed ? "fds-sidebar--collapsed" : "", className].filter(Boolean).join(" "),
+      "aria-label": ariaLabel,
+      "data-collapsed": collapsed || void 0,
+      ...rest,
+      children
+    }
+  ) });
+}
+function useInert(on) {
+  const ref = (0, import_react20.useRef)(null);
+  (0, import_react20.useEffect)(() => {
+    if (ref.current) ref.current.inert = on;
+  }, [on]);
+  return ref;
+}
+function SidebarBrand({
+  logo,
+  mark,
+  collapseLabel = "Collapse sidebar",
+  expandLabel = "Expand sidebar"
+}) {
+  const sidebar = useSidebar();
+  const collapsed = sidebar?.collapsed ?? false;
+  const collapseRef = useInert(collapsed);
+  const expandRef = useInert(!collapsed);
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "fds-sidebar__brand", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fds-sidebar__logo", "aria-hidden": collapsed || void 0, children: logo }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { ref: collapseRef, className: "fds-sidebar__collapse", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Tooltip, { content: collapseLabel, side: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      IconButton,
+      {
+        variant: "ghost",
+        size: "small",
+        icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react3.PanelLeftClose, {}),
+        "aria-label": collapseLabel,
+        "aria-keyshortcuts": "Meta+Backslash Control+Backslash",
+        onClick: () => sidebar?.setCollapsed(true)
+      }
+    ) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { ref: expandRef, className: "fds-sidebar__expand", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Tooltip, { content: expandLabel, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(BrandButton, { mark, "aria-label": expandLabel, onClick: () => sidebar?.setCollapsed(false) }) }) })
+  ] });
+}
+function SidebarAction({ icon, label, type = "button", className, ...rest }) {
+  const sidebar = useSidebar();
+  const collapsed = sidebar?.collapsed ?? false;
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Tooltip, { content: label, disabled: !collapsed, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "button",
+    {
+      type,
+      className: ["fds-sidebar__action", className].filter(Boolean).join(" "),
+      "aria-label": collapsed ? label : void 0,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fds-sidebar__action-icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "fds-sidebar__action-label", children: label })
+      ]
+    }
+  ) });
+}
+function SidebarSection({ hideWhenCollapsed = false, className, children, ...rest }) {
+  const sidebar = useSidebar();
+  const hidden = hideWhenCollapsed && (sidebar?.collapsed ?? false);
+  const ref = useInert(hidden);
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "div",
+    {
+      ref,
+      className: ["fds-sidebar__section", hidden ? "fds-sidebar__section--hidden" : "", className].filter(Boolean).join(" "),
+      "aria-hidden": hidden || void 0,
+      ...rest,
+      children
+    }
+  );
+}
+function SidebarHeader({ className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: ["fds-sidebar__header", className].filter(Boolean).join(" "), ...rest, children });
+}
+function SidebarFooter({ className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: ["fds-sidebar__footer", className].filter(Boolean).join(" "), ...rest, children });
+}
+var Sidebar = Object.assign(SidebarRoot, {
+  Header: SidebarHeader,
+  Brand: SidebarBrand,
+  Action: SidebarAction,
+  Section: SidebarSection,
+  Item: SidebarItem,
+  Footer: SidebarFooter
+});
+
+// src/components/WorkspaceSwitcher/WorkspaceSwitcher.tsx
+var import_react21 = require("react");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function WorkspaceAvatar({ name }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fds-workspace-avatar", "aria-hidden": "true", children: name.trim().charAt(0).toUpperCase() || "?" });
+}
+var WorkspaceSwitcher = (0, import_react21.forwardRef)(function WorkspaceSwitcher2({ name, plan, avatar, compact, type = "button", className, ...rest }, ref) {
+  const sidebar = useSidebar();
+  const iconOnly = compact ?? sidebar?.collapsed ?? false;
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    "button",
+    {
+      ref,
+      type,
+      className: ["fds-workspace-switcher", iconOnly ? "fds-workspace-switcher--compact" : "", className].filter(Boolean).join(" "),
+      "aria-label": iconOnly ? `Workspace: ${name}` : void 0,
+      ...rest,
+      children: [
+        avatar ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(WorkspaceAvatar, { name }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "fds-workspace-switcher__text", "aria-hidden": iconOnly || void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fds-workspace-switcher__name", children: name }),
+          plan && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fds-workspace-switcher__plan", children: plan }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react4.ChevronDown, { className: "fds-workspace-switcher__chevron", "aria-hidden": "true" })
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/AvatarLabelGroup/AvatarLabelGroup.tsx
+var import_react22 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var AvatarLabelGroup = (0, import_react22.forwardRef)(function AvatarLabelGroup2({ name, detail, src, compact = false, type = "button", className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "button",
+    {
+      ref,
+      type,
+      className: ["fds-avatar-label-group", compact ? "fds-avatar-label-group--compact" : "", className].filter(Boolean).join(" "),
+      "aria-label": compact ? name : void 0,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Avatar, { name, src, size: "small" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fds-avatar-label-group__text", "aria-hidden": compact || void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fds-avatar-label-group__name", children: name }),
+          detail && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "fds-avatar-label-group__detail", children: detail })
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/AppLayout/AppLayout.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function AppLayoutRoot({ className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: ["fds-app-layout", className].filter(Boolean).join(" "), ...rest, children });
+}
+function AppLayoutPanel({ className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("main", { className: ["fds-app-layout__panel", className].filter(Boolean).join(" "), ...rest, children });
+}
+var AppLayout = Object.assign(AppLayoutRoot, { Panel: AppLayoutPanel });
+
+// src/components/PageHeader/PageHeader.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function PageHeader({ title, description, breadcrumb, actions, className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("header", { className: ["fds-page-header", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fds-page-header__row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "fds-page-header__text", children: [
+        breadcrumb != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "fds-page-header__breadcrumb", children: breadcrumb }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h1", { className: "fds-page-header__title", children: title }),
+        description != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "fds-page-header__description", children: description })
+      ] }),
+      actions != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "fds-page-header__actions", children: actions })
+    ] }),
+    children
+  ] });
+}
+
+// src/components/Toast/Toast.tsx
+var import_react23 = require("react");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function ToastRegion({ className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: ["fds-toast-region", className].filter(Boolean).join(" "), "aria-live": "polite", ...rest, children });
+}
+function Toast({ children, action, onDismiss, duration, className, ...rest }) {
+  (0, import_react23.useEffect)(() => {
+    if (!duration || !onDismiss) return;
+    const t = window.setTimeout(onDismiss, duration);
+    return () => window.clearTimeout(t);
+  }, [duration, onDismiss]);
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { role: "status", className: ["fds-toast", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "fds-toast__message", children }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", className: "fds-toast__action", onClick: action.onClick, children: action.label }),
+    onDismiss && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", className: "fds-toast__close", "aria-label": "Dismiss", onClick: onDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react5.X, { "aria-hidden": "true" }) })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
+  AppLayout,
   AppNav,
   Avatar,
+  AvatarLabelGroup,
   Badge,
+  BrandButton,
   Button,
   ButtonLink,
   Callout,
@@ -1857,13 +2382,16 @@ function PricingCard({
   Checkbox,
   DiffPropertyList,
   DiffSection,
+  Divider,
   EmptyState,
   IconButton,
   Input,
+  ListLabel,
   Menu,
   MismatchCard,
   Modal,
   MultiSelect,
+  PageHeader,
   Pagination,
   PricingCard,
   Radio,
@@ -1873,16 +2401,26 @@ function PricingCard({
   SegmentedControl,
   Select,
   SettingsSection,
+  Sidebar,
+  SidebarItem,
   Skeleton,
   SkeletonGroup,
+  Spinner,
   Split,
   StackedCardsIllustration,
   Stat,
+  StatusDot,
   StepList,
   Swatch,
   TabNav,
   Table,
   Tag,
+  Toast,
+  ToastRegion,
   Toggle,
-  breakpoints
+  Tooltip,
+  WorkspaceAvatar,
+  WorkspaceSwitcher,
+  breakpoints,
+  useSidebar
 });