@opensite/ui 3.7.9 → 3.8.1

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.
@@ -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
  }
@@ -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 };
@@ -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 };
@@ -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
  }
@@ -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",
@@ -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",