@flamingo-stack/openframe-frontend-core 0.0.387 → 0.0.388-snapshot.20260709030118

package/dist/components/index.js

@@ -4,7 +4,7 @@ import "../chunk-GZ4C3XW6.js";
 import {
   GROUP_PAGE_SIZE,
   RelatedContentSection
-} from "../chunk-N2LW5NHS.js";
+} from "../chunk-M6ODI2F5.js";
 import {
   DeliveryLists,
   DeliveryTable,
@@ -21,7 +21,7 @@ import {
   useLegalDocs,
   usePaginationLoading,
   useRoadmapVoting
-} from "../chunk-EULRZYQH.js";
+} from "../chunk-BJPQJNSC.js";
 import {
   AnnouncementBarSkeleton,
   ArticleLayoutSkeleton,
@@ -54,17 +54,17 @@ import {
   useDocNavigation,
   useDocumentTree,
   useScrollSpy
-} from "../chunk-3BPVTHOW.js";
+} from "../chunk-XGOX5UQ2.js";
 import {
   FileDownloadCard,
   GoogleSheetsViewer,
   PdfViewer
-} from "../chunk-MVY4ZKQR.js";
+} from "../chunk-4OLIDOLO.js";
 import {
   FaqAccordion,
   FaqDocumentPage,
   FaqSection
-} from "../chunk-3KA5L7LC.js";
+} from "../chunk-JSFHTIKA.js";
 import {
   DeliveryRow,
   DevCardRowContent,
@@ -75,11 +75,11 @@ import {
   EmptyState,
   UnifiedPagination,
   init_unified_pagination
-} from "../chunk-DU2X2MH2.js";
+} from "../chunk-LFLFQ422.js";
 import {
   ArticleAuthorByline,
   DetailPageSkeleton
-} from "../chunk-OX75ZFN6.js";
+} from "../chunk-44Q3IXZM.js";
 import {
   DocSearchBar,
   DocSearchResultRow,
@@ -87,7 +87,7 @@ import {
   mapDocSearchResults,
   resolveSearchResultAction,
   useDocSearch
-} from "../chunk-EHVRW3WB.js";
+} from "../chunk-NULFIYK2.js";
 import "../chunk-WWHPTP4B.js";
 import "../chunk-4XLJWX2N.js";
 import {
@@ -281,6 +281,7 @@ import {
   DEFAULT_CUSTOM_STATUS_COLOR,
   DEFAULT_DOCUMENT_TYPE_TO_TABLE_ID,
   DEFAULT_THEME,
+  DEFAULT_VIDEO_BITES_TITLE,
   DashboardInfoCard,
   DataRoomDocCard,
   DataRoomDocCardSkeleton,
@@ -546,8 +547,8 @@ import {
   QuickActionChipButton,
   QuickActionChipSkeleton,
   QuickActionMarquee,
-  RATIO_DISPLAY_GRID_CLASS,
   RATIO_GRID_CLASS,
+  RATIO_TO_CSS_ASPECT,
   ROW_HEIGHT_DESKTOP,
   ROW_HEIGHT_MOBILE,
   RadioGroup,
@@ -612,6 +613,7 @@ import {
   SoftwareSourceBadge,
   SourceActionButton,
   SquareAvatar,
+  SquareAvatar2,
   SsoAuthShell,
   SsoProviderButtons,
   StackedRowsPanel,
@@ -684,9 +686,11 @@ import {
   TwitterContainer,
   TwitterEmbedClient,
   UnarchiveChatModal,
+  UserDisplay,
   Video,
   VideoBiteCard,
   VideoBitesDisplay,
+  VideoBitesStrip,
   VideoClipsSection,
   VideoSourceSelector,
   ViewToggle,
@@ -806,11 +810,13 @@ import {
   resolveTicketStatus,
   safeHref,
   sanitizeTitleForChat,
+  sortBitesByCreatedAtDesc,
   statusBadgeVariants,
   stripChatAttachmentMarkdown,
   stripSameOriginToPath,
   tagVariants,
   tintOnDark,
+  toStripProfile,
   toggleVariants,
   transformEventToProgram,
   transformPodcastToProgram,
@@ -854,7 +860,7 @@ import {
   useVideoOriginPreconnect,
   useVideoWarmup,
   usesCanonicalStatusStyle
-} from "../chunk-ANPV7GZT.js";
+} from "../chunk-IDWKP5H5.js";
 import {
   CommandApprovalToast,
   ToastCard,
@@ -3121,55 +3127,23 @@ function MetricValue({ value, label, className }) {
 
 // src/components/msp-display.tsx
 init_cn();
-
-// src/components/square-avatar.tsx
-init_cn();
-import React4 from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-function SquareAvatar2({ src, fallbackName = "", size = 56, fullWidth = false, className }) {
-  const initials = React4.useMemo(() => {
-    if (!fallbackName) return "";
-    return fallbackName.split(" ").map((n) => n.charAt(0)).join("").slice(0, 2).toUpperCase();
-  }, [fallbackName]);
-  const style = fullWidth ? {} : { width: size, height: size };
-  return /* @__PURE__ */ jsx19(
-    "div",
-    {
-      className: cn(
-        "rounded-lg border border-ods-border flex items-center justify-center overflow-hidden bg-ods-bg-secondary",
-        fullWidth ? "w-full aspect-square" : "flex-shrink-0",
-        className
-      ),
-      style,
-      children: src ? (
-        // eslint-disable-next-line @next/next/no-img-element
-        /* @__PURE__ */ jsx19("img", { src: getProxiedImageUrl(src) || src, alt: "Avatar", className: "object-cover w-full h-full" })
-      ) : /* @__PURE__ */ jsx19("span", { className: cn(
-        "font-['DM_Sans'] text-ods-text-primary font-bold",
-        fullWidth ? "text-4xl" : "text-lg"
-      ), children: initials })
-    }
-  );
-}
-
-// src/components/msp-display.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function MSPDisplay({ name, logoUrl, size = 40, className }) {
   return /* @__PURE__ */ jsxs16("div", { className: cn("flex items-center gap-2 min-w-0", className), children: [
-    /* @__PURE__ */ jsx20(SquareAvatar2, { src: logoUrl ?? void 0, fallbackName: name, size }),
-    /* @__PURE__ */ jsx20("h2", { className: "truncate pl-2", children: name })
+    /* @__PURE__ */ jsx19(SquareAvatar2, { src: logoUrl ?? void 0, fallbackName: name, size }),
+    /* @__PURE__ */ jsx19("h2", { className: "truncate pl-2", children: name })
   ] });
 }
 
 // src/components/open-source-features.tsx
 import { Terminal, DollarSign as DollarSign2, Network, Users as Users2 } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
 
 // src/components/index.ts
 init_pagination();
 
 // src/components/pricing-display.tsx
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
 var PRICING_STYLES = {
   // Comparison table style (current default)
   comparison: {
@@ -3205,18 +3179,18 @@ function PricingDisplay({
   styleConfig = PRICING_STYLES.comparison
 }) {
   if (typeof pricing === "string") {
-    return /* @__PURE__ */ jsx22(LegacyPricingDisplay, { pricing, className, styleConfig });
+    return /* @__PURE__ */ jsx21(LegacyPricingDisplay, { pricing, className, styleConfig });
   }
   const pricingArray = Array.isArray(pricing) ? pricing : [pricing];
   if (!pricingArray || pricingArray.length === 0) {
-    return /* @__PURE__ */ jsx22("span", { className: `${styleConfig.priceTextColor} ${styleConfig.priceTextSize} ${styleConfig.fontFamily} ${className}`, children: "No pricing data" });
+    return /* @__PURE__ */ jsx21("span", { className: `${styleConfig.priceTextColor} ${styleConfig.priceTextSize} ${styleConfig.fontFamily} ${className}`, children: "No pricing data" });
   }
   if (pricingArray.length === 1) {
     const item = pricingArray[0];
     const price = item.ranges?.[0]?.min || 0;
     const unit = item.ranges?.[0]?.unit;
     return /* @__PURE__ */ jsxs18("span", { className: `${styleConfig.fontFamily} ${className}`, children: [
-      /* @__PURE__ */ jsx22("span", { className: `${styleConfig.priceTextColor} ${styleConfig.priceTextSize}`, children: formatPriceValue(price, styleConfig.showTildePrefix) }),
+      /* @__PURE__ */ jsx21("span", { className: `${styleConfig.priceTextColor} ${styleConfig.priceTextSize}`, children: formatPriceValue(price, styleConfig.showTildePrefix) }),
       unit && /* @__PURE__ */ jsxs18("span", { className: `${styleConfig.secondaryTextColor} ${styleConfig.secondaryTextSize}`, children: [
         "/",
         unit
@@ -3226,7 +3200,7 @@ function PricingDisplay({
   const priceValues = pricingArray.map((item) => formatPriceValue(item.ranges?.[0]?.min || 0, styleConfig.showTildePrefix));
   const itemWithUnit = pricingArray.find((item) => item.ranges?.[0]?.unit);
   return /* @__PURE__ */ jsxs18("span", { className: `${styleConfig.fontFamily} ${className}`, children: [
-    /* @__PURE__ */ jsx22("span", { className: `${styleConfig.priceTextColor} ${styleConfig.priceTextSize}`, children: priceValues.join(" | ") }),
+    /* @__PURE__ */ jsx21("span", { className: `${styleConfig.priceTextColor} ${styleConfig.priceTextSize}`, children: priceValues.join(" | ") }),
     itemWithUnit && itemWithUnit.ranges?.[0]?.unit && /* @__PURE__ */ jsxs18("span", { className: `${styleConfig.secondaryTextColor} ${styleConfig.secondaryTextSize}`, children: [
       "/",
       itemWithUnit.ranges[0].unit
@@ -3248,7 +3222,7 @@ function LegacyPricingDisplay({
   styleConfig = PRICING_STYLES.comparison
 }) {
   if (pricing === "Free" || pricing === "No pricing data") {
-    return /* @__PURE__ */ jsx22("span", { className: `${styleConfig.priceTextColor} ${styleConfig.priceTextSize} ${styleConfig.fontFamily} ${className}`, children: pricing });
+    return /* @__PURE__ */ jsx21("span", { className: `${styleConfig.priceTextColor} ${styleConfig.priceTextSize} ${styleConfig.fontFamily} ${className}`, children: pricing });
   }
   const parsePricing = (pricingStr) => {
     if (pricingStr.includes(", ")) {
@@ -3305,8 +3279,8 @@ function LegacyPricingDisplay({
   };
   const { mainValue, secondaryInfo } = parsePricing(pricing);
   return /* @__PURE__ */ jsxs18("span", { className: `${styleConfig.fontFamily} ${className}`, children: [
-    /* @__PURE__ */ jsx22("span", { className: `${styleConfig.priceTextColor} ${styleConfig.priceTextSize}`, children: mainValue }),
-    secondaryInfo && /* @__PURE__ */ jsx22("span", { className: `${styleConfig.secondaryTextColor} ${styleConfig.secondaryTextSize}`, children: secondaryInfo })
+    /* @__PURE__ */ jsx21("span", { className: `${styleConfig.priceTextColor} ${styleConfig.priceTextSize}`, children: mainValue }),
+    secondaryInfo && /* @__PURE__ */ jsx21("span", { className: `${styleConfig.secondaryTextColor} ${styleConfig.secondaryTextSize}`, children: secondaryInfo })
   ] });
 }
 function formatPricingForDisplay(pricing) {
@@ -3314,7 +3288,7 @@ function formatPricingForDisplay(pricing) {
 }
 
 // src/components/results-count.tsx
-import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
 function ResultsCount({
   currentPage,
   pageSize,
@@ -3330,7 +3304,7 @@ function ResultsCount({
   const plural = resultType === "vendors" ? "vendors" : "posts";
   const singular = resultType === "vendors" ? "vendor" : "post";
   const displayType = totalResults === 1 ? singular : plural;
-  return /* @__PURE__ */ jsx23("div", { className: "mb-6", children: /* @__PURE__ */ jsx23("p", { className: "text-ods-text-secondary text-sm font-['DM_Sans']", children: totalResults > 0 && /* @__PURE__ */ jsxs19(Fragment5, { children: [
+  return /* @__PURE__ */ jsx22("div", { className: "mb-6", children: /* @__PURE__ */ jsx22("p", { className: "text-ods-text-secondary text-sm font-['DM_Sans']", children: totalResults > 0 && /* @__PURE__ */ jsxs19(Fragment5, { children: [
     "Showing ",
     startIndex,
     "-",
@@ -3347,9 +3321,9 @@ function ResultsCount({
 }
 
 // src/components/openframe-logo.tsx
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 var OpenFrameLogo2 = ({ className, lowerPathColor, upperPathColor, ...props }) => {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx23(
     "svg",
     {
       ...props,
@@ -3365,28 +3339,28 @@ var OpenFrameLogo2 = ({ className, lowerPathColor, upperPathColor, ...props }) =
       },
       children: /* @__PURE__ */ jsxs20("g", { children: [
         /* @__PURE__ */ jsxs20("g", { children: [
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M21.3333 16.5333C21.3333 16.2388 21.5721 16 21.8667 16H26.1333C26.4279 16 26.6667 16.2388 26.6667 16.5333V20.8C26.6667 21.0946 26.4279 21.3333 26.1333 21.3333H21.8667C21.5721 21.3333 21.3333 21.0946 21.3333 20.8V16.5333Z",
               fill: lowerPathColor ?? "#ffffff"
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M16 21.8667C16 21.5721 16.2388 21.3333 16.5333 21.3333H20.8C21.0946 21.3333 21.3333 21.5721 21.3333 21.8667V26.1333C21.3333 26.4279 21.0946 26.6667 20.8 26.6667H16.5333C16.2388 26.6667 16 26.4279 16 26.1333V21.8667Z",
               fill: lowerPathColor ?? "#ffffff"
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M26.6667 21.8667C26.6667 21.5721 26.9054 21.3333 27.2 21.3333H31.4667C31.7612 21.3333 32 21.5721 32 21.8667V26.1333C32 26.4279 31.7612 26.6667 31.4667 26.6667H27.2C26.9054 26.6667 26.6667 26.4279 26.6667 26.1333V21.8667Z",
               fill: lowerPathColor ?? "#ffffff"
             }
           ),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "path",
             {
               d: "M21.3333 27.2C21.3333 26.9054 21.5721 26.6667 21.8667 26.6667H26.1333C26.4279 26.6667 26.6667 26.9054 26.6667 27.2V31.4667C26.6667 31.7612 26.4279 32 26.1333 32H21.8667C21.5721 32 21.3333 31.7612 21.3333 31.4667V27.2Z",
@@ -3394,7 +3368,7 @@ var OpenFrameLogo2 = ({ className, lowerPathColor, upperPathColor, ...props }) =
             }
           )
         ] }),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx23(
           "path",
           {
             d: "M30.9333 0H1.06667C0.477563 0 0 0.477564 0 1.06667V30.9333C0 31.5224 0.477563 32 1.06667 32H14.9333C15.5224 32 16 31.5224 16 30.9333V27.7333C16 27.1442 15.5224 26.6667 14.9333 26.6667H5.86667C5.57211 26.6667 5.33333 26.4279 5.33333 26.1333V5.86667C5.33333 5.57211 5.57211 5.33333 5.86667 5.33333H26.1333C26.4279 5.33333 26.6667 5.57212 26.6667 5.86667V14.9333C26.6667 15.5224 27.1442 16 27.7333 16H30.9333C31.5224 16 32 15.5224 32 14.9333V1.06667C32 0.477563 31.5224 0 30.9333 0Z",
@@ -3409,7 +3383,7 @@ var OpenFrameLogo2 = ({ className, lowerPathColor, upperPathColor, ...props }) =
 // src/components/vendor-tag.tsx
 init_cn();
 import { Boxes, Database, Hand, Plug, ShieldCheck, Sparkles } from "lucide-react";
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 function VendorTag({
   type,
   text,
@@ -3428,110 +3402,110 @@ function VendorTag({
         return {
           text: "Placeholder",
           textColor: "text-ods-text-primary",
-          icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4  rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25(Sparkles, { width: 10, height: 10, className: "text-ods-text-primary" }) })
+          icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4  rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24(Sparkles, { width: 10, height: 10, className: "text-ods-text-primary" }) })
         };
       case "ai":
         return {
           text: "AI Selected",
           textColor: "text-ods-text-primary",
-          icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4  rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25(Sparkles, { width: 10, height: 10, className: "text-ods-text-primary" }) })
+          icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4  rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24(Sparkles, { width: 10, height: 10, className: "text-ods-text-primary" }) })
         };
       case "manual":
         return {
           text: "Manually Selected",
           textColor: "text-ods-text-secondary",
-          icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4  rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25(Hand, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
+          icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4  rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24(Hand, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
         };
       case "open-source":
         return {
           text: text || "Open Source",
-          icon: /* @__PURE__ */ jsx25(
+          icon: /* @__PURE__ */ jsx24(
             "div",
             {
               className: "w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0",
               style: accentColor ? { backgroundColor: accentColor } : void 0,
-              children: /* @__PURE__ */ jsx25(OpenSourceIcon2, { width: 10, height: 10, className: "text-[#1A1A1A]" })
+              children: /* @__PURE__ */ jsx24(OpenSourceIcon2, { width: 10, height: 10, className: "text-[#1A1A1A]" })
             }
           )
         };
       case "commercial":
         return {
           text: text || "Commercial Vendor",
-          icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25(CoinsIcon2, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
+          icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24(CoinsIcon2, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
         };
       // platform-capability tags — same neutral icon-box chrome as 'commercial'
       case "api":
         return {
           text: text || "API",
-          icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25(Plug, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
+          icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24(Plug, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
         };
       case "data":
         return {
           text: text || "Data",
-          icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25(Database, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
+          icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24(Database, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
         };
       case "k8s":
         return {
           text: text || "K8s",
-          icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25(Boxes, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
+          icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24(Boxes, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
         };
       case "secured":
         return {
           text: text || "Secured",
-          icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25(ShieldCheck, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
+          icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24(ShieldCheck, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
         };
       case "free":
         return {
           text: text || "Free",
-          icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25("span", { className: "text-[#1A1A1A] text-[8px] font-bold", children: "$" }) })
+          icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24("span", { className: "text-[#1A1A1A] text-[8px] font-bold", children: "$" }) })
         };
       case "freemium":
         return {
           text: text || "Freemium",
-          icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25("span", { className: "text-[#1A1A1A] text-[8px] font-bold", children: "$" }) })
+          icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24("span", { className: "text-[#1A1A1A] text-[8px] font-bold", children: "$" }) })
         };
       case "paid":
         return {
           text: text || "Paid",
-          icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25(CoinsIcon2, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
+          icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24(CoinsIcon2, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
         };
       case "enterprise":
         return {
           text: text || "Enterprise",
-          icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25("span", { className: "text-[#1A1A1A] text-[8px] font-bold", children: "E" }) })
+          icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24("span", { className: "text-[#1A1A1A] text-[8px] font-bold", children: "E" }) })
         };
       case "recommended":
         return {
           text: text || "Recommended",
-          icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25("span", { className: "text-[#1A1A1A] text-[8px] font-bold", children: "\u2605" }) })
+          icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24("span", { className: "text-[#1A1A1A] text-[8px] font-bold", children: "\u2605" }) })
         };
       case "classification":
         const classificationType = text?.toLowerCase();
         if (classificationType === "open_source") {
           return {
             text: "Open Source",
-            icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25(OpenSourceIcon2, { width: 10, height: 10, className: "text-[#1A1A1A]" }) })
+            icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24(OpenSourceIcon2, { width: 10, height: 10, className: "text-[#1A1A1A]" }) })
           };
         } else if (classificationType === "commercial") {
           return {
             text: "Commercial Vendor",
-            icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25(CoinsIcon2, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
+            icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24(CoinsIcon2, { width: 10, height: 10, className: "text-ods-text-secondary" }) })
           };
         } else if (classificationType === "openframe_selected") {
           return {
             text: "OpenFrame Selected",
-            icon: /* @__PURE__ */ jsx25(OpenFrameLogo2, { lowerPathColor: "currentColor", upperPathColor: "currentColor", className: "h-4 w-4 text-ods-accent" })
+            icon: /* @__PURE__ */ jsx24(OpenFrameLogo2, { lowerPathColor: "currentColor", upperPathColor: "currentColor", className: "h-4 w-4 text-ods-accent" })
           };
         } else {
           return {
             text: text || "Classification",
-            icon: /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx25("span", { className: "text-[#1A1A1A] text-[8px] font-bold", children: "C" }) })
+            icon: /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 bg-ods-accent rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx24("span", { className: "text-[#1A1A1A] text-[8px] font-bold", children: "C" }) })
           };
         }
       case "openframe_selected":
         return {
           text: text || "OpenFrame Selected",
-          icon: /* @__PURE__ */ jsx25(OpenFrameLogo2, { lowerPathColor: "currentColor", upperPathColor: "currentColor", className: "h-4 w-4 text-ods-accent" })
+          icon: /* @__PURE__ */ jsx24(OpenFrameLogo2, { lowerPathColor: "currentColor", upperPathColor: "currentColor", className: "h-4 w-4 text-ods-accent" })
         };
       default:
         return {
@@ -3543,7 +3517,7 @@ function VendorTag({
   const { text: displayText, icon, textColor } = getTagContent();
   return /* @__PURE__ */ jsxs21("div", { className: cn(baseClasses, className, hidden && "invisible"), children: [
     icon,
-    /* @__PURE__ */ jsx25("span", { className: cn(
+    /* @__PURE__ */ jsx24("span", { className: cn(
       "font-mono font-semibold uppercase",
       textColor ? textColor : "text-ods-text-primary",
       size === "sm" ? "text-[10px]" : "text-xs"
@@ -3552,12 +3526,12 @@ function VendorTag({
 }
 
 // src/components/selection-source-badge.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function SelectionSourceBadge({ source, hidden = false }) {
   if (!source) {
     return null;
   }
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx25(
     VendorTag,
     {
       type: source?.toLowerCase(),
@@ -3568,28 +3542,15 @@ function SelectionSourceBadge({ source, hidden = false }) {
   );
 }
 
-// src/components/user-display.tsx
-init_cn();
-import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
-function UserDisplay({ name, avatarUrl, subtitle, size = 32, className }) {
-  return /* @__PURE__ */ jsxs22("div", { className: cn("flex items-center gap-2 min-w-0", className), children: [
-    /* @__PURE__ */ jsx27(SquareAvatar2, { src: avatarUrl ?? void 0, fallbackName: name, size }),
-    /* @__PURE__ */ jsxs22("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx27("p", { className: "font-['DM_Sans'] text-lg leading-[22px] text-ods-text-primary truncate", children: name }),
-      subtitle && /* @__PURE__ */ jsx27("span", { className: "font-['DM_Sans'] text-md leading-[16px] text-ods-text-secondary truncate", children: subtitle })
-    ] })
-  ] });
-}
-
 // src/components/loading/content-skeleton.tsx
 init_cn();
-import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
 function ParagraphSkeleton({
   className,
   lines = 4
 }) {
   const lineWidths = ["w-full", "w-full", "w-5/6", "w-3/4", "w-4/5", "w-2/3"];
-  return /* @__PURE__ */ jsx28("div", { className: cn("space-y-2", className), children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx26("div", { className: cn("space-y-2", className), children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx26(
     TextSkeleton.Body,
     {
       className: lineWidths[index % lineWidths.length]
@@ -3603,14 +3564,14 @@ function ListSkeleton({
   showIcons = false,
   showActions = false
 }) {
-  return /* @__PURE__ */ jsx28("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3", children: [
-      showIcons && /* @__PURE__ */ jsx28(MediaSkeleton.Icon, { size: "sm" }),
-      /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-32 md:w-48" })
+  return /* @__PURE__ */ jsx26("div", { className: cn("space-y-3", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
+      showIcons && /* @__PURE__ */ jsx26(MediaSkeleton.Icon, { size: "sm" }),
+      /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-32 md:w-48" })
     ] }),
-    showActions && /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx28(TextSkeleton.Caption, { className: "w-8" }),
-      /* @__PURE__ */ jsx28(UnifiedSkeleton, { variant: "default", className: "w-4 h-4" })
+    showActions && /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx26(TextSkeleton.Caption, { className: "w-8" }),
+      /* @__PURE__ */ jsx26(UnifiedSkeleton, { variant: "default", className: "w-4 h-4" })
     ] })
   ] }, index)) });
 }
@@ -3619,14 +3580,14 @@ function TableSkeleton({
   rows = 5,
   columns = 4
 }) {
-  return /* @__PURE__ */ jsxs23("div", { className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ jsx28("div", { className: "grid gap-4", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx28(TextSkeleton.Subheading, { className: "w-3/4" }, index)) }),
-    /* @__PURE__ */ jsx28("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs22("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsx26("div", { className: "grid gap-4", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx26(TextSkeleton.Subheading, { className: "w-3/4" }, index)) }),
+    /* @__PURE__ */ jsx26("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx26(
       "div",
       {
         className: "grid gap-4 py-2 border-b border-ods-divider",
         style: { gridTemplateColumns: `repeat(${columns}, 1fr)` },
-        children: Array.from({ length: columns }).map((_2, colIndex) => /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-2/3" }, colIndex))
+        children: Array.from({ length: columns }).map((_2, colIndex) => /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-2/3" }, colIndex))
       },
       rowIndex
     )) })
@@ -3636,15 +3597,15 @@ function FormSkeleton({
   className,
   fields = 4
 }) {
-  return /* @__PURE__ */ jsxs23("div", { className: cn("space-y-6", className), children: [
-    Array.from({ length: fields }).map((_, index) => /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-24" }),
-      /* @__PURE__ */ jsx28(InteractiveSkeleton.Input, {}),
-      index % 3 === 0 && /* @__PURE__ */ jsx28(TextSkeleton.Caption, { className: "w-48" })
+  return /* @__PURE__ */ jsxs22("div", { className: cn("space-y-6", className), children: [
+    Array.from({ length: fields }).map((_, index) => /* @__PURE__ */ jsxs22("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-24" }),
+      /* @__PURE__ */ jsx26(InteractiveSkeleton.Input, {}),
+      index % 3 === 0 && /* @__PURE__ */ jsx26(TextSkeleton.Caption, { className: "w-48" })
     ] }, index)),
-    /* @__PURE__ */ jsxs23("div", { className: "flex gap-4 pt-4", children: [
-      /* @__PURE__ */ jsx28(InteractiveSkeleton.Button, {}),
-      /* @__PURE__ */ jsx28(InteractiveSkeleton.Button, { className: "bg-ods-border" })
+    /* @__PURE__ */ jsxs22("div", { className: "flex gap-4 pt-4", children: [
+      /* @__PURE__ */ jsx26(InteractiveSkeleton.Button, {}),
+      /* @__PURE__ */ jsx26(InteractiveSkeleton.Button, { className: "bg-ods-border" })
     ] })
   ] });
 }
@@ -3653,7 +3614,7 @@ function NavigationSkeleton({
   items = 6,
   horizontal = true
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx26(
     "nav",
     {
       className: cn(
@@ -3663,7 +3624,7 @@ function NavigationSkeleton({
       ),
       role: "status",
       "aria-label": "Loading navigation",
-      children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-16 md:w-20" }, index))
+      children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-16 md:w-20" }, index))
     }
   );
 }
@@ -3672,32 +3633,32 @@ function ProfileSkeleton({
   showBio = true,
   showStats = true
 }) {
-  return /* @__PURE__ */ jsxs23("div", { className: cn("space-y-4", className), children: [
-    /* @__PURE__ */ jsxs23("div", { className: "flex items-start gap-4", children: [
-      /* @__PURE__ */ jsx28(MediaSkeleton.Avatar, { size: "lg" }),
-      /* @__PURE__ */ jsxs23("div", { className: "flex-1 space-y-2", children: [
-        /* @__PURE__ */ jsx28(TextSkeleton.Subheading, { className: "w-1/2" }),
-        /* @__PURE__ */ jsx28(TextSkeleton.Caption, { className: "w-1/3" }),
-        /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-2/3" })
+  return /* @__PURE__ */ jsxs22("div", { className: cn("space-y-4", className), children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ jsx26(MediaSkeleton.Avatar, { size: "lg" }),
+      /* @__PURE__ */ jsxs22("div", { className: "flex-1 space-y-2", children: [
+        /* @__PURE__ */ jsx26(TextSkeleton.Subheading, { className: "w-1/2" }),
+        /* @__PURE__ */ jsx26(TextSkeleton.Caption, { className: "w-1/3" }),
+        /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-2/3" })
       ] })
     ] }),
-    showBio && /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-full" }),
-      /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-4/5" }),
-      /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-3/4" })
+    showBio && /* @__PURE__ */ jsxs22("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-full" }),
+      /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-4/5" }),
+      /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-3/4" })
     ] }),
-    showStats && /* @__PURE__ */ jsxs23("div", { className: "flex gap-6", children: [
-      /* @__PURE__ */ jsxs23("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx28(TextSkeleton.Subheading, { className: "w-8 mx-auto" }),
-        /* @__PURE__ */ jsx28(TextSkeleton.Caption, { className: "w-12 mx-auto" })
+    showStats && /* @__PURE__ */ jsxs22("div", { className: "flex gap-6", children: [
+      /* @__PURE__ */ jsxs22("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx26(TextSkeleton.Subheading, { className: "w-8 mx-auto" }),
+        /* @__PURE__ */ jsx26(TextSkeleton.Caption, { className: "w-12 mx-auto" })
       ] }),
-      /* @__PURE__ */ jsxs23("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx28(TextSkeleton.Subheading, { className: "w-8 mx-auto" }),
-        /* @__PURE__ */ jsx28(TextSkeleton.Caption, { className: "w-16 mx-auto" })
+      /* @__PURE__ */ jsxs22("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx26(TextSkeleton.Subheading, { className: "w-8 mx-auto" }),
+        /* @__PURE__ */ jsx26(TextSkeleton.Caption, { className: "w-16 mx-auto" })
       ] }),
-      /* @__PURE__ */ jsxs23("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx28(TextSkeleton.Subheading, { className: "w-8 mx-auto" }),
-        /* @__PURE__ */ jsx28(TextSkeleton.Caption, { className: "w-14 mx-auto" })
+      /* @__PURE__ */ jsxs22("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx26(TextSkeleton.Subheading, { className: "w-8 mx-auto" }),
+        /* @__PURE__ */ jsx26(TextSkeleton.Caption, { className: "w-14 mx-auto" })
       ] })
     ] })
   ] });
@@ -3707,34 +3668,34 @@ function CommentSkeleton({
   showRating = false,
   showReplies = false
 }) {
-  return /* @__PURE__ */ jsxs23("div", { className: cn("space-y-3", className), children: [
-    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx28(MediaSkeleton.Avatar, { size: "sm" }),
-      /* @__PURE__ */ jsxs23("div", { className: "flex-1 flex items-center gap-4", children: [
-        /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-24" }),
-        /* @__PURE__ */ jsx28(TextSkeleton.Caption, { className: "w-16" }),
-        showRating && /* @__PURE__ */ jsx28("div", { className: "flex gap-1", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx28(MediaSkeleton.Icon, { size: "sm" }, i)) })
+  return /* @__PURE__ */ jsxs22("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx26(MediaSkeleton.Avatar, { size: "sm" }),
+      /* @__PURE__ */ jsxs22("div", { className: "flex-1 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-24" }),
+        /* @__PURE__ */ jsx26(TextSkeleton.Caption, { className: "w-16" }),
+        showRating && /* @__PURE__ */ jsx26("div", { className: "flex gap-1", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx26(MediaSkeleton.Icon, { size: "sm" }, i)) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs23("div", { className: "ml-11 space-y-2", children: [
-      /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-full" }),
-      /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-3/4" }),
-      /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-1/2" })
+    /* @__PURE__ */ jsxs22("div", { className: "ml-11 space-y-2", children: [
+      /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-full" }),
+      /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-3/4" }),
+      /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-1/2" })
     ] }),
-    /* @__PURE__ */ jsxs23("div", { className: "ml-11 flex gap-4", children: [
-      /* @__PURE__ */ jsx28(TextSkeleton.Caption, { className: "w-12" }),
-      /* @__PURE__ */ jsx28(TextSkeleton.Caption, { className: "w-16" }),
-      /* @__PURE__ */ jsx28(TextSkeleton.Caption, { className: "w-8" })
+    /* @__PURE__ */ jsxs22("div", { className: "ml-11 flex gap-4", children: [
+      /* @__PURE__ */ jsx26(TextSkeleton.Caption, { className: "w-12" }),
+      /* @__PURE__ */ jsx26(TextSkeleton.Caption, { className: "w-16" }),
+      /* @__PURE__ */ jsx26(TextSkeleton.Caption, { className: "w-8" })
     ] }),
-    showReplies && /* @__PURE__ */ jsx28("div", { className: "ml-11 pl-4 border-l border-ods-divider space-y-4", children: Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx28(MediaSkeleton.Avatar, { size: "sm" }),
-        /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-20" }),
-        /* @__PURE__ */ jsx28(TextSkeleton.Caption, { className: "w-12" })
+    showReplies && /* @__PURE__ */ jsx26("div", { className: "ml-11 pl-4 border-l border-ods-divider space-y-4", children: Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsxs22("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx26(MediaSkeleton.Avatar, { size: "sm" }),
+        /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-20" }),
+        /* @__PURE__ */ jsx26(TextSkeleton.Caption, { className: "w-12" })
       ] }),
-      /* @__PURE__ */ jsxs23("div", { className: "ml-11", children: [
-        /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-full" }),
-        /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-2/3" })
+      /* @__PURE__ */ jsxs22("div", { className: "ml-11", children: [
+        /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-full" }),
+        /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-2/3" })
       ] })
     ] }, index)) })
   ] });
@@ -3746,35 +3707,35 @@ function FeatureListSkeleton({
   grouped = false
 }) {
   if (grouped) {
-    return /* @__PURE__ */ jsx28("div", { className: cn("space-y-6", className), children: Array.from({ length: 3 }).map((_, groupIndex) => /* @__PURE__ */ jsxs23("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx28(TextSkeleton.Subheading, { className: "w-1/3" }),
-      /* @__PURE__ */ jsx28("div", { className: "space-y-2", children: Array.from({ length: features / 3 }).map((_2, featureIndex) => /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3", children: [
-        showIcons && /* @__PURE__ */ jsx28(MediaSkeleton.Icon, { size: "sm" }),
-        /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-2/3" })
+    return /* @__PURE__ */ jsx26("div", { className: cn("space-y-6", className), children: Array.from({ length: 3 }).map((_, groupIndex) => /* @__PURE__ */ jsxs22("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx26(TextSkeleton.Subheading, { className: "w-1/3" }),
+      /* @__PURE__ */ jsx26("div", { className: "space-y-2", children: Array.from({ length: features / 3 }).map((_2, featureIndex) => /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
+        showIcons && /* @__PURE__ */ jsx26(MediaSkeleton.Icon, { size: "sm" }),
+        /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-2/3" })
       ] }, featureIndex)) })
     ] }, groupIndex)) });
   }
-  return /* @__PURE__ */ jsx28("div", { className: cn("space-y-3", className), children: Array.from({ length: features }).map((_, index) => /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3", children: [
-    showIcons && /* @__PURE__ */ jsx28(MediaSkeleton.Icon, { size: "sm" }),
-    /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-2/3" })
+  return /* @__PURE__ */ jsx26("div", { className: cn("space-y-3", className), children: Array.from({ length: features }).map((_, index) => /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
+    showIcons && /* @__PURE__ */ jsx26(MediaSkeleton.Icon, { size: "sm" }),
+    /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-2/3" })
   ] }, index)) });
 }
 function TimelineSkeleton({
   className,
   items = 5
 }) {
-  return /* @__PURE__ */ jsx28("div", { className: cn("space-y-6", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsxs23("div", { className: "flex gap-4", children: [
-    /* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ jsx28(MediaSkeleton.Icon, { size: "sm" }),
-      index < items - 1 && /* @__PURE__ */ jsx28("div", { className: "w-px h-12 bg-ods-border mt-2" })
+  return /* @__PURE__ */ jsx26("div", { className: cn("space-y-6", className), children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsxs22("div", { className: "flex gap-4", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx26(MediaSkeleton.Icon, { size: "sm" }),
+      index < items - 1 && /* @__PURE__ */ jsx26("div", { className: "w-px h-12 bg-ods-border mt-2" })
     ] }),
-    /* @__PURE__ */ jsxs23("div", { className: "flex-1 space-y-2", children: [
-      /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-1/3" }),
-        /* @__PURE__ */ jsx28(TextSkeleton.Caption, { className: "w-16" })
+    /* @__PURE__ */ jsxs22("div", { className: "flex-1 space-y-2", children: [
+      /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-1/3" }),
+        /* @__PURE__ */ jsx26(TextSkeleton.Caption, { className: "w-16" })
       ] }),
-      /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-full" }),
-      /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-3/4" })
+      /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-full" }),
+      /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-3/4" })
     ] })
   ] }, index)) });
 }
@@ -3782,54 +3743,54 @@ function PricingSkeleton({
   className,
   plans = 3
 }) {
-  return /* @__PURE__ */ jsx28("div", { className: cn(
+  return /* @__PURE__ */ jsx26("div", { className: cn(
     "grid gap-6",
     plans === 2 && "grid-cols-1 md:grid-cols-2",
     plans === 3 && "grid-cols-1 md:grid-cols-3",
     plans === 4 && "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
     className
-  ), children: Array.from({ length: plans }).map((_, index) => /* @__PURE__ */ jsx28("div", { className: "bg-ods-card border border-ods-border rounded-lg p-6", children: /* @__PURE__ */ jsxs23("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx28(TextSkeleton.Subheading, { className: "w-1/2" }),
-    /* @__PURE__ */ jsxs23("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx28(TextSkeleton.Heading, { className: "w-1/3" }),
-      /* @__PURE__ */ jsx28(TextSkeleton.Caption, { className: "w-1/4" })
+  ), children: Array.from({ length: plans }).map((_, index) => /* @__PURE__ */ jsx26("div", { className: "bg-ods-card border border-ods-border rounded-lg p-6", children: /* @__PURE__ */ jsxs22("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx26(TextSkeleton.Subheading, { className: "w-1/2" }),
+    /* @__PURE__ */ jsxs22("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx26(TextSkeleton.Heading, { className: "w-1/3" }),
+      /* @__PURE__ */ jsx26(TextSkeleton.Caption, { className: "w-1/4" })
     ] }),
-    /* @__PURE__ */ jsx28("div", { className: "space-y-3 py-4", children: Array.from({ length: 5 }).map((_2, featureIndex) => /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx28(MediaSkeleton.Icon, { size: "sm" }),
-      /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-3/4" })
+    /* @__PURE__ */ jsx26("div", { className: "space-y-3 py-4", children: Array.from({ length: 5 }).map((_2, featureIndex) => /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx26(MediaSkeleton.Icon, { size: "sm" }),
+      /* @__PURE__ */ jsx26(TextSkeleton.Body, { className: "w-3/4" })
     ] }, featureIndex)) }),
-    /* @__PURE__ */ jsx28(InteractiveSkeleton.Button, { className: "w-full" })
+    /* @__PURE__ */ jsx26(InteractiveSkeleton.Button, { className: "w-full" })
   ] }) }, index)) });
 }
 
 // src/components/profile/ProfileLoadingSkeleton.tsx
 init_cn();
-import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
 function ProfileLoadingSkeleton({ className }) {
-  return /* @__PURE__ */ jsxs24("div", { className: cn("space-y-6", className), children: [
-    /* @__PURE__ */ jsxs24("div", { className: "flex items-center space-x-4", children: [
-      /* @__PURE__ */ jsx29("div", { className: "h-16 w-16 bg-gray-200 rounded-full animate-pulse" }),
-      /* @__PURE__ */ jsxs24("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx29("div", { className: "h-4 w-32 bg-gray-200 rounded animate-pulse" }),
-        /* @__PURE__ */ jsx29("div", { className: "h-3 w-24 bg-gray-200 rounded animate-pulse" })
+  return /* @__PURE__ */ jsxs23("div", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxs23("div", { className: "flex items-center space-x-4", children: [
+      /* @__PURE__ */ jsx27("div", { className: "h-16 w-16 bg-gray-200 rounded-full animate-pulse" }),
+      /* @__PURE__ */ jsxs23("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx27("div", { className: "h-4 w-32 bg-gray-200 rounded animate-pulse" }),
+        /* @__PURE__ */ jsx27("div", { className: "h-3 w-24 bg-gray-200 rounded animate-pulse" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs24("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx29("div", { className: "h-4 w-full bg-gray-200 rounded animate-pulse" }),
-      /* @__PURE__ */ jsx29("div", { className: "h-4 w-3/4 bg-gray-200 rounded animate-pulse" }),
-      /* @__PURE__ */ jsx29("div", { className: "h-4 w-1/2 bg-gray-200 rounded animate-pulse" })
+    /* @__PURE__ */ jsxs23("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx27("div", { className: "h-4 w-full bg-gray-200 rounded animate-pulse" }),
+      /* @__PURE__ */ jsx27("div", { className: "h-4 w-3/4 bg-gray-200 rounded animate-pulse" }),
+      /* @__PURE__ */ jsx27("div", { className: "h-4 w-1/2 bg-gray-200 rounded animate-pulse" })
     ] })
   ] });
 }
 
 // src/components/loading/msp-profile-form-skeleton.tsx
 init_cn();
-import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
 function MspProfileFormSkeleton({
   className,
   fields = 4
 }) {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       className: cn(
@@ -3839,13 +3800,13 @@ function MspProfileFormSkeleton({
       role: "status",
       "aria-label": "Loading MSP profile form",
       children: [
-        /* @__PURE__ */ jsxs25("div", { className: "flex flex-col space-y-2 h-full", children: [
-          /* @__PURE__ */ jsx30(TextSkeleton.Body, { className: "w-28" }),
-          /* @__PURE__ */ jsx30("div", { className: "flex-1 min-h-[180px] md:min-h-full", children: /* @__PURE__ */ jsx30(UnifiedSkeleton, { className: "w-full h-full rounded-lg", "aria-label": "Loading company logo" }) })
+        /* @__PURE__ */ jsxs24("div", { className: "flex flex-col space-y-2 h-full", children: [
+          /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-28" }),
+          /* @__PURE__ */ jsx28("div", { className: "flex-1 min-h-[180px] md:min-h-full", children: /* @__PURE__ */ jsx28(UnifiedSkeleton, { className: "w-full h-full rounded-lg", "aria-label": "Loading company logo" }) })
         ] }),
-        /* @__PURE__ */ jsx30("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: Array.from({ length: fields }).map((_, idx) => /* @__PURE__ */ jsxs25("div", { className: "space-y-2 flex flex-col", children: [
-          /* @__PURE__ */ jsx30(TextSkeleton.Body, { className: "w-40" }),
-          /* @__PURE__ */ jsx30(InteractiveSkeleton.Input, {})
+        /* @__PURE__ */ jsx28("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: Array.from({ length: fields }).map((_, idx) => /* @__PURE__ */ jsxs24("div", { className: "space-y-2 flex flex-col", children: [
+          /* @__PURE__ */ jsx28(TextSkeleton.Body, { className: "w-40" }),
+          /* @__PURE__ */ jsx28(InteractiveSkeleton.Input, {})
         ] }, idx)) })
       ]
     }
@@ -3854,9 +3815,9 @@ function MspProfileFormSkeleton({
 
 // src/components/loading/category-card-skeleton.tsx
 init_cn();
-import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 function CategoryCardSkeleton({ className }) {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs25(
     "article",
     {
       className: cn(
@@ -3866,7 +3827,7 @@ function CategoryCardSkeleton({ className }) {
       role: "status",
       "aria-label": "Loading category card",
       children: [
-        /* @__PURE__ */ jsx31("div", { className: "flex gap-6 mb-8 justify-center items-center", children: Array.from({ length: 10 }).map((_, i) => /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx29("div", { className: "flex gap-6 mb-8 justify-center items-center", children: Array.from({ length: 10 }).map((_, i) => /* @__PURE__ */ jsx29(
           UnifiedSkeleton,
           {
             variant: "circular",
@@ -3875,12 +3836,12 @@ function CategoryCardSkeleton({ className }) {
           },
           i
         )) }),
-        /* @__PURE__ */ jsxs26("div", { className: "flex-1 flex flex-col space-y-3", children: [
-          /* @__PURE__ */ jsx31(TextSkeleton.Heading, { className: "w-3/4" }),
-          /* @__PURE__ */ jsx31(TextSkeleton.Body, { className: "w-1/2" }),
-          /* @__PURE__ */ jsx31(TextSkeleton.Body, { className: "w-full" })
+        /* @__PURE__ */ jsxs25("div", { className: "flex-1 flex flex-col space-y-3", children: [
+          /* @__PURE__ */ jsx29(TextSkeleton.Heading, { className: "w-3/4" }),
+          /* @__PURE__ */ jsx29(TextSkeleton.Body, { className: "w-1/2" }),
+          /* @__PURE__ */ jsx29(TextSkeleton.Body, { className: "w-full" })
         ] }),
-        /* @__PURE__ */ jsx31("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsx31(UnifiedSkeleton, { className: "w-12 h-12 rounded-[6px]", "aria-label": "Loading button" }) })
+        /* @__PURE__ */ jsx29("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsx29(UnifiedSkeleton, { className: "w-12 h-12 rounded-[6px]", "aria-label": "Loading button" }) })
       ]
     }
   );
@@ -3888,22 +3849,22 @@ function CategoryCardSkeleton({ className }) {
 
 // src/components/loading/category-vendor-selector-skeleton.tsx
 init_cn();
-import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 function CategoryVendorSelectorSkeleton({ subcategories = 3, className }) {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
       className: cn("bg-ods-card border border-ods-border rounded-lg p-6", className),
       role: "status",
       "aria-label": "Loading category section",
       children: [
-        /* @__PURE__ */ jsxs27("div", { className: "mb-6 space-y-2 max-w-xl", children: [
-          /* @__PURE__ */ jsx32(TextSkeleton.Heading, { className: "w-1/2" }),
-          /* @__PURE__ */ jsx32(TextSkeleton.Body, { className: "w-3/4" })
+        /* @__PURE__ */ jsxs26("div", { className: "mb-6 space-y-2 max-w-xl", children: [
+          /* @__PURE__ */ jsx30(TextSkeleton.Heading, { className: "w-1/2" }),
+          /* @__PURE__ */ jsx30(TextSkeleton.Body, { className: "w-3/4" })
         ] }),
-        /* @__PURE__ */ jsx32("div", { className: "space-y-6", children: Array.from({ length: subcategories }).map((_, idx) => /* @__PURE__ */ jsxs27("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx32(TextSkeleton.Subheading, { className: "w-1/3" }),
-          /* @__PURE__ */ jsx32("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: Array.from({ length: 2 }).map((__, j) => /* @__PURE__ */ jsx32(UnifiedSkeleton, { className: "h-20 rounded-lg" }, j)) })
+        /* @__PURE__ */ jsx30("div", { className: "space-y-6", children: Array.from({ length: subcategories }).map((_, idx) => /* @__PURE__ */ jsxs26("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx30(TextSkeleton.Subheading, { className: "w-1/3" }),
+          /* @__PURE__ */ jsx30("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: Array.from({ length: 2 }).map((__, j) => /* @__PURE__ */ jsx30(UnifiedSkeleton, { className: "h-20 rounded-lg" }, j)) })
         ] }, idx)) })
       ]
     }
@@ -3912,90 +3873,90 @@ function CategoryVendorSelectorSkeleton({ subcategories = 3, className }) {
 
 // src/components/loading/wizard-layout-skeleton.tsx
 init_cn();
-import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
 function WizardLayoutSkeleton({ steps = 6, className }) {
-  return /* @__PURE__ */ jsxs28("div", { className: cn("space-y-6", className), role: "status", "aria-label": "Loading wizard layout", children: [
-    /* @__PURE__ */ jsx33("div", { className: "flex flex-wrap items-center gap-2", children: Array.from({ length: steps }).map((_, i) => /* @__PURE__ */ jsx33(UnifiedSkeleton, { className: "h-6 w-24 rounded" }, i)) }),
-    /* @__PURE__ */ jsxs28("div", { className: "space-y-2 max-w-2xl", children: [
-      /* @__PURE__ */ jsx33(TextSkeleton.Heading, { className: "w-2/3" }),
-      /* @__PURE__ */ jsx33(TextSkeleton.Body, { className: "w-1/2" })
+  return /* @__PURE__ */ jsxs27("div", { className: cn("space-y-6", className), role: "status", "aria-label": "Loading wizard layout", children: [
+    /* @__PURE__ */ jsx31("div", { className: "flex flex-wrap items-center gap-2", children: Array.from({ length: steps }).map((_, i) => /* @__PURE__ */ jsx31(UnifiedSkeleton, { className: "h-6 w-24 rounded" }, i)) }),
+    /* @__PURE__ */ jsxs27("div", { className: "space-y-2 max-w-2xl", children: [
+      /* @__PURE__ */ jsx31(TextSkeleton.Heading, { className: "w-2/3" }),
+      /* @__PURE__ */ jsx31(TextSkeleton.Body, { className: "w-1/2" })
     ] }),
-    /* @__PURE__ */ jsxs28("div", { className: "flex justify-between mt-10", children: [
-      /* @__PURE__ */ jsx33(UnifiedSkeleton, { className: "h-10 w-24 rounded" }),
-      /* @__PURE__ */ jsx33(UnifiedSkeleton, { className: "h-10 w-32 rounded" })
+    /* @__PURE__ */ jsxs27("div", { className: "flex justify-between mt-10", children: [
+      /* @__PURE__ */ jsx31(UnifiedSkeleton, { className: "h-10 w-24 rounded" }),
+      /* @__PURE__ */ jsx31(UnifiedSkeleton, { className: "h-10 w-32 rounded" })
     ] })
   ] });
 }
 
 // src/components/loading/margin-report-skeleton.tsx
-import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 function MarginReportSkeleton({ animate = true, description, overlayContent }) {
-  return /* @__PURE__ */ jsxs29("main", { className: `bg-ods-bg ${animate ? "animate-pulse" : ""} relative min-h-screen`, children: [
-    /* @__PURE__ */ jsxs29("div", { className: "max-w-[1920px] px-6 md:px-20 py-6 md:py-10 mx-auto space-y-10", children: [
-      /* @__PURE__ */ jsxs29("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx34("div", { className: "h-10 w-72 bg-[#2A2A2A] rounded" }),
-        /* @__PURE__ */ jsx34("div", { className: "h-4 w-80 bg-[#2A2A2A] rounded" })
+  return /* @__PURE__ */ jsxs28("main", { className: `bg-ods-bg ${animate ? "animate-pulse" : ""} relative min-h-screen`, children: [
+    /* @__PURE__ */ jsxs28("div", { className: "max-w-[1920px] px-6 md:px-20 py-6 md:py-10 mx-auto space-y-10", children: [
+      /* @__PURE__ */ jsxs28("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx32("div", { className: "h-10 w-72 bg-[#2A2A2A] rounded" }),
+        /* @__PURE__ */ jsx32("div", { className: "h-4 w-80 bg-[#2A2A2A] rounded" })
       ] }),
-      /* @__PURE__ */ jsx34("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx34("div", { className: "h-32 bg-ods-card border border-ods-border rounded" }, i)) }),
-      /* @__PURE__ */ jsxs29("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-        /* @__PURE__ */ jsxs29("div", { className: "bg-ods-card border border-ods-border rounded-lg p-6 flex items-center gap-4 animate-pulse", children: [
-          /* @__PURE__ */ jsx34("div", { className: "w-14 h-14 rounded-lg bg-[#2A2A2A]" }),
-          /* @__PURE__ */ jsxs29("div", { className: "flex-1 space-y-2", children: [
-            /* @__PURE__ */ jsx34("div", { className: "h-4 bg-[#2A2A2A] rounded w-3/4" }),
-            /* @__PURE__ */ jsx34("div", { className: "h-3 bg-[#2A2A2A] rounded w-1/2" })
+      /* @__PURE__ */ jsx32("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx32("div", { className: "h-32 bg-ods-card border border-ods-border rounded" }, i)) }),
+      /* @__PURE__ */ jsxs28("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "bg-ods-card border border-ods-border rounded-lg p-6 flex items-center gap-4 animate-pulse", children: [
+          /* @__PURE__ */ jsx32("div", { className: "w-14 h-14 rounded-lg bg-[#2A2A2A]" }),
+          /* @__PURE__ */ jsxs28("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx32("div", { className: "h-4 bg-[#2A2A2A] rounded w-3/4" }),
+            /* @__PURE__ */ jsx32("div", { className: "h-3 bg-[#2A2A2A] rounded w-1/2" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs29("div", { className: "bg-ods-card border border-ods-border rounded-lg p-6 flex flex-col gap-4 animate-pulse", children: [
-          /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between gap-4", children: [
-            /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx34("div", { className: "w-10 h-10 rounded-lg bg-[#2A2A2A]" }),
-              /* @__PURE__ */ jsxs29("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ jsx34("div", { className: "h-4 w-32 bg-[#2A2A2A] rounded" }),
-                /* @__PURE__ */ jsx34("div", { className: "h-3 w-20 bg-[#2A2A2A] rounded" })
+        /* @__PURE__ */ jsxs28("div", { className: "bg-ods-card border border-ods-border rounded-lg p-6 flex flex-col gap-4 animate-pulse", children: [
+          /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx32("div", { className: "w-10 h-10 rounded-lg bg-[#2A2A2A]" }),
+              /* @__PURE__ */ jsxs28("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx32("div", { className: "h-4 w-32 bg-[#2A2A2A] rounded" }),
+                /* @__PURE__ */ jsx32("div", { className: "h-3 w-20 bg-[#2A2A2A] rounded" })
               ] })
             ] }),
-            /* @__PURE__ */ jsx34("div", { className: "h-6 w-36 bg-[#2A2A2A] rounded" })
+            /* @__PURE__ */ jsx32("div", { className: "h-6 w-36 bg-[#2A2A2A] rounded" })
           ] }),
-          /* @__PURE__ */ jsx34("div", { className: "h-4 w-40 bg-[#2A2A2A] rounded mt-4" })
+          /* @__PURE__ */ jsx32("div", { className: "h-4 w-40 bg-[#2A2A2A] rounded mt-4" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx34("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: ["Commercial Stack", "Open-Source Stack"].map((label, idx) => /* @__PURE__ */ jsxs29("div", { className: "bg-ods-card border border-ods-border rounded-lg overflow-hidden flex flex-col animate-pulse", children: [
-        /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between px-6 py-4", children: [
-          /* @__PURE__ */ jsx34("div", { className: "h-6 w-40 bg-[#2A2A2A] rounded" }),
-          /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx34("div", { className: "h-5 w-20 bg-[#2A2A2A] rounded" }),
-            /* @__PURE__ */ jsx34("div", { className: "h-4 w-10 bg-[#2A2A2A] rounded" })
+      /* @__PURE__ */ jsx32("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: ["Commercial Stack", "Open-Source Stack"].map((label, idx) => /* @__PURE__ */ jsxs28("div", { className: "bg-ods-card border border-ods-border rounded-lg overflow-hidden flex flex-col animate-pulse", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between px-6 py-4", children: [
+          /* @__PURE__ */ jsx32("div", { className: "h-6 w-40 bg-[#2A2A2A] rounded" }),
+          /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx32("div", { className: "h-5 w-20 bg-[#2A2A2A] rounded" }),
+            /* @__PURE__ */ jsx32("div", { className: "h-4 w-10 bg-[#2A2A2A] rounded" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx34("div", { className: "flex-1 flex flex-col gap-3 p-3", children: Array.from({ length: 5 }).map((_, j) => /* @__PURE__ */ jsxs29("div", { className: "bg-ods-bg border border-ods-border rounded-lg px-4 py-3 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-3 min-w-0", children: [
-            /* @__PURE__ */ jsx34("div", { className: "w-12 h-12 bg-[#2A2A2A] rounded-lg flex-shrink-0" }),
-            /* @__PURE__ */ jsxs29("div", { className: "flex flex-col min-w-0", children: [
-              /* @__PURE__ */ jsx34("div", { className: "h-4 w-32 bg-[#2A2A2A] rounded" }),
-              /* @__PURE__ */ jsx34("div", { className: "hidden md:block h-3 w-24 bg-[#2A2A2A] rounded mt-1" })
+        /* @__PURE__ */ jsx32("div", { className: "flex-1 flex flex-col gap-3 p-3", children: Array.from({ length: 5 }).map((_, j) => /* @__PURE__ */ jsxs28("div", { className: "bg-ods-bg border border-ods-border rounded-lg px-4 py-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-3 min-w-0", children: [
+            /* @__PURE__ */ jsx32("div", { className: "w-12 h-12 bg-[#2A2A2A] rounded-lg flex-shrink-0" }),
+            /* @__PURE__ */ jsxs28("div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ jsx32("div", { className: "h-4 w-32 bg-[#2A2A2A] rounded" }),
+              /* @__PURE__ */ jsx32("div", { className: "hidden md:block h-3 w-24 bg-[#2A2A2A] rounded mt-1" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
-            /* @__PURE__ */ jsx34("div", { className: "h-4 w-16 bg-[#2A2A2A] rounded" }),
-            /* @__PURE__ */ jsx34("div", { className: "h-3 w-8 bg-[#2A2A2A] rounded" })
+          /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+            /* @__PURE__ */ jsx32("div", { className: "h-4 w-16 bg-[#2A2A2A] rounded" }),
+            /* @__PURE__ */ jsx32("div", { className: "h-3 w-8 bg-[#2A2A2A] rounded" })
           ] })
         ] }, j)) })
       ] }, idx)) }),
-      /* @__PURE__ */ jsx34("div", { className: "h-6 w-60 bg-[#2A2A2A] rounded" }),
-      /* @__PURE__ */ jsx34("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx34("div", { className: "h-48 bg-ods-card border border-ods-border rounded" }, i)) }),
-      /* @__PURE__ */ jsxs29("div", { className: "border border-ods-border rounded-3xl p-8 space-y-6", children: [
-        /* @__PURE__ */ jsxs29("div", { className: "flex items-start gap-6", children: [
-          /* @__PURE__ */ jsxs29("div", { className: "flex-1 space-y-2 min-w-0", children: [
-            /* @__PURE__ */ jsx34("div", { className: "h-8 w-72 bg-[#2A2A2A] rounded" }),
-            /* @__PURE__ */ jsx34("div", { className: "h-4 w-3/4 bg-[#2A2A2A] rounded" })
+      /* @__PURE__ */ jsx32("div", { className: "h-6 w-60 bg-[#2A2A2A] rounded" }),
+      /* @__PURE__ */ jsx32("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx32("div", { className: "h-48 bg-ods-card border border-ods-border rounded" }, i)) }),
+      /* @__PURE__ */ jsxs28("div", { className: "border border-ods-border rounded-3xl p-8 space-y-6", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "flex items-start gap-6", children: [
+          /* @__PURE__ */ jsxs28("div", { className: "flex-1 space-y-2 min-w-0", children: [
+            /* @__PURE__ */ jsx32("div", { className: "h-8 w-72 bg-[#2A2A2A] rounded" }),
+            /* @__PURE__ */ jsx32("div", { className: "h-4 w-3/4 bg-[#2A2A2A] rounded" })
           ] }),
-          /* @__PURE__ */ jsx34("div", { className: "w-12 h-12 bg-[#2A2A2A] rounded-md shrink-0" })
+          /* @__PURE__ */ jsx32("div", { className: "w-12 h-12 bg-[#2A2A2A] rounded-md shrink-0" })
         ] }),
-        /* @__PURE__ */ jsx34("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx34("div", { className: "h-32 bg-ods-card border border-ods-border rounded" }, i)) })
+        /* @__PURE__ */ jsx32("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx32("div", { className: "h-32 bg-ods-card border border-ods-border rounded" }, i)) })
       ] })
     ] }),
-    overlayContent && /* @__PURE__ */ jsx34("div", { className: "absolute inset-0 bg-ods-card/80 z-10 rounded-lg pointer-events-none", children: /* @__PURE__ */ jsxs29("div", { className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-auto flex flex-col items-center gap-4 text-center px-4", children: [
-      description && /* @__PURE__ */ jsx34("h3", { children: description }),
+    overlayContent && /* @__PURE__ */ jsx32("div", { className: "absolute inset-0 bg-ods-card/80 z-10 rounded-lg pointer-events-none", children: /* @__PURE__ */ jsxs28("div", { className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-auto flex flex-col items-center gap-4 text-center px-4", children: [
+      description && /* @__PURE__ */ jsx32("h3", { children: description }),
       overlayContent
     ] }) })
   ] });
@@ -4003,18 +3964,18 @@ function MarginReportSkeleton({ animate = true, description, overlayContent }) {
 
 // src/components/loading/users-grid-skeleton.tsx
 init_cn();
-import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs29 } from "react/jsx-runtime";
 function UsersGridSkeleton({ rows = 10, className }) {
   const skeletonRows = Array.from({ length: rows });
-  return /* @__PURE__ */ jsx35("div", { className: cn("overflow-x-auto rounded-lg border border-ods-border bg-ods-card animate-pulse", className), children: /* @__PURE__ */ jsxs30("table", { className: "min-w-full divide-y divide-ods-border", children: [
-    /* @__PURE__ */ jsx35("thead", { className: "bg-[#2A2A2A]", children: /* @__PURE__ */ jsx35("tr", { children: ["Name", "Email", "Role", "Created", "Last Sign-In"].map((h) => /* @__PURE__ */ jsx35("th", { className: "px-4 py-3 text-left text-[12px] font-medium text-ods-text-primary font-['DM_Sans']", children: h }, h)) }) }),
-    /* @__PURE__ */ jsx35("tbody", { className: "divide-y divide-ods-border", children: skeletonRows.map((_, idx) => /* @__PURE__ */ jsx35("tr", { children: Array.from({ length: 5 }).map((__, cell) => /* @__PURE__ */ jsx35("td", { className: "px-4 py-3 whitespace-nowrap", children: /* @__PURE__ */ jsx35("div", { className: "h-4 bg-ods-border rounded w-full" }) }, cell)) }, idx)) })
+  return /* @__PURE__ */ jsx33("div", { className: cn("overflow-x-auto rounded-lg border border-ods-border bg-ods-card animate-pulse", className), children: /* @__PURE__ */ jsxs29("table", { className: "min-w-full divide-y divide-ods-border", children: [
+    /* @__PURE__ */ jsx33("thead", { className: "bg-[#2A2A2A]", children: /* @__PURE__ */ jsx33("tr", { children: ["Name", "Email", "Role", "Created", "Last Sign-In"].map((h) => /* @__PURE__ */ jsx33("th", { className: "px-4 py-3 text-left text-[12px] font-medium text-ods-text-primary font-['DM_Sans']", children: h }, h)) }) }),
+    /* @__PURE__ */ jsx33("tbody", { className: "divide-y divide-ods-border", children: skeletonRows.map((_, idx) => /* @__PURE__ */ jsx33("tr", { children: Array.from({ length: 5 }).map((__, cell) => /* @__PURE__ */ jsx33("td", { className: "px-4 py-3 whitespace-nowrap", children: /* @__PURE__ */ jsx33("div", { className: "h-4 bg-ods-border rounded w-full" }) }, cell)) }, idx)) })
   ] }) });
 }
 
 // src/components/loading/organization-icon-skeleton.tsx
 init_cn();
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var sizeClasses2 = {
   xs: "w-6 h-6",
   sm: "w-8 h-8",
@@ -4041,27 +4002,27 @@ function OrganizationIconSkeleton({
     !showBackground && "overflow-hidden",
     className
   );
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       className: containerClasses,
       role: "status",
       "aria-label": "Loading organization icon",
-      children: /* @__PURE__ */ jsx36("div", { className: "w-1/2 h-1/2 bg-ods-border rounded-sm animate-pulse" })
+      children: /* @__PURE__ */ jsx34("div", { className: "w-1/2 h-1/2 bg-ods-border rounded-sm animate-pulse" })
     }
   );
 }
 
 // src/components/loading/organization-card-skeleton.tsx
 init_cn();
-import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
 function OrganizationCardSkeleton({
   className,
   containerClassName,
   showFooter = true,
   showDescription = true
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       className: cn(
@@ -4071,9 +4032,9 @@ function OrganizationCardSkeleton({
       ),
       role: "status",
       "aria-label": "Loading organization card",
-      children: /* @__PURE__ */ jsxs31("div", { className: "p-4 gap-3 flex flex-col", children: [
-        /* @__PURE__ */ jsxs31("div", { className: "flex items-start gap-3 w-full", children: [
-          /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsxs30("div", { className: "p-4 gap-3 flex flex-col", children: [
+        /* @__PURE__ */ jsxs30("div", { className: "flex items-start gap-3 w-full", children: [
+          /* @__PURE__ */ jsx35(
             OrganizationIconSkeleton,
             {
               size: "xl",
@@ -4082,29 +4043,29 @@ function OrganizationCardSkeleton({
               className: "w-[60px] h-[60px]"
             }
           ),
-          /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex flex-col justify-center py-2 min-w-0 space-y-1", children: [
-            /* @__PURE__ */ jsx37(TextSkeleton.Subheading, { className: "w-3/4" }),
-            /* @__PURE__ */ jsx37(TextSkeleton.Caption, { className: "w-1/2" })
+          /* @__PURE__ */ jsxs30("div", { className: "flex-1 flex flex-col justify-center py-2 min-w-0 space-y-1", children: [
+            /* @__PURE__ */ jsx35(TextSkeleton.Subheading, { className: "w-3/4" }),
+            /* @__PURE__ */ jsx35(TextSkeleton.Caption, { className: "w-1/2" })
           ] })
         ] }),
-        showDescription && /* @__PURE__ */ jsx37("div", { className: "w-full h-12 overflow-hidden flex items-center", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-1 w-full", children: [
-          /* @__PURE__ */ jsx37(TextSkeleton.Body, { className: "w-full" }),
-          /* @__PURE__ */ jsx37(TextSkeleton.Body, { className: "w-2/3" })
+        showDescription && /* @__PURE__ */ jsx35("div", { className: "w-full h-12 overflow-hidden flex items-center", children: /* @__PURE__ */ jsxs30("div", { className: "space-y-1 w-full", children: [
+          /* @__PURE__ */ jsx35(TextSkeleton.Body, { className: "w-full" }),
+          /* @__PURE__ */ jsx35(TextSkeleton.Body, { className: "w-2/3" })
         ] }) }),
-        showFooter && /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between gap-2 w-full min-w-0", children: [
-          /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-3 md:gap-4 min-w-0 flex-shrink", children: [
-            /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
-              /* @__PURE__ */ jsx37(MediaSkeleton.Icon, { size: "sm", className: "w-5 h-5" }),
-              /* @__PURE__ */ jsx37(TextSkeleton.Caption, { className: "w-8" })
+        showFooter && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between gap-2 w-full min-w-0", children: [
+          /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-3 md:gap-4 min-w-0 flex-shrink", children: [
+            /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+              /* @__PURE__ */ jsx35(MediaSkeleton.Icon, { size: "sm", className: "w-5 h-5" }),
+              /* @__PURE__ */ jsx35(TextSkeleton.Caption, { className: "w-8" })
             ] }),
-            /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
-              /* @__PURE__ */ jsx37(MediaSkeleton.Icon, { size: "sm", className: "w-5 h-5" }),
-              /* @__PURE__ */ jsx37(TextSkeleton.Caption, { className: "w-10" })
+            /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+              /* @__PURE__ */ jsx35(MediaSkeleton.Icon, { size: "sm", className: "w-5 h-5" }),
+              /* @__PURE__ */ jsx35(TextSkeleton.Caption, { className: "w-10" })
             ] })
           ] }),
-          /* @__PURE__ */ jsx37("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-1.5 bg-ods-bg border border-ods-border rounded px-2.5 py-1.5", children: [
-            /* @__PURE__ */ jsx37("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx37(MediaSkeleton.Icon, { size: "sm", className: "w-2.5 h-2.5" }) }),
-            /* @__PURE__ */ jsx37(TextSkeleton.Caption, { className: "w-16" })
+          /* @__PURE__ */ jsx35("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-1.5 bg-ods-bg border border-ods-border rounded px-2.5 py-1.5", children: [
+            /* @__PURE__ */ jsx35("div", { className: "w-4 h-4 bg-ods-border rounded-sm flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx35(MediaSkeleton.Icon, { size: "sm", className: "w-2.5 h-2.5" }) }),
+            /* @__PURE__ */ jsx35(TextSkeleton.Caption, { className: "w-16" })
           ] }) })
         ] })
       ] })
@@ -4118,7 +4079,7 @@ function OrganizationCardSkeletonGrid({
   showFooter = true,
   showDescription = true
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       className: cn(
@@ -4127,7 +4088,7 @@ function OrganizationCardSkeletonGrid({
       ),
       role: "status",
       "aria-label": `Loading ${count} organization cards`,
-      children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx37(
+      children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx35(
         OrganizationCardSkeleton,
         {
           containerClassName,
@@ -4142,9 +4103,9 @@ function OrganizationCardSkeletonGrid({
 
 // src/components/loading/device-card-skeleton.tsx
 init_cn();
-import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
 function DeviceCardSkeleton({ className }) {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: cn(
@@ -4154,19 +4115,19 @@ function DeviceCardSkeleton({ className }) {
       role: "status",
       "aria-label": "Loading device card",
       children: [
-        /* @__PURE__ */ jsxs32("div", { className: "flex gap-4 items-center px-4 py-3", children: [
-          /* @__PURE__ */ jsx38("div", { className: "w-8 h-8 bg-ods-bg border border-ods-border rounded-[6px] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx38("div", { className: "w-4 h-4 bg-ods-border rounded animate-pulse" }) }),
-          /* @__PURE__ */ jsx38("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx38("div", { className: "h-6 w-3/4 bg-ods-border rounded animate-pulse" }) }),
-          /* @__PURE__ */ jsx38("div", { className: "w-12 h-12 bg-ods-border rounded-[6px] flex-shrink-0 animate-pulse" })
+        /* @__PURE__ */ jsxs31("div", { className: "flex gap-4 items-center px-4 py-3", children: [
+          /* @__PURE__ */ jsx36("div", { className: "w-8 h-8 bg-ods-bg border border-ods-border rounded-[6px] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx36("div", { className: "w-4 h-4 bg-ods-border rounded animate-pulse" }) }),
+          /* @__PURE__ */ jsx36("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx36("div", { className: "h-6 w-3/4 bg-ods-border rounded animate-pulse" }) }),
+          /* @__PURE__ */ jsx36("div", { className: "w-12 h-12 bg-ods-border rounded-[6px] flex-shrink-0 animate-pulse" })
         ] }),
-        /* @__PURE__ */ jsxs32("div", { className: "flex gap-4 items-center px-4 py-2", children: [
-          /* @__PURE__ */ jsx38("div", { className: "w-24 h-6 bg-ods-border rounded flex-shrink-0 animate-pulse" }),
-          /* @__PURE__ */ jsx38(OrganizationIconSkeleton, { size: "sm" }),
-          /* @__PURE__ */ jsx38("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx38("div", { className: "h-5 w-1/2 bg-ods-border rounded animate-pulse" }) })
+        /* @__PURE__ */ jsxs31("div", { className: "flex gap-4 items-center px-4 py-2", children: [
+          /* @__PURE__ */ jsx36("div", { className: "w-24 h-6 bg-ods-border rounded flex-shrink-0 animate-pulse" }),
+          /* @__PURE__ */ jsx36(OrganizationIconSkeleton, { size: "sm" }),
+          /* @__PURE__ */ jsx36("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx36("div", { className: "h-5 w-1/2 bg-ods-border rounded animate-pulse" }) })
         ] }),
-        /* @__PURE__ */ jsxs32("div", { className: "flex gap-4 items-center px-4 py-2", children: [
-          /* @__PURE__ */ jsx38("div", { className: "w-20 h-6 bg-ods-border rounded-full flex-shrink-0 animate-pulse" }),
-          /* @__PURE__ */ jsx38("div", { className: "flex-1", children: /* @__PURE__ */ jsx38("div", { className: "h-5 w-40 bg-ods-border rounded animate-pulse" }) })
+        /* @__PURE__ */ jsxs31("div", { className: "flex gap-4 items-center px-4 py-2", children: [
+          /* @__PURE__ */ jsx36("div", { className: "w-20 h-6 bg-ods-border rounded-full flex-shrink-0 animate-pulse" }),
+          /* @__PURE__ */ jsx36("div", { className: "flex-1", children: /* @__PURE__ */ jsx36("div", { className: "h-5 w-40 bg-ods-border rounded animate-pulse" }) })
         ] })
       ]
     }
@@ -4176,7 +4137,7 @@ function DeviceCardSkeletonGrid({
   count = 12,
   className
 }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       className: cn(
@@ -4185,22 +4146,22 @@ function DeviceCardSkeletonGrid({
       ),
       role: "status",
       "aria-label": `Loading ${count} device cards`,
-      children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx38(DeviceCardSkeleton, {}, index))
+      children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx36(DeviceCardSkeleton, {}, index))
     }
   );
 }
 
 // src/components/vendor-page-skeleton.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function VendorPageSkeleton() {
-  return /* @__PURE__ */ jsx39(VendorDetailLayoutSkeleton, {});
+  return /* @__PURE__ */ jsx37(VendorDetailLayoutSkeleton, {});
 }
 
 // src/components/why-it-matters.tsx
-import { jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
 
 // src/components/yes-no-display.tsx
-import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
 function YesNoDisplay({
   value,
   yesText = "Yes",
@@ -4209,20 +4170,20 @@ function YesNoDisplay({
   className = ""
 }) {
   if (customText) {
-    return /* @__PURE__ */ jsxs34("div", { className: `flex items-center gap-2 ${className}`, children: [
-      /* @__PURE__ */ jsx41(CheckCircleIcon2, { className: "h-6 w-6" }),
-      /* @__PURE__ */ jsx41("span", { className: "text-ods-text-primary text-[16px]", children: customText })
+    return /* @__PURE__ */ jsxs33("div", { className: `flex items-center gap-2 ${className}`, children: [
+      /* @__PURE__ */ jsx39(CheckCircleIcon2, { className: "h-6 w-6" }),
+      /* @__PURE__ */ jsx39("span", { className: "text-ods-text-primary text-[16px]", children: customText })
     ] });
   }
   if (value) {
-    return /* @__PURE__ */ jsxs34("div", { className: `flex items-center gap-2 ${className}`, children: [
-      /* @__PURE__ */ jsx41(CheckCircleIcon2, { className: "h-6 w-6" }),
-      /* @__PURE__ */ jsx41("span", { className: "text-ods-text-primary text-[16px]", children: yesText })
+    return /* @__PURE__ */ jsxs33("div", { className: `flex items-center gap-2 ${className}`, children: [
+      /* @__PURE__ */ jsx39(CheckCircleIcon2, { className: "h-6 w-6" }),
+      /* @__PURE__ */ jsx39("span", { className: "text-ods-text-primary text-[16px]", children: yesText })
     ] });
   }
-  return /* @__PURE__ */ jsxs34("div", { className: `flex items-center gap-2 ${className}`, children: [
-    /* @__PURE__ */ jsx41(XCircleIcon, { className: "h-6 w-6" }),
-    /* @__PURE__ */ jsx41("span", { className: "text-ods-text-secondary text-[16px]", children: noText })
+  return /* @__PURE__ */ jsxs33("div", { className: `flex items-center gap-2 ${className}`, children: [
+    /* @__PURE__ */ jsx39(XCircleIcon, { className: "h-6 w-6" }),
+    /* @__PURE__ */ jsx39("span", { className: "text-ods-text-secondary text-[16px]", children: noText })
   ] });
 }
 function evaluateFeatureValue(value, dataType) {
@@ -4257,7 +4218,7 @@ function evaluateFeatureValue(value, dataType) {
 
 // src/components/made-with-love.tsx
 import { useState as useState5, useEffect as useEffect4 } from "react";
-import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
 function MadeWithLove({
   className = "",
   size = "md",
@@ -4331,14 +4292,14 @@ function MadeWithLove({
     marginLeft: "4px",
     textDecoration: "none"
   };
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs34(
     "div",
     {
       style: containerStyle,
       className,
       children: [
         "Made with love by",
-        /* @__PURE__ */ jsxs35(
+        /* @__PURE__ */ jsxs34(
           "a",
           {
             href: flamingoUrl,
@@ -4348,14 +4309,14 @@ function MadeWithLove({
             onMouseEnter: () => setIsHovered(true),
             onMouseLeave: () => setIsHovered(false),
             children: [
-              /* @__PURE__ */ jsx42("div", { style: logoStyle, children: /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx40("div", { style: logoStyle, children: /* @__PURE__ */ jsx40(
                 FlamingoLogo2,
                 {
                   size: config.logoSize,
                   color: "#f357bb"
                 }
               ) }),
-              /* @__PURE__ */ jsx42("span", { style: textStyle, children: "Flamingo" })
+              /* @__PURE__ */ jsx40("span", { style: textStyle, children: "Flamingo" })
             ]
           }
         )
@@ -4367,7 +4328,7 @@ function MadeWithLove({
 // src/components/date-time-picker.tsx
 init_cn();
 import DatePicker2 from "react-datepicker";
-import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
 var inputClassName = cn(
   "flex h-10 w-full rounded-md border px-3 py-2 text-sm ring-offset-background",
   "file:border-0 file:bg-transparent file:text-sm file:font-medium",
@@ -4391,9 +4352,9 @@ function DateTimePicker({
   timeIntervals = 15,
   dateFormat = "MMMM d, yyyy h:mm aa"
 }) {
-  return /* @__PURE__ */ jsxs36("div", { className: cn("space-y-2", className), children: [
-    label && /* @__PURE__ */ jsx43(Label, { className: "font-['Azeret_Mono'] text-[12px] font-semibold leading-[1em] tracking-[-0.02em] text-ods-text-secondary uppercase", children: label }),
-    /* @__PURE__ */ jsx43("div", { className: "w-full", children: /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsxs35("div", { className: cn("space-y-2", className), children: [
+    label && /* @__PURE__ */ jsx41(Label, { className: "font-['Azeret_Mono'] text-[12px] font-semibold leading-[1em] tracking-[-0.02em] text-ods-text-secondary uppercase", children: label }),
+    /* @__PURE__ */ jsx41("div", { className: "w-full", children: /* @__PURE__ */ jsx41(
       DatePicker2,
       {
         selected: value,
@@ -4408,7 +4369,7 @@ function DateTimePicker({
         className: inputClassName
       }
     ) }),
-    /* @__PURE__ */ jsx43("style", { dangerouslySetInnerHTML: { __html: `
+    /* @__PURE__ */ jsx41("style", { dangerouslySetInnerHTML: { __html: `
         .react-datepicker-wrapper {
           width: 100% !important;
           display: block !important;
@@ -4513,7 +4474,7 @@ function DateTimePicker({
 
 // src/components/authors/author-detail-view.tsx
 init_cn();
-import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
 function AuthorDetailView({
   author,
   proxyImageUrl,
@@ -4528,9 +4489,9 @@ function AuthorDetailView({
   }) ?? author.avatarUrl : null;
   const subtitle = [author.jobTitle, author.company].filter(Boolean).join(" @ ");
   const bioText = formatBioText(author.about);
-  return /* @__PURE__ */ jsxs37("div", { className: cn("flex flex-col gap-5 md:gap-6", className), children: [
-    /* @__PURE__ */ jsxs37("div", { className: "flex gap-6 w-full items-start", children: [
-      /* @__PURE__ */ jsx44("div", { className: "relative shrink-0 h-24 w-24", children: /* @__PURE__ */ jsx44("div", { className: "rounded-full overflow-hidden bg-ods-bg-secondary border border-ods-border w-full h-full relative", children: proxiedAvatar ? /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs36("div", { className: cn("flex flex-col gap-5 md:gap-6", className), children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex gap-6 w-full items-start", children: [
+      /* @__PURE__ */ jsx42("div", { className: "relative shrink-0 h-24 w-24", children: /* @__PURE__ */ jsx42("div", { className: "rounded-full overflow-hidden bg-ods-bg-secondary border border-ods-border w-full h-full relative", children: proxiedAvatar ? /* @__PURE__ */ jsx42(
         next_image_default,
         {
           src: proxiedAvatar,
@@ -4539,12 +4500,12 @@ function AuthorDetailView({
           className: "object-cover",
           unoptimized: true
         }
-      ) : /* @__PURE__ */ jsx44("div", { className: "flex items-center justify-center h-full w-full text-3xl text-ods-text-secondary font-['Azeret_Mono']", children: author.fullName.charAt(0).toUpperCase() }) }) }),
-      /* @__PURE__ */ jsxs37("div", { className: "min-w-0 flex flex-col justify-center gap-2", children: [
-        /* @__PURE__ */ jsx44("p", { className: "text-h2 text-ods-text-primary leading-none truncate", children: author.fullName }),
-        subtitle && /* @__PURE__ */ jsx44("p", { className: "font-body text-lg text-ods-text-secondary leading-none truncate", children: subtitle }),
+      ) : /* @__PURE__ */ jsx42("div", { className: "flex items-center justify-center h-full w-full text-3xl text-ods-text-secondary font-['Azeret_Mono']", children: author.fullName.charAt(0).toUpperCase() }) }) }),
+      /* @__PURE__ */ jsxs36("div", { className: "min-w-0 flex flex-col justify-center gap-2", children: [
+        /* @__PURE__ */ jsx42("p", { className: "text-h2 text-ods-text-primary leading-none truncate", children: author.fullName }),
+        subtitle && /* @__PURE__ */ jsx42("p", { className: "font-body text-lg text-ods-text-secondary leading-none truncate", children: subtitle }),
         author.socialLinks.length > 0 && // Ghost compact row (transparent 32px) — metadata, not CTAs.
-        /* @__PURE__ */ jsx44(
+        /* @__PURE__ */ jsx42(
           SocialIconRow,
           {
             compact: true,
@@ -4557,8 +4518,8 @@ function AuthorDetailView({
         )
       ] })
     ] }),
-    bioText && /* @__PURE__ */ jsx44("p", { className: "font-body text-base leading-relaxed text-ods-text-secondary", children: bioText }),
-    author.knowsAbout.length > 0 && /* @__PURE__ */ jsx44("div", { className: "flex flex-wrap gap-2", children: author.knowsAbout.map((topic) => /* @__PURE__ */ jsx44(StatusBadge, { text: topic, variant: "button", colorScheme: "cyan", singleLine: true }, topic)) }),
+    bioText && /* @__PURE__ */ jsx42("p", { className: "font-body text-base leading-relaxed text-ods-text-secondary", children: bioText }),
+    author.knowsAbout.length > 0 && /* @__PURE__ */ jsx42("div", { className: "flex flex-wrap gap-2", children: author.knowsAbout.map((topic) => /* @__PURE__ */ jsx42(StatusBadge, { text: topic, variant: "button", colorScheme: "cyan", singleLine: true }, topic)) }),
     children
   ] });
 }
@@ -4803,6 +4764,7 @@ export {
   DEFAULT_CUSTOM_STATUS_COLOR,
   DEFAULT_DOCUMENT_TYPE_TO_TABLE_ID,
   DEFAULT_THEME,
+  DEFAULT_VIDEO_BITES_TITLE,
   DashboardIcon,
   DashboardInfoCard,
   DataRoomDocCard,
@@ -5229,8 +5191,8 @@ export {
   QuickActionChipButton,
   QuickActionChipSkeleton,
   QuickActionMarquee,
-  RATIO_DISPLAY_GRID_CLASS,
   RATIO_GRID_CLASS,
+  RATIO_TO_CSS_ASPECT,
   ROW_HEIGHT_DESKTOP,
   ROW_HEIGHT_MOBILE,
   RadioGroup,
@@ -5446,6 +5408,7 @@ export {
   Video,
   VideoBiteCard,
   VideoBitesDisplay,
+  VideoBitesStrip,
   VideoClipsSection,
   VideoSourceSelector,
   ViewToggle,
@@ -5585,11 +5548,13 @@ export {
   setRealAuthHook,
   showCommandApprovalToast,
   showToast,
+  sortBitesByCreatedAtDesc,
   statusBadgeVariants,
   stripChatAttachmentMarkdown,
   stripSameOriginToPath,
   tagVariants,
   tintOnDark,
+  toStripProfile,
   toggleVariants,
   transformEventToProgram,
   transformPodcastToProgram,