@opensite/ui 3.6.8 → 3.7.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.
@@ -623,7 +623,16 @@ function HeroDashedBorderFeatures({
623
623
  ),
624
624
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl", children: [
625
625
  renderAnnouncement,
626
- (logo || logoSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("my-6 flex justify-center", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot, size: "lg" }) }),
626
+ (logo || logoSlot) && /* @__PURE__ */ jsxRuntime.jsx(
627
+ "div",
628
+ {
629
+ className: cn(
630
+ "mt-8 md:mt-16 mb-0 flex justify-center",
631
+ logoClassName
632
+ ),
633
+ children: /* @__PURE__ */ jsxRuntime.jsx(BrandLogo, { logo, logoSlot, size: "lg" })
634
+ }
635
+ ),
627
636
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
628
637
  "h1",
629
638
  {
@@ -602,7 +602,16 @@ function HeroDashedBorderFeatures({
602
602
  ),
603
603
  children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-3xl", children: [
604
604
  renderAnnouncement,
605
- (logo || logoSlot) && /* @__PURE__ */ jsx("div", { className: cn("my-6 flex justify-center", logoClassName), children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot, size: "lg" }) }),
605
+ (logo || logoSlot) && /* @__PURE__ */ jsx(
606
+ "div",
607
+ {
608
+ className: cn(
609
+ "mt-8 md:mt-16 mb-0 flex justify-center",
610
+ logoClassName
611
+ ),
612
+ children: /* @__PURE__ */ jsx(BrandLogo, { logo, logoSlot, size: "lg" })
613
+ }
614
+ ),
606
615
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
607
616
  "h1",
608
617
  {
@@ -794,7 +794,7 @@ function HeroDesignCarouselPortfolio({
794
794
  "div",
795
795
  {
796
796
  className: cn(
797
- "flex flex-col gap-10 pt-12 pb-8 lg:pt-24 lg:pb-12",
797
+ "flex flex-col gap-10 pt-12 pb-8 lg:pt-12 lg:pb-12",
798
798
  contentClassName
799
799
  ),
800
800
  children: [
@@ -768,7 +768,7 @@ function HeroDesignCarouselPortfolio({
768
768
  "div",
769
769
  {
770
770
  className: cn(
771
- "flex flex-col gap-10 pt-12 pb-8 lg:pt-24 lg:pb-12",
771
+ "flex flex-col gap-10 pt-12 pb-8 lg:pt-12 lg:pb-12",
772
772
  contentClassName
773
773
  ),
774
774
  children: [
@@ -534,6 +534,48 @@ function ActionComponent({ action }) {
534
534
  }
535
535
  );
536
536
  }
537
+ var SIZE_CLASSES = {
538
+ sm: "max-h-6 sm:max-h-7",
539
+ md: "max-h-8 sm:max-h-9 lg:max-h-10",
540
+ lg: "max-h-10 sm:max-h-12 lg:max-h-14",
541
+ xl: "max-h-12 sm:max-h-14 lg:max-h-16"
542
+ };
543
+ var BrandLogo = ({
544
+ logo,
545
+ logoSlot,
546
+ logoClassName,
547
+ size = "md",
548
+ optixFlowConfig
549
+ }) => {
550
+ if (logoSlot) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: logoSlot });
551
+ if (!logo || !logo.src) return null;
552
+ const imgElement = /* @__PURE__ */ jsxRuntime.jsx(
553
+ img.Img,
554
+ {
555
+ src: logo.src,
556
+ className: cn(
557
+ "w-auto object-contain",
558
+ SIZE_CLASSES[size],
559
+ logo.className
560
+ ),
561
+ alt: logo.alt || "Logo",
562
+ optixFlowConfig,
563
+ loading: "eager"
564
+ }
565
+ );
566
+ if (logo.url) {
567
+ return /* @__PURE__ */ jsxRuntime.jsx(
568
+ pressable.Pressable,
569
+ {
570
+ href: logo.url,
571
+ className: cn("flex items-center", logoClassName),
572
+ children: imgElement
573
+ }
574
+ );
575
+ }
576
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center", logoClassName), children: imgElement });
577
+ };
578
+ var brand_logo_default = BrandLogo;
537
579
  function HeroEventRegistration({
538
580
  sectionId = "hero-event-registration",
539
581
  badgeText,
@@ -564,6 +606,8 @@ function HeroEventRegistration({
564
606
  imageClassName,
565
607
  optixFlowConfig,
566
608
  logo,
609
+ logoSlot,
610
+ logoClassName,
567
611
  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
568
612
  }) {
569
613
  const renderBadge = React.useMemo(() => {
@@ -721,13 +765,11 @@ function HeroEventRegistration({
721
765
  ),
722
766
  children: [
723
767
  renderBadge,
724
- logo && /* @__PURE__ */ jsxRuntime.jsx(
725
- img.Img,
768
+ (logo || logoSlot) && /* @__PURE__ */ jsxRuntime.jsx(
769
+ "div",
726
770
  {
727
- src: logo.src,
728
- alt: logo.alt,
729
- className: "w-auto max-w-full h-12 md:h-14 object-contain my-4",
730
- optixFlowConfig
771
+ className: cn("mb-1 mt-4 flex justify-start", logoClassName),
772
+ children: /* @__PURE__ */ jsxRuntime.jsx(brand_logo_default, { logo, logoSlot, size: "lg" })
731
773
  }
732
774
  ),
733
775
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1,7 +1,10 @@
1
1
  import * as React from 'react';
2
2
  import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cgd-IXlI.cjs';
3
+ import { L as LogoConfig } from './types-mWZcgKth.cjs';
3
4
  import { A as ActionConfig, k as StatItem, I as ImageItem, O as OptixFlowConfig } from './blocks-DyouPohq.cjs';
4
5
  import 'react/jsx-runtime';
6
+ import './dynamic-icon.cjs';
7
+ import '@page-speed/icon';
5
8
  import 'class-variance-authority';
6
9
  import '@page-speed/pressable';
7
10
  import '@opensite/hooks/usePlatformFromUrl';
@@ -119,12 +122,18 @@ interface HeroEventRegistrationProps {
119
122
  */
120
123
  optixFlowConfig?: OptixFlowConfig;
121
124
  /**
122
- * Logo image configuration
125
+ * Brand logo configuration — renders centered above the heading.
126
+ * LOGO MEDIA ONLY. Do not use photos, hero images, or video assets.
123
127
  */
124
- logo?: {
125
- src: string;
126
- alt: string;
127
- };
128
+ logo?: LogoConfig;
129
+ /**
130
+ * Custom slot for logo (overrides logo prop)
131
+ */
132
+ logoSlot?: React.ReactNode;
133
+ /**
134
+ * Additional CSS classes for the logo container
135
+ */
136
+ logoClassName?: string;
128
137
  /**
129
138
  * Direction configuration for desktop and mobile layouts
130
139
  * @default { desktop: 'mediaRight', mobile: 'mediaTop' }
@@ -133,6 +142,6 @@ interface HeroEventRegistrationProps {
133
142
  /** Optional Section ID */
134
143
  sectionId?: string;
135
144
  }
136
- declare function HeroEventRegistration({ sectionId, badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, stats, statsSlot, image, imageSlot, locationLabel, locationSublabel, locationSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, imageClassName, optixFlowConfig, logo, directionConfig, }: HeroEventRegistrationProps): React.JSX.Element;
145
+ declare function HeroEventRegistration({ sectionId, badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, stats, statsSlot, image, imageSlot, locationLabel, locationSublabel, locationSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, imageClassName, optixFlowConfig, logo, logoSlot, logoClassName, directionConfig, }: HeroEventRegistrationProps): React.JSX.Element;
137
146
 
138
147
  export { HeroEventRegistration, type HeroEventRegistrationProps };
@@ -1,7 +1,10 @@
1
1
  import * as React from 'react';
2
2
  import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
3
+ import { L as LogoConfig } from './types-hJ2R0GoH.js';
3
4
  import { A as ActionConfig, k as StatItem, I as ImageItem, O as OptixFlowConfig } from './blocks-DyouPohq.js';
4
5
  import 'react/jsx-runtime';
6
+ import './dynamic-icon.js';
7
+ import '@page-speed/icon';
5
8
  import 'class-variance-authority';
6
9
  import '@page-speed/pressable';
7
10
  import '@opensite/hooks/usePlatformFromUrl';
@@ -119,12 +122,18 @@ interface HeroEventRegistrationProps {
119
122
  */
120
123
  optixFlowConfig?: OptixFlowConfig;
121
124
  /**
122
- * Logo image configuration
125
+ * Brand logo configuration — renders centered above the heading.
126
+ * LOGO MEDIA ONLY. Do not use photos, hero images, or video assets.
123
127
  */
124
- logo?: {
125
- src: string;
126
- alt: string;
127
- };
128
+ logo?: LogoConfig;
129
+ /**
130
+ * Custom slot for logo (overrides logo prop)
131
+ */
132
+ logoSlot?: React.ReactNode;
133
+ /**
134
+ * Additional CSS classes for the logo container
135
+ */
136
+ logoClassName?: string;
128
137
  /**
129
138
  * Direction configuration for desktop and mobile layouts
130
139
  * @default { desktop: 'mediaRight', mobile: 'mediaTop' }
@@ -133,6 +142,6 @@ interface HeroEventRegistrationProps {
133
142
  /** Optional Section ID */
134
143
  sectionId?: string;
135
144
  }
136
- declare function HeroEventRegistration({ sectionId, badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, stats, statsSlot, image, imageSlot, locationLabel, locationSublabel, locationSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, imageClassName, optixFlowConfig, logo, directionConfig, }: HeroEventRegistrationProps): React.JSX.Element;
145
+ declare function HeroEventRegistration({ sectionId, badgeText, badgeIcon, badgeSlot, heading, description, actions, actionsSlot, stats, statsSlot, image, imageSlot, locationLabel, locationSublabel, locationSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, actionsClassName, statsClassName, imageClassName, optixFlowConfig, logo, logoSlot, logoClassName, directionConfig, }: HeroEventRegistrationProps): React.JSX.Element;
137
146
 
138
147
  export { HeroEventRegistration, type HeroEventRegistrationProps };
@@ -513,6 +513,48 @@ function ActionComponent({ action }) {
513
513
  }
514
514
  );
515
515
  }
516
+ var SIZE_CLASSES = {
517
+ sm: "max-h-6 sm:max-h-7",
518
+ md: "max-h-8 sm:max-h-9 lg:max-h-10",
519
+ lg: "max-h-10 sm:max-h-12 lg:max-h-14",
520
+ xl: "max-h-12 sm:max-h-14 lg:max-h-16"
521
+ };
522
+ var BrandLogo = ({
523
+ logo,
524
+ logoSlot,
525
+ logoClassName,
526
+ size = "md",
527
+ optixFlowConfig
528
+ }) => {
529
+ if (logoSlot) return /* @__PURE__ */ jsx(Fragment, { children: logoSlot });
530
+ if (!logo || !logo.src) return null;
531
+ const imgElement = /* @__PURE__ */ jsx(
532
+ Img,
533
+ {
534
+ src: logo.src,
535
+ className: cn(
536
+ "w-auto object-contain",
537
+ SIZE_CLASSES[size],
538
+ logo.className
539
+ ),
540
+ alt: logo.alt || "Logo",
541
+ optixFlowConfig,
542
+ loading: "eager"
543
+ }
544
+ );
545
+ if (logo.url) {
546
+ return /* @__PURE__ */ jsx(
547
+ Pressable,
548
+ {
549
+ href: logo.url,
550
+ className: cn("flex items-center", logoClassName),
551
+ children: imgElement
552
+ }
553
+ );
554
+ }
555
+ return /* @__PURE__ */ jsx("div", { className: cn("flex items-center", logoClassName), children: imgElement });
556
+ };
557
+ var brand_logo_default = BrandLogo;
516
558
  function HeroEventRegistration({
517
559
  sectionId = "hero-event-registration",
518
560
  badgeText,
@@ -543,6 +585,8 @@ function HeroEventRegistration({
543
585
  imageClassName,
544
586
  optixFlowConfig,
545
587
  logo,
588
+ logoSlot,
589
+ logoClassName,
546
590
  directionConfig = { desktop: "mediaRight", mobile: "mediaTop" }
547
591
  }) {
548
592
  const renderBadge = useMemo(() => {
@@ -700,13 +744,11 @@ function HeroEventRegistration({
700
744
  ),
701
745
  children: [
702
746
  renderBadge,
703
- logo && /* @__PURE__ */ jsx(
704
- Img,
747
+ (logo || logoSlot) && /* @__PURE__ */ jsx(
748
+ "div",
705
749
  {
706
- src: logo.src,
707
- alt: logo.alt,
708
- className: "w-auto max-w-full h-12 md:h-14 object-contain my-4",
709
- optixFlowConfig
750
+ className: cn("mb-1 mt-4 flex justify-start", logoClassName),
751
+ children: /* @__PURE__ */ jsx(brand_logo_default, { logo, logoSlot, size: "lg" })
710
752
  }
711
753
  ),
712
754
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
@@ -538,17 +538,17 @@ function HeroFullscreenBackgroundImage({
538
538
  ),
539
539
  children: heading
540
540
  }
541
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
541
+ ) : heading),
542
542
  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
543
543
  "p",
544
544
  {
545
545
  className: cn(
546
- "text-center text-base text-balance text-white text-shadow-lg",
546
+ "text-center text-base text-balance text-white text-shadow-lg max-w-full md:max-w-sm",
547
547
  descriptionClassName
548
548
  ),
549
549
  children: description
550
550
  }
551
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description })),
551
+ ) : description),
552
552
  /* @__PURE__ */ jsxRuntime.jsx(
553
553
  BlockActions,
554
554
  {
@@ -532,17 +532,17 @@ function HeroFullscreenBackgroundImage({
532
532
  ),
533
533
  children: heading
534
534
  }
535
- ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
535
+ ) : heading),
536
536
  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
537
537
  "p",
538
538
  {
539
539
  className: cn(
540
- "text-center text-base text-balance text-white text-shadow-lg",
540
+ "text-center text-base text-balance text-white text-shadow-lg max-w-full md:max-w-sm",
541
541
  descriptionClassName
542
542
  ),
543
543
  children: description
544
544
  }
545
- ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
545
+ ) : description),
546
546
  /* @__PURE__ */ jsx(
547
547
  BlockActions,
548
548
  {
@@ -392,10 +392,53 @@ var Section = React__default.default.forwardRef(
392
392
  }
393
393
  );
394
394
  Section.displayName = "Section";
395
+ var SIZE_CLASSES = {
396
+ sm: "max-h-6 sm:max-h-7",
397
+ md: "max-h-8 sm:max-h-9 lg:max-h-10",
398
+ lg: "max-h-10 sm:max-h-12 lg:max-h-14",
399
+ xl: "max-h-12 sm:max-h-14 lg:max-h-16"
400
+ };
401
+ var BrandLogo = ({
402
+ logo,
403
+ logoSlot,
404
+ logoClassName,
405
+ size = "md",
406
+ optixFlowConfig
407
+ }) => {
408
+ if (logoSlot) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: logoSlot });
409
+ if (!logo || !logo.src) return null;
410
+ const imgElement = /* @__PURE__ */ jsxRuntime.jsx(
411
+ img.Img,
412
+ {
413
+ src: logo.src,
414
+ className: cn(
415
+ "w-auto object-contain",
416
+ SIZE_CLASSES[size],
417
+ logo.className
418
+ ),
419
+ alt: logo.alt || "Logo",
420
+ optixFlowConfig,
421
+ loading: "eager"
422
+ }
423
+ );
424
+ if (logo.url) {
425
+ return /* @__PURE__ */ jsxRuntime.jsx(
426
+ pressable.Pressable,
427
+ {
428
+ href: logo.url,
429
+ className: cn("flex items-center", logoClassName),
430
+ children: imgElement
431
+ }
432
+ );
433
+ }
434
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center", logoClassName), children: imgElement });
435
+ };
436
+ var brand_logo_default = BrandLogo;
395
437
  function HeroLogoCenteredScreenshot({
396
438
  sectionId = "hero-logo-centered-screenshot",
397
439
  logo,
398
440
  logoSlot,
441
+ logoClassName,
399
442
  heading,
400
443
  description,
401
444
  action,
@@ -414,20 +457,6 @@ function HeroLogoCenteredScreenshot({
414
457
  imageClassName,
415
458
  optixFlowConfig
416
459
  }) {
417
- const renderLogo = React.useMemo(() => {
418
- if (logoSlot) return logoSlot;
419
- if (!logo) return null;
420
- const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
421
- return /* @__PURE__ */ jsxRuntime.jsx(
422
- img.Img,
423
- {
424
- src: logoSrc,
425
- alt: logo.alt,
426
- className: cn("h-10 md:h-16 object-contain", logo.className),
427
- optixFlowConfig
428
- }
429
- );
430
- }, [logoSlot, logo, optixFlowConfig]);
431
460
  const renderAction = React.useMemo(() => {
432
461
  if (actionSlot) return actionSlot;
433
462
  if (!action) return null;
@@ -470,9 +499,10 @@ function HeroLogoCenteredScreenshot({
470
499
  spacing,
471
500
  pattern,
472
501
  patternOpacity,
473
- className: cn(className),
474
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container max-w-7xl", containerClassName), children: [
475
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
502
+ className,
503
+ containerClassName,
504
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
505
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex max-w-full md:max-w-5xl flex-col items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
476
506
  "div",
477
507
  {
478
508
  className: cn(
@@ -480,7 +510,7 @@ function HeroLogoCenteredScreenshot({
480
510
  contentClassName
481
511
  ),
482
512
  children: [
483
- renderLogo,
513
+ (logo || logoSlot) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex justify-center", logoClassName), children: /* @__PURE__ */ jsxRuntime.jsx(brand_logo_default, { logo, logoSlot, size: "lg" }) }),
484
514
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center items-center w-full text-balance", children: [
485
515
  heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
486
516
  "h1",
@@ -491,33 +521,24 @@ function HeroLogoCenteredScreenshot({
491
521
  ),
492
522
  children: heading
493
523
  }
494
- ) : /* @__PURE__ */ jsxRuntime.jsx(
495
- "h1",
496
- {
497
- className: cn(
498
- "mb-4 text-3xl font-medium lg:text-5xl",
499
- headingClassName
500
- ),
501
- children: heading
502
- }
503
- )),
524
+ ) : heading),
504
525
  description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
505
526
  "p",
506
527
  {
507
528
  className: cn(
508
- "max-w-3xl lg:text-xl",
529
+ "max-w-full md:max-w-3xl lg:text-xl",
509
530
  descriptionClassName
510
531
  ),
511
532
  children: description
512
533
  }
513
- ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
534
+ ) : description)
514
535
  ] }),
515
536
  renderAction
516
537
  ]
517
538
  }
518
539
  ) }),
519
540
  renderImage
520
- ] }) })
541
+ ] })
521
542
  }
522
543
  );
523
544
  }
@@ -1,20 +1,28 @@
1
1
  import * as React from 'react';
2
2
  import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Cgd-IXlI.cjs';
3
- import { L as LogoItem, A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DyouPohq.cjs';
3
+ import { L as LogoConfig } from './types-mWZcgKth.cjs';
4
+ import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DyouPohq.cjs';
4
5
  import 'react/jsx-runtime';
6
+ import './dynamic-icon.cjs';
7
+ import '@page-speed/icon';
5
8
  import 'class-variance-authority';
6
9
  import '@page-speed/pressable';
7
10
  import '@opensite/hooks/usePlatformFromUrl';
8
11
 
9
12
  interface HeroLogoCenteredScreenshotProps {
10
13
  /**
11
- * Logo configuration
14
+ * Brand logo configuration — renders above the announcement badge.
15
+ * LOGO MEDIA ONLY. Do not use photos, hero images, or video assets.
12
16
  */
13
- logo?: LogoItem;
17
+ logo?: LogoConfig;
14
18
  /**
15
19
  * Custom slot for logo (overrides logo prop)
16
20
  */
17
21
  logoSlot?: React.ReactNode;
22
+ /**
23
+ * Additional CSS classes for the logo container
24
+ */
25
+ logoClassName?: string;
18
26
  /**
19
27
  * Main heading content
20
28
  */
@@ -85,6 +93,6 @@ interface HeroLogoCenteredScreenshotProps {
85
93
  /** Optional Section ID */
86
94
  sectionId?: string;
87
95
  }
88
- declare function HeroLogoCenteredScreenshot({ sectionId, logo, logoSlot, heading, description, action, actionSlot, image, imageSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroLogoCenteredScreenshotProps): React.JSX.Element;
96
+ declare function HeroLogoCenteredScreenshot({ sectionId, logo, logoSlot, logoClassName, heading, description, action, actionSlot, image, imageSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroLogoCenteredScreenshotProps): React.JSX.Element;
89
97
 
90
98
  export { HeroLogoCenteredScreenshot, type HeroLogoCenteredScreenshotProps };
@@ -1,20 +1,28 @@
1
1
  import * as React from 'react';
2
2
  import { S as SectionBackground, s as SectionSpacing, t as PatternName } from './community-initiatives-Dud0DKXB.js';
3
- import { L as LogoItem, A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DyouPohq.js';
3
+ import { L as LogoConfig } from './types-hJ2R0GoH.js';
4
+ import { A as ActionConfig, I as ImageItem, O as OptixFlowConfig } from './blocks-DyouPohq.js';
4
5
  import 'react/jsx-runtime';
6
+ import './dynamic-icon.js';
7
+ import '@page-speed/icon';
5
8
  import 'class-variance-authority';
6
9
  import '@page-speed/pressable';
7
10
  import '@opensite/hooks/usePlatformFromUrl';
8
11
 
9
12
  interface HeroLogoCenteredScreenshotProps {
10
13
  /**
11
- * Logo configuration
14
+ * Brand logo configuration — renders above the announcement badge.
15
+ * LOGO MEDIA ONLY. Do not use photos, hero images, or video assets.
12
16
  */
13
- logo?: LogoItem;
17
+ logo?: LogoConfig;
14
18
  /**
15
19
  * Custom slot for logo (overrides logo prop)
16
20
  */
17
21
  logoSlot?: React.ReactNode;
22
+ /**
23
+ * Additional CSS classes for the logo container
24
+ */
25
+ logoClassName?: string;
18
26
  /**
19
27
  * Main heading content
20
28
  */
@@ -85,6 +93,6 @@ interface HeroLogoCenteredScreenshotProps {
85
93
  /** Optional Section ID */
86
94
  sectionId?: string;
87
95
  }
88
- declare function HeroLogoCenteredScreenshot({ sectionId, logo, logoSlot, heading, description, action, actionSlot, image, imageSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroLogoCenteredScreenshotProps): React.JSX.Element;
96
+ declare function HeroLogoCenteredScreenshot({ sectionId, logo, logoSlot, logoClassName, heading, description, action, actionSlot, image, imageSlot, background, containerClassName, spacing, pattern, patternOpacity, className, contentClassName, headingClassName, descriptionClassName, imageClassName, optixFlowConfig, }: HeroLogoCenteredScreenshotProps): React.JSX.Element;
89
97
 
90
98
  export { HeroLogoCenteredScreenshot, type HeroLogoCenteredScreenshotProps };