@opensite/ui 0.5.3 → 0.5.5

package/dist/article-hero-prose.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var dateFns = require('date-fns');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
-var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
@@ -855,12 +855,12 @@ function ArticleHeroProseComponent({
   optixFlowConfig
 }) {
   const { title, authorName, authorHref, image, pubDate, description, authorImage } = post ?? {};
-  const renderAuthor = () => {
+  const authorContent = React__namespace.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-3 text-sm md:text-base", authorClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: "h-8 w-8 border", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: authorImage }),
+        authorImage && /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: authorImage }),
         /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: authorName.charAt(0) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -871,26 +871,26 @@ function ArticleHeroProseComponent({
         ] })
       ] })
     ] });
-  };
-  const renderHeroMedia = () => {
+  }, [authorSlot, authorName, authorImage, authorHref, pubDate, dateFormat, authorClassName]);
+  const heroMediaContent = React__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       img.Img,
       {
         src: image,
-        alt: "Article hero image",
+        alt: "Hero media",
         className: cn("mt-4 mb-8 aspect-video w-full rounded-lg border object-cover", heroImageClassName),
         optixFlowConfig
       }
     );
-  };
+  }, [heroMediaSlot, image, heroImageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("py-32", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto flex max-w-5xl flex-col items-center gap-4 text-center", headerClassName), children: [
       title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("max-w-3xl text-5xl font-semibold text-pretty md:text-6xl", titleClassName), children: title }),
       description && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("max-w-3xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }),
-      renderAuthor(),
-      renderHeroMedia()
+      authorContent,
+      heroMediaContent
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto prose max-w-3xl dark:prose-invert", proseClassName), children: children || defaultArticleContent(optixFlowConfig) }) })
   ] });

package/dist/article-hero-prose.d.cts

@@ -36,11 +36,11 @@ interface ArticleHeroProseProps {
      */
     descriptionClassName?: string;
     /**
-     * Additional CSS classes for the author info
+     * Additional CSS classes for the author information
      */
     authorClassName?: string;
     /**
-     * Additional CSS classes for the hero image
+     * Additional CSS classes for the hero media
      */
     heroImageClassName?: string;
     /**
@@ -48,7 +48,7 @@ interface ArticleHeroProseProps {
      */
     proseClassName?: string;
     /**
-     * Post metadata (title, author, image, etc.)
+     * Content metadata (title, author, media, etc.)
      */
     post?: ArticleHeroProsePost;
     /**
@@ -56,11 +56,11 @@ interface ArticleHeroProseProps {
      */
     heroMediaSlot?: React.ReactNode;
     /**
-     * Custom slot for author info (overrides post author fields)
+     * Custom slot for author information (overrides post author fields)
      */
     authorSlot?: React.ReactNode;
     /**
-     * Article body content (replaces hardcoded prose)
+     * Main body content
      */
     children?: React.ReactNode;
     /**

package/dist/article-hero-prose.d.ts

@@ -36,11 +36,11 @@ interface ArticleHeroProseProps {
      */
     descriptionClassName?: string;
     /**
-     * Additional CSS classes for the author info
+     * Additional CSS classes for the author information
      */
     authorClassName?: string;
     /**
-     * Additional CSS classes for the hero image
+     * Additional CSS classes for the hero media
      */
     heroImageClassName?: string;
     /**
@@ -48,7 +48,7 @@ interface ArticleHeroProseProps {
      */
     proseClassName?: string;
     /**
-     * Post metadata (title, author, image, etc.)
+     * Content metadata (title, author, media, etc.)
      */
     post?: ArticleHeroProsePost;
     /**
@@ -56,11 +56,11 @@ interface ArticleHeroProseProps {
      */
     heroMediaSlot?: React.ReactNode;
     /**
-     * Custom slot for author info (overrides post author fields)
+     * Custom slot for author information (overrides post author fields)
      */
     authorSlot?: React.ReactNode;
     /**
-     * Article body content (replaces hardcoded prose)
+     * Main body content
      */
     children?: React.ReactNode;
     /**

package/dist/article-hero-prose.js

@@ -1,9 +1,9 @@
 "use client";
+import * as React from 'react';
 import { format } from 'date-fns';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
-import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -832,12 +832,12 @@ function ArticleHeroProseComponent({
   optixFlowConfig
 }) {
   const { title, authorName, authorHref, image, pubDate, description, authorImage } = post ?? {};
-  const renderAuthor = () => {
+  const authorContent = React.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3 text-sm md:text-base", authorClassName), children: [
       /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 border", children: [
-        /* @__PURE__ */ jsx(AvatarImage, { src: authorImage }),
+        authorImage && /* @__PURE__ */ jsx(AvatarImage, { src: authorImage }),
         /* @__PURE__ */ jsx(AvatarFallback, { children: authorName.charAt(0) })
       ] }),
       /* @__PURE__ */ jsxs("span", { children: [
@@ -848,26 +848,26 @@ function ArticleHeroProseComponent({
         ] })
       ] })
     ] });
-  };
-  const renderHeroMedia = () => {
+  }, [authorSlot, authorName, authorImage, authorHref, pubDate, dateFormat, authorClassName]);
+  const heroMediaContent = React.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx(
       Img,
       {
         src: image,
-        alt: "Article hero image",
+        alt: "Hero media",
         className: cn("mt-4 mb-8 aspect-video w-full rounded-lg border object-cover", heroImageClassName),
         optixFlowConfig
       }
     );
-  };
+  }, [heroMediaSlot, image, heroImageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxs("section", { className: cn("py-32", className), children: [
     /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto flex max-w-5xl flex-col items-center gap-4 text-center", headerClassName), children: [
       title && /* @__PURE__ */ jsx("h1", { className: cn("max-w-3xl text-5xl font-semibold text-pretty md:text-6xl", titleClassName), children: title }),
       description && /* @__PURE__ */ jsx("h3", { className: cn("max-w-3xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }),
-      renderAuthor(),
-      renderHeroMedia()
+      authorContent,
+      heroMediaContent
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsx("div", { className: cn("mx-auto prose max-w-3xl dark:prose-invert", proseClassName), children: children || defaultArticleContent(optixFlowConfig) }) })
   ] });

package/dist/article-sidebar-sticky.cjs

@@ -1,10 +1,10 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
-var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
@@ -30,7 +30,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 
-// lib/utils.ts
+// components/blocks/article/article-sidebar-sticky.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -768,8 +768,9 @@ function ArticleSidebarStickyComponent({
   children,
   optixFlowConfig
 }) {
-  const renderBackLink = () => {
+  const backLinkContent = React__namespace.useMemo(() => {
     if (backLinkSlot) return backLinkSlot;
+    if (!backHref && !backText) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Pressable,
       {
@@ -781,8 +782,8 @@ function ArticleSidebarStickyComponent({
         ]
       }
     );
-  };
-  const renderAuthor = (isMobile = false) => {
+  }, [backLinkSlot, backHref, backText, backIcon, backLinkClassName]);
+  const renderAuthor = React__namespace.useCallback((isMobile = false) => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     const avatarSize = isMobile ? "h-8 w-8" : "h-10 w-10";
@@ -796,8 +797,8 @@ function ArticleSidebarStickyComponent({
         publishDate && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: publishDate })
       ] })
     ] });
-  };
-  const renderHeroMedia = () => {
+  }, [authorSlot, authorName, authorImage, authorHref, publishDate, authorClassName]);
+  const heroMediaContent = React__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -809,17 +810,17 @@ function ArticleSidebarStickyComponent({
         optixFlowConfig
       }
     );
-  };
+  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-10 lg:grid-cols-[1fr_minmax(0,2fr)]", children: [
     /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
-      renderBackLink(),
+      backLinkContent,
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: renderAuthor(false) })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 lg:hidden", children: renderBackLink() }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 lg:hidden", children: backLinkContent }),
       title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 lg:hidden", children: renderAuthor(true) }),
-      renderHeroMedia(),
+      heroMediaContent,
       children || defaultArticleContent(optixFlowConfig)
     ] })
   ] }) }) });

package/dist/article-sidebar-sticky.js

@@ -1,13 +1,13 @@
 "use client";
+import * as React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
-import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
-// lib/utils.ts
+// components/blocks/article/article-sidebar-sticky.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -745,8 +745,9 @@ function ArticleSidebarStickyComponent({
   children,
   optixFlowConfig
 }) {
-  const renderBackLink = () => {
+  const backLinkContent = React.useMemo(() => {
     if (backLinkSlot) return backLinkSlot;
+    if (!backHref && !backText) return null;
     return /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -758,8 +759,8 @@ function ArticleSidebarStickyComponent({
         ]
       }
     );
-  };
-  const renderAuthor = (isMobile = false) => {
+  }, [backLinkSlot, backHref, backText, backIcon, backLinkClassName]);
+  const renderAuthor = React.useCallback((isMobile = false) => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     const avatarSize = isMobile ? "h-8 w-8" : "h-10 w-10";
@@ -773,8 +774,8 @@ function ArticleSidebarStickyComponent({
         publishDate && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: publishDate })
       ] })
     ] });
-  };
-  const renderHeroMedia = () => {
+  }, [authorSlot, authorName, authorImage, authorHref, publishDate, authorClassName]);
+  const heroMediaContent = React.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsx(
@@ -786,17 +787,17 @@ function ArticleSidebarStickyComponent({
         optixFlowConfig
       }
     );
-  };
+  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid gap-10 lg:grid-cols-[1fr_minmax(0,2fr)]", children: [
     /* @__PURE__ */ jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-8 space-y-6", children: [
-      renderBackLink(),
+      backLinkContent,
       /* @__PURE__ */ jsx("div", { className: "space-y-4", children: renderAuthor(false) })
     ] }) }),
     /* @__PURE__ */ jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-8 lg:hidden", children: renderBackLink() }),
+      /* @__PURE__ */ jsx("div", { className: "mb-8 lg:hidden", children: backLinkContent }),
       title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
       /* @__PURE__ */ jsx("div", { className: "mt-4 lg:hidden", children: renderAuthor(true) }),
-      renderHeroMedia(),
+      heroMediaContent,
       children || defaultArticleContent(optixFlowConfig)
     ] })
   ] }) }) });

package/dist/article-split-animated.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
+var React = require('react');
 var framerMotion = require('framer-motion');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
-var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
@@ -520,125 +520,6 @@ function Separator({
     }
   );
 }
-
-// lib/mediaPlaceholders.ts
-var imagePlaceholders = [
-  "https://toastability-production.s3.amazonaws.com/xlp46pzk3a4d73jgjx4s7xdafwpn",
-  "https://toastability-production.s3.amazonaws.com/g1iuifb3yzoofo9c7a00koyn6q1t",
-  "https://toastability-production.s3.amazonaws.com/z9u4sdrj2oq3eds0qyui0nxsus3j",
-  "https://toastability-production.s3.amazonaws.com/63aotyt2pb4gqpccej2kkw8reson",
-  "https://toastability-production.s3.amazonaws.com/pjgb223h1bjywdk15i3zi7pjhutg",
-  "https://toastability-production.s3.amazonaws.com/we9r4e711an6d0bd3dwbl9tb9z7q",
-  "https://toastability-production.s3.amazonaws.com/f8rfrurzo743ym1s7m5xtbombunz",
-  "https://toastability-production.s3.amazonaws.com/oe0y4bgiylx81fbfvsw31mhdgjzs",
-  "https://toastability-production.s3.amazonaws.com/sr370c2cnf7uk5k4f6znyshualv0",
-  "https://toastability-production.s3.amazonaws.com/cen5x90p3kbdafb80liq1a5j222x",
-  "https://toastability-production.s3.amazonaws.com/ygob90kp07hxmi5jj4sned76dnmc",
-  "https://toastability-production.s3.amazonaws.com/qhz2kawawq3bbh7nusz3bvahln3v",
-  "https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac",
-  "https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm",
-  "https://toastability-production.s3.amazonaws.com/8x62o6350p1ejm3pjrp1jwvcbh4v",
-  "https://toastability-production.s3.amazonaws.com/vvixyoo7ybq3h04q2q0kact0s5wc",
-  "https://toastability-production.s3.amazonaws.com/t502cfynqso7ntkdvmcmfc87yjkt",
-  "https://toastability-production.s3.amazonaws.com/ihgx63s5nfzp2e93e3ccljjnnrov",
-  "https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6",
-  "https://toastability-production.s3.amazonaws.com/c4sgsy0g7o2rrjmvm9x7evxems82",
-  "https://toastability-production.s3.amazonaws.com/a3m42usevv0iet0fpfwa1fsytxmv",
-  "https://toastability-production.s3.amazonaws.com/qghzqu1i99vaubyew9s5dxcbel9l",
-  "https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw",
-  "https://toastability-production.s3.amazonaws.com/2d4k8d5shwg82276hzj2ztbj7mxq",
-  "https://toastability-production.s3.amazonaws.com/op92dycs7w856e2jsvx20st0nyz9",
-  "https://toastability-production.s3.amazonaws.com/f921uoblxbv8f9bmr4s2ik7xxugl",
-  "https://toastability-production.s3.amazonaws.com/gl7n7p6atndufbsm6q2ac5jeqttp",
-  "https://toastability-production.s3.amazonaws.com/sj8cs2gpbanaowqwxar1uhhwd23z",
-  "https://toastability-production.s3.amazonaws.com/hu4gmd93sp95wdyr9qijze0rgim9",
-  "https://toastability-production.s3.amazonaws.com/uh2vd59np82h8sevbmfnsha89sf1",
-  "https://toastability-production.s3.amazonaws.com/gxs6zevccphti0hdq5l9fwytprpr",
-  "https://toastability-production.s3.amazonaws.com/s4vho0wfbjhf758oife8qfuekou8",
-  "https://toastability-production.s3.amazonaws.com/1b0gd8ul22q799d62dvm3sgyll85",
-  "https://toastability-production.s3.amazonaws.com/102grjqg8aigxkj585s9x3xbxfv7",
-  "https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52",
-  "https://toastability-production.s3.amazonaws.com/50y066ms7rb5sw62u9u08jzkk8rj",
-  "https://toastability-production.s3.amazonaws.com/9uxe0jw1zl1tujy0m5yalo7m2ht8",
-  "https://toastability-production.s3.amazonaws.com/cyhcpla6me8vs936i3fw6wbhypi2",
-  "https://toastability-production.s3.amazonaws.com/6ntdz6xwid3fswjz8y0otdxmzs40",
-  "https://toastability-production.s3.amazonaws.com/y1aezpa78m2fhfvj8whcx337y9cb",
-  "https://toastability-production.s3.amazonaws.com/eoa76d31ynbg34urr6e4619la1f7",
-  "https://toastability-production.s3.amazonaws.com/0mh8a1dg7ftcqnyzgv303u501c8y",
-  "https://toastability-production.s3.amazonaws.com/vvucxqs128w2d0z3n4s2z131rq7p",
-  "https://toastability-production.s3.amazonaws.com/2rbqbw9778770i8izdeabx8v2w2k",
-  "https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz",
-  "https://toastability-production.s3.amazonaws.com/vh1aowwr93yz4qrzct2s4je0cxdo",
-  "https://toastability-production.s3.amazonaws.com/ssgb7unxdwdqokfvhkp7cok2v79s",
-  "https://toastability-production.s3.amazonaws.com/vvkma6b8whdkiq5nq8z4eyfe00vo",
-  "https://toastability-production.s3.amazonaws.com/9797jh6slgbf9oq6lzlimcdiuziv",
-  "https://toastability-production.s3.amazonaws.com/betxbx61fkijt0aygineplf489ze",
-  "https://toastability-production.s3.amazonaws.com/0o6d7z4mm9nzeufhv9kefrhihbip",
-  "https://toastability-production.s3.amazonaws.com/1xdx70c7gp9l883soyh5d3exesvt",
-  "https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c",
-  "https://toastability-production.s3.amazonaws.com/n001o4pfpszmyw03ubctig7kvf0e",
-  "https://toastability-production.s3.amazonaws.com/l080sx0lcx51x44dqrb8006nqf08",
-  "https://toastability-production.s3.amazonaws.com/2t36c7l0ywchaz4nys8yj2l5amae",
-  "https://toastability-production.s3.amazonaws.com/gg5qnvb4nsl2k3g4dw4ls8bsllwh",
-  "https://toastability-production.s3.amazonaws.com/3nqc7xvjy3e8d7jo1gdvbzty0oqg",
-  "https://toastability-production.s3.amazonaws.com/0kx9umbfmv881wt9dfqnohv8efgi",
-  "https://toastability-production.s3.amazonaws.com/9z0sbfnskx70vse99e3dfhper7i1",
-  "https://toastability-production.s3.amazonaws.com/9keidwrag6g7jtqr7rdwb1ryt6ht",
-  "https://toastability-production.s3.amazonaws.com/zm88vf14geh1gh0frd3yrdlb6pl8",
-  "https://toastability-production.s3.amazonaws.com/0x7ktdk01jfaoysst0emzvqevu19",
-  "https://toastability-production.s3.amazonaws.com/e83zsyvl0an0owzdmpwjnnty641x",
-  "https://toastability-production.s3.amazonaws.com/t3k42fbzq7r7j93feldqm5cj1o1n",
-  "https://toastability-production.s3.amazonaws.com/5sm6wc4no8fyzxfki5njmnv6gql5",
-  "https://toastability-production.s3.amazonaws.com/w41h7890eivogu3sr78vlwkpzz8g",
-  "https://toastability-production.s3.amazonaws.com/vrezhtksoqbw1nyo4hwnoqizrus5",
-  "https://toastability-production.s3.amazonaws.com/8qkikcd43paeqgvw9gc1032j3yup",
-  "https://toastability-production.s3.amazonaws.com/ihhq8unynafk4aikmys3rhbfibaz",
-  "https://toastability-production.s3.amazonaws.com/rews5enr9ynu6izioj66s8ec90nc",
-  "https://toastability-production.s3.amazonaws.com/6ku135fhv528eei3agnoc3zd7y75",
-  "https://toastability-production.s3.amazonaws.com/x4scuzhsozrwrg703df5wbhygkgo",
-  "https://toastability-production.s3.amazonaws.com/73e0s79u4crdu7cmjfp99j1l2v55",
-  "https://toastability-production.s3.amazonaws.com/rddfyzvfpdlbzwhgep2myppwxn05",
-  "https://toastability-production.s3.amazonaws.com/mat88x8zzdek7wpgtocjrehfivsh",
-  "https://toastability-production.s3.amazonaws.com/3vwfdbekbkskxj2mvlvu85fz787u",
-  "https://toastability-production.s3.amazonaws.com/ms4s4zyqpmboh0slez1cwat9qhw4",
-  "https://toastability-production.s3.amazonaws.com/5jsc0b4e3gxnjs81iotw2c3e6da3",
-  "https://toastability-production.s3.amazonaws.com/0g6t701zqr2r7najmdgftpeqnxmz",
-  "https://toastability-production.s3.amazonaws.com/u3p1hlbm2c1vvkwlm8h668pe132z",
-  "https://toastability-production.s3.amazonaws.com/ehgbcugs782765ke1l2dtbtzd918",
-  "https://toastability-production.s3.amazonaws.com/kka8f550on7acx1lf82xleu6zhzo",
-  "https://toastability-production.s3.amazonaws.com/67fnapqepn7f8vwt0x4nqho70hbz",
-  "https://toastability-production.s3.amazonaws.com/t4cidbsfz3z468bn45yqdrkbx7ou",
-  "https://toastability-production.s3.amazonaws.com/gq3c9qalkiomu0rzdzxymkdaazdu",
-  "https://toastability-production.s3.amazonaws.com/9ujya2tfhxja7y5s9wb7d2u8crhd",
-  "https://toastability-production.s3.amazonaws.com/hotlo54tsvl2k3eht9gg0460l9zw",
-  "https://toastability-production.s3.amazonaws.com/ytbyjrcvrghc7wl6w1g7g8fwka22",
-  "https://toastability-production.s3.amazonaws.com/uv0g605yf5mz106nrm1uspt9l0rr",
-  "https://toastability-production.s3.amazonaws.com/yrp5k5xszwpe26fquupey6a6g0uu",
-  "https://toastability-production.s3.amazonaws.com/97gctpna2hdozl1f8u5xq4ew8h0o",
-  "https://toastability-production.s3.amazonaws.com/xjtepune0scj9yjkkqgaiwlq9hls",
-  "https://toastability-production.s3.amazonaws.com/g607vblaarqctl1cvgxffhx4pw6g",
-  "https://toastability-production.s3.amazonaws.com/4xpu1ljr9c8g6qzmfum5ygjzbzpb",
-  "https://toastability-production.s3.amazonaws.com/yw5f7iwyypf4kctpr5ye5e495swt",
-  "https://toastability-production.s3.amazonaws.com/z37cidvud212bzqhhalrhvk7ipaa",
-  "https://toastability-production.s3.amazonaws.com/pfllskt7q7144l288lrnpc6gx606",
-  "https://toastability-production.s3.amazonaws.com/fokd3hxzvdtsomagbfhqooyvndyv",
-  "https://toastability-production.s3.amazonaws.com/6fffnb4phovtqkjhtzifs4rhb84u",
-  "https://toastability-production.s3.amazonaws.com/mt87xjr79wxdhjy7496v3r6m2m9t",
-  "https://toastability-production.s3.amazonaws.com/3dy9ge962uarlaf2xl7imdcviqgx",
-  "https://toastability-production.s3.amazonaws.com/okf6fg4n9yv59up8ivgcdjy3w030",
-  "https://toastability-production.s3.amazonaws.com/t7iteqw4xhtppkiws88bsoia25hv",
-  "https://toastability-production.s3.amazonaws.com/klr5tuvulkyqfb721txtu4hgzxdm",
-  "https://toastability-production.s3.amazonaws.com/9eddibiq5ovc9cvs3ekijkrjpahg",
-  "https://toastability-production.s3.amazonaws.com/3ghn8dz3g9qtt4pf4nwbriaydvzb",
-  "https://toastability-production.s3.amazonaws.com/82ykd8s8boiqaxypkulb0v0s2qiw",
-  "https://toastability-production.s3.amazonaws.com/4eqmdeanxfk6jzvigo42y5ryv2c8",
-  "https://toastability-production.s3.amazonaws.com/9ughnl9wnko2vdboib8n3wl3cxsy",
-  "https://toastability-production.s3.amazonaws.com/4xjcgtlwseruezhoh3o1ga4umhj4",
-  "https://toastability-production.s3.amazonaws.com/xwh1zzxgyd887thfm1j9lu9qnd6c",
-  "https://toastability-production.s3.amazonaws.com/ri0dqx79spe6771np76mkmno5xfd",
-  "https://toastability-production.s3.amazonaws.com/e13qu3083lkhdg7th64vb628172a",
-  "https://toastability-production.s3.amazonaws.com/w87w0fyjdol9yzwo7yywkgxidvzo"
-];
 function ArticleSplitAnimatedComponent({
   className,
   containerClassName,
@@ -650,20 +531,20 @@ function ArticleSplitAnimatedComponent({
   categoryClassName,
   metaClassName,
   ctaClassName,
-  title = "The Evolution of Design Systems in Modern Product Development",
-  description = "Explore how design systems have transformed from simple style guides into comprehensive ecosystems that power the world's most successful digital products. Learn the principles, patterns, and practices that make design systems effective.",
-  image = imagePlaceholders[2],
+  title,
+  description,
+  image,
   imageAlt,
   heroMediaSlot,
-  authorName = "David Park",
-  authorImage = imagePlaceholders[10],
-  authorRole = "Design Lead",
+  authorName,
+  authorImage,
+  authorRole,
   authorHref,
   authorSlot,
-  publishDate = "January 15, 2025",
-  readTime = "8 min read",
-  category = "Design",
-  categoryHref = "#",
+  publishDate,
+  readTime,
+  category,
+  categoryHref,
   categorySlot,
   ctaActions: ctaActionsProp,
   ctaText,
@@ -674,7 +555,7 @@ function ArticleSplitAnimatedComponent({
 }) {
   const ctaActions = ctaActionsProp ?? (ctaText ? [{ label: ctaText, href: ctaHref || "#", variant: "default", size: "lg" }] : []);
   const MotionWrapper = enableAnimations ? framerMotion.motion.div : "div";
-  const renderCategory = () => {
+  const categoryContent = React__namespace.useMemo(() => {
     if (categorySlot) return categorySlot;
     if (!category) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -688,8 +569,8 @@ function ArticleSplitAnimatedComponent({
         children: category
       }
     );
-  };
-  const renderHeroMedia = () => {
+  }, [categorySlot, category, categoryHref, categoryClassName]);
+  const heroMediaContent = React__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -701,8 +582,8 @@ function ArticleSplitAnimatedComponent({
         optixFlowConfig
       }
     );
-  };
-  const renderAuthor = () => {
+  }, [heroMediaSlot, image, imageAlt, title, optixFlowConfig]);
+  const authorContent = React__namespace.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-8 flex items-center gap-4", authorClassName), children: [
@@ -715,8 +596,8 @@ function ArticleSplitAnimatedComponent({
         authorRole && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: authorRole })
       ] })
     ] });
-  };
-  const renderCta = () => {
+  }, [authorSlot, authorName, authorImage, authorHref, authorRole, authorClassName]);
+  const ctaContent = React__namespace.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaActions || ctaActions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex flex-wrap gap-3", ctaClassName), children: ctaActions.map((action, index) => {
@@ -736,7 +617,7 @@ function ArticleSplitAnimatedComponent({
         index
       );
     }) });
-  };
+  }, [ctaSlot, ctaActions, ctaClassName]);
   const imageAnimationProps = enableAnimations ? {
     initial: { opacity: 0, x: -20 },
     whileInView: { opacity: 1, x: 0 },
@@ -759,9 +640,9 @@ function ArticleSplitAnimatedComponent({
           imageContainerClassName
         ),
         children: [
-          renderHeroMedia(),
+          heroMediaContent,
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 p-6", children: renderCategory() })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 p-6", children: categoryContent })
         ]
       }
     ),
@@ -778,8 +659,8 @@ function ArticleSplitAnimatedComponent({
           ] }),
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mt-4 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
-          renderAuthor(),
-          renderCta()
+          authorContent,
+          ctaContent
         ]
       }
     )