@usefidel/design-system 0.25.1 → 0.26.0

package/dist/fidel.manifest.json

@@ -10,6 +10,6 @@
     "webapp.css"
   ],
   "storybookUrl": null,
-  "packageVersion": "0.25.1",
-  "resolvedSha": "2a60ecf8472c4876519b50b31956e94901b4a5ab"
+  "packageVersion": "0.26.0",
+  "resolvedSha": "e6bd155b42b9ee54a33f8bcc559834e5cb8c77d1"
 }

package/dist/index.cjs

@@ -32,9 +32,11 @@ __export(index_exports, {
   Callout: () => Callout,
   Card: () => Card,
   Checkbox: () => Checkbox,
+  Checklist: () => Checklist,
   DiffPropertyList: () => DiffPropertyList,
   DiffSection: () => DiffSection,
   Divider: () => Divider,
+  Drawer: () => Drawer,
   EmptyState: () => EmptyState,
   IconButton: () => IconButton,
   Input: () => Input,
@@ -43,11 +45,16 @@ __export(index_exports, {
   MismatchCard: () => MismatchCard,
   Modal: () => Modal,
   MultiSelect: () => MultiSelect,
+  NumberedSteps: () => NumberedSteps,
+  OptionList: () => OptionList,
+  OptionRow: () => OptionRow,
   PageHeader: () => PageHeader,
+  PageSkeleton: () => PageSkeleton,
   Pagination: () => Pagination,
   PricingCard: () => PricingCard,
   Radio: () => Radio,
   RadioCard: () => RadioCard,
+  ResourceCard: () => ResourceCard,
   SearchInput: () => SearchInput,
   SectionHeader: () => SectionHeader,
   SegmentedControl: () => SegmentedControl,
@@ -63,6 +70,7 @@ __export(index_exports, {
   Stat: () => Stat,
   StatusDot: () => StatusDot,
   StepList: () => StepList,
+  Stepper: () => Stepper,
   Swatch: () => Swatch,
   TabNav: () => TabNav,
   Table: () => Table,
@@ -1022,12 +1030,23 @@ function Badge({ tone = "neutral", icon, className, children, ...rest }) {
 }
 
 // src/components/Tag/Tag.tsx
+var import_lucide_react = require("lucide-react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-function Tag({ dot, icon, className, children, ...rest }) {
+function Tag({ dot, icon, onRemove, removeLabel, 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
+    children,
+    onRemove && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "fds-tag__remove",
+        "aria-label": `Remove ${removeLabel ?? (typeof children === "string" ? children : "")}`.trim(),
+        onClick: onRemove,
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react.X, { "aria-hidden": "true" })
+      }
+    )
   ] });
 }
 
@@ -1700,7 +1719,7 @@ function IconButton({
 
 // src/components/Menu/Menu.tsx
 var import_react17 = require("react");
-var import_lucide_react = require("lucide-react");
+var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var isItem = (e) => !("type" in e);
 function searchText(it) {
@@ -1856,7 +1875,7 @@ function Menu({
         wired,
         open && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: listClasses, onKeyDown: onListKeyDown, children: [
           search && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "fds-menu__search", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react.Search, { "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react2.Search, { "aria-hidden": "true" }),
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "input",
               {
@@ -1912,7 +1931,7 @@ function Menu({
                           e.description != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fds-menu__description", children: e.description })
                         ] }),
                         e.trailing != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "fds-menu__trailing", children: e.trailing }),
-                        e.selected && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react.Check, { className: "fds-menu__check", "aria-hidden": "true" })
+                        e.selected && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react2.Check, { className: "fds-menu__check", "aria-hidden": "true" })
                       ]
                     },
                     i
@@ -2101,12 +2120,12 @@ function Tooltip({ content, children, side = "right", delay = 400, disabled = fa
 }
 
 // src/components/BrandButton/BrandButton.tsx
-var import_lucide_react2 = require("lucide-react");
+var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function BrandButton({ mark, hoverIcon, type = "button", className, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("button", { type, className: ["fds-brand-button", className].filter(Boolean).join(" "), ...rest, children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "fds-brand-button__mark", "aria-hidden": "true", children: mark }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "fds-brand-button__hover", "aria-hidden": "true", children: hoverIcon ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react2.PanelLeftOpen, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "fds-brand-button__hover", "aria-hidden": "true", children: hoverIcon ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react3.PanelLeftOpen, {}) })
   ] });
 }
 
@@ -2146,7 +2165,7 @@ function SidebarItem({
 
 // src/components/Sidebar/Sidebar.tsx
 var import_react20 = require("react");
-var import_lucide_react3 = require("lucide-react");
+var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function SidebarRoot({
   collapsed: controlled,
@@ -2215,7 +2234,7 @@ function SidebarBrand({
       {
         variant: "ghost",
         size: "small",
-        icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react3.PanelLeftClose, {}),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react4.PanelLeftClose, {}),
         "aria-label": collapseLabel,
         "aria-keyshortcuts": "Meta+Backslash Control+Backslash",
         onClick: () => sidebar?.setCollapsed(true)
@@ -2273,7 +2292,7 @@ var Sidebar = Object.assign(SidebarRoot, {
 
 // src/components/WorkspaceSwitcher/WorkspaceSwitcher.tsx
 var import_react21 = require("react");
-var import_lucide_react4 = require("lucide-react");
+var import_lucide_react5 = require("lucide-react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function WorkspaceAvatar({ name }) {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fds-workspace-avatar", "aria-hidden": "true", children: name.trim().charAt(0).toUpperCase() || "?" });
@@ -2294,7 +2313,7 @@ var WorkspaceSwitcher = (0, import_react21.forwardRef)(function WorkspaceSwitche
         /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "fds-workspace-switcher__text", "aria-hidden": iconOnly || void 0, children: [
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fds-workspace-switcher__name", children: name }),
           plan && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "fds-workspace-switcher__plan", children: plan }),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react4.ChevronDown, { className: "fds-workspace-switcher__chevron", "aria-hidden": "true" })
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react5.ChevronDown, { className: "fds-workspace-switcher__chevron", "aria-hidden": "true" })
         ] })
       ]
     }
@@ -2352,7 +2371,7 @@ function PageHeader({ title, description, breadcrumb, actions, className, childr
 
 // src/components/Toast/Toast.tsx
 var import_react23 = require("react");
-var import_lucide_react5 = require("lucide-react");
+var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
 function ToastRegion({ className, children, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: ["fds-toast-region", className].filter(Boolean).join(" "), "aria-live": "polite", ...rest, children });
@@ -2366,9 +2385,254 @@ function Toast({ children, action, onDismiss, duration, className, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { role: "status", className: ["fds-toast", className].filter(Boolean).join(" "), ...rest, children: [
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "fds-toast__message", children }),
     action && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", className: "fds-toast__action", onClick: action.onClick, children: action.label }),
-    onDismiss && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", className: "fds-toast__close", "aria-label": "Dismiss", onClick: onDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react5.X, { "aria-hidden": "true" }) })
+    onDismiss && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("button", { type: "button", className: "fds-toast__close", "aria-label": "Dismiss", onClick: onDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react6.X, { "aria-hidden": "true" }) })
+  ] });
+}
+
+// src/components/Stepper/Stepper.tsx
+var import_react24 = require("react");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function StepperStep(_) {
+  return null;
+}
+function StepperRoot({ className, children, ...rest }) {
+  const steps = import_react24.Children.toArray(children).filter(import_react24.isValidElement);
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("ol", { className: ["fds-stepper", className].filter(Boolean).join(" "), ...rest, children: steps.map((step, i) => {
+    const { status, children: label } = step.props;
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      "li",
+      {
+        className: `fds-stepper__step fds-stepper__step--${status}`,
+        "aria-current": status === "current" ? "step" : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "fds-stepper__marker", "aria-hidden": "true", children: status === "done" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react7.Check, {}) : i + 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "fds-stepper__label", children: label })
+        ]
+      },
+      i
+    );
+  }) });
+}
+var Stepper = Object.assign(StepperRoot, { Step: StepperStep });
+
+// src/components/NumberedSteps/NumberedSteps.tsx
+var import_react25 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+function NumberedStepsRoot({ className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("ol", { className: ["fds-numbered-steps", className].filter(Boolean).join(" "), ...rest, children: import_react25.Children.toArray(children) });
+}
+function NumberedStepsItem({ className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("li", { className: ["fds-numbered-steps__item", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "fds-numbered-steps__marker", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "fds-numbered-steps__body", children })
+  ] });
+}
+var NumberedSteps = Object.assign(NumberedStepsRoot, { Item: NumberedStepsItem });
+
+// src/components/OptionList/OptionList.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+function OptionListRoot({ className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: ["fds-option-list", className].filter(Boolean).join(" "), ...rest, children });
+}
+function OptionListLabel({ className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: ["fds-option-list__label", className].filter(Boolean).join(" "), ...rest, children });
+}
+function OptionRow({ control = "radio", title, description, meta, className, checked, disabled, ...rest }) {
+  const Control = control === "checkbox" ? Checkbox : Radio;
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    "div",
+    {
+      className: ["fds-option-row", checked ? "fds-option-row--checked" : "", className].filter(Boolean).join(" "),
+      "data-disabled": disabled ? "" : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Control, { label: title, description, checked, disabled, ...rest }),
+        meta != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "fds-option-row__meta", children: meta })
+      ]
+    }
+  );
+}
+var OptionList = Object.assign(OptionListRoot, { Label: OptionListLabel, Row: OptionRow });
+
+// src/components/Checklist/Checklist.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
+function ChecklistRoot({ title, className, children, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("section", { className: ["fds-checklist", className].filter(Boolean).join(" "), ...rest, children: [
+    title != null && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h3", { className: "fds-checklist__title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("ul", { className: "fds-checklist__items", children })
+  ] });
+}
+function ChecklistItem({ done, label, value }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("li", { className: ["fds-checklist__item", done ? "fds-checklist__item--done" : ""].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fds-checklist__mark", "aria-hidden": "true", children: done && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react8.Check, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: "fds-checklist__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fds-checklist__label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "fds-checklist__value", children: value })
+    ] })
+  ] });
+}
+var Checklist = Object.assign(ChecklistRoot, { Item: ChecklistItem });
+
+// src/components/Drawer/Drawer.tsx
+var import_react26 = require("react");
+var import_react_dom3 = require("react-dom");
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var FOCUSABLE2 = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Drawer({ open, onClose, title, description, children, footer, dismissible = true }) {
+  const titleId = (0, import_react26.useId)();
+  const descriptionId = (0, import_react26.useId)();
+  const panelRef = (0, import_react26.useRef)(null);
+  const onCloseRef = (0, import_react26.useRef)(onClose);
+  onCloseRef.current = onClose;
+  const dismissibleRef = (0, import_react26.useRef)(dismissible);
+  dismissibleRef.current = dismissible;
+  (0, import_react26.useEffect)(() => {
+    if (!open) return;
+    const panel = panelRef.current;
+    const previouslyFocused = document.activeElement;
+    (panel?.querySelector("[data-autofocus]") ?? panel?.querySelector(`.fds-drawer__body ${FOCUSABLE2}`) ?? panel)?.focus();
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (e) => {
+      if (e.key === "Escape" && dismissibleRef.current) {
+        e.preventDefault();
+        onCloseRef.current();
+        return;
+      }
+      if (e.key === "Tab" && panel) {
+        const focusable = Array.from(panel.querySelectorAll(FOCUSABLE2));
+        if (focusable.length === 0) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && (document.activeElement === first || document.activeElement === panel)) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("keydown", onKey);
+      document.body.style.overflow = previousOverflow;
+      previouslyFocused?.focus?.();
+    };
+  }, [open]);
+  if (!open || typeof document === "undefined") return null;
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      "div",
+      {
+        className: "fds-drawer__scrim",
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget && dismissible) onClose();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+          "div",
+          {
+            ref: panelRef,
+            className: "fds-drawer",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": description != null ? descriptionId : void 0,
+            tabIndex: -1,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("header", { className: "fds-drawer__header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "fds-drawer__heading", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("h2", { id: titleId, className: "fds-drawer__title", children: title }),
+                  description != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { id: descriptionId, className: "fds-drawer__description", children: description })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("button", { type: "button", className: "fds-drawer__close", onClick: onClose, disabled: !dismissible, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react9.X, { "aria-hidden": "true" }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "fds-drawer__body", children }),
+              footer != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("footer", { className: "fds-drawer__footer", children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/ResourceCard/ResourceCard.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+function ResourceCard({ icon, title, badge, meta, stats, action, variant = "default", className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: ["fds-resource-card", `fds-resource-card--${variant}`, className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "fds-resource-card__main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "fds-resource-card__title", children: [
+        icon != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "fds-resource-card__icon", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: title }),
+        badge
+      ] }),
+      meta?.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "fds-resource-card__meta", children: line }, i))
+    ] }),
+    stats && stats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("dl", { className: "fds-resource-card__stats", children: stats.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "fds-resource-card__stat", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("dt", { children: s.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("dd", { children: s.value })
+    ] }, i)) }),
+    action != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "fds-resource-card__action", children: action })
   ] });
 }
+
+// src/components/PageSkeleton/PageSkeleton.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+function PageSkeletonRoot({ label = "Loading", children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(SkeletonGroup, { label, className: "fds-page-skeleton", children });
+}
+function PageSkeletonHeader({ title, description, breadcrumb, action, tabs = 0 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    PageHeader,
+    {
+      breadcrumb: breadcrumb ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Skeleton, { shape: "text", width: 140 }) : void 0,
+      title: title ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Skeleton, { width: 220, height: 28 }),
+      description: description === true ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Skeleton, { shape: "text", width: 320 }) : description || void 0,
+      actions: action ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Skeleton, { width: 128, height: 36 }) : void 0,
+      children: tabs > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "fds-page-skeleton__tabs", children: Array.from({ length: tabs }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Skeleton, { shape: "text", width: 80 }, i)) })
+    }
+  );
+}
+function PageSkeletonToolbar({ filters = 2 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "fds-page-skeleton__toolbar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Skeleton, { width: 280, height: 36 }),
+    Array.from({ length: filters }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Skeleton, { width: 140, height: 36 }, i))
+  ] });
+}
+function PageSkeletonTable({ rows = 5, columns = 5 }) {
+  const cells = (key, width) => Array.from({ length: columns }, (_, c) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Skeleton, { shape: "text", width: c === 0 ? "60%" : width }, `${key}-${c}`));
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "fds-page-skeleton__table", style: { ["--fds-page-skeleton-columns"]: columns }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "fds-page-skeleton__row fds-page-skeleton__row--head", children: cells("h", "40%") }),
+    Array.from({ length: rows }, (_, r) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "fds-page-skeleton__row", children: cells(`r${r}`, "50%") }, r))
+  ] });
+}
+function PageSkeletonCards({ count = 3, height = 120, columns = 3 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "fds-page-skeleton__cards", style: { ["--fds-page-skeleton-columns"]: columns }, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Skeleton, { height, className: "fds-page-skeleton__card" }, i)) });
+}
+function PageSkeletonForm({ fields = 3 }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "fds-page-skeleton__form", children: Array.from({ length: fields }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "fds-page-skeleton__field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Skeleton, { shape: "text", width: 120 }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Skeleton, { height: 36 })
+  ] }, i)) });
+}
+function PageSkeletonSplit({ children, aside }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "fds-page-skeleton__split", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "fds-page-skeleton__main", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "fds-page-skeleton__aside", children: aside })
+  ] });
+}
+var PageSkeleton = Object.assign(PageSkeletonRoot, {
+  Header: PageSkeletonHeader,
+  Toolbar: PageSkeletonToolbar,
+  Table: PageSkeletonTable,
+  Cards: PageSkeletonCards,
+  Form: PageSkeletonForm,
+  Split: PageSkeletonSplit
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -2383,9 +2647,11 @@ function Toast({ children, action, onDismiss, duration, className, ...rest }) {
   Callout,
   Card,
   Checkbox,
+  Checklist,
   DiffPropertyList,
   DiffSection,
   Divider,
+  Drawer,
   EmptyState,
   IconButton,
   Input,
@@ -2394,11 +2660,16 @@ function Toast({ children, action, onDismiss, duration, className, ...rest }) {
   MismatchCard,
   Modal,
   MultiSelect,
+  NumberedSteps,
+  OptionList,
+  OptionRow,
   PageHeader,
+  PageSkeleton,
   Pagination,
   PricingCard,
   Radio,
   RadioCard,
+  ResourceCard,
   SearchInput,
   SectionHeader,
   SegmentedControl,
@@ -2414,6 +2685,7 @@ function Toast({ children, action, onDismiss, duration, className, ...rest }) {
   Stat,
   StatusDot,
   StepList,
+  Stepper,
   Swatch,
   TabNav,
   Table,