@opensite/ui 1.3.0 → 1.3.2

package/dist/feature-accordion-image.cjs

@@ -616,7 +616,7 @@ function FeatureAccordionImage({
   imageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName

package/dist/feature-accordion-image.js

@@ -594,7 +594,7 @@ function FeatureAccordionImage({
   imageClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName

package/dist/feature-bento-image-grid.cjs

@@ -962,7 +962,7 @@ function FeatureBentoImageGrid({
   items,
   itemsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   titleClassName,
   descriptionClassName,
   gridClassName,
@@ -970,7 +970,7 @@ function FeatureBentoImageGrid({
   smallCardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName

package/dist/feature-bento-image-grid.js

@@ -941,7 +941,7 @@ function FeatureBentoImageGrid({
   items,
   itemsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   titleClassName,
   descriptionClassName,
   gridClassName,
@@ -949,7 +949,7 @@ function FeatureBentoImageGrid({
   smallCardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName

package/dist/feature-bento-utilities.cjs

@@ -643,7 +643,7 @@ function FeatureBentoUtilities({
   rightColumnCards,
   rightColumnSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   labelClassName,
   titleClassName,
@@ -652,7 +652,7 @@ function FeatureBentoUtilities({
   columnClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName

package/dist/feature-bento-utilities.js

@@ -621,7 +621,7 @@ function FeatureBentoUtilities({
   rightColumnCards,
   rightColumnSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   labelClassName,
   titleClassName,
@@ -630,7 +630,7 @@ function FeatureBentoUtilities({
   columnClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName

package/dist/feature-capabilities-grid.cjs

@@ -972,8 +972,8 @@ function FeatureCapabilitiesGrid({
   items,
   itemsSlot,
   className,
-  containerClassName = "px-4 sm:px-4 md:px-6 lg:px-8",
-  spacing = "py-6 md:py-32",
+  containerClassName = "mx-auto w-full max-w-screen-lg md:max-w-screen-4xl relative z-10 px-6 sm:px-2 md:px-2 lg:px-2",
+  spacing = "py-12 md:py-32",
   eyebrowClassName,
   headingClassName,
   gridClassName,
@@ -1000,7 +1000,7 @@ function FeatureCapabilitiesGrid({
         Card,
         {
           className: cn(
-            "group relative rounded-md overflow-visible border-border/10 bg-background/5 p-0 transition-colors duration-300 hover:border-border/20",
+            "group relative rounded-md overflow-visible border-border/10 bg-card text-card-foreground p-0 transition-colors duration-300 hover:border-border/20",
             cardClassName,
             item.className
           ),
@@ -1018,7 +1018,7 @@ function FeatureCapabilitiesGrid({
                 "div",
                 {
                   className: cn(
-                    "flex h-10 w-10 items-center justify-center rounded-xl border border-border/15 bg-background/5",
+                    "flex h-10 w-10 items-center justify-center rounded-xl border ",
                     item.iconClassName
                   ),
                   children: iconContent
@@ -1047,7 +1047,7 @@ function FeatureCapabilitiesGrid({
                       "span",
                       {
                         className: cn(
-                          "rounded-full border border-border/20 px-2 py-0.5 text-[10px] leading-none",
+                          "rounded-full border px-2 py-0.5 text-[10px] leading-none",
                           item.badgeClassName
                         ),
                         children: item.badge
@@ -1092,7 +1092,6 @@ function FeatureCapabilitiesGrid({
       patternClassName,
       className,
       containerClassName,
-      containerMaxWidth: "lg",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
         eyebrow || heading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-4 md:space-y-6", children: [
           eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsxRuntime.jsx(

package/dist/feature-capabilities-grid.js

@@ -951,8 +951,8 @@ function FeatureCapabilitiesGrid({
   items,
   itemsSlot,
   className,
-  containerClassName = "px-4 sm:px-4 md:px-6 lg:px-8",
-  spacing = "py-6 md:py-32",
+  containerClassName = "mx-auto w-full max-w-screen-lg md:max-w-screen-4xl relative z-10 px-6 sm:px-2 md:px-2 lg:px-2",
+  spacing = "py-12 md:py-32",
   eyebrowClassName,
   headingClassName,
   gridClassName,
@@ -979,7 +979,7 @@ function FeatureCapabilitiesGrid({
         Card,
         {
           className: cn(
-            "group relative rounded-md overflow-visible border-border/10 bg-background/5 p-0 transition-colors duration-300 hover:border-border/20",
+            "group relative rounded-md overflow-visible border-border/10 bg-card text-card-foreground p-0 transition-colors duration-300 hover:border-border/20",
             cardClassName,
             item.className
           ),
@@ -997,7 +997,7 @@ function FeatureCapabilitiesGrid({
                 "div",
                 {
                   className: cn(
-                    "flex h-10 w-10 items-center justify-center rounded-xl border border-border/15 bg-background/5",
+                    "flex h-10 w-10 items-center justify-center rounded-xl border ",
                     item.iconClassName
                   ),
                   children: iconContent
@@ -1026,7 +1026,7 @@ function FeatureCapabilitiesGrid({
                       "span",
                       {
                         className: cn(
-                          "rounded-full border border-border/20 px-2 py-0.5 text-[10px] leading-none",
+                          "rounded-full border px-2 py-0.5 text-[10px] leading-none",
                           item.badgeClassName
                         ),
                         children: item.badge
@@ -1071,7 +1071,6 @@ function FeatureCapabilitiesGrid({
       patternClassName,
       className,
       containerClassName,
-      containerMaxWidth: "lg",
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
         eyebrow || heading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4 md:space-y-6", children: [
           eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm tracking-widest", eyebrowClassName), children: eyebrow }) : /* @__PURE__ */ jsx(

package/dist/feature-checklist-three-column.cjs

@@ -1002,7 +1002,7 @@ function FeatureChecklistThreeColumn({
   cards,
   cardsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerGridClassName,
   titleClassName,
   checklistClassName,
@@ -1010,7 +1010,7 @@ function FeatureChecklistThreeColumn({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName

package/dist/feature-checklist-three-column.js

@@ -981,7 +981,7 @@ function FeatureChecklistThreeColumn({
   cards,
   cardsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerGridClassName,
   titleClassName,
   checklistClassName,
@@ -989,7 +989,7 @@ function FeatureChecklistThreeColumn({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName

package/dist/feature-icon-grid-bordered.cjs

@@ -960,7 +960,7 @@ function FeatureIconGridBordered({
       "div",
       {
         className: cn(
-          "relative flex h-full flex-col justify-between gap-6 rounded-none border-dashed px-3 md:border-l md:px-5",
+          "relative flex h-full flex-col justify-between gap-6 rounded-none border-dashed px-0 md:border-l md:px-5",
           cardClassName,
           feature.className
         ),

package/dist/feature-icon-grid-bordered.js

@@ -939,7 +939,7 @@ function FeatureIconGridBordered({
       "div",
       {
         className: cn(
-          "relative flex h-full flex-col justify-between gap-6 rounded-none border-dashed px-3 md:border-l md:px-5",
+          "relative flex h-full flex-col justify-between gap-6 rounded-none border-dashed px-0 md:border-l md:px-5",
           cardClassName,
           feature.className
         ),

package/dist/feature-icon-tabs-content.cjs

@@ -1090,7 +1090,7 @@ function FeatureIconTabsContent({
   tabContentClassName,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "pt-14 pb-12 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -1170,7 +1170,7 @@ function FeatureIconTabsContent({
     if (!tabs || tabs.length === 0) return null;
     const activeDefaultTab = defaultTab || tabs[0]?.value;
     return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: activeDefaultTab, className: "mt-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container overflow-x-auto px-4 pb-2 md:px-6 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border/50 hover:scrollbar-thumb-border md:overflow-x-visible [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/30", children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container overflow-x-auto pl-0 pr-4 md:pl-4 md:pr-4 pb-2 md:px-6 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border/50 hover:scrollbar-thumb-border md:overflow-x-visible [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/30", children: /* @__PURE__ */ jsxRuntime.jsx(
         TabsList,
         {
           className: cn(
@@ -1196,7 +1196,7 @@ function FeatureIconTabsContent({
           ))
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-6 lg:py-16", contentWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: tabs.map((tab) => {
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-6 md:py-10", contentWrapperClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 md:p-8 bg-muted/60 rounded-2xl shadow-lg", children: tabs.map((tab) => {
         if (tab.contentSlot) {
           return /* @__PURE__ */ jsxRuntime.jsx(
             TabsContent,
@@ -1233,7 +1233,7 @@ function FeatureIconTabsContent({
                   "h3",
                   {
                     className: cn(
-                      "text-3xl font-semibold lg:text-5xl",
+                      "text-2xl font-semibold",
                       content.titleClassName
                     ),
                     children: content.title
@@ -1242,7 +1242,7 @@ function FeatureIconTabsContent({
                   "div",
                   {
                     className: cn(
-                      "text-3xl font-semibold lg:text-5xl",
+                      "text-2xl font-semibold",
                       content.titleClassName
                     ),
                     children: content.title
@@ -1314,7 +1314,7 @@ function FeatureIconTabsContent({
                 "h1",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl text-balance",
+                    "max-w-4xl text-3xl font-semibold md:text-6xl text-balance",
                     headingClassName
                   ),
                   children: heading
@@ -1323,7 +1323,7 @@ function FeatureIconTabsContent({
                 "div",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl text-balance",
+                    "max-w-4xl text-3xl font-semibold md:text-6xl text-balance",
                     headingClassName
                   ),
                   children: heading

package/dist/feature-icon-tabs-content.js

@@ -1068,7 +1068,7 @@ function FeatureIconTabsContent({
   tabContentClassName,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "pt-14 pb-12 md:pt-32 md:pb-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -1148,7 +1148,7 @@ function FeatureIconTabsContent({
     if (!tabs || tabs.length === 0) return null;
     const activeDefaultTab = defaultTab || tabs[0]?.value;
     return /* @__PURE__ */ jsxs(Tabs, { defaultValue: activeDefaultTab, className: "mt-8", children: [
-      /* @__PURE__ */ jsx("div", { className: "container overflow-x-auto px-4 pb-2 md:px-6 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border/50 hover:scrollbar-thumb-border md:overflow-x-visible [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/30", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "container overflow-x-auto pl-0 pr-4 md:pl-4 md:pr-4 pb-2 md:px-6 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border/50 hover:scrollbar-thumb-border md:overflow-x-visible [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/30", children: /* @__PURE__ */ jsx(
         TabsList,
         {
           className: cn(
@@ -1174,7 +1174,7 @@ function FeatureIconTabsContent({
           ))
         }
       ) }),
-      /* @__PURE__ */ jsx("div", { className: cn("py-6 lg:py-16", contentWrapperClassName), children: /* @__PURE__ */ jsx("div", { className: "relative", children: tabs.map((tab) => {
+      /* @__PURE__ */ jsx("div", { className: cn("py-6 md:py-10", contentWrapperClassName), children: /* @__PURE__ */ jsx("div", { className: "p-4 md:p-8 bg-muted/60 rounded-2xl shadow-lg", children: tabs.map((tab) => {
         if (tab.contentSlot) {
           return /* @__PURE__ */ jsx(
             TabsContent,
@@ -1211,7 +1211,7 @@ function FeatureIconTabsContent({
                   "h3",
                   {
                     className: cn(
-                      "text-3xl font-semibold lg:text-5xl",
+                      "text-2xl font-semibold",
                       content.titleClassName
                     ),
                     children: content.title
@@ -1220,7 +1220,7 @@ function FeatureIconTabsContent({
                   "div",
                   {
                     className: cn(
-                      "text-3xl font-semibold lg:text-5xl",
+                      "text-2xl font-semibold",
                       content.titleClassName
                     ),
                     children: content.title
@@ -1292,7 +1292,7 @@ function FeatureIconTabsContent({
                 "h1",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl text-balance",
+                    "max-w-4xl text-3xl font-semibold md:text-6xl text-balance",
                     headingClassName
                   ),
                   children: heading
@@ -1301,7 +1301,7 @@ function FeatureIconTabsContent({
                 "div",
                 {
                   className: cn(
-                    "max-w-2xl text-3xl font-semibold md:text-4xl text-balance",
+                    "max-w-4xl text-3xl font-semibold md:text-6xl text-balance",
                     headingClassName
                   ),
                   children: heading

package/dist/feature-image-cards-three-column.cjs

@@ -1002,7 +1002,7 @@ function FeatureImageCardsThreeColumn({
   cardsSlot,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   titleClassName,
   descriptionClassName,
   gridClassName,
@@ -1058,7 +1058,7 @@ function FeatureImageCardsThreeColumn({
           ),
           children: [
             renderImage(card, imageAlt),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-0 md:translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 md:translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-4 md:p-6", children: [
               (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxRuntime.jsxs(
                 Badge,
@@ -1128,7 +1128,7 @@ function FeatureImageCardsThreeColumn({
             "h2",
             {
               className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                "text-2xl font-semibold text-balance md:text-3xl lg:text-4xl max-w-lg md:max-w-md",
                 titleClassName
               ),
               children: title
@@ -1137,7 +1137,7 @@ function FeatureImageCardsThreeColumn({
             "div",
             {
               className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                "text-2xl font-semibold text-balance md:text-3xl lg:text-4xl max-w-lg md:max-w-md",
                 titleClassName
               ),
               children: title

package/dist/feature-image-cards-three-column.js

@@ -980,7 +980,7 @@ function FeatureImageCardsThreeColumn({
   cardsSlot,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  spacing = "py-6 md:py-32",
+  spacing = "py-12 md:py-32",
   titleClassName,
   descriptionClassName,
   gridClassName,
@@ -1036,7 +1036,7 @@ function FeatureImageCardsThreeColumn({
           ),
           children: [
             renderImage(card, imageAlt),
-            /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-0 md:translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
+            /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-10 md:translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
             /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-4 md:p-6", children: [
               (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxs(
                 Badge,
@@ -1106,7 +1106,7 @@ function FeatureImageCardsThreeColumn({
             "h2",
             {
               className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                "text-2xl font-semibold text-balance md:text-3xl lg:text-4xl max-w-lg md:max-w-md",
                 titleClassName
               ),
               children: title
@@ -1115,7 +1115,7 @@ function FeatureImageCardsThreeColumn({
             "div",
             {
               className: cn(
-                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                "text-2xl font-semibold text-balance md:text-3xl lg:text-4xl max-w-lg md:max-w-md",
                 titleClassName
               ),
               children: title

package/dist/feature-image-overlay-badge.cjs

@@ -1010,7 +1010,7 @@ function FeatureImageOverlayBadge({
   overlayLinkUrl,
   overlayLinkOnClick,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   gridClassName,
   contentClassName,
   badgeClassName,

package/dist/feature-image-overlay-badge.js

@@ -988,7 +988,7 @@ function FeatureImageOverlayBadge({
   overlayLinkUrl,
   overlayLinkOnClick,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   gridClassName,
   contentClassName,
   badgeClassName,

package/dist/feature-integration-cards.cjs

@@ -962,7 +962,7 @@ function FeatureIntegrationCards({
   integrations,
   integrationsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   titleClassName,
   descriptionClassName,
@@ -970,7 +970,7 @@ function FeatureIntegrationCards({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName

package/dist/feature-integration-cards.js

@@ -941,7 +941,7 @@ function FeatureIntegrationCards({
   integrations,
   integrationsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   titleClassName,
   descriptionClassName,
@@ -949,7 +949,7 @@ function FeatureIntegrationCards({
   cardClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "py-12 md:py-32",
   pattern,
   patternOpacity,
   patternClassName

package/dist/feature-numbered-cards.cjs

@@ -1127,7 +1127,7 @@ function FeatureNumberedCards({
                     "span",
                     {
                       className: cn(
-                        "absolute top-5 left-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:left-10",
+                        "absolute top-2 md:top-5 left-2 md:left-5 flex size-10 md:size-12 items-center justify-center rounded-md shadow-lg bg-primary text-sm md:text-md text-primary-foreground lg:top-10 lg:left-10 font-semibold",
                         badgeClassName
                       ),
                       children: String(index + 1).padStart(2, "0")

package/dist/feature-numbered-cards.js

@@ -1106,7 +1106,7 @@ function FeatureNumberedCards({
                     "span",
                     {
                       className: cn(
-                        "absolute top-5 left-5 flex size-6 items-center justify-center rounded-sm bg-primary font-mono text-xs text-primary-foreground md:top-10 md:left-10",
+                        "absolute top-2 md:top-5 left-2 md:left-5 flex size-10 md:size-12 items-center justify-center rounded-md shadow-lg bg-primary text-sm md:text-md text-primary-foreground lg:top-10 lg:left-10 font-semibold",
                         badgeClassName
                       ),
                       children: String(index + 1).padStart(2, "0")