@opensite/ui 3.7.9 → 3.8.0

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 (13) hide show
  1. package/dist/blog-cards-tagline-cta.cjs +52 -59
  2. package/dist/blog-cards-tagline-cta.d.cts +1 -1
  3. package/dist/blog-cards-tagline-cta.d.ts +1 -1
  4. package/dist/blog-cards-tagline-cta.js +52 -59
  5. package/dist/contact-demo.cjs +1 -1
  6. package/dist/contact-demo.js +1 -1
  7. package/dist/registry.cjs +59 -69
  8. package/dist/registry.js +59 -69
  9. package/dist/social-link-icon.d.cts +1 -1
  10. package/dist/social-link-icon.d.ts +1 -1
  11. package/dist/stats-bar-comparison.cjs +6 -39
  12. package/dist/stats-bar-comparison.js +6 -39
  13. package/package.json +1 -1
package/dist/blog-cards-tagline-cta.cjs CHANGED
@@ -513,7 +513,6 @@ function BlogCardsTaglineCta({
513
513
  postsSlot,
514
514
  readMoreText,
515
515
  className,
516
- containerClassName,
517
516
  headerClassName,
518
517
  badgeClassName,
519
518
  headingClassName,
@@ -523,7 +522,8 @@ function BlogCardsTaglineCta({
523
522
  postCardClassName,
524
523
  optixFlowConfig,
525
524
  background,
526
- spacing,
525
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
526
+ spacing = "lg",
527
527
  pattern,
528
528
  patternOpacity
529
529
  }) {
@@ -567,7 +567,7 @@ function BlogCardsTaglineCta({
567
567
  Card,
568
568
  {
569
569
  className: cn(
570
- "grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0",
570
+ "grid grid-rows-[auto_auto_1fr_auto] gap-4 overflow-hidden pt-0",
571
571
  postCardClassName
572
572
  ),
573
573
  children: [
@@ -582,13 +582,14 @@ function BlogCardsTaglineCta({
582
582
  src: post.image,
583
583
  alt: postTitle,
584
584
  className: "h-full w-full object-cover object-center",
585
- optixFlowConfig
585
+ optixFlowConfig,
586
+ loading: "eager"
586
587
  }
587
588
  )
588
589
  }
589
590
  ) }),
590
- /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold hover:underline md:text-xl", children: /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: postHref, children: post.title }) }) }),
591
- /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: postSummary }) }),
591
+ /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: post.image ? "pt-0" : "pt-6", children: post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold hover:underline md:text-xl", children: /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: postHref, children: post.title }) }) }),
592
+ /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-70 line-clamp-4", children: postSummary }) }),
592
593
  /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { children: readMoreText && /* @__PURE__ */ jsxRuntime.jsxs(
593
594
  pressable.Pressable,
594
595
  {
@@ -622,60 +623,52 @@ function BlogCardsTaglineCta({
622
623
  className: cn(className),
623
624
  pattern,
624
625
  patternOpacity,
625
- children: /* @__PURE__ */ jsxRuntime.jsxs(
626
- "div",
627
- {
628
- className: cn(
629
- "container mx-auto flex flex-col items-center gap-16 lg:px-16",
630
- containerClassName
631
- ),
632
- children: [
633
- /* @__PURE__ */ jsxRuntime.jsxs(
634
- "div",
635
- {
636
- className: cn(
637
- "text-center flex flex-col items-center px-4 md:px-0",
638
- headerClassName
639
- ),
640
- children: [
641
- badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
642
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
643
- "h2",
644
- {
645
- className: cn(
646
- "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
647
- headingClassName
648
- ),
649
- children: heading
650
- }
651
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
652
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
653
- "p",
654
- {
655
- className: cn(
656
- "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg text-balance",
657
- descriptionClassName
658
- ),
659
- children: description
660
- }
661
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
662
- ctaActionContent
663
- ]
664
- }
626
+ containerClassName,
627
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex flex-col items-center gap-16 lg:px-16", children: [
628
+ /* @__PURE__ */ jsxRuntime.jsxs(
629
+ "div",
630
+ {
631
+ className: cn(
632
+ "text-center flex flex-col items-center px-4 md:px-0",
633
+ headerClassName
665
634
  ),
666
- /* @__PURE__ */ jsxRuntime.jsx(
667
- "div",
668
- {
669
- className: cn(
670
- "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
671
- postsClassName
672
- ),
673
- children: postsContent
674
- }
675
- )
676
- ]
677
- }
678
- )
635
+ children: [
636
+ badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
637
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
638
+ "h2",
639
+ {
640
+ className: cn(
641
+ "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
642
+ headingClassName
643
+ ),
644
+ children: heading
645
+ }
646
+ ) : heading),
647
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
648
+ "p",
649
+ {
650
+ className: cn(
651
+ "mb-8 md:text-base max-w-full md:max-w-md lg:text-lg text-balance",
652
+ descriptionClassName
653
+ ),
654
+ children: description
655
+ }
656
+ ) : description),
657
+ ctaActionContent
658
+ ]
659
+ }
660
+ ),
661
+ /* @__PURE__ */ jsxRuntime.jsx(
662
+ "div",
663
+ {
664
+ className: cn(
665
+ "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
666
+ postsClassName
667
+ ),
668
+ children: postsContent
669
+ }
670
+ )
671
+ ] })
679
672
  }
680
673
  );
681
674
  }
package/dist/blog-cards-tagline-cta.d.cts CHANGED
@@ -98,6 +98,6 @@ interface BlogCardsTaglineCtaProps {
98
98
  /** Optional Section ID */
99
99
  sectionId?: string;
100
100
  }
101
- declare function BlogCardsTaglineCta({ sectionId, badge, heading, description, ctaAction, ctaSlot, posts, postsSlot, readMoreText, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, ctaClassName, postsClassName, postCardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: BlogCardsTaglineCtaProps): React.JSX.Element;
101
+ declare function BlogCardsTaglineCta({ sectionId, badge, heading, description, ctaAction, ctaSlot, posts, postsSlot, readMoreText, className, headerClassName, badgeClassName, headingClassName, descriptionClassName, ctaClassName, postsClassName, postCardClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: BlogCardsTaglineCtaProps): React.JSX.Element;
102
102
 
103
103
  export { BlogCardsTaglineCta, type BlogCardsTaglineCtaProps };
package/dist/blog-cards-tagline-cta.d.ts CHANGED
@@ -98,6 +98,6 @@ interface BlogCardsTaglineCtaProps {
98
98
  /** Optional Section ID */
99
99
  sectionId?: string;
100
100
  }
101
- declare function BlogCardsTaglineCta({ sectionId, badge, heading, description, ctaAction, ctaSlot, posts, postsSlot, readMoreText, className, containerClassName, headerClassName, badgeClassName, headingClassName, descriptionClassName, ctaClassName, postsClassName, postCardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: BlogCardsTaglineCtaProps): React.JSX.Element;
101
+ declare function BlogCardsTaglineCta({ sectionId, badge, heading, description, ctaAction, ctaSlot, posts, postsSlot, readMoreText, className, headerClassName, badgeClassName, headingClassName, descriptionClassName, ctaClassName, postsClassName, postCardClassName, optixFlowConfig, background, containerClassName, spacing, pattern, patternOpacity, }: BlogCardsTaglineCtaProps): React.JSX.Element;
102
102
 
103
103
  export { BlogCardsTaglineCta, type BlogCardsTaglineCtaProps };
package/dist/blog-cards-tagline-cta.js CHANGED
@@ -492,7 +492,6 @@ function BlogCardsTaglineCta({
492
492
  postsSlot,
493
493
  readMoreText,
494
494
  className,
495
- containerClassName,
496
495
  headerClassName,
497
496
  badgeClassName,
498
497
  headingClassName,
@@ -502,7 +501,8 @@ function BlogCardsTaglineCta({
502
501
  postCardClassName,
503
502
  optixFlowConfig,
504
503
  background,
505
- spacing,
504
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
505
+ spacing = "lg",
506
506
  pattern,
507
507
  patternOpacity
508
508
  }) {
@@ -546,7 +546,7 @@ function BlogCardsTaglineCta({
546
546
  Card,
547
547
  {
548
548
  className: cn(
549
- "grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0",
549
+ "grid grid-rows-[auto_auto_1fr_auto] gap-4 overflow-hidden pt-0",
550
550
  postCardClassName
551
551
  ),
552
552
  children: [
@@ -561,13 +561,14 @@ function BlogCardsTaglineCta({
561
561
  src: post.image,
562
562
  alt: postTitle,
563
563
  className: "h-full w-full object-cover object-center",
564
- optixFlowConfig
564
+ optixFlowConfig,
565
+ loading: "eager"
565
566
  }
566
567
  )
567
568
  }
568
569
  ) }),
569
- /* @__PURE__ */ jsx(CardHeader, { children: post.title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold hover:underline md:text-xl", children: /* @__PURE__ */ jsx(Pressable, { href: postHref, children: post.title }) }) }),
570
- /* @__PURE__ */ jsx(CardContent, { children: postSummary && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: postSummary }) }),
570
+ /* @__PURE__ */ jsx(CardHeader, { className: post.image ? "pt-0" : "pt-6", children: post.title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold hover:underline md:text-xl", children: /* @__PURE__ */ jsx(Pressable, { href: postHref, children: post.title }) }) }),
571
+ /* @__PURE__ */ jsx(CardContent, { children: postSummary && /* @__PURE__ */ jsx("p", { className: "opacity-70 line-clamp-4", children: postSummary }) }),
571
572
  /* @__PURE__ */ jsx(CardFooter, { children: readMoreText && /* @__PURE__ */ jsxs(
572
573
  Pressable,
573
574
  {
@@ -601,60 +602,52 @@ function BlogCardsTaglineCta({
601
602
  className: cn(className),
602
603
  pattern,
603
604
  patternOpacity,
604
- children: /* @__PURE__ */ jsxs(
605
- "div",
606
- {
607
- className: cn(
608
- "container mx-auto flex flex-col items-center gap-16 lg:px-16",
609
- containerClassName
610
- ),
611
- children: [
612
- /* @__PURE__ */ jsxs(
613
- "div",
614
- {
615
- className: cn(
616
- "text-center flex flex-col items-center px-4 md:px-0",
617
- headerClassName
618
- ),
619
- children: [
620
- badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
621
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
622
- "h2",
623
- {
624
- className: cn(
625
- "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
626
- headingClassName
627
- ),
628
- children: heading
629
- }
630
- ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
631
- description && (typeof description === "string" ? /* @__PURE__ */ jsx(
632
- "p",
633
- {
634
- className: cn(
635
- "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg text-balance",
636
- descriptionClassName
637
- ),
638
- children: description
639
- }
640
- ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
641
- ctaActionContent
642
- ]
643
- }
605
+ containerClassName,
606
+ children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex flex-col items-center gap-16 lg:px-16", children: [
607
+ /* @__PURE__ */ jsxs(
608
+ "div",
609
+ {
610
+ className: cn(
611
+ "text-center flex flex-col items-center px-4 md:px-0",
612
+ headerClassName
644
613
  ),
645
- /* @__PURE__ */ jsx(
646
- "div",
647
- {
648
- className: cn(
649
- "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
650
- postsClassName
651
- ),
652
- children: postsContent
653
- }
654
- )
655
- ]
656
- }
657
- )
614
+ children: [
615
+ badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
616
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
617
+ "h2",
618
+ {
619
+ className: cn(
620
+ "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
621
+ headingClassName
622
+ ),
623
+ children: heading
624
+ }
625
+ ) : heading),
626
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx(
627
+ "p",
628
+ {
629
+ className: cn(
630
+ "mb-8 md:text-base max-w-full md:max-w-md lg:text-lg text-balance",
631
+ descriptionClassName
632
+ ),
633
+ children: description
634
+ }
635
+ ) : description),
636
+ ctaActionContent
637
+ ]
638
+ }
639
+ ),
640
+ /* @__PURE__ */ jsx(
641
+ "div",
642
+ {
643
+ className: cn(
644
+ "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
645
+ postsClassName
646
+ ),
647
+ children: postsContent
648
+ }
649
+ )
650
+ ] })
658
651
  }
659
652
  );
660
653
  }
package/dist/contact-demo.cjs CHANGED
@@ -622,7 +622,7 @@ function ContactDemo({
622
622
  as: "h2",
623
623
  text: heading,
624
624
  className: cn(
625
- "text-5xl lg:text-6xl xl:text-7xl text-pretty font-bold text-left md:text-center",
625
+ "justify-start text-left text-5xl font-bold text-pretty md:justify-center md:text-center lg:text-6xl xl:text-7xl",
626
626
  headingClassName
627
627
  ),
628
628
  animateBy: "words",
package/dist/contact-demo.js CHANGED
@@ -616,7 +616,7 @@ function ContactDemo({
616
616
  as: "h2",
617
617
  text: heading,
618
618
  className: cn(
619
- "text-5xl lg:text-6xl xl:text-7xl text-pretty font-bold text-left md:text-center",
619
+ "justify-start text-left text-5xl font-bold text-pretty md:justify-center md:text-center lg:text-6xl xl:text-7xl",
620
620
  headingClassName
621
621
  ),
622
622
  animateBy: "words",
package/dist/registry.cjs CHANGED
@@ -15069,7 +15069,7 @@ function ContactDemo({
15069
15069
  as: "h2",
15070
15070
  text: heading,
15071
15071
  className: cn(
15072
- "text-5xl lg:text-6xl xl:text-7xl text-pretty font-bold text-left md:text-center",
15072
+ "justify-start text-left text-5xl font-bold text-pretty md:justify-center md:text-center lg:text-6xl xl:text-7xl",
15073
15073
  headingClassName
15074
15074
  ),
15075
15075
  animateBy: "words",
@@ -35827,7 +35827,6 @@ function BlogCardsTaglineCta({
35827
35827
  postsSlot,
35828
35828
  readMoreText,
35829
35829
  className,
35830
- containerClassName,
35831
35830
  headerClassName,
35832
35831
  badgeClassName,
35833
35832
  headingClassName,
@@ -35837,7 +35836,8 @@ function BlogCardsTaglineCta({
35837
35836
  postCardClassName,
35838
35837
  optixFlowConfig,
35839
35838
  background,
35840
- spacing,
35839
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
35840
+ spacing = "lg",
35841
35841
  pattern,
35842
35842
  patternOpacity
35843
35843
  }) {
@@ -35881,7 +35881,7 @@ function BlogCardsTaglineCta({
35881
35881
  Card,
35882
35882
  {
35883
35883
  className: cn(
35884
- "grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0",
35884
+ "grid grid-rows-[auto_auto_1fr_auto] gap-4 overflow-hidden pt-0",
35885
35885
  postCardClassName
35886
35886
  ),
35887
35887
  children: [
@@ -35896,13 +35896,14 @@ function BlogCardsTaglineCta({
35896
35896
  src: post.image,
35897
35897
  alt: postTitle,
35898
35898
  className: "h-full w-full object-cover object-center",
35899
- optixFlowConfig
35899
+ optixFlowConfig,
35900
+ loading: "eager"
35900
35901
  }
35901
35902
  )
35902
35903
  }
35903
35904
  ) }),
35904
- /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { children: post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold hover:underline md:text-xl", children: /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: postHref, children: post.title }) }) }),
35905
- /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: postSummary }) }),
35905
+ /* @__PURE__ */ jsxRuntime.jsx(CardHeader, { className: post.image ? "pt-0" : "pt-6", children: post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold hover:underline md:text-xl", children: /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: postHref, children: post.title }) }) }),
35906
+ /* @__PURE__ */ jsxRuntime.jsx(CardContent, { children: postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "opacity-70 line-clamp-4", children: postSummary }) }),
35906
35907
  /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { children: readMoreText && /* @__PURE__ */ jsxRuntime.jsxs(
35907
35908
  pressable.Pressable,
35908
35909
  {
@@ -35936,60 +35937,52 @@ function BlogCardsTaglineCta({
35936
35937
  className: cn(className),
35937
35938
  pattern,
35938
35939
  patternOpacity,
35939
- children: /* @__PURE__ */ jsxRuntime.jsxs(
35940
- "div",
35941
- {
35942
- className: cn(
35943
- "container mx-auto flex flex-col items-center gap-16 lg:px-16",
35944
- containerClassName
35945
- ),
35946
- children: [
35947
- /* @__PURE__ */ jsxRuntime.jsxs(
35948
- "div",
35949
- {
35950
- className: cn(
35951
- "text-center flex flex-col items-center px-4 md:px-0",
35952
- headerClassName
35953
- ),
35954
- children: [
35955
- badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
35956
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
35957
- "h2",
35958
- {
35959
- className: cn(
35960
- "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
35961
- headingClassName
35962
- ),
35963
- children: heading
35964
- }
35965
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
35966
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
35967
- "p",
35968
- {
35969
- className: cn(
35970
- "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg text-balance",
35971
- descriptionClassName
35972
- ),
35973
- children: description
35974
- }
35975
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
35976
- ctaActionContent
35977
- ]
35978
- }
35940
+ containerClassName,
35941
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex flex-col items-center gap-16 lg:px-16", children: [
35942
+ /* @__PURE__ */ jsxRuntime.jsxs(
35943
+ "div",
35944
+ {
35945
+ className: cn(
35946
+ "text-center flex flex-col items-center px-4 md:px-0",
35947
+ headerClassName
35979
35948
  ),
35980
- /* @__PURE__ */ jsxRuntime.jsx(
35981
- "div",
35982
- {
35983
- className: cn(
35984
- "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
35985
- postsClassName
35986
- ),
35987
- children: postsContent
35988
- }
35989
- )
35990
- ]
35991
- }
35992
- )
35949
+ children: [
35950
+ badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
35951
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
35952
+ "h2",
35953
+ {
35954
+ className: cn(
35955
+ "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
35956
+ headingClassName
35957
+ ),
35958
+ children: heading
35959
+ }
35960
+ ) : heading),
35961
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
35962
+ "p",
35963
+ {
35964
+ className: cn(
35965
+ "mb-8 md:text-base max-w-full md:max-w-md lg:text-lg text-balance",
35966
+ descriptionClassName
35967
+ ),
35968
+ children: description
35969
+ }
35970
+ ) : description),
35971
+ ctaActionContent
35972
+ ]
35973
+ }
35974
+ ),
35975
+ /* @__PURE__ */ jsxRuntime.jsx(
35976
+ "div",
35977
+ {
35978
+ className: cn(
35979
+ "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
35980
+ postsClassName
35981
+ ),
35982
+ children: postsContent
35983
+ }
35984
+ )
35985
+ ] })
35993
35986
  }
35994
35987
  );
35995
35988
  }
@@ -99701,7 +99694,7 @@ function StatsBarComparison({
99701
99694
  const badgeContent = React30.useMemo(() => {
99702
99695
  if (badgeSlot) return badgeSlot;
99703
99696
  if (!badge) return null;
99704
- return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
99697
+ return /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
99705
99698
  }, [badgeSlot, badge, badgeClassName]);
99706
99699
  const comparisonsContent = React30.useMemo(() => {
99707
99700
  if (comparisonsSlot) return comparisonsSlot;
@@ -99710,9 +99703,7 @@ function StatsBarComparison({
99710
99703
  "div",
99711
99704
  {
99712
99705
  className: cn(
99713
- "rounded-xl border p-6",
99714
- getNestedCardBg(background, "card"),
99715
- getNestedCardTextColor(background),
99706
+ "rounded-xl border p-6 bg-card text-card-foreground",
99716
99707
  group.className,
99717
99708
  groupCardClassName
99718
99709
  ),
@@ -99723,7 +99714,7 @@ function StatsBarComparison({
99723
99714
  className: cn("mb-6 text-lg font-semibold", groupTitleClassName),
99724
99715
  children: group.title
99725
99716
  }
99726
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", groupTitleClassName), children: group.title })),
99717
+ ) : group.title),
99727
99718
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: group.bars.map((bar, barIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: bar.className, children: [
99728
99719
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
99729
99720
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", barLabelClassName), children: bar.label }),
@@ -99734,7 +99725,6 @@ function StatsBarComparison({
99734
99725
  {
99735
99726
  className: cn(
99736
99727
  "h-3 w-full overflow-hidden rounded-full",
99737
- getNestedCardBg(background, "muted"),
99738
99728
  barTrackClassName
99739
99729
  ),
99740
99730
  children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -99792,17 +99782,17 @@ function StatsBarComparison({
99792
99782
  ),
99793
99783
  children: heading
99794
99784
  }
99795
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
99785
+ ) : heading),
99796
99786
  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
99797
99787
  "p",
99798
99788
  {
99799
99789
  className: cn(
99800
- "mx-auto max-w-2xl text-muted-foreground",
99790
+ "mx-auto max-w-full md:max-w-md text-balance opacity-70",
99801
99791
  descriptionClassName
99802
99792
  ),
99803
99793
  children: description
99804
99794
  }
99805
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
99795
+ ) : description)
99806
99796
  ] }),
99807
99797
  (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
99808
99798
  ] })
package/dist/registry.js CHANGED
@@ -15029,7 +15029,7 @@ function ContactDemo({
15029
15029
  as: "h2",
15030
15030
  text: heading,
15031
15031
  className: cn(
15032
- "text-5xl lg:text-6xl xl:text-7xl text-pretty font-bold text-left md:text-center",
15032
+ "justify-start text-left text-5xl font-bold text-pretty md:justify-center md:text-center lg:text-6xl xl:text-7xl",
15033
15033
  headingClassName
15034
15034
  ),
15035
15035
  animateBy: "words",
@@ -35787,7 +35787,6 @@ function BlogCardsTaglineCta({
35787
35787
  postsSlot,
35788
35788
  readMoreText,
35789
35789
  className,
35790
- containerClassName,
35791
35790
  headerClassName,
35792
35791
  badgeClassName,
35793
35792
  headingClassName,
@@ -35797,7 +35796,8 @@ function BlogCardsTaglineCta({
35797
35796
  postCardClassName,
35798
35797
  optixFlowConfig,
35799
35798
  background,
35800
- spacing,
35799
+ containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
35800
+ spacing = "lg",
35801
35801
  pattern,
35802
35802
  patternOpacity
35803
35803
  }) {
@@ -35841,7 +35841,7 @@ function BlogCardsTaglineCta({
35841
35841
  Card,
35842
35842
  {
35843
35843
  className: cn(
35844
- "grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0",
35844
+ "grid grid-rows-[auto_auto_1fr_auto] gap-4 overflow-hidden pt-0",
35845
35845
  postCardClassName
35846
35846
  ),
35847
35847
  children: [
@@ -35856,13 +35856,14 @@ function BlogCardsTaglineCta({
35856
35856
  src: post.image,
35857
35857
  alt: postTitle,
35858
35858
  className: "h-full w-full object-cover object-center",
35859
- optixFlowConfig
35859
+ optixFlowConfig,
35860
+ loading: "eager"
35860
35861
  }
35861
35862
  )
35862
35863
  }
35863
35864
  ) }),
35864
- /* @__PURE__ */ jsx(CardHeader, { children: post.title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold hover:underline md:text-xl", children: /* @__PURE__ */ jsx(Pressable, { href: postHref, children: post.title }) }) }),
35865
- /* @__PURE__ */ jsx(CardContent, { children: postSummary && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: postSummary }) }),
35865
+ /* @__PURE__ */ jsx(CardHeader, { className: post.image ? "pt-0" : "pt-6", children: post.title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold hover:underline md:text-xl", children: /* @__PURE__ */ jsx(Pressable, { href: postHref, children: post.title }) }) }),
35866
+ /* @__PURE__ */ jsx(CardContent, { children: postSummary && /* @__PURE__ */ jsx("p", { className: "opacity-70 line-clamp-4", children: postSummary }) }),
35866
35867
  /* @__PURE__ */ jsx(CardFooter, { children: readMoreText && /* @__PURE__ */ jsxs(
35867
35868
  Pressable,
35868
35869
  {
@@ -35896,60 +35897,52 @@ function BlogCardsTaglineCta({
35896
35897
  className: cn(className),
35897
35898
  pattern,
35898
35899
  patternOpacity,
35899
- children: /* @__PURE__ */ jsxs(
35900
- "div",
35901
- {
35902
- className: cn(
35903
- "container mx-auto flex flex-col items-center gap-16 lg:px-16",
35904
- containerClassName
35905
- ),
35906
- children: [
35907
- /* @__PURE__ */ jsxs(
35908
- "div",
35909
- {
35910
- className: cn(
35911
- "text-center flex flex-col items-center px-4 md:px-0",
35912
- headerClassName
35913
- ),
35914
- children: [
35915
- badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: cn("mb-6", badgeClassName), children: badge }) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", badgeClassName), children: badge })),
35916
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
35917
- "h2",
35918
- {
35919
- className: cn(
35920
- "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
35921
- headingClassName
35922
- ),
35923
- children: heading
35924
- }
35925
- ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
35926
- description && (typeof description === "string" ? /* @__PURE__ */ jsx(
35927
- "p",
35928
- {
35929
- className: cn(
35930
- "mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg text-balance",
35931
- descriptionClassName
35932
- ),
35933
- children: description
35934
- }
35935
- ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
35936
- ctaActionContent
35937
- ]
35938
- }
35900
+ containerClassName,
35901
+ children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex flex-col items-center gap-16 lg:px-16", children: [
35902
+ /* @__PURE__ */ jsxs(
35903
+ "div",
35904
+ {
35905
+ className: cn(
35906
+ "text-center flex flex-col items-center px-4 md:px-0",
35907
+ headerClassName
35939
35908
  ),
35940
- /* @__PURE__ */ jsx(
35941
- "div",
35942
- {
35943
- className: cn(
35944
- "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
35945
- postsClassName
35946
- ),
35947
- children: postsContent
35948
- }
35949
- )
35950
- ]
35951
- }
35952
- )
35909
+ children: [
35910
+ badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
35911
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
35912
+ "h2",
35913
+ {
35914
+ className: cn(
35915
+ "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl",
35916
+ headingClassName
35917
+ ),
35918
+ children: heading
35919
+ }
35920
+ ) : heading),
35921
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx(
35922
+ "p",
35923
+ {
35924
+ className: cn(
35925
+ "mb-8 md:text-base max-w-full md:max-w-md lg:text-lg text-balance",
35926
+ descriptionClassName
35927
+ ),
35928
+ children: description
35929
+ }
35930
+ ) : description),
35931
+ ctaActionContent
35932
+ ]
35933
+ }
35934
+ ),
35935
+ /* @__PURE__ */ jsx(
35936
+ "div",
35937
+ {
35938
+ className: cn(
35939
+ "grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8",
35940
+ postsClassName
35941
+ ),
35942
+ children: postsContent
35943
+ }
35944
+ )
35945
+ ] })
35953
35946
  }
35954
35947
  );
35955
35948
  }
@@ -99661,7 +99654,7 @@ function StatsBarComparison({
99661
99654
  const badgeContent = useMemo(() => {
99662
99655
  if (badgeSlot) return badgeSlot;
99663
99656
  if (!badge) return null;
99664
- return /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
99657
+ return /* @__PURE__ */ jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
99665
99658
  }, [badgeSlot, badge, badgeClassName]);
99666
99659
  const comparisonsContent = useMemo(() => {
99667
99660
  if (comparisonsSlot) return comparisonsSlot;
@@ -99670,9 +99663,7 @@ function StatsBarComparison({
99670
99663
  "div",
99671
99664
  {
99672
99665
  className: cn(
99673
- "rounded-xl border p-6",
99674
- getNestedCardBg(background, "card"),
99675
- getNestedCardTextColor(background),
99666
+ "rounded-xl border p-6 bg-card text-card-foreground",
99676
99667
  group.className,
99677
99668
  groupCardClassName
99678
99669
  ),
@@ -99683,7 +99674,7 @@ function StatsBarComparison({
99683
99674
  className: cn("mb-6 text-lg font-semibold", groupTitleClassName),
99684
99675
  children: group.title
99685
99676
  }
99686
- ) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", groupTitleClassName), children: group.title })),
99677
+ ) : group.title),
99687
99678
  /* @__PURE__ */ jsx("div", { className: "space-y-4", children: group.bars.map((bar, barIndex) => /* @__PURE__ */ jsxs("div", { className: bar.className, children: [
99688
99679
  /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
99689
99680
  /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", barLabelClassName), children: bar.label }),
@@ -99694,7 +99685,6 @@ function StatsBarComparison({
99694
99685
  {
99695
99686
  className: cn(
99696
99687
  "h-3 w-full overflow-hidden rounded-full",
99697
- getNestedCardBg(background, "muted"),
99698
99688
  barTrackClassName
99699
99689
  ),
99700
99690
  children: /* @__PURE__ */ jsx(
@@ -99752,17 +99742,17 @@ function StatsBarComparison({
99752
99742
  ),
99753
99743
  children: heading
99754
99744
  }
99755
- ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
99745
+ ) : heading),
99756
99746
  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
99757
99747
  "p",
99758
99748
  {
99759
99749
  className: cn(
99760
- "mx-auto max-w-2xl text-muted-foreground",
99750
+ "mx-auto max-w-full md:max-w-md text-balance opacity-70",
99761
99751
  descriptionClassName
99762
99752
  ),
99763
99753
  children: description
99764
99754
  }
99765
- ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
99755
+ ) : description)
99766
99756
  ] }),
99767
99757
  (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
99768
99758
  ] })
package/dist/social-link-icon.d.cts CHANGED
@@ -77,6 +77,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
77
77
  * />
78
78
  * ```
79
79
  */
80
- declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
80
+ declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
81
81
 
82
82
  export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };
package/dist/social-link-icon.d.ts CHANGED
@@ -77,6 +77,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
77
77
  * />
78
78
  * ```
79
79
  */
80
- declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
80
+ declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
81
81
 
82
82
  export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };
package/dist/stats-bar-comparison.cjs CHANGED
@@ -32,36 +32,6 @@ var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
32
32
  function cn(...inputs) {
33
33
  return tailwindMerge.twMerge(clsx.clsx(inputs));
34
34
  }
35
- function getNestedCardBg(parentBg, variant = "muted", options) {
36
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
37
- if (isDark) {
38
- switch (variant) {
39
- case "muted":
40
- return "bg-background";
41
- case "card":
42
- return "bg-card";
43
- case "accent":
44
- return "bg-accent";
45
- case "subtle":
46
- return "bg-background/50";
47
- }
48
- } else {
49
- switch (variant) {
50
- case "muted":
51
- return "bg-muted";
52
- case "card":
53
- return "bg-card";
54
- case "accent":
55
- return "bg-accent";
56
- case "subtle":
57
- return "bg-muted/50";
58
- }
59
- }
60
- }
61
- function getNestedCardTextColor(parentBg, options) {
62
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
63
- return isDark ? "text-foreground" : "";
64
- }
65
35
  var badgeVariants = classVarianceAuthority.cva(
66
36
  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
67
37
  {
@@ -518,7 +488,7 @@ function StatsBarComparison({
518
488
  const badgeContent = React3.useMemo(() => {
519
489
  if (badgeSlot) return badgeSlot;
520
490
  if (!badge) return null;
521
- return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
491
+ return /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
522
492
  }, [badgeSlot, badge, badgeClassName]);
523
493
  const comparisonsContent = React3.useMemo(() => {
524
494
  if (comparisonsSlot) return comparisonsSlot;
@@ -527,9 +497,7 @@ function StatsBarComparison({
527
497
  "div",
528
498
  {
529
499
  className: cn(
530
- "rounded-xl border p-6",
531
- getNestedCardBg(background, "card"),
532
- getNestedCardTextColor(background),
500
+ "rounded-xl border p-6 bg-card text-card-foreground",
533
501
  group.className,
534
502
  groupCardClassName
535
503
  ),
@@ -540,7 +508,7 @@ function StatsBarComparison({
540
508
  className: cn("mb-6 text-lg font-semibold", groupTitleClassName),
541
509
  children: group.title
542
510
  }
543
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6", groupTitleClassName), children: group.title })),
511
+ ) : group.title),
544
512
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: group.bars.map((bar, barIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: bar.className, children: [
545
513
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
546
514
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium", barLabelClassName), children: bar.label }),
@@ -551,7 +519,6 @@ function StatsBarComparison({
551
519
  {
552
520
  className: cn(
553
521
  "h-3 w-full overflow-hidden rounded-full",
554
- getNestedCardBg(background, "muted"),
555
522
  barTrackClassName
556
523
  ),
557
524
  children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -609,17 +576,17 @@ function StatsBarComparison({
609
576
  ),
610
577
  children: heading
611
578
  }
612
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
579
+ ) : heading),
613
580
  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
614
581
  "p",
615
582
  {
616
583
  className: cn(
617
- "mx-auto max-w-2xl text-muted-foreground",
584
+ "mx-auto max-w-full md:max-w-md text-balance opacity-70",
618
585
  descriptionClassName
619
586
  ),
620
587
  children: description
621
588
  }
622
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
589
+ ) : description)
623
590
  ] }),
624
591
  (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
625
592
  ] })
package/dist/stats-bar-comparison.js CHANGED
@@ -11,36 +11,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
11
11
  function cn(...inputs) {
12
12
  return twMerge(clsx(inputs));
13
13
  }
14
- function getNestedCardBg(parentBg, variant = "muted", options) {
15
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
16
- if (isDark) {
17
- switch (variant) {
18
- case "muted":
19
- return "bg-background";
20
- case "card":
21
- return "bg-card";
22
- case "accent":
23
- return "bg-accent";
24
- case "subtle":
25
- return "bg-background/50";
26
- }
27
- } else {
28
- switch (variant) {
29
- case "muted":
30
- return "bg-muted";
31
- case "card":
32
- return "bg-card";
33
- case "accent":
34
- return "bg-accent";
35
- case "subtle":
36
- return "bg-muted/50";
37
- }
38
- }
39
- }
40
- function getNestedCardTextColor(parentBg, options) {
41
- const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
42
- return isDark ? "text-foreground" : "";
43
- }
44
14
  var badgeVariants = cva(
45
15
  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
46
16
  {
@@ -497,7 +467,7 @@ function StatsBarComparison({
497
467
  const badgeContent = useMemo(() => {
498
468
  if (badgeSlot) return badgeSlot;
499
469
  if (!badge) return null;
500
- return /* @__PURE__ */ jsx(Badge, { variant: "outline", className: cn("mb-4", badgeClassName), children: badge });
470
+ return /* @__PURE__ */ jsx(Badge, { className: cn("mb-4", badgeClassName), children: badge });
501
471
  }, [badgeSlot, badge, badgeClassName]);
502
472
  const comparisonsContent = useMemo(() => {
503
473
  if (comparisonsSlot) return comparisonsSlot;
@@ -506,9 +476,7 @@ function StatsBarComparison({
506
476
  "div",
507
477
  {
508
478
  className: cn(
509
- "rounded-xl border p-6",
510
- getNestedCardBg(background, "card"),
511
- getNestedCardTextColor(background),
479
+ "rounded-xl border p-6 bg-card text-card-foreground",
512
480
  group.className,
513
481
  groupCardClassName
514
482
  ),
@@ -519,7 +487,7 @@ function StatsBarComparison({
519
487
  className: cn("mb-6 text-lg font-semibold", groupTitleClassName),
520
488
  children: group.title
521
489
  }
522
- ) : /* @__PURE__ */ jsx("div", { className: cn("mb-6", groupTitleClassName), children: group.title })),
490
+ ) : group.title),
523
491
  /* @__PURE__ */ jsx("div", { className: "space-y-4", children: group.bars.map((bar, barIndex) => /* @__PURE__ */ jsxs("div", { className: bar.className, children: [
524
492
  /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
525
493
  /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", barLabelClassName), children: bar.label }),
@@ -530,7 +498,6 @@ function StatsBarComparison({
530
498
  {
531
499
  className: cn(
532
500
  "h-3 w-full overflow-hidden rounded-full",
533
- getNestedCardBg(background, "muted"),
534
501
  barTrackClassName
535
502
  ),
536
503
  children: /* @__PURE__ */ jsx(
@@ -588,17 +555,17 @@ function StatsBarComparison({
588
555
  ),
589
556
  children: heading
590
557
  }
591
- ) : /* @__PURE__ */ jsx("div", { className: cn("mb-4", headingClassName), children: heading })),
558
+ ) : heading),
592
559
  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
593
560
  "p",
594
561
  {
595
562
  className: cn(
596
- "mx-auto max-w-2xl text-muted-foreground",
563
+ "mx-auto max-w-full md:max-w-md text-balance opacity-70",
597
564
  descriptionClassName
598
565
  ),
599
566
  children: description
600
567
  }
601
- ) : /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-2xl", descriptionClassName), children: description }))
568
+ ) : description)
602
569
  ] }),
603
570
  (comparisonsSlot || comparisons && comparisons.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("space-y-10", comparisonsClassName), children: comparisonsContent })
604
571
  ] })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opensite/ui",
3
- "version": "3.7.9",
3
+ "version": "3.8.0",
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",