@opensite/ui 2.7.6 → 2.7.7

package/dist/faq-split-help.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CtLnPq2v.js';
-import { A as ActionConfig } from './blocks-CsMdf2Jh.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-BwFLQ6RR.js';
+import { A as ActionConfig } from './blocks-B3quAlwK.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 

package/dist/faq-split-help.js

@@ -44,7 +44,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,

package/dist/faq-split-hero.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var react = require('react');
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var img = require('@page-speed/img');
@@ -9,6 +9,8 @@ var AccordionPrimitive = require('@radix-ui/react-accordion');
 var icon = require('@page-speed/icon');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -27,6 +29,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var React__default = /*#__PURE__*/_interopDefault(React);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
 // components/blocks/faq/faq-split-hero.tsx
@@ -65,7 +68,7 @@ function AccordionTrigger({
     {
       "data-slot": "accordion-trigger",
       className: cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
         className
       ),
       ...props,
@@ -97,6 +100,34 @@ function AccordionContent({
     }
   );
 }
+var maxWidthStyles = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-7xl",
+  "2xl": "max-w-screen-2xl",
+  "4xl": "max-w-[1536px]",
+  full: "max-w-full"
+};
+var Container = React__default.default.forwardRef(
+  ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
+    const Component = as;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Component,
+      {
+        ref,
+        className: cn(
+          "mx-auto w-full px-2 sm:px-4 lg:px-8",
+          maxWidthStyles[maxWidth],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Container.displayName = "Container";
 
 // lib/patternSvgs.ts
 var patternSvgs = {
@@ -363,15 +394,108 @@ function PatternBackground({
     }
   );
 }
+var backgroundStyles = {
+  default: "bg-background text-foreground",
+  white: "bg-white text-dark",
+  gray: "bg-muted/30 text-foreground",
+  dark: "bg-foreground text-background",
+  transparent: "bg-transparent text-foreground",
+  gradient: "bg-linear-to-br from-primary via-primary/90 to-foreground text-primary-foreground",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-muted-foreground"
+};
+var spacingStyles = {
+  none: "py-0 md:py-0",
+  sm: "py-12 md:py-16",
+  md: "py-16 md:py-24",
+  lg: "py-20 md:py-32",
+  xl: "py-24 md:py-40",
+  hero: "pt-32 pb-12 md:pt-40 md:pb-40"
+};
+var predefinedSpacings = ["none", "sm", "md", "lg", "xl", "hero"];
+var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
+var Section = React__default.default.forwardRef(
+  ({
+    id,
+    title,
+    subtitle,
+    children,
+    className,
+    style,
+    background = "default",
+    spacing = "lg",
+    pattern,
+    patternOpacity,
+    patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
+    ...props
+  }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        ref,
+        id,
+        className: cn(
+          "relative",
+          pattern ? "overflow-hidden" : null,
+          backgroundStyles[background],
+          isPredefinedSpacing(spacing) ? spacingStyles[spacing] : spacing,
+          className
+        ),
+        style,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PatternBackground,
+            {
+              pattern,
+              opacity: effectivePatternOpacity,
+              className: patternClassName
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+var useResponsiveLayout = ({
+  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
+}) => {
+  const responsiveClassName = React.useMemo(() => {
+    const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
+    const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col-reverse" : "flex-col";
+    return `${mobileOrder} ${desktopOrder}`;
+  }, [directionConfig.desktop, directionConfig.mobile]);
+  return { responsiveClassName };
+};
 function FaqSplitHero({
   heading,
   subheading,
   items,
   itemsSlot,
-  imageSlot,
-  imageSrc,
-  imageAlt,
-  background = "dark",
+  mediaItem,
+  mediaSlot,
+  containerClassName = "px-0 sm:px-0 lg:px-0",
+  background,
+  spacing = "none",
   pattern,
   patternOpacity,
   className,
@@ -383,25 +507,11 @@ function FaqSplitHero({
   accordionItemClassName,
   accordionTriggerClassName,
   accordionContentClassName,
-  imageClassName,
   optixFlowConfig,
   directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
 }) {
-  const bgColorClass = react.useMemo(() => {
-    switch (background) {
-      case "dark":
-        return "bg-foreground text-background";
-      case "gray":
-        return "bg-muted/30";
-      case "white":
-        return "bg-background";
-      default:
-        return "bg-background";
-    }
-  }, [background]);
-  const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
-  const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
-  const itemsContent = react.useMemo(() => {
+  const { responsiveClassName } = useResponsiveLayout({ directionConfig });
+  const itemsContent = React.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -420,7 +530,9 @@ function FaqSplitHero({
                 AccordionTrigger,
                 {
                   className: cn(
-                    "py-4 text-left text-base font-medium transition-opacity hover:opacity-70 hover:no-underline lg:text-lg",
+                    "font-semibold text-lg",
+                    "py-4 transition-opacity",
+                    "hover:opacity-70 hover:no-underline",
                     accordionTriggerClassName
                   ),
                   children: item.question
@@ -429,7 +541,7 @@ function FaqSplitHero({
               /* @__PURE__ */ jsxRuntime.jsx(
                 AccordionContent,
                 {
-                  className: cn("pb-4 opacity-80", accordionContentClassName),
+                  className: cn("pb-4 text-base", accordionContentClassName),
                   children: item.answer
                 }
               )
@@ -447,57 +559,98 @@ function FaqSplitHero({
     accordionTriggerClassName,
     accordionContentClassName
   ]);
-  const contentArea = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "relative flex w-full items-center lg:w-1/2",
-        bgColorClass,
-        contentClassName
-      ),
-      children: [
-        pattern && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(PatternBackground, { pattern, opacity: patternOpacity }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 w-full px-8 py-16 sm:px-12 sm:py-20 lg:px-16 lg:py-24 xl:px-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4", headerClassName), children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "h2",
-              {
-                className: cn(
-                  "text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl",
-                  headingClassName
-                ),
-                children: heading
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-            subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "text-base leading-relaxed opacity-80 sm:text-lg",
-                  subheadingClassName
-                ),
-                children: subheading
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
-          ] }),
-          itemsContent
-        ] }) })
-      ]
+  const renderMedia = React.useMemo(() => {
+    if (!mediaItem) return null;
+    const { image, video } = mediaItem;
+    if (video) {
+      const { src, className: videoClassName, ...videoRest } = video;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "video",
+        {
+          src,
+          className: cn("h-full w-full object-cover", videoClassName),
+          ...videoRest
+        }
+      );
     }
-  );
-  const imageArea = imageSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-64 w-full sm:h-96 lg:h-auto lg:w-1/2", children: imageSlot }) : imageSrc ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-64 w-full sm:h-96 lg:h-auto lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
-    img.Img,
+    if (image) {
+      const { src, alt, className: imgClassName, ...imgRest } = image;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src,
+          alt: alt || "FAQ section image",
+          className: cn("h-full w-full object-cover", imgClassName),
+          optixFlowConfig,
+          ...imgRest
+        }
+      );
+    }
+    return null;
+  }, [mediaItem, optixFlowConfig]);
+  const hasMedia = mediaSlot || mediaItem?.image || mediaItem?.video;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Section,
     {
-      src: imageSrc,
-      alt: imageAlt || "FAQ section image",
-      className: cn("h-full w-full object-cover", imageClassName),
-      optixFlowConfig
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      className: cn("w-full overflow-hidden", className),
+      containerMaxWidth: "full",
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-h-screen", responsiveClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "relative flex w-full items-center lg:w-1/2",
+              contentClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 w-full px-8 py-16 sm:px-12 sm:py-20 lg:px-16 lg:py-24 xl:px-24", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-xl space-y-8", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4", headerClassName), children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "font-bold text-pretty",
+                      "text-3xl md:text-4xl lg:text-5xl",
+                      "leading-tight tracking-tight",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : heading),
+                subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-base md:text-lg",
+                      "text-pretty leading-relaxed",
+                      "opacity-80",
+                      subheadingClassName
+                    ),
+                    children: subheading
+                  }
+                ) : subheading)
+              ] }),
+              itemsContent
+            ] }) })
+          }
+        ),
+        hasMedia && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "relative h-64 w-full sm:h-96 lg:h-screen lg:w-1/2",
+              mediaItem?.containerClassName
+            ),
+            children: mediaSlot || renderMedia
+          }
+        )
+      ] })
     }
-  ) }) : null;
-  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: cn("relative w-full overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-h-screen", mobileOrder, desktopOrder), children: [
-    contentArea,
-    imageArea
-  ] }) });
+  );
 }
 
 exports.FaqSplitHero = FaqSplitHero;

package/dist/faq-split-hero.d.cts

@@ -1,16 +1,12 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-2FsyKLdT.cjs';
-import { O as OptixFlowConfig } from './blocks-gR13ES5A.cjs';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-B-4_HCwb.cjs';
+import { M as MediaItem, O as OptixFlowConfig, h as DirectionConfig } from './blocks-UTlgYg4k.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
-interface DirectionConfig {
-    desktop: "mediaRight" | "mediaLeft";
-    mobile: "mediaTop" | "mediaBottom";
-}
 interface FaqItem {
     id: string;
     question: React.ReactNode;
@@ -34,23 +30,21 @@ interface FaqSplitHeroProps {
      */
     itemsSlot?: React.ReactNode;
     /**
-     * Custom slot for rendering the image section
-     */
-    imageSlot?: React.ReactNode;
-    /**
-     * Image source URL
+     * Media item configuration for image and/or video rendering.
      */
-    imageSrc?: string;
+    mediaItem?: MediaItem;
     /**
-     * Image alt text
+     * Custom slot for rendering the media section (overrides mediaItem)
      */
-    imageAlt?: string;
+    mediaSlot?: React.ReactNode;
     /**
      * Background style for the section
      */
     background?: SectionBackground;
     /**
-     * Vertical spacing for the section
+     * Vertical spacing for the section.
+     * Defaults to "none" since this block manages its own internal spacing.
+     * @default "none"
      */
     spacing?: SectionSpacing;
     /**
@@ -97,10 +91,6 @@ interface FaqSplitHeroProps {
      * Additional CSS classes for accordion content
      */
     accordionContentClassName?: string;
-    /**
-     * Additional CSS classes for the image
-     */
-    imageClassName?: string;
     /**
      * Optional Optix Flow configuration for image optimization
      */
@@ -110,7 +100,11 @@ interface FaqSplitHeroProps {
      * @default { desktop: 'mediaRight', mobile: 'mediaTop' }
      */
     directionConfig?: DirectionConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
-declare function FaqSplitHero({ heading, subheading, items, itemsSlot, imageSlot, imageSrc, imageAlt, background, pattern, patternOpacity, className, contentClassName, headerClassName, headingClassName, subheadingClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, imageClassName, optixFlowConfig, directionConfig, }: FaqSplitHeroProps): React.JSX.Element;
+declare function FaqSplitHero({ heading, subheading, items, itemsSlot, mediaItem, mediaSlot, containerClassName, background, spacing, pattern, patternOpacity, className, contentClassName, headerClassName, headingClassName, subheadingClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, optixFlowConfig, directionConfig, }: FaqSplitHeroProps): React.JSX.Element;
 
-export { FaqSplitHero, type FaqSplitHeroProps };
+export { DirectionConfig, type FaqItem, FaqSplitHero, type FaqSplitHeroProps };

package/dist/faq-split-hero.d.ts

@@ -1,16 +1,12 @@
 import * as React from 'react';
-import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-CtLnPq2v.js';
-import { O as OptixFlowConfig } from './blocks-CsMdf2Jh.js';
+import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-BwFLQ6RR.js';
+import { M as MediaItem, O as OptixFlowConfig, h as DirectionConfig } from './blocks-B3quAlwK.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 import '@opensite/hooks/usePlatformFromUrl';
 
-interface DirectionConfig {
-    desktop: "mediaRight" | "mediaLeft";
-    mobile: "mediaTop" | "mediaBottom";
-}
 interface FaqItem {
     id: string;
     question: React.ReactNode;
@@ -34,23 +30,21 @@ interface FaqSplitHeroProps {
      */
     itemsSlot?: React.ReactNode;
     /**
-     * Custom slot for rendering the image section
-     */
-    imageSlot?: React.ReactNode;
-    /**
-     * Image source URL
+     * Media item configuration for image and/or video rendering.
      */
-    imageSrc?: string;
+    mediaItem?: MediaItem;
     /**
-     * Image alt text
+     * Custom slot for rendering the media section (overrides mediaItem)
      */
-    imageAlt?: string;
+    mediaSlot?: React.ReactNode;
     /**
      * Background style for the section
      */
     background?: SectionBackground;
     /**
-     * Vertical spacing for the section
+     * Vertical spacing for the section.
+     * Defaults to "none" since this block manages its own internal spacing.
+     * @default "none"
      */
     spacing?: SectionSpacing;
     /**
@@ -97,10 +91,6 @@ interface FaqSplitHeroProps {
      * Additional CSS classes for accordion content
      */
     accordionContentClassName?: string;
-    /**
-     * Additional CSS classes for the image
-     */
-    imageClassName?: string;
     /**
      * Optional Optix Flow configuration for image optimization
      */
@@ -110,7 +100,11 @@ interface FaqSplitHeroProps {
      * @default { desktop: 'mediaRight', mobile: 'mediaTop' }
      */
     directionConfig?: DirectionConfig;
+    /**
+     * Additional CSS classes for the container
+     */
+    containerClassName?: string;
 }
-declare function FaqSplitHero({ heading, subheading, items, itemsSlot, imageSlot, imageSrc, imageAlt, background, pattern, patternOpacity, className, contentClassName, headerClassName, headingClassName, subheadingClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, imageClassName, optixFlowConfig, directionConfig, }: FaqSplitHeroProps): React.JSX.Element;
+declare function FaqSplitHero({ heading, subheading, items, itemsSlot, mediaItem, mediaSlot, containerClassName, background, spacing, pattern, patternOpacity, className, contentClassName, headerClassName, headingClassName, subheadingClassName, accordionClassName, accordionItemClassName, accordionTriggerClassName, accordionContentClassName, optixFlowConfig, directionConfig, }: FaqSplitHeroProps): React.JSX.Element;
 
-export { FaqSplitHero, type FaqSplitHeroProps };
+export { DirectionConfig, type FaqItem, FaqSplitHero, type FaqSplitHeroProps };