@flamingo-stack/openframe-frontend-core 0.0.748 → 0.0.749

package/dist/{chunk-7Y3VMMJB.cjs → chunk-2J2OBP4N.cjs}

@@ -5,12 +5,12 @@ var _chunk4FWURR3Wcjs = require('./chunk-4FWURR3W.cjs');
 
 
 
-var _chunkZNUSYMH7cjs = require('./chunk-ZNUSYMH7.cjs');
+var _chunkWZX26ODJcjs = require('./chunk-WZX26ODJ.cjs');
 
 
 
 
-var _chunkBBTSJYTRcjs = require('./chunk-BBTSJYTR.cjs');
+var _chunkV3UJ6NDRcjs = require('./chunk-V3UJ6NDR.cjs');
 
 
 
@@ -25,18 +25,24 @@ var _chunkEWPR7662cjs = require('./chunk-EWPR7662.cjs');
 
 
 
-var _chunkYIRX6C7Vcjs = require('./chunk-YIRX6C7V.cjs');
+var _chunkXJ3J4UIScjs = require('./chunk-XJ3J4UIS.cjs');
 
 
-var _chunkP7KTAXXEcjs = require('./chunk-P7KTAXXE.cjs');
+var _chunkOFO75R2Ocjs = require('./chunk-OFO75R2O.cjs');
 
 
 var _chunkASMNNSUQcjs = require('./chunk-ASMNNSUQ.cjs');
 
 
+var _chunkUGCRLRCTcjs = require('./chunk-UGCRLRCT.cjs');
+
+
 var _chunkV45KLJQPcjs = require('./chunk-V45KLJQP.cjs');
 
 
+var _chunk2YXOD2KLcjs = require('./chunk-2YXOD2KL.cjs');
+
+
 var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
 
 // src/components/faq-accordion.tsx
@@ -57,7 +63,7 @@ function FaqAccordion({ items, defaultOpenIds = [] }) {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        id: _chunkBBTSJYTRcjs.faqItemAnchor.call(void 0, item.id),
+        id: _chunkV3UJ6NDRcjs.faqItemAnchor.call(void 0, item.id),
         className: "scroll-mt-24 transition-colors hover:bg-ods-bg-hover",
         children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -110,14 +116,14 @@ function FaqAccordion({ items, defaultOpenIds = [] }) {
 
 var PICK_ROOT_MARGIN = "600px";
 function faqAskCardShown(assistant) {
-  return _chunkZNUSYMH7cjs.assistantAvailable.call(void 0, assistant) && !!assistant.name;
+  return _chunkWZX26ODJcjs.assistantAvailable.call(void 0, assistant) && !!assistant.name;
 }
 function FaqAskCard({ topic, exclude, count, title, description, onOpen }) {
   const { ref, inView } = _chunkCSJO7ZGNcjs.useInView.call(void 0, { rootMargin: PICK_ROOT_MARGIN });
   const [reached, setReached] = _react.useState.call(void 0, false);
   if (inView && !reached) setReached(true);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkZNUSYMH7cjs.AssistantAskPrompts,
+    _chunkWZX26ODJcjs.AssistantAskPrompts,
     {
       variant: "card",
       topic,
@@ -170,7 +176,7 @@ function pageFaqProps(faq) {
 }
 function buildFaqsUrl(entityType, entityId, minResults, apiBaseUrl = "", topic) {
   const entityScoped = !!entityType && entityId !== void 0 && entityId !== null && entityId !== "";
-  return _chunkYIRX6C7Vcjs.buildSuggestionUrl.call(void 0, "/api/faqs", {
+  return _chunkXJ3J4UIScjs.buildSuggestionUrl.call(void 0, "/api/faqs", {
     apiBaseUrl,
     entityType,
     entityId,
@@ -191,7 +197,7 @@ function groupFaqsBySection(faqs) {
     }
     let group = byName.get(name);
     if (!group) {
-      group = { section: name, slug: _chunkBBTSJYTRcjs.faqSectionSlug.call(void 0, name), items: [] };
+      group = { section: name, slug: _chunkV3UJ6NDRcjs.faqSectionSlug.call(void 0, name), items: [] };
       byName.set(name, group);
     }
     group.items.push(item);
@@ -246,7 +252,7 @@ function GroupedFaqList({
   }, [slugKey]);
   const [hashTarget, setHashTarget] = _react.useState.call(void 0, null);
   _react.useEffect.call(void 0, () => {
-    const refresh = () => setHashTarget(_chunkBBTSJYTRcjs.parseFaqHash.call(void 0, window.location.hash));
+    const refresh = () => setHashTarget(_chunkV3UJ6NDRcjs.parseFaqHash.call(void 0, window.location.hash));
     refresh();
     window.addEventListener("hashchange", refresh);
     return () => window.removeEventListener("hashchange", refresh);
@@ -296,7 +302,7 @@ function GroupedFaqList({
   const questions = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-10", children: groups.map((group) => {
     const key = groupKey(group);
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { id: _nullishCoalesce(group.slug, () => ( void 0)), className: "scroll-mt-24 space-y-4", children: [
-      group.section && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CategoryHeading, { className: _chunkP7KTAXXEcjs.SECTION_HEADING_CLASS, children: group.section }),
+      group.section && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CategoryHeading, { className: _chunkOFO75R2Ocjs.SECTION_HEADING_CLASS, children: group.section }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         FaqAccordion,
         {
@@ -322,12 +328,14 @@ function GroupedFaqList({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "content-lg:col-start-1 content-lg:row-start-2", children: aside })
   ] });
 }
-function FaqSkeleton() {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "animate-pulse space-y-8", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-12 w-2/3 rounded bg-ods-border content-md:h-14" }),
+function FaqSkeleton({
+  region = true
+} = {}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUGCRLRCTcjs.LoadingRegion, { label: "Loading questions", announce: region, className: "space-y-8", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2YXOD2KLcjs.UnifiedSkeleton, { className: "h-12 w-2/3 rounded content-md:h-14" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full divide-y divide-ods-border overflow-hidden rounded-md border border-ods-border bg-transparent", children: Array.from({ length: 8 }).map((_, idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-6 px-6 py-4 content-md:gap-10", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-6 w-5/6 rounded bg-ods-border" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "size-6 rounded bg-ods-border" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2YXOD2KLcjs.UnifiedSkeleton, { className: "h-6 w-5/6 rounded" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2YXOD2KLcjs.UnifiedSkeleton, { className: "size-6 rounded" })
     ] }, idx)) })
   ] });
 }
@@ -355,11 +363,11 @@ function FaqSection({
     () => initialFaqs ? { faqs: initialFaqs } : void 0,
     [initialFaqs]
   );
-  const { data, dataUrl, isLoading, error } = _chunkYIRX6C7Vcjs.useSelfFetch.call(void 0, url, { initialData });
+  const { data, dataUrl, isLoading, error } = _chunkXJ3J4UIScjs.useSelfFetch.call(void 0, url, { initialData });
   const held = dataUrl === url ? _optionalChain([data, 'optionalAccess', _15 => _15.faqs]) : void 0;
   const faqs = _react.useMemo.call(void 0, () => _nullishCoalesce(held, () => ( [])), [held]);
   const groups = _react.useMemo.call(void 0, () => faqs.length > 0 ? groupFaqsBySection(faqs) : [], [faqs]);
-  const titleNode = heading === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: _chunkP7KTAXXEcjs.SECTION_HEADING_CLASS, children: DEFAULT_HEADING_TEXT }) : heading;
+  const titleNode = heading === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: _chunkOFO75R2Ocjs.SECTION_HEADING_CLASS, children: DEFAULT_HEADING_TEXT }) : heading;
   const headingNode = showTopic && topic ? (
     // The host's heading may arrive from a server component, still streaming: React cannot check such a
     // node when it sits in a list of siblings and warns about a missing key. So it is the ONLY child of its

package/dist/chunk-2YXOD2KL.cjs

@@ -0,0 +1,137 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }"use client";
+
+
+var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
+
+// src/components/ui/skeleton-surface.ts
+var SKELETON_SURFACE_CLASS = "animate-pulse motion-reduce:animate-none bg-ods-skeleton";
+
+// src/components/loading/unified-skeleton.tsx
+var _jsxruntime = require('react/jsx-runtime');
+function UnifiedSkeleton({
+  className,
+  variant = "default",
+  width,
+  height,
+  animate = true,
+  "aria-label": ariaLabel,
+  as: Tag = "div",
+  ...props
+}) {
+  const variantClasses = {
+    default: "rounded-md",
+    text: "rounded-sm",
+    circular: "rounded-full",
+    rectangular: "rounded-none"
+  };
+  const defaultHeights = {
+    default: "h-4",
+    text: "h-4",
+    circular: "h-12 w-12",
+    rectangular: "h-4"
+  };
+  const sizedByAspect = /(?:^|\s)aspect-/.test(_nullishCoalesce(className, () => ( "")));
+  const style = {
+    width,
+    height
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Tag,
+    {
+      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+        animate ? SKELETON_SURFACE_CLASS : "bg-ods-skeleton",
+        variantClasses[variant],
+        !height && !style.height && !sizedByAspect && defaultHeights[variant],
+        !width && !style.width && variant !== "circular" && "w-full",
+        className
+      ),
+      style,
+      ...ariaLabel ? { role: "status", "aria-label": ariaLabel } : { "aria-hidden": true },
+      ...props
+    }
+  );
+}
+var TextSkeleton = {
+  /**
+   * Large heading skeleton (h1, h2)
+   */
+  Heading: ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnifiedSkeleton, { variant: "text", className: _chunk3ATAYP36cjs.cn.call(void 0, "h-8 content-md:h-10 content-lg:h-12", className), ...props }),
+  /**
+   * Medium heading skeleton (h3, h4)
+   */
+  Subheading: ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnifiedSkeleton, { variant: "text", className: _chunk3ATAYP36cjs.cn.call(void 0, "h-6 content-md:h-7 content-lg:h-8", className), ...props }),
+  /**
+   * Body text skeleton
+   */
+  Body: ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnifiedSkeleton, { variant: "text", className: _chunk3ATAYP36cjs.cn.call(void 0, "h-4 content-md:h-5", className), ...props }),
+  /**
+   * Small text skeleton (captions, metadata)
+   */
+  Caption: ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnifiedSkeleton, { variant: "text", className: _chunk3ATAYP36cjs.cn.call(void 0, "h-3 content-md:h-4", className), ...props })
+};
+var InteractiveSkeleton = {
+  /**
+   * Button skeleton with proper touch targets
+   */
+  Button: ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    UnifiedSkeleton,
+    {
+      variant: "default",
+      className: _chunk3ATAYP36cjs.cn.call(void 0, "h-10 w-32 content-md:h-12 content-md:w-40", className),
+      ...props
+    }
+  ),
+  /**
+   * Input field skeleton
+   */
+  Input: ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnifiedSkeleton, { variant: "default", className: _chunk3ATAYP36cjs.cn.call(void 0, "h-10 w-full content-md:h-12", className), ...props }),
+  /**
+   * Filter chip skeleton
+   */
+  Chip: ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnifiedSkeleton, { variant: "default", className: _chunk3ATAYP36cjs.cn.call(void 0, "h-8 w-20 rounded-full", className), ...props })
+};
+var MediaSkeleton = {
+  /**
+   * Avatar/profile image skeleton
+   */
+  Avatar: ({
+    size = "md",
+    className,
+    ...props
+  }) => {
+    const sizeClasses = {
+      sm: "h-8 w-8",
+      md: "h-12 w-12",
+      lg: "h-16 w-16"
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnifiedSkeleton, { variant: "circular", className: _chunk3ATAYP36cjs.cn.call(void 0, sizeClasses[size], className), ...props });
+  },
+  /**
+   * Card image skeleton (1200×630 OG aspect — matches entity-cards default
+   * so loading state never causes a height shift when card data arrives)
+   */
+  CardImage: ({ className, ...props }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnifiedSkeleton, { variant: "default", className: _chunk3ATAYP36cjs.cn.call(void 0, "aspect-[1200/630] w-full", className), ...props }),
+  /**
+   * Icon skeleton
+   */
+  Icon: ({
+    size = "md",
+    className,
+    ...props
+  }) => {
+    const sizeClasses = {
+      sm: "h-4 w-4",
+      md: "h-6 w-6",
+      lg: "h-8 w-8"
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, UnifiedSkeleton, { variant: "default", className: _chunk3ATAYP36cjs.cn.call(void 0, sizeClasses[size], className), ...props });
+  }
+};
+
+
+
+
+
+
+
+exports.SKELETON_SURFACE_CLASS = SKELETON_SURFACE_CLASS; exports.UnifiedSkeleton = UnifiedSkeleton; exports.TextSkeleton = TextSkeleton; exports.InteractiveSkeleton = InteractiveSkeleton; exports.MediaSkeleton = MediaSkeleton;

package/dist/{chunk-BEC43GHL.cjs → chunk-34TWK3JE.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkBBM2ICOYcjs = require('./chunk-BBM2ICOY.cjs');
+var _chunk3TELPOVHcjs = require('./chunk-3TELPOVH.cjs');
 
 
 
@@ -179,11 +179,11 @@ function UnifiedPagination({
     }, 0);
   };
   if (totalPages <= 1) {
-    return reserveSpace ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className, "aria-hidden": "true", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pointer-events-none invisible", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBBM2ICOYcjs.Pagination, { currentPage: 1, totalPages: 1, onPageChange: () => {
+    return reserveSpace ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className, "aria-hidden": "true", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "pointer-events-none invisible", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3TELPOVHcjs.Pagination, { currentPage: 1, totalPages: 1, onPageChange: () => {
     } }) }) }) : null;
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkBBM2ICOYcjs.Pagination,
+    _chunk3TELPOVHcjs.Pagination,
     {
       currentPage,
       totalPages,

package/dist/{chunk-BBM2ICOY.cjs → chunk-3TELPOVH.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkP7KTAXXEcjs = require('./chunk-P7KTAXXE.cjs');
+var _chunkOFO75R2Ocjs = require('./chunk-OFO75R2O.cjs');
 
 
 var _chunk2QMBXGMQcjs = require('./chunk-2QMBXGMQ.cjs');
@@ -45,7 +45,7 @@ function PaginationControl({
     );
   }
   const handleClick = (event) => {
-    if (_chunkP7KTAXXEcjs.isModifierClick.call(void 0, event)) return;
+    if (_chunkOFO75R2Ocjs.isModifierClick.call(void 0, event)) return;
     event.preventDefault();
     onPageChange(page);
   };

package/dist/{chunk-G2ELX3DG.cjs → chunk-45YRDD7W.cjs}

@@ -6,7 +6,7 @@ var _chunk4FWURR3Wcjs = require('./chunk-4FWURR3W.cjs');
 
 
 
-var _chunkZNUSYMH7cjs = require('./chunk-ZNUSYMH7.cjs');
+var _chunkWZX26ODJcjs = require('./chunk-WZX26ODJ.cjs');
 
 
 var _chunkSXGDKNVEcjs = require('./chunk-SXGDKNVE.cjs');
@@ -48,7 +48,7 @@ var _chunk5OG5ZTNMcjs = require('./chunk-5OG5ZTNM.cjs');
 
 
 
-var _chunkP7KTAXXEcjs = require('./chunk-P7KTAXXE.cjs');
+var _chunkOFO75R2Ocjs = require('./chunk-OFO75R2O.cjs');
 
 
 var _chunkJHQNUWFMcjs = require('./chunk-JHQNUWFM.cjs');
@@ -63,6 +63,9 @@ var _chunk2QMBXGMQcjs = require('./chunk-2QMBXGMQ.cjs');
 var _chunkV45KLJQPcjs = require('./chunk-V45KLJQP.cjs');
 
 
+var _chunk2YXOD2KLcjs = require('./chunk-2YXOD2KL.cjs');
+
+
 var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
 
 // src/types/announcement.ts
@@ -162,31 +165,31 @@ CveLink.displayName = "CveLink";
 // src/components/platform/ShellTypeBadge.tsx
 
 var shellIconMap = {
-  [_chunkZNUSYMH7cjs.ShellTypeValues.POWERSHELL]: {
+  [_chunkWZX26ODJcjs.ShellTypeValues.POWERSHELL]: {
     icon: _chunkMCQY746Mcjs.PowershellLogoGreyIcon,
     props: { size: 16, className: "text-ods-text-secondary" }
   },
-  [_chunkZNUSYMH7cjs.ShellTypeValues.CMD]: {
+  [_chunkWZX26ODJcjs.ShellTypeValues.CMD]: {
     icon: _chunkUXUYT4WKcjs.CmdIcon,
     props: { size: 16, color: "var(--color-text-secondary)" }
   },
-  [_chunkZNUSYMH7cjs.ShellTypeValues.BASH]: {
+  [_chunkWZX26ODJcjs.ShellTypeValues.BASH]: {
     icon: _chunk5OG5ZTNMcjs.BashIcon,
     props: { size: 16, color: "var(--color-text-secondary)" }
   },
-  [_chunkZNUSYMH7cjs.ShellTypeValues.PYTHON]: {
+  [_chunkWZX26ODJcjs.ShellTypeValues.PYTHON]: {
     icon: _chunkBF77UKGDcjs.PythonLogoIcon,
     props: { size: 16, className: "text-ods-text-secondary" }
   },
-  [_chunkZNUSYMH7cjs.ShellTypeValues.NUSHELL]: {
+  [_chunkWZX26ODJcjs.ShellTypeValues.NUSHELL]: {
     icon: _chunkG37H4CBTcjs.NushellIcon,
     props: { size: 16, color: "var(--color-text-secondary)" }
   },
-  [_chunkZNUSYMH7cjs.ShellTypeValues.DENO]: {
+  [_chunkWZX26ODJcjs.ShellTypeValues.DENO]: {
     icon: _chunkHUL6SF5Acjs.DenoIcon,
     props: { size: 16, color: "var(--color-text-secondary)" }
   },
-  [_chunkZNUSYMH7cjs.ShellTypeValues.SHELL]: {
+  [_chunkWZX26ODJcjs.ShellTypeValues.SHELL]: {
     icon: _chunk6RMATQNNcjs.ShellIcon,
     props: { size: 16, color: "var(--color-text-secondary)" }
   }
@@ -197,7 +200,7 @@ var defaultIconConfig = {
 };
 var ShellTypeBadge = ({ shellType, className, iconClassName }) => {
   const normalizedType = _optionalChain([shellType, 'optionalAccess', _ => _.toUpperCase, 'call', _2 => _2()]);
-  const label = _chunkZNUSYMH7cjs.getShellLabel.call(void 0, normalizedType);
+  const label = _chunkWZX26ODJcjs.getShellLabel.call(void 0, normalizedType);
   const { icon: IconComponent, props: iconProps } = _nullishCoalesce(shellIconMap[normalizedType], () => ( defaultIconConfig));
   const defaultIconClassName = "className" in iconProps ? iconProps.className : void 0;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "flex items-center gap-1", className), children: [
@@ -213,7 +216,7 @@ function formatSupportedPlatforms(platforms) {
   if (!platforms || platforms.length === 0) {
     return "All Platforms";
   }
-  return platforms.map((platform) => _chunkZNUSYMH7cjs.getOSLabel.call(void 0, platform)).join(", ");
+  return platforms.map((platform) => _chunkWZX26ODJcjs.getOSLabel.call(void 0, platform)).join(", ");
 }
 function InfoCell({ label, value, avatar, className }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "flex min-w-0 items-center gap-2", className), children: [
@@ -233,7 +236,7 @@ var ScriptInfoSection = ({
   author,
   className
 }) => {
-  const shellLabel = _chunkZNUSYMH7cjs.getShellLabel.call(void 0, shellType);
+  const shellLabel = _chunkWZX26ODJcjs.getShellLabel.call(void 0, shellType);
   const platformsLabel = formatSupportedPlatforms(supportedPlatforms);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "overflow-hidden rounded-[6px] border border-ods-border bg-ods-card", className), children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border-b border-ods-border p-4", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-1", children: [
@@ -281,7 +284,7 @@ function OnboardingStepCard({
     onSkip();
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunkP7KTAXXEcjs.InteractiveCard,
+    _chunkOFO75R2Ocjs.InteractiveCard,
     {
       clickable: false,
       className: _chunk3ATAYP36cjs.cn.call(void 0, 
@@ -304,10 +307,10 @@ function OnboardingStepCard({
             className: "flex w-full shrink-0 items-center justify-start gap-2 md:w-auto md:justify-end",
             onClick: (e) => e.stopPropagation(),
             children: isCheckingCompletion ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[32px] w-[100px] animate-pulse rounded-[6px] bg-ods-border" }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[32px] w-[120px] animate-pulse rounded-[6px] bg-ods-border" })
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2YXOD2KLcjs.UnifiedSkeleton, { className: "h-[32px] w-[100px] rounded-[6px]" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2YXOD2KLcjs.UnifiedSkeleton, { className: "h-[32px] w-[120px] rounded-[6px]" })
             ] }) : isCompleted ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkP7KTAXXEcjs.StatusBadge, { text: "COMPLETED", variant: "card", colorScheme: "success" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOFO75R2Ocjs.StatusBadge, { text: "COMPLETED", variant: "card", colorScheme: "success" }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 _chunk2QMBXGMQcjs.Button,
                 {
@@ -318,7 +321,7 @@ function OnboardingStepCard({
                   children: step.completedText
                 }
               )
-            ] }) : isSkipped ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkP7KTAXXEcjs.StatusBadge, { text: "SKIPPED", variant: "card", colorScheme: "default" }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+            ] }) : isSkipped ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOFO75R2Ocjs.StatusBadge, { text: "SKIPPED", variant: "card", colorScheme: "default" }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "outline", onClick: handleSkip, children: "Skip Step" }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "accent", onClick: handleAction, disabled: isProcessing, leftIcon: step.actionIcon("black"), children: step.actionText })
             ] })
@@ -435,8 +438,8 @@ function OnboardingWalkthrough({
   const isAllComplete = allStepsComplete(steps);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "w-full space-y-4", className), children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-start justify-between gap-3 md:flex-row md:items-center md:gap-0", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: _chunkP7KTAXXEcjs.SECTION_HEADING_CLASS, children: _chunkP7KTAXXEcjs.accentSentenceMarks.call(void 0, title) }),
-      isLoadingCompletion ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-[48px] w-full animate-pulse rounded-[6px] bg-ods-border md:w-[160px]" }) : isAllComplete ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "accent", onClick: handleDismiss, className: "w-full md:w-auto", children: "Close Onboarding" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "outline", onClick: handleDismiss, className: "w-full md:w-auto", children: "Skip Onboarding" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: _chunkOFO75R2Ocjs.SECTION_HEADING_CLASS, children: _chunkOFO75R2Ocjs.accentSentenceMarks.call(void 0, title) }),
+      isLoadingCompletion ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2YXOD2KLcjs.UnifiedSkeleton, { className: "h-[48px] w-full rounded-[6px] md:w-[160px]" }) : isAllComplete ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "accent", onClick: handleDismiss, className: "w-full md:w-auto", children: "Close Onboarding" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "outline", onClick: handleDismiss, className: "w-full md:w-auto", children: "Skip Onboarding" })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, spacing), children: steps.map((step) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       OnboardingStepCard,