@opensite/ui 1.3.1 → 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -616,7 +616,7 @@ function FeatureAccordionImage({
616
616
  imageClassName,
617
617
  optixFlowConfig,
618
618
  background,
619
- spacing,
619
+ spacing = "py-12 md:py-32",
620
620
  pattern,
621
621
  patternOpacity,
622
622
  patternClassName
@@ -594,7 +594,7 @@ function FeatureAccordionImage({
594
594
  imageClassName,
595
595
  optixFlowConfig,
596
596
  background,
597
- spacing,
597
+ spacing = "py-12 md:py-32",
598
598
  pattern,
599
599
  patternOpacity,
600
600
  patternClassName
@@ -962,7 +962,7 @@ function FeatureBentoImageGrid({
962
962
  items,
963
963
  itemsSlot,
964
964
  className,
965
- containerClassName,
965
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
966
966
  titleClassName,
967
967
  descriptionClassName,
968
968
  gridClassName,
@@ -970,7 +970,7 @@ function FeatureBentoImageGrid({
970
970
  smallCardClassName,
971
971
  optixFlowConfig,
972
972
  background,
973
- spacing,
973
+ spacing = "py-12 md:py-32",
974
974
  pattern,
975
975
  patternOpacity,
976
976
  patternClassName
@@ -941,7 +941,7 @@ function FeatureBentoImageGrid({
941
941
  items,
942
942
  itemsSlot,
943
943
  className,
944
- containerClassName,
944
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
945
945
  titleClassName,
946
946
  descriptionClassName,
947
947
  gridClassName,
@@ -949,7 +949,7 @@ function FeatureBentoImageGrid({
949
949
  smallCardClassName,
950
950
  optixFlowConfig,
951
951
  background,
952
- spacing,
952
+ spacing = "py-12 md:py-32",
953
953
  pattern,
954
954
  patternOpacity,
955
955
  patternClassName
@@ -643,7 +643,7 @@ function FeatureBentoUtilities({
643
643
  rightColumnCards,
644
644
  rightColumnSlot,
645
645
  className,
646
- containerClassName,
646
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
647
647
  headerClassName,
648
648
  labelClassName,
649
649
  titleClassName,
@@ -652,7 +652,7 @@ function FeatureBentoUtilities({
652
652
  columnClassName,
653
653
  optixFlowConfig,
654
654
  background,
655
- spacing,
655
+ spacing = "py-12 md:py-32",
656
656
  pattern,
657
657
  patternOpacity,
658
658
  patternClassName
@@ -621,7 +621,7 @@ function FeatureBentoUtilities({
621
621
  rightColumnCards,
622
622
  rightColumnSlot,
623
623
  className,
624
- containerClassName,
624
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
625
625
  headerClassName,
626
626
  labelClassName,
627
627
  titleClassName,
@@ -630,7 +630,7 @@ function FeatureBentoUtilities({
630
630
  columnClassName,
631
631
  optixFlowConfig,
632
632
  background,
633
- spacing,
633
+ spacing = "py-12 md:py-32",
634
634
  pattern,
635
635
  patternOpacity,
636
636
  patternClassName
@@ -1002,7 +1002,7 @@ function FeatureChecklistThreeColumn({
1002
1002
  cards,
1003
1003
  cardsSlot,
1004
1004
  className,
1005
- containerClassName,
1005
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
1006
1006
  headerGridClassName,
1007
1007
  titleClassName,
1008
1008
  checklistClassName,
@@ -1010,7 +1010,7 @@ function FeatureChecklistThreeColumn({
1010
1010
  cardClassName,
1011
1011
  optixFlowConfig,
1012
1012
  background,
1013
- spacing,
1013
+ spacing = "py-12 md:py-32",
1014
1014
  pattern,
1015
1015
  patternOpacity,
1016
1016
  patternClassName
@@ -981,7 +981,7 @@ function FeatureChecklistThreeColumn({
981
981
  cards,
982
982
  cardsSlot,
983
983
  className,
984
- containerClassName,
984
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
985
985
  headerGridClassName,
986
986
  titleClassName,
987
987
  checklistClassName,
@@ -989,7 +989,7 @@ function FeatureChecklistThreeColumn({
989
989
  cardClassName,
990
990
  optixFlowConfig,
991
991
  background,
992
- spacing,
992
+ spacing = "py-12 md:py-32",
993
993
  pattern,
994
994
  patternOpacity,
995
995
  patternClassName
@@ -1170,7 +1170,7 @@ function FeatureIconTabsContent({
1170
1170
  if (!tabs || tabs.length === 0) return null;
1171
1171
  const activeDefaultTab = defaultTab || tabs[0]?.value;
1172
1172
  return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: activeDefaultTab, className: "mt-8", children: [
1173
- /* @__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(
1173
+ /* @__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(
1174
1174
  TabsList,
1175
1175
  {
1176
1176
  className: cn(
@@ -1182,7 +1182,7 @@ function FeatureIconTabsContent({
1182
1182
  {
1183
1183
  value: tab.value,
1184
1184
  className: cn(
1185
- "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border pl-0 pr-4 md:pl-4 md:pr-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
1185
+ "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
1186
1186
  `data-[state=active]:${getBorderColor(background, "accent")}`,
1187
1187
  tabTriggerClassName,
1188
1188
  tab.className
@@ -1196,7 +1196,7 @@ function FeatureIconTabsContent({
1196
1196
  ))
1197
1197
  }
1198
1198
  ) }),
1199
- /* @__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/50 rounded-2xl shadow-lg", children: tabs.map((tab) => {
1199
+ /* @__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) => {
1200
1200
  if (tab.contentSlot) {
1201
1201
  return /* @__PURE__ */ jsxRuntime.jsx(
1202
1202
  TabsContent,
@@ -1148,7 +1148,7 @@ function FeatureIconTabsContent({
1148
1148
  if (!tabs || tabs.length === 0) return null;
1149
1149
  const activeDefaultTab = defaultTab || tabs[0]?.value;
1150
1150
  return /* @__PURE__ */ jsxs(Tabs, { defaultValue: activeDefaultTab, className: "mt-8", children: [
1151
- /* @__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(
1151
+ /* @__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(
1152
1152
  TabsList,
1153
1153
  {
1154
1154
  className: cn(
@@ -1160,7 +1160,7 @@ function FeatureIconTabsContent({
1160
1160
  {
1161
1161
  value: tab.value,
1162
1162
  className: cn(
1163
- "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border pl-0 pr-4 md:pl-4 md:pr-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
1163
+ "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
1164
1164
  `data-[state=active]:${getBorderColor(background, "accent")}`,
1165
1165
  tabTriggerClassName,
1166
1166
  tab.className
@@ -1174,7 +1174,7 @@ function FeatureIconTabsContent({
1174
1174
  ))
1175
1175
  }
1176
1176
  ) }),
1177
- /* @__PURE__ */ jsx("div", { className: cn("py-6 md:py-10", contentWrapperClassName), children: /* @__PURE__ */ jsx("div", { className: "p-4 md:p-8 bg-muted/50 rounded-2xl shadow-lg", children: tabs.map((tab) => {
1177
+ /* @__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) => {
1178
1178
  if (tab.contentSlot) {
1179
1179
  return /* @__PURE__ */ jsx(
1180
1180
  TabsContent,
@@ -1010,7 +1010,7 @@ function FeatureImageOverlayBadge({
1010
1010
  overlayLinkUrl,
1011
1011
  overlayLinkOnClick,
1012
1012
  className,
1013
- containerClassName,
1013
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
1014
1014
  gridClassName,
1015
1015
  contentClassName,
1016
1016
  badgeClassName,
@@ -988,7 +988,7 @@ function FeatureImageOverlayBadge({
988
988
  overlayLinkUrl,
989
989
  overlayLinkOnClick,
990
990
  className,
991
- containerClassName,
991
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
992
992
  gridClassName,
993
993
  contentClassName,
994
994
  badgeClassName,
@@ -962,7 +962,7 @@ function FeatureIntegrationCards({
962
962
  integrations,
963
963
  integrationsSlot,
964
964
  className,
965
- containerClassName,
965
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
966
966
  headerClassName,
967
967
  titleClassName,
968
968
  descriptionClassName,
@@ -970,7 +970,7 @@ function FeatureIntegrationCards({
970
970
  cardClassName,
971
971
  optixFlowConfig,
972
972
  background,
973
- spacing,
973
+ spacing = "py-12 md:py-32",
974
974
  pattern,
975
975
  patternOpacity,
976
976
  patternClassName
@@ -941,7 +941,7 @@ function FeatureIntegrationCards({
941
941
  integrations,
942
942
  integrationsSlot,
943
943
  className,
944
- containerClassName,
944
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
945
945
  headerClassName,
946
946
  titleClassName,
947
947
  descriptionClassName,
@@ -949,7 +949,7 @@ function FeatureIntegrationCards({
949
949
  cardClassName,
950
950
  optixFlowConfig,
951
951
  background,
952
- spacing,
952
+ spacing = "py-12 md:py-32",
953
953
  pattern,
954
954
  patternOpacity,
955
955
  patternClassName
@@ -1128,10 +1128,11 @@ function FeatureShowcase({
1128
1128
  slideClassName,
1129
1129
  contentClassName,
1130
1130
  mediaClassName,
1131
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
1131
1132
  equalizeOnMobile,
1132
1133
  stretchMediaOnMobile,
1133
1134
  background,
1134
- spacing = "py-6 md:py-32",
1135
+ spacing = "py-12 md:py-32",
1135
1136
  pattern,
1136
1137
  patternOpacity,
1137
1138
  patternClassName
@@ -1254,6 +1255,7 @@ function FeatureShowcase({
1254
1255
  patternOpacity,
1255
1256
  patternClassName,
1256
1257
  className,
1258
+ containerClassName,
1257
1259
  children: [
1258
1260
  children,
1259
1261
  carouselContent
@@ -46,6 +46,10 @@ interface FeatureShowcaseProps {
46
46
  * Additional CSS classes for the media area
47
47
  */
48
48
  mediaClassName?: string;
49
+ /**
50
+ * Additional CSS classes for the container
51
+ */
52
+ containerClassName?: string;
49
53
  /**
50
54
  * Whether to equalize slide heights on mobile
51
55
  */
@@ -98,6 +102,6 @@ interface FeatureShowcaseProps {
98
102
  * />
99
103
  * ```
100
104
  */
101
- declare function FeatureShowcase({ items, children, className, carouselClassName, slideClassName, contentClassName, mediaClassName, equalizeOnMobile, stretchMediaOnMobile, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureShowcaseProps): react_jsx_runtime.JSX.Element;
105
+ declare function FeatureShowcase({ items, children, className, carouselClassName, slideClassName, contentClassName, mediaClassName, containerClassName, equalizeOnMobile, stretchMediaOnMobile, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureShowcaseProps): react_jsx_runtime.JSX.Element;
102
106
 
103
107
  export { FeatureShowcase };
@@ -46,6 +46,10 @@ interface FeatureShowcaseProps {
46
46
  * Additional CSS classes for the media area
47
47
  */
48
48
  mediaClassName?: string;
49
+ /**
50
+ * Additional CSS classes for the container
51
+ */
52
+ containerClassName?: string;
49
53
  /**
50
54
  * Whether to equalize slide heights on mobile
51
55
  */
@@ -98,6 +102,6 @@ interface FeatureShowcaseProps {
98
102
  * />
99
103
  * ```
100
104
  */
101
- declare function FeatureShowcase({ items, children, className, carouselClassName, slideClassName, contentClassName, mediaClassName, equalizeOnMobile, stretchMediaOnMobile, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureShowcaseProps): react_jsx_runtime.JSX.Element;
105
+ declare function FeatureShowcase({ items, children, className, carouselClassName, slideClassName, contentClassName, mediaClassName, containerClassName, equalizeOnMobile, stretchMediaOnMobile, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureShowcaseProps): react_jsx_runtime.JSX.Element;
102
106
 
103
107
  export { FeatureShowcase };
@@ -1104,10 +1104,11 @@ function FeatureShowcase({
1104
1104
  slideClassName,
1105
1105
  contentClassName,
1106
1106
  mediaClassName,
1107
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
1107
1108
  equalizeOnMobile,
1108
1109
  stretchMediaOnMobile,
1109
1110
  background,
1110
- spacing = "py-6 md:py-32",
1111
+ spacing = "py-12 md:py-32",
1111
1112
  pattern,
1112
1113
  patternOpacity,
1113
1114
  patternClassName
@@ -1230,6 +1231,7 @@ function FeatureShowcase({
1230
1231
  patternOpacity,
1231
1232
  patternClassName,
1232
1233
  className,
1234
+ containerClassName,
1233
1235
  children: [
1234
1236
  children,
1235
1237
  carouselContent
@@ -834,7 +834,7 @@ function FeatureSplitImageReverse({
834
834
  actions,
835
835
  actionsSlot,
836
836
  className,
837
- containerClassName,
837
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
838
838
  gridClassName,
839
839
  imageClassName,
840
840
  contentClassName,
@@ -843,7 +843,7 @@ function FeatureSplitImageReverse({
843
843
  actionsClassName,
844
844
  optixFlowConfig,
845
845
  background,
846
- spacing = "py-6 md:py-32",
846
+ spacing = "py-12 md:py-32",
847
847
  pattern,
848
848
  patternOpacity,
849
849
  patternClassName
@@ -813,7 +813,7 @@ function FeatureSplitImageReverse({
813
813
  actions,
814
814
  actionsSlot,
815
815
  className,
816
- containerClassName,
816
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
817
817
  gridClassName,
818
818
  imageClassName,
819
819
  contentClassName,
@@ -822,7 +822,7 @@ function FeatureSplitImageReverse({
822
822
  actionsClassName,
823
823
  optixFlowConfig,
824
824
  background,
825
- spacing = "py-6 md:py-32",
825
+ spacing = "py-12 md:py-32",
826
826
  pattern,
827
827
  patternOpacity,
828
828
  patternClassName
@@ -980,7 +980,7 @@ function FeatureUtilityCardsGrid({
980
980
  utilities,
981
981
  utilitiesSlot,
982
982
  className,
983
- containerClassName,
983
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
984
984
  headerClassName,
985
985
  labelClassName,
986
986
  titleClassName,
@@ -989,7 +989,7 @@ function FeatureUtilityCardsGrid({
989
989
  cardClassName,
990
990
  optixFlowConfig,
991
991
  background,
992
- spacing = "py-6 md:py-32",
992
+ spacing = "py-12 md:py-32",
993
993
  pattern,
994
994
  patternOpacity,
995
995
  patternClassName
@@ -958,7 +958,7 @@ function FeatureUtilityCardsGrid({
958
958
  utilities,
959
959
  utilitiesSlot,
960
960
  className,
961
- containerClassName,
961
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
962
962
  headerClassName,
963
963
  labelClassName,
964
964
  titleClassName,
@@ -967,7 +967,7 @@ function FeatureUtilityCardsGrid({
967
967
  cardClassName,
968
968
  optixFlowConfig,
969
969
  background,
970
- spacing = "py-6 md:py-32",
970
+ spacing = "py-12 md:py-32",
971
971
  pattern,
972
972
  patternOpacity,
973
973
  patternClassName
package/dist/registry.cjs CHANGED
@@ -20539,10 +20539,11 @@ function FeatureShowcase({
20539
20539
  slideClassName,
20540
20540
  contentClassName,
20541
20541
  mediaClassName,
20542
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
20542
20543
  equalizeOnMobile,
20543
20544
  stretchMediaOnMobile,
20544
20545
  background,
20545
- spacing = "py-6 md:py-32",
20546
+ spacing = "py-12 md:py-32",
20546
20547
  pattern,
20547
20548
  patternOpacity,
20548
20549
  patternClassName
@@ -20665,6 +20666,7 @@ function FeatureShowcase({
20665
20666
  patternOpacity,
20666
20667
  patternClassName,
20667
20668
  className,
20669
+ containerClassName,
20668
20670
  children: [
20669
20671
  children,
20670
20672
  carouselContent
@@ -20830,7 +20832,7 @@ function FeatureSplitImageReverse({
20830
20832
  actions,
20831
20833
  actionsSlot,
20832
20834
  className,
20833
- containerClassName,
20835
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
20834
20836
  gridClassName,
20835
20837
  imageClassName,
20836
20838
  contentClassName,
@@ -20839,7 +20841,7 @@ function FeatureSplitImageReverse({
20839
20841
  actionsClassName,
20840
20842
  optixFlowConfig,
20841
20843
  background,
20842
- spacing = "py-6 md:py-32",
20844
+ spacing = "py-12 md:py-32",
20843
20845
  pattern,
20844
20846
  patternOpacity,
20845
20847
  patternClassName
@@ -25798,7 +25800,7 @@ function FeatureUtilityCardsGrid({
25798
25800
  utilities,
25799
25801
  utilitiesSlot,
25800
25802
  className,
25801
- containerClassName,
25803
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
25802
25804
  headerClassName,
25803
25805
  labelClassName,
25804
25806
  titleClassName,
@@ -25807,7 +25809,7 @@ function FeatureUtilityCardsGrid({
25807
25809
  cardClassName,
25808
25810
  optixFlowConfig,
25809
25811
  background,
25810
- spacing = "py-6 md:py-32",
25812
+ spacing = "py-12 md:py-32",
25811
25813
  pattern,
25812
25814
  patternOpacity,
25813
25815
  patternClassName
@@ -25979,7 +25981,7 @@ function FeatureBentoUtilities({
25979
25981
  rightColumnCards,
25980
25982
  rightColumnSlot,
25981
25983
  className,
25982
- containerClassName,
25984
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
25983
25985
  headerClassName,
25984
25986
  labelClassName,
25985
25987
  titleClassName,
@@ -25988,7 +25990,7 @@ function FeatureBentoUtilities({
25988
25990
  columnClassName,
25989
25991
  optixFlowConfig,
25990
25992
  background,
25991
- spacing,
25993
+ spacing = "py-12 md:py-32",
25992
25994
  pattern,
25993
25995
  patternOpacity,
25994
25996
  patternClassName
@@ -26086,7 +26088,7 @@ function FeatureChecklistThreeColumn({
26086
26088
  cards,
26087
26089
  cardsSlot,
26088
26090
  className,
26089
- containerClassName,
26091
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
26090
26092
  headerGridClassName,
26091
26093
  titleClassName,
26092
26094
  checklistClassName,
@@ -26094,7 +26096,7 @@ function FeatureChecklistThreeColumn({
26094
26096
  cardClassName,
26095
26097
  optixFlowConfig,
26096
26098
  background,
26097
- spacing,
26099
+ spacing = "py-12 md:py-32",
26098
26100
  pattern,
26099
26101
  patternOpacity,
26100
26102
  patternClassName
@@ -26213,7 +26215,7 @@ function FeatureIntegrationCards({
26213
26215
  integrations,
26214
26216
  integrationsSlot,
26215
26217
  className,
26216
- containerClassName,
26218
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
26217
26219
  headerClassName,
26218
26220
  titleClassName,
26219
26221
  descriptionClassName,
@@ -26221,7 +26223,7 @@ function FeatureIntegrationCards({
26221
26223
  cardClassName,
26222
26224
  optixFlowConfig,
26223
26225
  background,
26224
- spacing,
26226
+ spacing = "py-12 md:py-32",
26225
26227
  pattern,
26226
26228
  patternOpacity,
26227
26229
  patternClassName
@@ -26404,7 +26406,7 @@ function FeatureIconTabsContent({
26404
26406
  if (!tabs || tabs.length === 0) return null;
26405
26407
  const activeDefaultTab = defaultTab || tabs[0]?.value;
26406
26408
  return /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: activeDefaultTab, className: "mt-8", children: [
26407
- /* @__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(
26409
+ /* @__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(
26408
26410
  TabsList,
26409
26411
  {
26410
26412
  className: cn(
@@ -26416,7 +26418,7 @@ function FeatureIconTabsContent({
26416
26418
  {
26417
26419
  value: tab.value,
26418
26420
  className: cn(
26419
- "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border pl-0 pr-4 md:pl-4 md:pr-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
26421
+ "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
26420
26422
  `data-[state=active]:${getBorderColor(background, "accent")}`,
26421
26423
  tabTriggerClassName,
26422
26424
  tab.className
@@ -26430,7 +26432,7 @@ function FeatureIconTabsContent({
26430
26432
  ))
26431
26433
  }
26432
26434
  ) }),
26433
- /* @__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/50 rounded-2xl shadow-lg", children: tabs.map((tab) => {
26435
+ /* @__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) => {
26434
26436
  if (tab.contentSlot) {
26435
26437
  return /* @__PURE__ */ jsxRuntime.jsx(
26436
26438
  TabsContent,
@@ -26633,7 +26635,7 @@ function FeatureImageOverlayBadge({
26633
26635
  overlayLinkUrl,
26634
26636
  overlayLinkOnClick,
26635
26637
  className,
26636
- containerClassName,
26638
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
26637
26639
  gridClassName,
26638
26640
  contentClassName,
26639
26641
  badgeClassName,
@@ -26977,7 +26979,7 @@ function FeatureBentoImageGrid({
26977
26979
  items,
26978
26980
  itemsSlot,
26979
26981
  className,
26980
- containerClassName,
26982
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
26981
26983
  titleClassName,
26982
26984
  descriptionClassName,
26983
26985
  gridClassName,
@@ -26985,7 +26987,7 @@ function FeatureBentoImageGrid({
26985
26987
  smallCardClassName,
26986
26988
  optixFlowConfig,
26987
26989
  background,
26988
- spacing,
26990
+ spacing = "py-12 md:py-32",
26989
26991
  pattern,
26990
26992
  patternOpacity,
26991
26993
  patternClassName
@@ -27644,7 +27646,7 @@ function FeatureAccordionImage({
27644
27646
  imageClassName,
27645
27647
  optixFlowConfig,
27646
27648
  background,
27647
- spacing,
27649
+ spacing = "py-12 md:py-32",
27648
27650
  pattern,
27649
27651
  patternOpacity,
27650
27652
  patternClassName
package/dist/registry.js CHANGED
@@ -20499,10 +20499,11 @@ function FeatureShowcase({
20499
20499
  slideClassName,
20500
20500
  contentClassName,
20501
20501
  mediaClassName,
20502
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
20502
20503
  equalizeOnMobile,
20503
20504
  stretchMediaOnMobile,
20504
20505
  background,
20505
- spacing = "py-6 md:py-32",
20506
+ spacing = "py-12 md:py-32",
20506
20507
  pattern,
20507
20508
  patternOpacity,
20508
20509
  patternClassName
@@ -20625,6 +20626,7 @@ function FeatureShowcase({
20625
20626
  patternOpacity,
20626
20627
  patternClassName,
20627
20628
  className,
20629
+ containerClassName,
20628
20630
  children: [
20629
20631
  children,
20630
20632
  carouselContent
@@ -20790,7 +20792,7 @@ function FeatureSplitImageReverse({
20790
20792
  actions,
20791
20793
  actionsSlot,
20792
20794
  className,
20793
- containerClassName,
20795
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
20794
20796
  gridClassName,
20795
20797
  imageClassName,
20796
20798
  contentClassName,
@@ -20799,7 +20801,7 @@ function FeatureSplitImageReverse({
20799
20801
  actionsClassName,
20800
20802
  optixFlowConfig,
20801
20803
  background,
20802
- spacing = "py-6 md:py-32",
20804
+ spacing = "py-12 md:py-32",
20803
20805
  pattern,
20804
20806
  patternOpacity,
20805
20807
  patternClassName
@@ -25758,7 +25760,7 @@ function FeatureUtilityCardsGrid({
25758
25760
  utilities,
25759
25761
  utilitiesSlot,
25760
25762
  className,
25761
- containerClassName,
25763
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
25762
25764
  headerClassName,
25763
25765
  labelClassName,
25764
25766
  titleClassName,
@@ -25767,7 +25769,7 @@ function FeatureUtilityCardsGrid({
25767
25769
  cardClassName,
25768
25770
  optixFlowConfig,
25769
25771
  background,
25770
- spacing = "py-6 md:py-32",
25772
+ spacing = "py-12 md:py-32",
25771
25773
  pattern,
25772
25774
  patternOpacity,
25773
25775
  patternClassName
@@ -25939,7 +25941,7 @@ function FeatureBentoUtilities({
25939
25941
  rightColumnCards,
25940
25942
  rightColumnSlot,
25941
25943
  className,
25942
- containerClassName,
25944
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
25943
25945
  headerClassName,
25944
25946
  labelClassName,
25945
25947
  titleClassName,
@@ -25948,7 +25950,7 @@ function FeatureBentoUtilities({
25948
25950
  columnClassName,
25949
25951
  optixFlowConfig,
25950
25952
  background,
25951
- spacing,
25953
+ spacing = "py-12 md:py-32",
25952
25954
  pattern,
25953
25955
  patternOpacity,
25954
25956
  patternClassName
@@ -26046,7 +26048,7 @@ function FeatureChecklistThreeColumn({
26046
26048
  cards,
26047
26049
  cardsSlot,
26048
26050
  className,
26049
- containerClassName,
26051
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
26050
26052
  headerGridClassName,
26051
26053
  titleClassName,
26052
26054
  checklistClassName,
@@ -26054,7 +26056,7 @@ function FeatureChecklistThreeColumn({
26054
26056
  cardClassName,
26055
26057
  optixFlowConfig,
26056
26058
  background,
26057
- spacing,
26059
+ spacing = "py-12 md:py-32",
26058
26060
  pattern,
26059
26061
  patternOpacity,
26060
26062
  patternClassName
@@ -26173,7 +26175,7 @@ function FeatureIntegrationCards({
26173
26175
  integrations,
26174
26176
  integrationsSlot,
26175
26177
  className,
26176
- containerClassName,
26178
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
26177
26179
  headerClassName,
26178
26180
  titleClassName,
26179
26181
  descriptionClassName,
@@ -26181,7 +26183,7 @@ function FeatureIntegrationCards({
26181
26183
  cardClassName,
26182
26184
  optixFlowConfig,
26183
26185
  background,
26184
- spacing,
26186
+ spacing = "py-12 md:py-32",
26185
26187
  pattern,
26186
26188
  patternOpacity,
26187
26189
  patternClassName
@@ -26364,7 +26366,7 @@ function FeatureIconTabsContent({
26364
26366
  if (!tabs || tabs.length === 0) return null;
26365
26367
  const activeDefaultTab = defaultTab || tabs[0]?.value;
26366
26368
  return /* @__PURE__ */ jsxs(Tabs, { defaultValue: activeDefaultTab, className: "mt-8", children: [
26367
- /* @__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(
26369
+ /* @__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(
26368
26370
  TabsList,
26369
26371
  {
26370
26372
  className: cn(
@@ -26376,7 +26378,7 @@ function FeatureIconTabsContent({
26376
26378
  {
26377
26379
  value: tab.value,
26378
26380
  className: cn(
26379
- "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border pl-0 pr-4 md:pl-4 md:pr-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
26381
+ "flex h-auto! w-auto! flex-none items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
26380
26382
  `data-[state=active]:${getBorderColor(background, "accent")}`,
26381
26383
  tabTriggerClassName,
26382
26384
  tab.className
@@ -26390,7 +26392,7 @@ function FeatureIconTabsContent({
26390
26392
  ))
26391
26393
  }
26392
26394
  ) }),
26393
- /* @__PURE__ */ jsx("div", { className: cn("py-6 md:py-10", contentWrapperClassName), children: /* @__PURE__ */ jsx("div", { className: "p-4 md:p-8 bg-muted/50 rounded-2xl shadow-lg", children: tabs.map((tab) => {
26395
+ /* @__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) => {
26394
26396
  if (tab.contentSlot) {
26395
26397
  return /* @__PURE__ */ jsx(
26396
26398
  TabsContent,
@@ -26593,7 +26595,7 @@ function FeatureImageOverlayBadge({
26593
26595
  overlayLinkUrl,
26594
26596
  overlayLinkOnClick,
26595
26597
  className,
26596
- containerClassName,
26598
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
26597
26599
  gridClassName,
26598
26600
  contentClassName,
26599
26601
  badgeClassName,
@@ -26937,7 +26939,7 @@ function FeatureBentoImageGrid({
26937
26939
  items,
26938
26940
  itemsSlot,
26939
26941
  className,
26940
- containerClassName,
26942
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
26941
26943
  titleClassName,
26942
26944
  descriptionClassName,
26943
26945
  gridClassName,
@@ -26945,7 +26947,7 @@ function FeatureBentoImageGrid({
26945
26947
  smallCardClassName,
26946
26948
  optixFlowConfig,
26947
26949
  background,
26948
- spacing,
26950
+ spacing = "py-12 md:py-32",
26949
26951
  pattern,
26950
26952
  patternOpacity,
26951
26953
  patternClassName
@@ -27604,7 +27606,7 @@ function FeatureAccordionImage({
27604
27606
  imageClassName,
27605
27607
  optixFlowConfig,
27606
27608
  background,
27607
- spacing,
27609
+ spacing = "py-12 md:py-32",
27608
27610
  pattern,
27609
27611
  patternOpacity,
27610
27612
  patternClassName
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opensite/ui",
3
- "version": "1.3.1",
3
+ "version": "1.3.2",
4
4
  "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
5
5
  "keywords": [
6
6
  "react",