@opensite/ui 2.1.3 → 2.1.5

package/dist/hero-newsletter-minimal.js

@@ -4,7 +4,7 @@ import React3__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useFileUpload, FormEngine } from '@page-speed/forms/integration';
+import { FormEngine } from '@page-speed/forms/integration';
 
 // components/blocks/hero/hero-newsletter-minimal.tsx
 function cn(...inputs) {
@@ -385,6 +385,14 @@ var Section = React3__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var DEFAULT_STYLE_RULES = {
+  formContainer: "mt-10 flex justify-center items-center w-full max-w-md flex-col gap-4 sm:flex-row",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "",
+  successMessageClassName: "text-primary-foreground mt-4 p-3 rounded-md bg-primary",
+  errorMessageClassName: "text-destructive-foreground mt-4 p-3 rounded-md bg-destructive"
+};
 var DEFAULT_FORM_FIELDS = [
   {
     name: "email",
@@ -398,12 +406,7 @@ var DEFAULT_FORM_FIELDS = [
 function HeroNewsletterMinimal({
   heading,
   description,
-  formFields = DEFAULT_FORM_FIELDS,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError,
-  successMessage,
+  formEngineSetup,
   buttonAction,
   helperText,
   formSlot,
@@ -412,25 +415,33 @@ function HeroNewsletterMinimal({
   patternClassName,
   statsSlot,
   background,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  containerClassName = "pmx-auto w-full max-w-7xl relative z-10 px-6 sm:px-6 md:px-8 lg:px-8 flex flex-col items-center justify-center",
   spacing = "xl",
   pattern,
   patternOpacity,
   className,
   headingClassName,
   descriptionClassName,
-  formClassName,
   disclaimerClassName,
   statsClassName
 }) {
-  const {
-    uploadTokens,
-    uploadProgress,
-    isUploading,
-    uploadFiles,
-    removeFile,
-    resetUpload
-  } = useFileUpload({ onError });
+  const formStyleRules = React3.useMemo(() => {
+    return {
+      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES.formContainer,
+      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES.fieldsContainer,
+      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES.fieldClassName,
+      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES.formClassName,
+      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES.successMessageClassName,
+      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES.errorMessageClassName
+    };
+  }, [formEngineSetup?.formLayoutSettings?.styleRules]);
+  const formFields = React3.useMemo(() => {
+    if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
+      return formEngineSetup.fields;
+    } else {
+      return DEFAULT_FORM_FIELDS;
+    }
+  }, [formEngineSetup?.fields]);
   const renderStats = React3.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
@@ -459,6 +470,7 @@ function HeroNewsletterMinimal({
   }, [statsSlot, stats]);
   const renderForm = React3.useMemo(() => {
     if (formSlot) return formSlot;
+    if (!formEngineSetup) return null;
     const defaultButtonAction = {
       label: "Subscribe",
       variant: "default"
@@ -468,51 +480,33 @@ function HeroNewsletterMinimal({
       /* @__PURE__ */ jsx(
         FormEngine,
         {
-          api: formConfig,
-          fields: formFields,
+          ...formEngineSetup,
           formLayoutSettings: {
+            ...formEngineSetup.formLayoutSettings,
             formLayout: "button-group",
             buttonGroupSetup: {
+              ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
               size: "lg",
               submitLabel: /* @__PURE__ */ jsxs(Fragment, { children: [
                 action.label,
                 action.iconAfter
               ] }),
               submitVariant: action.variant || "default"
-            }
+            },
+            styleRules: formStyleRules
           },
-          successMessage,
-          onSubmit,
-          onSuccess: (data) => {
-            resetUpload();
-            onSuccess?.(data);
-          },
-          onError,
-          uploadTokens,
-          uploadProgress,
-          onFileUpload: uploadFiles,
-          onFileRemove: removeFile,
-          isUploading
+          fields: formFields
         }
       ),
       helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
     ] });
   }, [
     formSlot,
-    formFields,
-    formConfig,
+    formEngineSetup,
     buttonAction,
-    uploadTokens,
-    uploadProgress,
-    uploadFiles,
-    removeFile,
-    isUploading,
-    successMessage,
-    onSubmit,
-    onSuccess,
-    onError,
-    helperText,
-    resetUpload
+    formFields,
+    formStyleRules,
+    helperText
   ]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -524,58 +518,40 @@ function HeroNewsletterMinimal({
       patternClassName,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "container flex flex-col items-center justify-center text-center",
-            containerClassName
-          ),
-          children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-              "h1",
-              {
-                className: cn(
-                  "max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-pretty",
-                  headingClassName
-                ),
-                children: heading
-              }
-            ) : heading),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "mt-6 max-w-full md:max-w-lg text-lg md:text-xl text-balance",
-                  descriptionClassName
-                ),
-                children: description
-              }
-            ) : description),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "mt-10 flex w-full max-w-md flex-col gap-4 sm:flex-row",
-                  formClassName
-                ),
-                children: renderForm
-              }
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center", children: [
+        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: cn(
+              "max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-pretty text-center",
+              headingClassName
             ),
-            disclaimer && (typeof disclaimer === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-sm", disclaimerClassName), children: disclaimer }) : disclaimer),
-            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "mt-16 flex flex-wrap items-center justify-center gap-8 md:gap-12",
-                  statsClassName
-                ),
-                children: renderStats
-              }
-            )
-          ]
-        }
-      )
+            children: heading
+          }
+        ) : heading),
+        description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-6 max-w-full md:max-w-lg text-lg md:text-xl text-balance text-center",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : description),
+        renderForm,
+        disclaimer && (typeof disclaimer === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-sm", disclaimerClassName), children: disclaimer }) : disclaimer),
+        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mt-16 flex flex-wrap items-center justify-center gap-8 md:gap-12",
+              statsClassName
+            ),
+            children: renderStats
+          }
+        )
+      ] })
     }
   );
 }

package/dist/hero-saas-dashboard-preview.cjs

@@ -913,7 +913,7 @@ function HeroSaasDashboardPreview({
       className: "h-12"
     };
     const action = buttonAction || defaultButtonAction;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-12 w-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 md:mt-6 w-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
       forms.Form,
       {
         form,
@@ -983,7 +983,7 @@ function HeroSaasDashboardPreview({
   const renderBrowserPreview = React__namespace.useMemo(() => {
     if (browserPreviewSlot) return browserPreviewSlot;
     if (!browserPreview) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mt-20", previewClassName), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mt-12 md:mt-20", previewClassName), children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-10 pointer-events-none" }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -1031,12 +1031,12 @@ function HeroSaasDashboardPreview({
       patternOpacity,
       className: cn(className),
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-10 md:pt-0", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pt-10 md:pt-0 flex flex-col items-center justify-center", children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
-              "mmx-auto text-center flex flex-col items-center gap-6 md:gap-8 max-w-full md:max-w-md",
+              "mx-auto text-center flex flex-col items-center gap-4 md:gap-6 max-w-full md:max-w-md",
               headerClassName
             ),
             children: [

package/dist/hero-saas-dashboard-preview.js

@@ -892,7 +892,7 @@ function HeroSaasDashboardPreview({
       className: "h-12"
     };
     const action = buttonAction || defaultButtonAction;
-    return /* @__PURE__ */ jsx("div", { className: "mt-12 w-full flex items-center justify-center", children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: "mt-4 md:mt-6 w-full flex items-center justify-center", children: /* @__PURE__ */ jsxs(
       Form,
       {
         form,
@@ -962,7 +962,7 @@ function HeroSaasDashboardPreview({
   const renderBrowserPreview = React.useMemo(() => {
     if (browserPreviewSlot) return browserPreviewSlot;
     if (!browserPreview) return null;
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative mt-20", previewClassName), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative mt-12 md:mt-20", previewClassName), children: [
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 pointer-events-none" }),
       /* @__PURE__ */ jsxs(
         "div",
@@ -1010,12 +1010,12 @@ function HeroSaasDashboardPreview({
       patternOpacity,
       className: cn(className),
       containerClassName,
-      children: /* @__PURE__ */ jsxs("div", { className: "pt-10 md:pt-0", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "pt-10 md:pt-0 flex flex-col items-center justify-center", children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "mmx-auto text-center flex flex-col items-center gap-6 md:gap-8 max-w-full md:max-w-md",
+              "mx-auto text-center flex flex-col items-center gap-4 md:gap-6 max-w-full md:max-w-md",
               headerClassName
             ),
             children: [

package/dist/index.cjs

@@ -2633,6 +2633,70 @@ function CommunityInitiatives({
     }
   );
 }
+var MOBILE_CLASSES = {
+  "fit-left": "items-start md:items-center",
+  "fit-center": "items-center",
+  "fit-right": "items-end md:items-center",
+  "full-left": "items-stretch md:items-center",
+  "full-center": "items-stretch md:items-center",
+  "full-right": "items-stretch md:items-center"
+};
+function BlockActions({
+  mobileConfig,
+  actionsClassName,
+  verticalSpacing = "mt-4 md:mt-8",
+  actions,
+  actionsSlot
+}) {
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
+  if (actionsSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { children: actionsSlot });
+  } else if (actions && actions?.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
+          actionsClassName,
+          verticalSpacing
+        ),
+        children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ActionComponent, { action }, index))
+      }
+    );
+  } else {
+    return null;
+  }
+}
+function ActionComponent({ action }) {
+  const {
+    label,
+    icon,
+    iconAfter,
+    children,
+    href,
+    onClick,
+    className: actionClassName,
+    ...pressableProps
+  } = action;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Pressable,
+    {
+      href,
+      onClick,
+      asButton: action.asButton ?? true,
+      className: actionClassName,
+      ...pressableProps,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] })
+    }
+  );
+}
 function AboutCultureTabs({
   badgeText,
   heading,
@@ -2646,7 +2710,7 @@ function AboutCultureTabs({
   ctaImages,
   ctaImagesSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   badgeClassName,
   headingClassName,
@@ -2658,45 +2722,33 @@ function AboutCultureTabs({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "xl",
   pattern,
   patternOpacity
 }) {
   const resolvedAspects = aspects ?? [];
-  const [activeTab, setActiveTab] = React4__namespace.useState(resolvedAspects[0]?.id || "");
-  const actionsContent = React4.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
+  const [activeTab, setActiveTab] = React4__namespace.useState(
+    resolvedAspects[0]?.id || ""
+  );
   const ctaImagesContent = React4.useMemo(() => {
     if (ctaImagesSlot) return ctaImagesSlot;
     if (!ctaImages || ctaImages.length === 0) return null;
-    return ctaImages.map((src, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-square overflow-hidden rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
+    return ctaImages.map((src, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        src,
-        alt: "Team culture",
-        className: "h-full w-full object-cover",
-        optixFlowConfig
-      }
-    ) }, i));
+        className: "relative aspect-square overflow-hidden rounded-md",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          img.Img,
+          {
+            src,
+            alt: "Team culture",
+            className: "h-full w-full object-cover",
+            optixFlowConfig
+          }
+        )
+      },
+      i
+    ));
   }, [ctaImagesSlot, ctaImages, optixFlowConfig]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -2705,14 +2757,32 @@ function AboutCultureTabs({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mb-12 max-w-3xl space-y-4 text-center", headerClassName), children: [
-          badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-block rounded-lg bg-primary/10 px-3 py-1 text-sm", getAccentColor(background), badgeClassName), children: badgeText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badgeText })),
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto mb-12 max-w-full md:max-w-md space-y-4 text-center flex flex-col items-center justify-center",
+              headerClassName
+            ),
+            children: [
+              badgeText && (typeof badgeText === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("px-3 py-1", badgeClassName), children: badgeText }) : badgeText),
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-3xl font-bold tracking-tight md:text-4xl text-pretty",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-balance", descriptionClassName), children: description }) : description)
+            ]
+          }
+        ),
         aspectsSlot ? aspectsSlot : resolvedAspects.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
           Tabs,
           {
@@ -2725,80 +2795,103 @@ function AboutCultureTabs({
                 TabsTrigger,
                 {
                   value: aspect.id,
-                  className: cn("px-3 py-2.5", `data-[state=active]:${getAccentColor(background)}`, "data-[state=active]:text-primary-foreground"),
+                  className: cn("px-3 py-2.5"),
                   children: aspect.title
                 },
                 aspect.id
               )) }) }),
-              resolvedAspects.map((aspect) => /* @__PURE__ */ jsxRuntime.jsxs(TabsContent, { value: aspect.id, className: "space-y-8", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold tracking-tight", children: aspect.title }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", getTextColor(background, "muted")), children: aspect.description })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-0 bg-gradient-to-br from-primary/5 to-primary/10 p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-4 p-6 pt-6", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/quote",
-                        size: 32,
-                        className: cn(getAccentColor(background), "opacity-40")
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("italic", getTextColor(background, "muted")), children: [
-                      '"',
-                      aspect.testimonial.quote,
-                      '"'
+              resolvedAspects.map((aspect) => /* @__PURE__ */ jsxRuntime.jsxs(
+                TabsContent,
+                {
+                  value: aspect.id,
+                  className: "space-y-8",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold tracking-tight", children: aspect.title }),
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed"), children: aspect.description })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "border-0 p-0", children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "space-y-4 p-6 pt-6", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/quote", size: 32 }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "italic", children: [
+                          '"',
+                          aspect.testimonial.quote,
+                          '"'
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 pt-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-10 w-10 overflow-hidden rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+                            img.Img,
+                            {
+                              src: aspect.testimonial.avatar,
+                              alt: aspect.testimonial.author,
+                              className: "h-full w-full object-cover",
+                              optixFlowConfig
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium", children: aspect.testimonial.author }),
+                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: aspect.testimonial.role })
+                          ] })
+                        ] })
+                      ] }) })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 pt-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-10 w-10 overflow-hidden rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(
-                        img.Img,
-                        {
-                          src: aspect.testimonial.avatar,
-                          alt: aspect.testimonial.author,
-                          className: "h-full w-full object-cover",
-                          optixFlowConfig
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-sm font-medium", children: aspect.testimonial.author }),
-                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs", getTextColor(background, "muted")), children: aspect.testimonial.role })
-                      ] })
-                    ] })
-                  ] }) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: aspect.images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "relative aspect-[4/3] overflow-hidden rounded-lg",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      img.Img,
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: aspect.images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
                       {
-                        src: image,
-                        alt: `${aspect.title} culture`,
-                        className: "h-full w-full transform object-cover transition-transform duration-500 hover:scale-105",
-                        optixFlowConfig
-                      }
-                    )
-                  },
-                  idx
-                )) })
-              ] }, aspect.id))
+                        className: "relative aspect-4/3 overflow-hidden rounded-lg",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          img.Img,
+                          {
+                            src: image,
+                            alt: `${aspect.title} culture`,
+                            className: "h-full w-full transform object-cover transition-transform duration-500 hover:scale-105",
+                            optixFlowConfig
+                          }
+                        )
+                      },
+                      idx
+                    )) })
+                  ]
+                },
+                aspect.id
+              ))
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mt-16 rounded-xl border bg-background p-8 md:p-12", ctaClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", ctaHeadingClassName), children: ctaHeading })),
-              ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6", getTextColor(background, "muted"), ctaDescriptionClassName), children: ctaDescription }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", ctaDescriptionClassName), children: ctaDescription })),
-              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-4", actionsClassName), children: actionsContent })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: ctaImagesContent })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-5 -top-5 h-10 w-10 rounded-full bg-primary/10" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-5 -right-5 h-10 w-10 rounded-full bg-primary/10" })
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "relative mt-16 rounded-xl border p-8 md:p-12",
+              ctaClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid items-center gap-8 md:grid-cols-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "h3",
+                    {
+                      className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName),
+                      children: ctaHeading
+                    }
+                  ) : ctaHeading),
+                  ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-6", ctaDescriptionClassName), children: ctaDescription }) : ctaDescription),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    BlockActions,
+                    {
+                      actions,
+                      actionsSlot,
+                      actionsClassName
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: ctaImagesContent })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-5 -top-5 h-10 w-10 rounded-full bg-primary/10" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-5 -right-5 h-10 w-10 rounded-full bg-primary/10" })
+            ]
+          }
+        )
       ]
     }
   );