@opensite/ui 1.8.7 → 1.8.9

package/dist/hero-community-survey-cta.cjs

@@ -930,7 +930,16 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+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,
@@ -943,13 +952,17 @@ function BlockActions({
         icon,
         iconAfter,
         children,
+        href,
+        onClick,
         className: actionClassName,
         ...pressableProps
       } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
-          asButton: true,
+          href,
+          onClick,
+          asButton: action.asButton || true,
           className: actionClassName,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -963,6 +976,9 @@ function BlockActions({
     },
     []
   );
+  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) {
@@ -971,6 +987,7 @@ function BlockActions({
       {
         className: cn(
           "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
           actionsClassName,
           verticalSpacing
         ),

package/dist/hero-community-survey-cta.js

@@ -909,7 +909,16 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+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,
@@ -922,13 +931,17 @@ function BlockActions({
         icon,
         iconAfter,
         children,
+        href,
+        onClick,
         className: actionClassName,
         ...pressableProps
       } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
-          asButton: true,
+          href,
+          onClick,
+          asButton: action.asButton || true,
           className: actionClassName,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -942,6 +955,9 @@ function BlockActions({
     },
     []
   );
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
   if (actionsSlot) {
     return /* @__PURE__ */ jsx("div", { children: actionsSlot });
   } else if (actions && actions?.length > 0) {
@@ -950,6 +966,7 @@ function BlockActions({
       {
         className: cn(
           "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
           actionsClassName,
           verticalSpacing
         ),

package/dist/hero-stats-social-proof.cjs

@@ -858,7 +858,16 @@ var Pressable = React3__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+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,
@@ -871,13 +880,17 @@ function BlockActions({
         icon,
         iconAfter,
         children,
+        href,
+        onClick,
         className: actionClassName,
         ...pressableProps
       } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
-          asButton: true,
+          href,
+          onClick,
+          asButton: action.asButton || true,
           className: actionClassName,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -891,6 +904,9 @@ function BlockActions({
     },
     []
   );
+  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) {
@@ -899,6 +915,7 @@ function BlockActions({
       {
         className: cn(
           "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
           actionsClassName,
           verticalSpacing
         ),
@@ -923,10 +940,10 @@ function HeroStatsSocialProof({
   statusCard,
   statusCardSlot,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   badgeClassName,
@@ -997,7 +1014,8 @@ function HeroStatsSocialProof({
             {
               actions,
               actionsClassName,
-              actionsSlot
+              actionsSlot,
+              mobileConfig: { position: "left", width: "fit" }
             }
           ),
           (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/hero-stats-social-proof.d.cts

@@ -115,6 +115,6 @@ interface HeroStatsSocialProofProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroStatsSocialProof({ badge, badgeIcon, heading, description, actions, actionsSlot, stats, statsSlot, imageSrc, imageAlt, statusCard, statusCardSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, imageClassName, optixFlowConfig, }: HeroStatsSocialProofProps): React.JSX.Element;
+declare function HeroStatsSocialProof({ badge, badgeIcon, heading, description, actions, actionsSlot, stats, statsSlot, imageSrc, imageAlt, statusCard, statusCardSlot, background, pattern, patternOpacity, className, spacing, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, imageClassName, optixFlowConfig, }: HeroStatsSocialProofProps): React.JSX.Element;
 
 export { HeroStatsSocialProof, type HeroStatsSocialProofProps };

package/dist/hero-stats-social-proof.d.ts

@@ -115,6 +115,6 @@ interface HeroStatsSocialProofProps {
      */
     optixFlowConfig?: OptixFlowConfig;
 }
-declare function HeroStatsSocialProof({ badge, badgeIcon, heading, description, actions, actionsSlot, stats, statsSlot, imageSrc, imageAlt, statusCard, statusCardSlot, background, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, imageClassName, optixFlowConfig, }: HeroStatsSocialProofProps): React.JSX.Element;
+declare function HeroStatsSocialProof({ badge, badgeIcon, heading, description, actions, actionsSlot, stats, statsSlot, imageSrc, imageAlt, statusCard, statusCardSlot, background, pattern, patternOpacity, className, spacing, containerClassName, contentClassName, badgeClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, imageClassName, optixFlowConfig, }: HeroStatsSocialProofProps): React.JSX.Element;
 
 export { HeroStatsSocialProof, type HeroStatsSocialProofProps };

package/dist/hero-stats-social-proof.js

@@ -837,7 +837,16 @@ var Pressable = React3.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+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,
@@ -850,13 +859,17 @@ function BlockActions({
         icon,
         iconAfter,
         children,
+        href,
+        onClick,
         className: actionClassName,
         ...pressableProps
       } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
-          asButton: true,
+          href,
+          onClick,
+          asButton: action.asButton || true,
           className: actionClassName,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -870,6 +883,9 @@ function BlockActions({
     },
     []
   );
+  const width = mobileConfig?.width ?? "full";
+  const position = mobileConfig?.position ?? "center";
+  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
   if (actionsSlot) {
     return /* @__PURE__ */ jsx("div", { children: actionsSlot });
   } else if (actions && actions?.length > 0) {
@@ -878,6 +894,7 @@ function BlockActions({
       {
         className: cn(
           "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
           actionsClassName,
           verticalSpacing
         ),
@@ -902,10 +919,10 @@ function HeroStatsSocialProof({
   statusCard,
   statusCardSlot,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   badgeClassName,
@@ -976,7 +993,8 @@ function HeroStatsSocialProof({
             {
               actions,
               actionsClassName,
-              actionsSlot
+              actionsSlot,
+              mobileConfig: { position: "left", width: "fit" }
             }
           ),
           (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(

package/dist/registry.cjs

@@ -7269,7 +7269,16 @@ function FooterNavSocial({
     }
   );
 }
+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,
@@ -7282,13 +7291,17 @@ function BlockActions({
         icon,
         iconAfter,
         children,
+        href,
+        onClick,
         className: actionClassName,
         ...pressableProps
       } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
-          asButton: true,
+          href,
+          onClick,
+          asButton: action.asButton || true,
           className: actionClassName,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -7302,6 +7315,9 @@ function BlockActions({
     },
     []
   );
+  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) {
@@ -7310,6 +7326,7 @@ function BlockActions({
       {
         className: cn(
           "flex flex-col md:flex-row flex-wrap gap-4",
+          mobileLayoutClass,
           actionsClassName,
           verticalSpacing
         ),
@@ -7333,7 +7350,6 @@ function AboutDeveloperProfile({
   actions,
   actionsSlot,
   className,
-  containerClassName,
   contentClassName,
   nameClassName,
   roleClassName,
@@ -7345,7 +7361,8 @@ function AboutDeveloperProfile({
   actionsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   pattern,
   patternOpacity
 }) {
@@ -7385,7 +7402,7 @@ function AboutDeveloperProfile({
       spacing,
       pattern,
       patternOpacity,
-      className: cn(className),
+      className,
       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: [
@@ -8272,25 +8289,10 @@ function AboutStoryExpertise({
   const storyContent = React56.useMemo(() => {
     if (storySlot) return storySlot;
     if (!storyParagraphs || storyParagraphs.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-4", getTextColor(background, "muted"), storyClassName), children: storyParagraphs.map(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-4", storyClassName), children: storyParagraphs.map(
       (paragraph, idx) => typeof paragraph === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { children: paragraph }, idx) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: paragraph }, idx)
     ) });
   }, [storySlot, storyParagraphs, storyClassName]);
-  const actionsContent = React56.useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-wrap gap-4", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-      Pressable,
-      {
-        href: action.href,
-        onClick: action.onClick,
-        size: action.size || "lg",
-        variant: action.variant || "default",
-        children: action.label
-      },
-      idx
-    )) });
-  }, [actionsSlot, actions, actionsClassName]);
   const highlightContent = React56.useMemo(() => {
     if (highlightSlot) return highlightSlot;
     if (!highlight) return null;
@@ -8298,18 +8300,26 @@ function AboutStoryExpertise({
       "div",
       {
         className: cn(
-          "rounded-2xl border border-border/60 bg-background/90 p-6 shadow-xl",
+          "rounded-2xl border border-border/60 p-6 shadow-xl",
           highlightClassName
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center gap-4", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground", children: highlight.icon }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs font-semibold uppercase tracking-[0.2em]", getTextColor(background, "muted")), children: highlight.label }) : highlight.label),
+              highlight.label && (typeof highlight.label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-xs font-semibold uppercase tracking-[0.2em]"
+                  ),
+                  children: highlight.label
+                }
+              ) : highlight.label),
               highlight.title && (typeof highlight.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-bold", children: highlight.title }) : highlight.title)
             ] })
           ] }),
-          highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm", getTextColor(background, "muted")), children: highlight.description }) : highlight.description)
+          highlight.description && (typeof highlight.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm"), children: highlight.description }) : highlight.description)
         ]
       }
     );
@@ -8333,14 +8343,18 @@ function AboutStoryExpertise({
             transition: { duration: 0.3, delay: idx * 0.05 },
             className: "flex items-start gap-4 rounded-2xl bg-background p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-lg",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
-                "flex h-12 w-12 items-center justify-center rounded-xl",
-                getNestedCardBg(background, "muted"),
-                getAccentColor(background)
-              ), children: area.icon }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex h-12 w-12 items-center justify-center rounded-xl"
+                  ),
+                  children: area.icon
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 area.title && (typeof area.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-lg font-bold", children: area.title }) : area.title),
-                area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-sm", getTextColor(background, "muted")), children: area.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: area.description }))
+                area.description && (typeof area.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-sm"), children: area.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: area.description }))
               ] })
             ]
           },
@@ -8374,7 +8388,6 @@ function AboutStoryExpertise({
                     {
                       className: cn(
                         "text-sm font-semibold uppercase tracking-[0.2em]",
-                        getAccentColor(background),
                         eyebrowClassName
                       ),
                       children: eyebrow
@@ -8392,7 +8405,14 @@ function AboutStoryExpertise({
                   ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", headingClassName), children: heading }))
                 ] }),
                 storyContent,
-                actionsContent
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  BlockActions,
+                  {
+                    actions,
+                    actionsClassName,
+                    actionsSlot
+                  }
+                )
               ]
             }
           ),
@@ -8434,12 +8454,11 @@ function AboutStoryExpertise({
           {
             className: cn(
               "mt-20 rounded-3xl p-8 md:p-12",
-              getNestedCardBg(background, "subtle"),
               expertiseSectionClassName
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-semibold uppercase tracking-[0.2em]", getAccentColor(background)), children: "Our Expertise" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm font-semibold uppercase tracking-[0.2em]"), children: "Our Expertise" }),
                 expertiseHeading && (typeof expertiseHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                   "h3",
                   {
@@ -8455,7 +8474,6 @@ function AboutStoryExpertise({
                   {
                     className: cn(
                       "mx-auto mt-3 max-w-2xl",
-                      getTextColor(background, "muted"),
                       expertiseDescriptionClassName
                     ),
                     children: expertiseDescription
@@ -56288,10 +56306,10 @@ function HeroStatsSocialProof({
   statusCard,
   statusCardSlot,
   background,
-  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   className,
+  spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   contentClassName,
   badgeClassName,
@@ -56362,7 +56380,8 @@ function HeroStatsSocialProof({
             {
               actions,
               actionsClassName,
-              actionsSlot
+              actionsSlot,
+              mobileConfig: { position: "left", width: "fit" }
             }
           ),
           (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(