@opensite/ui 0.5.3 → 0.5.5

package/dist/article-split-animated.js

@@ -1,9 +1,9 @@
 "use client";
+import * as React from 'react';
 import { motion } from 'framer-motion';
 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';
@@ -496,125 +496,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,
@@ -626,20 +507,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,
@@ -650,7 +531,7 @@ function ArticleSplitAnimatedComponent({
 }) {
   const ctaActions = ctaActionsProp ?? (ctaText ? [{ label: ctaText, href: ctaHref || "#", variant: "default", size: "lg" }] : []);
   const MotionWrapper = enableAnimations ? motion.div : "div";
-  const renderCategory = () => {
+  const categoryContent = React.useMemo(() => {
     if (categorySlot) return categorySlot;
     if (!category) return null;
     return /* @__PURE__ */ jsx(
@@ -664,8 +545,8 @@ function ArticleSplitAnimatedComponent({
         children: category
       }
     );
-  };
-  const renderHeroMedia = () => {
+  }, [categorySlot, category, categoryHref, categoryClassName]);
+  const heroMediaContent = React.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx(
@@ -677,8 +558,8 @@ function ArticleSplitAnimatedComponent({
         optixFlowConfig
       }
     );
-  };
-  const renderAuthor = () => {
+  }, [heroMediaSlot, image, imageAlt, title, optixFlowConfig]);
+  const authorContent = React.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-8 flex items-center gap-4", authorClassName), children: [
@@ -691,8 +572,8 @@ function ArticleSplitAnimatedComponent({
         authorRole && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: authorRole })
       ] })
     ] });
-  };
-  const renderCta = () => {
+  }, [authorSlot, authorName, authorImage, authorHref, authorRole, authorClassName]);
+  const ctaContent = React.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaActions || ctaActions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex flex-wrap gap-3", ctaClassName), children: ctaActions.map((action, index) => {
@@ -712,7 +593,7 @@ function ArticleSplitAnimatedComponent({
         index
       );
     }) });
-  };
+  }, [ctaSlot, ctaActions, ctaClassName]);
   const imageAnimationProps = enableAnimations ? {
     initial: { opacity: 0, x: -20 },
     whileInView: { opacity: 1, x: 0 },
@@ -735,9 +616,9 @@ function ArticleSplitAnimatedComponent({
           imageContainerClassName
         ),
         children: [
-          renderHeroMedia(),
+          heroMediaContent,
           /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent" }),
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 p-6", children: renderCategory() })
+          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 p-6", children: categoryContent })
         ]
       }
     ),
@@ -754,8 +635,8 @@ function ArticleSplitAnimatedComponent({
           ] }),
           title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("mt-4 text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", titleClassName), children: title })),
           description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
-          renderAuthor(),
-          renderCta()
+          authorContent,
+          ctaContent
         ]
       }
     )

package/dist/article-toc-sidebar.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React = require('react');
+var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 
 // components/blocks/article/article-toc-sidebar.tsx
@@ -110,7 +110,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React__namespace.useMemo(() => {
+  const linkType = React4__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -131,7 +131,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React__namespace.useMemo(() => {
+  const normalizedHref = React4__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -149,7 +149,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React__namespace.useMemo(() => {
+  const target = React4__namespace.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -162,7 +162,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React__namespace.useMemo(() => {
+  const rel = React4__namespace.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -171,7 +171,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React__namespace.useCallback(
+  const handleClick = React4__namespace.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -355,7 +355,7 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React__namespace.forwardRef(
+var Pressable = React4__namespace.forwardRef(
   ({
     children,
     className,
@@ -461,10 +461,10 @@ function DynamicIcon({
   className,
   alt
 }) {
-  const [svgContent, setSvgContent] = React__namespace.useState(null);
-  const [isLoading, setIsLoading] = React__namespace.useState(true);
-  const [error, setError] = React__namespace.useState(null);
-  const { url, iconName } = React__namespace.useMemo(() => {
+  const [svgContent, setSvgContent] = React4__namespace.useState(null);
+  const [isLoading, setIsLoading] = React4__namespace.useState(true);
+  const [error, setError] = React4__namespace.useState(null);
+  const { url, iconName } = React4__namespace.useMemo(() => {
     const separator = name.includes("/") ? "/" : ":";
     const [prefix, iconName2] = name.split(separator);
     const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
@@ -473,7 +473,7 @@ function DynamicIcon({
       iconName: iconName2
     };
   }, [name, size]);
-  React__namespace.useEffect(() => {
+  React4__namespace.useEffect(() => {
     let isMounted = true;
     const fetchSvg = async () => {
       const cached = svgCache.get(url);
@@ -895,10 +895,10 @@ function ArticleTocSidebarComponent({
   optixFlowConfig
 }) {
   const ctaActions = ctaActionsProp ?? (ctaButtonText ? [{ label: ctaButtonText, href: ctaButtonHref || "#", variant: "default", className: "w-full" }] : []);
-  const [activeSection, setActiveSection] = React__namespace.useState(
+  const [activeSection, setActiveSection] = React4__namespace.useState(
     sections?.[0]?.id || ""
   );
-  React__namespace.useEffect(() => {
+  React4__namespace.useEffect(() => {
     if (!enableTocTracking || !sections || sections.length === 0) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -916,12 +916,12 @@ function ArticleTocSidebarComponent({
     });
     return () => observer.disconnect();
   }, [sections, enableTocTracking]);
-  const renderCategory = () => {
+  const categoryContent = React4__namespace.useMemo(() => {
     if (categorySlot) return categorySlot;
     if (!category) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: category });
-  };
-  const renderAuthor = () => {
+  }, [categorySlot, category]);
+  const authorContent = React4__namespace.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-6 flex items-center gap-4", authorClassName), children: [
@@ -940,8 +940,8 @@ function ArticleTocSidebarComponent({
         ] })
       ] })
     ] });
-  };
-  const renderHeroMedia = () => {
+  }, [authorSlot, authorName, authorImage, authorHref, publishDate, readTime, authorClassName]);
+  const heroMediaContent = React4__namespace.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -953,8 +953,8 @@ function ArticleTocSidebarComponent({
         optixFlowConfig
       }
     );
-  };
-  const renderToc = () => {
+  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
+  const tocContent = React4__namespace.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg border p-4", tocClassName), children: [
@@ -962,7 +962,7 @@ function ArticleTocSidebarComponent({
       /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "space-y-2", children: sections.map((section) => {
         const isActive = activeSection === section.id;
         if (renderSectionLink) {
-          return /* @__PURE__ */ jsxRuntime.jsx(React__namespace.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+          return /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
         }
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
@@ -978,8 +978,8 @@ function ArticleTocSidebarComponent({
         );
       }) })
     ] });
-  };
-  const renderCta = () => {
+  }, [tocSlot, sections, activeSection, renderSectionLink, tocClassName]);
+  const ctaContent = React4__namespace.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaTitle && !ctaDescription && (!ctaActions || ctaActions.length === 0)) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg border bg-muted/50 p-4", ctaClassName), children: [
@@ -1003,21 +1003,21 @@ function ArticleTocSidebarComponent({
         );
       }) })
     ] });
-  };
+  }, [ctaSlot, ctaTitle, ctaDescription, ctaActions, ctaClassName]);
   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-[minmax(0,1fr)_300px]", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-8 not-prose", headerClassName), children: [
-        renderCategory(),
+        categoryContent,
         title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mt-4 text-4xl font-bold tracking-tight md: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()
+        authorContent
       ] }),
-      renderHeroMedia(),
+      heroMediaContent,
       children || defaultArticleContent(optixFlowConfig)
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-8 space-y-6", children: [
-      renderToc(),
-      renderCta()
+      tocContent,
+      ctaContent
     ] }) })
   ] }) }) });
 }

package/dist/article-toc-sidebar.js

@@ -1,5 +1,5 @@
 "use client";
-import * as React from 'react';
+import * as React4 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
@@ -87,7 +87,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React.useMemo(() => {
+  const linkType = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -108,7 +108,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React.useMemo(() => {
+  const normalizedHref = React4.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -126,7 +126,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React.useMemo(() => {
+  const target = React4.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -139,7 +139,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React.useMemo(() => {
+  const rel = React4.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -148,7 +148,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React.useCallback(
+  const handleClick = React4.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -332,7 +332,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React.forwardRef(
+var Pressable = React4.forwardRef(
   ({
     children,
     className,
@@ -438,10 +438,10 @@ function DynamicIcon({
   className,
   alt
 }) {
-  const [svgContent, setSvgContent] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const { url, iconName } = React.useMemo(() => {
+  const [svgContent, setSvgContent] = React4.useState(null);
+  const [isLoading, setIsLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  const { url, iconName } = React4.useMemo(() => {
     const separator = name.includes("/") ? "/" : ":";
     const [prefix, iconName2] = name.split(separator);
     const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
@@ -450,7 +450,7 @@ function DynamicIcon({
       iconName: iconName2
     };
   }, [name, size]);
-  React.useEffect(() => {
+  React4.useEffect(() => {
     let isMounted = true;
     const fetchSvg = async () => {
       const cached = svgCache.get(url);
@@ -872,10 +872,10 @@ function ArticleTocSidebarComponent({
   optixFlowConfig
 }) {
   const ctaActions = ctaActionsProp ?? (ctaButtonText ? [{ label: ctaButtonText, href: ctaButtonHref || "#", variant: "default", className: "w-full" }] : []);
-  const [activeSection, setActiveSection] = React.useState(
+  const [activeSection, setActiveSection] = React4.useState(
     sections?.[0]?.id || ""
   );
-  React.useEffect(() => {
+  React4.useEffect(() => {
     if (!enableTocTracking || !sections || sections.length === 0) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -893,12 +893,12 @@ function ArticleTocSidebarComponent({
     });
     return () => observer.disconnect();
   }, [sections, enableTocTracking]);
-  const renderCategory = () => {
+  const categoryContent = React4.useMemo(() => {
     if (categorySlot) return categorySlot;
     if (!category) return null;
     return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: category });
-  };
-  const renderAuthor = () => {
+  }, [categorySlot, category]);
+  const authorContent = React4.useMemo(() => {
     if (authorSlot) return authorSlot;
     if (!authorName) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("mt-6 flex items-center gap-4", authorClassName), children: [
@@ -917,8 +917,8 @@ function ArticleTocSidebarComponent({
         ] })
       ] })
     ] });
-  };
-  const renderHeroMedia = () => {
+  }, [authorSlot, authorName, authorImage, authorHref, publishDate, readTime, authorClassName]);
+  const heroMediaContent = React4.useMemo(() => {
     if (heroMediaSlot) return heroMediaSlot;
     if (!heroImageSrc) return null;
     return /* @__PURE__ */ jsx(
@@ -930,8 +930,8 @@ function ArticleTocSidebarComponent({
         optixFlowConfig
       }
     );
-  };
-  const renderToc = () => {
+  }, [heroMediaSlot, heroImageSrc, heroImageAlt, heroImageClassName, optixFlowConfig]);
+  const tocContent = React4.useMemo(() => {
     if (tocSlot) return tocSlot;
     if (!sections || sections.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border p-4", tocClassName), children: [
@@ -939,7 +939,7 @@ function ArticleTocSidebarComponent({
       /* @__PURE__ */ jsx("nav", { className: "space-y-2", children: sections.map((section) => {
         const isActive = activeSection === section.id;
         if (renderSectionLink) {
-          return /* @__PURE__ */ jsx(React.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
+          return /* @__PURE__ */ jsx(React4.Fragment, { children: renderSectionLink(section, isActive) }, section.id);
         }
         return /* @__PURE__ */ jsx(
           Pressable,
@@ -955,8 +955,8 @@ function ArticleTocSidebarComponent({
         );
       }) })
     ] });
-  };
-  const renderCta = () => {
+  }, [tocSlot, sections, activeSection, renderSectionLink, tocClassName]);
+  const ctaContent = React4.useMemo(() => {
     if (ctaSlot) return ctaSlot;
     if (!ctaTitle && !ctaDescription && (!ctaActions || ctaActions.length === 0)) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border bg-muted/50 p-4", ctaClassName), children: [
@@ -980,21 +980,21 @@ function ArticleTocSidebarComponent({
         );
       }) })
     ] });
-  };
+  }, [ctaSlot, ctaTitle, ctaDescription, ctaActions, ctaClassName]);
   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-[minmax(0,1fr)_300px]", children: [
     /* @__PURE__ */ jsxs("article", { className: cn("prose max-w-none dark:prose-invert", articleClassName), children: [
       /* @__PURE__ */ jsxs("div", { className: cn("mb-8 not-prose", headerClassName), children: [
-        renderCategory(),
+        categoryContent,
         title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mt-4 text-4xl font-bold tracking-tight md:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", titleClassName), children: title })),
         description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", descriptionClassName), children: description })),
-        renderAuthor()
+        authorContent
       ] }),
-      renderHeroMedia(),
+      heroMediaContent,
       children || defaultArticleContent(optixFlowConfig)
     ] }),
     /* @__PURE__ */ jsx("aside", { className: cn("hidden lg:block", sidebarClassName), children: /* @__PURE__ */ jsxs("div", { className: "sticky top-8 space-y-6", children: [
-      renderToc(),
-      renderCta()
+      tocContent,
+      ctaContent
     ] }) })
   ] }) }) });
 }