@axos-web-dev/shared-components 0.0.11 → 0.0.12

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 (60) hide show
  1. package/dist/ApyCalculator/index.js +3 -2
  2. package/dist/Button/Button.d.ts +24 -0
  3. package/dist/Button/Button.js +31 -0
  4. package/dist/Button/GoBackButton.d.ts +3 -0
  5. package/dist/Button/GoBackButton.js +15 -0
  6. package/dist/Button/index.d.ts +3 -21
  7. package/dist/Button/index.js +5 -20
  8. package/dist/CallToActionBar/index.js +30 -36
  9. package/dist/CollectInformationAlert/index.js +4 -1
  10. package/dist/ContentBanner/index.js +4 -1
  11. package/dist/Forms/ScheduleCall.d.ts +2 -1
  12. package/dist/Forms/ScheduleCall.js +9 -11
  13. package/dist/HeroBanner/index.js +4 -1
  14. package/dist/IconBillboard/IconBillboard.d.ts +3 -1
  15. package/dist/IconBillboard/IconBillboard.interface.d.ts +2 -0
  16. package/dist/IconBillboard/IconBillboard.js +49 -34
  17. package/dist/IconBillboard/IconBillboardSet.js +50 -56
  18. package/dist/ImageBillboard/ImageBillboard.css.d.ts +1 -0
  19. package/dist/ImageBillboard/ImageBillboard.interface.d.ts +3 -0
  20. package/dist/ImageBillboard/ImageBillboard.js +4 -1
  21. package/dist/ImageBillboard/ImageBillboardSet.d.ts +1 -1
  22. package/dist/ImageBillboard/ImageBillboardSet.js +12 -3
  23. package/dist/Input/Input.css.js +5 -0
  24. package/dist/MainHTML/index.d.ts +1 -1
  25. package/dist/Modal/index.js +4 -2
  26. package/dist/NavigationMenu/AxosAdvisor/NavBar.css.d.ts +1 -0
  27. package/dist/NavigationMenu/AxosAdvisor/NavBar.css.js +7 -0
  28. package/dist/NavigationMenu/AxosAdvisor/NavBar.module.js +52 -52
  29. package/dist/NavigationMenu/AxosAdvisor/NavData.d.ts +4 -0
  30. package/dist/NavigationMenu/AxosAdvisor/NavData.js +10 -0
  31. package/dist/NavigationMenu/AxosAdvisor/SubNavBar.js +46 -30
  32. package/dist/NavigationMenu/AxosAdvisor/SubNavbar.css.d.ts +4 -0
  33. package/dist/NavigationMenu/AxosAdvisor/SubNavbar.css.js +13 -0
  34. package/dist/NavigationMenu/AxosAdvisor/index.js +184 -142
  35. package/dist/NavigationMenu/AxosFiduciary/index.js +12 -6
  36. package/dist/SetContainer/SetContainer.js +1 -0
  37. package/dist/Table/Table.css.d.ts +19 -6
  38. package/dist/Table/Table.css.js +5 -1
  39. package/dist/Table/Table.d.ts +3 -3
  40. package/dist/Table/Table.interface.d.ts +2 -0
  41. package/dist/Table/Table.js +8 -5
  42. package/dist/Table/index.js +3 -1
  43. package/dist/VideoTile/VideoTile.js +2 -2
  44. package/dist/assets/CallToActionBar/CallToActionBar.css +19 -8
  45. package/dist/assets/ContentBanner/ContentBanner.css +2 -0
  46. package/dist/assets/Forms/Forms.css +7 -5
  47. package/dist/assets/IconBillboard/IconBillboard.css +8 -2
  48. package/dist/assets/ImageBillboard/ImageBillboard.css +29 -0
  49. package/dist/assets/Input/Input.css +5 -1
  50. package/dist/assets/NavigationMenu/AxosAdvisor/NavBar.css +5 -0
  51. package/dist/assets/NavigationMenu/AxosAdvisor/NavBar.css.css +125 -122
  52. package/dist/assets/NavigationMenu/AxosAdvisor/SubNavbar.css +17 -0
  53. package/dist/assets/SetContainer/SetContainer.css +6 -1
  54. package/dist/assets/Table/Table.css +61 -21
  55. package/dist/assets/VideoTile/VideoTile.css +1 -0
  56. package/dist/assets/globals.css +0 -3
  57. package/dist/main.js +8 -2
  58. package/package.json +1 -1
  59. package/dist/NavigationMenu/AxosFiduciary/MobileToggle.d.ts +0 -2
  60. package/dist/NavigationMenu/AxosFiduciary/MobileToggle.js +0 -120
@@ -1,9 +1,10 @@
1
1
  "use client";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
- import { Button } from "../Button/index.js";
3
+ import { Button } from "../Button/Button.js";
4
4
  import { button } from "../Button/Button.css.js";
5
- import { Chevron } from "../Chevron/index.js";
6
5
  import { useState, useCallback, useEffect } from "react";
6
+ import "react-use";
7
+ import { Chevron } from "../Chevron/index.js";
7
8
  import { vars } from "../themes/axos.css.js";
8
9
  /* empty css */
9
10
  /* empty css */
@@ -0,0 +1,24 @@
1
+ import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
2
+ import { ButtonVariants } from "./Button.css";
3
+ export type ButtonBase = {
4
+ children?: ReactNode;
5
+ targetUrl?: string;
6
+ id?: string;
7
+ action?: () => void;
8
+ className?: string;
9
+ newTab?: boolean;
10
+ };
11
+ export type ButtonAsButton = ButtonBase & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBase> & {
12
+ as?: "button";
13
+ };
14
+ export type ButtonAsLink = ButtonBase & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBase> & {
15
+ as?: "a";
16
+ };
17
+ export type ButtonProps = ButtonAsButton | ButtonAsLink;
18
+ export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, newTab, action, className, }: ButtonProps & ButtonVariants) => import("react").DetailedReactHTMLElement<{
19
+ className: string;
20
+ href: string | undefined;
21
+ id: string | undefined;
22
+ target: string;
23
+ onClick: (() => void) | undefined;
24
+ }, HTMLElement>;
@@ -0,0 +1,31 @@
1
+ import clsx from "clsx";
2
+ import { createElement } from "react";
3
+ import { button } from "./Button.css.js";
4
+ const Button = ({
5
+ as = "a",
6
+ children,
7
+ color = "primary",
8
+ size = "large",
9
+ disabled,
10
+ rounded = "medium",
11
+ targetUrl,
12
+ id,
13
+ newTab = false,
14
+ action,
15
+ className
16
+ }) => {
17
+ return createElement(
18
+ as,
19
+ {
20
+ className: clsx(button({ color, size, disabled, rounded }), className),
21
+ href: targetUrl,
22
+ id,
23
+ target: newTab ? "_blank" : "_self",
24
+ onClick: action
25
+ },
26
+ children
27
+ );
28
+ };
29
+ export {
30
+ Button
31
+ };
@@ -0,0 +1,3 @@
1
+ import { ButtonProps } from "./Button";
2
+ import { ButtonVariants } from "./Button.css";
3
+ export declare const GoBackButton: (props: ButtonProps & ButtonVariants) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,15 @@
1
+ "use client";
2
+ import { jsx } from "react/jsx-runtime";
3
+ import { useState } from "react";
4
+ import { useMount } from "react-use";
5
+ import { Button } from "./Button.js";
6
+ const GoBackButton = (props) => {
7
+ const [previusUrl, setPreviusUrl] = useState("");
8
+ useMount(() => {
9
+ setPreviusUrl(document == null ? void 0 : document.referrer);
10
+ });
11
+ return /* @__PURE__ */ jsx(Button, { as: "a", targetUrl: previusUrl, children: props.children });
12
+ };
13
+ export {
14
+ GoBackButton
15
+ };
@@ -1,21 +1,3 @@
1
- import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
2
- import { ButtonVariants } from "./Button.css";
3
- export type ButtonBase = {
4
- children?: ReactNode;
5
- targetUrl?: string;
6
- id?: string;
7
- action?: () => void;
8
- };
9
- export type ButtonAsButton = ButtonBase & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBase> & {
10
- as?: "button";
11
- };
12
- export type ButtonAsLink = ButtonBase & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBase> & {
13
- as?: "a";
14
- };
15
- export type ButtonProps = ButtonAsButton | ButtonAsLink;
16
- export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, action, }: ButtonProps & ButtonVariants) => import("react").DetailedReactHTMLElement<{
17
- className: string;
18
- href: string | undefined;
19
- id: string | undefined;
20
- onClick: (() => void) | undefined;
21
- }, HTMLElement>;
1
+ export * from "./Button";
2
+ export * from "./Button.css";
3
+ export * from "./GoBackButton";
@@ -1,23 +1,8 @@
1
- import { createElement } from "react";
1
+ import { Button } from "./Button.js";
2
2
  import { button } from "./Button.css.js";
3
- const Button = ({
4
- as = "a",
5
- children,
6
- color,
7
- size = "large",
8
- disabled,
9
- rounded = "medium",
10
- targetUrl,
11
- id,
12
- action
13
- }) => {
14
- const className = button({ color, size, disabled, rounded });
15
- return createElement(
16
- as,
17
- { className, href: targetUrl, id, onClick: action },
18
- children
19
- );
20
- };
3
+ import { GoBackButton } from "./GoBackButton.js";
21
4
  export {
22
- Button
5
+ Button,
6
+ GoBackButton,
7
+ button
23
8
  };
@@ -1,10 +1,12 @@
1
1
  "use client";
2
2
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
3
- import { Button } from "../Button/index.js";
3
+ import { Button } from "../Button/Button.js";
4
+ import "../Button/Button.css.js";
5
+ import { useState, useEffect } from "react";
6
+ import "react-use";
4
7
  import { Chevron } from "../Chevron/index.js";
5
8
  import { getVariant } from "../utils/getVariant.js";
6
9
  import clsx from "clsx";
7
- import { useState, useEffect } from "react";
8
10
  import { returnImageDimensions, imageOrientation, getBannerSizeClassName } from "../utils/ctaOptions.js";
9
11
  import { sticky_banner, is_sticky, cta, cta_image_section, cta_image_overlap, cta_body_section, cta_text, ctas_section } from "./CallToActionBar.css.js";
10
12
  const CallToActionBar = ({
@@ -80,8 +82,11 @@ const CallToActionBar = ({
80
82
  /* @__PURE__ */ jsxs(
81
83
  "div",
82
84
  {
83
- className: `${cta_body_section} ${banner_size !== "large" ? "flex middle" : ""}`,
84
- style: row_reverse ? { flexDirection: "row-reverse" } : {},
85
+ className: clsx(
86
+ cta_body_section,
87
+ banner_size !== "large" ? "flex middle" : "",
88
+ row_reverse ? "reversed" : ""
89
+ ),
85
90
  children: [
86
91
  /* @__PURE__ */ jsxs(
87
92
  "div",
@@ -97,38 +102,27 @@ const CallToActionBar = ({
97
102
  ]
98
103
  }
99
104
  ),
100
- /* @__PURE__ */ jsx(
101
- "div",
102
- {
103
- className: clsx(ctas_section, "flex", "text_center"),
104
- style: banner_size === "small" ? {
105
- flexShrink: 0,
106
- marginRight: `${row_reverse ? "40px" : "20px"}`,
107
- padding: 0
108
- } : {},
109
- children: callToActionRow.map(
110
- ({ id: id2, variant, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
111
- Button,
112
- {
113
- targetUrl,
114
- color: getVariant(variant),
115
- size: "medium",
116
- rounded: "medium",
117
- children: displayText
118
- },
119
- id2
120
- ) : /* @__PURE__ */ jsx(
121
- Chevron,
122
- {
123
- targetUrl,
124
- variant: getVariant(variant),
125
- children: displayText
126
- },
127
- id2
128
- )
129
- )
130
- }
131
- )
105
+ /* @__PURE__ */ jsx("div", { className: clsx(ctas_section, "flex", "text_center"), children: callToActionRow.map(
106
+ ({ id: id2, variant, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
107
+ Button,
108
+ {
109
+ targetUrl,
110
+ color: getVariant(variant),
111
+ size: "medium",
112
+ rounded: "medium",
113
+ children: displayText
114
+ },
115
+ id2
116
+ ) : /* @__PURE__ */ jsx(
117
+ Chevron,
118
+ {
119
+ targetUrl,
120
+ variant: getVariant(variant),
121
+ children: displayText
122
+ },
123
+ id2
124
+ )
125
+ ) })
132
126
  ]
133
127
  }
134
128
  )
@@ -1,5 +1,8 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
- import { Button } from "../Button/index.js";
2
+ import { Button } from "../Button/Button.js";
3
+ import "../Button/Button.css.js";
4
+ import "react";
5
+ import "react-use";
3
6
  import { Hyperlink } from "../Hyperlink/index.js";
4
7
  import "../icons/CheckIcon/CheckIcon.css.js";
5
8
  import SvgCloseIcon from "../icons/CloseIcon/index.js";
@@ -2,7 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { Chevron } from "../Chevron/index.js";
3
3
  import { headline_text } from "../HeroBanner/HeroBanner.css.js";
4
4
  import { getVariant } from "../utils/getVariant.js";
5
- import { Button } from "../Button/index.js";
5
+ import { Button } from "../Button/Button.js";
6
+ import "../Button/Button.css.js";
7
+ import "react";
8
+ import "react-use";
6
9
  import { content_banner, section_pad, body_copy, call_to_action_row, link } from "./ContentBanner.css.js";
7
10
  const ContentBanner = ({
8
11
  variant,
@@ -2,6 +2,7 @@ import { ChevronProps } from '../Chevron/Chevron.interface';
2
2
  import { QuaternaryTypes } from '../utils/variant.types';
3
3
  import { PropsWithChildren, ReactNode } from "react";
4
4
  export interface FormProps extends PropsWithChildren {
5
+ id?: string;
5
6
  onSubmit?: (values: {
6
7
  [index: string]: string;
7
8
  }) => void;
@@ -12,4 +13,4 @@ export interface FormProps extends PropsWithChildren {
12
13
  validateEmail: (email: string) => Promise<boolean>;
13
14
  callToAction: Omit<ChevronProps, "targetUrl">;
14
15
  }
15
- export declare const ScheduleCall: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, callToAction, validateEmail, }: FormProps) => import("react/jsx-runtime").JSX.Element;
16
+ export declare const ScheduleCall: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,10 @@
1
1
  "use client";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { zodResolver } from "@hookform/resolvers/zod";
4
- import { Button } from "../Button/index.js";
4
+ import { Button } from "../Button/Button.js";
5
+ import "../Button/Button.css.js";
6
+ import "react";
7
+ import "react-use";
5
8
  import { Input } from "../Input/index.js";
6
9
  import SvgAxosX from "../icons/AxosX/index.js";
7
10
  import "../icons/CheckIcon/CheckIcon.css.js";
@@ -25,7 +28,8 @@ const ScheduleCall = ({
25
28
  variant: fullVariant = "primary",
26
29
  headline,
27
30
  callToAction,
28
- validateEmail
31
+ validateEmail,
32
+ id
29
33
  }) => {
30
34
  var _a, _b, _c, _d;
31
35
  const schema = z.object({
@@ -52,15 +56,9 @@ const ScheduleCall = ({
52
56
  await onSubmit(data);
53
57
  };
54
58
  const variant = getVariant(fullVariant);
55
- return /* @__PURE__ */ jsx("section", { className: clsx(formContainer({ variant })), children: /* @__PURE__ */ jsx("section", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
59
+ return /* @__PURE__ */ jsx("section", { className: clsx(formContainer({ variant })), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
56
60
  icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: /* @__PURE__ */ jsx(SvgAxosX, {}) }),
57
- /* @__PURE__ */ jsx(
58
- "div",
59
- {
60
- className: clsx("header_2 text_center", headerForm({ variant })),
61
- children: headline
62
- }
63
- ),
61
+ /* @__PURE__ */ jsx("div", { className: clsx("header_2 text_center", headerForm({ variant })), children: headline }),
64
62
  /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(submitForm), children: [
65
63
  /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
66
64
  /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
@@ -134,7 +132,7 @@ const ScheduleCall = ({
134
132
  }
135
133
  ) })
136
134
  ] })
137
- ] }) }) });
135
+ ] }) }, id);
138
136
  };
139
137
  export {
140
138
  ScheduleCall
@@ -1,5 +1,8 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { Button } from "../Button/index.js";
2
+ import { Button } from "../Button/Button.js";
3
+ import "../Button/Button.css.js";
4
+ import "react";
5
+ import "react-use";
3
6
  import { Chevron } from "../Chevron/index.js";
4
7
  import { getVariant } from "../utils/getVariant.js";
5
8
  import { logout, hero_banner, hero_content, reversed, hero_text, supertag, headline_text, hero_btns, hero_img } from "./HeroBanner.css.js";
@@ -1,8 +1,9 @@
1
1
  import { ChevronProps } from '../Chevron/Chevron.interface';
2
2
  import { ReactNode } from "react";
3
+ import { ImageInterface } from ".";
3
4
  import { ContainerVariants, LayoutVariants } from "./IconBillboard.css";
4
5
  export interface FocusProps {
5
- icon?: ReactNode;
6
+ icon?: ImageInterface;
6
7
  headline?: ReactNode | undefined;
7
8
  body?: ReactNode | undefined;
8
9
  items?: {
@@ -10,5 +11,6 @@ export interface FocusProps {
10
11
  content: ReactNode;
11
12
  }[];
12
13
  callToActionRow?: ChevronProps[];
14
+ set?: boolean;
13
15
  }
14
16
  export declare const IconBillboard: (props: FocusProps & ContainerVariants & LayoutVariants) => import("react/jsx-runtime").JSX.Element;
@@ -10,6 +10,7 @@ export interface IconBillboardSet {
10
10
  iconBillboards: IconBillboardProps[];
11
11
  additionalDetails: ReactNode | string;
12
12
  side: boolean;
13
+ set?: boolean;
13
14
  }
14
15
  export interface IconBillboardProps {
15
16
  id?: string;
@@ -18,6 +19,7 @@ export interface IconBillboardProps {
18
19
  bodyCopy?: ReactNode | undefined;
19
20
  bullets: BulletItemProps[];
20
21
  callToActionRow: ChevronProps[];
22
+ set?: boolean;
21
23
  }
22
24
  export interface ImageInterface {
23
25
  src: string;
@@ -3,7 +3,10 @@ import { BulletItem } from "../BulletItem/BulletItem.js";
3
3
  import { Chevron } from "../Chevron/index.js";
4
4
  import { getVariant } from "../utils/getVariant.js";
5
5
  import clsx from "clsx";
6
- import { Button } from "../Button/index.js";
6
+ import { Button } from "../Button/Button.js";
7
+ import "../Button/Button.css.js";
8
+ import "react";
9
+ import "react-use";
7
10
  import { containerIconBillboard, layout, billboard_icon, content, headerIconBillboard, title, list, buttons } from "./IconBillboard.css.js";
8
11
  const IconBillboard = (props) => {
9
12
  const {
@@ -12,42 +15,54 @@ const IconBillboard = (props) => {
12
15
  side = false,
13
16
  items,
14
17
  headline,
15
- body
18
+ body,
19
+ icon,
20
+ set
16
21
  } = props;
17
22
  const variant = getVariant(fullVariant);
18
- return /* @__PURE__ */ jsxs("div", { className: clsx(containerIconBillboard({ variant }), "containment"), children: [
19
- /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
20
- /* @__PURE__ */ jsx("div", { className: billboard_icon, children: props.icon }),
21
- /* @__PURE__ */ jsxs("div", { className: content, children: [
22
- /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
23
- /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline }),
24
- /* @__PURE__ */ jsx("div", { children: body })
23
+ return /* @__PURE__ */ jsxs(
24
+ "div",
25
+ {
26
+ className: clsx(
27
+ containerIconBillboard({ variant }),
28
+ "billboard",
29
+ `${set ? "" : "containment"}`
30
+ ),
31
+ children: [
32
+ /* @__PURE__ */ jsxs("div", { className: `middle ${layout({ side })}`, children: [
33
+ icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, children: /* @__PURE__ */ jsx("img", { src: icon == null ? void 0 : icon.src, className: "img_fluid", alt: icon == null ? void 0 : icon.alt }) }),
34
+ /* @__PURE__ */ jsxs("div", { className: content, children: [
35
+ /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
36
+ /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline }),
37
+ /* @__PURE__ */ jsx("div", { children: body })
38
+ ] }),
39
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: items == null ? void 0 : items.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.content }, item.id)) }) })
40
+ ] })
25
41
  ] }),
26
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: items == null ? void 0 : items.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.content }, item.id)) }) })
27
- ] })
28
- ] }),
29
- callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
30
- ({ id, variant: variant2, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
31
- Button,
32
- {
33
- targetUrl,
34
- color: getVariant(variant2),
35
- size: "medium",
36
- rounded: "medium",
37
- children: displayText
38
- },
39
- id
40
- ) : /* @__PURE__ */ jsx(
41
- Chevron,
42
- {
43
- targetUrl,
44
- variant: getVariant(variant2),
45
- children: displayText
46
- },
47
- id
48
- )
49
- ) })
50
- ] });
42
+ callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
43
+ ({ id, variant: variant2, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
44
+ Button,
45
+ {
46
+ targetUrl,
47
+ color: getVariant(variant2),
48
+ size: "medium",
49
+ rounded: "medium",
50
+ children: displayText
51
+ },
52
+ id
53
+ ) : /* @__PURE__ */ jsx(
54
+ Chevron,
55
+ {
56
+ targetUrl,
57
+ variant: getVariant(variant2),
58
+ children: displayText
59
+ },
60
+ id
61
+ )
62
+ ) })
63
+ ]
64
+ }
65
+ );
51
66
  };
52
67
  export {
53
68
  IconBillboard
@@ -2,7 +2,10 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
2
  import { BulletItem } from "../BulletItem/BulletItem.js";
3
3
  import { Chevron } from "../Chevron/index.js";
4
4
  import { getVariant } from "../utils/getVariant.js";
5
- import { Button } from "../Button/index.js";
5
+ import { Button } from "../Button/Button.js";
6
+ import "../Button/Button.css.js";
7
+ import "react";
8
+ import "react-use";
6
9
  import { section_text, header_section, section_container, containerIconBillboard, layout, billboard_icon, content, headerIconBillboard, title, list, buttons } from "./IconBillboard.css.js";
7
10
  const IconBillboardSet = ({
8
11
  variant,
@@ -13,7 +16,7 @@ const IconBillboardSet = ({
13
16
  additionalDetails
14
17
  }) => {
15
18
  const billboard_variant = getVariant(variant);
16
- return /* @__PURE__ */ jsxs("section", { className: "containment section_spacer", children: [
19
+ return /* @__PURE__ */ jsxs("section", { className: "containment section_spacer billboard", children: [
17
20
  (headline || bodyCopy) && /* @__PURE__ */ jsxs("div", { className: section_text, children: [
18
21
  headline && /* @__PURE__ */ jsx(
19
22
  "h2",
@@ -25,61 +28,52 @@ const IconBillboardSet = ({
25
28
  bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
26
29
  ] }),
27
30
  /* @__PURE__ */ jsx("div", { className: section_container, children: iconBillboards.map(
28
- ({ id, icon, headline: headline2, bodyCopy: bodyCopy2, bullets, callToActionRow }) => /* @__PURE__ */ jsxs(
29
- "div",
30
- {
31
- className: containerIconBillboard({
32
- variant: getVariant(variant)
33
- }),
34
- children: [
35
- /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
36
- icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, children: /* @__PURE__ */ jsx(
37
- "img",
38
- {
39
- src: icon == null ? void 0 : icon.src,
40
- className: "img_fluid",
41
- alt: icon == null ? void 0 : icon.alt
42
- }
43
- ) }),
44
- /* @__PURE__ */ jsxs("div", { className: content, children: [
45
- /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
46
- /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline2 }),
47
- /* @__PURE__ */ jsx("div", { children: bodyCopy2 })
48
- ] }),
49
- /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: bullets.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.copy }, item.id)) }) })
50
- ] })
31
+ ({ id, icon, headline: headline2, bodyCopy: bodyCopy2, bullets, callToActionRow }) => /* @__PURE__ */ jsxs("div", { className: containerIconBillboard({ variant }), children: [
32
+ /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
33
+ icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, children: /* @__PURE__ */ jsx(
34
+ "img",
35
+ {
36
+ src: icon == null ? void 0 : icon.src,
37
+ className: "img_fluid",
38
+ alt: icon == null ? void 0 : icon.alt
39
+ }
40
+ ) }),
41
+ /* @__PURE__ */ jsxs("div", { className: content, children: [
42
+ /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
43
+ /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline2 }),
44
+ /* @__PURE__ */ jsx("div", { children: bodyCopy2 })
51
45
  ] }),
52
- callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
53
- ({
54
- id: id2,
55
- variant: variant2,
56
- displayText,
57
- targetUrl,
58
- type
59
- }) => type === "Button" ? /* @__PURE__ */ jsx(
60
- Button,
61
- {
62
- targetUrl,
63
- color: getVariant(variant2),
64
- size: "medium",
65
- rounded: "medium",
66
- children: displayText
67
- },
68
- id2
69
- ) : /* @__PURE__ */ jsx(
70
- Chevron,
71
- {
72
- targetUrl,
73
- variant: getVariant(variant2),
74
- children: displayText
75
- },
76
- id2
77
- )
78
- ) })
79
- ]
80
- },
81
- id
82
- )
46
+ /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: bullets.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.copy }, item.id)) }) })
47
+ ] })
48
+ ] }),
49
+ callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
50
+ ({
51
+ id: id2,
52
+ variant: variant2,
53
+ displayText,
54
+ targetUrl,
55
+ type
56
+ }) => type === "Button" ? /* @__PURE__ */ jsx(
57
+ Button,
58
+ {
59
+ targetUrl,
60
+ color: getVariant(variant2),
61
+ size: "medium",
62
+ rounded: "medium",
63
+ children: displayText
64
+ },
65
+ id2
66
+ ) : /* @__PURE__ */ jsx(
67
+ Chevron,
68
+ {
69
+ targetUrl,
70
+ variant: getVariant(variant2),
71
+ children: displayText
72
+ },
73
+ id2
74
+ )
75
+ ) })
76
+ ] }, id)
83
77
  ) }),
84
78
  additionalDetails && /* @__PURE__ */ jsx("div", { className: section_text, children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) })
85
79
  ] });
@@ -31,6 +31,7 @@ export declare const imagePlacement: import("@vanilla-extract/recipes").RuntimeF
31
31
  selectors: {
32
32
  [x: string]: {
33
33
  flexDirection: "column-reverse";
34
+ justifyContent: "space-between";
34
35
  };
35
36
  };
36
37
  };
@@ -10,6 +10,8 @@ export interface ImageBillboardSetProps {
10
10
  imageBillboards: ImageBillboardInterface[];
11
11
  additionalDetails?: string | ReactNode;
12
12
  variant: QuaternaryTypes;
13
+ set?: boolean;
14
+ bordered?: boolean;
13
15
  }
14
16
  export interface ImageBillboardInterface {
15
17
  id: string;
@@ -23,4 +25,5 @@ export interface ImageBillboardInterface {
23
25
  bullets: BulletItemProps[];
24
26
  image: ImageInterface;
25
27
  callToActionRow: ChevronProps[];
28
+ set?: boolean;
26
29
  }
@@ -6,7 +6,10 @@ import SvgCheckIcon from "../icons/CheckIcon/index.js";
6
6
  /* empty css */
7
7
  import { getVariant } from "../utils/getVariant.js";
8
8
  import clsx from "clsx";
9
- import { Button } from "../Button/index.js";
9
+ import { Button } from "../Button/Button.js";
10
+ import "../Button/Button.css.js";
11
+ import "react";
12
+ import "react-use";
10
13
  import { inline_container } from "../SetContainer/SetContainer.css.js";
11
14
  import { section_text_ImageBillboard, header, billboard, billboard_container, billboard_img, body, billboard_body, billboard_header_section, supertag, billboard_ctas } from "./ImageBillboard.css.js";
12
15
  const ImageBillboardSet = ({
@@ -1,2 +1,2 @@
1
1
  import { ImageBillboardInterface } from "./ImageBillboard.interface";
2
- export declare const ImageBillboard: ({ id, variant, headline, bodyCopy, bordered, bullets, callToActionRow, eyebrow, image, imagePlacement: position, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const ImageBillboard: ({ id, variant, headline, bodyCopy, bordered, bullets, callToActionRow, eyebrow, image, imagePlacement: position, set, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element;