@axos-web-dev/shared-components 1.0.77 → 1.0.78-buydown-patch.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.
Files changed (100) hide show
  1. package/dist/ATMLocator/ATMLocator.js +3 -3
  2. package/dist/Auth/ErrorAlert.js +3 -3
  3. package/dist/Auth/SignInPassword.js +9 -5
  4. package/dist/Button/Button.css.d.ts +13 -0
  5. package/dist/Button/Button.css.js +1 -1
  6. package/dist/Button/Button.js +3 -3
  7. package/dist/Calculators/ApyCalculator/index.js +18 -11
  8. package/dist/Calculators/AxosOneCalculator/index.js +6 -6
  9. package/dist/Calculators/BuyDownCalculator/index.js +1 -1
  10. package/dist/Calculators/Calculator.js +4 -4
  11. package/dist/Carousel/index.js +11 -11
  12. package/dist/Chevron/index.js +3 -3
  13. package/dist/Comparison/Comparison.css.d.ts +1 -0
  14. package/dist/Comparison/Comparison.css.js +3 -1
  15. package/dist/Comparison/Comparison.js +9 -9
  16. package/dist/Comparison/index.js +2 -1
  17. package/dist/ExecutiveBio/ExecutiveBio.js +3 -3
  18. package/dist/FaqAccordion/index.js +3 -3
  19. package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +3 -3
  20. package/dist/Forms/ApplyNow.js +3 -3
  21. package/dist/Forms/ContactUsBusiness.d.ts +1 -1
  22. package/dist/Forms/ContactUsBusiness.js +8 -8
  23. package/dist/Forms/ContactUsBusinessNameEmail.d.ts +9 -0
  24. package/dist/Forms/ContactUsBusinessNameEmail.js +272 -0
  25. package/dist/Forms/ContactUsNMLSId.js +3 -3
  26. package/dist/Forms/CraPublicFile.js +3 -3
  27. package/dist/Forms/EmailOnly.js +3 -3
  28. package/dist/Forms/FormEnums.js +58 -5
  29. package/dist/Forms/MortgageRate/MortgageRateForm.js +3 -3
  30. package/dist/Forms/MortgageRate/MortgageRateWatch.js +3 -3
  31. package/dist/Forms/SuccesForm.js +4 -4
  32. package/dist/Forms/index.d.ts +2 -1
  33. package/dist/Forms/index.js +3 -1
  34. package/dist/Hyperlink/index.js +3 -3
  35. package/dist/IconBillboard/IconBillboard.css.d.ts +1 -0
  36. package/dist/IconBillboard/IconBillboard.css.js +2 -0
  37. package/dist/IconBillboard/IconBillboard.d.ts +1 -2
  38. package/dist/IconBillboard/IconBillboard.js +30 -85
  39. package/dist/IconBillboard/index.js +3 -3
  40. package/dist/IconBillboard/sections/CallToActionSection.d.ts +12 -0
  41. package/dist/IconBillboard/sections/CallToActionSection.js +101 -0
  42. package/dist/IconBillboard/sections/HeaderSection.d.ts +11 -0
  43. package/dist/IconBillboard/sections/HeaderSection.js +23 -0
  44. package/dist/IconBillboard/sections/IconSection.d.ts +7 -0
  45. package/dist/IconBillboard/sections/IconSection.js +18 -0
  46. package/dist/IconBillboard/sections/ItemsSection.d.ts +11 -0
  47. package/dist/IconBillboard/sections/ItemsSection.js +11 -0
  48. package/dist/IconBillboard/sections/LayoutSection.d.ts +8 -0
  49. package/dist/IconBillboard/sections/LayoutSection.js +6 -0
  50. package/dist/ImageBillboard/ImageBillboard.css.d.ts +13 -0
  51. package/dist/ImageBillboard/ImageBillboard.css.js +47 -21
  52. package/dist/ImageBillboard/ImageBillboard.interface.d.ts +19 -2
  53. package/dist/ImageBillboard/ImageBillboardSet.d.ts +1 -1
  54. package/dist/ImageBillboard/ImageBillboardSet.js +83 -15
  55. package/dist/ImageBillboard/index.js +14 -1
  56. package/dist/ImageLink/ImageLink.js +3 -3
  57. package/dist/ImageLink/ImageLinkSet.js +6 -6
  58. package/dist/ImageLink/index.js +3 -3
  59. package/dist/Insight/Featured/CategorySelector.js +4 -4
  60. package/dist/Insight/Featured/Featured.js +11 -11
  61. package/dist/Insight/Featured/Header.js +10 -10
  62. package/dist/Modal/Modal.js +3 -3
  63. package/dist/NavigationMenu/AxosALTS/NavData.js +3 -3
  64. package/dist/NavigationMenu/AxosALTS/index.js +3 -3
  65. package/dist/NavigationMenu/AxosAdvisor/SubNavBar.js +3 -10
  66. package/dist/NavigationMenu/AxosAdvisor/index.js +3 -11
  67. package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.d.ts +4 -1
  68. package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.js +11 -6
  69. package/dist/NavigationMenu/AxosBank/NavData.js +3 -3
  70. package/dist/NavigationMenu/AxosBank/SubNavBar.js +53 -21
  71. package/dist/NavigationMenu/AxosBank/index.js +3 -3
  72. package/dist/NavigationMenu/LaVictoire/NavData.js +3 -3
  73. package/dist/NavigationMenu/LaVictoire/index.js +3 -3
  74. package/dist/NavigationMenu/NavDataJson.d.ts +2 -0
  75. package/dist/NavigationMenu/NavDataJson.js +308 -0
  76. package/dist/NavigationMenu/Navbar.d.ts +5 -0
  77. package/dist/NavigationMenu/Navbar.js +329 -0
  78. package/dist/NavigationMenu/SignInNavButton.d.ts +1 -0
  79. package/dist/NavigationMenu/SignInNavButton.js +362 -0
  80. package/dist/SetContainer/SetContainer.d.ts +1 -1
  81. package/dist/SetContainer/SetContainer.js +11 -7
  82. package/dist/SocialMediaBar/iconsRepository.js +3 -3
  83. package/dist/VideoTile/VideoTile.interface.d.ts +4 -3
  84. package/dist/VideoTile/VideoTile.js +182 -28
  85. package/dist/VideoWrapper/index.js +4 -4
  86. package/dist/assets/Button/Button.css +31 -16
  87. package/dist/assets/Calculators/AxosOneCalculator/BalanceAPYCalculator.css +5 -0
  88. package/dist/assets/Calculators/SummitApyCalculator/BalanceAPYCalculator.css +8 -0
  89. package/dist/assets/CallToActionBar/CallToActionBar.css +4 -0
  90. package/dist/assets/Comparison/Comparison.css +9 -2
  91. package/dist/assets/HeroBanner/HeroBanner.css +1 -1
  92. package/dist/assets/IconBillboard/IconBillboard.css +34 -2
  93. package/dist/assets/ImageBillboard/ImageBillboard.css +243 -63
  94. package/dist/assets/SetContainer/SetContainer.css +0 -1
  95. package/dist/assets/utils/optimizeImage/optimizeImage.css.css +8 -9
  96. package/dist/main.js +22 -6
  97. package/dist/utils/optimizeImage/OptimizeImage.d.ts +2 -2
  98. package/dist/utils/optimizeImage/OptimizeImage.js +1 -1
  99. package/dist/utils/optimizeImage/optimizeImage.module.js +3 -3
  100. package/package.json +1 -1
@@ -0,0 +1,101 @@
1
+ "use client";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { Button } from "../../Button/Button.js";
4
+ import "../../Button/Button.css.js";
5
+ import { useMemo } from "react";
6
+ import "react-use";
7
+ import { buttons } from "../IconBillboard.css.js";
8
+ import { Chevron } from "../../Chevron/index.js";
9
+ import { getVariant } from "../../utils/getVariant.js";
10
+ const useFullClick = (callToActionRow) => {
11
+ return useMemo(() => {
12
+ let chevronCount = 0;
13
+ let buttonCount = 0;
14
+ let chevronUrl;
15
+ let chevronText;
16
+ if (callToActionRow && callToActionRow.length > 0) {
17
+ callToActionRow.forEach((cta) => {
18
+ if (cta.type === "Button") {
19
+ buttonCount++;
20
+ } else {
21
+ chevronCount++;
22
+ chevronUrl = cta.targetUrl;
23
+ chevronText = cta.displayText;
24
+ }
25
+ });
26
+ }
27
+ const isClickable = chevronCount === 1 && buttonCount === 0 && typeof chevronUrl === "string" && chevronUrl.length > 0;
28
+ const handleClick = (e) => {
29
+ if (!isClickable) return;
30
+ const linkEl = e.currentTarget.querySelector("a");
31
+ if (linkEl && linkEl instanceof HTMLAnchorElement) {
32
+ window.location.href = linkEl.href;
33
+ }
34
+ };
35
+ return {
36
+ isClickable,
37
+ handleClick,
38
+ chevronText
39
+ };
40
+ }, [callToActionRow]);
41
+ };
42
+ const CallToActionSection = ({
43
+ callToActionRow
44
+ }) => {
45
+ if (!Array.isArray(callToActionRow) || callToActionRow.length === 0) {
46
+ return null;
47
+ }
48
+ return /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
49
+ ({
50
+ id,
51
+ variant,
52
+ displayText,
53
+ targetUrl,
54
+ type,
55
+ marketingIntersitial,
56
+ newTab,
57
+ ...rest
58
+ }) => type === "Button" ? rest.as == "button" ? /* @__PURE__ */ jsx(
59
+ Button,
60
+ {
61
+ targetUrl,
62
+ color: getVariant(variant),
63
+ size: "medium",
64
+ rounded: "medium",
65
+ marketingIntersitial,
66
+ newTab,
67
+ as: "button",
68
+ type: "button",
69
+ action: rest?.onClick,
70
+ children: displayText
71
+ },
72
+ id
73
+ ) : /* @__PURE__ */ jsx(
74
+ Button,
75
+ {
76
+ targetUrl,
77
+ color: getVariant(variant),
78
+ size: "medium",
79
+ rounded: "medium",
80
+ marketingIntersitial,
81
+ newTab,
82
+ children: displayText
83
+ },
84
+ id
85
+ ) : /* @__PURE__ */ jsx(
86
+ Chevron,
87
+ {
88
+ targetUrl,
89
+ variant: getVariant(variant),
90
+ marketingIntersitial,
91
+ newTab,
92
+ children: displayText
93
+ },
94
+ id
95
+ )
96
+ ) });
97
+ };
98
+ export {
99
+ CallToActionSection,
100
+ useFullClick
101
+ };
@@ -0,0 +1,11 @@
1
+ import { ReactNode, Ref } from 'react';
2
+ import { QuaternaryTypes } from '../../utils';
3
+
4
+ export interface HeaderSectionProps {
5
+ body?: ReactNode | undefined;
6
+ headingLevel: "h2" | "h3";
7
+ headingRef: Ref<HTMLHeadingElement>;
8
+ headline?: ReactNode | undefined;
9
+ variant: QuaternaryTypes;
10
+ }
11
+ export declare const HeaderSection: ({ body, headingLevel, headingRef, headline, variant, }: HeaderSectionProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,23 @@
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import React from "react";
3
+ import { headerIconBillboard, title } from "../IconBillboard.css.js";
4
+ const HeaderSection = ({
5
+ body,
6
+ headingLevel,
7
+ headingRef,
8
+ headline,
9
+ variant
10
+ }) => /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
11
+ headline && React.createElement(
12
+ headingLevel,
13
+ {
14
+ ref: headingRef,
15
+ className: `${title({ variant })}`
16
+ },
17
+ headline
18
+ ),
19
+ body && /* @__PURE__ */ jsx("div", { children: body })
20
+ ] });
21
+ export {
22
+ HeaderSection
23
+ };
@@ -0,0 +1,7 @@
1
+ import { ImageInterface } from '..';
2
+
3
+ interface IconSectionProps {
4
+ icon?: ImageInterface;
5
+ }
6
+ export declare const IconSection: ({ icon }: IconSectionProps) => import("react/jsx-runtime").JSX.Element | null;
7
+ export {};
@@ -0,0 +1,18 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { billboard_icon } from "../IconBillboard.css.js";
3
+ const IconSection = ({ icon }) => {
4
+ if (!icon) return null;
5
+ return /* @__PURE__ */ jsx("div", { className: billboard_icon, role: "presentation", children: /* @__PURE__ */ jsx(
6
+ "img",
7
+ {
8
+ src: icon?.src,
9
+ alt: icon?.alt ?? "",
10
+ className: "img_fluid",
11
+ height: icon?.height,
12
+ width: icon?.width
13
+ }
14
+ ) });
15
+ };
16
+ export {
17
+ IconSection
18
+ };
@@ -0,0 +1,11 @@
1
+ import { ReactNode } from 'react';
2
+ import { QuaternaryTypes } from '../../utils';
3
+
4
+ export interface ItemsSectionProps {
5
+ items?: {
6
+ id: string;
7
+ content: ReactNode;
8
+ }[];
9
+ variant: QuaternaryTypes;
10
+ }
11
+ export declare const ItemsSection: ({ items, variant }: ItemsSectionProps) => import("react/jsx-runtime").JSX.Element | null;
@@ -0,0 +1,11 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import clsx from "clsx";
3
+ import { list } from "../IconBillboard.css.js";
4
+ import { BulletItem } from "../../BulletItem/BulletItem.js";
5
+ const ItemsSection = ({ items, variant }) => {
6
+ if (!items || items.length === 0) return null;
7
+ return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: clsx(list, "list_unstyled"), children: items.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, variant, children: item.content }, item.id)) }) });
8
+ };
9
+ export {
10
+ ItemsSection
11
+ };
@@ -0,0 +1,8 @@
1
+ import { ReactNode } from 'react';
2
+
3
+ interface LayoutSectionProps {
4
+ side: boolean;
5
+ children: ReactNode;
6
+ }
7
+ export declare const LayoutSection: ({ side, children }: LayoutSectionProps) => import("react/jsx-runtime").JSX.Element;
8
+ export {};
@@ -0,0 +1,6 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { layout } from "../IconBillboard.css.js";
3
+ const LayoutSection = ({ side, children }) => /* @__PURE__ */ jsx("div", { className: `flex_col middle ${layout({ side })}`, children });
4
+ export {
5
+ LayoutSection
6
+ };
@@ -145,6 +145,7 @@ export declare const header: import('@vanilla-extract/recipes').RuntimeFn<{
145
145
  }>;
146
146
  export declare const billboard_container: string;
147
147
  export declare const billboard_img: string;
148
+ export declare const is_bg_img: string;
148
149
  export declare const billboard_body: string;
149
150
  export declare const billboard_header_section: string;
150
151
  export declare const billboard_ctas: string;
@@ -156,6 +157,8 @@ export declare const section_text_ImageBillboard: string;
156
157
  export declare const billboard_image: string;
157
158
  export declare const mh_330: string;
158
159
  export declare const image_background: string;
160
+ export declare const image_inner_wrapper: string;
161
+ export declare const image_based: string;
159
162
  export declare const rate_container: string;
160
163
  export declare const rate_pad: string;
161
164
  export declare const up_to: string;
@@ -163,6 +166,16 @@ export declare const rate_billboard: string;
163
166
  export declare const apy_billboard: string;
164
167
  export declare const body_copy: string;
165
168
  export declare const sub_bullets: string;
169
+ export declare const top_left: string;
170
+ export declare const top_center: string;
171
+ export declare const top_right: string;
172
+ export declare const center_left: string;
173
+ export declare const center_right: string;
174
+ export declare const center_center: string;
175
+ export declare const bottom_left: string;
176
+ export declare const bottom_right: string;
177
+ export declare const bottom_center: string;
178
+ export declare const remove_padding: string;
166
179
  export declare const exit_intent_backdrop: string;
167
180
  export declare const exit_intent: string;
168
181
  export declare const modal_close_button: string;
@@ -11,27 +11,40 @@ var supertag = createRuntimeFn({ defaultClassName: "_1m7m2a8", variantClassNames
11
11
  var header = createRuntimeFn({ defaultClassName: "_1m7m2ad", variantClassNames: { variant: { primary: "_1m7m2ae", secondary: "_1m7m2af", tertiary: "_1m7m2ag", quaternary: "_1m7m2ah" } }, defaultVariants: {}, compoundVariants: [] });
12
12
  var billboard_container = "_1m7m2ai";
13
13
  var billboard_img = "_1m7m2aj";
14
- var billboard_body = "_1m7m2ak";
15
- var billboard_header_section = "_1m7m2al";
16
- var billboard_ctas = "_1m7m2am";
17
- var body = "_1m7m2an";
18
- var single_container = "_1m7m2ao";
19
- var two_inline = "_1m7m2ap";
20
- var three_inline = "_1m7m2aq";
21
- var section_text_ImageBillboard = "_1m7m2ar";
22
- var billboard_image = "_1m7m2as";
23
- var mh_330 = "_1m7m2at";
24
- var image_background = "_1m7m2au";
25
- var rate_container = "_1m7m2av";
26
- var rate_pad = "_1m7m2aw";
27
- var up_to = "_1m7m2ax";
28
- var rate_billboard = "_1m7m2ay";
29
- var apy_billboard = "_1m7m2az";
30
- var body_copy = "_1m7m2a10";
31
- var sub_bullets = "_1m7m2a11";
32
- var exit_intent_backdrop = "_1m7m2a12";
33
- var exit_intent = "_1m7m2a13";
34
- var modal_close_button = "_1m7m2a14";
14
+ var is_bg_img = "_1m7m2ak";
15
+ var billboard_body = "_1m7m2al";
16
+ var billboard_header_section = "_1m7m2am";
17
+ var billboard_ctas = "_1m7m2an";
18
+ var body = "_1m7m2ao";
19
+ var single_container = "_1m7m2ap";
20
+ var two_inline = "_1m7m2aq";
21
+ var three_inline = "_1m7m2ar";
22
+ var section_text_ImageBillboard = "_1m7m2as";
23
+ var billboard_image = "_1m7m2at";
24
+ var mh_330 = "_1m7m2au";
25
+ var image_background = "_1m7m2av";
26
+ var image_inner_wrapper = "_1m7m2aw";
27
+ var image_based = "_1m7m2ax";
28
+ var rate_container = "_1m7m2ay";
29
+ var rate_pad = "_1m7m2az";
30
+ var up_to = "_1m7m2a10";
31
+ var rate_billboard = "_1m7m2a11";
32
+ var apy_billboard = "_1m7m2a12";
33
+ var body_copy = "_1m7m2a13";
34
+ var sub_bullets = "_1m7m2a14";
35
+ var top_left = "_1m7m2a15";
36
+ var top_center = "_1m7m2a16";
37
+ var top_right = "_1m7m2a17";
38
+ var center_left = "_1m7m2a18";
39
+ var center_right = "_1m7m2a19";
40
+ var center_center = "_1m7m2a1a";
41
+ var bottom_left = "_1m7m2a1b";
42
+ var bottom_right = "_1m7m2a1c";
43
+ var bottom_center = "_1m7m2a1d";
44
+ var remove_padding = "_1m7m2a1e";
45
+ var exit_intent_backdrop = "_1m7m2a1f";
46
+ var exit_intent = "_1m7m2a1g";
47
+ var modal_close_button = "_1m7m2a1h";
35
48
  export {
36
49
  apy_billboard,
37
50
  billboard,
@@ -43,21 +56,34 @@ export {
43
56
  billboard_img,
44
57
  body,
45
58
  body_copy,
59
+ bottom_center,
60
+ bottom_left,
61
+ bottom_right,
62
+ center_center,
63
+ center_left,
64
+ center_right,
46
65
  exit_intent,
47
66
  exit_intent_backdrop,
48
67
  header,
49
68
  imagePlacement,
50
69
  image_background,
70
+ image_based,
71
+ image_inner_wrapper,
72
+ is_bg_img,
51
73
  mh_330,
52
74
  modal_close_button,
53
75
  rate_billboard,
54
76
  rate_container,
55
77
  rate_pad,
78
+ remove_padding,
56
79
  section_text_ImageBillboard,
57
80
  single_container,
58
81
  sub_bullets,
59
82
  supertag,
60
83
  three_inline,
84
+ top_center,
85
+ top_left,
86
+ top_right,
61
87
  two_inline,
62
88
  up_to
63
89
  };
@@ -1,6 +1,5 @@
1
1
  import { BulletItemProps } from '../BulletItem';
2
2
  import { ChevronProps } from '../Chevron/Chevron.interface';
3
- import { ImageInterface } from '../IconBillboard';
4
3
  import { QuaternaryTypes } from '../utils/variant.types';
5
4
  import { ReactNode } from 'react';
6
5
 
@@ -13,6 +12,22 @@ export interface ImageBillboardSetProps {
13
12
  variant: QuaternaryTypes;
14
13
  set?: boolean;
15
14
  bordered?: boolean;
15
+ layout?: "Inline" | "Stacked";
16
+ }
17
+ export interface BillboardImageInterface {
18
+ src: string;
19
+ alt?: string;
20
+ imageType?: "Image" | "Background Image";
21
+ imageAlignment?: string;
22
+ imageBackgroundColor?: string;
23
+ height?: string | number;
24
+ width?: string | number;
25
+ }
26
+ export interface BillboardVideoInterface {
27
+ videoId: string;
28
+ videoPlayer: string;
29
+ thubnailImage: string;
30
+ transcript?: string;
16
31
  }
17
32
  export interface ImageBillboardInterface {
18
33
  id: string;
@@ -24,7 +39,8 @@ export interface ImageBillboardInterface {
24
39
  variant: QuaternaryTypes;
25
40
  eyebrow: string | ReactNode;
26
41
  bullets: BulletItemProps[];
27
- image?: ImageInterface;
42
+ image?: BillboardImageInterface;
43
+ video?: BillboardVideoInterface;
28
44
  callToActionRow: ChevronProps[];
29
45
  set?: boolean;
30
46
  textImageLineOneSmall?: ReactNode | string;
@@ -32,4 +48,5 @@ export interface ImageBillboardInterface {
32
48
  textImageLineThreeSmall?: ReactNode | string;
33
49
  internalName?: string;
34
50
  exitIntent?: boolean;
51
+ layout?: ImageBillboardSetProps["layout"];
35
52
  }
@@ -1,3 +1,3 @@
1
1
  import { ImageBillboardInterface } from './ImageBillboard.interface';
2
2
 
3
- export declare const ImageBillboard: ({ id, variant, headline, bodyCopy, bordered, bullets, callToActionRow, eyebrow, image, imagePlacement: position, set, textImageLineOneSmall, textImageLineTwoBig, textImageLineThreeSmall, internalName, exitIntent, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element | null;
3
+ export declare const ImageBillboard: ({ id, bodyCopy, bordered, bullets, callToActionRow, exitIntent, eyebrow, headline, image, video, imagePlacement: position, internalName, set, textImageLineOneSmall, textImageLineThreeSmall, textImageLineTwoBig, variant, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element | null;
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
3
3
  import { useRef, useState, useEffect, createElement } from "react";
4
4
  import { Button } from "../Button/Button.js";
5
5
  import "../Button/Button.css.js";
@@ -8,7 +8,7 @@ import { Chevron } from "../Chevron/index.js";
8
8
  import "../icons/ArrowIcon/ArrowIcon.css.js";
9
9
  import "../icons/CheckIcon/CheckIcon.css.js";
10
10
  import SvgCheckIcon from "../icons/CheckIcon/index.js";
11
- import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css */
11
+ import '../assets/VideoTile/VideoTile.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css */
12
12
  /* empty css */
13
13
  /* empty css */
14
14
  /* empty css */
@@ -18,24 +18,29 @@ import { OptimizeImage } from "../utils/optimizeImage/OptimizeImage.js";
18
18
  import { useExitIntentModal } from "./ExitIntentModal/useExitIntentModal.js";
19
19
  import { ModalWrapper } from "./ExitIntentModal/ModalWrapper.js";
20
20
  import clsx from "clsx";
21
- import { billboard_img, image_background, up_to, rate_billboard, apy_billboard, rate_pad, rate_container, body, billboard_body, billboard_header_section, supertag, header, body_copy, sub_bullets, billboard_ctas, billboard, imagePlacement } from "./ImageBillboard.css.js";
21
+ import { billboard_img, center_center, remove_padding, image_inner_wrapper, image_background, is_bg_img, up_to, rate_billboard, apy_billboard, rate_pad, rate_container, body, billboard_body, billboard_header_section, supertag, header, body_copy, sub_bullets, billboard_ctas, billboard, imagePlacement, image_based, bottom_right, bottom_center, bottom_left, center_right, center_left, top_right, top_center, top_left } from "./ImageBillboard.css.js";
22
+ import "next/script.js";
23
+ import { VideoTile } from "../VideoTile/VideoTile.js";
24
+ /* empty css */
25
+ /* empty css */
22
26
  const ImageBillboard = ({
23
27
  id,
24
- variant,
25
- headline,
26
28
  bodyCopy,
27
29
  bordered = false,
28
30
  bullets,
29
31
  callToActionRow,
32
+ exitIntent = false,
30
33
  eyebrow,
34
+ headline,
31
35
  image,
36
+ video,
32
37
  imagePlacement: position = "left",
38
+ internalName,
33
39
  set,
34
40
  textImageLineOneSmall,
35
- textImageLineTwoBig,
36
41
  textImageLineThreeSmall,
37
- internalName,
38
- exitIntent = false
42
+ textImageLineTwoBig,
43
+ variant
39
44
  }) => {
40
45
  const billboard_variant = getVariant(variant);
41
46
  position = position?.toLocaleLowerCase();
@@ -48,29 +53,92 @@ const ImageBillboard = ({
48
53
  if (headingRef.current) {
49
54
  const section = headingRef.current.closest("section");
50
55
  if (section) {
51
- const existingH2 = section.querySelector("h2.header_2.mb_16");
56
+ const existingH2 = section.querySelector("h2._1r4ovbuj");
52
57
  if (existingH2) {
53
58
  setHeadingLevel("h3");
54
59
  }
55
60
  }
56
61
  }
57
62
  }, []);
63
+ const imgAlignment = (alignment) => {
64
+ switch (alignment) {
65
+ case "Top Left":
66
+ return top_left;
67
+ case "Top Center":
68
+ return top_center;
69
+ case "Top Right":
70
+ return top_right;
71
+ case "Center Left":
72
+ return center_left;
73
+ case "Center Center":
74
+ return center_center;
75
+ case "Center Right":
76
+ return center_right;
77
+ case "Bottom Left":
78
+ return bottom_left;
79
+ case "Bottom Center":
80
+ return bottom_center;
81
+ case "Bottom Right":
82
+ return bottom_right;
83
+ default:
84
+ return center_center;
85
+ }
86
+ };
58
87
  const renderBillboard = () => /* @__PURE__ */ jsxs(
59
88
  "div",
60
89
  {
61
90
  id: internalName?.replace(/ /g, "-") ?? id,
62
91
  className: clsx(
63
- "billboard",
64
- "containment",
92
+ "billboard rounded flex",
65
93
  billboard({ variant: billboard_variant }),
66
- `rounded flex`,
67
94
  bordered && billboard_variant === "primary" ? "bordered" : "",
68
95
  imagePlacement({ position: position?.toLowerCase() }),
69
- `${set ? "" : "containment"}`,
70
- position === "right" && "reversed"
96
+ position === "right" && "reversed",
97
+ set ? "" : "containment",
98
+ image?.imageType === "Image" ? image_based : ""
71
99
  ),
72
100
  children: [
73
- /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image ? /* @__PURE__ */ jsx("div", { className: image_background, role: "presentation", children: /* @__PURE__ */ jsx(OptimizeImage, { src: image?.src, alt: image?.alt ?? "" }) }) : /* @__PURE__ */ jsx(
101
+ /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image && image.src ? /* @__PURE__ */ jsx(Fragment, { children: image?.imageType === "Image" ? /* @__PURE__ */ jsx(
102
+ "div",
103
+ {
104
+ role: "presentation",
105
+ className: clsx(
106
+ "rounded overflow_hidden flex",
107
+ imgAlignment(image?.imageAlignment ?? center_center),
108
+ image?.imageBackgroundColor === "transparent" ? remove_padding : "",
109
+ image_inner_wrapper
110
+ ),
111
+ style: image?.imageBackgroundColor ? { background: image?.imageBackgroundColor } : {},
112
+ children: /* @__PURE__ */ jsx(
113
+ OptimizeImage,
114
+ {
115
+ src: image?.src,
116
+ alt: image?.alt ?? "",
117
+ className: "img_fluid",
118
+ height: image?.height,
119
+ width: image?.width
120
+ }
121
+ )
122
+ }
123
+ ) : /* @__PURE__ */ jsx("div", { className: image_background, role: "presentation", children: /* @__PURE__ */ jsx(
124
+ OptimizeImage,
125
+ {
126
+ src: image?.src,
127
+ alt: image?.alt ?? "",
128
+ className: is_bg_img
129
+ }
130
+ ) }) }) : video && video.videoId ? /* @__PURE__ */ jsx("div", { className: image_background, role: "presentation", children: /* @__PURE__ */ jsx(
131
+ VideoTile,
132
+ {
133
+ id: "video-tile",
134
+ videoId: video.videoId,
135
+ videoPlayer: video.videoPlayer,
136
+ thumbnailImage: video.thubnailImage,
137
+ displayType: "inline",
138
+ transcript: video.transcript,
139
+ enableModal: true
140
+ }
141
+ ) }) : /* @__PURE__ */ jsx(
74
142
  "div",
75
143
  {
76
144
  className: clsx(
@@ -1,5 +1,5 @@
1
1
  import { ImageBillboardSet } from "./ImageBillboard.js";
2
- import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, body_copy, exit_intent, exit_intent_backdrop, header, imagePlacement, image_background, mh_330, modal_close_button, rate_billboard, rate_container, rate_pad, section_text_ImageBillboard, single_container, sub_bullets, supertag, three_inline, two_inline, up_to } from "./ImageBillboard.css.js";
2
+ import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, body_copy, bottom_center, bottom_left, bottom_right, center_center, center_left, center_right, exit_intent, exit_intent_backdrop, header, imagePlacement, image_background, image_based, image_inner_wrapper, is_bg_img, mh_330, modal_close_button, rate_billboard, rate_container, rate_pad, remove_padding, section_text_ImageBillboard, single_container, sub_bullets, supertag, three_inline, top_center, top_left, top_right, two_inline, up_to } from "./ImageBillboard.css.js";
3
3
  import { ImageBillboard } from "./ImageBillboardSet.js";
4
4
  export {
5
5
  ImageBillboard,
@@ -14,21 +14,34 @@ export {
14
14
  billboard_img,
15
15
  body,
16
16
  body_copy,
17
+ bottom_center,
18
+ bottom_left,
19
+ bottom_right,
20
+ center_center,
21
+ center_left,
22
+ center_right,
17
23
  exit_intent,
18
24
  exit_intent_backdrop,
19
25
  header,
20
26
  imagePlacement,
21
27
  image_background,
28
+ image_based,
29
+ image_inner_wrapper,
30
+ is_bg_img,
22
31
  mh_330,
23
32
  modal_close_button,
24
33
  rate_billboard,
25
34
  rate_container,
26
35
  rate_pad,
36
+ remove_padding,
27
37
  section_text_ImageBillboard,
28
38
  single_container,
29
39
  sub_bullets,
30
40
  supertag,
31
41
  three_inline,
42
+ top_center,
43
+ top_left,
44
+ top_right,
32
45
  two_inline,
33
46
  up_to
34
47
  };
@@ -3,7 +3,7 @@ import { Hyperlink } from "../Hyperlink/index.js";
3
3
  import "../IconBillboard/IconBillboard.css.js";
4
4
  import "../icons/ArrowIcon/ArrowIcon.css.js";
5
5
  import "../icons/CheckIcon/CheckIcon.css.js";
6
- import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/VideoTile/VideoTile.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Modal/Modal.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css */
6
+ import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/TopicalNavSet/TopicalNavSet.css';import '../assets/TopicalNavItem/TopicalNavItem.css';import '../assets/Topic/Topic.css';import '../assets/TextBlock/TextBlock.css';import '../assets/SocialMediaBar/SocialMediaBar.css';import '../assets/SecondaryFooter/SecondaryFooter.css';import '../assets/Pagination/Pagination.css';import '../assets/PageNavSet/PageNavigationSet.css';import '../assets/NavigationMenu/LaVictoire/NavBar.css';import '../assets/NavigationMenu/AxosALTS/NavBar.css';import '../assets/NavigationMenu/AxosClearing/NavBar.css';import '../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../assets/NavigationMenu/AxosBank/NavBar.css';import '../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisorServices/NavBar.css';import '../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../assets/NavigationMenu/AxosAdvisor/NavBar.css';import '../assets/Modal/Modal.css';import '../assets/Insight/Insight.css';import '../assets/Insight/Featured/Header.css';import '../assets/Insight/Featured/CategorySelector.css';import '../assets/Insight/Featured/Featured.css';import '../assets/ImageLink/ImageLink.css';import '../assets/VideoTile/VideoTile.css';import '../assets/HelpArticle/HelpArticle.css';import '../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../assets/DownloadTile/DownloadTile.css';import '../assets/CollectInformationAlert/CollectInformationAlert.css';import '../assets/CallToActionBar/CallToActionBar.css';import '../assets/AwardsItem/AwardsItem.css';import '../assets/AwardsBanner/AwardsBanner.css';import '../assets/Auth/SignIn.css';import '../assets/Auth/ErrorAlert.css';import '../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../assets/Forms/QuickPricer/UserInformation.css';import '../assets/Forms/QuickPricer/QuickPricerResults.css';import '../assets/BulletItem/BulletItem.css';import '../assets/Typography/Typography.css';import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/DownloadIcon/DownloadIcon.css';import '../assets/themes/victorie.css';import '../assets/themes/premier.css';import '../assets/themes/axos.css';/* empty css */
7
7
  /* empty css */
8
8
  /* empty css */
9
9
  /* empty css */
@@ -79,6 +79,8 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
79
79
  /* empty css */
80
80
  import { imageLinkContainer } from "../SetContainer/SetContainer.css.js";
81
81
  import "../ImageBillboard/ImageBillboard.css.js";
82
+ import "next/script.js";
83
+ /* empty css */
82
84
  /* empty css */
83
85
  /* empty css */
84
86
  /* empty css */
@@ -115,8 +117,6 @@ import "../StepItemSet/StepItemSet.css.js";
115
117
  /* empty css */
116
118
  /* empty css */
117
119
  /* empty css */
118
- import "next/script.js";
119
- /* empty css */
120
120
  /* empty css */
121
121
  import "../HeroBanner/LargeBanner.css.js";
122
122
  import "../HeroBanner/SelectionBanner.css.js";