@opensite/ui 1.7.0 → 1.7.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.
Files changed (33) hide show
  1. package/dist/hero-architecture-fullscreen.cjs +65 -29
  2. package/dist/hero-architecture-fullscreen.d.cts +8 -1
  3. package/dist/hero-architecture-fullscreen.d.ts +8 -1
  4. package/dist/hero-architecture-fullscreen.js +65 -29
  5. package/dist/hero-billing-platform-logos.cjs +5 -5
  6. package/dist/hero-billing-platform-logos.js +5 -5
  7. package/dist/hero-centered-gradient-cta.cjs +114 -31
  8. package/dist/hero-centered-gradient-cta.js +114 -31
  9. package/dist/hero-conversion-video-play.cjs +5 -5
  10. package/dist/hero-conversion-video-play.js +5 -5
  11. package/dist/hero-design-showcase-logos.cjs +4 -4
  12. package/dist/hero-design-showcase-logos.js +4 -4
  13. package/dist/hero-grid-pattern-solutions.cjs +4 -4
  14. package/dist/hero-grid-pattern-solutions.js +4 -4
  15. package/dist/hero-hiring-animated-text.cjs +87 -34
  16. package/dist/hero-hiring-animated-text.js +88 -35
  17. package/dist/hero-premium-split-avatars.cjs +1 -1
  18. package/dist/hero-premium-split-avatars.js +1 -1
  19. package/dist/hero-productivity-launcher-video.cjs +3 -3
  20. package/dist/hero-productivity-launcher-video.js +3 -3
  21. package/dist/hero-split-spiral-shapes.cjs +2 -2
  22. package/dist/hero-split-spiral-shapes.js +2 -2
  23. package/dist/hero-task-timer-animated.cjs +1 -1
  24. package/dist/hero-task-timer-animated.js +1 -1
  25. package/dist/hero-testimonial-image-grid.cjs +62 -56
  26. package/dist/hero-testimonial-image-grid.js +62 -56
  27. package/dist/hero-therapy-testimonial-grid.cjs +72 -17
  28. package/dist/hero-therapy-testimonial-grid.js +72 -17
  29. package/dist/process-roadmap-timeline.cjs +12 -8
  30. package/dist/process-roadmap-timeline.js +12 -8
  31. package/dist/registry.cjs +403 -200
  32. package/dist/registry.js +403 -200
  33. package/package.json +1 -1
package/dist/hero-therapy-testimonial-grid.cjs CHANGED
@@ -835,7 +835,7 @@ function HeroTherapyTestimonialGrid({
835
835
  testimonial,
836
836
  testimonialSlot,
837
837
  background,
838
- spacing = "py-32 md:py-32",
838
+ spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
839
839
  pattern,
840
840
  patternOpacity,
841
841
  className,
@@ -848,8 +848,15 @@ function HeroTherapyTestimonialGrid({
848
848
  const renderActions = React.useMemo(() => {
849
849
  if (actionsSlot) return actionsSlot;
850
850
  if (!actions || actions.length === 0) return null;
851
- return actions.map((action, index) => {
852
- const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
851
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col mt-6 md:mt-8 gap-4 sm:flex-row items-center", children: actions.map((action, index) => {
852
+ const {
853
+ label,
854
+ icon,
855
+ iconAfter,
856
+ children,
857
+ className: actionClassName,
858
+ ...pressableProps
859
+ } = action;
853
860
  return /* @__PURE__ */ jsxRuntime.jsx(
854
861
  Pressable,
855
862
  {
@@ -858,28 +865,31 @@ function HeroTherapyTestimonialGrid({
858
865
  ...pressableProps,
859
866
  children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
860
867
  icon,
861
- label,
868
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
862
869
  iconAfter
863
870
  ] })
864
871
  },
865
872
  index
866
873
  );
867
- });
874
+ }) });
868
875
  }, [actionsSlot, actions]);
869
876
  const renderTestimonial = React.useMemo(() => {
870
877
  if (testimonialSlot) return testimonialSlot;
871
878
  if (!testimonial) return null;
872
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-[1/2] row-[3/4] md:col-[1/2] md:row-[2/3]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl bg-card p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8", children: [
879
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-[1/2] row-[3/4] md:col-[1/2] md:row-[2/3]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl bg-card p-6 md:p-8 md:flex-row md:items-start md:gap-7", children: [
873
880
  testimonial.avatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-xl md:h-30 md:w-30", children: /* @__PURE__ */ jsxRuntime.jsx(
874
881
  img.Img,
875
882
  {
876
883
  src: testimonial.avatar.src,
877
884
  alt: testimonial.avatar.alt,
878
- className: cn("h-full w-full object-cover object-center", testimonial.avatar.className),
885
+ className: cn(
886
+ "h-full w-full object-cover object-center",
887
+ testimonial.avatar.className
888
+ ),
879
889
  optixFlowConfig
880
890
  }
881
891
  ) }),
882
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col justify-between gap-2", children: [
892
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full w-full flex-col gap-2 justify-center", children: [
883
893
  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg font-medium ", children: [
884
894
  '"',
885
895
  testimonial.quote,
@@ -898,7 +908,10 @@ function HeroTherapyTestimonialGrid({
898
908
  {
899
909
  src: images[0].src,
900
910
  alt: images[0].alt,
901
- className: cn("block h-full w-full object-cover object-center", images[0].className),
911
+ className: cn(
912
+ "block h-full w-full object-cover object-center",
913
+ images[0].className
914
+ ),
902
915
  optixFlowConfig
903
916
  }
904
917
  ) }) }),
@@ -907,7 +920,10 @@ function HeroTherapyTestimonialGrid({
907
920
  {
908
921
  src: images[1].src,
909
922
  alt: images[1].alt,
910
- className: cn("block h-full w-full object-cover object-center", images[1].className),
923
+ className: cn(
924
+ "block h-full w-full object-cover object-center",
925
+ images[1].className
926
+ ),
911
927
  optixFlowConfig
912
928
  }
913
929
  ) }) }),
@@ -917,7 +933,10 @@ function HeroTherapyTestimonialGrid({
917
933
  {
918
934
  src: images[2].src,
919
935
  alt: images[2].alt,
920
- className: cn("h-full w-full object-cover object-center", images[2].className),
936
+ className: cn(
937
+ "h-full w-full object-cover object-center",
938
+ images[2].className
939
+ ),
921
940
  optixFlowConfig
922
941
  }
923
942
  ) }) })
@@ -930,14 +949,50 @@ function HeroTherapyTestimonialGrid({
930
949
  spacing,
931
950
  pattern,
932
951
  patternOpacity,
933
- className: cn("relative flex items-center justify-center bg-background py-12 font-sans md:py-20", className),
952
+ className,
934
953
  containerClassName,
935
954
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
936
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto mb-16 flex max-w-[900px] flex-col items-center gap-6", headerClassName), children: [
937
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading })),
938
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
939
- renderActions
940
- ] }),
955
+ /* @__PURE__ */ jsxRuntime.jsxs(
956
+ "div",
957
+ {
958
+ className: cn(
959
+ "mx-auto mb-16 flex max-w-[900px] flex-col items-center gap-6",
960
+ headerClassName
961
+ ),
962
+ children: [
963
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
964
+ "h1",
965
+ {
966
+ className: cn(
967
+ "text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl text-balance",
968
+ headingClassName
969
+ ),
970
+ children: heading
971
+ }
972
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
973
+ "h1",
974
+ {
975
+ className: cn(
976
+ "text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl text-balance",
977
+ headingClassName
978
+ ),
979
+ children: heading
980
+ }
981
+ )),
982
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
983
+ "p",
984
+ {
985
+ className: cn(
986
+ "text-center text-lg md:text-xl",
987
+ descriptionClassName
988
+ ),
989
+ children: description
990
+ }
991
+ ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
992
+ renderActions
993
+ ]
994
+ }
995
+ ),
941
996
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid w-full auto-cols-auto grid-cols-1 grid-rows-[auto_auto_auto] justify-center gap-5 md:grid-cols-2", children: renderImagesGrid })
942
997
  ] })
943
998
  }
package/dist/hero-therapy-testimonial-grid.js CHANGED
@@ -814,7 +814,7 @@ function HeroTherapyTestimonialGrid({
814
814
  testimonial,
815
815
  testimonialSlot,
816
816
  background,
817
- spacing = "py-32 md:py-32",
817
+ spacing = "pt-28 pb-8 md:pt-32 md:pb-32",
818
818
  pattern,
819
819
  patternOpacity,
820
820
  className,
@@ -827,8 +827,15 @@ function HeroTherapyTestimonialGrid({
827
827
  const renderActions = useMemo(() => {
828
828
  if (actionsSlot) return actionsSlot;
829
829
  if (!actions || actions.length === 0) return null;
830
- return actions.map((action, index) => {
831
- const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
830
+ return /* @__PURE__ */ jsx("div", { className: "flex flex-col mt-6 md:mt-8 gap-4 sm:flex-row items-center", children: actions.map((action, index) => {
831
+ const {
832
+ label,
833
+ icon,
834
+ iconAfter,
835
+ children,
836
+ className: actionClassName,
837
+ ...pressableProps
838
+ } = action;
832
839
  return /* @__PURE__ */ jsx(
833
840
  Pressable,
834
841
  {
@@ -837,28 +844,31 @@ function HeroTherapyTestimonialGrid({
837
844
  ...pressableProps,
838
845
  children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
839
846
  icon,
840
- label,
847
+ /* @__PURE__ */ jsx("span", { children: label }),
841
848
  iconAfter
842
849
  ] })
843
850
  },
844
851
  index
845
852
  );
846
- });
853
+ }) });
847
854
  }, [actionsSlot, actions]);
848
855
  const renderTestimonial = useMemo(() => {
849
856
  if (testimonialSlot) return testimonialSlot;
850
857
  if (!testimonial) return null;
851
- return /* @__PURE__ */ jsx("div", { className: "col-[1/2] row-[3/4] md:col-[1/2] md:row-[2/3]", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl bg-card p-5 px-5 md:flex-row md:items-center md:gap-7 md:py-8", children: [
858
+ return /* @__PURE__ */ jsx("div", { className: "col-[1/2] row-[3/4] md:col-[1/2] md:row-[2/3]", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-37.5 flex-col gap-3 overflow-hidden rounded-3xl bg-card p-6 md:p-8 md:flex-row md:items-start md:gap-7", children: [
852
859
  testimonial.avatar && /* @__PURE__ */ jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-xl md:h-30 md:w-30", children: /* @__PURE__ */ jsx(
853
860
  Img,
854
861
  {
855
862
  src: testimonial.avatar.src,
856
863
  alt: testimonial.avatar.alt,
857
- className: cn("h-full w-full object-cover object-center", testimonial.avatar.className),
864
+ className: cn(
865
+ "h-full w-full object-cover object-center",
866
+ testimonial.avatar.className
867
+ ),
858
868
  optixFlowConfig
859
869
  }
860
870
  ) }),
861
- /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col justify-between gap-2", children: [
871
+ /* @__PURE__ */ jsxs("div", { className: "flex h-full w-full flex-col gap-2 justify-center", children: [
862
872
  /* @__PURE__ */ jsxs("p", { className: "text-lg font-medium ", children: [
863
873
  '"',
864
874
  testimonial.quote,
@@ -877,7 +887,10 @@ function HeroTherapyTestimonialGrid({
877
887
  {
878
888
  src: images[0].src,
879
889
  alt: images[0].alt,
880
- className: cn("block h-full w-full object-cover object-center", images[0].className),
890
+ className: cn(
891
+ "block h-full w-full object-cover object-center",
892
+ images[0].className
893
+ ),
881
894
  optixFlowConfig
882
895
  }
883
896
  ) }) }),
@@ -886,7 +899,10 @@ function HeroTherapyTestimonialGrid({
886
899
  {
887
900
  src: images[1].src,
888
901
  alt: images[1].alt,
889
- className: cn("block h-full w-full object-cover object-center", images[1].className),
902
+ className: cn(
903
+ "block h-full w-full object-cover object-center",
904
+ images[1].className
905
+ ),
890
906
  optixFlowConfig
891
907
  }
892
908
  ) }) }),
@@ -896,7 +912,10 @@ function HeroTherapyTestimonialGrid({
896
912
  {
897
913
  src: images[2].src,
898
914
  alt: images[2].alt,
899
- className: cn("h-full w-full object-cover object-center", images[2].className),
915
+ className: cn(
916
+ "h-full w-full object-cover object-center",
917
+ images[2].className
918
+ ),
900
919
  optixFlowConfig
901
920
  }
902
921
  ) }) })
@@ -909,14 +928,50 @@ function HeroTherapyTestimonialGrid({
909
928
  spacing,
910
929
  pattern,
911
930
  patternOpacity,
912
- className: cn("relative flex items-center justify-center bg-background py-12 font-sans md:py-20", className),
931
+ className,
913
932
  containerClassName,
914
933
  children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
915
- /* @__PURE__ */ jsxs("div", { className: cn("mx-auto mb-16 flex max-w-[900px] flex-col items-center gap-6", headerClassName), children: [
916
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("h1", { className: cn("text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl", headingClassName), children: heading })),
917
- description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-lg text-muted-foreground md:text-xl", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
918
- renderActions
919
- ] }),
934
+ /* @__PURE__ */ jsxs(
935
+ "div",
936
+ {
937
+ className: cn(
938
+ "mx-auto mb-16 flex max-w-[900px] flex-col items-center gap-6",
939
+ headerClassName
940
+ ),
941
+ children: [
942
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
943
+ "h1",
944
+ {
945
+ className: cn(
946
+ "text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl text-balance",
947
+ headingClassName
948
+ ),
949
+ children: heading
950
+ }
951
+ ) : /* @__PURE__ */ jsx(
952
+ "h1",
953
+ {
954
+ className: cn(
955
+ "text-center text-4xl leading-tight font-medium sm:text-5xl md:text-6xl text-balance",
956
+ headingClassName
957
+ ),
958
+ children: heading
959
+ }
960
+ )),
961
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx(
962
+ "p",
963
+ {
964
+ className: cn(
965
+ "text-center text-lg md:text-xl",
966
+ descriptionClassName
967
+ ),
968
+ children: description
969
+ }
970
+ ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
971
+ renderActions
972
+ ]
973
+ }
974
+ ),
920
975
  /* @__PURE__ */ jsx("div", { className: "grid w-full auto-cols-auto grid-cols-1 grid-rows-[auto_auto_auto] justify-center gap-5 md:grid-cols-2", children: renderImagesGrid })
921
976
  ] })
922
977
  }
package/dist/process-roadmap-timeline.cjs CHANGED
@@ -598,8 +598,9 @@ function ProcessRoadmapTimeline({
598
598
  "div",
599
599
  {
600
600
  className: cn(
601
- "relative flex items-start gap-8",
602
- index % 2 === 0 ? "flex-row" : "flex-row-reverse",
601
+ "relative flex items-start gap-4 md:gap-8",
602
+ "flex-col md:flex-row",
603
+ index % 2 !== 0 && "md:flex-row-reverse",
603
604
  milestone.className
604
605
  ),
605
606
  children: [
@@ -607,8 +608,9 @@ function ProcessRoadmapTimeline({
607
608
  "div",
608
609
  {
609
610
  className: cn(
610
- "flex-1",
611
- index % 2 === 0 ? "text-right pr-8" : "text-left pl-8"
611
+ "w-full md:flex-1",
612
+ "text-left md:pr-0",
613
+ index % 2 === 0 ? "md:text-right md:pr-8" : "md:text-left md:pl-8"
612
614
  ),
613
615
  children: /* @__PURE__ */ jsxRuntime.jsxs(
614
616
  "div",
@@ -624,7 +626,8 @@ function ProcessRoadmapTimeline({
624
626
  {
625
627
  className: cn(
626
628
  "mb-3 flex items-center gap-3",
627
- index % 2 === 0 ? "justify-end" : "justify-start"
629
+ "justify-start",
630
+ index % 2 === 0 ? "md:justify-end" : "md:justify-start"
628
631
  ),
629
632
  children: [
630
633
  milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium"), children: milestone.date }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm font-medium"), children: milestone.date })),
@@ -645,7 +648,8 @@ function ProcessRoadmapTimeline({
645
648
  {
646
649
  className: cn(
647
650
  "flex flex-wrap gap-2",
648
- index % 2 === 0 ? "justify-end" : "justify-start"
651
+ "justify-start",
652
+ index % 2 === 0 ? "md:justify-end" : "md:justify-start"
649
653
  ),
650
654
  children: milestone.features.map((feature, fIndex) => /* @__PURE__ */ jsxRuntime.jsx(
651
655
  "span",
@@ -664,7 +668,7 @@ function ProcessRoadmapTimeline({
664
668
  )
665
669
  }
666
670
  ),
667
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
671
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:block md:flex-1" })
668
672
  ]
669
673
  },
670
674
  index
@@ -714,7 +718,7 @@ function ProcessRoadmapTimeline({
714
718
  "div",
715
719
  {
716
720
  className: cn(
717
- "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border/50",
721
+ "absolute left-4 md:left-1/2 top-0 bottom-0 w-px md:-translate-x-1/2 bg-border/50",
718
722
  timelineLineClassName
719
723
  )
720
724
  }
package/dist/process-roadmap-timeline.js CHANGED
@@ -577,8 +577,9 @@ function ProcessRoadmapTimeline({
577
577
  "div",
578
578
  {
579
579
  className: cn(
580
- "relative flex items-start gap-8",
581
- index % 2 === 0 ? "flex-row" : "flex-row-reverse",
580
+ "relative flex items-start gap-4 md:gap-8",
581
+ "flex-col md:flex-row",
582
+ index % 2 !== 0 && "md:flex-row-reverse",
582
583
  milestone.className
583
584
  ),
584
585
  children: [
@@ -586,8 +587,9 @@ function ProcessRoadmapTimeline({
586
587
  "div",
587
588
  {
588
589
  className: cn(
589
- "flex-1",
590
- index % 2 === 0 ? "text-right pr-8" : "text-left pl-8"
590
+ "w-full md:flex-1",
591
+ "text-left md:pr-0",
592
+ index % 2 === 0 ? "md:text-right md:pr-8" : "md:text-left md:pl-8"
591
593
  ),
592
594
  children: /* @__PURE__ */ jsxs(
593
595
  "div",
@@ -603,7 +605,8 @@ function ProcessRoadmapTimeline({
603
605
  {
604
606
  className: cn(
605
607
  "mb-3 flex items-center gap-3",
606
- index % 2 === 0 ? "justify-end" : "justify-start"
608
+ "justify-start",
609
+ index % 2 === 0 ? "md:justify-end" : "md:justify-start"
607
610
  ),
608
611
  children: [
609
612
  milestone.date && (typeof milestone.date === "string" ? /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium"), children: milestone.date }) : /* @__PURE__ */ jsx("div", { className: cn("text-sm font-medium"), children: milestone.date })),
@@ -624,7 +627,8 @@ function ProcessRoadmapTimeline({
624
627
  {
625
628
  className: cn(
626
629
  "flex flex-wrap gap-2",
627
- index % 2 === 0 ? "justify-end" : "justify-start"
630
+ "justify-start",
631
+ index % 2 === 0 ? "md:justify-end" : "md:justify-start"
628
632
  ),
629
633
  children: milestone.features.map((feature, fIndex) => /* @__PURE__ */ jsx(
630
634
  "span",
@@ -643,7 +647,7 @@ function ProcessRoadmapTimeline({
643
647
  )
644
648
  }
645
649
  ),
646
- /* @__PURE__ */ jsx("div", { className: "flex-1" })
650
+ /* @__PURE__ */ jsx("div", { className: "hidden md:block md:flex-1" })
647
651
  ]
648
652
  },
649
653
  index
@@ -693,7 +697,7 @@ function ProcessRoadmapTimeline({
693
697
  "div",
694
698
  {
695
699
  className: cn(
696
- "absolute left-1/2 top-0 bottom-0 w-px -translate-x-1/2 bg-border/50",
700
+ "absolute left-4 md:left-1/2 top-0 bottom-0 w-px md:-translate-x-1/2 bg-border/50",
697
701
  timelineLineClassName
698
702
  )
699
703
  }