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

package/dist/components/case-studies/index.cjs

@@ -4,34 +4,35 @@
 var _chunkDTKGIG4Acjs = require('../../chunk-DTKGIG4A.cjs');
 
 
-var _chunk7GUWPGB4cjs = require('../../chunk-7GUWPGB4.cjs');
+var _chunkNJMZ3N7Qcjs = require('../../chunk-NJMZ3N7Q.cjs');
 
 
 
 
 
-var _chunkVL6IXTAIcjs = require('../../chunk-VL6IXTAI.cjs');
-require('../../chunk-ZCU2PYCW.cjs');
-require('../../chunk-GY2JESOC.cjs');
-require('../../chunk-2IFCRPNP.cjs');
+
+var _chunkVRDHAR3Xcjs = require('../../chunk-VRDHAR3X.cjs');
+require('../../chunk-MPTMT773.cjs');
+require('../../chunk-RB7VLVMD.cjs');
+require('../../chunk-ZV45VS6K.cjs');
 require('../../chunk-HQQE74RO.cjs');
 require('../../chunk-DEY6XXGO.cjs');
-require('../../chunk-XCH7SPGI.cjs');
-require('../../chunk-FQSXZC2K.cjs');
+require('../../chunk-XVFM6SJA.cjs');
+require('../../chunk-2JRSYWFP.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-RO72PRQI.cjs');
-require('../../chunk-YUMFVQIN.cjs');
-require('../../chunk-T5FRANE6.cjs');
+require('../../chunk-ZRDMGMY7.cjs');
+require('../../chunk-C42WIUH6.cjs');
+require('../../chunk-7VI7TOGI.cjs');
 
 
 
-var _chunk74ALTXXCcjs = require('../../chunk-74ALTXXC.cjs');
-require('../../chunk-BIA77I6B.cjs');
-require('../../chunk-3RFQPQ7Z.cjs');
-require('../../chunk-GZKWF6NH.cjs');
-require('../../chunk-EFTUFJS2.cjs');
+var _chunkYL6ZB2SRcjs = require('../../chunk-YL6ZB2SR.cjs');
+require('../../chunk-GTONIRJU.cjs');
+require('../../chunk-RNLRS4ID.cjs');
+require('../../chunk-XZ6DKGT4.cjs');
+require('../../chunk-LELS4XMX.cjs');
 require('../../chunk-ZOZR3QI2.cjs');
 require('../../chunk-OMV5S5PI.cjs');
 require('../../chunk-KHPX3KU4.cjs');
@@ -1830,24 +1831,24 @@ require('../../chunk-IYHH5EIO.cjs');
 require('../../chunk-XIBCMGBW.cjs');
 
 
-var _chunkNET74KSQcjs = require('../../chunk-NET74KSQ.cjs');
-require('../../chunk-3RYIF4OW.cjs');
-require('../../chunk-SVP6DJFL.cjs');
+var _chunkTZ4GKUO2cjs = require('../../chunk-TZ4GKUO2.cjs');
+require('../../chunk-XXJL5GY3.cjs');
+require('../../chunk-57B5RUYD.cjs');
 require('../../chunk-JKX2C3I2.cjs');
 require('../../chunk-7DNL734S.cjs');
 require('../../chunk-WWUSFOJ7.cjs');
 require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
-require('../../chunk-NS64LMVE.cjs');
+require('../../chunk-FZB4RMRK.cjs');
 
 
 
 
-var _chunk22XAPV6Ncjs = require('../../chunk-22XAPV6N.cjs');
-require('../../chunk-OJJ4RL2T.cjs');
-require('../../chunk-63N4FN5V.cjs');
-require('../../chunk-M7YZGRAV.cjs');
-require('../../chunk-EQZXJUYV.cjs');
+var _chunkDGNBXZXTcjs = require('../../chunk-DGNBXZXT.cjs');
+require('../../chunk-R3JX4MXD.cjs');
+require('../../chunk-SETFUCZA.cjs');
+require('../../chunk-AAECWUNV.cjs');
+require('../../chunk-JTSUAHDL.cjs');
 require('../../chunk-S5C3OZCO.cjs');
 require('../../chunk-32ASZMTV.cjs');
 require('../../chunk-OOYBIS7D.cjs');
@@ -1856,33 +1857,36 @@ require('../../chunk-6VOOPMP5.cjs');
 require('../../chunk-ORO54HDF.cjs');
 require('../../chunk-RUHKTWGB.cjs');
 require('../../chunk-BLH2SFOO.cjs');
-require('../../chunk-I5MSCD57.cjs');
+require('../../chunk-3LW5TD54.cjs');
 require('../../chunk-ASMNNSUQ.cjs');
 require('../../chunk-CW3ML76U.cjs');
-require('../../chunk-MWLD6NXV.cjs');
-require('../../chunk-R3TWQ3ZJ.cjs');
+require('../../chunk-VFZFCRAL.cjs');
+require('../../chunk-5P4TDV7V.cjs');
 require('../../chunk-DGFDBPO7.cjs');
-require('../../chunk-HOTM4UM6.cjs');
+require('../../chunk-E76ONBKF.cjs');
 require('../../chunk-UJ7AXHRZ.cjs');
-require('../../chunk-HTRILBJD.cjs');
-require('../../chunk-K6VWTUCH.cjs');
-require('../../chunk-AKK3EO37.cjs');
+require('../../chunk-YXDHVHB2.cjs');
+require('../../chunk-FL2RMEDX.cjs');
+require('../../chunk-XIFEZ2JT.cjs');
 require('../../chunk-Z74QE57T.cjs');
 require('../../chunk-XZJCBIYR.cjs');
-require('../../chunk-NO5UJLLQ.cjs');
-require('../../chunk-2QMBXGMQ.cjs');
+
+
+var _chunkWEANWBJHcjs = require('../../chunk-WEANWBJH.cjs');
+
+
+
+var _chunkXFRBEXQNcjs = require('../../chunk-XFRBEXQN.cjs');
+require('../../chunk-TF5D5MNO.cjs');
 require('../../chunk-V45KLJQP.cjs');
+
+
+var _chunk65VVJSQZcjs = require('../../chunk-65VVJSQZ.cjs');
 require('../../chunk-KHKPLOU4.cjs');
-require('../../chunk-L4UI63K6.cjs');
-require('../../chunk-OF336YWG.cjs');
-require('../../chunk-3LU4UFPS.cjs');
-require('../../chunk-RB6BSE3O.cjs');
-require('../../chunk-H3RYUTND.cjs');
-require('../../chunk-3ATAYP36.cjs');
 
 // src/components/case-studies/share-experience-section.tsx
 var _jsxruntime = require('react/jsx-runtime');
-var DEFAULT_TITLE = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk22XAPV6Ncjs.HeadingLines, { children: [
+var DEFAULT_TITLE = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDGNBXZXTcjs.HeadingLines, { children: [
   "Share Your Experience",
   /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     "with Fellow MSPs",
@@ -1907,7 +1911,7 @@ var DEFAULT_CONTACT_FORM_PROPS = {
   buttonVariant: "outline",
   buttonClassName: "w-full",
   successToastMessage: "Thank you! We'll reach out to schedule your case study.",
-  rescue: _chunkNET74KSQcjs.RESCUE_FORMS.caseStudyPitch
+  rescue: _chunkTZ4GKUO2cjs.RESCUE_FORMS.caseStudyPitch
 };
 function ShareExperienceSection({
   title = DEFAULT_TITLE,
@@ -1919,7 +1923,7 @@ function ShareExperienceSection({
 } = {}) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: `flex flex-col gap-10${className ? ` ${className}` : ""}`, children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-ods-text-primary", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-ods-text-primary text-h1", children: _chunk22XAPV6Ncjs.accentSentenceMarks.call(void 0, title) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-ods-text-primary text-h1", children: _chunkDGNBXZXTcjs.accentSentenceMarks.call(void 0, title) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mt-6 max-w-[765px] text-h4", children: subtitle })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "rounded-md border border-ods-border bg-ods-bg p-10", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-10", children: [
@@ -1927,9 +1931,9 @@ function ShareExperienceSection({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-h2", children: howItWorksTitle }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-h4", children: howItWorksBody })
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkVL6IXTAIcjs.BenefitCardGrid, { columns: 4, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkVRDHAR3Xcjs.BenefitCardGrid, { columns: 4, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkVL6IXTAIcjs.BenefitCard,
+          _chunkVRDHAR3Xcjs.BenefitCard,
           {
             icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-12 w-12 items-center justify-center rounded-md border border-ods-border bg-ods-bg p-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMJQLBIZMcjs.G2Icon, { color: "var(--social-g2)", size: 24 }) }),
             title: "G2",
@@ -1938,7 +1942,7 @@ function ShareExperienceSection({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkVL6IXTAIcjs.BenefitCard,
+          _chunkVRDHAR3Xcjs.BenefitCard,
           {
             icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-12 w-12 items-center justify-center rounded-md border border-ods-border bg-ods-bg p-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkA2VKPXOBcjs.CapterraIcon, { size: 24 }) }),
             title: "Capterra",
@@ -1947,7 +1951,7 @@ function ShareExperienceSection({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkVL6IXTAIcjs.BenefitCard,
+          _chunkVRDHAR3Xcjs.BenefitCard,
           {
             icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-12 w-12 items-center justify-center rounded-md border border-ods-border bg-ods-bg p-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTLKSZG3Dcjs.TrustpilotIcon, { size: 24 }) }),
             title: "TrustPilot",
@@ -1956,7 +1960,7 @@ function ShareExperienceSection({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkVL6IXTAIcjs.BenefitCard,
+          _chunkVRDHAR3Xcjs.BenefitCard,
           {
             icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-12 w-12 items-center justify-center rounded-md border border-ods-border bg-ods-bg p-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkILYW6BQNcjs.GetappIcon, { size: 24 }) }),
             title: "GetApp",
@@ -1965,32 +1969,62 @@ function ShareExperienceSection({
           }
         )
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk7GUWPGB4cjs.ContactForm, { ...DEFAULT_CONTACT_FORM_PROPS, ...contactFormProps })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNJMZ3N7Qcjs.ContactForm, { ...DEFAULT_CONTACT_FORM_PROPS, ...contactFormProps })
     ] }) })
   ] });
 }
 
 // src/components/case-studies/entity-quotes-panel.tsx
 
+var QUOTE_CLASS = "flex flex-col gap-[var(--spacing-system-xxs)]";
+var QUOTE_TEXT_CLASS = "text-ods-text-primary text-h4";
+var QUOTE_SPEAKER_CLASS = "text-ods-text-secondary text-h4";
+var QUOTES_SKELETON_ROWS = 3;
 function EntityQuotesPanel({ quotes, className }) {
+  if (_chunkXFRBEXQNcjs.useLoadingScope.call(void 0, )) return null;
   if (!quotes || quotes.length === 0) return null;
+  return (
+    // Optional per record, so the loading state draws none: the gate leaves the loaded panel out of its comparison.
+    // A plain block around the one panel, so the parent's spacing applies to it as it did to the panel.
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { "data-loading-optional": true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkVRDHAR3Xcjs.StackedRowsPanel,
+      {
+        className,
+        title: `${_chunkDTKGIG4Acjs.ENTITY_QUOTES_TITLE} \xB7 ${quotes.length}`,
+        rows: quotes.map((q) => ({
+          id: q.key,
+          columns: [
+            {
+              key: "quote",
+              content: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "blockquote", { className: QUOTE_CLASS, children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: QUOTE_TEXT_CLASS, children: [
+                  "\u201C",
+                  q.text,
+                  "\u201D"
+                ] }),
+                q.speaker && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: QUOTE_SPEAKER_CLASS, children: q.speaker })
+              ] })
+            }
+          ]
+        }))
+      }
+    ) })
+  );
+}
+function EntityQuotesPanelSkeleton({ className }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkVL6IXTAIcjs.StackedRowsPanel,
+    _chunkVRDHAR3Xcjs.StackedRowsPanel,
     {
       className,
-      title: `${_chunkDTKGIG4Acjs.ENTITY_QUOTES_TITLE} \xB7 ${quotes.length}`,
-      rows: quotes.map((q) => ({
-        id: q.key,
+      title: _chunkDTKGIG4Acjs.ENTITY_QUOTES_TITLE,
+      rows: Array.from({ length: QUOTES_SKELETON_ROWS }, (_, i) => ({
+        id: `skeleton-${i}`,
         columns: [
           {
             key: "quote",
-            content: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "blockquote", { className: "flex flex-col gap-[var(--spacing-system-xxs)]", children: [
-              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-ods-text-primary text-h4", children: [
-                "\u201C",
-                q.text,
-                "\u201D"
-              ] }),
-              q.speaker && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-secondary text-h4", children: q.speaker })
+            content: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: QUOTE_CLASS, "aria-hidden": true, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: QUOTE_TEXT_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", lines: 2, className: "w-full" }) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: QUOTE_SPEAKER_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", className: "w-40" }) })
             ] })
           }
         ]
@@ -2001,27 +2035,60 @@ function EntityQuotesPanel({ quotes, className }) {
 
 // src/components/case-studies/quote-cards-strip.tsx
 
-function QuoteCardsStrip({ quotes, className }) {
+var QUOTE_CARD_CLASS = "relative p-[var(--spacing-system-sf)]";
+function QuoteCardTile({ quote, decorative, className, ...props }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _chunkDGNBXZXTcjs.Card,
+    {
+      variant: "panel",
+      "aria-hidden": decorative || void 0,
+      className: _chunk65VVJSQZcjs.cn.call(void 0, QUOTE_CARD_CLASS, "hover:border-ods-border-hover", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.PersonCell, { size: "lg", name: `"${quote.text}"`, secondary: quote.attribution, avatarUrl: quote.logoUrl }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYL6ZB2SRcjs.CardHitLayer, { href: quote.href, label: `${quote.text}, ${quote.attribution}`, decorative })
+      ]
+    }
+  );
+}
+function QuoteCardTileSkeleton({ className }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDGNBXZXTcjs.Card, { variant: "panel", className: _chunk65VVJSQZcjs.cn.call(void 0, QUOTE_CARD_CLASS, className), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEANWBJHcjs.LoadingRegion, { label: "Loading a customer story", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.PersonCellSkeleton, { size: "lg" }) }) });
+}
+var QUOTE_STRIP_FOLD = 4;
+function QuoteCardsStripSkeleton({ fold, className }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkYL6ZB2SRcjs.CardsStrip,
+    {
+      className,
+      showTitle: false,
+      showChevrons: false,
+      autoScroll: false,
+      items: Array.from({ length: fold }, (_, index) => ({ key: `quote-${index}` })),
+      itemKey: (item) => item.key,
+      renderCard: (_item, ctx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QuoteCardTileSkeleton, { className: "shrink-0" }, ctx.cardKey)
+    }
+  );
+}
+function QuoteCardsStrip({ quotes, loading = false, fold = QUOTE_STRIP_FOLD, className }) {
+  const scoped = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
+  if (scoped && quotes.length === 0 || loading) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QuoteCardsStripSkeleton, { fold, className });
   if (quotes.length === 0) return null;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk74ALTXXCcjs.CardsStrip,
+    _chunkYL6ZB2SRcjs.CardsStrip,
     {
       className,
       showTitle: false,
       showChevrons: false,
       items: [...quotes],
       itemKey: (quote) => quote.key,
-      renderCard: (quote, ctx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-        _chunk22XAPV6Ncjs.Card,
+      renderCard: (quote, ctx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        QuoteCardTile,
         {
-          "aria-hidden": ctx.isClone || void 0,
+          quote,
+          decorative: ctx.isClone,
           onPointerEnter: ctx.isTouch ? void 0 : () => ctx.onActivate(ctx.cardKey),
           onPointerLeave: ctx.isTouch ? void 0 : () => ctx.onDeactivate(ctx.cardKey),
-          className: "relative shrink-0 rounded-md border-ods-border bg-ods-card p-[var(--spacing-system-sf)] shadow-none hover:border-ods-border-hover",
-          children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.PersonCell, { size: "lg", name: `"${quote.text}"`, secondary: quote.attribution, avatarUrl: quote.logoUrl }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk74ALTXXCcjs.CardHitLayer, { href: quote.href, label: `${quote.text}, ${quote.attribution}`, decorative: ctx.isClone })
-          ]
+          className: "shrink-0"
         },
         ctx.cardKey
       )
@@ -2032,4 +2099,7 @@ function QuoteCardsStrip({ quotes, className }) {
 
 
 
-exports.EntityQuotesPanel = EntityQuotesPanel; exports.QuoteCardsStrip = QuoteCardsStrip; exports.ShareExperienceSection = ShareExperienceSection;
+
+
+
+exports.EntityQuotesPanel = EntityQuotesPanel; exports.EntityQuotesPanelSkeleton = EntityQuotesPanelSkeleton; exports.QuoteCardTile = QuoteCardTile; exports.QuoteCardTileSkeleton = QuoteCardTileSkeleton; exports.QuoteCardsStrip = QuoteCardsStrip; exports.ShareExperienceSection = ShareExperienceSection;

package/dist/components/case-studies/index.d.ts

@@ -1,4 +1,4 @@
 export { ShareExperienceSection, type ShareExperienceSectionProps } from './share-experience-section';
-export { EntityQuotesPanel, type EntityQuotesPanelProps } from './entity-quotes-panel';
-export { QuoteCardsStrip, type QuoteCard, type QuoteCardsStripProps } from './quote-cards-strip';
+export { EntityQuotesPanel, EntityQuotesPanelSkeleton, type EntityQuotesPanelProps } from './entity-quotes-panel';
+export { QuoteCardTile, QuoteCardTileSkeleton, QuoteCardsStrip, type QuoteCard, type QuoteCardTileProps, type QuoteCardsStripProps } from './quote-cards-strip';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/case-studies/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/case-studies/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,KAAK,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AACtG,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/case-studies/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,KAAK,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AACtG,OAAO,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,KAAK,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAClH,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,KAAK,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/case-studies/index.js

@@ -1,8 +1,11 @@
 import { ShareExperienceSection } from "./share-experience-section.js";
-import { EntityQuotesPanel } from "./entity-quotes-panel.js";
-import { QuoteCardsStrip } from "./quote-cards-strip.js";
+import { EntityQuotesPanel, EntityQuotesPanelSkeleton } from "./entity-quotes-panel.js";
+import { QuoteCardTile, QuoteCardTileSkeleton, QuoteCardsStrip } from "./quote-cards-strip.js";
 export {
   EntityQuotesPanel,
+  EntityQuotesPanelSkeleton,
+  QuoteCardTile,
+  QuoteCardTileSkeleton,
   QuoteCardsStrip,
   ShareExperienceSection
 };

package/dist/components/case-studies/quote-cards-strip.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'react';
 /** One customer quote chip: the line, who said it, their logo, and the case study it opens. */
 export interface QuoteCard {
     key: string;
@@ -9,15 +10,35 @@ export interface QuoteCard {
     /** The case study the quote comes from. */
     href: string;
 }
+export interface QuoteCardTileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    quote: QuoteCard;
+    /** The strip's loop clone: it keeps the click but stays out of the a11y tree. */
+    decorative?: boolean;
+}
+/**
+ * ONE customer quote card: the line as the person's name, who said it beneath,
+ * their logo, and the whole card opening the case study it comes from. The
+ * strip draws one per quote; a page that shows a single story draws one alone.
+ */
+export declare function QuoteCardTile({ quote, decorative, className, ...props }: QuoteCardTileProps): import("react").JSX.Element;
+/** One quote card while it loads: the same card and the person cell's own skeleton. */
+export declare function QuoteCardTileSkeleton({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
 export interface QuoteCardsStripProps {
     quotes: readonly QuoteCard[];
+    /** The quotes are being read (the host's query runs): the strip draws its own skeleton. A page's loading scope does too. */
+    loading?: boolean;
+    /** The quote cards the skeleton draws: one screen of the host's strip. */
+    fold?: number;
     className?: string;
 }
 /**
  * A scrolling row of customer quote chips on THE strip engine every card rail
  * uses (`CardsStrip`, render-prop mode so each chip keeps its natural width).
  * The whole chip opens the case study the quote comes from; the loop clone
- * keeps the click but stays out of the a11y tree. Renders nothing when empty.
+ * keeps the click but stays out of the a11y tree. While its quotes are read (a page's loading scope with none handed
+ * over, or `loading`) it is its own skeleton; read and empty, it renders nothing.
  */
-export declare function QuoteCardsStrip({ quotes, className }: QuoteCardsStripProps): import("react").JSX.Element | null;
+export declare function QuoteCardsStrip({ quotes, loading, fold, className }: QuoteCardsStripProps): import("react").JSX.Element | null;
 //# sourceMappingURL=quote-cards-strip.d.ts.map

package/dist/components/case-studies/quote-cards-strip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quote-cards-strip.d.ts","sourceRoot":"","sources":["../../../src/components/case-studies/quote-cards-strip.tsx"],"names":[],"mappings":"AAOA,+FAA+F;AAC/F,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,WAAW,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,SAAS,SAAS,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,oBAAoB,sCAuB1E"}
+{"version":3,"file":"quote-cards-strip.d.ts","sourceRoot":"","sources":["../../../src/components/case-studies/quote-cards-strip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAS5C,+FAA+F;AAC/F,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,WAAW,EAAE,MAAM,CAAC;IACpB,kDAAkD;IAClD,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC1F,KAAK,EAAE,SAAS,CAAC;IACjB,iFAAiF;IACjF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAID;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAY3F;AAED,uFAAuF;AACvF,wBAAgB,qBAAqB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAQ1E;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,SAAS,SAAS,EAAE,CAAC;IAC7B,4HAA4H;IAC5H,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,OAAe,EAAE,IAAuB,EAAE,SAAS,EAAE,EAAE,oBAAoB,sCAuBpH"}

package/dist/components/case-studies/quote-cards-strip.js

@@ -1,10 +1,49 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
 import { CardHitLayer } from "../features/card-hit-layer.js";
 import { CardsStrip } from "../features/cards-strip.js";
+import { LoadingRegion } from "../loading/loading-region.js";
 import { Card } from "../ui/card.js";
-import { PersonCell } from "../ui/people-cell.js";
-function QuoteCardsStrip({ quotes, className }) {
+import { useLoadingScope } from "../ui/loading-scope.js";
+import { PersonCell, PersonCellSkeleton } from "../ui/people-cell.js";
+const QUOTE_CARD_CLASS = "relative p-[var(--spacing-system-sf)]";
+function QuoteCardTile({ quote, decorative, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      variant: "panel",
+      "aria-hidden": decorative || void 0,
+      className: cn(QUOTE_CARD_CLASS, "hover:border-ods-border-hover", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(PersonCell, { size: "lg", name: `"${quote.text}"`, secondary: quote.attribution, avatarUrl: quote.logoUrl }),
+        /* @__PURE__ */ jsx(CardHitLayer, { href: quote.href, label: `${quote.text}, ${quote.attribution}`, decorative })
+      ]
+    }
+  );
+}
+function QuoteCardTileSkeleton({ className }) {
+  return /* @__PURE__ */ jsx(Card, { variant: "panel", className: cn(QUOTE_CARD_CLASS, className), children: /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading a customer story", children: /* @__PURE__ */ jsx(PersonCellSkeleton, { size: "lg" }) }) });
+}
+const QUOTE_STRIP_FOLD = 4;
+function QuoteCardsStripSkeleton({ fold, className }) {
+  return /* @__PURE__ */ jsx(
+    CardsStrip,
+    {
+      className,
+      showTitle: false,
+      showChevrons: false,
+      autoScroll: false,
+      items: Array.from({ length: fold }, (_, index) => ({ key: `quote-${index}` })),
+      itemKey: (item) => item.key,
+      renderCard: (_item, ctx) => /* @__PURE__ */ jsx(QuoteCardTileSkeleton, { className: "shrink-0" }, ctx.cardKey)
+    }
+  );
+}
+function QuoteCardsStrip({ quotes, loading = false, fold = QUOTE_STRIP_FOLD, className }) {
+  const scoped = useLoadingScope();
+  if (scoped && quotes.length === 0 || loading) return /* @__PURE__ */ jsx(QuoteCardsStripSkeleton, { fold, className });
   if (quotes.length === 0) return null;
   return /* @__PURE__ */ jsx(
     CardsStrip,
@@ -14,17 +53,14 @@ function QuoteCardsStrip({ quotes, className }) {
       showChevrons: false,
       items: [...quotes],
       itemKey: (quote) => quote.key,
-      renderCard: (quote, ctx) => /* @__PURE__ */ jsxs(
-        Card,
+      renderCard: (quote, ctx) => /* @__PURE__ */ jsx(
+        QuoteCardTile,
         {
-          "aria-hidden": ctx.isClone || void 0,
+          quote,
+          decorative: ctx.isClone,
           onPointerEnter: ctx.isTouch ? void 0 : () => ctx.onActivate(ctx.cardKey),
           onPointerLeave: ctx.isTouch ? void 0 : () => ctx.onDeactivate(ctx.cardKey),
-          className: "relative shrink-0 rounded-md border-ods-border bg-ods-card p-[var(--spacing-system-sf)] shadow-none hover:border-ods-border-hover",
-          children: [
-            /* @__PURE__ */ jsx(PersonCell, { size: "lg", name: `"${quote.text}"`, secondary: quote.attribution, avatarUrl: quote.logoUrl }),
-            /* @__PURE__ */ jsx(CardHitLayer, { href: quote.href, label: `${quote.text}, ${quote.attribution}`, decorative: ctx.isClone })
-          ]
+          className: "shrink-0"
         },
         ctx.cardKey
       )
@@ -32,5 +68,7 @@ function QuoteCardsStrip({ quotes, className }) {
   );
 }
 export {
+  QuoteCardTile,
+  QuoteCardTileSkeleton,
   QuoteCardsStrip
 };

package/dist/components/categories-cart.d.ts

@@ -1,3 +1,10 @@
 import type { RealCategoryCardProps } from '../types/category';
 export declare function CategoriesCart({ category, vendors, vendorCount, subcategoryCount, isLoading, className, }: RealCategoryCardProps): import("react").JSX.Element;
+/**
+ * A category card while its category is read: the card's frame, the vendor strip as icon boxes, a bar for the name,
+ * the counts line and two description lines, and the arrow box as it is. Not a link: there is no category yet.
+ */
+export declare function CategoriesCartSkeleton({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
 //# sourceMappingURL=categories-cart.d.ts.map

package/dist/components/categories-cart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"categories-cart.d.ts","sourceRoot":"","sources":["../../src/components/categories-cart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAK/D,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAY,EACZ,WAAe,EACf,gBAAoB,EACpB,SAAiB,EACjB,SAAc,GACf,EAAE,qBAAqB,+BAkEvB"}
+{"version":3,"file":"categories-cart.d.ts","sourceRoot":"","sources":["../../src/components/categories-cart.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAmC/D,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,OAAY,EACZ,WAAe,EACf,gBAAoB,EACpB,SAAiB,EACjB,SAAc,GACf,EAAE,qBAAqB,+BA6CvB;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BA4B3E"}