@usefidel/design-system 0.21.0 → 0.23.0

package/dist/index.js

@@ -1348,6 +1348,19 @@ function Stat({ label, value, children, className, ...rest }) {
   ] });
 }
 
+// src/components/Swatch/Swatch.tsx
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+function Swatch({ color, name, value, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs21("div", { className: ["fds-swatch", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx25("div", { className: "fds-swatch__color", style: { "--fds-swatch-color": color }, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs21("div", { className: "fds-swatch__body", children: [
+      /* @__PURE__ */ jsx25("p", { className: "fds-swatch__name", children: name }),
+      value != null && /* @__PURE__ */ jsx25("p", { className: "fds-swatch__value", children: value }),
+      children != null && /* @__PURE__ */ jsx25("div", { className: "fds-swatch__detail", children })
+    ] })
+  ] });
+}
+
 // src/components/Checkbox/Checkbox.tsx
 import {
   forwardRef as forwardRef4,
@@ -1356,7 +1369,7 @@ import {
   useImperativeHandle as useImperativeHandle2,
   useRef as useRef6
 } from "react";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 var Checkbox = forwardRef4(function Checkbox2({ label, description, indeterminate = false, className, id, disabled, ...rest }, ref) {
   const generatedId = useId7();
   const inputId = id ?? generatedId;
@@ -1365,13 +1378,13 @@ var Checkbox = forwardRef4(function Checkbox2({ label, description, indeterminat
   useEffect5(() => {
     if (inputRef.current) inputRef.current.indeterminate = indeterminate;
   }, [indeterminate]);
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: ["fds-checkbox", className].filter(Boolean).join(" "),
       "data-disabled": disabled ? "" : void 0,
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           "input",
           {
             ...rest,
@@ -1382,14 +1395,14 @@ var Checkbox = forwardRef4(function Checkbox2({ label, description, indeterminat
             className: "fds-checkbox__input"
           }
         ),
-        /* @__PURE__ */ jsxs21("label", { htmlFor: inputId, className: "fds-checkbox__control", children: [
-          /* @__PURE__ */ jsxs21("span", { className: "fds-checkbox__box", "aria-hidden": "true", children: [
-            /* @__PURE__ */ jsx25("svg", { className: "fds-checkbox__tick", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx25("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-            /* @__PURE__ */ jsx25("svg", { className: "fds-checkbox__dash", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx25("path", { d: "M3 6h6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) })
+        /* @__PURE__ */ jsxs22("label", { htmlFor: inputId, className: "fds-checkbox__control", children: [
+          /* @__PURE__ */ jsxs22("span", { className: "fds-checkbox__box", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx26("svg", { className: "fds-checkbox__tick", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx26("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+            /* @__PURE__ */ jsx26("svg", { className: "fds-checkbox__dash", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx26("path", { d: "M3 6h6", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) })
           ] }),
-          (label != null || description != null) && /* @__PURE__ */ jsxs21("span", { className: "fds-checkbox__text", children: [
-            label != null && /* @__PURE__ */ jsx25("span", { className: "fds-checkbox__label", children: label }),
-            description != null && /* @__PURE__ */ jsx25("span", { className: "fds-checkbox__description", children: description })
+          (label != null || description != null) && /* @__PURE__ */ jsxs22("span", { className: "fds-checkbox__text", children: [
+            label != null && /* @__PURE__ */ jsx26("span", { className: "fds-checkbox__label", children: label }),
+            description != null && /* @__PURE__ */ jsx26("span", { className: "fds-checkbox__description", children: description })
           ] })
         ] })
       ]
@@ -1399,25 +1412,57 @@ var Checkbox = forwardRef4(function Checkbox2({ label, description, indeterminat
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef5, useId as useId8 } from "react";
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 var Radio = forwardRef5(function Radio2({ label, description, className, id, disabled, ...rest }, ref) {
   const generatedId = useId8();
   const inputId = id ?? generatedId;
-  return /* @__PURE__ */ jsxs22("div", { className: ["fds-radio", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
-    /* @__PURE__ */ jsx26("input", { ...rest, id: inputId, ref, type: "radio", disabled, className: "fds-radio__input" }),
-    /* @__PURE__ */ jsxs22("label", { htmlFor: inputId, className: "fds-radio__control", children: [
-      /* @__PURE__ */ jsx26("span", { className: "fds-radio__circle", "aria-hidden": "true" }),
-      (label != null || description != null) && /* @__PURE__ */ jsxs22("span", { className: "fds-radio__text", children: [
-        label != null && /* @__PURE__ */ jsx26("span", { className: "fds-radio__label", children: label }),
-        description != null && /* @__PURE__ */ jsx26("span", { className: "fds-radio__description", children: description })
+  return /* @__PURE__ */ jsxs23("div", { className: ["fds-radio", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
+    /* @__PURE__ */ jsx27("input", { ...rest, id: inputId, ref, type: "radio", disabled, className: "fds-radio__input" }),
+    /* @__PURE__ */ jsxs23("label", { htmlFor: inputId, className: "fds-radio__control", children: [
+      /* @__PURE__ */ jsx27("span", { className: "fds-radio__circle", "aria-hidden": "true" }),
+      (label != null || description != null) && /* @__PURE__ */ jsxs23("span", { className: "fds-radio__text", children: [
+        label != null && /* @__PURE__ */ jsx27("span", { className: "fds-radio__label", children: label }),
+        description != null && /* @__PURE__ */ jsx27("span", { className: "fds-radio__description", children: description })
       ] })
     ] })
   ] });
 });
 
+// src/components/RadioCard/RadioCard.tsx
+import { forwardRef as forwardRef6, useId as useId9 } from "react";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+var RadioCard = forwardRef6(function RadioCard2({ label, description, icon, meta, className, id, disabled, ...rest }, ref) {
+  const generatedId = useId9();
+  const inputId = id ?? generatedId;
+  const descriptionId = description != null ? `${inputId}-description` : void 0;
+  return /* @__PURE__ */ jsxs24("div", { className: ["fds-radio-card", className].filter(Boolean).join(" "), "data-disabled": disabled ? "" : void 0, children: [
+    /* @__PURE__ */ jsx28(
+      "input",
+      {
+        ...rest,
+        id: inputId,
+        ref,
+        type: "radio",
+        disabled,
+        "aria-describedby": descriptionId,
+        className: "fds-radio-card__input"
+      }
+    ),
+    /* @__PURE__ */ jsxs24("label", { htmlFor: inputId, className: "fds-radio-card__body", children: [
+      icon != null && /* @__PURE__ */ jsx28("span", { className: "fds-radio-card__icon", "aria-hidden": "true", children: icon }),
+      /* @__PURE__ */ jsxs24("span", { className: "fds-radio-card__text", children: [
+        /* @__PURE__ */ jsx28("span", { className: "fds-radio-card__label", children: label }),
+        description != null && /* @__PURE__ */ jsx28("span", { id: descriptionId, className: "fds-radio-card__description", children: description }),
+        meta != null && /* @__PURE__ */ jsx28("span", { className: "fds-radio-card__meta", children: meta })
+      ] }),
+      /* @__PURE__ */ jsx28("span", { className: "fds-radio-card__circle", "aria-hidden": "true" })
+    ] })
+  ] });
+});
+
 // src/components/Accordion/Accordion.tsx
-import { useId as useId9, useState as useState7 } from "react";
-import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useId as useId10, useState as useState7 } from "react";
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 function Accordion({
   summary,
   actions,
@@ -1430,21 +1475,21 @@ function Accordion({
 }) {
   const [openState, setOpenState] = useState7(defaultOpen);
   const open = openProp ?? openState;
-  const bodyId = useId9();
+  const bodyId = useId10();
   const toggle = () => {
     const next = !open;
     if (openProp === void 0) setOpenState(next);
     onOpenChange?.(next);
   };
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       className: ["fds-accordion", className].filter(Boolean).join(" "),
       "data-open": open ? "" : void 0,
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs23("div", { className: "fds-accordion__header", children: [
-          /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsxs25("div", { className: "fds-accordion__header", children: [
+          /* @__PURE__ */ jsx29(
             "button",
             {
               type: "button",
@@ -1455,17 +1500,17 @@ function Accordion({
               children: summary
             }
           ),
-          actions != null && /* @__PURE__ */ jsx27("div", { className: "fds-accordion__actions", children: actions }),
-          /* @__PURE__ */ jsx27("span", { className: "fds-accordion__chevron", "aria-hidden": "true", onClick: toggle, children: /* @__PURE__ */ jsx27("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx27("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+          actions != null && /* @__PURE__ */ jsx29("div", { className: "fds-accordion__actions", children: actions }),
+          /* @__PURE__ */ jsx29("span", { className: "fds-accordion__chevron", "aria-hidden": "true", onClick: toggle, children: /* @__PURE__ */ jsx29("svg", { viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx29("path", { d: "M6 9l6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
         ] }),
-        /* @__PURE__ */ jsx27("div", { id: bodyId, className: "fds-accordion__body", hidden: !open, children })
+        /* @__PURE__ */ jsx29("div", { id: bodyId, className: "fds-accordion__body", hidden: !open, children })
       ]
     }
   );
 }
 
 // src/components/StepList/StepList.tsx
-import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 var STATUS_TEXT = {
   done: "Done",
   active: "In progress",
@@ -1475,32 +1520,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__ */ jsxs24("svg", { ...common, children: [
-      /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "9" }),
-      /* @__PURE__ */ jsx28("path", { d: "M8 12.5l2.5 2.5 5-5.5" })
+    return /* @__PURE__ */ jsxs26("svg", { ...common, children: [
+      /* @__PURE__ */ jsx30("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx30("path", { d: "M8 12.5l2.5 2.5 5-5.5" })
     ] });
   }
   if (status === "active") {
-    return /* @__PURE__ */ jsx28("svg", { ...common, className: "fds-steps__spinner", children: /* @__PURE__ */ jsx28("path", { d: "M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" }) });
+    return /* @__PURE__ */ jsx30("svg", { ...common, className: "fds-steps__spinner", children: /* @__PURE__ */ jsx30("path", { d: "M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" }) });
   }
   if (status === "failed") {
-    return /* @__PURE__ */ jsxs24("svg", { ...common, children: [
-      /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "9" }),
-      /* @__PURE__ */ jsx28("path", { d: "M12 7.5v5.5M12 16.5v.01" })
+    return /* @__PURE__ */ jsxs26("svg", { ...common, children: [
+      /* @__PURE__ */ jsx30("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx30("path", { d: "M12 7.5v5.5M12 16.5v.01" })
     ] });
   }
-  return /* @__PURE__ */ jsx28("svg", { ...common, children: /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "9" }) });
+  return /* @__PURE__ */ jsx30("svg", { ...common, children: /* @__PURE__ */ jsx30("circle", { cx: "12", cy: "12", r: "9" }) });
 }
 function StepList({ steps, className, ...rest }) {
-  return /* @__PURE__ */ jsx28("ol", { className: ["fds-steps", className].filter(Boolean).join(" "), ...rest, children: steps.map((step) => /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsx30("ol", { className: ["fds-steps", className].filter(Boolean).join(" "), ...rest, children: steps.map((step) => /* @__PURE__ */ jsxs26(
     "li",
     {
       className: `fds-steps__step fds-steps__step--${step.status}`,
       "aria-current": step.status === "active" ? "step" : void 0,
       children: [
-        /* @__PURE__ */ jsx28("span", { className: "fds-steps__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx28(StepIcon, { status: step.status }) }),
-        /* @__PURE__ */ jsx28("span", { className: "fds-steps__label", children: step.label }),
-        /* @__PURE__ */ jsxs24("span", { className: "fds-steps__sr", children: [
+        /* @__PURE__ */ jsx30("span", { className: "fds-steps__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx30(StepIcon, { status: step.status }) }),
+        /* @__PURE__ */ jsx30("span", { className: "fds-steps__label", children: step.label }),
+        /* @__PURE__ */ jsxs26("span", { className: "fds-steps__sr", children: [
           ", ",
           STATUS_TEXT[step.status]
         ] })
@@ -1511,10 +1556,10 @@ function StepList({ steps, className, ...rest }) {
 }
 
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef6, useId as useId10 } from "react";
-import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
-var Input = forwardRef6(function Input2({ label, hint, error, leadingIcon, trailing, id, className, containerClassName, readOnly, disabled, ...rest }, ref) {
-  const genId = useId10();
+import { forwardRef as forwardRef7, useId as useId11 } from "react";
+import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
+var Input = forwardRef7(function Input2({ label, hint, error, leadingIcon, trailing, id, className, containerClassName, readOnly, disabled, ...rest }, ref) {
+  const genId = useId11();
   const inputId = id ?? genId;
   const msgId = `${genId}-msg`;
   const message = error ?? hint;
@@ -1523,11 +1568,11 @@ var Input = forwardRef6(function Input2({ label, hint, error, leadingIcon, trail
     error ? "fds-input__box--error" : "",
     readOnly || disabled ? "fds-input__box--locked" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs25("div", { className: ["fds-input", containerClassName].filter(Boolean).join(" "), children: [
-    label != null && /* @__PURE__ */ jsx29("label", { htmlFor: inputId, className: "fds-input__label", children: label }),
-    /* @__PURE__ */ jsxs25("div", { className: boxClasses, children: [
-      leadingIcon != null && /* @__PURE__ */ jsx29("span", { className: "fds-input__icon", "aria-hidden": "true", children: leadingIcon }),
-      /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs27("div", { className: ["fds-input", containerClassName].filter(Boolean).join(" "), children: [
+    label != null && /* @__PURE__ */ jsx31("label", { htmlFor: inputId, className: "fds-input__label", children: label }),
+    /* @__PURE__ */ jsxs27("div", { className: boxClasses, children: [
+      leadingIcon != null && /* @__PURE__ */ jsx31("span", { className: "fds-input__icon", "aria-hidden": "true", children: leadingIcon }),
+      /* @__PURE__ */ jsx31(
         "input",
         {
           ref,
@@ -1540,14 +1585,14 @@ var Input = forwardRef6(function Input2({ label, hint, error, leadingIcon, trail
           ...rest
         }
       ),
-      trailing != null && /* @__PURE__ */ jsx29("span", { className: "fds-input__trailing", children: trailing })
+      trailing != null && /* @__PURE__ */ jsx31("span", { className: "fds-input__trailing", children: trailing })
     ] }),
-    message != null && /* @__PURE__ */ jsx29("p", { id: msgId, className: error ? "fds-input__error" : "fds-input__hint", children: message })
+    message != null && /* @__PURE__ */ jsx31("p", { id: msgId, className: error ? "fds-input__error" : "fds-input__hint", children: message })
   ] });
 });
 
 // src/components/IconButton/IconButton.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function IconButton({
   icon,
   variant = "outlined",
@@ -1557,20 +1602,20 @@ function IconButton({
   ...rest
 }) {
   const classes = ["fds-icon-button", `fds-icon-button--${variant}`, `fds-icon-button--${size}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx30("button", { type, className: classes, ...rest, children: /* @__PURE__ */ jsx30("span", { className: "fds-icon-button__icon", "aria-hidden": "true", children: icon }) });
+  return /* @__PURE__ */ jsx32("button", { type, className: classes, ...rest, children: /* @__PURE__ */ jsx32("span", { className: "fds-icon-button__icon", "aria-hidden": "true", children: icon }) });
 }
 
 // src/components/Menu/Menu.tsx
 import {
   cloneElement,
   useEffect as useEffect6,
-  useId as useId11,
+  useId as useId12,
   useRef as useRef7,
   useState as useState8
 } from "react";
-import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 function Menu({ trigger, items, align = "end", className }) {
-  const listId = useId11();
+  const listId = useId12();
   const rootRef = useRef7(null);
   const listRef = useRef7(null);
   const [open, setOpen] = useState8(false);
@@ -1650,9 +1695,9 @@ function Menu({ trigger, items, align = "end", className }) {
       }
     }
   });
-  return /* @__PURE__ */ jsxs26("div", { ref: rootRef, className: ["fds-menu", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxs28("div", { ref: rootRef, className: ["fds-menu", className].filter(Boolean).join(" "), children: [
     wired,
-    open && /* @__PURE__ */ jsx31(
+    open && /* @__PURE__ */ jsx33(
       "div",
       {
         ref: listRef,
@@ -1662,7 +1707,7 @@ function Menu({ trigger, items, align = "end", className }) {
         className: `fds-menu__list fds-menu__list--${align}`,
         "aria-activedescendant": `${listId}-item-${active}`,
         onKeyDown: onListKeyDown,
-        children: items.map((it, i) => /* @__PURE__ */ jsxs26(
+        children: items.map((it, i) => /* @__PURE__ */ jsxs28(
           "div",
           {
             id: `${listId}-item-${i}`,
@@ -1678,7 +1723,7 @@ function Menu({ trigger, items, align = "end", className }) {
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => choose(i),
             children: [
-              it.icon != null && /* @__PURE__ */ jsx31("span", { className: "fds-menu__icon", "aria-hidden": "true", children: it.icon }),
+              it.icon != null && /* @__PURE__ */ jsx33("span", { className: "fds-menu__icon", "aria-hidden": "true", children: it.icon }),
               it.label
             ]
           },
@@ -1690,10 +1735,10 @@ function Menu({ trigger, items, align = "end", className }) {
 }
 
 // src/components/Table/Table.tsx
-import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
 function Table({ columns, rows, rowKey, empty, className, "aria-label": ariaLabel, ...rest }) {
-  return /* @__PURE__ */ jsx32("div", { className: ["fds-table", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ jsxs27("table", { className: "fds-table__table", "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsx32("thead", { children: /* @__PURE__ */ jsx32("tr", { children: columns.map((c) => /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34("div", { className: ["fds-table", className].filter(Boolean).join(" "), ...rest, children: /* @__PURE__ */ jsxs29("table", { className: "fds-table__table", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx34("thead", { children: /* @__PURE__ */ jsx34("tr", { children: columns.map((c) => /* @__PURE__ */ jsx34(
       "th",
       {
         scope: "col",
@@ -1703,17 +1748,17 @@ function Table({ columns, rows, rowKey, empty, className, "aria-label": ariaLabe
       },
       c.key
     )) }) }),
-    /* @__PURE__ */ jsxs27("tbody", { children: [
-      rows.map((row) => /* @__PURE__ */ jsx32("tr", { children: columns.map((c) => /* @__PURE__ */ jsx32("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__ */ jsx32("tr", { children: /* @__PURE__ */ jsx32("td", { colSpan: columns.length, className: "fds-table__empty", children: empty }) })
+    /* @__PURE__ */ jsxs29("tbody", { children: [
+      rows.map((row) => /* @__PURE__ */ jsx34("tr", { children: columns.map((c) => /* @__PURE__ */ jsx34("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__ */ jsx34("tr", { children: /* @__PURE__ */ jsx34("td", { colSpan: columns.length, className: "fds-table__empty", children: empty }) })
     ] })
   ] }) });
 }
 
 // src/components/PricingCard/PricingCard.tsx
-import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 function CheckIcon3() {
-  return /* @__PURE__ */ jsx33("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx33("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx35("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx35("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 function PricingCard({
   eyebrow,
@@ -1731,25 +1776,25 @@ function PricingCard({
   ...rest
 }) {
   const classes = ["fds-pricing-card", highlighted ? "fds-pricing-card--highlighted" : "", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs28("article", { className: classes, ...rest, children: [
-    /* @__PURE__ */ jsxs28("div", { className: "fds-pricing-card__top", children: [
-      eyebrow != null && /* @__PURE__ */ jsx33("span", { className: "fds-pricing-card__eyebrow", children: eyebrow }),
-      /* @__PURE__ */ jsxs28("h3", { className: "fds-pricing-card__title", children: [
+  return /* @__PURE__ */ jsxs30("article", { className: classes, ...rest, children: [
+    /* @__PURE__ */ jsxs30("div", { className: "fds-pricing-card__top", children: [
+      eyebrow != null && /* @__PURE__ */ jsx35("span", { className: "fds-pricing-card__eyebrow", children: eyebrow }),
+      /* @__PURE__ */ jsxs30("h3", { className: "fds-pricing-card__title", children: [
         title,
         badge
       ] }),
-      /* @__PURE__ */ jsxs28("p", { className: "fds-pricing-card__price", children: [
-        /* @__PURE__ */ jsx33("span", { className: "fds-pricing-card__amount", children: price }),
-        period != null && /* @__PURE__ */ jsx33("span", { className: "fds-pricing-card__period", children: period })
+      /* @__PURE__ */ jsxs30("p", { className: "fds-pricing-card__price", children: [
+        /* @__PURE__ */ jsx35("span", { className: "fds-pricing-card__amount", children: price }),
+        period != null && /* @__PURE__ */ jsx35("span", { className: "fds-pricing-card__period", children: period })
       ] }),
-      description != null && /* @__PURE__ */ jsx33("p", { className: "fds-pricing-card__description", children: description }),
-      action != null && /* @__PURE__ */ jsx33("div", { className: "fds-pricing-card__action", children: action })
+      description != null && /* @__PURE__ */ jsx35("p", { className: "fds-pricing-card__description", children: description }),
+      action != null && /* @__PURE__ */ jsx35("div", { className: "fds-pricing-card__action", children: action })
     ] }),
-    features.length > 0 && /* @__PURE__ */ jsxs28("div", { className: "fds-pricing-card__features", children: [
-      /* @__PURE__ */ jsx33("p", { className: "fds-pricing-card__featuresTitle", children: featuresTitle }),
-      featuresIntro != null && /* @__PURE__ */ jsx33("p", { className: "fds-pricing-card__intro", children: featuresIntro }),
-      /* @__PURE__ */ jsx33("ul", { className: "fds-pricing-card__list", children: features.map((f, i) => /* @__PURE__ */ jsxs28("li", { className: "fds-pricing-card__feature", children: [
-        /* @__PURE__ */ jsx33("span", { className: "fds-pricing-card__check", children: /* @__PURE__ */ jsx33(CheckIcon3, {}) }),
+    features.length > 0 && /* @__PURE__ */ jsxs30("div", { className: "fds-pricing-card__features", children: [
+      /* @__PURE__ */ jsx35("p", { className: "fds-pricing-card__featuresTitle", children: featuresTitle }),
+      featuresIntro != null && /* @__PURE__ */ jsx35("p", { className: "fds-pricing-card__intro", children: featuresIntro }),
+      /* @__PURE__ */ jsx35("ul", { className: "fds-pricing-card__list", children: features.map((f, i) => /* @__PURE__ */ jsxs30("li", { className: "fds-pricing-card__feature", children: [
+        /* @__PURE__ */ jsx35("span", { className: "fds-pricing-card__check", children: /* @__PURE__ */ jsx35(CheckIcon3, {}) }),
         f
       ] }, i)) })
     ] })
@@ -1777,6 +1822,7 @@ export {
   Pagination,
   PricingCard,
   Radio,
+  RadioCard,
   SearchInput,
   SectionHeader,
   SegmentedControl,
@@ -1788,6 +1834,7 @@ export {
   StackedCardsIllustration,
   Stat,
   StepList,
+  Swatch,
   TabNav,
   Table,
   Tag,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefidel/design-system",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "Fidel brand design tokens + React component library — DTCG token source of truth, generated per-surface CSS + Tailwind-v4 parser-compatibility output, and on-brand React components (Button, MismatchCard, DiffSection).",
   "type": "module",
   "main": "./dist/index.cjs",