@opensite/ui 0.5.3 → 0.5.5

package/dist/about-company-profile.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');
 
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/about/about-company-profile.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -477,7 +477,7 @@ function AboutCompanyProfile({
   achievementsDescriptionClassName,
   optixFlowConfig
 }) {
-  const renderBreakout = () => {
+  const breakoutContent = React.useMemo(() => {
     if (breakoutSlot) return breakoutSlot;
     if (!breakout) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col justify-between gap-6 rounded-xl bg-muted p-7 md:w-1/2 lg:w-auto", breakoutClassName), children: [
@@ -509,8 +509,8 @@ function AboutCompanyProfile({
         }
       )
     ] });
-  };
-  const renderCompanies = () => {
+  }, [breakoutSlot, breakout, breakoutClassName, optixFlowConfig]);
+  const companiesContent = React.useMemo(() => {
     if (companiesSlot) return companiesSlot;
     if (!companies || companies.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("py-32", companiesClassName), children: [
@@ -528,15 +528,15 @@ function AboutCompanyProfile({
         ) }, idx);
       }) })
     ] });
-  };
-  const renderAchievements = () => {
+  }, [companiesSlot, companies, companiesClassName, companiesTitle, optixFlowConfig]);
+  const achievementsContent = React.useMemo(() => {
     if (achievementsSlot) return achievementsSlot;
     if (!achievements || achievements.length === 0) return null;
     return achievements.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
       typeof item.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-4xl font-semibold md:text-5xl", children: item.value }) : item.value,
       typeof item.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm md:text-base", children: item.label }) : item.label
     ] }, idx));
-  };
+  }, [achievementsSlot, achievements]);
   return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-14 grid gap-5 text-center md:grid-cols-2 md:text-left", children: [
       title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-5xl font-semibold", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
@@ -553,7 +553,7 @@ function AboutCompanyProfile({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-7 md:flex-row lg:flex-col", children: [
-        (breakoutSlot || breakout) && renderBreakout(),
+        (breakoutSlot || breakout) && breakoutContent,
         secondaryImage && /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
           {
@@ -565,13 +565,13 @@ function AboutCompanyProfile({
         )
       ] })
     ] }),
-    (companiesSlot || companies && companies.length > 0) && renderCompanies(),
+    (companiesSlot || companies && companies.length > 0) && companiesContent,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden rounded-xl bg-muted p-7 md:p-16", achievementsClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 text-center md:text-left", children: [
         achievementsTitle && (typeof achievementsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl", achievementsTitleClassName), children: achievementsTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: achievementsTitleClassName, children: achievementsTitle })),
         achievementsDescription && (typeof achievementsDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-xl text-muted-foreground", achievementsDescriptionClassName), children: achievementsDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: achievementsDescriptionClassName, children: achievementsDescription }))
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-10 grid grid-cols-2 gap-x-4 gap-y-8 text-center lg:grid-cols-4", children: renderAchievements() })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-10 grid grid-cols-2 gap-x-4 gap-y-8 text-center lg:grid-cols-4", children: achievementsContent })
     ] })
   ] }) });
 }

package/dist/about-company-profile.js

@@ -1,12 +1,13 @@
 "use client";
+import * as React from 'react';
+import { useMemo } 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';
 
-// lib/utils.ts
+// components/blocks/about/about-company-profile.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -455,7 +456,7 @@ function AboutCompanyProfile({
   achievementsDescriptionClassName,
   optixFlowConfig
 }) {
-  const renderBreakout = () => {
+  const breakoutContent = useMemo(() => {
     if (breakoutSlot) return breakoutSlot;
     if (!breakout) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col justify-between gap-6 rounded-xl bg-muted p-7 md:w-1/2 lg:w-auto", breakoutClassName), children: [
@@ -487,8 +488,8 @@ function AboutCompanyProfile({
         }
       )
     ] });
-  };
-  const renderCompanies = () => {
+  }, [breakoutSlot, breakout, breakoutClassName, optixFlowConfig]);
+  const companiesContent = useMemo(() => {
     if (companiesSlot) return companiesSlot;
     if (!companies || companies.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: cn("py-32", companiesClassName), children: [
@@ -506,15 +507,15 @@ function AboutCompanyProfile({
         ) }, idx);
       }) })
     ] });
-  };
-  const renderAchievements = () => {
+  }, [companiesSlot, companies, companiesClassName, companiesTitle, optixFlowConfig]);
+  const achievementsContent = useMemo(() => {
     if (achievementsSlot) return achievementsSlot;
     if (!achievements || achievements.length === 0) return null;
     return achievements.map((item, idx) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
       typeof item.value === "string" ? /* @__PURE__ */ jsx("span", { className: "text-4xl font-semibold md:text-5xl", children: item.value }) : item.value,
       typeof item.label === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm md:text-base", children: item.label }) : item.label
     ] }, idx));
-  };
+  }, [achievementsSlot, achievements]);
   return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-14 grid gap-5 text-center md:grid-cols-2 md:text-left", children: [
       title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-5xl font-semibold", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
@@ -531,7 +532,7 @@ function AboutCompanyProfile({
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-7 md:flex-row lg:flex-col", children: [
-        (breakoutSlot || breakout) && renderBreakout(),
+        (breakoutSlot || breakout) && breakoutContent,
         secondaryImage && /* @__PURE__ */ jsx(
           Img,
           {
@@ -543,13 +544,13 @@ function AboutCompanyProfile({
         )
       ] })
     ] }),
-    (companiesSlot || companies && companies.length > 0) && renderCompanies(),
+    (companiesSlot || companies && companies.length > 0) && companiesContent,
     /* @__PURE__ */ jsxs("div", { className: cn("relative overflow-hidden rounded-xl bg-muted p-7 md:p-16", achievementsClassName), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 text-center md:text-left", children: [
         achievementsTitle && (typeof achievementsTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-semibold md:text-4xl", achievementsTitleClassName), children: achievementsTitle }) : /* @__PURE__ */ jsx("div", { className: achievementsTitleClassName, children: achievementsTitle })),
         achievementsDescription && (typeof achievementsDescription === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-xl text-muted-foreground", achievementsDescriptionClassName), children: achievementsDescription }) : /* @__PURE__ */ jsx("div", { className: achievementsDescriptionClassName, children: achievementsDescription }))
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "mt-10 grid grid-cols-2 gap-x-4 gap-y-8 text-center lg:grid-cols-4", children: renderAchievements() })
+      /* @__PURE__ */ jsx("div", { className: "mt-10 grid grid-cols-2 gap-x-4 gap-y-8 text-center lg:grid-cols-4", children: achievementsContent })
     ] })
   ] }) });
 }

package/dist/about-developer-profile.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');
 
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/about/about-developer-profile.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -475,7 +475,7 @@ function AboutDeveloperProfile({
   actionsClassName,
   optixFlowConfig
 }) {
-  const renderSocialLinks = () => {
+  const socialLinksContent = React.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((link, idx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -488,8 +488,8 @@ function AboutDeveloperProfile({
       },
       idx
     ));
-  };
-  const renderSkills = () => {
+  }, [socialLinksSlot, socialLinks]);
+  const skillsContent = React.useMemo(() => {
     if (skillsSlot) return skillsSlot;
     if (!skills || skills.length === 0) return null;
     return skills.map((skill, idx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -500,8 +500,8 @@ function AboutDeveloperProfile({
       },
       idx
     ));
-  };
-  const renderActions = () => {
+  }, [skillsSlot, skills, skillTagClassName]);
+  const actionsContent = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -521,7 +521,7 @@ function AboutDeveloperProfile({
         index
       );
     });
-  };
+  }, [actionsSlot, actions]);
   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: cn("mx-auto max-w-4xl", contentClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row md:items-start", children: [
       avatar && /* @__PURE__ */ jsxRuntime.jsx(
@@ -536,15 +536,15 @@ function AboutDeveloperProfile({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center md:text-left", children: [
         name && (typeof name === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: nameClassName, children: name })),
         role && (typeof role === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 text-xl text-primary", roleClassName), children: role }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", roleClassName), children: role })),
-        (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4 flex justify-center gap-4 md:justify-start", socialLinksClassName), children: renderSocialLinks() })
+        (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4 flex justify-center gap-4 md:justify-start", socialLinksClassName), children: socialLinksContent })
       ] })
     ] }),
     bio && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-12", children: typeof bio === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg text-muted-foreground whitespace-pre-line", bioClassName), children: bio }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: bioClassName, children: bio }) }),
     (skillsSlot || skills && skills.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-12", skillsClassName), children: [
       skillsTitle && (typeof skillsTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: skillsTitle }) : skillsTitle),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: renderSkills() })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: skillsContent })
     ] }),
-    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12 text-center md:text-left", actionsClassName), children: renderActions() })
+    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-12 text-center md:text-left", actionsClassName), children: actionsContent })
   ] }) }) });
 }
 

package/dist/about-developer-profile.js

@@ -1,12 +1,13 @@
 "use client";
+import * as React from 'react';
+import { useMemo } 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';
 
-// lib/utils.ts
+// components/blocks/about/about-developer-profile.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -453,7 +454,7 @@ function AboutDeveloperProfile({
   actionsClassName,
   optixFlowConfig
 }) {
-  const renderSocialLinks = () => {
+  const socialLinksContent = useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((link, idx) => /* @__PURE__ */ jsx(
@@ -466,8 +467,8 @@ function AboutDeveloperProfile({
       },
       idx
     ));
-  };
-  const renderSkills = () => {
+  }, [socialLinksSlot, socialLinks]);
+  const skillsContent = useMemo(() => {
     if (skillsSlot) return skillsSlot;
     if (!skills || skills.length === 0) return null;
     return skills.map((skill, idx) => /* @__PURE__ */ jsx(
@@ -478,8 +479,8 @@ function AboutDeveloperProfile({
       },
       idx
     ));
-  };
-  const renderActions = () => {
+  }, [skillsSlot, skills, skillTagClassName]);
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -499,7 +500,7 @@ function AboutDeveloperProfile({
         index
       );
     });
-  };
+  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl", contentClassName), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-8 md:flex-row md:items-start", children: [
       avatar && /* @__PURE__ */ jsx(
@@ -514,15 +515,15 @@ function AboutDeveloperProfile({
       /* @__PURE__ */ jsxs("div", { className: "text-center md:text-left", children: [
         name && (typeof name === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold", nameClassName), children: name }) : /* @__PURE__ */ jsx("div", { className: nameClassName, children: name })),
         role && (typeof role === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-xl text-primary", roleClassName), children: role }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", roleClassName), children: role })),
-        (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-4 flex justify-center gap-4 md:justify-start", socialLinksClassName), children: renderSocialLinks() })
+        (socialLinksSlot || socialLinks && socialLinks.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-4 flex justify-center gap-4 md:justify-start", socialLinksClassName), children: socialLinksContent })
       ] })
     ] }),
     bio && /* @__PURE__ */ jsx("div", { className: "mt-12", children: typeof bio === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-lg text-muted-foreground whitespace-pre-line", bioClassName), children: bio }) : /* @__PURE__ */ jsx("div", { className: bioClassName, children: bio }) }),
     (skillsSlot || skills && skills.length > 0) && /* @__PURE__ */ jsxs("div", { className: cn("mt-12", skillsClassName), children: [
       skillsTitle && (typeof skillsTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: skillsTitle }) : skillsTitle),
-      /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: renderSkills() })
+      /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: skillsContent })
     ] }),
-    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-12 text-center md:text-left", actionsClassName), children: renderActions() })
+    (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-12 text-center md:text-left", actionsClassName), children: actionsContent })
   ] }) }) });
 }
 

package/dist/about-developer-story.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');
 
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-// lib/utils.ts
+// components/blocks/about/about-developer-story.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -579,7 +579,7 @@ function AboutDeveloperStory({
   storyImageClassName,
   optixFlowConfig
 }) {
-  const renderActions = () => {
+  const actionsContent = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap justify-center gap-4", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -597,8 +597,8 @@ function AboutDeveloperStory({
       },
       idx
     )) });
-  };
-  const renderLogos = () => {
+  }, [actionsSlot, actions, actionsClassName]);
+  const logosContent = React.useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 flex flex-wrap items-center justify-center gap-8 opacity-60", logosClassName), children: logos.map((logo, idx) => {
@@ -614,23 +614,23 @@ function AboutDeveloperStory({
         idx
       );
     }) });
-  };
-  const renderStats = () => {
+  }, [logosSlot, logos, logosClassName, optixFlowConfig]);
+  const statsContent = React.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-20 grid grid-cols-1 gap-8 border-y py-12 md:grid-cols-3", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
       stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-4xl font-bold", children: stat.value }) : stat.value),
       stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-muted-foreground", children: stat.label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: stat.label }))
     ] }, idx)) });
-  };
+  }, [statsSlot, stats, statsClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center gap-8 text-center", children: [
       title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
       description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-2xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-      renderActions()
+      actionsContent
     ] }),
-    renderLogos(),
-    renderStats(),
+    logosContent,
+    statsContent,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-20 grid gap-12 md:grid-cols-2 md:items-center", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
         storyTitle && (typeof storyTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", storyTitleClassName), children: storyTitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: storyTitleClassName, children: storyTitle })),

package/dist/about-developer-story.js

@@ -1,12 +1,13 @@
 "use client";
+import * as React from 'react';
+import { useMemo } 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 } from 'react/jsx-runtime';
 
-// lib/utils.ts
+// components/blocks/about/about-developer-story.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -557,7 +558,7 @@ function AboutDeveloperStory({
   storyImageClassName,
   optixFlowConfig
 }) {
-  const renderActions = () => {
+  const actionsContent = useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap justify-center gap-4", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsxs(
@@ -575,8 +576,8 @@ function AboutDeveloperStory({
       },
       idx
     )) });
-  };
-  const renderLogos = () => {
+  }, [actionsSlot, actions, actionsClassName]);
+  const logosContent = useMemo(() => {
     if (logosSlot) return logosSlot;
     if (!logos || logos.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("mt-20 flex flex-wrap items-center justify-center gap-8 opacity-60", logosClassName), children: logos.map((logo, idx) => {
@@ -592,23 +593,23 @@ function AboutDeveloperStory({
         idx
       );
     }) });
-  };
-  const renderStats = () => {
+  }, [logosSlot, logos, logosClassName, optixFlowConfig]);
+  const statsContent = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("mt-20 grid grid-cols-1 gap-8 border-y py-12 md:grid-cols-3", statsClassName), children: stats.map((stat, idx) => /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
       stat.value && (typeof stat.value === "string" ? /* @__PURE__ */ jsx("p", { className: "text-4xl font-bold", children: stat.value }) : stat.value),
       stat.label && (typeof stat.label === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: stat.label }) : /* @__PURE__ */ jsx("div", { className: "mt-2", children: stat.label }))
     ] }, idx)) });
-  };
+  }, [statsSlot, stats, statsClassName]);
   return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center gap-8 text-center", children: [
       title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight md:text-6xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
       description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-2xl text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-      renderActions()
+      actionsContent
     ] }),
-    renderLogos(),
-    renderStats(),
+    logosContent,
+    statsContent,
     /* @__PURE__ */ jsxs("div", { className: "mt-20 grid gap-12 md:grid-cols-2 md:items-center", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         storyTitle && (typeof storyTitle === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold md:text-4xl", storyTitleClassName), children: storyTitle }) : /* @__PURE__ */ jsx("div", { className: storyTitleClassName, children: storyTitle })),

package/dist/about-interactive-tabs.cjs

@@ -51,15 +51,20 @@ function AboutInteractiveTabs({
   optixFlowConfig
 }) {
   const [activeTab, setActiveTab] = React__namespace.useState(tabs?.[0]?.id ?? "");
-  const activeContent = tabs?.find((tab) => tab.id === activeTab)?.content;
-  const renderTabs = () => {
+  const activeContent = React.useMemo(() => {
+    return tabs?.find((tab) => tab.id === activeTab)?.content;
+  }, [tabs, activeTab]);
+  const handleTabChange = React.useCallback((id) => {
+    setActiveTab(id);
+  }, []);
+  const tabsContent = React.useMemo(() => {
     if (tabsSlot) return tabsSlot;
     if (!tabs || tabs.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-16", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap justify-center gap-2 border-b", tabsContainerClassName), children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
-          onClick: () => setActiveTab(tab.id),
+          onClick: () => handleTabChange(tab.id),
           className: cn(
             "px-6 py-3 text-sm font-medium transition-colors",
             activeTab === tab.id ? cn("border-b-2 border-primary text-primary", activeTabClassName) : "text-muted-foreground hover:text-foreground",
@@ -85,13 +90,13 @@ function AboutInteractiveTabs({
         )
       ] })
     ] });
-  };
+  }, [tabsSlot, tabs, tabsContainerClassName, activeTab, activeTabClassName, tabButtonClassName, handleTabChange, activeContent, tabContentClassName, tabContentTitleClassName, tabContentDescriptionClassName, tabContentImageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
       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 })),
       subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
     ] }),
-    (tabsSlot || tabs && tabs.length > 0) && renderTabs()
+    (tabsSlot || tabs && tabs.length > 0) && tabsContent
   ] }) });
 }
 

package/dist/about-interactive-tabs.js

@@ -1,9 +1,10 @@
 "use client";
 import * as React from 'react';
+import { useMemo, useCallback } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 // components/blocks/about/about-interactive-tabs.tsx
 function cn(...inputs) {
@@ -29,15 +30,20 @@ function AboutInteractiveTabs({
   optixFlowConfig
 }) {
   const [activeTab, setActiveTab] = React.useState(tabs?.[0]?.id ?? "");
-  const activeContent = tabs?.find((tab) => tab.id === activeTab)?.content;
-  const renderTabs = () => {
+  const activeContent = useMemo(() => {
+    return tabs?.find((tab) => tab.id === activeTab)?.content;
+  }, [tabs, activeTab]);
+  const handleTabChange = useCallback((id) => {
+    setActiveTab(id);
+  }, []);
+  const tabsContent = useMemo(() => {
     if (tabsSlot) return tabsSlot;
     if (!tabs || tabs.length === 0) return null;
     return /* @__PURE__ */ jsxs("div", { className: "mt-16", children: [
       /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap justify-center gap-2 border-b", tabsContainerClassName), children: tabs.map((tab) => /* @__PURE__ */ jsx(
         "button",
         {
-          onClick: () => setActiveTab(tab.id),
+          onClick: () => handleTabChange(tab.id),
           className: cn(
             "px-6 py-3 text-sm font-medium transition-colors",
             activeTab === tab.id ? cn("border-b-2 border-primary text-primary", activeTabClassName) : "text-muted-foreground hover:text-foreground",
@@ -63,13 +69,13 @@ function AboutInteractiveTabs({
         )
       ] })
     ] });
-  };
+  }, [tabsSlot, tabs, tabsContainerClassName, activeTab, activeTabClassName, tabButtonClassName, handleTabChange, activeContent, tabContentClassName, tabContentTitleClassName, tabContentDescriptionClassName, tabContentImageClassName, optixFlowConfig]);
   return /* @__PURE__ */ jsx("section", { className: cn("py-32", className), children: /* @__PURE__ */ jsxs("div", { className: cn("container", containerClassName), children: [
     /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
       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 })),
       subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsx("div", { className: cn("mt-4", subtitleClassName), children: subtitle }))
     ] }),
-    (tabsSlot || tabs && tabs.length > 0) && renderTabs()
+    (tabsSlot || tabs && tabs.length > 0) && tabsContent
   ] }) });
 }