@axos-web-dev/shared-components 0.0.60 → 0.0.61

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/Carousel/index.js +4 -1
  2. package/dist/Chevron/index.js +4 -1
  3. package/dist/ContentBanner/ContentBanner.css.d.ts +7 -2
  4. package/dist/ContentBanner/ContentBanner.css.js +10 -6
  5. package/dist/ContentBanner/ContentBanner.interface.d.ts +7 -3
  6. package/dist/ContentBanner/index.js +8 -3
  7. package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +4 -1
  8. package/dist/Forms/ContactUsBusiness.js +4 -1
  9. package/dist/Forms/EmailOnly.js +4 -1
  10. package/dist/Forms/RenderForm.js +4 -1
  11. package/dist/Forms/SuccesForm.js +4 -1
  12. package/dist/Hyperlink/index.js +4 -1
  13. package/dist/ImageLink/ImageLink.js +4 -1
  14. package/dist/ImageLink/ImageLinkSet.js +4 -1
  15. package/dist/ImageLink/index.js +4 -1
  16. package/dist/Modal/Modal.js +4 -1
  17. package/dist/SetContainer/SetContainer.js +4 -1
  18. package/dist/StepItem/StepItem.css.d.ts +99 -0
  19. package/dist/StepItem/StepItem.css.js +21 -0
  20. package/dist/StepItem/StepItem.d.ts +10 -0
  21. package/dist/{StepItems/StepItems.js → StepItem/StepItem.js} +9 -9
  22. package/dist/StepItem/index.d.ts +2 -0
  23. package/dist/StepItem/index.js +12 -0
  24. package/dist/StepItemSet/StepItemSet.css.d.ts +61 -0
  25. package/dist/StepItemSet/StepItemSet.css.js +30 -0
  26. package/dist/StepItemSet/StepItemSet.d.ts +17 -0
  27. package/dist/{StepItems/StepItemsSet.js → StepItemSet/StepItemSet.js} +20 -25
  28. package/dist/StepItemSet/index.d.ts +2 -0
  29. package/dist/StepItemSet/index.js +17 -0
  30. package/dist/TopicalNavItem/TopicalNavItem.css.d.ts +5 -0
  31. package/dist/TopicalNavItem/TopicalNavItem.css.js +13 -0
  32. package/dist/TopicalNavItem/TopicalNavItem.d.ts +10 -0
  33. package/dist/TopicalNavItem/TopicalNavItem.js +46 -0
  34. package/dist/TopicalNavItem/index.d.ts +2 -0
  35. package/dist/TopicalNavItem/index.js +10 -0
  36. package/dist/TopicalNavSet/TopicalNavSet.css.d.ts +3 -0
  37. package/dist/TopicalNavSet/TopicalNavSet.css.js +9 -0
  38. package/dist/TopicalNavSet/TopicalNavSet.d.ts +8 -0
  39. package/dist/TopicalNavSet/TopicalNavSet.js +21 -0
  40. package/dist/TopicalNavSet/index.d.ts +2 -0
  41. package/dist/TopicalNavSet/index.js +8 -0
  42. package/dist/assets/AwardsBanner/AwardsBanner.css +3 -0
  43. package/dist/assets/AwardsItem/AwardsItem.css +9 -3
  44. package/dist/assets/ContentBanner/ContentBanner.css +33 -11
  45. package/dist/assets/StepItem/StepItem.css +144 -0
  46. package/dist/assets/StepItemSet/StepItemSet.css +119 -0
  47. package/dist/assets/TopicalNavItem/TopicalNavItem.css +102 -0
  48. package/dist/assets/TopicalNavSet/TopicalNavSet.css +21 -0
  49. package/dist/main.d.ts +4 -1
  50. package/dist/main.js +20 -5
  51. package/package.json +1 -1
  52. package/dist/StepItems/StepItems.css.d.ts +0 -132
  53. package/dist/StepItems/StepItems.css.js +0 -45
  54. package/dist/StepItems/StepItems.d.ts +0 -3
  55. package/dist/StepItems/StepItems.interface.d.ts +0 -21
  56. package/dist/StepItems/StepItems.interface.js +0 -1
  57. package/dist/StepItems/StepItemsSet.d.ts +0 -3
  58. package/dist/StepItems/index.d.ts +0 -4
  59. package/dist/StepItems/index.js +0 -26
  60. package/dist/assets/StepItems/StepItems.css +0 -249
@@ -58,9 +58,12 @@ import "../Chevron/Chevron.css.js";
58
58
  /* empty css */
59
59
  /* empty css */
60
60
  /* empty css */
61
- import "../StepItems/StepItems.css.js";
61
+ import "../StepItem/StepItem.css.js";
62
+ import "../StepItemSet/StepItemSet.css.js";
62
63
  import "../Table/Table.css.js";
63
64
  /* empty css */
65
+ /* empty css */
66
+ /* empty css */
64
67
  import "next/script.js";
65
68
  /* empty css */
66
69
  /* empty css */
@@ -58,9 +58,12 @@ import { chevron_wrapper, chevron } from "./Chevron.css.js";
58
58
  /* empty css */
59
59
  /* empty css */
60
60
  /* empty css */
61
- import "../StepItems/StepItems.css.js";
61
+ import "../StepItem/StepItem.css.js";
62
+ import "../StepItemSet/StepItemSet.css.js";
62
63
  import "../Table/Table.css.js";
63
64
  /* empty css */
65
+ /* empty css */
66
+ /* empty css */
64
67
  import "next/script.js";
65
68
  /* empty css */
66
69
  /* empty css */
@@ -18,7 +18,7 @@ export declare const content_banner: import('@vanilla-extract/recipes').RuntimeF
18
18
  };
19
19
  };
20
20
  }>;
21
- export declare const headline: import('@vanilla-extract/recipes').RuntimeFn<{
21
+ export declare const cb_eyebrow: import('@vanilla-extract/recipes').RuntimeFn<{
22
22
  variant: {
23
23
  primary: {
24
24
  background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -27,7 +27,10 @@ export declare const headline: import('@vanilla-extract/recipes').RuntimeFn<{
27
27
  textShadow: "0px 0px #00000000";
28
28
  };
29
29
  secondary: {
30
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
+ backgroundClip: "text";
32
+ WebkitTextFillColor: "transparent";
33
+ textShadow: "0px 0px #00000000";
31
34
  };
32
35
  tertiary: {
33
36
  color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -37,7 +40,9 @@ export declare const headline: import('@vanilla-extract/recipes').RuntimeFn<{
37
40
  };
38
41
  };
39
42
  }>;
43
+ export declare const push_down_24: string;
40
44
  export declare const section_pad: string;
45
+ export declare const section_min_pad: string;
41
46
  export declare const body_copy: string;
42
47
  export declare const call_to_action_row: string;
43
48
  export declare const link: string;
@@ -4,16 +4,20 @@
4
4
  /* empty css */
5
5
  import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
6
6
  var content_banner = createRuntimeFn({ defaultClassName: "_1bwl51g0", variantClassNames: { variant: { primary: "_1bwl51g1", secondary: "_1bwl51g2", tertiary: "_1bwl51g3", quaternary: "_1bwl51g4" } }, defaultVariants: {}, compoundVariants: [] });
7
- var headline = createRuntimeFn({ defaultClassName: "_1bwl51g5", variantClassNames: { variant: { primary: "_1bwl51g6", secondary: "_1bwl51g7", tertiary: "_1bwl51g8", quaternary: "_1bwl51g9" } }, defaultVariants: {}, compoundVariants: [] });
8
- var section_pad = "_1bwl51ga";
9
- var body_copy = "_1bwl51gb";
10
- var call_to_action_row = "_1bwl51gc";
11
- var link = "_1bwl51gd";
7
+ var cb_eyebrow = createRuntimeFn({ defaultClassName: "_1bwl51g5", variantClassNames: { variant: { primary: "_1bwl51g6", secondary: "_1bwl51g7", tertiary: "_1bwl51g8", quaternary: "_1bwl51g9" } }, defaultVariants: {}, compoundVariants: [] });
8
+ var push_down_24 = "_1bwl51ga";
9
+ var section_pad = "_1bwl51gb";
10
+ var section_min_pad = "_1bwl51gc";
11
+ var body_copy = "_1bwl51gd";
12
+ var call_to_action_row = "_1bwl51ge";
13
+ var link = "_1bwl51gf";
12
14
  export {
13
15
  body_copy,
14
16
  call_to_action_row,
17
+ cb_eyebrow,
15
18
  content_banner,
16
- headline,
17
19
  link,
20
+ push_down_24,
21
+ section_min_pad,
18
22
  section_pad
19
23
  };
@@ -1,11 +1,15 @@
1
1
  import { ChevronProps } from '../Chevron/Chevron.interface';
2
2
  import { ReactNode } from 'react';
3
+ import { ImageInterface } from '../IconBillboard';
3
4
 
4
5
  export interface HeroBannerInterface {
5
6
  id?: string;
6
7
  className?: string;
7
- variant: string;
8
- headline: string | ReactNode;
9
- bodyCopy: string | ReactNode;
8
+ variant?: string;
9
+ icon?: ImageInterface;
10
+ eyebrow?: string | ReactNode;
11
+ headline?: string | ReactNode;
12
+ bodyCopy?: string | ReactNode;
10
13
  callToActionRow?: boolean | ChevronProps[];
14
+ bannerSize?: string;
11
15
  }
@@ -6,12 +6,15 @@ import { Button } from "../Button/Button.js";
6
6
  import "../Button/Button.css.js";
7
7
  import "react";
8
8
  import "react-use";
9
- import { content_banner, section_pad, body_copy, call_to_action_row, link } from "./ContentBanner.css.js";
9
+ import { content_banner, section_pad, section_min_pad, push_down_24, cb_eyebrow, body_copy, call_to_action_row, link } from "./ContentBanner.css.js";
10
10
  const ContentBanner = ({
11
11
  variant,
12
+ icon,
13
+ eyebrow,
12
14
  headline,
13
15
  bodyCopy,
14
16
  callToActionRow,
17
+ bannerSize,
15
18
  id
16
19
  }) => {
17
20
  const banner_variant = getVariant(variant);
@@ -19,9 +22,11 @@ const ContentBanner = ({
19
22
  "section",
20
23
  {
21
24
  id: `id_${id}`,
22
- className: `${content_banner({ variant: banner_variant })} ${section_pad}`,
25
+ className: `${content_banner({ variant: banner_variant })} ${bannerSize == "Large" ? section_pad : section_min_pad}`,
23
26
  children: /* @__PURE__ */ jsxs("div", { className: `containment`, children: [
24
27
  /* @__PURE__ */ jsxs("div", { className: `text_center`, children: [
28
+ icon && /* @__PURE__ */ jsx("div", { className: `${push_down_24} flex center`, role: "presentation", children: /* @__PURE__ */ jsx("img", { src: icon.src, alt: "" }) }),
29
+ eyebrow && /* @__PURE__ */ jsx("span", { className: cb_eyebrow({ variant: banner_variant }), children: eyebrow }),
25
30
  /* @__PURE__ */ jsx(
26
31
  "h1",
27
32
  {
@@ -29,7 +34,7 @@ const ContentBanner = ({
29
34
  children: headline
30
35
  }
31
36
  ),
32
- bodyCopy ? /* @__PURE__ */ jsx("div", { className: `${body_copy}`, children: bodyCopy }) : null
37
+ bodyCopy && /* @__PURE__ */ jsx("div", { className: `${body_copy}`, children: bodyCopy })
33
38
  ] }),
34
39
  Array.isArray(callToActionRow) && callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: `${call_to_action_row}`, children: callToActionRow?.map(
35
40
  ({ id: id2, variant: variant2, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
@@ -55,9 +55,12 @@ import "../../LandingPageHeader/LandingPageHeader.css.js";
55
55
  /* empty css */
56
56
  /* empty css */
57
57
  /* empty css */
58
- import "../../StepItems/StepItems.css.js";
58
+ import "../../StepItem/StepItem.css.js";
59
+ import "../../StepItemSet/StepItemSet.css.js";
59
60
  import "../../Table/Table.css.js";
60
61
  /* empty css */
62
+ /* empty css */
63
+ /* empty css */
61
64
  import "next/script.js";
62
65
  /* empty css */
63
66
  /* empty css */
@@ -60,9 +60,12 @@ import "../Modal/contextApi/store.js";
60
60
  /* empty css */
61
61
  /* empty css */
62
62
  /* empty css */
63
- import "../StepItems/StepItems.css.js";
63
+ import "../StepItem/StepItem.css.js";
64
+ import "../StepItemSet/StepItemSet.css.js";
64
65
  import "../Table/Table.css.js";
65
66
  /* empty css */
67
+ /* empty css */
68
+ /* empty css */
66
69
  import "next/script.js";
67
70
  /* empty css */
68
71
  /* empty css */
@@ -61,9 +61,12 @@ import "../Modal/contextApi/store.js";
61
61
  /* empty css */
62
62
  /* empty css */
63
63
  /* empty css */
64
- import "../StepItems/StepItems.css.js";
64
+ import "../StepItem/StepItem.css.js";
65
+ import "../StepItemSet/StepItemSet.css.js";
65
66
  import "../Table/Table.css.js";
66
67
  /* empty css */
68
+ /* empty css */
69
+ /* empty css */
67
70
  import "next/script.js";
68
71
  /* empty css */
69
72
  /* empty css */
@@ -54,9 +54,12 @@ import "../LandingPageHeader/LandingPageHeader.css.js";
54
54
  /* empty css */
55
55
  /* empty css */
56
56
  /* empty css */
57
- import "../StepItems/StepItems.css.js";
57
+ import "../StepItem/StepItem.css.js";
58
+ import "../StepItemSet/StepItemSet.css.js";
58
59
  import "../Table/Table.css.js";
59
60
  /* empty css */
61
+ /* empty css */
62
+ /* empty css */
60
63
  import "next/script.js";
61
64
  /* empty css */
62
65
  /* empty css */
@@ -55,9 +55,12 @@ import "../LandingPageHeader/LandingPageHeader.css.js";
55
55
  /* empty css */
56
56
  /* empty css */
57
57
  /* empty css */
58
- import "../StepItems/StepItems.css.js";
58
+ import "../StepItem/StepItem.css.js";
59
+ import "../StepItemSet/StepItemSet.css.js";
59
60
  import "../Table/Table.css.js";
60
61
  /* empty css */
62
+ /* empty css */
63
+ /* empty css */
61
64
  import "next/script.js";
62
65
  /* empty css */
63
66
  /* empty css */
@@ -57,9 +57,12 @@ import "../LandingPageHeader/LandingPageHeader.css.js";
57
57
  /* empty css */
58
58
  /* empty css */
59
59
  /* empty css */
60
- import "../StepItems/StepItems.css.js";
60
+ import "../StepItem/StepItem.css.js";
61
+ import "../StepItemSet/StepItemSet.css.js";
61
62
  import "../Table/Table.css.js";
62
63
  /* empty css */
64
+ /* empty css */
65
+ /* empty css */
63
66
  import "next/script.js";
64
67
  /* empty css */
65
68
  /* empty css */
@@ -55,9 +55,12 @@ import "../Chevron/Chevron.css.js";
55
55
  /* empty css */
56
56
  /* empty css */
57
57
  /* empty css */
58
- import "../StepItems/StepItems.css.js";
58
+ import "../StepItem/StepItem.css.js";
59
+ import "../StepItemSet/StepItemSet.css.js";
59
60
  import "../Table/Table.css.js";
60
61
  /* empty css */
62
+ /* empty css */
63
+ /* empty css */
61
64
  import "next/script.js";
62
65
  /* empty css */
63
66
  /* empty css */
@@ -59,9 +59,12 @@ import "../Modal/contextApi/store.js";
59
59
  /* empty css */
60
60
  /* empty css */
61
61
  /* empty css */
62
- import "../StepItems/StepItems.css.js";
62
+ import "../StepItem/StepItem.css.js";
63
+ import "../StepItemSet/StepItemSet.css.js";
63
64
  import "../Table/Table.css.js";
64
65
  /* empty css */
66
+ /* empty css */
67
+ /* empty css */
65
68
  import "next/script.js";
66
69
  /* empty css */
67
70
  /* empty css */
@@ -55,9 +55,12 @@ import "../LandingPageHeader/LandingPageHeader.css.js";
55
55
  /* empty css */
56
56
  /* empty css */
57
57
  /* empty css */
58
- import "../StepItems/StepItems.css.js";
58
+ import "../StepItem/StepItem.css.js";
59
+ import "../StepItemSet/StepItemSet.css.js";
59
60
  import "../Table/Table.css.js";
60
61
  /* empty css */
62
+ /* empty css */
63
+ /* empty css */
61
64
  import "next/script.js";
62
65
  /* empty css */
63
66
  /* empty css */
@@ -54,9 +54,12 @@ import "./contextApi/store.js";
54
54
  /* empty css */
55
55
  /* empty css */
56
56
  /* empty css */
57
- import "../StepItems/StepItems.css.js";
57
+ import "../StepItem/StepItem.css.js";
58
+ import "../StepItemSet/StepItemSet.css.js";
58
59
  import "../Table/Table.css.js";
59
60
  /* empty css */
61
+ /* empty css */
62
+ /* empty css */
60
63
  import "next/script.js";
61
64
  /* empty css */
62
65
  /* empty css */
@@ -55,9 +55,12 @@ import "../Chevron/Chevron.css.js";
55
55
  /* empty css */
56
56
  /* empty css */
57
57
  /* empty css */
58
- import "../StepItems/StepItems.css.js";
58
+ import "../StepItem/StepItem.css.js";
59
+ import "../StepItemSet/StepItemSet.css.js";
59
60
  import "../Table/Table.css.js";
60
61
  /* empty css */
62
+ /* empty css */
63
+ /* empty css */
61
64
  import "next/script.js";
62
65
  /* empty css */
63
66
  /* empty css */
@@ -0,0 +1,99 @@
1
+ export declare const li: string;
2
+ export declare const line_points: import('@vanilla-extract/recipes').RuntimeFn<{
3
+ variant: {
4
+ primary: {
5
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6
+ };
7
+ secondary: {
8
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9
+ };
10
+ tertiary: {
11
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
12
+ };
13
+ quaternary: {
14
+ borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
15
+ };
16
+ };
17
+ }>;
18
+ export declare const point: import('@vanilla-extract/recipes').RuntimeFn<{
19
+ variant: {
20
+ primary: {
21
+ selectors: {
22
+ [x: string]: {
23
+ borderColor: "#4D85B0";
24
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
25
+ } | {
26
+ borderColor: "#4A5560";
27
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
+ };
29
+ };
30
+ };
31
+ secondary: {
32
+ selectors: {
33
+ [x: string]: {
34
+ borderColor: "#4D85B0";
35
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
36
+ } | {
37
+ borderColor: "#4A5560";
38
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
39
+ };
40
+ };
41
+ };
42
+ tertiary: {
43
+ selectors: {
44
+ [x: string]: {
45
+ borderColor: "#FAA74A";
46
+ background: "#1E3860";
47
+ } | {
48
+ borderColor: "#FAA74A";
49
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
50
+ };
51
+ };
52
+ };
53
+ quaternary: {
54
+ selectors: {
55
+ [x: string]: {
56
+ borderColor: "#FAA74A";
57
+ background: "#1E3860";
58
+ } | {
59
+ borderColor: "#FAA74A";
60
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
+ };
62
+ };
63
+ };
64
+ };
65
+ }>;
66
+ export declare const step_num: import('@vanilla-extract/recipes').RuntimeFn<{
67
+ variant: {
68
+ primary: {
69
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
70
+ };
71
+ secondary: {
72
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
73
+ };
74
+ tertiary: {
75
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
76
+ };
77
+ quaternary: {
78
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
79
+ };
80
+ };
81
+ }>;
82
+ export declare const bullet_details: string;
83
+ export declare const bs_topic: import('@vanilla-extract/recipes').RuntimeFn<{
84
+ variant: {
85
+ primary: {
86
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
87
+ };
88
+ secondary: {
89
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
90
+ };
91
+ tertiary: {
92
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
93
+ };
94
+ quaternary: {
95
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
96
+ };
97
+ };
98
+ }>;
99
+ export declare const bs_copy: string;
@@ -0,0 +1,21 @@
1
+ /* empty css */
2
+ /* empty css */
3
+ /* empty css */
4
+ /* empty css */
5
+ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
6
+ var li = "_1y8r7dk0";
7
+ var line_points = createRuntimeFn({ defaultClassName: "_1y8r7dk1", variantClassNames: { variant: { primary: "_1y8r7dk2", secondary: "_1y8r7dk3", tertiary: "_1y8r7dk4", quaternary: "_1y8r7dk5" } }, defaultVariants: {}, compoundVariants: [] });
8
+ var point = createRuntimeFn({ defaultClassName: "_1y8r7dk6", variantClassNames: { variant: { primary: "_1y8r7dk7", secondary: "_1y8r7dk8", tertiary: "_1y8r7dk9", quaternary: "_1y8r7dka" } }, defaultVariants: {}, compoundVariants: [] });
9
+ var step_num = createRuntimeFn({ defaultClassName: "_1y8r7dkb", variantClassNames: { variant: { primary: "_1y8r7dkc", secondary: "_1y8r7dkd", tertiary: "_1y8r7dke", quaternary: "_1y8r7dkf" } }, defaultVariants: {}, compoundVariants: [] });
10
+ var bullet_details = "_1y8r7dkg";
11
+ var bs_topic = createRuntimeFn({ defaultClassName: "_1y8r7dkh", variantClassNames: { variant: { primary: "_1y8r7dki", secondary: "_1y8r7dkj", tertiary: "_1y8r7dkk", quaternary: "_1y8r7dkl" } }, defaultVariants: {}, compoundVariants: [] });
12
+ var bs_copy = "_1y8r7dkm";
13
+ export {
14
+ bs_copy,
15
+ bs_topic,
16
+ bullet_details,
17
+ li,
18
+ line_points,
19
+ point,
20
+ step_num
21
+ };
@@ -0,0 +1,10 @@
1
+ import { QuaternaryTypes } from '../utils/variant.types';
2
+ import { ReactNode, FC } from 'react';
3
+
4
+ export interface StepItemProps {
5
+ id: string;
6
+ title?: string | ReactNode;
7
+ description?: string | ReactNode;
8
+ variant?: QuaternaryTypes;
9
+ }
10
+ export declare const StepItem: FC<StepItemProps>;
@@ -1,25 +1,25 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
1
+ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
2
  import { getVariant } from "../utils/getVariant.js";
3
- import { li, line_points, point, step_num, bullet_details, bs_topic, bs_copy } from "./StepItems.css.js";
4
- const StepItems = ({
3
+ import { li, line_points, point, step_num, bullet_details, bs_topic, bs_copy } from "./StepItem.css.js";
4
+ const StepItem = ({
5
5
  id,
6
- variant: fullVariant = "primary",
7
6
  title,
8
- description
7
+ description,
8
+ variant: fullVariant = "primary"
9
9
  }) => {
10
10
  const variant = getVariant(fullVariant);
11
11
  let counter = 0;
12
- return /* @__PURE__ */ jsxs("li", { className: `flex ${li}`, children: [
12
+ return /* @__PURE__ */ jsxs("li", { className: `flex ${li}`, id: `id_${id}`, children: [
13
13
  /* @__PURE__ */ jsx("div", { className: `${line_points({ variant })}`, children: /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
14
14
  /* @__PURE__ */ jsx("div", { className: `${point({ variant })}`, children: " " }),
15
15
  /* @__PURE__ */ jsx("div", { className: `flex center middle ${step_num({ variant })}`, children: ++counter })
16
16
  ] }) }),
17
17
  /* @__PURE__ */ jsxs("div", { className: bullet_details, children: [
18
18
  /* @__PURE__ */ jsx("span", { className: `${bs_topic({ variant })}`, role: "heading", children: title }),
19
- /* @__PURE__ */ jsx("span", { className: bs_copy, children: description })
19
+ /* @__PURE__ */ jsx("span", { className: bs_copy, children: /* @__PURE__ */ jsx(Fragment, { children: description }) })
20
20
  ] })
21
- ] }, id);
21
+ ] });
22
22
  };
23
23
  export {
24
- StepItems
24
+ StepItem
25
25
  };
@@ -0,0 +1,2 @@
1
+ export * from './StepItem.tsx';
2
+ export * from './StepItem.css.ts';
@@ -0,0 +1,12 @@
1
+ import { StepItem } from "./StepItem.js";
2
+ import { bs_copy, bs_topic, bullet_details, li, line_points, point, step_num } from "./StepItem.css.js";
3
+ export {
4
+ StepItem,
5
+ bs_copy,
6
+ bs_topic,
7
+ bullet_details,
8
+ li,
9
+ line_points,
10
+ point,
11
+ step_num
12
+ };
@@ -0,0 +1,61 @@
1
+ export declare const bs_section: import('@vanilla-extract/recipes').RuntimeFn<{
2
+ variant: {
3
+ primary: {
4
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
5
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6
+ };
7
+ secondary: {
8
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
9
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
10
+ };
11
+ tertiary: {
12
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
13
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
14
+ };
15
+ quaternary: {
16
+ background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
17
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
18
+ };
19
+ };
20
+ }>;
21
+ export declare const bs_wrapper: string;
22
+ export declare const svg_logo: string;
23
+ export declare const modifier: import('@vanilla-extract/recipes').RuntimeFn<{
24
+ variant: {
25
+ primary: {
26
+ fill: "#1E3860";
27
+ };
28
+ secondary: {
29
+ fill: "#1E3860";
30
+ };
31
+ tertiary: {
32
+ fill: "#FFF";
33
+ };
34
+ quaternary: {
35
+ fill: "#FFF";
36
+ };
37
+ };
38
+ }>;
39
+ export declare const sec_title: import('@vanilla-extract/recipes').RuntimeFn<{
40
+ variant: {
41
+ primary: {
42
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
43
+ };
44
+ secondary: {
45
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
46
+ };
47
+ tertiary: {
48
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
49
+ };
50
+ quaternary: {
51
+ color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
52
+ };
53
+ };
54
+ }>;
55
+ export declare const sec_subtitle: string;
56
+ export declare const tablet_col: string;
57
+ export declare const bs_image: string;
58
+ export declare const steps_wrapper: string;
59
+ export declare const ol: string;
60
+ export declare const bs_btns: string;
61
+ export declare const bs_add_details: string;
@@ -0,0 +1,30 @@
1
+ /* empty css */
2
+ /* empty css */
3
+ /* empty css */
4
+ import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
5
+ var bs_section = createRuntimeFn({ defaultClassName: "_18par6f0", variantClassNames: { variant: { primary: "_18par6f1", secondary: "_18par6f2", tertiary: "_18par6f3", quaternary: "_18par6f4" } }, defaultVariants: {}, compoundVariants: [] });
6
+ var bs_wrapper = "_18par6f5";
7
+ var svg_logo = "_18par6f6";
8
+ var modifier = createRuntimeFn({ defaultClassName: "_18par6f7", variantClassNames: { variant: { primary: "_18par6f8", secondary: "_18par6f9", tertiary: "_18par6fa", quaternary: "_18par6fb" } }, defaultVariants: {}, compoundVariants: [] });
9
+ var sec_title = createRuntimeFn({ defaultClassName: "_18par6fc", variantClassNames: { variant: { primary: "_18par6fd", secondary: "_18par6fe", tertiary: "_18par6ff", quaternary: "_18par6fg" } }, defaultVariants: {}, compoundVariants: [] });
10
+ var sec_subtitle = "_18par6fh";
11
+ var tablet_col = "_18par6fi";
12
+ var bs_image = "_18par6fj";
13
+ var steps_wrapper = "_18par6fk";
14
+ var ol = "_18par6fl";
15
+ var bs_btns = "_18par6fm";
16
+ var bs_add_details = "_18par6fn";
17
+ export {
18
+ bs_add_details,
19
+ bs_btns,
20
+ bs_image,
21
+ bs_section,
22
+ bs_wrapper,
23
+ modifier,
24
+ ol,
25
+ sec_subtitle,
26
+ sec_title,
27
+ steps_wrapper,
28
+ svg_logo,
29
+ tablet_col
30
+ };
@@ -0,0 +1,17 @@
1
+ import { ChevronProps } from '../Chevron/Chevron.interface';
2
+ import { ImageInterface } from '../IconBillboard';
3
+ import { QuaternaryTypes } from '../utils/variant.types';
4
+ import { FC, ReactNode } from 'react';
5
+ import { StepItemProps } from '../StepItem';
6
+
7
+ export interface StepItemSetProps {
8
+ id: string;
9
+ variant?: QuaternaryTypes;
10
+ title?: string | ReactNode;
11
+ description?: string | ReactNode;
12
+ image?: ImageInterface;
13
+ stepItems?: StepItemProps[];
14
+ callToActionRow?: boolean | ChevronProps[];
15
+ additionalDetails?: string | ReactNode;
16
+ }
17
+ export declare const StepItemSet: FC<StepItemSetProps>;