@opensite/ui 1.2.1 → 1.2.3

package/dist/carousel-icon-sidebar.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-icon-sidebar.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

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-row md:flex-col gap-4 md:gap-8 rounded-lg p-4 md:p-8",
           getNestedCardBg(background),
           getNestedCardTextColor(background),
           sidebarClassName
@@ -1206,35 +1206,55 @@ function CarouselIconSidebar({
             "div",
             {
               className: cn(
-                "flex h-12 w-12 items-center justify-center rounded-lg shadow-lg ring-1 ring-border",
+                "flex h-fit w-fit p-3 items-center justify-center rounded-lg shadow-lg ring-1 ring-border bg-card",
                 getNestedCardBg(background, "card"),
                 iconClassName
               ),
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: activeItem.icon, size: 24 })
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-            typeof activeItem.title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium", titleClassName), children: activeItem.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-medium", titleClassName), children: activeItem.title }),
-            typeof activeItem.description === "string" ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "mb-4 text-base text-muted-foreground",
-                  descriptionClassName
-                ),
-                children: activeItem.description
-              }
-            ) : /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "mb-4 text-base text-muted-foreground",
-                  descriptionClassName
-                ),
-                children: activeItem.description
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", controlsClassName), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between h-full gap-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 md:gap-4", children: [
+              typeof activeItem.title === "string" ? /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: cn(
+                    "text-xl md:text-2xl font-medium",
+                    titleClassName
+                  ),
+                  children: activeItem.title
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xl md:text-2xl font-medium",
+                    titleClassName
+                  ),
+                  children: activeItem.title
+                }
+              ),
+              typeof activeItem.description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-4 text-base text-muted-foreground",
+                    descriptionClassName
+                  ),
+                  children: activeItem.description
+                }
+              ) : /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "mb-4 text-base text-muted-foreground",
+                    descriptionClassName
+                  ),
+                  children: activeItem.description
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", controlsClassName), children: [
               /* @__PURE__ */ jsx(CarouselPrevious, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-foreground hover:text-background" }),
               /* @__PURE__ */ jsx(CarouselNext, { className: "relative top-0 right-0 left-0 translate-x-0 translate-y-0 p-5 transition-all duration-200 hover:bg-foreground hover:text-background" })
             ] })
@@ -1294,7 +1314,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 px-4 md:px-0", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsx(
             "h2",
             {
@@ -1305,17 +1325,29 @@ 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(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md: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: "h-full md:col-span-3", children: /* @__PURE__ */ jsx(CarouselContent, { className: cn("h-full", carouselContentClassName), children: itemsContent }) })
         ] }) }),
         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.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-icon-tabs.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

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-image-hero.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-image-hero.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-multi-step-showcase.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-multi-step-showcase.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-portfolio-hero.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-portfolio-hero.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-product-feature-showcase.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-product-feature-showcase.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-progress-slider.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-progress-slider.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-scale-focus.cjs

@@ -1235,9 +1235,10 @@ function CarouselScaleFocus({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
+      containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
       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.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-scale-focus.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-scale-focus.js

@@ -1211,9 +1211,10 @@ function CarouselScaleFocus({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
+      containerClassName: "px-6 sm:px-6 md:px-8 lg:px-8",
       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-scrolling-feature-showcase.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-scrolling-feature-showcase.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-sidebar-resources.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-sidebar-resources.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-tabs-content.cjs

@@ -1202,37 +1202,46 @@ 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: [
-      items?.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          ref: (el) => {
-            tabRefs.current[idx] = el;
-          },
-          onClick: () => setCurrent(item.category),
-          className: cn(
-            "text-base transition-all duration-700 ease-out px-3 py-1.5 rounded-sm",
-            current === item.category ? "text-foreground" : "text-muted-foreground hover:text-foreground",
-            tabClassName
-          ),
-          children: item.category
-        },
-        idx
-      )),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "absolute bottom-0 h-0.5 bg-primary transition-all duration-700 ease-out",
-            indicatorClassName
-          ),
-          style: {
-            width: `${indicatorStyle.width}px`,
-            left: `${indicatorStyle.left}px`
-          }
-        }
-      )
-    ] }) });
+    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",
+            {
+              ref: (el) => {
+                tabRefs.current[idx] = el;
+              },
+              onClick: () => setCurrent(item.category),
+              className: cn(
+                "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
+              ),
+              children: item.category
+            },
+            idx
+          )),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "absolute bottom-0 h-0.5 bg-primary transition-all duration-700 ease-out",
+                indicatorClassName
+              ),
+              style: {
+                width: `${indicatorStyle.width}px`,
+                left: `${indicatorStyle.left}px`
+              }
+            }
+          )
+        ] })
+      }
+    );
   }, [
     tabsSlot,
     tabsClassName,
@@ -1253,16 +1262,16 @@ function CarouselTabsContent({
           "div",
           {
             className: cn(
-              "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",
+              "grid h-full max-w-4xl gap-6 bg-background rounded-xl border border-border p-4 md:p-6 shadow-sm select-none sm:p-10 md:max-h-[450px] md:grid-cols-2 md:gap-20",
               cardClassName
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-4", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-medium sm:text-4xl", children: item.title }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 text-sm text-muted-foreground sm:mt-6", children: item.description })
+                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-medium md:text-4xl", children: item.title }),
+                  item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-sm text-muted-foreground md:mt-6", children: item.description })
                 ] }),
-                typeof item.note === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-xs text-muted-foreground sm:mt-6", children: item.note }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 text-xs text-muted-foreground sm:mt-6", children: item.note })
+                !item.note ? null : typeof item.note === "string" && item.note?.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0 text-xs text-muted-foreground md:mt-6", children: item.note }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0 text-xs text-muted-foreground md:mt-6", children: item.note })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
@@ -1316,8 +1325,9 @@ function CarouselTabsContent({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", 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-10 md:mb-16", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {

package/dist/carousel-tabs-content.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
-import { O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-r_NhxVet.cjs';
+import { O as OptixFlowConfig } from './blocks-DP3Vofl4.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-CdNtNOuP.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-tabs-content.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
-import { O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
+import { O as OptixFlowConfig } from './blocks-XLPGq8A5.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-CdNtNOuP.js';
 import 'class-variance-authority/types';
 
 /**