@opensite/ui 1.2.1 → 1.2.2

package/dist/auto-scroll-carousel.cjs

@@ -1103,10 +1103,8 @@ function AutoScrollCarousel({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex text-left", children: /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
-        variant: "link",
-        asButton: true,
         className: cn(
-          "font-medium flex items-center text-xl",
+          "font-medium flex items-center text-lg px-0",
           actionClass,
           actionClassName
         ),
@@ -1118,7 +1116,7 @@ function AutoScrollCarousel({
             DynamicIcon,
             {
               name: "lucide/move-right",
-              size: 20,
+              size: 24,
               className: "ml-2 inline"
             }
           )
@@ -1159,7 +1157,7 @@ function AutoScrollCarousel({
           "div",
           {
             className: cn(
-              "mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24",
+              "mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24 px-6 md:px-0",
               headerClassName
             ),
             children: [
@@ -1167,7 +1165,7 @@ function AutoScrollCarousel({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-bold md:text-4xl",
+                    "text-3xl font-bold md:text-4xl text-balance",
                     headingClassName
                   ),
                   children: heading

package/dist/auto-scroll-carousel.js

@@ -1078,10 +1078,8 @@ function AutoScrollCarousel({
     return /* @__PURE__ */ jsx("div", { className: "flex text-left", children: /* @__PURE__ */ jsx(
       Pressable,
       {
-        variant: "link",
-        asButton: true,
         className: cn(
-          "font-medium flex items-center text-xl",
+          "font-medium flex items-center text-lg px-0",
           actionClass,
           actionClassName
         ),
@@ -1093,7 +1091,7 @@ function AutoScrollCarousel({
             DynamicIcon,
             {
               name: "lucide/move-right",
-              size: 20,
+              size: 24,
               className: "ml-2 inline"
             }
           )
@@ -1134,7 +1132,7 @@ function AutoScrollCarousel({
           "div",
           {
             className: cn(
-              "mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24",
+              "mb-12 grid grid-cols-1 gap-x-12 gap-y-6 md:mb-16 md:grid-cols-2 md:gap-x-24 px-6 md:px-0",
               headerClassName
             ),
             children: [
@@ -1142,7 +1140,7 @@ function AutoScrollCarousel({
                 "h2",
                 {
                   className: cn(
-                    "text-3xl font-bold md:text-4xl",
+                    "text-3xl font-bold md:text-4xl text-balance",
                     headingClassName
                   ),
                   children: heading

package/dist/carousel-gradient-text.cjs

@@ -1166,8 +1166,9 @@ function CarouselGradientText({
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
     return items.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: cn("w-fit", itemClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      Pressable,
       {
+        href: item.href,
         className: cn(
           "relative aspect-4/5 max-h-[500px] rounded-2xl",
           item.className,
@@ -1196,12 +1197,12 @@ function CarouselGradientText({
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-semibold text-background/50 dark:text-foreground/50", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mr-1 text-background dark:text-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-semibold text-white/70", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mr-1 text-white", children: [
               item.title,
               "."
             ] }),
-            item.description
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.description })
           ] }) })
         ]
       }
@@ -1250,19 +1251,7 @@ function CarouselGradientText({
                     ]
                   }
                 ),
-                tagline ? typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "p",
-                  {
-                    className: cn("mt-8 text-xl text-primary", taglineClassName),
-                    children: tagline
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: cn("mt-8 text-xl text-primary", taglineClassName),
-                    children: tagline
-                  }
-                ) : null,
+                tagline ? typeof tagline === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-2 md:mt-8 text-xl", taglineClassName), children: tagline }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-2 md:mt-8 text-xl", taglineClassName), children: tagline }) : null,
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {

package/dist/carousel-gradient-text.d.cts

@@ -30,6 +30,10 @@ interface CarouselGradientTextItem {
      * Additional CSS classes for the card
      */
     className?: string;
+    /**
+     * href for the card
+     */
+    href?: string;
 }
 interface CarouselGradientTextProps {
     /**

package/dist/carousel-gradient-text.d.ts

@@ -30,6 +30,10 @@ interface CarouselGradientTextItem {
      * Additional CSS classes for the card
      */
     className?: string;
+    /**
+     * href for the card
+     */
+    href?: string;
 }
 interface CarouselGradientTextProps {
     /**

package/dist/carousel-gradient-text.js

@@ -1142,8 +1142,9 @@ function CarouselGradientText({
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
     return items.map((item, idx) => /* @__PURE__ */ jsx(CarouselItem, { className: cn("w-fit", itemClassName), children: /* @__PURE__ */ jsxs(
-      "div",
+      Pressable,
       {
+        href: item.href,
         className: cn(
           "relative aspect-4/5 max-h-[500px] rounded-2xl",
           item.className,
@@ -1172,12 +1173,12 @@ function CarouselGradientText({
               optixFlowConfig
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxs("p", { className: "text-sm font-semibold text-background/50 dark:text-foreground/50", children: [
-            /* @__PURE__ */ jsxs("span", { className: "mr-1 text-background dark:text-foreground", children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 p-8", children: /* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold text-white/70", children: [
+            /* @__PURE__ */ jsxs("div", { className: "mr-1 text-white", children: [
               item.title,
               "."
             ] }),
-            item.description
+            /* @__PURE__ */ jsx("div", { children: item.description })
           ] }) })
         ]
       }
@@ -1226,19 +1227,7 @@ function CarouselGradientText({
                     ]
                   }
                 ),
-                tagline ? typeof tagline === "string" ? /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    className: cn("mt-8 text-xl text-primary", taglineClassName),
-                    children: tagline
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: cn("mt-8 text-xl text-primary", taglineClassName),
-                    children: tagline
-                  }
-                ) : null,
+                tagline ? typeof tagline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-2 md:mt-8 text-xl", taglineClassName), children: tagline }) : /* @__PURE__ */ jsx("div", { className: cn("mt-2 md:mt-8 text-xl", taglineClassName), children: tagline }) : null,
                 /* @__PURE__ */ jsxs(
                   "div",
                   {

package/dist/carousel-icon-sidebar.cjs

@@ -1220,7 +1220,7 @@ function CarouselIconSidebar({
       "div",
       {
         className: cn(
-          "flex h-full flex-col gap-8 rounded-lg px-8 py-16",
+          "flex h-full flex-col gap-8 rounded-lg p-8",
           getNestedCardBg(background),
           getNestedCardTextColor(background),
           sidebarClassName
@@ -1318,7 +1318,7 @@ function CarouselIconSidebar({
       patternClassName,
       className,
       children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
@@ -1329,17 +1329,30 @@ function CarouselIconSidebar({
               children: title
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: sectionTitleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg text-balance", sectionDescriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-lg text-balance",
+                sectionDescriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: cn("max-w-lg text-balance", sectionDescriptionClassName),
+              className: cn(
+                "max-w-lg text-balance",
+                sectionDescriptionClassName
+              ),
               children: description
             }
           ))
         ] }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:col-span-2", children: sidebarContent }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: carouselContentClassName, children: itemsContent }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:visible md:col-span-2", children: sidebarContent }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: carouselContentClassName, children: itemsContent }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "visible md:hidden md:col-span-2", children: sidebarContent })
         ] }) }),
         lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
           lightbox.Lightbox,

package/dist/carousel-icon-sidebar.js

@@ -1196,7 +1196,7 @@ function CarouselIconSidebar({
       "div",
       {
         className: cn(
-          "flex h-full flex-col gap-8 rounded-lg px-8 py-16",
+          "flex h-full flex-col gap-8 rounded-lg p-8",
           getNestedCardBg(background),
           getNestedCardTextColor(background),
           sidebarClassName
@@ -1294,7 +1294,7 @@ function CarouselIconSidebar({
       patternClassName,
       className,
       children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
@@ -1305,17 +1305,30 @@ function CarouselIconSidebar({
               children: title
             }
           ) : /* @__PURE__ */ jsx("div", { className: sectionTitleClassName, children: title })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg text-balance", sectionDescriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "max-w-lg text-balance",
+                sectionDescriptionClassName
+              ),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn("max-w-lg text-balance", sectionDescriptionClassName),
+              className: cn(
+                "max-w-lg text-balance",
+                sectionDescriptionClassName
+              ),
               children: description
             }
           ))
         ] }) : null,
         /* @__PURE__ */ jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-5", children: [
-          /* @__PURE__ */ jsx("div", { className: "md:col-span-2", children: sidebarContent }),
-          /* @__PURE__ */ jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsx(CarouselContent, { className: carouselContentClassName, children: itemsContent }) })
+          /* @__PURE__ */ jsx("div", { className: "hidden md:visible md:col-span-2", children: sidebarContent }),
+          /* @__PURE__ */ jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsx(CarouselContent, { className: carouselContentClassName, children: itemsContent }) }),
+          /* @__PURE__ */ jsx("div", { className: "visible md:hidden md:col-span-2", children: sidebarContent })
         ] }) }),
         lightboxOpen && /* @__PURE__ */ jsx(
           Lightbox,

package/dist/carousel-icon-tabs.cjs

@@ -1342,7 +1342,7 @@ function CarouselIconTabs({
           Carousel,
           {
             setApi,
-            className: cn("flex flex-col gap-10", carouselClassName),
+            className: cn("flex flex-col gap-4 md:gap-10", carouselClassName),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: carouselContentClassName, children: sectionsContent }),
               tabsContent,

package/dist/carousel-icon-tabs.js

@@ -1318,7 +1318,7 @@ function CarouselIconTabs({
           Carousel,
           {
             setApi,
-            className: cn("flex flex-col gap-10", carouselClassName),
+            className: cn("flex flex-col gap-4 md:gap-10", carouselClassName),
             children: [
               /* @__PURE__ */ jsx(CarouselContent, { className: carouselContentClassName, children: sectionsContent }),
               tabsContent,

package/dist/carousel-scale-focus.cjs

@@ -1237,7 +1237,7 @@ 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 mb-16", children: [
+          title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 text-center", children: [
             title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h2",
               {

package/dist/carousel-scale-focus.js

@@ -1213,7 +1213,7 @@ function CarouselScaleFocus({
       className: cn("overflow-hidden", className),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "md:px-45", children: [
-          title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+          title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 text-center", children: [
             title && (typeof title === "string" ? /* @__PURE__ */ jsx(
               "h2",
               {

package/dist/carousel-tabs-content.cjs

@@ -1202,7 +1202,7 @@ function CarouselTabsContent({
   }, []);
   const tabsContent = React4.useMemo(() => {
     if (tabsSlot) return tabsSlot;
-    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: [
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative flex min-w-0 flex-1 overflow-x-auto scrollbar-hide", tabsClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-auto flex-nowrap gap-2 md:gap-4", children: [
       items?.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -1211,7 +1211,7 @@ function CarouselTabsContent({
           },
           onClick: () => setCurrent(item.category),
           className: cn(
-            "text-base transition-all duration-700 ease-out px-3 py-1.5 rounded-sm",
+            "text-base transition-all duration-700 ease-out px-3 py-1.5 rounded-sm whitespace-nowrap flex-shrink-0",
             current === item.category ? "text-foreground" : "text-muted-foreground hover:text-foreground",
             tabClassName
           ),
@@ -1317,7 +1317,7 @@ function CarouselTabsContent({
       patternClassName,
       className: cn("overflow-hidden", className),
       children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {

package/dist/carousel-tabs-content.js

@@ -1178,7 +1178,7 @@ function CarouselTabsContent({
   }, []);
   const tabsContent = useMemo(() => {
     if (tabsSlot) return tabsSlot;
-    return /* @__PURE__ */ jsx("div", { className: cn("relative  flex", tabsClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-auto gap-2 md:gap-4", children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("relative flex min-w-0 flex-1 overflow-x-auto scrollbar-hide", tabsClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-auto flex-nowrap gap-2 md:gap-4", children: [
       items?.map((item, idx) => /* @__PURE__ */ jsx(
         "button",
         {
@@ -1187,7 +1187,7 @@ function CarouselTabsContent({
           },
           onClick: () => setCurrent(item.category),
           className: cn(
-            "text-base transition-all duration-700 ease-out px-3 py-1.5 rounded-sm",
+            "text-base transition-all duration-700 ease-out px-3 py-1.5 rounded-sm whitespace-nowrap flex-shrink-0",
             current === item.category ? "text-foreground" : "text-muted-foreground hover:text-foreground",
             tabClassName
           ),
@@ -1293,7 +1293,7 @@ function CarouselTabsContent({
       patternClassName,
       className: cn("overflow-hidden", className),
       children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {

package/dist/expandable-case-study-cards.cjs

@@ -573,7 +573,7 @@ function ExpandableCaseStudyCards({
       {
         "data-state": selection === item.id ? "open" : "closed",
         className: cn(
-          'group max-lg:w-full max-lg:flex-1 max-md:h-[200px] md:max-lg:aspect-1336/420 lg:transform-gpu lg:transition-all lg:data-[state="closed"]:w-[20%] lg:data-[state="closed"]:duration-500 lg:data-[state="open"]:w-[60%] lg:data-[state="open"]:duration-400',
+          "group h-[280px] w-full lg:h-auto lg:w-auto lg:transform-gpu lg:transition-all lg:data-[state=closed]:w-[20%] lg:data-[state=closed]:duration-500 lg:data-[state=open]:w-[60%] lg:data-[state=open]:duration-400",
           item.className,
           cardClassName
         ),
@@ -586,7 +586,7 @@ function ExpandableCaseStudyCards({
             href: item.href,
             className: "relative block h-full w-full overflow-hidden rounded-xl",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: 'absolute inset-0 lg:group-data-[state="closed"]:blur-sm lg:transition-[filter] lg:duration-500', children: /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 lg:group-data-[state=closed]:blur-xs lg:transition-[filter] lg:duration-500", children: /* @__PURE__ */ jsxRuntime.jsx(
                 img.Img,
                 {
                   src: item.image,
@@ -600,7 +600,7 @@ function ExpandableCaseStudyCards({
                 }
               ) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-0 h-[70%] bg-linear-to-t from-black/90 from-30% to-transparent" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: 'absolute inset-0 flex flex-col justify-end p-4 pb-5 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0', children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col justify-end p-4 pb-5 lg:transition-opacity lg:delay-200 lg:duration-500 lg:group-data-[state=closed]:opacity-0", children: [
                 item.badges && item.badges.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
@@ -608,7 +608,15 @@ function ExpandableCaseStudyCards({
                       "mb-3 flex flex-wrap items-center gap-2",
                       badgesClassName
                     ),
-                    children: item.badges.map((badge, idx) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: badgeClassName, children: badge }, idx))
+                    children: item.badges.map((badge, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                      Badge,
+                      {
+                        variant: "secondary",
+                        className: badgeClassName,
+                        children: badge
+                      },
+                      idx
+                    ))
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-end justify-between gap-3", children: [
@@ -618,7 +626,10 @@ function ExpandableCaseStudyCards({
                       {
                         src: item.logo,
                         alt: item.logoAlt || item.company || "Logo",
-                        className: cn("h-6 max-w-[120px] object-contain object-left invert lg:h-8 lg:max-w-[150px]", logoClassName),
+                        className: cn(
+                          "h-6 max-w-[120px] object-contain object-left invert lg:h-8 lg:max-w-[150px]",
+                          logoClassName
+                        ),
                         loading: "lazy",
                         optixFlowConfig
                       }
@@ -626,13 +637,7 @@ function ExpandableCaseStudyCards({
                     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-medium text-white lg:text-lg", children: item.title }),
                     item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-white/80", children: item.description })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
-                    }
-                  )
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 }) })
                 ] })
               ] })
             ]

package/dist/expandable-case-study-cards.js

@@ -552,7 +552,7 @@ function ExpandableCaseStudyCards({
       {
         "data-state": selection === item.id ? "open" : "closed",
         className: cn(
-          'group max-lg:w-full max-lg:flex-1 max-md:h-[200px] md:max-lg:aspect-1336/420 lg:transform-gpu lg:transition-all lg:data-[state="closed"]:w-[20%] lg:data-[state="closed"]:duration-500 lg:data-[state="open"]:w-[60%] lg:data-[state="open"]:duration-400',
+          "group h-[280px] w-full lg:h-auto lg:w-auto lg:transform-gpu lg:transition-all lg:data-[state=closed]:w-[20%] lg:data-[state=closed]:duration-500 lg:data-[state=open]:w-[60%] lg:data-[state=open]:duration-400",
           item.className,
           cardClassName
         ),
@@ -565,7 +565,7 @@ function ExpandableCaseStudyCards({
             href: item.href,
             className: "relative block h-full w-full overflow-hidden rounded-xl",
             children: [
-              /* @__PURE__ */ jsx("div", { className: 'absolute inset-0 lg:group-data-[state="closed"]:blur-sm lg:transition-[filter] lg:duration-500', children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 lg:group-data-[state=closed]:blur-xs lg:transition-[filter] lg:duration-500", children: /* @__PURE__ */ jsx(
                 Img,
                 {
                   src: item.image,
@@ -579,7 +579,7 @@ function ExpandableCaseStudyCards({
                 }
               ) }),
               /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-[70%] bg-linear-to-t from-black/90 from-30% to-transparent" }),
-              /* @__PURE__ */ jsxs("div", { className: 'absolute inset-0 flex flex-col justify-end p-4 pb-5 transition-opacity delay-200 duration-500 lg:group-data-[state="closed"]:opacity-0', children: [
+              /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col justify-end p-4 pb-5 lg:transition-opacity lg:delay-200 lg:duration-500 lg:group-data-[state=closed]:opacity-0", children: [
                 item.badges && item.badges.length > 0 && /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -587,7 +587,15 @@ function ExpandableCaseStudyCards({
                       "mb-3 flex flex-wrap items-center gap-2",
                       badgesClassName
                     ),
-                    children: item.badges.map((badge, idx) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: badgeClassName, children: badge }, idx))
+                    children: item.badges.map((badge, idx) => /* @__PURE__ */ jsx(
+                      Badge,
+                      {
+                        variant: "secondary",
+                        className: badgeClassName,
+                        children: badge
+                      },
+                      idx
+                    ))
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-3", children: [
@@ -597,7 +605,10 @@ function ExpandableCaseStudyCards({
                       {
                         src: item.logo,
                         alt: item.logoAlt || item.company || "Logo",
-                        className: cn("h-6 max-w-[120px] object-contain object-left invert lg:h-8 lg:max-w-[150px]", logoClassName),
+                        className: cn(
+                          "h-6 max-w-[120px] object-contain object-left invert lg:h-8 lg:max-w-[150px]",
+                          logoClassName
+                        ),
                         loading: "lazy",
                         optixFlowConfig
                       }
@@ -605,13 +616,7 @@ function ExpandableCaseStudyCards({
                     /* @__PURE__ */ jsx("div", { className: "text-base font-medium text-white lg:text-lg", children: item.title }),
                     item.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-white/80", children: item.description })
                   ] }),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10",
-                      children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 })
-                    }
-                  )
+                  /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm transition-transform group-hover:translate-x-1 group-hover:-translate-y-1 lg:size-10", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 20 }) })
                 ] })
               ] })
             ]

package/dist/interior-carousel.cjs

@@ -1240,7 +1240,7 @@ function InteriorCarousel({
       patternClassName,
       className,
       children: [
-        heading || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+        heading || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 px-6 md:px-8", children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
@@ -1259,7 +1259,7 @@ function InteriorCarousel({
             }
           ))
         ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 md:px-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
           Carousel,
           {
             opts: {

package/dist/interior-carousel.js

@@ -1216,7 +1216,7 @@ function InteriorCarousel({
       patternClassName,
       className,
       children: [
-        heading || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+        heading || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 px-6 md:px-8", children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
@@ -1235,7 +1235,7 @@ function InteriorCarousel({
             }
           ))
         ] }) : null,
-        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: "px-6 md:px-0", children: /* @__PURE__ */ jsxs(
           Carousel,
           {
             opts: {

package/dist/masonry-motion-grid.cjs

@@ -628,8 +628,9 @@ function MasonryMotionGrid({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName: "px-4",
       children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {

package/dist/masonry-motion-grid.js

@@ -622,8 +622,9 @@ function MasonryMotionGrid({
       patternOpacity,
       patternClassName,
       className,
+      containerClassName: "px-4",
       children: [
-        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-16", children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {