@opensite/ui 1.6.9 → 1.7.0

package/dist/hero-billing-platform-logos.cjs

@@ -3,7 +3,6 @@
 
 var React3 = require('react');
 var AutoScroll = require('embla-carousel-auto-scroll');
-var Autoplay = require('embla-carousel-autoplay');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
@@ -33,7 +32,6 @@ function _interopNamespace(e) {
 
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var AutoScroll__default = /*#__PURE__*/_interopDefault(AutoScroll);
-var Autoplay__default = /*#__PURE__*/_interopDefault(Autoplay);
 var useEmblaCarousel__default = /*#__PURE__*/_interopDefault(useEmblaCarousel);
 
 // components/blocks/hero/hero-billing-platform-logos.tsx
@@ -990,7 +988,14 @@ function HeroBillingPlatformLogos({
     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;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       if (index === 1) {
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
@@ -1007,19 +1012,11 @@ function HeroBillingPlatformLogos({
           index
         );
       }
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        }
-      ) }, index);
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) }) }, index);
     });
   }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1029,14 +1026,32 @@ function HeroBillingPlatformLogos({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative flex items-center justify-center dark font-sans", className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 items-center justify-center gap-12 lg:grid-cols-[minmax(33.75rem,1fr)_1.5fr] lg:gap-8", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClassName, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl leading-tight md:text-5xl lg:text-[3.5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-4xl leading-tight md:text-5xl lg:text-[3.5rem]",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
             description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-5 text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
-            (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col items-center gap-4 lg:flex-row", actionsClassName), children: renderActions }) })
+            (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-center gap-4 lg:flex-row",
+                  actionsClassName
+                ),
+                children: renderActions
+              }
+            ) })
           ] }) }),
           imagesSlot ? imagesSlot : mainImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative mr-auto ml-auto aspect-[1.28581291/1] w-full max-w-149 lg:mr-0 lg:ml-auto", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mx-auto aspect-[1.020365896/1] h-full w-[79.35%] max-w-118.25 overflow-hidden rounded-3xl", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1044,7 +1059,10 @@ function HeroBillingPlatformLogos({
               {
                 src: mainImage.src,
                 alt: mainImage.alt,
-                className: cn("relative z-10 w-full object-cover", mainImage.className),
+                className: cn(
+                  "relative z-10 w-full object-cover",
+                  mainImage.className
+                ),
                 optixFlowConfig
               }
             ) }),
@@ -1053,7 +1071,10 @@ function HeroBillingPlatformLogos({
               {
                 src: overlayImages[0].src,
                 alt: overlayImages[0].alt,
-                className: cn("size-full object-cover", overlayImages[0].className),
+                className: cn(
+                  "size-full object-cover",
+                  overlayImages[0].className
+                ),
                 optixFlowConfig
               }
             ) }),
@@ -1062,7 +1083,10 @@ function HeroBillingPlatformLogos({
               {
                 src: overlayImages[1].src,
                 alt: overlayImages[1].alt,
-                className: cn("size-full object-cover", overlayImages[1].className),
+                className: cn(
+                  "size-full object-cover",
+                  overlayImages[1].className
+                ),
                 optixFlowConfig
               }
             ) }),
@@ -1071,43 +1095,44 @@ function HeroBillingPlatformLogos({
               {
                 src: overlayImages[2].src,
                 alt: overlayImages[2].alt,
-                className: cn("size-full object-cover", overlayImages[2].className),
+                className: cn(
+                  "size-full object-cover",
+                  overlayImages[2].className
+                ),
                 optixFlowConfig
               }
             ) })
           ] }) }) : null
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center justify-center gap-8 pt-28", logosClassName), children: [
-          logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-5 text-center font-mono text-sm font-medium uppercase", children: logosTagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: logosTagline })),
-          logosSlot ? logosSlot : logos && logos.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-            Carousel,
-            {
-              opts: {
-                loop: true,
-                align: "center"
-              },
-              plugins: [
-                AutoScroll__default.default({
-                  speed: 1
-                }),
-                Autoplay__default.default({
-                  playOnInit: true,
-                  delay: 1e3
-                })
-              ],
-              className: "relative w-full max-w-(--breakpoint-2xl) overflow-hidden",
-              children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "items-center", children: logos.map((logo, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: "w-fit basis-auto px-7", children: /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center justify-center gap-8 pt-28",
+              logosClassName
+            ),
+            children: [
+              logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-5 text-center font-mono text-sm font-medium uppercase", children: logosTagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: logosTagline })),
+              logosSlot ? logosSlot : logos && logos.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                Carousel,
                 {
-                  src: typeof logo.src === "string" ? logo.src : logo.src.light,
-                  alt: logo.alt,
-                  className: cn("h-8 w-full object-fill", logo.imgClassName),
-                  optixFlowConfig
+                  opts: { loop: true },
+                  plugins: [AutoScroll__default.default({ playOnInit: true, speed: 1 })],
+                  className: "relative w-full max-w-(--breakpoint-2xl) overflow-hidden",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "items-center", children: [...logos, ...logos].map((logo, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: "w-fit basis-auto px-7", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: typeof logo.src === "string" ? logo.src : logo.src.light,
+                      alt: logo.alt,
+                      className: cn("h-8 w-full object-fill", logo.imgClassName),
+                      optixFlowConfig
+                    }
+                  ) }, index)) })
                 }
-              ) }, index)) })
-            }
-          ) : null
-        ] })
+              ) : null
+            ]
+          }
+        )
       ]
     }
   );

package/dist/hero-billing-platform-logos.js

@@ -2,7 +2,6 @@
 import * as React3 from 'react';
 import React3__default, { useMemo } from 'react';
 import AutoScroll from 'embla-carousel-auto-scroll';
-import Autoplay from 'embla-carousel-autoplay';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -964,7 +963,14 @@ function HeroBillingPlatformLogos({
     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;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       if (index === 1) {
         return /* @__PURE__ */ jsx(
           Pressable,
@@ -981,19 +987,11 @@ function HeroBillingPlatformLogos({
           index
         );
       }
-      return /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        }
-      ) }, index);
+      return /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) }) }, index);
     });
   }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsxs(
@@ -1003,14 +1001,32 @@ function HeroBillingPlatformLogos({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("relative flex items-center justify-center dark font-sans", className),
+      className,
       containerClassName,
       children: [
         /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-center justify-center gap-12 lg:grid-cols-[minmax(33.75rem,1fr)_1.5fr] lg:gap-8", children: [
           /* @__PURE__ */ jsx("div", { className: contentClassName, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl leading-tight md:text-5xl lg:text-[3.5rem]", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "text-4xl leading-tight md:text-5xl lg:text-[3.5rem]",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
             description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-5 text-lg", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-            (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: cn("flex flex-col items-center gap-4 lg:flex-row", actionsClassName), children: renderActions }) })
+            (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-center gap-4 lg:flex-row",
+                  actionsClassName
+                ),
+                children: renderActions
+              }
+            ) })
           ] }) }),
           imagesSlot ? imagesSlot : mainImage ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "relative mr-auto ml-auto aspect-[1.28581291/1] w-full max-w-149 lg:mr-0 lg:ml-auto", children: [
             /* @__PURE__ */ jsx("div", { className: "relative mx-auto aspect-[1.020365896/1] h-full w-[79.35%] max-w-118.25 overflow-hidden rounded-3xl", children: /* @__PURE__ */ jsx(
@@ -1018,7 +1034,10 @@ function HeroBillingPlatformLogos({
               {
                 src: mainImage.src,
                 alt: mainImage.alt,
-                className: cn("relative z-10 w-full object-cover", mainImage.className),
+                className: cn(
+                  "relative z-10 w-full object-cover",
+                  mainImage.className
+                ),
                 optixFlowConfig
               }
             ) }),
@@ -1027,7 +1046,10 @@ function HeroBillingPlatformLogos({
               {
                 src: overlayImages[0].src,
                 alt: overlayImages[0].alt,
-                className: cn("size-full object-cover", overlayImages[0].className),
+                className: cn(
+                  "size-full object-cover",
+                  overlayImages[0].className
+                ),
                 optixFlowConfig
               }
             ) }),
@@ -1036,7 +1058,10 @@ function HeroBillingPlatformLogos({
               {
                 src: overlayImages[1].src,
                 alt: overlayImages[1].alt,
-                className: cn("size-full object-cover", overlayImages[1].className),
+                className: cn(
+                  "size-full object-cover",
+                  overlayImages[1].className
+                ),
                 optixFlowConfig
               }
             ) }),
@@ -1045,43 +1070,44 @@ function HeroBillingPlatformLogos({
               {
                 src: overlayImages[2].src,
                 alt: overlayImages[2].alt,
-                className: cn("size-full object-cover", overlayImages[2].className),
+                className: cn(
+                  "size-full object-cover",
+                  overlayImages[2].className
+                ),
                 optixFlowConfig
               }
             ) })
           ] }) }) : null
         ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center gap-8 pt-28", logosClassName), children: [
-          logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: "px-5 text-center font-mono text-sm font-medium uppercase", children: logosTagline }) : /* @__PURE__ */ jsx("div", { children: logosTagline })),
-          logosSlot ? logosSlot : logos && logos.length > 0 ? /* @__PURE__ */ jsx(
-            Carousel,
-            {
-              opts: {
-                loop: true,
-                align: "center"
-              },
-              plugins: [
-                AutoScroll({
-                  speed: 1
-                }),
-                Autoplay({
-                  playOnInit: true,
-                  delay: 1e3
-                })
-              ],
-              className: "relative w-full max-w-(--breakpoint-2xl) overflow-hidden",
-              children: /* @__PURE__ */ jsx(CarouselContent, { className: "items-center", children: logos.map((logo, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "w-fit basis-auto px-7", children: /* @__PURE__ */ jsx(
-                Img,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-col items-center justify-center gap-8 pt-28",
+              logosClassName
+            ),
+            children: [
+              logosTagline && (typeof logosTagline === "string" ? /* @__PURE__ */ jsx("p", { className: "px-5 text-center font-mono text-sm font-medium uppercase", children: logosTagline }) : /* @__PURE__ */ jsx("div", { children: logosTagline })),
+              logosSlot ? logosSlot : logos && logos.length > 0 ? /* @__PURE__ */ jsx(
+                Carousel,
                 {
-                  src: typeof logo.src === "string" ? logo.src : logo.src.light,
-                  alt: logo.alt,
-                  className: cn("h-8 w-full object-fill", logo.imgClassName),
-                  optixFlowConfig
+                  opts: { loop: true },
+                  plugins: [AutoScroll({ playOnInit: true, speed: 1 })],
+                  className: "relative w-full max-w-(--breakpoint-2xl) overflow-hidden",
+                  children: /* @__PURE__ */ jsx(CarouselContent, { className: "items-center", children: [...logos, ...logos].map((logo, index) => /* @__PURE__ */ jsx(CarouselItem, { className: "w-fit basis-auto px-7", children: /* @__PURE__ */ jsx(
+                    Img,
+                    {
+                      src: typeof logo.src === "string" ? logo.src : logo.src.light,
+                      alt: logo.alt,
+                      className: cn("h-8 w-full object-fill", logo.imgClassName),
+                      optixFlowConfig
+                    }
+                  ) }, index)) })
                 }
-              ) }, index)) })
-            }
-          ) : null
-        ] })
+              ) : null
+            ]
+          }
+        )
       ]
     }
   );