@opensite/ui 1.1.8 → 1.2.0

package/dist/registry.cjs

@@ -21,8 +21,8 @@ var ProgressPrimitive = require('@radix-ui/react-progress');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
-var lightbox = require('@page-speed/lightbox');
 var AutoScroll3 = require('embla-carousel-auto-scroll');
+var lightbox = require('@page-speed/lightbox');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var react = require('motion/react');
 var dateFns = require('date-fns');
@@ -532,7 +532,7 @@ var Section = React52__namespace.default.forwardRef(
               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 text-primary", children: subtitle }),
+                  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
@@ -30144,6 +30144,8 @@ function FooterNavSocial({
   );
 }
 function ExpandableCaseStudyCards({
+  title,
+  description,
   items,
   itemsSlot,
   className,
@@ -30161,36 +30163,6 @@ function ExpandableCaseStudyCards({
   optixFlowConfig
 }) {
   const [selection, setSelection] = React52.useState(items?.[0]?.id);
-  const [lightboxOpen, setLightboxOpen] = React52.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React52.useState(0);
-  const lightboxItems = React52.useMemo(() => {
-    if (!items) return [];
-    return items.flatMap((item) => [
-      {
-        id: `image-${item.id}`,
-        type: "image",
-        src: item.image,
-        alt: typeof item.title === "string" ? item.title : item.imageAlt || "Case study image",
-        download: true,
-        share: true
-      },
-      {
-        id: `logo-${item.id}`,
-        type: "image",
-        src: item.logo,
-        alt: item.logoAlt || item.company,
-        download: true,
-        share: true
-      }
-    ]);
-  }, [items]);
-  const handleImageClick = React52.useCallback((index) => {
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = React52.useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const itemsContent = React52.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -30213,119 +30185,69 @@ function ExpandableCaseStudyCards({
             className: "relative block h-full w-full overflow-hidden rounded-xl bg-primary text-primary-foreground dark:bg-card",
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: 'absolute -inset-[50%] hidden h-[200%] w-[200%] md:block lg:group-data-[state="closed"]:blur-sm', children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[calc(25%+40px)] aspect-square h-[calc(50%+40px)] max-lg:right-[calc(50%+40px)] lg:right-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[calc(25%+40px)] aspect-square h-[calc(50%+40px)] max-lg:right-[calc(50%+40px)] lg:right-[50%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
                   {
-                    className: "h-full w-full overflow-clip rounded-xl cursor-pointer",
-                    onClick: (e) => {
-                      e.preventDefault();
-                      handleImageClick(itemIndex * 2);
-                    },
-                    role: "button",
-                    tabIndex: 0,
-                    onKeyDown: (e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleImageClick(itemIndex * 2);
-                      }
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      img.Img,
-                      {
-                        src: item.image,
-                        alt: typeof item.title === "string" ? item.title : item.imageAlt || "Case study image",
-                        className: cn(
-                          "h-full w-full object-cover object-center",
-                          imageClassName
-                        ),
-                        loading: "lazy",
-                        optixFlowConfig
-                      }
-                    )
+                    src: item.image,
+                    alt: typeof item.title === "string" ? item.title : item.imageAlt || "Case study image",
+                    className: cn(
+                      "h-full w-full object-cover object-center",
+                      imageClassName
+                    ),
+                    loading: "lazy",
+                    optixFlowConfig
                   }
-                ) }),
+                ) }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: "absolute inset-y-[25%] left-[50%] flex aspect-389/420 h-[50%] items-center justify-center max-lg:hidden cursor-pointer",
-                    onClick: (e) => {
-                      e.preventDefault();
-                      handleImageClick(itemIndex * 2 + 1);
-                    },
-                    role: "button",
-                    tabIndex: 0,
-                    onKeyDown: (e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleImageClick(itemIndex * 2 + 1);
-                      }
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                    className: cn(
+                      "absolute top-[50%] left-[50%] flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full max-lg:hidden",
+                      getNestedCardBg(background, "accent"),
+                      getNestedCardTextColor(background)
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/plus", size: 32 })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 hidden h-[50%] bg-linear-to-t from-primary from-50% to-transparent lg:block" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col justify-between gap-4 md:absolute md:inset-0 md:max-lg:inset-x-[50%] md:max-lg:w-[50%]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: 'flex flex-col gap-3 p-4 pt-6 transition-all delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0', children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
+                    item.logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
                       img.Img,
                       {
                         src: item.logo,
-                        alt: item.logoAlt || item.company,
-                        className: cn("h-8 invert", logoClassName),
+                        alt: item.logoAlt || item.company || "Logo",
+                        className: cn("h-6 max-w-[120px] object-contain object-left lg:h-8 lg:max-w-[150px]", logoClassName),
                         loading: "lazy",
                         optixFlowConfig
                       }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute top-[50%] left-[50%] flex size-16 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full max-lg:hidden", getNestedCardBg(background, "accent"), getNestedCardTextColor(background)), children: /* @__PURE__ */ jsxRuntime.jsx(
-                  DynamicIcon,
-                  {
-                    name: "lucide/plus",
-                    size: 32
-                  }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 hidden h-[50%] bg-linear-to-t from-primary from-50% to-transparent lg:block" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col justify-between gap-4 md:absolute md:inset-0 md:max-lg:inset-x-[50%] md:max-lg:w-[50%]", children: [
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-medium lg:text-lg", children: item.title }),
+                    item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-primary-foreground/70", children: item.description })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "flex size-8 shrink-0 items-center justify-center rounded-full text-foreground transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10",
+                        getNestedCardBg(background, "card")
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
+                    }
+                  )
+                ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
                     className: cn(
-                      'flex h-20 items-center gap-2 p-4 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0',
+                      'flex h-20 items-center gap-2 px-4 pb-4 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0',
                       badgesClassName
                     ),
                     children: item.badges?.map((badge, idx) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: badgeClassName, children: badge }, idx))
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: 'flex flex-col gap-2 p-4 transition-all delay-200 duration-500 lg:group-data-[state="closed"]:translate-y-4 lg:group-data-[state="closed"]:opacity-0', children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "lg:hidden cursor-pointer",
-                      onClick: (e) => {
-                        e.preventDefault();
-                        handleImageClick(itemIndex * 2 + 1);
-                      },
-                      role: "button",
-                      tabIndex: 0,
-                      onKeyDown: (e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                          e.preventDefault();
-                          handleImageClick(itemIndex * 2 + 1);
-                        }
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        img.Img,
-                        {
-                          src: item.logo,
-                          alt: item.logoAlt || item.company,
-                          className: cn("h-5 invert lg:h-6", logoClassName),
-                          loading: "lazy",
-                          optixFlowConfig
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-medium lg:text-lg", children: item.title }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex size-8 items-center justify-center rounded-full transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10", getNestedCardBg(background, "card"), getNestedCardTextColor(background)), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 }) })
-                  ] })
-                ] })
+                )
               ] })
             ]
           }
@@ -30343,50 +30265,29 @@ function ExpandableCaseStudyCards({
     badgesClassName,
     badgeClassName,
     optixFlowConfig,
-    handleImageClick
+    background
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
+      title,
+      subtitle: description,
       background,
       spacing,
       pattern,
       patternOpacity,
       patternClassName,
       className,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn(
-              "flex flex-col gap-5 lg:aspect-1336/420 lg:flex-row",
-              containerClassName
-            ),
-            children: itemsContent
-          }
-        ),
-        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
-          lightbox.Lightbox,
-          {
-            items: lightboxItems,
-            initialIndex: lightboxIndex,
-            layout: "horizontal",
-            controls: {
-              navigation: true,
-              thumbnails: true,
-              download: true,
-              share: true,
-              fullscreen: true,
-              captions: true,
-              counter: true
-            },
-            onClose: handleLightboxClose,
-            enableKeyboardShortcuts: true,
-            closeOnEscape: true,
-            closeOnBackdropClick: true
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex flex-col gap-5 lg:aspect-1336/420 lg:flex-row",
+            containerClassName
+          ),
+          children: itemsContent
+        }
+      )
     }
   );
 }
@@ -30415,8 +30316,6 @@ function CarouselBadgeCards({
   const [carouselApi, setCarouselApi] = React52.useState();
   const [canScrollPrev, setCanScrollPrev] = React52.useState(false);
   const [canScrollNext, setCanScrollNext] = React52.useState(false);
-  const [lightboxOpen, setLightboxOpen] = React52.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React52.useState(0);
   React52.useEffect(() => {
     if (!carouselApi) {
       return;
@@ -30431,30 +30330,10 @@ function CarouselBadgeCards({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  const lightboxItems = React52.useMemo(
-    () => (items ?? []).map((item, index) => ({
-      id: `badge-card-${index}`,
-      type: "image",
-      src: item.image,
-      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-      download: true,
-      share: true
-    })),
-    [items]
-  );
-  const handleImageClick = React52.useCallback((index, e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = React52.useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const itemsContent = React52.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
       CarouselItem,
       {
         className: cn("max-w-[320px] pl-5 lg:max-w-[360px]", itemClassName),
@@ -30463,42 +30342,26 @@ function CarouselBadgeCards({
           {
             href: item.href,
             className: cn(
-              "group flex flex-col justify-between rounded-xl p-6",
+              "group flex flex-col justify-between rounded-xl p-6 w-full h-full",
               getNestedCardBg(background),
               getNestedCardTextColor(background),
               item.className,
               cardClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
                 {
-                  className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105 cursor-pointer",
-                  onClick: (e) => handleImageClick(index, e),
-                  role: "button",
-                  tabIndex: 0,
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleImageClick(index, e);
-                    }
-                  },
-                  "aria-label": `View ${typeof item.title === "string" ? item.title : "image"} in lightbox`,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    img.Img,
-                    {
-                      src: item.image,
-                      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-                      className: cn(
-                        "h-full w-full object-cover object-center",
-                        imageClassName
-                      ),
-                      loading: "lazy",
-                      optixFlowConfig
-                    }
-                  )
+                  src: item.image,
+                  alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+                  className: cn(
+                    "h-full w-full object-cover object-center",
+                    imageClassName
+                  ),
+                  loading: "lazy",
+                  optixFlowConfig
                 }
-              ) }) }) }),
+              ) }) }) }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: badgeClassName, children: item.label }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl", children: item.title }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9", children: item.description }),
@@ -30529,7 +30392,7 @@ function CarouselBadgeCards({
     imageClassName,
     optixFlowConfig,
     readMoreText,
-    handleImageClick
+    background
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -30553,7 +30416,7 @@ function CarouselBadgeCards({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl",
+                    "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
                     headingClassName
                   ),
                   children: heading
@@ -30613,28 +30476,7 @@ function CarouselBadgeCards({
               }
             )
           }
-        ) }),
-        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
-          lightbox.Lightbox,
-          {
-            items: lightboxItems,
-            initialIndex: lightboxIndex,
-            layout: "horizontal",
-            controls: {
-              navigation: true,
-              thumbnails: true,
-              download: true,
-              share: true,
-              fullscreen: true,
-              captions: true,
-              counter: true
-            },
-            onClose: handleLightboxClose,
-            enableKeyboardShortcuts: true,
-            closeOnEscape: true,
-            closeOnBackdropClick: true
-          }
-        )
+        ) })
       ]
     }
   );
@@ -30668,8 +30510,6 @@ function CarouselGradientOverlay({
   const [canScrollPrev, setCanScrollPrev] = React52.useState(false);
   const [canScrollNext, setCanScrollNext] = React52.useState(false);
   const [currentSlide, setCurrentSlide] = React52.useState(0);
-  const [lightboxOpen, setLightboxOpen] = React52.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React52.useState(0);
   React52.useEffect(() => {
     if (!carouselApi) {
       return;
@@ -30685,28 +30525,10 @@ function CarouselGradientOverlay({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  const lightboxItems = React52.useMemo(
-    () => (items ?? []).map((item, idx) => ({
-      id: `carousel-image-${idx}`,
-      type: "image",
-      src: item.image,
-      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-      download: true,
-      share: true
-    })),
-    [items]
-  );
-  const handleImageClick = React52.useCallback((index) => {
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = React52.useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const itemsContent = React52.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
       CarouselItem,
       {
         className: cn("max-w-[320px] pl-5 lg:max-w-[360px]", itemClassName),
@@ -30722,35 +30544,23 @@ function CarouselGradientOverlay({
                   src: item.image,
                   alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
                   className: cn(
-                    "absolute h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105 cursor-pointer",
+                    "absolute h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105",
                     imageClassName
                   ),
                   loading: "lazy",
-                  optixFlowConfig,
-                  onClick: (e) => {
-                    e.preventDefault();
-                    handleImageClick(index);
-                  },
-                  role: "button",
-                  tabIndex: 0,
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleImageClick(index);
-                    }
-                  }
+                  optixFlowConfig
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: cn(
-                    "absolute inset-0 h-full bg-linear-to-t from-primary from-20% to-transparent mix-blend-multiply",
+                    "absolute inset-0 h-full bg-linear-to-t from-black from-20% to-transparent mix-blend-multiply",
                     gradientClassName
                   )
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start p-6 text-primary-foreground md:p-8", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-0 bottom-0 flex flex-col items-start p-4 text-white md:p-8", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 pt-4 text-xl font-semibold md:mb-3 md:pt-4 lg:pt-4", children: item.title }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 line-clamp-2 md:mb-12 lg:mb-9", children: item.description }),
                 readMoreText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm", children: [
@@ -30780,7 +30590,6 @@ function CarouselGradientOverlay({
     imageClassName,
     gradientClassName,
     optixFlowConfig,
-    handleImageClick,
     readMoreText
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -30806,7 +30615,7 @@ function CarouselGradientOverlay({
                   "h2",
                   {
                     className: cn(
-                      "text-3xl font-medium md:text-4xl lg:text-5xl",
+                      "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
                       titleClassName
                     ),
                     children: title
@@ -30906,28 +30715,7 @@ function CarouselGradientOverlay({
               ))
             }
           )
-        ] }),
-        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
-          lightbox.Lightbox,
-          {
-            items: lightboxItems,
-            initialIndex: lightboxIndex,
-            layout: "horizontal",
-            controls: {
-              navigation: true,
-              thumbnails: true,
-              download: true,
-              share: true,
-              fullscreen: true,
-              captions: true,
-              counter: true
-            },
-            onClose: handleLightboxClose,
-            enableKeyboardShortcuts: true,
-            closeOnEscape: true,
-            closeOnBackdropClick: true
-          }
-        )
+        ] })
       ]
     }
   );
@@ -30959,8 +30747,6 @@ function CarouselDemoLink({
   const [carouselApi, setCarouselApi] = React52.useState();
   const [canScrollPrev, setCanScrollPrev] = React52.useState(false);
   const [canScrollNext, setCanScrollNext] = React52.useState(false);
-  const [lightboxOpen, setLightboxOpen] = React52.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React52.useState(0);
   React52.useEffect(() => {
     if (!carouselApi) {
       return;
@@ -30975,26 +30761,6 @@ function CarouselDemoLink({
       carouselApi.off("select", updateSelection);
     };
   }, [carouselApi]);
-  const lightboxItems = React52.useMemo(
-    () => (items ?? []).map((item, index) => ({
-      id: `demo-card-${index}`,
-      type: "image",
-      src: item.image,
-      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-      download: true,
-      share: true
-    })),
-    [items]
-  );
-  const handleImageClick = React52.useCallback((index, e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = React52.useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const demoActionContent = React52.useMemo(() => {
     if (demoActionSlot) return demoActionSlot;
     if (!demoAction) return null;
@@ -31036,7 +30802,11 @@ function CarouselDemoLink({
     return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
       CarouselItem,
       {
-        className: cn("ml-8 md:max-w-[452px]", itemClassName),
+        className: cn(
+          "basis-[85%] md:basis-auto md:max-w-[452px]",
+          index === 0 ? "ml-0" : "ml-4 md:ml-6",
+          itemClassName
+        ),
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "a",
           {
@@ -31047,35 +30817,19 @@ function CarouselDemoLink({
               cardClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex aspect-3/2 overflow-clip rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105", children: /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
                 {
-                  className: "relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105 cursor-pointer",
-                  onClick: (e) => handleImageClick(index, e),
-                  role: "button",
-                  tabIndex: 0,
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleImageClick(index, e);
-                    }
-                  },
-                  "aria-label": `View ${typeof item.title === "string" ? item.title : "image"} in lightbox`,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    img.Img,
-                    {
-                      src: item.image,
-                      alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
-                      className: cn(
-                        "h-full w-full object-cover object-center",
-                        imageClassName
-                      ),
-                      loading: "lazy",
-                      optixFlowConfig
-                    }
-                  )
+                  src: item.image,
+                  alt: typeof item.title === "string" ? item.title : item.imageAlt || "Card image",
+                  className: cn(
+                    "h-full w-full object-cover object-center",
+                    imageClassName
+                  ),
+                  loading: "lazy",
+                  optixFlowConfig
                 }
-              ) }) }) }),
+              ) }) }) }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 line-clamp-3 pt-4 text-lg font-medium wrap-break-word md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl", children: item.title }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9", children: item.summary }),
               readMoreText && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm", children: [
@@ -31096,16 +30850,7 @@ function CarouselDemoLink({
       },
       item.id
     ));
-  }, [
-    itemsSlot,
-    items,
-    itemClassName,
-    cardClassName,
-    imageClassName,
-    optixFlowConfig,
-    readMoreText,
-    handleImageClick
-  ]);
+  }, [itemsSlot, items, itemClassName, cardClassName, imageClassName, optixFlowConfig, readMoreText]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
@@ -31177,7 +30922,7 @@ function CarouselDemoLink({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-full -mx-4 sm:-mx-6 lg:-mx-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
           Carousel,
           {
             setApi: setCarouselApi,
@@ -31188,43 +30933,16 @@ function CarouselDemoLink({
                 }
               }
             },
-            className: cn(
-              "relative w-full max-w-full md:-left-4",
-              carouselClassName
-            ),
+            className: cn("relative w-full", carouselClassName),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               CarouselContent,
               {
-                className: cn(
-                  "hide-scrollbar w-full max-w-full md:-mr-4 md:ml-8 2xl:mr-[max(0rem,calc(50vw-700px-1rem))] 2xl:ml-[max(8rem,calc(50vw-700px+1rem))]",
-                  carouselContentClassName
-                ),
+                className: cn("hide-scrollbar w-full", carouselContentClassName),
                 children: itemsContent
               }
             )
           }
-        ) }),
-        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
-          lightbox.Lightbox,
-          {
-            items: lightboxItems,
-            initialIndex: lightboxIndex,
-            layout: "horizontal",
-            controls: {
-              navigation: true,
-              thumbnails: true,
-              download: true,
-              share: true,
-              fullscreen: true,
-              captions: true,
-              counter: true
-            },
-            onClose: handleLightboxClose,
-            enableKeyboardShortcuts: true,
-            closeOnEscape: true,
-            closeOnBackdropClick: true
-          }
-        )
+        ) })
       ]
     }
   );
@@ -31267,8 +30985,10 @@ function AutoScrollCarousel({
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
+        variant: "link",
+        asButton: true,
         className: cn(
-          "font-medium hover:underline",
+          "font-medium flex items-center",
           actionClass,
           actionClassName
         ),
@@ -31340,7 +31060,7 @@ function AutoScrollCarousel({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full -mx-4 sm:-mx-6 lg:-mx-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen overflow-x-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen overflow-x-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
           Carousel,
           {
             opts: {
@@ -32290,7 +32010,7 @@ function CarouselGradientText({
             "div",
             {
               className: cn(
-                "absolute inset-0 rounded-2xl bg-linear-to-b from-primary to-transparent to-40% dark:from-background",
+                "absolute inset-0 rounded-2xl bg-linear-to-b from-black to-transparent to-40% dark:from-background",
                 gradientClassName
               )
             }
@@ -32358,7 +32078,7 @@ function CarouselGradientText({
                       " ",
                       /* @__PURE__ */ jsxRuntime.jsx("br", {}),
                       " ",
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary/40", subheadingClassName), children: subheading })
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-primary", subheadingClassName), children: subheading })
                     ]
                   }
                 ),
@@ -32414,7 +32134,7 @@ function CarouselGradientText({
               {
                 className: cn(
                   "flex h-8 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-muted-foreground/15 text-xs font-semibold whitespace-nowrap transition-all duration-300",
-                  index + 1 === current ? "w-32" : "m-4 size-4"
+                  index + 1 === current ? "w-fit px-4" : "m-4 size-4"
                 ),
                 onClick: () => api && api.scrollTo(index),
                 children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -32734,6 +32454,10 @@ function ServiceHoverCarousel({
   );
 }
 function CarouselTabsContent({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   items,
   itemsSlot,
   tabsSlot,
@@ -32809,7 +32533,7 @@ function CarouselTabsContent({
   }, []);
   const tabsContent = React52.useMemo(() => {
     if (tabsSlot) return tabsSlot;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative mb-8 flex justify-center", tabsClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-auto gap-6 bg-background", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative  flex", tabsClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-auto gap-2 md:gap-4", children: [
       items?.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -32840,7 +32564,15 @@ function CarouselTabsContent({
         }
       )
     ] }) });
-  }, [tabsSlot, tabsClassName, items, current, tabClassName, indicatorClassName, indicatorStyle]);
+  }, [
+    tabsSlot,
+    tabsClassName,
+    items,
+    current,
+    tabClassName,
+    indicatorClassName,
+    indicatorStyle
+  ]);
   const itemsContent = React52.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
@@ -32852,7 +32584,7 @@ function CarouselTabsContent({
           "div",
           {
             className: cn(
-              "grid h-full max-w-4xl gap-10 rounded-xl border border-border p-6 shadow-sm select-none sm:p-10 md:max-h-[450px] md:grid-cols-2 lg:gap-20",
+              "grid h-full max-w-4xl gap-10 bg-background rounded-xl border border-border p-6 shadow-sm select-none sm:p-10 md:max-h-[450px] md:grid-cols-2 lg:gap-20",
               cardClassName
             ),
             children: [
@@ -32916,6 +32648,37 @@ function CarouselTabsContent({
       patternClassName,
       className: cn("overflow-hidden", className),
       children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(
           Carousel,
           {
@@ -32925,7 +32688,7 @@ function CarouselTabsContent({
               carouselClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex mb-8 items-center justify-between", children: [
                 tabsContent,
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
@@ -32971,6 +32734,10 @@ function CarouselTabsContent({
   );
 }
 function CarouselScaleFocus({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   images,
   imagesSlot,
   className,
@@ -33081,6 +32848,37 @@ function CarouselScaleFocus({
       className: cn("overflow-hidden", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:px-45", children: [
+          title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+            title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: cn(
+                  "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                  titleClassName
+                ),
+                children: title
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: cn(
+                  "max-w-lg text-muted-foreground",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "max-w-lg text-muted-foreground",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ))
+          ] }) : null,
           /* @__PURE__ */ jsxRuntime.jsxs(
             Carousel,
             {
@@ -33170,6 +32968,10 @@ function CarouselScaleFocus({
   );
 }
 function MasonryMotionGrid({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   column1Images,
   column2Images,
   column3Images,
@@ -33376,6 +33178,37 @@ function MasonryMotionGrid({
       patternClassName,
       className,
       children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ))
+        ] }) : null,
         renderGrid(),
         lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
           lightbox.Lightbox,
@@ -33408,7 +33241,7 @@ function BlurVignette({
   radius = "24px",
   inset = "16px",
   transitionLength = "32px",
-  blur = "21px"
+  blur = "8px"
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.div,
@@ -33424,7 +33257,7 @@ function BlurVignette({
         y: 0
       },
       viewport: { once: true, amount: 0.2 },
-      className: `group relative cursor-pointer overflow-hidden ${className}`,
+      className: `group relative cursor-pointer overflow-hidden rounded-[2.5rem] ${className}`,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
           .blur-vignette {
@@ -33486,6 +33319,10 @@ function BlurVignette({
   );
 }
 function BlurVignetteGrid({
+  title,
+  description,
+  titleClassName,
+  descriptionClassName,
   images,
   imagesSlot,
   vignetteConfig,
@@ -33502,32 +33339,12 @@ function BlurVignetteGrid({
   patternClassName,
   optixFlowConfig
 }) {
-  const [lightboxOpen, setLightboxOpen] = React52.useState(false);
-  const [lightboxIndex, setLightboxIndex] = React52.useState(0);
   const {
     radius = "24px",
     inset = "10px",
     transitionLength = "100px",
-    blur = "15px"
+    blur = "8px"
   } = vignetteConfig || {};
-  const lightboxItems = React52.useMemo(
-    () => (images ?? []).map((img, index) => ({
-      id: `vignette-image-${index}`,
-      type: "image",
-      src: img.src,
-      alt: img.alt,
-      download: true,
-      share: true
-    })),
-    [images]
-  );
-  const handleImageClick = React52.useCallback((index) => {
-    setLightboxIndex(index);
-    setLightboxOpen(true);
-  }, []);
-  const handleLightboxClose = React52.useCallback(() => {
-    setLightboxOpen(false);
-  }, []);
   const imagesContent = React52.useMemo(() => {
     if (imagesSlot) return imagesSlot;
     if (!images || images.length === 0) return null;
@@ -33539,40 +33356,24 @@ function BlurVignetteGrid({
         transitionLength,
         blur,
         className: cn(
-          `col-span-${image.colSpan}`,
+          `md:col-span-${image.colSpan}`,
           image.height,
-          "rounded-[2.5rem] cursor-pointer",
           image.className,
           itemClassName
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          img.Img,
           {
-            onClick: () => handleImageClick(index),
-            role: "button",
-            tabIndex: 0,
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                handleImageClick(index);
-              }
-            },
-            "aria-label": `View ${image.alt} in lightbox`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                width: 200,
-                height: 200,
-                className: cn(
-                  "size-full rounded-[2.5rem] object-cover",
-                  imageClassName
-                ),
-                src: image.src,
-                alt: image.alt,
-                loading: "lazy",
-                optixFlowConfig
-              }
-            )
+            width: 200,
+            height: 200,
+            className: cn(
+              "size-full rounded-[2.5rem] object-cover",
+              imageClassName
+            ),
+            src: image.src,
+            alt: image.alt,
+            loading: "lazy",
+            optixFlowConfig
           }
         )
       },
@@ -33587,8 +33388,7 @@ function BlurVignetteGrid({
     blur,
     itemClassName,
     imageClassName,
-    optixFlowConfig,
-    handleImageClick
+    optixFlowConfig
   ]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
@@ -33600,33 +33400,43 @@ function BlurVignetteGrid({
       patternClassName,
       className,
       children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "max-w-lg text-muted-foreground",
+                descriptionClassName
+              ),
+              children: description
+            }
+          ))
+        ] }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn(`grid grid-cols-${gridColumns}`, gridGap, gridClassName),
+            className: cn(`grid grid-cols-1 md:grid-cols-${gridColumns}`, gridGap, gridClassName),
             children: imagesContent
           }
-        ),
-        lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
-          lightbox.Lightbox,
-          {
-            items: lightboxItems,
-            initialIndex: lightboxIndex,
-            layout: "horizontal",
-            controls: {
-              navigation: true,
-              thumbnails: true,
-              download: true,
-              share: true,
-              fullscreen: true,
-              captions: true,
-              counter: true
-            },
-            onClose: handleLightboxClose,
-            enableKeyboardShortcuts: true,
-            closeOnEscape: true,
-            closeOnBackdropClick: true
-          }
         )
       ]
     }
@@ -33718,7 +33528,7 @@ function InteriorCarousel({
                   src,
                   alt,
                   className: cn(
-                    "aspect-[4/5] w-full rounded-xl object-cover transition-opacity hover:opacity-90",
+                    "aspect-4/5 w-full rounded-xl object-cover transition-opacity hover:opacity-90",
                     imageClassName,
                     itemClass
                   ),
@@ -33750,27 +33560,29 @@ function InteriorCarousel({
       patternClassName,
       className,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "h2",
-          {
-            className: cn(
-              "mb-4 text-center text-4xl font-semibold",
-              headingClassName
-            ),
-            children: heading
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "p",
-          {
-            className: cn(
-              "text-center text-sm text-muted-foreground",
-              descriptionClassName
-            ),
-            children: descriptionContent
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        heading || descriptionContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-10", children: [
+          heading && /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-4 text-center text-4xl font-semibold",
+                headingClassName
+              ),
+              children: heading
+            }
+          ),
+          descriptionContent && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-center text-sm text-muted-foreground",
+                descriptionClassName
+              ),
+              children: descriptionContent
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
           Carousel,
           {
             opts: {