@opensite/ui 1.2.2 → 1.2.3

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { EmblaOptionsType } from 'embla-carousel';
-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-badge-cards.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-badge-cards.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-demo-link.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-demo-link.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-feature-badge.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName, e as ContainerMaxWidth } from './community-initiatives-Bz_A5vLU.cjs';
-import { I as ImageItem, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName, e as ContainerMaxWidth } from './community-initiatives-r_NhxVet.cjs';
+import { 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-feature-badge.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName, e as ContainerMaxWidth } from './community-initiatives-Bi_ClKrO.js';
-import { I as ImageItem, O as OptixFlowConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName, e as ContainerMaxWidth } from './community-initiatives-DmVsuoHE.js';
+import { 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-fullscreen-scroll-fx.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName, e as ContainerMaxWidth } 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, e as ContainerMaxWidth } 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-fullscreen-scroll-fx.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName, e as ContainerMaxWidth } 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, e as ContainerMaxWidth } 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-gallery-thumbnails.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-gallery-thumbnails.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-gradient-overlay.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-gradient-overlay.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-gradient-text.cjs

@@ -1170,7 +1170,7 @@ function CarouselGradientText({
       {
         href: item.href,
         className: cn(
-          "relative aspect-4/5 max-h-[500px] rounded-2xl",
+          "relative flex aspect-4/5 max-h-[500px] rounded-2xl",
           item.className,
           cardClassName
         ),
@@ -1179,7 +1179,7 @@ function CarouselGradientText({
             "div",
             {
               className: cn(
-                "absolute inset-0 rounded-2xl bg-linear-to-b from-black to-transparent to-40% dark:from-background",
+                "absolute inset-0 rounded-2xl bg-linear-to-b from-black to-transparent to-50% dark:from-background",
                 gradientClassName
               )
             }
@@ -1225,6 +1225,7 @@ function CarouselGradientText({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
+      containerClassName: "px-4",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Carousel, { setApi, className: carouselClassName, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
@@ -1256,7 +1257,7 @@ function CarouselGradientText({
                   "div",
                   {
                     className: cn(
-                      "mt-8 hidden items-center gap-4 md:flex",
+                      "mt-8 hidden items-center gap-2 md:flex",
                       controlsClassName
                     ),
                     children: [
@@ -1283,7 +1284,7 @@ function CarouselGradientText({
           "div",
           {
             className: cn(
-              "mt-8 flex items-center lg:ml-[50%]",
+              "mt-4 md:mt-8 flex items-center lg:ml-[50%]",
               indicatorsClassName
             ),
             children: Array.from({ length: items?.length ?? 0 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1291,7 +1292,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-fit px-4" : "m-4 size-4"
+                  index + 1 === current ? "w-fit px-4" : "my-4 mx-2 md:mx-4 size-4"
                 ),
                 onClick: () => api && api.scrollTo(index),
                 children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/carousel-gradient-text.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-gradient-text.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-gradient-text.js

@@ -1146,7 +1146,7 @@ function CarouselGradientText({
       {
         href: item.href,
         className: cn(
-          "relative aspect-4/5 max-h-[500px] rounded-2xl",
+          "relative flex aspect-4/5 max-h-[500px] rounded-2xl",
           item.className,
           cardClassName
         ),
@@ -1155,7 +1155,7 @@ function CarouselGradientText({
             "div",
             {
               className: cn(
-                "absolute inset-0 rounded-2xl bg-linear-to-b from-black to-transparent to-40% dark:from-background",
+                "absolute inset-0 rounded-2xl bg-linear-to-b from-black to-transparent to-50% dark:from-background",
                 gradientClassName
               )
             }
@@ -1201,6 +1201,7 @@ function CarouselGradientText({
       patternOpacity,
       patternClassName,
       className: cn("overflow-hidden", className),
+      containerClassName: "px-4",
       children: [
         /* @__PURE__ */ jsx(Carousel, { setApi, className: carouselClassName, children: /* @__PURE__ */ jsxs(
           "div",
@@ -1232,7 +1233,7 @@ function CarouselGradientText({
                   "div",
                   {
                     className: cn(
-                      "mt-8 hidden items-center gap-4 md:flex",
+                      "mt-8 hidden items-center gap-2 md:flex",
                       controlsClassName
                     ),
                     children: [
@@ -1259,7 +1260,7 @@ function CarouselGradientText({
           "div",
           {
             className: cn(
-              "mt-8 flex items-center lg:ml-[50%]",
+              "mt-4 md:mt-8 flex items-center lg:ml-[50%]",
               indicatorsClassName
             ),
             children: Array.from({ length: items?.length ?? 0 }).map((_, index) => /* @__PURE__ */ jsx(
@@ -1267,7 +1268,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-fit px-4" : "m-4 size-4"
+                  index + 1 === current ? "w-fit px-4" : "my-4 mx-2 md:mx-4 size-4"
                 ),
                 onClick: () => api && api.scrollTo(index),
                 children: /* @__PURE__ */ jsx(

package/dist/carousel-horizontal-cards.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-horizontal-cards.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-icon-sidebar.cjs

@@ -1220,7 +1220,7 @@ function CarouselIconSidebar({
       "div",
       {
         className: cn(
-          "flex h-full flex-col gap-8 rounded-lg p-8",
+          "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
@@ -1230,35 +1230,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__ */ jsxRuntime.jsx(DynamicIcon, { name: activeItem.icon, size: 24 })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
-            typeof activeItem.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium", titleClassName), children: activeItem.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium", titleClassName), children: activeItem.title }),
-            typeof activeItem.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "mb-4 text-base text-muted-foreground",
-                  descriptionClassName
-                ),
-                children: activeItem.description
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "mb-4 text-base text-muted-foreground",
-                  descriptionClassName
-                ),
-                children: activeItem.description
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-4", controlsClassName), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between h-full gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 md:gap-4", children: [
+              typeof activeItem.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  className: cn(
+                    "text-xl md:text-2xl font-medium",
+                    titleClassName
+                  ),
+                  children: activeItem.title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xl md:text-2xl font-medium",
+                    titleClassName
+                  ),
+                  children: activeItem.title
+                }
+              ),
+              typeof activeItem.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mb-4 text-base text-muted-foreground",
+                    descriptionClassName
+                  ),
+                  children: activeItem.description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "mb-4 text-base text-muted-foreground",
+                    descriptionClassName
+                  ),
+                  children: activeItem.description
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", controlsClassName), children: [
               /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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" })
             ] })
@@ -1318,7 +1338,7 @@ function CarouselIconSidebar({
       patternClassName,
       className,
       children: [
-        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16", children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 mb-6 md:mb-16 px-4 md:px-0", children: [
           title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
             "h2",
             {
@@ -1349,10 +1369,9 @@ function CarouselIconSidebar({
             }
           ))
         ] }) : 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: "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 })
+        /* @__PURE__ */ jsxRuntime.jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 md: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: cn("h-full", carouselContentClassName), children: itemsContent }) })
         ] }) }),
         lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
           lightbox.Lightbox,

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 p-8",
+          "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-6 md: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",
             {
@@ -1325,10 +1345,9 @@ function CarouselIconSidebar({
             }
           ))
         ] }) : 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: "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 })
+        /* @__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: cn("h-full", carouselContentClassName), children: itemsContent }) })
         ] }) }),
         lightboxOpen && /* @__PURE__ */ jsx(
           Lightbox,

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';
 
 /**