@opensite/ui 2.2.4 → 2.2.6

package/dist/contact-image.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React = require('react');
+var React4 = require('react');
 var framerMotion = require('framer-motion');
 var integration = require('@page-speed/forms/integration');
 var clsx = require('clsx');
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 
 // components/blocks/contact/contact-image.tsx
 function cn(...inputs) {
@@ -47,7 +47,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__namespace.default.forwardRef(
+var Container = React4__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -352,7 +352,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__namespace.default.forwardRef(
+var Section = React4__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -413,6 +413,38 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React4__namespace.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React4__namespace.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React4__namespace.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsxRuntime.jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React4__namespace.isValidElement(reactNode)) {
+          return React4__namespace.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(React4__namespace.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 var DEFAULT_STYLE_RULES = {
   formContainer: "",
   fieldsContainer: "",
@@ -484,7 +516,60 @@ function ContactImage({
   patternOpacity,
   optixFlowConfig
 }) {
-  const contactOverlaysContent = React__namespace.useMemo(() => {
+  const headerItems = React4.useMemo(() => {
+    const items = [];
+    if (eyebrow) {
+      if (typeof eyebrow === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "text-sm font-semibold uppercase tracking-[0.2em] opacity-70",
+            eyebrowClassName
+          ),
+          children: eyebrow
+        });
+      } else {
+        items.push(eyebrow);
+      }
+    }
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "mt-2 text-3xl font-bold md:text-4xl lg:text-5xl text-pretty",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn("mt-4 text-lg text-balance", descriptionClassName),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [
+    eyebrow,
+    eyebrowClassName,
+    heading,
+    headingClassName,
+    description,
+    descriptionClassName
+  ]);
+  const contactOverlaysContent = React4__namespace.useMemo(() => {
     if (contactOverlaysSlot) return contactOverlaysSlot;
     if (!contactOverlays || contactOverlays.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-3", contactOverlaysClassName), children: contactOverlays.map((item, index) => {
@@ -534,7 +619,7 @@ function ContactImage({
         "div",
         {
           className: cn(
-            "grid grid-cols-1 items-center gap-12 lg:grid-cols-2",
+            "grid grid-cols-1 items-center md:items-start gap-12 lg:grid-cols-2",
             contentClassName
           ),
           children: [
@@ -546,7 +631,7 @@ function ContactImage({
                 viewport: { once: true, margin: "-50px" },
                 transition: { duration: 0.5 },
                 className: "order-2 lg:order-1",
-                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden rounded-3xl border border-white/10 shadow-2xl", children: [
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden rounded-3xl border border-white/10 shadow-2xl aspect-square", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     img.Img,
                     {
@@ -568,38 +653,9 @@ function ContactImage({
                 whileInView: { opacity: 1, x: 0 },
                 viewport: { once: true, margin: "-50px" },
                 transition: { duration: 0.5 },
-                className: "order-1 lg:order-2",
+                className: "order-1 lg:order-2 bg-card text-card-foreground p-6 md:p-8 rounded-2xl shadow-2xl",
                 children: [
-                  eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "p",
-                    {
-                      className: cn(
-                        "text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground",
-                        eyebrowClassName
-                      ),
-                      children: eyebrow
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: eyebrowClassName, children: eyebrow })),
-                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "h2",
-                    {
-                      className: cn(
-                        "mt-2 text-3xl font-bold md:text-4xl lg:text-5xl",
-                        headingClassName
-                      ),
-                      children: heading
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2", headingClassName), children: heading })),
-                  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 })),
+                  /* @__PURE__ */ jsxRuntime.jsx(ContentGroup, { items: headerItems }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8", children: formEngineSetup ? /* @__PURE__ */ jsxRuntime.jsx(
                     integration.FormEngine,
                     {

package/dist/contact-image.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import { O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/contact-image.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
-import { O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/contact-image.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React from 'react';
-import React__default from 'react';
+import * as React4 from 'react';
+import React4__default, { useMemo } from 'react';
 import { motion } from 'framer-motion';
 import { FormEngine } from '@page-speed/forms/integration';
 import { clsx } from 'clsx';
@@ -26,7 +26,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.forwardRef(
+var Container = React4__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -331,7 +331,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.forwardRef(
+var Section = React4__default.forwardRef(
   ({
     id,
     title,
@@ -392,6 +392,38 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+function TextInner({ as, className, children, ...props }, ref) {
+  const Component = as || "span";
+  return /* @__PURE__ */ jsx(Component, { ref, className: cn(className), ...props, children });
+}
+var Text = React4.forwardRef(TextInner);
+Text.displayName = "Text";
+function isContentTextItem(item) {
+  return item !== null && typeof item === "object" && !React4.isValidElement(item) && "_type" in item && item._type === "text";
+}
+var ContentGroup = React4.forwardRef(
+  ({ items, className, children, ...props }, ref) => {
+    const hasContent = items && items.length > 0;
+    if (!hasContent) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(className), ...props, children: [
+      items.map((item, idx) => {
+        if (isContentTextItem(item)) {
+          const { _type, ...textProps } = item;
+          return /* @__PURE__ */ jsx(Text, { ...textProps }, idx);
+        }
+        const reactNode = item;
+        if (React4.isValidElement(reactNode)) {
+          return React4.cloneElement(reactNode, { key: reactNode.key ?? idx });
+        }
+        return /* @__PURE__ */ jsx(React4.Fragment, { children: reactNode }, idx);
+      }),
+      children
+    ] });
+  }
+);
+ContentGroup.displayName = "ContentGroup";
 var DEFAULT_STYLE_RULES = {
   formContainer: "",
   fieldsContainer: "",
@@ -463,7 +495,60 @@ function ContactImage({
   patternOpacity,
   optixFlowConfig
 }) {
-  const contactOverlaysContent = React.useMemo(() => {
+  const headerItems = useMemo(() => {
+    const items = [];
+    if (eyebrow) {
+      if (typeof eyebrow === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn(
+            "text-sm font-semibold uppercase tracking-[0.2em] opacity-70",
+            eyebrowClassName
+          ),
+          children: eyebrow
+        });
+      } else {
+        items.push(eyebrow);
+      }
+    }
+    if (heading) {
+      if (typeof heading === "string") {
+        items.push({
+          _type: "text",
+          as: "h2",
+          className: cn(
+            "mt-2 text-3xl font-bold md:text-4xl lg:text-5xl text-pretty",
+            headingClassName
+          ),
+          children: heading
+        });
+      } else {
+        items.push(heading);
+      }
+    }
+    if (description) {
+      if (typeof description === "string") {
+        items.push({
+          _type: "text",
+          as: "p",
+          className: cn("mt-4 text-lg text-balance", descriptionClassName),
+          children: description
+        });
+      } else {
+        items.push(description);
+      }
+    }
+    return items;
+  }, [
+    eyebrow,
+    eyebrowClassName,
+    heading,
+    headingClassName,
+    description,
+    descriptionClassName
+  ]);
+  const contactOverlaysContent = React4.useMemo(() => {
     if (contactOverlaysSlot) return contactOverlaysSlot;
     if (!contactOverlays || contactOverlays.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", contactOverlaysClassName), children: contactOverlays.map((item, index) => {
@@ -513,7 +598,7 @@ function ContactImage({
         "div",
         {
           className: cn(
-            "grid grid-cols-1 items-center gap-12 lg:grid-cols-2",
+            "grid grid-cols-1 items-center md:items-start gap-12 lg:grid-cols-2",
             contentClassName
           ),
           children: [
@@ -525,7 +610,7 @@ function ContactImage({
                 viewport: { once: true, margin: "-50px" },
                 transition: { duration: 0.5 },
                 className: "order-2 lg:order-1",
-                children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-3xl border border-white/10 shadow-2xl", children: [
+                children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-3xl border border-white/10 shadow-2xl aspect-square", children: [
                   /* @__PURE__ */ jsx(
                     Img,
                     {
@@ -547,38 +632,9 @@ function ContactImage({
                 whileInView: { opacity: 1, x: 0 },
                 viewport: { once: true, margin: "-50px" },
                 transition: { duration: 0.5 },
-                className: "order-1 lg:order-2",
+                className: "order-1 lg:order-2 bg-card text-card-foreground p-6 md:p-8 rounded-2xl shadow-2xl",
                 children: [
-                  eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      className: cn(
-                        "text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground",
-                        eyebrowClassName
-                      ),
-                      children: eyebrow
-                    }
-                  ) : /* @__PURE__ */ jsx("div", { className: eyebrowClassName, children: eyebrow })),
-                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                    "h2",
-                    {
-                      className: cn(
-                        "mt-2 text-3xl font-bold md:text-4xl lg:text-5xl",
-                        headingClassName
-                      ),
-                      children: heading
-                    }
-                  ) : /* @__PURE__ */ jsx("div", { className: cn("mt-2", headingClassName), children: heading })),
-                  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 })),
+                  /* @__PURE__ */ jsx(ContentGroup, { items: headerItems }),
                   /* @__PURE__ */ jsx("div", { className: "mt-8", children: formEngineSetup ? /* @__PURE__ */ jsx(
                     FormEngine,
                     {