@flamingo-stack/openframe-frontend-core 0.0.765 → 0.0.766

package/dist/components/layout/title-block.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useIsTruncated } from "../../hooks/ui/use-is-truncated.js";
 import { cn } from "../../utils/cn.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { EntityImage } from "../ui/entity-image.js";
 import { FloatingTooltip } from "../ui/floating-tooltip.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { PageActions } from "../ui/page-actions.js";
 import { BackButton } from "./back-button.js";
 import { PageTitle } from "./page-picture.js";
@@ -30,19 +31,53 @@ function TitleBlock({
   loading,
   loadingActions,
   subtitleRow = "when-set",
-  titleWrap = false
+  titleWrap = false,
+  titleSkeletonLines
 }) {
-  const hasSubtitleRow = !!subtitle || subtitleRow === "always" || subtitleRow === "while-loading" && !!loading;
+  const scoped = useLoadingScope();
+  const titleLoading = !!loading || scoped && title === "";
+  const subtitleLoading = !!loading || scoped && subtitle === "";
+  const hasSubtitleRow = !!subtitle || subtitleRow === "always" || subtitleRow === "while-loading" && !!loading || scoped && subtitle === "";
   const hasActions = actions && actions.length > 0;
   const hasMenuActions = !!menuActions && menuActions.some((g) => g.items.length > 0);
   const titleClass = titleSize === "h1" ? "text-h1" : "text-h2";
   const titleOverflowClass = titleWrap ? "break-words" : "truncate";
   const skeletonSize = TITLE_SKELETON_SIZE[titleSize];
-  const { ref: titleRef, isTruncated: titleTruncated } = useIsTruncated(loading ? null : title);
+  const { ref: titleRef, isTruncated: titleTruncated } = useIsTruncated(
+    titleLoading ? null : title
+  );
   const { ref: subtitleRef, isTruncated: subtitleTruncated } = useIsTruncated(
-    loading ? null : subtitle
+    subtitleLoading ? null : subtitle
   );
-  const titleNode = loading ? /* @__PURE__ */ jsx(
+  const titleNode = titleLoading && titleWrap && titleSkeletonLines ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TextLineSkeleton,
+      {
+        type: "inherit",
+        as: "span",
+        lines: titleSkeletonLines.phone,
+        className: "w-full content-md:hidden"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextLineSkeleton,
+      {
+        type: "inherit",
+        as: "span",
+        lines: titleSkeletonLines.md,
+        className: "hidden w-full content-md:flex content-lg:hidden"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TextLineSkeleton,
+      {
+        type: "inherit",
+        as: "span",
+        lines: titleSkeletonLines.lg,
+        className: "hidden w-full content-lg:flex"
+      }
+    )
+  ] }) : titleLoading ? /* @__PURE__ */ jsx(
     UnifiedSkeleton,
     {
       as: "span",
@@ -74,14 +109,17 @@ function TitleBlock({
           {
             className: cn(
               "flex min-w-0 flex-1 flex-col justify-center gap-[var(--spacing-system-xs)] content-md:max-w-full content-md:flex-none",
-              TITLE_BLOCK_MIN_HEIGHT
+              TITLE_BLOCK_MIN_HEIGHT,
+              // A wrapping title's loading lines stand for a title that fills the row (its typical lines are full ones), so the
+              // column takes the row's width: sized to content it would shrink to the bars' minimum.
+              titleLoading && titleWrap && titleSkeletonLines && "content-md:w-full"
             ),
             children: [
               backButton && /* @__PURE__ */ jsx(BackButton, { onClick: backButton.onClick, label: backButton.label, className: "hidden content-md:inline-flex" }),
-              image || hasSubtitleRow || loading ? /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
+              image || hasSubtitleRow || titleLoading ? /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
                 image && /* @__PURE__ */ jsx(EntityImage, { src: image.src, alt: image.alt, fallbackText: image.alt || title }),
                 /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [
-                  (loading || title) && (titleAdornment ? /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
+                  (titleLoading || title) && (titleAdornment ? /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
                     /* @__PURE__ */ jsx(
                       FloatingTooltip,
                       {
@@ -110,8 +148,8 @@ function TitleBlock({
                     {
                       ref: subtitleRef,
                       className: "truncate text-ods-text-secondary text-h6",
-                      "aria-hidden": !loading && !subtitle ? true : void 0,
-                      children: loading ? /* @__PURE__ */ jsx(
+                      "aria-hidden": !subtitleLoading && !subtitle ? true : void 0,
+                      children: subtitleLoading ? /* @__PURE__ */ jsx(
                         UnifiedSkeleton,
                         {
                           as: "span",

package/dist/components/loading/category-vendor-selector-skeleton.d.ts

@@ -5,6 +5,9 @@ interface CategoryVendorSelectorSkeletonProps {
     subcategories?: number;
     className?: string;
 }
+/**
+ * @deprecated Render the selector itself inside a `LoadingScope`: its parts draw their own skeletons. Kept so hosts on an older release keep compiling; nothing in the lib uses it.
+ */
 export declare function CategoryVendorSelectorSkeleton({ region, subcategories, className, }: CategoryVendorSelectorSkeletonProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=category-vendor-selector-skeleton.d.ts.map

package/dist/components/loading/category-vendor-selector-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"category-vendor-selector-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/category-vendor-selector-skeleton.tsx"],"names":[],"mappings":"AAIA,UAAU,mCAAmC;IAC3C,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,MAAa,EACb,aAAiB,EACjB,SAAS,GACV,EAAE,mCAAmC,+BA8BrC"}
+{"version":3,"file":"category-vendor-selector-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/category-vendor-selector-skeleton.tsx"],"names":[],"mappings":"AAIA,UAAU,mCAAmC;IAC3C,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AAEH,wBAAgB,8BAA8B,CAAC,EAC7C,MAAa,EACb,aAAiB,EACjB,SAAS,GACV,EAAE,mCAAmC,+BA8BrC"}

package/dist/components/loading/deprecated-layout-skeletons.d.ts

@@ -0,0 +1,25 @@
+interface LoadingLayoutProps {
+    className?: string;
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
+}
+/**
+ * @deprecated Draw the blog list itself: its cards draw their own skeletons in a `LoadingScope`. Kept so hosts on an
+ * older release keep compiling.
+ *
+ * Blog Card Grid Skeleton - Always displays exactly 4 blog card skeletons
+ * Used for consistent blog page layout with predictable height
+ */
+export declare function BlogCardGridSkeleton({ className, region }: LoadingLayoutProps): import("react").JSX.Element;
+/**
+ * @deprecated The Slack community section is the host's own component, which draws its own skeleton. Kept so hosts
+ * on an older release keep compiling.
+ *
+ * Slack Community Section Skeleton
+ * Matches SlackCommunity component structure with title, channel list, and chat interface
+ */
+export declare function SlackCommunitySkeleton({ region }?: {
+    region?: boolean;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=deprecated-layout-skeletons.d.ts.map

package/dist/components/loading/deprecated-layout-skeletons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deprecated-layout-skeletons.d.ts","sourceRoot":"","sources":["../../../src/components/loading/deprecated-layout-skeletons.tsx"],"names":[],"mappings":"AAKA,UAAU,kBAAkB;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;GAMG;AAEH,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,MAAa,EAAE,EAAE,kBAAkB,+BAMpF;AAED;;;;;;GAMG;AAEH,wBAAgB,sBAAsB,CAAC,EAAE,MAAa,EAAE,GAAE;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAO,+BAiGlF"}

package/dist/components/loading/deprecated-layout-skeletons.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { CardSkeletonGrid } from "./card-skeleton.js";
+import { LoadingRegion } from "./loading-region.js";
+import { UnifiedSkeleton } from "./unified-skeleton.js";
+function BlogCardGridSkeleton({ className, region = true }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), children: /* @__PURE__ */ jsx(CardSkeletonGrid, { count: 4, variant: "blog", region, className: "grid-cols-1 content-md:grid-cols-2" }) });
+}
+function SlackCommunitySkeleton({ region = true } = {}) {
+  return /* @__PURE__ */ jsx(
+    LoadingRegion,
+    {
+      label: "Loading the Slack community",
+      as: "section",
+      announce: region,
+      className: "w-full bg-ods-bg px-4 py-12 content-md:px-20 content-md:py-20 content-lg:px-20",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-4 content-md:gap-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 max-w-md rounded-lg content-md:h-12 content-lg:h-14" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-col gap-4 content-md:gap-6 content-lg:flex-row content-lg:items-start content-lg:justify-end", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex w-full flex-shrink-0 flex-col overflow-hidden rounded border border-ods-border bg-ods-bg content-lg:w-[290px] content-lg:max-w-[290px]", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-24 rounded" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-16 rounded" })
+              ] }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-32 rounded" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-3 w-16 rounded" }),
+              Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex min-h-[48px] items-center gap-2 px-2 py-3", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-4 rounded" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-1 h-3 w-24 rounded" }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-2 w-16 rounded" })
+                ] })
+              ] }, i))
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "mt-2 border-t border-ods-border pt-3", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-16 rounded" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-8 rounded" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-20 rounded" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-8 rounded" })
+              ] })
+            ] }) })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex h-[450px] min-h-[450px] min-w-0 flex-1 flex-col rounded-lg border border-ods-border bg-ods-card content-md:h-[500px] content-md:min-h-[500px] content-lg:h-[600px] content-lg:min-h-[600px]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex h-[56px] flex-shrink-0 items-center justify-between border-b border-ods-border bg-ods-bg p-4 content-md:h-[60px] content-md:p-6", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-3 rounded content-md:h-4 content-md:w-4" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-24 rounded content-md:h-4 content-md:w-32" })
+              ] }),
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-12 rounded content-md:w-16" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "min-h-[280px] flex-1 space-y-3 overflow-hidden bg-ods-bg p-4 content-md:min-h-[320px] content-md:space-y-4 content-md:p-6 content-lg:min-h-[420px]", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-2 content-md:gap-3", children: [
+              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-10 flex-shrink-0 rounded-lg content-md:h-12 content-md:w-12" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-16 rounded content-md:w-20" }),
+                  /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-12 rounded content-md:w-16" })
+                ] }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-full rounded content-md:h-4" })
+              ] })
+            ] }, i)) }),
+            /* @__PURE__ */ jsx("div", { className: "h-[72px] flex-shrink-0 border-t border-ods-border bg-ods-card p-4 content-md:h-[80px] content-md:p-6", children: /* @__PURE__ */ jsx("div", { className: "flex items-end justify-center gap-3 content-md:justify-end", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-28 rounded-lg content-md:h-12 content-md:w-32" }) }) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  BlogCardGridSkeleton,
+  SlackCommunitySkeleton
+};

package/dist/components/loading/device-card-skeleton.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { LoadingRegion } from "./loading-region.js";
-import { UnifiedSkeleton } from "./unified-skeleton.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "./unified-skeleton.js";
 function DeviceCardSkeleton({ className, moreButton = true, detailsButtonClassName }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -18,16 +18,16 @@ function DeviceCardSkeleton({ className, moreButton = true, detailsButtonClassNa
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-h4", children: [
               /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-4 shrink-0 rounded" }),
-              /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[1lh] w-3/4 rounded" })
+              /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", className: "w-3/4" })
             ] }),
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[1lh] w-1/2 rounded text-h6" })
+            /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-1/2" })
           ] }),
           moreButton && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-3", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-6 rounded" }) }),
           detailsButtonClassName && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn("shrink-0 rounded-[6px]", detailsButtonClassName) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
           /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-20 shrink-0 rounded-md" }),
-          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 text-h6", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[1lh] w-40 max-w-full rounded" }) })
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 text-h6", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", className: "w-40 max-w-full" }) })
         ] })
       ]
     }

package/dist/components/loading/index.d.ts

@@ -1,12 +1,13 @@
-export { AnnouncementBarSkeleton, HeroSkeleton, SearchContainerSkeleton, CategorySidebarSkeleton, BreadcrumbSkeleton, BreadcrumbLinkSkeleton, ResultsHeaderSkeleton, TwoColumnLayoutSkeleton, ArticleLayoutSkeleton, VendorDetailLayoutSkeleton, StatsSectionSkeleton, SlackCommunitySkeleton, BlogCardGridSkeleton, VendorGridSkeleton, } from './page-layout-skeleton';
+export { SearchContainerSkeleton, CategorySidebarSkeleton, BreadcrumbSkeleton, BreadcrumbLinkSkeleton, ResultsHeaderSkeleton, VendorGridSkeleton, } from './page-layout-skeleton';
 export { CardSkeleton, CardSkeletonGrid } from './card-skeleton';
-export { UnifiedSkeleton, TextSkeleton, MediaSkeleton, InteractiveSkeleton } from './unified-skeleton';
+export { UnifiedSkeleton, TextSkeleton, TextLineSkeleton, MediaSkeleton, InteractiveSkeleton, } from './unified-skeleton';
 export { ContentLoadingContainer, useContentLoading } from '../content-loading-container';
 export { ProfileLoadingSkeleton } from '../profile/ProfileLoadingSkeleton';
+export { CategoryCardSkeleton } from './category-card-skeleton';
 export { MspProfileFormSkeleton } from './msp-profile-form-skeleton';
 export { SettingsFormSkeleton, type SettingsFormSkeletonProps } from './settings-form-skeleton';
-export { CategoryCardSkeleton } from './category-card-skeleton';
 export { CategoryVendorSelectorSkeleton } from './category-vendor-selector-skeleton';
+export { BlogCardGridSkeleton, SlackCommunitySkeleton } from './deprecated-layout-skeletons';
 export { WizardLayoutSkeleton } from './wizard-layout-skeleton';
 export { LoadingRegion, type LoadingRegionProps } from './loading-region';
 export { MarginReportSkeleton } from './margin-report-skeleton';

package/dist/components/loading/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/loading/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,uBAAuB,EACvB,YAAY,EACZ,uBAAuB,EACvB,uBAAuB,EACvB,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,0BAA0B,EAC1B,oBAAoB,EACpB,sBAAsB,EACtB,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGjE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAGvG,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAEhG,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AAErF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAOhE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AACtG,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/loading/index.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGjE,OAAO,EACL,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAG1F,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,KAAK,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAChG,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAE7F,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAOhE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAGhE,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AACtG,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/components/loading/index.js

@@ -1,27 +1,26 @@
 import {
-  AnnouncementBarSkeleton,
-  HeroSkeleton,
   SearchContainerSkeleton,
   CategorySidebarSkeleton,
   BreadcrumbSkeleton,
   BreadcrumbLinkSkeleton,
   ResultsHeaderSkeleton,
-  TwoColumnLayoutSkeleton,
-  ArticleLayoutSkeleton,
-  VendorDetailLayoutSkeleton,
-  StatsSectionSkeleton,
-  SlackCommunitySkeleton,
-  BlogCardGridSkeleton,
   VendorGridSkeleton
 } from "./page-layout-skeleton.js";
 import { CardSkeleton, CardSkeletonGrid } from "./card-skeleton.js";
-import { UnifiedSkeleton, TextSkeleton, MediaSkeleton, InteractiveSkeleton } from "./unified-skeleton.js";
+import {
+  UnifiedSkeleton,
+  TextSkeleton,
+  TextLineSkeleton,
+  MediaSkeleton,
+  InteractiveSkeleton
+} from "./unified-skeleton.js";
 import { ContentLoadingContainer, useContentLoading } from "../content-loading-container.js";
 import { ProfileLoadingSkeleton } from "../profile/ProfileLoadingSkeleton.js";
+import { CategoryCardSkeleton } from "./category-card-skeleton.js";
 import { MspProfileFormSkeleton } from "./msp-profile-form-skeleton.js";
 import { SettingsFormSkeleton } from "./settings-form-skeleton.js";
-import { CategoryCardSkeleton } from "./category-card-skeleton.js";
 import { CategoryVendorSelectorSkeleton } from "./category-vendor-selector-skeleton.js";
+import { BlogCardGridSkeleton, SlackCommunitySkeleton } from "./deprecated-layout-skeletons.js";
 import { WizardLayoutSkeleton } from "./wizard-layout-skeleton.js";
 import { LoadingRegion } from "./loading-region.js";
 import { MarginReportSkeleton } from "./margin-report-skeleton.js";
@@ -29,8 +28,6 @@ import { OrganizationIconSkeleton } from "./organization-icon-skeleton.js";
 import { OrganizationCardSkeleton, OrganizationCardSkeletonGrid } from "./organization-card-skeleton.js";
 import { DeviceCardSkeleton, DeviceCardSkeletonGrid } from "./device-card-skeleton.js";
 export {
-  AnnouncementBarSkeleton,
-  ArticleLayoutSkeleton,
   BlogCardGridSkeleton,
   BreadcrumbLinkSkeleton,
   BreadcrumbSkeleton,
@@ -42,7 +39,6 @@ export {
   ContentLoadingContainer,
   DeviceCardSkeleton,
   DeviceCardSkeletonGrid,
-  HeroSkeleton,
   InteractiveSkeleton,
   LoadingRegion,
   MarginReportSkeleton,
@@ -56,11 +52,9 @@ export {
   SearchContainerSkeleton,
   SettingsFormSkeleton,
   SlackCommunitySkeleton,
-  StatsSectionSkeleton,
+  TextLineSkeleton,
   TextSkeleton,
-  TwoColumnLayoutSkeleton,
   UnifiedSkeleton,
-  VendorDetailLayoutSkeleton,
   VendorGridSkeleton,
   WizardLayoutSkeleton,
   useContentLoading

package/dist/components/loading/loading-region.d.ts

@@ -2,14 +2,15 @@ import type { ElementType, HTMLAttributes, ReactNode } from 'react';
 /**
  * THE container of a loading state: the one thing a screen reader hears while it loads.
  *
- * Skeleton bars (`UnifiedSkeleton`, `TextHold`) are decoration and are hidden from assistive technology;
- * a page with forty bars must not announce "loading" forty times. The region around them says it ONCE:
- * `aria-busy` on the container, and one polite status with the label. Few screen readers honour
- * `aria-busy` alone, so the status is what is actually read. When the content replaces the region, the
+ * Skeleton surfaces (`UnifiedSkeleton`, `TextLineSkeleton`, the `InteractiveSkeleton` presets) are decoration and
+ * are hidden from assistive technology; a page with forty bars must not announce "loading" forty times. The region
+ * around them says it ONCE: `aria-busy` on the container, and one polite status with the label. Few screen readers
+ * honour `aria-busy` alone, so the status is what is actually read. When the content replaces the region, the
  * status goes with it.
  *
- * Put it on the top of a loading state (a page's skeleton, a card grid's, a Suspense fallback), never on
- * every card inside it: nested regions would announce again.
+ * Inside a loading scope (`useLoadingScope()`, a streamed page's fallback) the page's own region has already said
+ * it, so a region there draws its container only. Outside one, put it on the top of a loading state (a card grid's,
+ * a client read's), never on every card inside it, or pass `announce={false}` to the inner ones.
  */
 export interface LoadingRegionProps extends HTMLAttributes<HTMLElement> {
     /** What is loading, read once by a screen reader. */
@@ -18,8 +19,8 @@ export interface LoadingRegionProps extends HTMLAttributes<HTMLElement> {
     as?: ElementType;
     /**
      * `false`: only the container is drawn (no `aria-busy`, no status), for a loading state rendered inside
-     * another region, which announces for both. Components expose it as their `region` / `loadingRegion` prop.
-     * Default `true`.
+     * another region, which announces for both. A component that draws a region forwards its own `region` prop
+     * here. Default `true`.
      */
     announce?: boolean;
     /**
@@ -29,5 +30,5 @@ export interface LoadingRegionProps extends HTMLAttributes<HTMLElement> {
     status?: boolean;
     children?: ReactNode;
 }
-export declare function LoadingRegion({ label, as: Tag, announce, status, className, children, ...props }: LoadingRegionProps): import("react").JSX.Element;
+export declare function LoadingRegion({ label, as: Tag, announce: announceGiven, status, className, children, ...props }: LoadingRegionProps): import("react").JSX.Element;
 //# sourceMappingURL=loading-region.d.ts.map

package/dist/components/loading/loading-region.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-region.d.ts","sourceRoot":"","sources":["../../../src/components/loading/loading-region.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACrE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yHAAyH;IACzH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAiB,EACjB,EAAE,EAAE,GAAW,EACf,QAAe,EACf,MAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAapB"}
+{"version":3,"file":"loading-region.d.ts","sourceRoot":"","sources":["../../../src/components/loading/loading-region.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACrE,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yHAAyH;IACzH,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAiB,EACjB,EAAE,EAAE,GAAW,EACf,QAAQ,EAAE,aAAoB,EAC9B,MAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAgBpB"}

package/dist/components/loading/loading-region.js

@@ -1,14 +1,17 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useLoadingScope } from "../ui/loading-scope.js";
 function LoadingRegion({
   label = "Loading",
   as: Tag = "div",
-  announce = true,
+  announce: announceGiven = true,
   status = true,
   className,
   children,
   ...props
 }) {
+  const inScope = useLoadingScope();
+  const announce = announceGiven && !inScope;
   return /* @__PURE__ */ jsxs(Tag, { "aria-busy": announce ? "true" : void 0, className, ...props, children: [
     announce && status && /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: label }),
     children

package/dist/components/loading/msp-profile-form-skeleton.d.ts

@@ -20,6 +20,8 @@ interface SkeletonProps {
  * – Right column: label + input pair per field.
  * – Mobile (<768px) collapses to one column via grid existing classes.
  * – Uses UnifiedSkeleton system to stay consistent with global loading design.
+ *
+ * @deprecated Render the form itself inside a `LoadingScope`: its fields draw their own skeletons. Kept so hosts on an older release keep compiling; nothing in the lib uses it.
  */
 export declare function MspProfileFormSkeleton({ region, className, fields }: SkeletonProps): import("react").JSX.Element;
 export {};

package/dist/components/loading/msp-profile-form-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"msp-profile-form-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/msp-profile-form-skeleton.tsx"],"names":[],"mappings":"AAIA,UAAU,aAAa;IACrB,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,MAAa,EAAE,SAAS,EAAE,MAAU,EAAE,EAAE,aAAa,+BA2B7F"}
+{"version":3,"file":"msp-profile-form-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/msp-profile-form-skeleton.tsx"],"names":[],"mappings":"AAIA,UAAU,aAAa;IACrB,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;GAeG;AAEH,wBAAgB,sBAAsB,CAAC,EAAE,MAAa,EAAE,SAAS,EAAE,MAAU,EAAE,EAAE,aAAa,+BA2B7F"}

package/dist/components/loading/organization-card-skeleton.d.ts

@@ -1,3 +1,14 @@
+/** The card's corner radius, read by `OrganizationCard` and by its skeleton here. */
+export declare const ORGANIZATION_CARD_RADIUS_CLASS = "rounded-[6px]";
+/** The card's layout, read by `OrganizationCard` and by its skeleton here, so the skeleton is the card's size. */
+export declare const ORGANIZATION_CARD_LAYOUT_CLASS = "relative flex w-full flex-col gap-3 overflow-clip p-4";
+export declare const ORGANIZATION_CARD_SURFACE_CLASS = "border border-ods-border bg-ods-card";
+export declare const ORGANIZATION_CARD_HEADER_CLASS = "flex w-full items-start gap-3";
+export declare const ORGANIZATION_CARD_TEXT_CLASS = "flex min-w-0 flex-1 flex-col justify-center py-2";
+export declare const ORGANIZATION_CARD_DESCRIPTION_CLASS = "h-12 w-full overflow-hidden";
+export declare const ORGANIZATION_CARD_FOOTER_CLASS = "flex w-full min-w-0 items-center justify-between gap-2";
+export declare const ORGANIZATION_CARD_STATS_CLASS = "flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4";
+export declare const ORGANIZATION_CARD_STAT_CLASS = "flex flex-shrink-0 items-center gap-1";
 export interface OrganizationCardSkeletonProps {
     /**
      * Additional CSS classes
@@ -15,16 +26,9 @@ export interface OrganizationCardSkeletonProps {
     containerClassName?: string;
 }
 /**
- * OrganizationCardSkeleton - Loading skeleton matching OrganizationCard exact layout
- *
- * Matches VendorCard skeleton structure for 100% visual parity.
- *
- * Structure:
- * - Header: 60x60px org logo + title + subtitle
- * - Description: Fixed 48px height with 2-line clamp
- * - Footer: Stats display area
- *
- * Prevents layout jumps by matching exact dimensions.
+ * OrganizationCard while its organization is read: the card's own layout constants (frame, header, description
+ * box, footer), so it is the card's size by construction. The logo is `EntityImageSkeleton`, the name and its
+ * second line `text-h3` and `text-h6` bars, the description two `text-h4` lines, the footer two stats.
  */
 export declare function OrganizationCardSkeleton({ className, containerClassName, showFooter, showDescription, }: OrganizationCardSkeletonProps): import("react").JSX.Element;
 /**

package/dist/components/loading/organization-card-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"organization-card-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/organization-card-skeleton.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,kBAAkB,EAClB,UAAiB,EACjB,eAAsB,GACvB,EAAE,6BAA6B,+BAuE/B;AAED;;;;;;;GAOG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,MAAa,EACb,KAAU,EACV,SAAS,EACT,kBAAkB,EAClB,UAAiB,EACjB,eAAsB,GACvB,EAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,+BAiBA"}
+{"version":3,"file":"organization-card-skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/loading/organization-card-skeleton.tsx"],"names":[],"mappings":"AAKA,qFAAqF;AACrF,eAAO,MAAM,8BAA8B,kBAAkB,CAAC;AAC9D,kHAAkH;AAClH,eAAO,MAAM,8BAA8B,0DAA0D,CAAC;AACtG,eAAO,MAAM,+BAA+B,yCAAyC,CAAC;AACtF,eAAO,MAAM,8BAA8B,kCAAkC,CAAC;AAC9E,eAAO,MAAM,4BAA4B,qDAAqD,CAAC;AAC/F,eAAO,MAAM,mCAAmC,gCAAgC,CAAC;AACjF,eAAO,MAAM,8BAA8B,2DAA2D,CAAC;AACvG,eAAO,MAAM,6BAA6B,iEAAiE,CAAC;AAC5G,eAAO,MAAM,4BAA4B,0CAA0C,CAAC;AAEpF,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,mFAAmF;IACnF,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAKD;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,kBAAkB,EAClB,UAAiB,EACjB,eAAsB,GACvB,EAAE,6BAA6B,+BAqC/B;AAED;;;;;;;GAOG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,MAAa,EACb,KAAU,EACV,SAAS,EACT,kBAAkB,EAClB,UAAiB,EACjB,eAAsB,GACvB,EAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,+BAiBA"}

package/dist/components/loading/organization-card-skeleton.js

@@ -1,60 +1,49 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
+import { EntityImageSkeleton } from "../ui/entity-image.js";
 import { LoadingRegion } from "./loading-region.js";
-import { OrganizationIconSkeleton } from "./organization-icon-skeleton.js";
-import { TextSkeleton, MediaSkeleton } from "./unified-skeleton.js";
+import { MediaSkeleton, TextLineSkeleton } from "./unified-skeleton.js";
+const ORGANIZATION_CARD_RADIUS_CLASS = "rounded-[6px]";
+const ORGANIZATION_CARD_LAYOUT_CLASS = "relative flex w-full flex-col gap-3 overflow-clip p-4";
+const ORGANIZATION_CARD_SURFACE_CLASS = "border border-ods-border bg-ods-card";
+const ORGANIZATION_CARD_HEADER_CLASS = "flex w-full items-start gap-3";
+const ORGANIZATION_CARD_TEXT_CLASS = "flex min-w-0 flex-1 flex-col justify-center py-2";
+const ORGANIZATION_CARD_DESCRIPTION_CLASS = "h-12 w-full overflow-hidden";
+const ORGANIZATION_CARD_FOOTER_CLASS = "flex w-full min-w-0 items-center justify-between gap-2";
+const ORGANIZATION_CARD_STATS_CLASS = "flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4";
+const ORGANIZATION_CARD_STAT_CLASS = "flex flex-shrink-0 items-center gap-1";
+const ORGANIZATION_CARD_SKELETON_STAT_WIDTHS = ["w-16", "w-20"];
 function OrganizationCardSkeleton({
   className,
   containerClassName,
   showFooter = true,
   showDescription = true
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        containerClassName || "border border-ods-border bg-ods-card",
-        "flex h-full flex-col overflow-hidden rounded-lg",
+        ORGANIZATION_CARD_LAYOUT_CLASS,
+        containerClassName || ORGANIZATION_CARD_SURFACE_CLASS,
+        ORGANIZATION_CARD_RADIUS_CLASS,
         className
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-4", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-3", children: [
-          /* @__PURE__ */ jsx(
-            OrganizationIconSkeleton,
-            {
-              size: "xl",
-              backgroundStyle: "dark",
-              showBackground: true,
-              className: "h-[60px] w-[60px]"
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center space-y-1 py-2", children: [
-            /* @__PURE__ */ jsx(TextSkeleton.Subheading, { className: "w-3/4" }),
-            /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-1/2" })
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: ORGANIZATION_CARD_HEADER_CLASS, children: [
+          /* @__PURE__ */ jsx(EntityImageSkeleton, {}),
+          /* @__PURE__ */ jsxs("div", { className: ORGANIZATION_CARD_TEXT_CLASS, children: [
+            /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "w-3/4" }),
+            /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-1/2" })
           ] })
         ] }),
-        showDescription && /* @__PURE__ */ jsx("div", { className: "flex h-12 w-full items-center overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "w-full space-y-1", children: [
-          /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-full" }),
-          /* @__PURE__ */ jsx(TextSkeleton.Body, { className: "w-2/3" })
-        ] }) }),
-        showFooter && /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-shrink items-center gap-3 content-md:gap-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-1", children: [
-              /* @__PURE__ */ jsx(MediaSkeleton.Icon, { size: "sm", className: "h-5 w-5" }),
-              /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-8" })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center gap-1", children: [
-              /* @__PURE__ */ jsx(MediaSkeleton.Icon, { size: "sm", className: "h-5 w-5" }),
-              /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-10" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 rounded border border-ods-border bg-ods-bg px-2.5 py-1.5", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-sm bg-ods-border", children: /* @__PURE__ */ jsx(MediaSkeleton.Icon, { size: "sm", className: "h-2.5 w-2.5" }) }),
-            /* @__PURE__ */ jsx(TextSkeleton.Caption, { className: "w-16" })
-          ] }) })
-        ] })
-      ] })
+        showDescription && /* @__PURE__ */ jsx("div", { className: ORGANIZATION_CARD_DESCRIPTION_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines: 2, className: "w-full" }) }),
+        showFooter && /* @__PURE__ */ jsx("div", { className: ORGANIZATION_CARD_FOOTER_CLASS, children: /* @__PURE__ */ jsx("div", { className: ORGANIZATION_CARD_STATS_CLASS, children: ORGANIZATION_CARD_SKELETON_STAT_WIDTHS.map((width) => /* @__PURE__ */ jsxs("div", { className: ORGANIZATION_CARD_STAT_CLASS, children: [
+          /* @__PURE__ */ jsx(MediaSkeleton.Icon, { size: "sm" }),
+          /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: width })
+        ] }, width)) }) })
+      ]
     }
   );
 }
@@ -85,6 +74,15 @@ function OrganizationCardSkeletonGrid({
   );
 }
 export {
+  ORGANIZATION_CARD_DESCRIPTION_CLASS,
+  ORGANIZATION_CARD_FOOTER_CLASS,
+  ORGANIZATION_CARD_HEADER_CLASS,
+  ORGANIZATION_CARD_LAYOUT_CLASS,
+  ORGANIZATION_CARD_RADIUS_CLASS,
+  ORGANIZATION_CARD_STATS_CLASS,
+  ORGANIZATION_CARD_STAT_CLASS,
+  ORGANIZATION_CARD_SURFACE_CLASS,
+  ORGANIZATION_CARD_TEXT_CLASS,
   OrganizationCardSkeleton,
   OrganizationCardSkeletonGrid
 };