@usefidel/design-system 0.14.0 → 0.16.0

package/dist/fidel.manifest.json

@@ -10,6 +10,6 @@
     "webapp.css"
   ],
   "storybookUrl": null,
-  "packageVersion": "0.14.0",
-  "resolvedSha": "2c6d6c9b1c4ca4dc54ec8a92f2a9d2d60dcaf34d"
+  "packageVersion": "0.16.0",
+  "resolvedSha": "dcc25541ed959e050dde79c26e8a95ec819a566f"
 }

package/dist/icons.cjs

@@ -3,6 +3,10 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -16,9 +20,39 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 
 // src/icons.ts
 var icons_exports = {};
+__export(icons_exports, {
+  FigmaLogo: () => FigmaLogo,
+  GitHubLogo: () => GitHubLogo
+});
 module.exports = __toCommonJS(icons_exports);
 __reExport(icons_exports, require("lucide-react"), module.exports);
+
+// src/brand-icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function GitHubLogo(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M4.49969 11.0004V9.00024C4.46469 8.69022 4.48969 8.37519 4.57469 8.07517C4.6597 7.77514 4.80471 7.49512 4.99972 7.2501C3.49964 7.2501 1.99955 6.25002 1.99955 4.49988C1.95879 3.87622 2.1355 3.25772 2.49958 2.74974C2.34957 2.17469 2.34957 1.57465 2.49958 0.9996C2.49958 0.9996 2.99961 0.9996 3.99966 1.74966C5.31974 1.49964 6.67981 1.49964 7.99989 1.74966C8.99994 0.9996 9.49997 0.9996 9.49997 0.9996C9.63998 1.57465 9.63998 2.17469 9.49997 2.74974C9.86499 3.25978 10.04 3.87483 10 4.49988C10 6.25002 8.49991 7.2501 6.99983 7.2501C7.38982 7.7452 7.56942 8.37383 7.49986 9.00024V11.0004M4.49969 9.00024C2.24457 10.0003 1.99966 8.00016 0.9996 8.00016",
+      stroke: "currentColor",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+function FigmaLogo(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.37508 7.6865C6.72146 7.96433 7.15046 8.11895 7.59444 8.12599C8.03841 8.13303 8.4721 7.99208 8.82712 7.72538C9.18213 7.45868 9.43827 7.08139 9.55514 6.65301C9.67201 6.22463 9.64296 5.76954 9.47258 5.3595C9.33009 5.01515 9.09422 4.71746 8.79158 4.5C9.04964 4.31482 9.25989 4.07085 9.40492 3.78827C9.54995 3.50569 9.62559 3.19263 9.62558 2.875C9.62558 2.34457 9.41486 1.83586 9.03979 1.46079C8.66472 1.08571 8.15601 0.875 7.62558 0.875H4.37558C3.95215 0.874878 3.53962 1.00914 3.19737 1.25846C2.85513 1.50778 2.60085 1.85928 2.47115 2.26235C2.34144 2.66542 2.34301 3.09926 2.47562 3.50138C2.60823 3.9035 2.86505 4.25316 3.20908 4.5C2.951 4.68517 2.74074 4.92914 2.5957 5.21172C2.45065 5.4943 2.375 5.80737 2.375 6.125C2.375 6.44263 2.45065 6.7557 2.5957 7.03828C2.74074 7.32086 2.951 7.56483 3.20908 7.75C2.93065 7.94979 2.70822 8.21778 2.56314 8.52825C2.41806 8.83872 2.35519 9.18126 2.38057 9.52302C2.40594 9.86478 2.5187 10.1943 2.70804 10.4799C2.89738 10.7656 3.15693 10.9978 3.46182 11.1543C3.7667 11.3107 4.10668 11.3863 4.44914 11.3736C4.7916 11.3609 5.12506 11.2604 5.41752 11.0818C5.70999 10.9032 5.95165 10.6524 6.11932 10.3535C6.287 10.0546 6.37507 9.7177 6.37508 9.375V7.6865ZM4.37508 1.625C4.04356 1.625 3.72561 1.7567 3.49119 1.99112C3.25677 2.22554 3.12508 2.54348 3.12508 2.875C3.12508 3.20652 3.25677 3.52446 3.49119 3.75888C3.72561 3.9933 4.04356 4.125 4.37508 4.125H5.62508V1.625H4.37508ZM5.62508 8.125H4.37508C4.12785 8.125 3.88618 8.19831 3.68061 8.33566C3.47505 8.47301 3.31484 8.66824 3.22023 8.89665C3.12562 9.12505 3.10086 9.37639 3.1491 9.61886C3.19733 9.86134 3.31638 10.0841 3.49119 10.2589C3.66601 10.4337 3.88874 10.5528 4.13121 10.601C4.37369 10.6492 4.62502 10.6245 4.85343 10.5298C5.08184 10.4352 5.27706 10.275 5.41441 10.0695C5.55177 9.8639 5.62508 9.62223 5.62508 9.375V8.125ZM4.37508 4.875C4.04356 4.875 3.72561 5.0067 3.49119 5.24112C3.25677 5.47554 3.12508 5.79348 3.12508 6.125C3.12508 6.45652 3.25677 6.77446 3.49119 7.00888C3.72561 7.2433 4.04356 7.375 4.37508 7.375H5.62508V4.875H4.37508ZM6.37508 6.125C6.37508 6.45659 6.5068 6.77459 6.74127 7.00906C6.97574 7.24353 7.29374 7.37525 7.62533 7.37525C7.95691 7.37525 8.27492 7.24353 8.50939 7.00906C8.74386 6.77459 8.87558 6.45659 8.87558 6.125C8.87558 5.79341 8.74386 5.47541 8.50939 5.24094C8.27492 5.00647 7.95691 4.87475 7.62533 4.87475C7.29374 4.87475 6.97574 5.00647 6.74127 5.24094C6.5068 5.47541 6.37508 5.79341 6.37508 6.125ZM7.62508 4.125C7.9566 4.125 8.27454 3.9933 8.50896 3.75888C8.74338 3.52446 8.87508 3.20652 8.87508 2.875C8.87508 2.54348 8.74338 2.22554 8.50896 1.99112C8.27454 1.7567 7.9566 1.625 7.62508 1.625H6.37508V4.125H7.62508Z",
+      fill: "currentColor"
+    }
+  ) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FigmaLogo,
+  GitHubLogo,
   ...require("lucide-react")
 });

package/dist/icons.d.cts

@@ -1 +1,12 @@
 export * from 'lucide-react';
+import * as react from 'react';
+import { SVGProps } from 'react';
+
+/**
+ * Brand marks lucide-react doesn't ship. Paths are the Figma "✅Project" source-ref
+ * icons, drawn in currentColor at 12px; pass width/height to resize.
+ */
+declare function GitHubLogo(props: SVGProps<SVGSVGElement>): react.JSX.Element;
+declare function FigmaLogo(props: SVGProps<SVGSVGElement>): react.JSX.Element;
+
+export { FigmaLogo, GitHubLogo };

package/dist/icons.d.ts

@@ -1 +1,12 @@
 export * from 'lucide-react';
+import * as react from 'react';
+import { SVGProps } from 'react';
+
+/**
+ * Brand marks lucide-react doesn't ship. Paths are the Figma "✅Project" source-ref
+ * icons, drawn in currentColor at 12px; pass width/height to resize.
+ */
+declare function GitHubLogo(props: SVGProps<SVGSVGElement>): react.JSX.Element;
+declare function FigmaLogo(props: SVGProps<SVGSVGElement>): react.JSX.Element;
+
+export { FigmaLogo, GitHubLogo };

package/dist/icons.js

@@ -1,2 +1,30 @@
 // src/icons.ts
 export * from "lucide-react";
+
+// src/brand-icons.tsx
+import { jsx } from "react/jsx-runtime";
+function GitHubLogo(props) {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M4.49969 11.0004V9.00024C4.46469 8.69022 4.48969 8.37519 4.57469 8.07517C4.6597 7.77514 4.80471 7.49512 4.99972 7.2501C3.49964 7.2501 1.99955 6.25002 1.99955 4.49988C1.95879 3.87622 2.1355 3.25772 2.49958 2.74974C2.34957 2.17469 2.34957 1.57465 2.49958 0.9996C2.49958 0.9996 2.99961 0.9996 3.99966 1.74966C5.31974 1.49964 6.67981 1.49964 7.99989 1.74966C8.99994 0.9996 9.49997 0.9996 9.49997 0.9996C9.63998 1.57465 9.63998 2.17469 9.49997 2.74974C9.86499 3.25978 10.04 3.87483 10 4.49988C10 6.25002 8.49991 7.2501 6.99983 7.2501C7.38982 7.7452 7.56942 8.37383 7.49986 9.00024V11.0004M4.49969 9.00024C2.24457 10.0003 1.99966 8.00016 0.9996 8.00016",
+      stroke: "currentColor",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+function FigmaLogo(props) {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M6.37508 7.6865C6.72146 7.96433 7.15046 8.11895 7.59444 8.12599C8.03841 8.13303 8.4721 7.99208 8.82712 7.72538C9.18213 7.45868 9.43827 7.08139 9.55514 6.65301C9.67201 6.22463 9.64296 5.76954 9.47258 5.3595C9.33009 5.01515 9.09422 4.71746 8.79158 4.5C9.04964 4.31482 9.25989 4.07085 9.40492 3.78827C9.54995 3.50569 9.62559 3.19263 9.62558 2.875C9.62558 2.34457 9.41486 1.83586 9.03979 1.46079C8.66472 1.08571 8.15601 0.875 7.62558 0.875H4.37558C3.95215 0.874878 3.53962 1.00914 3.19737 1.25846C2.85513 1.50778 2.60085 1.85928 2.47115 2.26235C2.34144 2.66542 2.34301 3.09926 2.47562 3.50138C2.60823 3.9035 2.86505 4.25316 3.20908 4.5C2.951 4.68517 2.74074 4.92914 2.5957 5.21172C2.45065 5.4943 2.375 5.80737 2.375 6.125C2.375 6.44263 2.45065 6.7557 2.5957 7.03828C2.74074 7.32086 2.951 7.56483 3.20908 7.75C2.93065 7.94979 2.70822 8.21778 2.56314 8.52825C2.41806 8.83872 2.35519 9.18126 2.38057 9.52302C2.40594 9.86478 2.5187 10.1943 2.70804 10.4799C2.89738 10.7656 3.15693 10.9978 3.46182 11.1543C3.7667 11.3107 4.10668 11.3863 4.44914 11.3736C4.7916 11.3609 5.12506 11.2604 5.41752 11.0818C5.70999 10.9032 5.95165 10.6524 6.11932 10.3535C6.287 10.0546 6.37507 9.7177 6.37508 9.375V7.6865ZM4.37508 1.625C4.04356 1.625 3.72561 1.7567 3.49119 1.99112C3.25677 2.22554 3.12508 2.54348 3.12508 2.875C3.12508 3.20652 3.25677 3.52446 3.49119 3.75888C3.72561 3.9933 4.04356 4.125 4.37508 4.125H5.62508V1.625H4.37508ZM5.62508 8.125H4.37508C4.12785 8.125 3.88618 8.19831 3.68061 8.33566C3.47505 8.47301 3.31484 8.66824 3.22023 8.89665C3.12562 9.12505 3.10086 9.37639 3.1491 9.61886C3.19733 9.86134 3.31638 10.0841 3.49119 10.2589C3.66601 10.4337 3.88874 10.5528 4.13121 10.601C4.37369 10.6492 4.62502 10.6245 4.85343 10.5298C5.08184 10.4352 5.27706 10.275 5.41441 10.0695C5.55177 9.8639 5.62508 9.62223 5.62508 9.375V8.125ZM4.37508 4.875C4.04356 4.875 3.72561 5.0067 3.49119 5.24112C3.25677 5.47554 3.12508 5.79348 3.12508 6.125C3.12508 6.45652 3.25677 6.77446 3.49119 7.00888C3.72561 7.2433 4.04356 7.375 4.37508 7.375H5.62508V4.875H4.37508ZM6.37508 6.125C6.37508 6.45659 6.5068 6.77459 6.74127 7.00906C6.97574 7.24353 7.29374 7.37525 7.62533 7.37525C7.95691 7.37525 8.27492 7.24353 8.50939 7.00906C8.74386 6.77459 8.87558 6.45659 8.87558 6.125C8.87558 5.79341 8.74386 5.47541 8.50939 5.24094C8.27492 5.00647 7.95691 4.87475 7.62533 4.87475C7.29374 4.87475 6.97574 5.00647 6.74127 5.24094C6.5068 5.47541 6.37508 5.79341 6.37508 6.125ZM7.62508 4.125C7.9566 4.125 8.27454 3.9933 8.50896 3.75888C8.74338 3.52446 8.87508 3.20652 8.87508 2.875C8.87508 2.54348 8.74338 2.22554 8.50896 1.99112C8.27454 1.7567 7.9566 1.625 7.62508 1.625H6.37508V4.125H7.62508Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+export {
+  FigmaLogo,
+  GitHubLogo
+};

package/dist/index.cjs

@@ -21,15 +21,27 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AppNav: () => AppNav,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
   Button: () => Button,
   DiffPropertyList: () => DiffPropertyList,
   DiffSection: () => DiffSection,
+  EmptyState: () => EmptyState,
   MismatchCard: () => MismatchCard,
   Modal: () => Modal,
+  MultiSelect: () => MultiSelect,
+  Pagination: () => Pagination,
+  SearchInput: () => SearchInput,
+  SectionHeader: () => SectionHeader,
   SegmentedControl: () => SegmentedControl,
   Select: () => Select,
   SettingsSection: () => SettingsSection,
+  Skeleton: () => Skeleton,
+  SkeletonGroup: () => SkeletonGroup,
+  Split: () => Split,
+  StackedCardsIllustration: () => StackedCardsIllustration,
   TabNav: () => TabNav,
+  Tag: () => Tag,
   Toggle: () => Toggle,
   breakpoints: () => breakpoints
 });
@@ -867,18 +879,403 @@ var breakpoints = {
   /** Tablets, narrow windows. */
   lg: 900
 };
+
+// src/components/Avatar/Avatar.tsx
+var import_react9 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function initialsFor(name) {
+  const words = name.trim().split(/[\s._@-]+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+  return (words[0][0] + words[1][0]).toUpperCase();
+}
+function Avatar({ name, src, size = "medium", className, ...rest }) {
+  const [failedSrc, setFailedSrc] = (0, import_react9.useState)(null);
+  const showImage = !!src && src !== failedSrc;
+  const classes = ["fds-avatar", `fds-avatar--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: classes, role: "img", "aria-label": name, ...rest, children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { className: "fds-avatar__img", src, alt: "", onError: () => setFailedSrc(src) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": "true", children: initialsFor(name) }) });
+}
+
+// src/components/SectionHeader/SectionHeader.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function SectionHeader({
+  title,
+  description,
+  as: Heading = "h2",
+  titleId,
+  className,
+  ...rest
+}) {
+  const classes = ["fds-section-header", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: classes, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Heading, { id: titleId, className: "fds-section-header__title", children: title }),
+    description != null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "fds-section-header__description", children: description })
+  ] });
+}
+
+// src/components/Split/Split.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Split({
+  aside,
+  children,
+  asideWidth = "280px",
+  sticky = false,
+  collapseBelow = "lg",
+  className,
+  style,
+  ...rest
+}) {
+  const classes = [
+    "fds-split",
+    `fds-split--collapse-${collapseBelow}`,
+    sticky && "fds-split--sticky",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: classes,
+      style: { "--fds-split-aside": asideWidth, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fds-split__aside", children: aside }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fds-split__main", children })
+      ]
+    }
+  );
+}
+
+// src/components/Badge/Badge.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Badge({ tone = "neutral", icon, className, children, ...rest }) {
+  const classes = ["fds-badge", `fds-badge--${tone}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: classes, ...rest, children: [
+    icon != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "fds-badge__icon", "aria-hidden": "true", children: icon }),
+    children
+  ] });
+}
+
+// src/components/Tag/Tag.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function Tag({ dot, className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: ["fds-tag", className].filter(Boolean).join(" "), ...rest, children: [
+    dot && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: `fds-dot fds-dot--${dot}`, "aria-hidden": "true" }),
+    children
+  ] });
+}
+
+// src/components/MultiSelect/MultiSelect.tsx
+var import_react10 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function ChevronIcon2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsx)("path", { d: "M6 8l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function CheckIcon2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { viewBox: "0 0 12 12", width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M10 3L4.5 8.5 2 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function MultiSelect({
+  label,
+  options,
+  value,
+  onChange,
+  disabled = false,
+  selectAllLabel = "Select all",
+  clearLabel = "Clear",
+  id,
+  className
+}) {
+  const genId = (0, import_react10.useId)();
+  const triggerId = id ?? genId;
+  const listId = `${genId}-list`;
+  const rootRef = (0, import_react10.useRef)(null);
+  const triggerRef = (0, import_react10.useRef)(null);
+  const listRef = (0, import_react10.useRef)(null);
+  const [open, setOpen] = (0, import_react10.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react10.useState)(0);
+  const selected = new Set(value);
+  const enabled = options.filter((o) => !o.disabled);
+  (0, import_react10.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 close = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  const toggle = (o) => {
+    if (!o || o.disabled) return;
+    const next = selected.has(o.value) ? value.filter((v) => v !== o.value) : options.filter((x) => x.value === o.value || selected.has(x.value)).map((x) => x.value);
+    onChange(next);
+  };
+  const onTriggerKeyDown = (e) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setActiveIndex(0);
+      setOpen(true);
+    }
+  };
+  const onListKeyDown = (e) => {
+    const last = options.length - 1;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => i >= last ? 0 : i + 1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => i <= 0 ? last : i - 1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setActiveIndex(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setActiveIndex(last);
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggle(options[activeIndex]);
+    } else if (e.key === "Escape" || e.key === "Tab") {
+      if (e.key === "Escape") e.preventDefault();
+      close();
+    }
+  };
+  const triggerClasses = ["fds-multiselect__trigger", open ? "fds-multiselect__trigger--open" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ref: rootRef, className: ["fds-multiselect", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "button",
+      {
+        type: "button",
+        id: triggerId,
+        ref: triggerRef,
+        className: triggerClasses,
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? listId : void 0,
+        onClick: () => setOpen((o) => !o),
+        onKeyDown: onTriggerKeyDown,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fds-multiselect__label", children: label }),
+          value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "fds-multiselect__count", "aria-label": `${value.length} of ${options.length} selected`, children: [
+            value.length,
+            "/",
+            options.length
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `fds-multiselect__chevron${open ? " fds-multiselect__chevron--open" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronIcon2, {}) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "fds-multiselect__popover", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "div",
+        {
+          ref: listRef,
+          id: listId,
+          role: "listbox",
+          "aria-multiselectable": "true",
+          "aria-label": label,
+          tabIndex: 0,
+          className: "fds-multiselect__list",
+          "aria-activedescendant": `${listId}-opt-${activeIndex}`,
+          onKeyDown: onListKeyDown,
+          children: options.map((o, i) => {
+            const checked = selected.has(o.value);
+            return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              "div",
+              {
+                id: `${listId}-opt-${i}`,
+                role: "option",
+                "aria-selected": checked,
+                "aria-disabled": o.disabled || void 0,
+                className: [
+                  "fds-multiselect__option",
+                  i === activeIndex ? "fds-multiselect__option--active" : "",
+                  o.disabled ? "fds-multiselect__option--disabled" : ""
+                ].filter(Boolean).join(" "),
+                onMouseEnter: () => setActiveIndex(i),
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => toggle(o),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `fds-multiselect__box${checked ? " fds-multiselect__box--checked" : ""}`, "aria-hidden": "true", children: checked && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CheckIcon2, {}) }),
+                  o.dot && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: `fds-dot fds-dot--${o.dot}`, "aria-hidden": "true" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fds-multiselect__optLabel", children: o.label }),
+                  o.count != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "fds-multiselect__optCount", children: o.count })
+                ]
+              },
+              o.value
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "fds-multiselect__footer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange(enabled.map((o) => o.value)), children: selectAllLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { type: "button", className: "fds-multiselect__action", onClick: () => onChange([]), children: clearLabel })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/SearchInput/SearchInput.tsx
+var import_react11 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var SearchInput = (0, import_react11.forwardRef)(function SearchInput2({ shortcut, containerClassName, className, value, ...rest }, ref) {
+  const empty = value === void 0 || value === "";
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: ["fds-search", containerClassName].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { className: "fds-search__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("input", { ref, type: "search", value, className: ["fds-search__input", className].filter(Boolean).join(" "), ...rest }),
+    shortcut && empty && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("kbd", { className: "fds-search__kbd", "aria-hidden": "true", children: shortcut })
+  ] });
+});
+
+// src/components/Pagination/Pagination.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function pageItems(page, pageCount) {
+  if (pageCount <= 7) return Array.from({ length: pageCount }, (_, i) => i + 1);
+  const start = Math.max(2, Math.min(page - 1, pageCount - 4));
+  const end = Math.min(pageCount - 1, Math.max(page + 1, 5));
+  const items = [1];
+  if (start > 2) items.push(null);
+  for (let p = start; p <= end; p++) items.push(p);
+  if (end < pageCount - 1) items.push(null);
+  items.push(pageCount);
+  return items;
+}
+function Arrow2({ dir }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: dir === "prev" ? "M12 15l-5-5 5-5" : "M8 5l5 5-5 5", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Pagination({ page, pageCount, onPageChange, total, pageSize, variant = "full", className }) {
+  if (pageCount <= 1) return null;
+  const go = (p) => {
+    if (p >= 1 && p <= pageCount && p !== page) onPageChange(p);
+  };
+  const showRange = variant === "full" && total != null && pageSize != null;
+  const from = (page - 1) * (pageSize ?? 0) + 1;
+  const to = Math.min(page * (pageSize ?? 0), total ?? 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("nav", { className: ["fds-pagination", `fds-pagination--${variant}`, className].filter(Boolean).join(" "), "aria-label": "Pagination", children: [
+    showRange && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("p", { className: "fds-pagination__range", children: [
+      "Showing ",
+      from,
+      "\u2013",
+      to,
+      " of ",
+      total
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "fds-pagination__controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "fds-pagination__arrow", onClick: () => go(page - 1), disabled: page <= 1, "aria-label": "Previous page", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Arrow2, { dir: "prev" }) }),
+      variant === "compact" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "fds-pagination__status", "aria-live": "polite", children: [
+        "Page ",
+        page,
+        " of ",
+        pageCount
+      ] }) : pageItems(page, pageCount).map(
+        (p, i) => p === null ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "fds-pagination__gap", "aria-hidden": "true", children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "button",
+          {
+            type: "button",
+            className: `fds-pagination__page${p === page ? " fds-pagination__page--current" : ""}`,
+            "aria-current": p === page ? "page" : void 0,
+            "aria-label": `Page ${p}`,
+            onClick: () => go(p),
+            children: p
+          },
+          p
+        )
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "fds-pagination__arrow", onClick: () => go(page + 1), disabled: page >= pageCount, "aria-label": "Next page", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Arrow2, { dir: "next" }) })
+    ] })
+  ] });
+}
+
+// src/components/EmptyState/EmptyState.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function EmptyState({ illustration, title, description, action, footer, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: ["fds-empty", className].filter(Boolean).join(" "), ...rest, children: [
+    illustration != null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fds-empty__illustration", children: illustration }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fds-empty__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "fds-empty__title", children: title }),
+      description != null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "fds-empty__description", children: description })
+    ] }),
+    (action != null || footer != null) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fds-empty__actions", children: [
+      action,
+      footer != null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fds-empty__footer", children: footer })
+    ] })
+  ] });
+}
+function StackedCardsIllustration({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: ["fds-stacked-cards", className].filter(Boolean).join(" "), "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--back" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fds-stacked-cards__card fds-stacked-cards__card--front", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "fds-stacked-cards__lines", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", {})
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", className: "fds-stacked-cards__status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "0.75", y: "0.75", width: "16.5", height: "16.5", rx: "8.25", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "9", cy: "9", r: "3", className: "fds-stacked-cards__statusDot" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "fds-stacked-cards__badge", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("circle", { cx: "11", cy: "11", r: "8", stroke: "currentColor", strokeWidth: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "m21 21-4.3-4.3", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+    ] }) })
+  ] });
+}
+
+// src/components/Skeleton/Skeleton.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var px = (v) => typeof v === "number" ? `${v}px` : v;
+function Skeleton({ shape = "rect", width, height, lines = 1, className, style, ...rest }) {
+  const classes = ["fds-skeleton", `fds-skeleton--${shape}`, className].filter(Boolean).join(" ");
+  if (shape === "text" && lines > 1) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "fds-skeleton-lines", style: { width: px(width) }, "aria-hidden": "true", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "span",
+      {
+        className: classes,
+        style: { height: px(height), width: i === lines - 1 ? "60%" : void 0, ...style },
+        ...rest
+      },
+      i
+    )) });
+  }
+  const size = shape === "circle" ? { width: px(width ?? height ?? 16), height: px(height ?? width ?? 16) } : { width: px(width), height: px(height) };
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: classes, style: { ...size, ...style }, "aria-hidden": "true", ...rest });
+}
+function SkeletonGroup({ label = "Loading", className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { role: "status", "aria-busy": "true", "aria-label": label, className, ...rest, children });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppNav,
+  Avatar,
+  Badge,
   Button,
   DiffPropertyList,
   DiffSection,
+  EmptyState,
   MismatchCard,
   Modal,
+  MultiSelect,
+  Pagination,
+  SearchInput,
+  SectionHeader,
   SegmentedControl,
   Select,
   SettingsSection,
+  Skeleton,
+  SkeletonGroup,
+  Split,
+  StackedCardsIllustration,
   TabNav,
+  Tag,
   Toggle,
   breakpoints
 });