@usefidel/design-system 0.17.0 → 0.19.0

package/dist/index.cjs

@@ -20,19 +20,27 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Accordion: () => Accordion,
   AppNav: () => AppNav,
   Avatar: () => Avatar,
   Badge: () => Badge,
   Button: () => Button,
   ButtonLink: () => ButtonLink,
   Callout: () => Callout,
+  Card: () => Card,
+  Checkbox: () => Checkbox,
   DiffPropertyList: () => DiffPropertyList,
   DiffSection: () => DiffSection,
   EmptyState: () => EmptyState,
+  IconButton: () => IconButton,
+  Input: () => Input,
+  Menu: () => Menu,
   MismatchCard: () => MismatchCard,
   Modal: () => Modal,
   MultiSelect: () => MultiSelect,
   Pagination: () => Pagination,
+  PricingCard: () => PricingCard,
+  Radio: () => Radio,
   SearchInput: () => SearchInput,
   SectionHeader: () => SectionHeader,
   SegmentedControl: () => SegmentedControl,
@@ -42,7 +50,10 @@ __export(index_exports, {
   SkeletonGroup: () => SkeletonGroup,
   Split: () => Split,
   StackedCardsIllustration: () => StackedCardsIllustration,
+  Stat: () => Stat,
+  StepList: () => StepList,
   TabNav: () => TabNav,
+  Table: () => Table,
   Tag: () => Tag,
   Toggle: () => Toggle,
   breakpoints: () => breakpoints
@@ -401,7 +412,11 @@ var Select = (0, import_react3.forwardRef)(function Select2({
   id,
   name,
   className,
-  containerClassName
+  containerClassName,
+  variant = "field",
+  size = "medium",
+  align = "start",
+  "aria-label": ariaLabel
 }, ref) {
   const genId = (0, import_react3.useId)();
   const triggerId = id ?? genId;
@@ -420,7 +435,7 @@ var Select = (0, import_react3.forwardRef)(function Select2({
     if (!searchable || !query.trim()) return options;
     const q = query.trim().toLowerCase();
     return options.filter(
-      (o) => o.label.toLowerCase().includes(q) || (o.secondary?.toLowerCase().includes(q) ?? false)
+      (o) => o.label.toLowerCase().includes(q) || (o.secondary?.toLowerCase().includes(q) ?? false) || (o.description?.toLowerCase().includes(q) ?? false)
     );
   }, [options, searchable, query]);
   const hasMessage = Boolean(error ?? hint);
@@ -503,6 +518,8 @@ var Select = (0, import_react3.forwardRef)(function Select2({
   };
   const triggerClasses = [
     "fds-select__trigger",
+    variant === "inline" ? "fds-select__trigger--inline" : "",
+    size === "small" ? "fds-select__trigger--small" : "",
     error ? "fds-select__trigger--error" : "",
     open ? "fds-select__trigger--open" : "",
     className
@@ -511,7 +528,7 @@ var Select = (0, import_react3.forwardRef)(function Select2({
     "div",
     {
       ref: rootRef,
-      className: ["fds-select-field", containerClassName].filter(Boolean).join(" "),
+      className: ["fds-select-field", variant === "inline" ? "fds-select-field--inline" : "", containerClassName].filter(Boolean).join(" "),
       children: [
         label != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: triggerId, className: "fds-select__label", children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "fds-select", children: [
@@ -528,6 +545,7 @@ var Select = (0, import_react3.forwardRef)(function Select2({
               "aria-controls": open ? listId : void 0,
               "aria-invalid": error ? true : void 0,
               "aria-describedby": hasMessage ? msgId : void 0,
+              "aria-label": ariaLabel,
               onClick: () => !disabled && setOpen((o) => !o),
               onKeyDown,
               children: [
@@ -543,7 +561,7 @@ var Select = (0, import_react3.forwardRef)(function Select2({
               ]
             }
           ),
-          open && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "fds-select__popover", children: [
+          open && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `fds-select__popover fds-select__popover--${align}`, children: [
             searchable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "fds-select__search", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "input",
               {
@@ -588,9 +606,12 @@ var Select = (0, import_react3.forwardRef)(function Select2({
                       onClick: () => choose(i),
                       children: [
                         o.avatar != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__optAvatar", children: o.avatar }),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "fds-select__optText", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__optLabel", children: o.label }),
-                          o.secondary != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__optSecondary", children: o.secondary })
+                        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "fds-select__optBody", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "fds-select__optText", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__optLabel", children: o.label }),
+                            o.secondary != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__optSecondary", children: o.secondary })
+                          ] }),
+                          o.description != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__optDescription", children: o.description })
                         ] }),
                         o.value === value && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "fds-select__check", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckIcon, {}) })
                       ]
@@ -852,6 +873,7 @@ function SegmentedControl({
   value,
   onChange,
   "aria-label": ariaLabel,
+  variant = "underline",
   className
 }) {
   const refs = (0, import_react8.useRef)([]);
@@ -868,7 +890,7 @@ function SegmentedControl({
     onChange(options[next].value);
     refs.current[next]?.focus();
   };
-  const classes = ["fds-segmented", className].filter(Boolean).join(" ");
+  const classes = ["fds-segmented", variant === "pill" ? "fds-segmented--pill" : "", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { role: "tablist", "aria-label": ariaLabel, className: classes, children: options.map((option, i) => {
     const selected = option.value === value;
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -983,9 +1005,10 @@ function Badge({ tone = "neutral", icon, className, children, ...rest }) {
 
 // src/components/Tag/Tag.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-function Tag({ dot, className, children, ...rest }) {
+function Tag({ dot, icon, className, children, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: ["fds-tag", className].filter(Boolean).join(" "), ...rest, children: [
     dot && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `fds-dot fds-dot--${dot}`, "aria-hidden": "true" }),
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fds-tag__icon", "aria-hidden": "true", children: icon }),
     children
   ] });
 }
@@ -996,11 +1019,17 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 function ChevronIcon2() {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", className: "fds-multiselect__chevronIcon", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
+function RemoveIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { viewBox: "0 0 12 12", width: "10", height: "10", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M3 3l6 6M9 3L3 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
+}
 function CheckIcon2() {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function MultiSelect({
   label,
+  variant = "filter",
+  placeholder,
+  showActions,
   options,
   value,
   onChange,
@@ -1071,8 +1100,59 @@ function MultiSelect({
     }
   };
   const triggerClasses = ["fds-multiselect__trigger", open ? "fds-multiselect__trigger--open" : ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref: rootRef, className: ["fds-multiselect", className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  const isField = variant === "field";
+  const withActions = showActions ?? !isField;
+  const chosen = options.filter((o) => selected.has(o.value));
+  const fieldBox = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      className: ["fds-multiselect__fieldBox", open ? "fds-multiselect__fieldBox--open" : "", disabled ? "fds-multiselect__fieldBox--disabled" : ""].filter(Boolean).join(" "),
+      onClick: (e) => {
+        if (disabled || e.target.closest("button")) return;
+        setActiveIndex(0);
+        setOpen((o) => !o);
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "fds-multiselect__chips", children: [
+          chosen.length === 0 && placeholder != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fds-multiselect__placeholder", children: placeholder }),
+          chosen.map((o) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "fds-multiselect__chip", children: [
+            o.label,
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "fds-multiselect__chipRemove",
+                "aria-label": `Remove ${o.label}`,
+                disabled,
+                onClick: () => toggle(o),
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(RemoveIcon, {})
+              }
+            )
+          ] }, o.value))
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          "button",
+          {
+            type: "button",
+            id: triggerId,
+            ref: triggerRef,
+            className: "fds-multiselect__fieldBoxToggle",
+            disabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": open ? listId : void 0,
+            "aria-label": `${label}: ${chosen.length === 0 ? "none chosen" : `${chosen.length} chosen`}`,
+            onClick: () => setOpen((o) => !o),
+            onKeyDown: onTriggerKeyDown,
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `fds-multiselect__chevron${open ? " fds-multiselect__chevron--open" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ChevronIcon2, {}) })
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref: rootRef, className: ["fds-multiselect", isField ? "fds-multiselect--field" : "", className].filter(Boolean).join(" "), children: [
+    isField && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: triggerId, className: "fds-multiselect__fieldLabel", children: label }),
+    isField ? fieldBox : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "button",
       {
         type: "button",
@@ -1138,7 +1218,7 @@ function MultiSelect({
           })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fds-multiselect__footer", children: [
+      withActions && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fds-multiselect__footer", children: [
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange(enabled.map((o) => o.value)), children: selectAllLabel }),
         /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange([]), children: clearLabel })
       ] })
@@ -1222,8 +1302,8 @@ function Pagination({ page, pageCount, onPageChange, total, pageSize, variant =
 
 // src/components/EmptyState/EmptyState.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-function EmptyState({ illustration, title, description, action, footer, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: ["fds-empty", className].filter(Boolean).join(" "), ...rest, children: [
+function EmptyState({ illustration, title, description, action, footer, size = "default", className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: ["fds-empty", size === "compact" ? "fds-empty--compact" : "", className].filter(Boolean).join(" "), ...rest, children: [
     illustration != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "fds-empty__illustration", children: illustration }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fds-empty__text", children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "fds-empty__title", children: title }),
@@ -1304,21 +1384,442 @@ function Skeleton({ shape = "rect", width, height, lines = 1, className, style,
 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
+var import_jsx_runtime23 = 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 });
+}
+
+// src/components/Stat/Stat.tsx
+var import_jsx_runtime24 = 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 })
+  ] });
+}
+
+// src/components/Checkbox/Checkbox.tsx
+var import_react12 = require("react");
+var import_jsx_runtime25 = 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;
+  const inputRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useImperativeHandle)(ref, () => inputRef.current);
+  (0, import_react12.useEffect)(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "div",
+    {
+      className: ["fds-checkbox", className].filter(Boolean).join(" "),
+      "data-disabled": disabled ? "" : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "input",
+          {
+            ...rest,
+            id: inputId,
+            ref: inputRef,
+            type: "checkbox",
+            disabled,
+            className: "fds-checkbox__input"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("label", { htmlFor: inputId, className: "fds-checkbox__control", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "fds-checkbox__box", "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "fds-checkbox__tick", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("svg", { className: "fds-checkbox__dash", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("path", { d: "M3 6h6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) })
+          ] }),
+          (label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "fds-checkbox__text", children: [
+            label != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fds-checkbox__label", children: label }),
+            description != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fds-checkbox__description", children: description })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+
+// src/components/Radio/Radio.tsx
+var import_react13 = require("react");
+var import_jsx_runtime26 = 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_runtime26.jsxs)("div", { className: ["fds-radio", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", { ...rest, id: inputId, ref, type: "radio", disabled, className: "fds-radio__input" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { htmlFor: inputId, className: "fds-radio__control", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-radio__circle", "aria-hidden": "true" }),
+      (label != null || description != null) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "fds-radio__text", children: [
+        label != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-radio__label", children: label }),
+        description != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fds-radio__description", children: description })
+      ] })
+    ] })
+  ] });
+});
+
+// src/components/Accordion/Accordion.tsx
+var import_react14 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Accordion({
+  summary,
+  actions,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  className,
+  ...rest
+}) {
+  const [openState, setOpenState] = (0, import_react14.useState)(defaultOpen);
+  const open = openProp ?? openState;
+  const bodyId = (0, import_react14.useId)();
+  const toggle = () => {
+    const next = !open;
+    if (openProp === void 0) setOpenState(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    "div",
+    {
+      className: ["fds-accordion", className].filter(Boolean).join(" "),
+      "data-open": open ? "" : void 0,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "fds-accordion__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "fds-accordion__trigger",
+              "aria-expanded": open,
+              "aria-controls": bodyId,
+              onClick: toggle,
+              children: summary
+            }
+          ),
+          actions != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fds-accordion__actions", children: actions }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "fds-accordion__chevron", "aria-hidden": "true", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { id: bodyId, className: "fds-accordion__body", hidden: !open, children })
+      ]
+    }
+  );
+}
+
+// src/components/StepList/StepList.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var STATUS_TEXT = {
+  done: "Done",
+  active: "In progress",
+  pending: "Not started",
+  failed: "Failed"
+};
+function StepIcon({ status }) {
+  const common = { viewBox: "0 0 24 24", width: 18, height: 18, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+  if (status === "done") {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("svg", { ...common, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M8 12.5l2.5 2.5 5-5.5" })
+    ] });
+  }
+  if (status === "active") {
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { ...common, className: "fds-steps__spinner", children: /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime28.jsxs)("svg", { ...common, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "M12 7.5v5.5M12 16.5v.01" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { ...common, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "12", r: "9" }) });
+}
+function StepList({ steps, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ol", { className: ["fds-steps", className].filter(Boolean).join(" "), ...rest, children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "li",
+    {
+      className: `fds-steps__step fds-steps__step--${step.status}`,
+      "aria-current": step.status === "active" ? "step" : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-steps__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StepIcon, { status: step.status }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "fds-steps__label", children: step.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "fds-steps__sr", children: [
+          ", ",
+          STATUS_TEXT[step.status]
+        ] })
+      ]
+    },
+    step.id
+  )) });
+}
+
+// src/components/Input/Input.tsx
+var import_react15 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Input = (0, import_react15.forwardRef)(function Input2({ label, hint, error, leadingIcon, trailing, id, className, containerClassName, readOnly, disabled, ...rest }, ref) {
+  const genId = (0, import_react15.useId)();
+  const inputId = id ?? genId;
+  const msgId = `${genId}-msg`;
+  const message = error ?? hint;
+  const boxClasses = [
+    "fds-input__box",
+    error ? "fds-input__box--error" : "",
+    readOnly || disabled ? "fds-input__box--locked" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: ["fds-input", containerClassName].filter(Boolean).join(" "), children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("label", { htmlFor: inputId, className: "fds-input__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: boxClasses, children: [
+      leadingIcon != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fds-input__icon", "aria-hidden": "true", children: leadingIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "input",
+        {
+          ref,
+          id: inputId,
+          className: ["fds-input__control", className].filter(Boolean).join(" "),
+          readOnly,
+          disabled,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": message != null ? msgId : void 0,
+          ...rest
+        }
+      ),
+      trailing != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "fds-input__trailing", children: trailing })
+    ] }),
+    message != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { id: msgId, className: error ? "fds-input__error" : "fds-input__hint", children: message })
+  ] });
+});
+
+// src/components/IconButton/IconButton.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function IconButton({
+  icon,
+  variant = "outlined",
+  size = "medium",
+  type = "button",
+  className,
+  ...rest
+}) {
+  const classes = ["fds-icon-button", `fds-icon-button--${variant}`, `fds-icon-button--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type, className: classes, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "fds-icon-button__icon", "aria-hidden": "true", children: icon }) });
+}
+
+// src/components/Menu/Menu.tsx
+var import_react16 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function Menu({ trigger, items, align = "end", className }) {
+  const listId = (0, import_react16.useId)();
+  const rootRef = (0, import_react16.useRef)(null);
+  const listRef = (0, import_react16.useRef)(null);
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  const [active, setActive] = (0, import_react16.useState)(0);
+  const enabled = items.map((it, i) => it.disabled ? -1 : i).filter((i) => i >= 0);
+  (0, import_react16.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());
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      cancelAnimationFrame(raf);
+    };
+  }, [open]);
+  const triggerEl = () => rootRef.current?.querySelector('[aria-haspopup="menu"]');
+  const close = () => {
+    setOpen(false);
+    triggerEl()?.focus();
+  };
+  const openAt = (index) => {
+    setActive(index);
+    setOpen(true);
+  };
+  const choose = (i) => {
+    const it = items[i];
+    if (!it || it.disabled) return;
+    close();
+    it.onSelect();
+  };
+  const step = (dir) => {
+    if (enabled.length === 0) return;
+    const at = enabled.indexOf(active);
+    setActive(enabled[(at + dir + enabled.length) % enabled.length]);
+  };
+  const onListKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      step(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      step(-1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActive(enabled[0] ?? 0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setActive(enabled[enabled.length - 1] ?? 0);
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      choose(active);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+    } else if (e.key === "Tab") setOpen(false);
+  };
+  const own = trigger.props;
+  const wired = (0, import_react16.cloneElement)(trigger, {
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? listId : void 0,
+    onClick: (e) => {
+      own.onClick?.(e);
+      if (open) setOpen(false);
+      else openAt(enabled[0] ?? 0);
+    },
+    onKeyDown: (e) => {
+      own.onKeyDown?.(e);
+      if (!open && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        openAt(enabled[0] ?? 0);
+      } else if (!open && e.key === "ArrowUp") {
+        e.preventDefault();
+        openAt(enabled[enabled.length - 1] ?? 0);
+      }
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ref: rootRef, className: ["fds-menu", className].filter(Boolean).join(" "), children: [
+    wired,
+    open && /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.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_runtime31.jsx)("span", { className: "fds-menu__icon", "aria-hidden": "true", children: it.icon }),
+              it.label
+            ]
+          },
+          i
+        ))
+      }
+    )
+  ] });
+}
+
+// src/components/Table/Table.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function Table({ columns, rows, rowKey, empty, className, "aria-label": ariaLabel, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: ["fds-table", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("table", { className: "fds-table__table", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tr", { children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      "th",
+      {
+        scope: "col",
+        className: c.align === "end" ? "fds-table__cell--end" : void 0,
+        style: c.width ? { width: c.width } : void 0,
+        children: c.header
+      },
+      c.key
+    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("tbody", { children: [
+      rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("tr", { children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime32.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_runtime32.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { colSpan: columns.length, className: "fds-table__empty", children: empty }) })
+    ] })
+  ] }) });
+}
+
+// src/components/PricingCard/PricingCard.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function CheckIcon3() {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function PricingCard({
+  eyebrow,
+  title,
+  badge,
+  price,
+  period,
+  description,
+  action,
+  featuresTitle = "Features",
+  featuresIntro,
+  features = [],
+  highlighted = false,
+  className,
+  ...rest
+}) {
+  const classes = ["fds-pricing-card", highlighted ? "fds-pricing-card--highlighted" : "", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("article", { className: classes, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "fds-pricing-card__top", children: [
+      eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fds-pricing-card__eyebrow", children: eyebrow }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("h3", { className: "fds-pricing-card__title", children: [
+        title,
+        badge
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", { className: "fds-pricing-card__price", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fds-pricing-card__amount", children: price }),
+        period != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fds-pricing-card__period", children: period })
+      ] }),
+      description != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "fds-pricing-card__description", children: description }),
+      action != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "fds-pricing-card__action", children: action })
+    ] }),
+    features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "fds-pricing-card__features", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "fds-pricing-card__featuresTitle", children: featuresTitle }),
+      featuresIntro != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "fds-pricing-card__intro", children: featuresIntro }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "fds-pricing-card__list", children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("li", { className: "fds-pricing-card__feature", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fds-pricing-card__check", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckIcon3, {}) }),
+        f
+      ] }, i)) })
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accordion,
   AppNav,
   Avatar,
   Badge,
   Button,
   ButtonLink,
   Callout,
+  Card,
+  Checkbox,
   DiffPropertyList,
   DiffSection,
   EmptyState,
+  IconButton,
+  Input,
+  Menu,
   MismatchCard,
   Modal,
   MultiSelect,
   Pagination,
+  PricingCard,
+  Radio,
   SearchInput,
   SectionHeader,
   SegmentedControl,
@@ -1328,7 +1829,10 @@ function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
   SkeletonGroup,
   Split,
   StackedCardsIllustration,
+  Stat,
+  StepList,
   TabNav,
+  Table,
   Tag,
   Toggle,
   breakpoints