@opensite/ui 2.3.6 → 2.3.8

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.
package/dist/registry.cjs CHANGED
@@ -16,6 +16,7 @@ var forms = require('@page-speed/forms');
16
16
  var integration = require('@page-speed/forms/integration');
17
17
  var framerMotion = require('framer-motion');
18
18
  var inputs = require('@page-speed/forms/inputs');
19
+ var lightbox = require('@page-speed/lightbox');
19
20
  var SeparatorPrimitive = require('@radix-ui/react-separator');
20
21
  var AccordionPrimitive = require('@radix-ui/react-accordion');
21
22
  var useEmblaCarousel = require('embla-carousel-react');
@@ -23,7 +24,6 @@ var Autoplay = require('embla-carousel-autoplay');
23
24
  var ProgressPrimitive = require('@radix-ui/react-progress');
24
25
  var AvatarPrimitive = require('@radix-ui/react-avatar');
25
26
  var AutoScroll3 = require('embla-carousel-auto-scroll');
26
- var lightbox = require('@page-speed/lightbox');
27
27
  var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
28
28
  var CheckboxPrimitive = require('@radix-ui/react-checkbox');
29
29
  var LabelPrimitive = require('@radix-ui/react-label');
@@ -1731,8 +1731,6 @@ function AboutVisionGallery({
1731
1731
  secondarySectionTitleClassName,
1732
1732
  secondarySectionContent,
1733
1733
  secondarySectionContentClassName,
1734
- secondarySectionLinkText,
1735
- secondarySectionLinkUrl,
1736
1734
  ctaTitle,
1737
1735
  ctaTitleClassName,
1738
1736
  ctaAction,
@@ -1784,7 +1782,7 @@ function AboutVisionGallery({
1784
1782
  );
1785
1783
  }, [ctaSlot, ctaAction]);
1786
1784
  const hasPrimarySection = primarySectionTitle || primarySectionContent;
1787
- const hasSecondarySection = secondarySectionTitle || secondarySectionContent || secondarySectionLinkText;
1785
+ const hasSecondarySection = secondarySectionTitle || secondarySectionContent;
1788
1786
  const hasCtaSection = ctaTitle || ctaSlot || ctaAction;
1789
1787
  return /* @__PURE__ */ jsxRuntime.jsxs(
1790
1788
  Section,
@@ -1812,7 +1810,6 @@ function AboutVisionGallery({
1812
1810
  {
1813
1811
  className: cn(
1814
1812
  "text-xl font-medium text-balance",
1815
- getTextColor(background, "muted"),
1816
1813
  subtitleClassName
1817
1814
  ),
1818
1815
  children: subtitle
@@ -1820,7 +1817,7 @@ function AboutVisionGallery({
1820
1817
  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subtitleClassName, children: subtitle }))
1821
1818
  ] }),
1822
1819
  imagesContent,
1823
- (hasPrimarySection || hasSecondarySection) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto grid max-w-5xl gap:7 md:gap-28 py-6 md:py-16 md:grid-cols-2", children: [
1820
+ (hasPrimarySection || hasSecondarySection) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap:7 md:gap-28 py-6 md:py-16 md:grid-cols-2", children: [
1824
1821
  hasPrimarySection && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1825
1822
  primarySectionTitle && (typeof primarySectionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1826
1823
  "h2",
@@ -1831,18 +1828,17 @@ function AboutVisionGallery({
1831
1828
  ),
1832
1829
  children: primarySectionTitle
1833
1830
  }
1834
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-5", primarySectionTitleClassName), children: primarySectionTitle })),
1831
+ ) : primarySectionTitle),
1835
1832
  primarySectionContent && (typeof primarySectionContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1836
1833
  "p",
1837
1834
  {
1838
1835
  className: cn(
1839
1836
  "text-normal md:text-xl leading-8 font-medium whitespace-pre-line",
1840
- getTextColor(background, "muted"),
1841
1837
  primarySectionContentClassName
1842
1838
  ),
1843
1839
  children: primarySectionContent
1844
1840
  }
1845
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: primarySectionContentClassName, children: primarySectionContent }))
1841
+ ) : primarySectionContent)
1846
1842
  ] }),
1847
1843
  hasSecondarySection && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
1848
1844
  secondarySectionTitle && (typeof secondarySectionTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1854,36 +1850,26 @@ function AboutVisionGallery({
1854
1850
  ),
1855
1851
  children: secondarySectionTitle
1856
1852
  }
1857
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-5", secondarySectionTitleClassName), children: secondarySectionTitle })),
1858
- (secondarySectionContent || secondarySectionLinkText) && /* @__PURE__ */ jsxRuntime.jsxs(
1859
- "p",
1853
+ ) : secondarySectionTitle),
1854
+ secondarySectionContent && (typeof secondarySectionContent === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1855
+ "h2",
1860
1856
  {
1861
1857
  className: cn(
1862
1858
  "text-normal md:text-xl leading-8 font-medium",
1863
- getTextColor(background, "muted"),
1864
1859
  secondarySectionContentClassName
1865
1860
  ),
1866
- children: [
1867
- secondarySectionLinkText && secondarySectionLinkUrl && /* @__PURE__ */ jsxRuntime.jsx(
1868
- Pressable,
1869
- {
1870
- href: secondarySectionLinkUrl,
1871
- className: "mr-1 underline",
1872
- children: secondarySectionLinkText
1873
- }
1874
- ),
1875
- secondarySectionContent
1876
- ]
1861
+ children: secondarySectionContent
1877
1862
  }
1878
- )
1863
+ ) : secondarySectionContent)
1879
1864
  ] })
1880
1865
  ] }),
1881
1866
  hasCtaSection && /* @__PURE__ */ jsxRuntime.jsxs(
1882
1867
  "div",
1883
1868
  {
1884
1869
  className: cn(
1885
- "mx-auto flex max-w-5xl flex-col items-center justify-between gap-8 rounded-2xl p-14 text-center md:flex-row md:text-left",
1886
- getNestedCardBg(background, "subtle"),
1870
+ "flex flex-col items-center justify-between",
1871
+ "gap-8 rounded-2xl p-14 text-center",
1872
+ "md:flex-row md:text-left bg-muted text-muted-foreground",
1887
1873
  ctaClassName
1888
1874
  ),
1889
1875
  children: [
@@ -1896,7 +1882,7 @@ function AboutVisionGallery({
1896
1882
  ),
1897
1883
  children: ctaTitle
1898
1884
  }
1899
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: ctaTitleClassName, children: ctaTitle })),
1885
+ ) : ctaTitle),
1900
1886
  ctaContent
1901
1887
  ]
1902
1888
  }
@@ -2464,7 +2450,7 @@ function AboutSplitHero({
2464
2450
  }
2465
2451
  }, [background]);
2466
2452
  const desktopOrder = directionConfig.desktop === "mediaRight" ? "lg:flex-row" : "lg:flex-row-reverse";
2467
- const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col" : "flex-col-reverse";
2453
+ const mobileOrder = directionConfig.mobile === "mediaTop" ? "flex-col-reverse" : "flex-col";
2468
2454
  const contentArea = /* @__PURE__ */ jsxRuntime.jsxs(
2469
2455
  "div",
2470
2456
  {
@@ -2994,28 +2980,6 @@ function CommunityInitiatives({
2994
2980
  },
2995
2981
  []
2996
2982
  );
2997
- const actionsContent = React26.useMemo(() => {
2998
- if (actionsSlot) return actionsSlot;
2999
- if (!actions || actions.length === 0) return null;
3000
- return /* @__PURE__ */ jsxRuntime.jsx(
3001
- "div",
3002
- {
3003
- className: cn("flex flex-wrap justify-center gap-4", actionsClassName),
3004
- children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
3005
- Pressable,
3006
- {
3007
- href: action.href,
3008
- onClick: action.onClick,
3009
- variant: action.variant || "default",
3010
- size: action.size || "lg",
3011
- asButton: true,
3012
- children: action.label
3013
- },
3014
- idx
3015
- ))
3016
- }
3017
- );
3018
- }, [actionsSlot, actions, actionsClassName]);
3019
2983
  const categoriesContent = React26.useMemo(() => {
3020
2984
  if (categoriesSlot) return categoriesSlot;
3021
2985
  if (!categories || categories.length === 0) return null;
@@ -3047,7 +3011,7 @@ function CommunityInitiatives({
3047
3011
  category.id
3048
3012
  )) })
3049
3013
  ] }),
3050
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted")), children: currentCategory?.description }) }),
3014
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-2xl text-left md:text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: currentCategory?.description }) }),
3051
3015
  categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
3052
3016
  TabsContent,
3053
3017
  {
@@ -3069,47 +3033,13 @@ function CommunityInitiatives({
3069
3033
  ),
3070
3034
  children: [
3071
3035
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
3072
- /* @__PURE__ */ jsxRuntime.jsx(
3073
- "div",
3074
- {
3075
- className: cn(
3076
- "rounded-md p-2",
3077
- getNestedCardBg(background, "muted")
3078
- ),
3079
- children: /* @__PURE__ */ jsxRuntime.jsx(
3080
- DynamicIcon,
3081
- {
3082
- name: initiative.icon,
3083
- size: 24,
3084
- className: cn(getAccentColor(background))
3085
- }
3086
- )
3087
- }
3088
- ),
3036
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("rounded-md p-2"), children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: initiative.icon, size: 24 }) }),
3089
3037
  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-bold", children: initiative.title })
3090
3038
  ] }),
3091
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(getTextColor(background, "muted")), children: initiative.description }),
3039
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "relative", children: initiative.description }),
3092
3040
  initiative.metrics && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-4 pt-2", children: initiative.metrics.map((metric, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
3093
- /* @__PURE__ */ jsxRuntime.jsx(
3094
- "div",
3095
- {
3096
- className: cn(
3097
- "text-2xl font-bold",
3098
- getAccentColor(background)
3099
- ),
3100
- children: metric.value
3101
- }
3102
- ),
3103
- /* @__PURE__ */ jsxRuntime.jsx(
3104
- "div",
3105
- {
3106
- className: cn(
3107
- "mt-1 text-xs",
3108
- getTextColor(background, "muted")
3109
- ),
3110
- children: metric.label
3111
- }
3112
- )
3041
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-2xl font-bold"), children: metric.value }),
3042
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 text-xs"), children: metric.label })
3113
3043
  ] }, i)) })
3114
3044
  ]
3115
3045
  }
@@ -3142,8 +3072,7 @@ function CommunityInitiatives({
3142
3072
  Card,
3143
3073
  {
3144
3074
  className: cn(
3145
- "flex h-full min-h-[280px] w-full items-center justify-center",
3146
- getNestedCardBg(background, "subtle")
3075
+ "flex h-full min-h-[280px] w-full items-center justify-center"
3147
3076
  ),
3148
3077
  children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: "p-6 text-center", children: [
3149
3078
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -3151,11 +3080,7 @@ function CommunityInitiatives({
3151
3080
  {
3152
3081
  name: initiative.icon,
3153
3082
  size: 64,
3154
- className: cn(
3155
- "mx-auto mb-4",
3156
- getTextColor(background, "muted"),
3157
- "opacity-50"
3158
- )
3083
+ className: cn("mx-auto mb-4", "opacity-50")
3159
3084
  }
3160
3085
  ),
3161
3086
  /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "secondary", className: "mx-auto", children: [
@@ -3224,30 +3149,45 @@ function CommunityInitiatives({
3224
3149
  }
3225
3150
  ),
3226
3151
  categoriesContent,
3227
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-20 text-center", ctaClassName), children: [
3228
- ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
3229
- "div",
3230
- {
3231
- className: cn(
3232
- "mb-8 inline-flex items-center justify-center rounded-full p-1"
3233
- ),
3234
- children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
3235
- }
3236
- ),
3237
- ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
3238
- ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
3239
- "p",
3240
- {
3241
- className: cn(
3242
- "mx-auto mb-8 max-w-2xl",
3243
- getTextColor(background, "muted"),
3244
- ctaDescriptionClassName
3152
+ /* @__PURE__ */ jsxRuntime.jsxs(
3153
+ "div",
3154
+ {
3155
+ className: cn(
3156
+ "mt-10 md:mt-24 p-6 md:p-16",
3157
+ "text-center flex flex-col items-center",
3158
+ "bg-muted text-muted-foreground",
3159
+ "rounded-2xl shadow-lg",
3160
+ ctaClassName
3161
+ ),
3162
+ children: [
3163
+ ctaBadgeText && /* @__PURE__ */ jsxRuntime.jsx(
3164
+ "div",
3165
+ {
3166
+ className: cn(
3167
+ "mb-8 inline-flex items-center justify-center rounded-full p-1"
3168
+ ),
3169
+ children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: "rounded-full bg-primary px-4 py-1 text-primary-foreground", children: ctaBadgeText })
3170
+ }
3245
3171
  ),
3246
- children: ctaDescription
3247
- }
3248
- ) : ctaDescription),
3249
- actionsContent
3250
- ] })
3172
+ ctaHeading && (typeof ctaHeading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-4 text-2xl font-bold", ctaHeadingClassName), children: ctaHeading }) : ctaHeading),
3173
+ ctaDescription && (typeof ctaDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
3174
+ "p",
3175
+ {
3176
+ className: cn("mx-auto mb-8 max-w-2xl", ctaDescriptionClassName),
3177
+ children: ctaDescription
3178
+ }
3179
+ ) : ctaDescription),
3180
+ /* @__PURE__ */ jsxRuntime.jsx(
3181
+ BlockActions,
3182
+ {
3183
+ actions,
3184
+ actionsSlot,
3185
+ actionsClassName
3186
+ }
3187
+ )
3188
+ ]
3189
+ }
3190
+ )
3251
3191
  ]
3252
3192
  }
3253
3193
  );
@@ -7757,11 +7697,31 @@ function AboutStoryGallery({
7757
7697
  imagesClassName,
7758
7698
  optixFlowConfig,
7759
7699
  background,
7760
- spacing = "py-8 md:py-32",
7700
+ spacing = "lg",
7761
7701
  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
7762
7702
  pattern,
7763
7703
  patternOpacity
7764
7704
  }) {
7705
+ const [lightboxOpen, setLightboxOpen] = React26.useState(false);
7706
+ const [lightboxIndex, setLightboxIndex] = React26.useState(0);
7707
+ const lightboxItems = React26.useMemo(
7708
+ () => (images ?? []).map((img, index) => ({
7709
+ id: `gallery-image-${index}`,
7710
+ type: "image",
7711
+ src: img.src,
7712
+ alt: img.alt,
7713
+ download: true,
7714
+ share: true
7715
+ })),
7716
+ [images]
7717
+ );
7718
+ const handleImageClick = React26.useCallback((index) => {
7719
+ setLightboxIndex(index);
7720
+ setLightboxOpen(true);
7721
+ }, []);
7722
+ const handleLightboxClose = React26.useCallback(() => {
7723
+ setLightboxOpen(false);
7724
+ }, []);
7765
7725
  const imagesContent = React26.useMemo(() => {
7766
7726
  if (imagesSlot) return imagesSlot;
7767
7727
  if (!images || images.length === 0) return null;
@@ -7773,21 +7733,38 @@ function AboutStoryGallery({
7773
7733
  imagesClassName
7774
7734
  ),
7775
7735
  children: images.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(
7776
- img.Img,
7736
+ "div",
7777
7737
  {
7778
- src: image.src,
7779
- alt: image.alt,
7780
7738
  className: cn(
7781
- "h-64 w-full rounded-xl object-cover",
7782
- image.className
7739
+ "cursor-pointer overflow-hidden",
7740
+ "rounded-xl transition-transform duration-500",
7741
+ "hover:scale-[1.02] hover:shadow-lg"
7783
7742
  ),
7784
- optixFlowConfig
7743
+ onClick: () => handleImageClick(idx),
7744
+ role: "button",
7745
+ tabIndex: 0,
7746
+ onKeyDown: (e) => {
7747
+ if (e.key === "Enter" || e.key === " ") {
7748
+ e.preventDefault();
7749
+ handleImageClick(idx);
7750
+ }
7751
+ },
7752
+ "aria-label": `View ${image.alt} in lightbox`,
7753
+ children: /* @__PURE__ */ jsxRuntime.jsx(
7754
+ img.Img,
7755
+ {
7756
+ src: image.src,
7757
+ alt: image.alt,
7758
+ className: cn("h-64 w-full object-cover", image.className),
7759
+ optixFlowConfig
7760
+ }
7761
+ )
7785
7762
  },
7786
7763
  idx
7787
7764
  ))
7788
7765
  }
7789
7766
  );
7790
- }, [imagesSlot, images, imagesClassName, optixFlowConfig]);
7767
+ }, [imagesSlot, images, imagesClassName, optixFlowConfig, handleImageClick]);
7791
7768
  return /* @__PURE__ */ jsxRuntime.jsxs(
7792
7769
  Section,
7793
7770
  {
@@ -7820,7 +7797,28 @@ function AboutStoryGallery({
7820
7797
  }
7821
7798
  ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description }))
7822
7799
  ] }),
7823
- imagesContent
7800
+ imagesContent,
7801
+ lightboxOpen && /* @__PURE__ */ jsxRuntime.jsx(
7802
+ lightbox.Lightbox,
7803
+ {
7804
+ items: lightboxItems,
7805
+ initialIndex: lightboxIndex,
7806
+ layout: "horizontal",
7807
+ controls: {
7808
+ navigation: true,
7809
+ thumbnails: true,
7810
+ download: true,
7811
+ share: true,
7812
+ fullscreen: true,
7813
+ captions: true,
7814
+ counter: true
7815
+ },
7816
+ onClose: handleLightboxClose,
7817
+ enableKeyboardShortcuts: true,
7818
+ closeOnEscape: true,
7819
+ closeOnBackdropClick: true
7820
+ }
7821
+ )
7824
7822
  ]
7825
7823
  }
7826
7824
  );
@@ -7861,7 +7859,9 @@ function AboutStreamlineTeam({
7861
7859
  "div",
7862
7860
  {
7863
7861
  className: cn(
7864
- "flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-primary/10",
7862
+ "flex shrink-0 items-center justify-center",
7863
+ "size-12 rounded-lg",
7864
+ "bg-primary text-primary-foreground",
7865
7865
  feature.iconBgClass
7866
7866
  ),
7867
7867
  children: feature.icon
@@ -7869,35 +7869,10 @@ function AboutStreamlineTeam({
7869
7869
  ),
7870
7870
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
7871
7871
  feature.title && (typeof feature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: feature.title }) : feature.title),
7872
- feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
7873
- "p",
7874
- {
7875
- className: cn("text-sm", getTextColor(background, "muted")),
7876
- children: feature.description
7877
- }
7878
- ) : feature.description)
7872
+ feature.description && (typeof feature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: feature.description }) : feature.description)
7879
7873
  ] })
7880
7874
  ] }, idx)) });
7881
7875
  }, [featuresSlot, features, featuresClassName, background]);
7882
- const actionsContent = React26.useMemo(() => {
7883
- if (actionsSlot) return actionsSlot;
7884
- if (!actions || actions.length === 0) return null;
7885
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8", actionsClassName), children: actions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
7886
- Pressable,
7887
- {
7888
- href: action.href,
7889
- onClick: action.onClick,
7890
- size: action.size || "lg",
7891
- variant: action.variant || "default",
7892
- asButton: true,
7893
- children: [
7894
- action.label,
7895
- /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
7896
- ]
7897
- },
7898
- idx
7899
- )) });
7900
- }, [actionsSlot, actions, actionsClassName]);
7901
7876
  return /* @__PURE__ */ jsxRuntime.jsxs(
7902
7877
  Section,
7903
7878
  {
@@ -7905,7 +7880,7 @@ function AboutStreamlineTeam({
7905
7880
  spacing,
7906
7881
  pattern,
7907
7882
  patternOpacity,
7908
- className: cn(className),
7883
+ className,
7909
7884
  containerClassName,
7910
7885
  children: [
7911
7886
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-12 lg:grid-cols-2 lg:items-center", children: [
@@ -7928,14 +7903,17 @@ function AboutStreamlineTeam({
7928
7903
  src: secondaryImage.src,
7929
7904
  alt: secondaryImage.alt,
7930
7905
  className: cn(
7931
- "absolute -bottom-8 -right-8 h-48 w-48 rounded-xl border-4 border-background object-cover shadow-lg",
7906
+ "size-24 md:size-48",
7907
+ "rounded-xl object-cover shadow-lg",
7908
+ "border-4 border-background",
7909
+ "absolute -bottom-8 -right-2 md:-right-8",
7932
7910
  secondaryImageClassName
7933
7911
  ),
7934
7912
  optixFlowConfig
7935
7913
  }
7936
7914
  )
7937
7915
  ] }),
7938
- /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
7916
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-0 md:pl-8", children: [
7939
7917
  title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
7940
7918
  "h1",
7941
7919
  {
@@ -7945,18 +7923,8 @@ function AboutStreamlineTeam({
7945
7923
  ),
7946
7924
  children: title
7947
7925
  }
7948
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
7949
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
7950
- "p",
7951
- {
7952
- className: cn(
7953
- "mt-6 text-lg",
7954
- getTextColor(background, "muted"),
7955
- descriptionClassName
7956
- ),
7957
- children: description
7958
- }
7959
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-6", descriptionClassName), children: description })),
7926
+ ) : title),
7927
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 text-lg", descriptionClassName), children: description }) : description),
7960
7928
  featuresContent
7961
7929
  ] })
7962
7930
  ] }),
@@ -7964,35 +7932,44 @@ function AboutStreamlineTeam({
7964
7932
  "div",
7965
7933
  {
7966
7934
  className: cn(
7967
- "mt-6 md:mt-32 rounded-2xl p-8 md:p-16",
7968
- getNestedCardBg(background),
7969
- getNestedCardTextColor(background),
7935
+ "mt-10 md:mt-24 p-6 md:p-16",
7936
+ "bg-muted text-muted-foreground",
7937
+ "rounded-2xl shadow-lg",
7970
7938
  teamSectionClassName
7971
7939
  ),
7972
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
7973
- teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
7974
- "h2",
7975
- {
7976
- className: cn(
7977
- "text-3xl font-bold md:text-4xl",
7978
- teamTitleClassName
7979
- ),
7980
- children: teamTitle
7981
- }
7982
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: teamTitleClassName, children: teamTitle })),
7983
- teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
7984
- "p",
7985
- {
7986
- className: cn(
7987
- "mt-4 text-lg",
7988
- getTextColor(background, "muted"),
7989
- teamDescriptionClassName
7990
- ),
7991
- children: teamDescription
7992
- }
7993
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4", teamDescriptionClassName), children: teamDescription })),
7994
- actionsContent
7995
- ] })
7940
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
7941
+ "div",
7942
+ {
7943
+ className: cn(
7944
+ "flex flex-col md:flex-row",
7945
+ "justify-center md:justify-between items-center md:items-start",
7946
+ "gap-8 md:gap-24"
7947
+ ),
7948
+ children: [
7949
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 md:gap-8 text-center md:text-left", children: [
7950
+ teamTitle && (typeof teamTitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
7951
+ "h2",
7952
+ {
7953
+ className: cn(
7954
+ "text-3xl font-bold md:text-4xl",
7955
+ teamTitleClassName
7956
+ ),
7957
+ children: teamTitle
7958
+ }
7959
+ ) : teamTitle),
7960
+ teamDescription && (typeof teamDescription === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-lg", teamDescriptionClassName), children: teamDescription }) : teamDescription)
7961
+ ] }),
7962
+ /* @__PURE__ */ jsxRuntime.jsx(
7963
+ BlockActions,
7964
+ {
7965
+ actions,
7966
+ actionsSlot,
7967
+ actionsClassName
7968
+ }
7969
+ )
7970
+ ]
7971
+ }
7972
+ )
7996
7973
  }
7997
7974
  )
7998
7975
  ]