@axos-web-dev/shared-components 1.0.13 → 1.0.15

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 (50) hide show
  1. package/dist/ATMLocator/ATMLocator.js +1 -1
  2. package/dist/Article/Article.js +1 -8
  3. package/dist/Button/Button.js +1 -1
  4. package/dist/Calculators/Calculator.js +1 -1
  5. package/dist/CallToActionBar/index.js +3 -1
  6. package/dist/Carousel/index.js +1 -1
  7. package/dist/Chevron/index.js +1 -1
  8. package/dist/Comparison/Comparison.js +1 -1
  9. package/dist/ExecutiveBio/ExecutiveBio.js +2 -9
  10. package/dist/FaqAccordion/index.js +1 -1
  11. package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +1 -1
  12. package/dist/Forms/ApplyNow.js +1 -1
  13. package/dist/Forms/ContactUsBusiness.js +1 -1
  14. package/dist/Forms/ContactUsNMLSId.js +1 -1
  15. package/dist/Forms/CraPublicFile.js +1 -1
  16. package/dist/Forms/EmailOnly.js +1 -1
  17. package/dist/Forms/MortgageRate/MortgageRateForm.js +1 -1
  18. package/dist/Forms/MortgageRate/MortgageRateWatch.js +1 -1
  19. package/dist/Forms/SuccesForm.js +1 -1
  20. package/dist/HeroBanner/HeroBanner.css.d.ts +1 -0
  21. package/dist/HeroBanner/HeroBanner.css.js +6 -4
  22. package/dist/HeroBanner/HeroBanner.js +57 -26
  23. package/dist/HeroBanner/index.js +2 -1
  24. package/dist/Hyperlink/index.js +1 -1
  25. package/dist/ImageBillboard/ImageBillboardSet.js +1 -8
  26. package/dist/ImageLink/ImageLink.js +1 -1
  27. package/dist/ImageLink/ImageLinkSet.js +1 -1
  28. package/dist/ImageLink/index.js +1 -1
  29. package/dist/Insight/Featured/CategorySelector.js +1 -1
  30. package/dist/Insight/Featured/Featured.js +1 -1
  31. package/dist/Insight/Featured/Header.js +1 -1
  32. package/dist/Modal/Modal.js +1 -1
  33. package/dist/NavigationMenu/AxosALTS/NavData.js +1 -1
  34. package/dist/NavigationMenu/AxosALTS/index.js +1 -1
  35. package/dist/NavigationMenu/AxosBank/NavData.js +1 -1
  36. package/dist/NavigationMenu/AxosBank/SubNavBar.js +12 -10
  37. package/dist/NavigationMenu/AxosBank/index.js +2 -5
  38. package/dist/NavigationMenu/LaVictoire/NavData.js +1 -1
  39. package/dist/NavigationMenu/LaVictoire/index.js +1 -1
  40. package/dist/SetContainer/SetContainer.js +1 -1
  41. package/dist/SocialMediaBar/iconsRepository.js +1 -1
  42. package/dist/StepItemSet/StepItemSet.js +1 -1
  43. package/dist/VideoWrapper/index.js +1 -1
  44. package/dist/assets/HeroBanner/HeroBanner.css +22 -22
  45. package/dist/assets/utils/optimizeImage/optimizeImage.css.css +48 -48
  46. package/dist/main.js +2 -1
  47. package/dist/utils/optimizeImage/OptimizeImage.d.ts +0 -3
  48. package/dist/utils/optimizeImage/OptimizeImage.js +14 -21
  49. package/dist/utils/optimizeImage/optimizeImage.module.js +3 -3
  50. package/package.json +1 -1
@@ -12,7 +12,6 @@ import '../assets/VideoWrapper/VideoWrapper.css';import '../assets/VideoTile/Vid
12
12
  import "clsx";
13
13
  import "react";
14
14
  import "../AlertBanner/AlertBanner.css.js";
15
- import "next/image.js";
16
15
  import "../Article/Article.css.js";
17
16
  import { Button } from "../Button/Button.js";
18
17
  import "../Button/Button.css.js";
@@ -62,6 +61,7 @@ import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
62
61
  import "../Carousel/index.js";
63
62
  /* empty css */
64
63
  import "../Comparison/Comparison.css.js";
64
+ import "next/image.js";
65
65
  import "../HeroBanner/HeroBanner.css.js";
66
66
  import "../HeroBanner/LargeBanner.css.js";
67
67
  import "../HeroBanner/SelectionBanner.css.js";
@@ -12,7 +12,6 @@ import "clsx";
12
12
  import "react";
13
13
  import "../../Chevron/Chevron.css.js";
14
14
  import "../../AlertBanner/AlertBanner.css.js";
15
- import "next/image.js";
16
15
  import "../../Article/Article.css.js";
17
16
  import "../../IconBillboard/IconBillboard.css.js";
18
17
  import { findMoreAxosDomains } from "../../utils/allowedAxosDomains.js";
@@ -63,6 +62,7 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
63
62
  import "../../Carousel/index.js";
64
63
  /* empty css */
65
64
  import "../../Comparison/Comparison.css.js";
65
+ import "next/image.js";
66
66
  import "../../HeroBanner/HeroBanner.css.js";
67
67
  import "../../HeroBanner/LargeBanner.css.js";
68
68
  import "../../HeroBanner/SelectionBanner.css.js";
@@ -13,7 +13,6 @@ import '../../assets/VideoWrapper/VideoWrapper.css';import '../../assets/VideoTi
13
13
  import { useState, useEffect } from "react";
14
14
  import "../../Chevron/Chevron.css.js";
15
15
  import "../../AlertBanner/AlertBanner.css.js";
16
- import "next/image.js";
17
16
  import "../../Article/Article.css.js";
18
17
  import "../../IconBillboard/IconBillboard.css.js";
19
18
  import { findMoreAxosDomains } from "../../utils/allowedAxosDomains.js";
@@ -64,6 +63,7 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
64
63
  import "../../Carousel/index.js";
65
64
  /* empty css */
66
65
  import "../../Comparison/Comparison.css.js";
66
+ import "next/image.js";
67
67
  import "../../HeroBanner/HeroBanner.css.js";
68
68
  import "../../HeroBanner/LargeBanner.css.js";
69
69
  import "../../HeroBanner/SelectionBanner.css.js";
@@ -12,7 +12,6 @@ import "clsx";
12
12
  import "react";
13
13
  import "../../Chevron/Chevron.css.js";
14
14
  import "../../AlertBanner/AlertBanner.css.js";
15
- import "next/image.js";
16
15
  import "../../Article/Article.css.js";
17
16
  import "../../IconBillboard/IconBillboard.css.js";
18
17
  import { findMoreAxosDomains } from "../../utils/allowedAxosDomains.js";
@@ -63,6 +62,7 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
63
62
  import "../../Carousel/index.js";
64
63
  /* empty css */
65
64
  import "../../Comparison/Comparison.css.js";
65
+ import "next/image.js";
66
66
  import "../../HeroBanner/HeroBanner.css.js";
67
67
  import "../../HeroBanner/LargeBanner.css.js";
68
68
  import "../../HeroBanner/SelectionBanner.css.js";
@@ -13,7 +13,6 @@ import "clsx";
13
13
  import { useState, useRef, useEffect } from "react";
14
14
  import "../../Chevron/Chevron.css.js";
15
15
  import "../../AlertBanner/AlertBanner.css.js";
16
- import Image from "next/image.js";
17
16
  import "../../Article/Article.css.js";
18
17
  import "../../IconBillboard/IconBillboard.css.js";
19
18
  import { findMoreAxosDomains } from "../../utils/allowedAxosDomains.js";
@@ -65,6 +64,7 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
65
64
  import "../../Carousel/index.js";
66
65
  /* empty css */
67
66
  import "../../Comparison/Comparison.css.js";
67
+ import Image from "next/image.js";
68
68
  import "../../HeroBanner/HeroBanner.css.js";
69
69
  import "../../HeroBanner/LargeBanner.css.js";
70
70
  import "../../HeroBanner/SelectionBanner.css.js";
@@ -740,7 +740,8 @@ function SubNavBar() {
740
740
  /* @__PURE__ */ jsxs("p", { className: styles.mt_8, children: [
741
741
  "Explore the benefits of our newest account bundle with up to ",
742
742
  AXOS_ONE_APY,
743
- "% APY on Savings, up to ",
743
+ "% APY on Savings, up to",
744
+ " ",
744
745
  AXOS_ONE_APY_CHECKING,
745
746
  "% on Checking, plus early paydays and no maintenance fees."
746
747
  ] })
@@ -2230,7 +2231,7 @@ function SubNavBar() {
2230
2231
  ) })
2231
2232
  ] })
2232
2233
  ] }),
2233
- process.env.SHOW_NEW_BUSINESS_ITEM == "true" && /* @__PURE__ */ jsxs("div", { className: "flex_row", children: [
2234
+ /* @__PURE__ */ jsxs("div", { className: "flex_row", children: [
2234
2235
  /* @__PURE__ */ jsx(
2235
2236
  Image,
2236
2237
  {
@@ -2249,13 +2250,7 @@ function SubNavBar() {
2249
2250
  children: "Solutions"
2250
2251
  }
2251
2252
  ) }),
2252
- /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
2253
- Link,
2254
- {
2255
- href: "/business/solutions/new-business",
2256
- children: "New Business"
2257
- }
2258
- ) })
2253
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { href: "/business/solutions/new-business", children: "New Business" }) })
2259
2254
  ] })
2260
2255
  ] }),
2261
2256
  /* @__PURE__ */ jsxs("div", { className: "flex_row", children: [
@@ -2454,6 +2449,13 @@ function SubNavBar() {
2454
2449
  href: "/commercial/banking/hedge-funds-and-alternative-funds",
2455
2450
  children: "Hedge Funds & Alternative Fund Banking Solutions"
2456
2451
  }
2452
+ ) }),
2453
+ /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
2454
+ Link,
2455
+ {
2456
+ href: "/commercial/banking/middle-market",
2457
+ children: "Middle Market"
2458
+ }
2457
2459
  ) })
2458
2460
  ] })
2459
2461
  ] }),
@@ -16,7 +16,6 @@ import '../../assets/VideoWrapper/VideoWrapper.css';import '../../assets/VideoTi
16
16
  import clsx from "clsx";
17
17
  import "../../Chevron/Chevron.css.js";
18
18
  import "../../AlertBanner/AlertBanner.css.js";
19
- import "next/image.js";
20
19
  import "../../Article/Article.css.js";
21
20
  import "../../ArticlesSet/ArticlesSet.css.js";
22
21
  import "../../IconBillboard/IconBillboard.css.js";
@@ -64,6 +63,7 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
64
63
  import "../../Carousel/index.js";
65
64
  /* empty css */
66
65
  import "../../Comparison/Comparison.css.js";
66
+ import "next/image.js";
67
67
  import "../../HeroBanner/HeroBanner.css.js";
68
68
  import "../../HeroBanner/LargeBanner.css.js";
69
69
  import "../../HeroBanner/SelectionBanner.css.js";
@@ -121,7 +121,7 @@ function NavBar({ project = "AXB" }) {
121
121
  const [isOpenSignInToggle, setisOpenSignInToggle] = useState(false);
122
122
  const [isOpenMobile, setisOpenMobile] = useState(false);
123
123
  const [activeIndex, setActiveIndex] = useState();
124
- const [lastNavItem, setLastNavItem] = useState();
124
+ const lastNavItem = navItems[navItems.length - 1];
125
125
  const ref = useRef(null);
126
126
  const toggle = () => setisOpenSignIn(!isOpenSignIn);
127
127
  const signInToggle = () => setisOpenSignInToggle(!isOpenSignInToggle);
@@ -144,9 +144,6 @@ function NavBar({ project = "AXB" }) {
144
144
  useEffect(() => {
145
145
  getActiveIndex();
146
146
  }, [activeIndex]);
147
- useEffect(() => {
148
- setLastNavItem(navItems[navItems.length - 1]);
149
- }, []);
150
147
  useClickAway(ref, (e) => {
151
148
  if (e?.target?.tagName !== "A") {
152
149
  setisOpenSignIn(false);
@@ -12,7 +12,6 @@ import "clsx";
12
12
  import "react";
13
13
  import "../../Chevron/Chevron.css.js";
14
14
  import "../../AlertBanner/AlertBanner.css.js";
15
- import "next/image.js";
16
15
  import "../../Article/Article.css.js";
17
16
  import "../../IconBillboard/IconBillboard.css.js";
18
17
  import { findMoreAxosDomains } from "../../utils/allowedAxosDomains.js";
@@ -63,6 +62,7 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
63
62
  import "../../Carousel/index.js";
64
63
  /* empty css */
65
64
  import "../../Comparison/Comparison.css.js";
65
+ import "next/image.js";
66
66
  import "../../HeroBanner/HeroBanner.css.js";
67
67
  import "../../HeroBanner/LargeBanner.css.js";
68
68
  import "../../HeroBanner/SelectionBanner.css.js";
@@ -16,7 +16,6 @@ import '../../assets/VideoWrapper/VideoWrapper.css';import '../../assets/VideoTi
16
16
  import clsx from "clsx";
17
17
  import "../../Chevron/Chevron.css.js";
18
18
  import "../../AlertBanner/AlertBanner.css.js";
19
- import "next/image.js";
20
19
  import "../../Article/Article.css.js";
21
20
  import "../../ArticlesSet/ArticlesSet.css.js";
22
21
  import "../../IconBillboard/IconBillboard.css.js";
@@ -64,6 +63,7 @@ import "../../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
64
63
  import "../../Carousel/index.js";
65
64
  /* empty css */
66
65
  import "../../Comparison/Comparison.css.js";
66
+ import "next/image.js";
67
67
  import "../../HeroBanner/HeroBanner.css.js";
68
68
  import "../../HeroBanner/LargeBanner.css.js";
69
69
  import "../../HeroBanner/SelectionBanner.css.js";
@@ -19,7 +19,6 @@ import "../Accordion/Accordion.js";
19
19
  import "../Accordion/Accordion.css.js";
20
20
  import "../AlertBanner/AlertBanner.css.js";
21
21
  import "react";
22
- import "next/image.js";
23
22
  import "../Article/Article.css.js";
24
23
  import "../ArticlesSet/ArticlesSet.css.js";
25
24
  import "../Calculators/calculator.css.js";
@@ -80,6 +79,7 @@ import "../ImageBillboard/ImageBillboard.css.js";
80
79
  /* empty css */
81
80
  /* empty css */
82
81
  /* empty css */
82
+ import "next/image.js";
83
83
  /* empty css */
84
84
  /* empty css */
85
85
  import "../LandingPageHeader/LandingPageHeader.css.js";
@@ -12,7 +12,6 @@ import "clsx";
12
12
  import "react";
13
13
  import "../Chevron/Chevron.css.js";
14
14
  import "../AlertBanner/AlertBanner.css.js";
15
- import "next/image.js";
16
15
  import "../Article/Article.css.js";
17
16
  import "../IconBillboard/IconBillboard.css.js";
18
17
  import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
@@ -63,6 +62,7 @@ import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
63
62
  import "../Carousel/index.js";
64
63
  /* empty css */
65
64
  import "../Comparison/Comparison.css.js";
65
+ import "next/image.js";
66
66
  import "../HeroBanner/HeroBanner.css.js";
67
67
  import "../HeroBanner/LargeBanner.css.js";
68
68
  import "../HeroBanner/SelectionBanner.css.js";
@@ -55,7 +55,7 @@ const StepItemSet = ({
55
55
  description && /* @__PURE__ */ jsx("div", { className: sec_subtitle, children: /* @__PURE__ */ jsx(Fragment, { children: description }) })
56
56
  ] }),
57
57
  /* @__PURE__ */ jsxs("div", { className: `push_up_32 flex ${tablet_col}`, children: [
58
- image && /* @__PURE__ */ jsx("div", { className: bs_image, role: "presentation", children: /* @__PURE__ */ jsx(OptimizeImage, { src: image?.src, alt: "", fill: true }) }),
58
+ image && /* @__PURE__ */ jsx("div", { className: bs_image, role: "presentation", children: /* @__PURE__ */ jsx(OptimizeImage, { src: image?.src, alt: "" }) }),
59
59
  /* @__PURE__ */ jsx("div", { className: steps_wrapper, children: /* @__PURE__ */ jsx("ol", { className: ol, children: stepItems?.map((step, index) => /* @__PURE__ */ jsx(
60
60
  StepItem,
61
61
  {
@@ -13,7 +13,6 @@ import clsx from "clsx";
13
13
  import "react";
14
14
  import "../Chevron/Chevron.css.js";
15
15
  import "../AlertBanner/AlertBanner.css.js";
16
- import "next/image.js";
17
16
  import "../Article/Article.css.js";
18
17
  import { header_section } from "../IconBillboard/IconBillboard.css.js";
19
18
  import "../utils/allowedAxosDomains.js";
@@ -64,6 +63,7 @@ import "../Calculators/SummitApyCalculator/BalanceAPYCalculator.css.js";
64
63
  import "../Carousel/index.js";
65
64
  /* empty css */
66
65
  import "../Comparison/Comparison.css.js";
66
+ import "next/image.js";
67
67
  import "../HeroBanner/HeroBanner.css.js";
68
68
  import "../HeroBanner/LargeBanner.css.js";
69
69
  import "../HeroBanner/SelectionBanner.css.js";
@@ -33,7 +33,7 @@
33
33
  justify-content: flex-end;
34
34
  max-width: 604px;
35
35
  }
36
- ._1ye8k3fb picture {
36
+ ._1ye8k3fc {
37
37
  display: contents;
38
38
  }
39
39
  ._1ye8k3fb img {
@@ -41,65 +41,65 @@
41
41
  max-height: 480px;
42
42
  object-fit: cover;
43
43
  }
44
- ._1ye8k3fc {
44
+ ._1ye8k3fd {
45
45
  display: block;
46
46
  font: 700 14px / 1.3 var(--main-font-family);
47
47
  margin-bottom: 2px;
48
48
  letter-spacing: .2px;
49
49
  }
50
- ._1ye8k3fd {
50
+ ._1ye8k3fe {
51
51
  background: var(--_1073cm84);
52
52
  background-clip: text;
53
53
  -webkit-text-fill-color: transparent;
54
54
  text-shadow: 0px 0px #00000000;
55
55
  }
56
- ._1ye8k3fe {
56
+ ._1ye8k3ff {
57
57
  background: var(--_1073cm8b);
58
58
  background-clip: text;
59
59
  -webkit-text-fill-color: transparent;
60
60
  text-shadow: 0px 0px #00000000;
61
61
  }
62
- ._1ye8k3ff {
62
+ ._1ye8k3fg {
63
63
  color: var(--_1073cm8k);
64
64
  }
65
- ._1ye8k3fg {
65
+ ._1ye8k3fh {
66
66
  color: var(--_1073cm8n);
67
67
  }
68
- ._1ye8k3fh {
68
+ ._1ye8k3fi {
69
69
  font: 600 2.5rem / 1.25 var(--header-font-family);
70
70
  }
71
- ._1ye8k3fi {
71
+ ._1ye8k3fj {
72
72
  background: var(--_1073cm84);
73
73
  background-clip: text;
74
74
  -webkit-text-fill-color: transparent;
75
75
  text-shadow: 0px 0px #00000000;
76
76
  }
77
- ._1ye8k3fj {
77
+ ._1ye8k3fk {
78
78
  background: var(--_1073cm8b);
79
79
  background-clip: text;
80
80
  -webkit-text-fill-color: transparent;
81
81
  text-shadow: 0px 0px #00000000;
82
82
  }
83
- ._1ye8k3fk {
83
+ ._1ye8k3fl {
84
84
  color: var(--_1073cm8h);
85
85
  }
86
- ._1ye8k3fl {
86
+ ._1ye8k3fm {
87
87
  color: var(--_1073cm8o);
88
88
  }
89
89
  ._1ye8k3f9 p {
90
90
  font: 400 18px / 1.44 var(--main-font-family);
91
91
  letter-spacing: .2px;
92
92
  }
93
- ._1ye8k3fm {
93
+ ._1ye8k3fn {
94
94
  margin-top: 3.5rem;
95
95
  display: flex;
96
96
  align-items: center;
97
97
  gap: 2rem;
98
98
  }
99
- ._1ye8k3fm:empty {
99
+ ._1ye8k3fn:empty {
100
100
  display: none;
101
101
  }
102
- ._1ye8k3fn {
102
+ ._1ye8k3fo {
103
103
  margin-right: 15px;
104
104
  margin-top: 24px;
105
105
  }
@@ -123,13 +123,13 @@
123
123
  }
124
124
  }
125
125
  @media screen and (max-width:1280px) {
126
- ._1ye8k3fm {
126
+ ._1ye8k3fn {
127
127
  margin-top: 2.5rem;
128
128
  }
129
- ._1ye8k3f0 ._1ye8k3fm {
129
+ ._1ye8k3f0 ._1ye8k3fn {
130
130
  flex-direction: column;
131
131
  }
132
- ._7etqoq5 ._1ye8k3fm {
132
+ ._7etqoq5 ._1ye8k3fn {
133
133
  flex-direction: row;
134
134
  justify-content: center;
135
135
  flex-wrap: wrap;
@@ -142,7 +142,7 @@
142
142
  ._1ye8k3fb img {
143
143
  aspect-ratio: 1 / 1;
144
144
  }
145
- ._1ye8k3f0 ._1ye8k3fm {
145
+ ._1ye8k3f0 ._1ye8k3fn {
146
146
  align-items: flex-start;
147
147
  }
148
148
  }
@@ -153,10 +153,10 @@
153
153
  ._1ye8k3f9 {
154
154
  text-align: center;
155
155
  }
156
- ._1ye8k3fm {
156
+ ._1ye8k3fn {
157
157
  flex-direction: column;
158
158
  }
159
- ._1ye8k3fn {
159
+ ._1ye8k3fo {
160
160
  margin: 24px auto 0 auto;
161
161
  }
162
162
  }
@@ -204,7 +204,7 @@
204
204
  }
205
205
  }
206
206
  @media screen and (max-width:768px) {
207
- ._1ye8k3fh {
207
+ ._1ye8k3fi {
208
208
  font-size: 28px;
209
209
  line-height: 1.29;
210
210
  }
@@ -212,7 +212,7 @@
212
212
  font-size: 1rem;
213
213
  line-height: 1.5;
214
214
  }
215
- ._1ye8k3fm {
215
+ ._1ye8k3fn {
216
216
  margin-top: 1.7rem;
217
217
  }
218
218
  }
@@ -1,48 +1,48 @@
1
- @keyframes _shimmer_1vfu4_1 {
2
- from {
3
- transform: translateX(-100%);
4
- }
5
- to {
6
- transform: translateX(100%);
7
- }
8
- }
9
-
10
- ._loader_1vfu4_19 {
11
- position: absolute;
12
- height: 100%;
13
- width: 100%;
14
- inset: 0;
15
- }
16
-
17
- ._loading_1vfu4_33 {
18
- position: relative;
19
- width: 100%;
20
- height: 100%;
21
- overflow: hidden;
22
- background: #1e3860;
23
- }
24
-
25
- ._1es6o1h0 ._loading_1vfu4_33 {
26
- background-color: #1e262f;
27
- }
28
-
29
- .fl2fv50 ._loading_1vfu4_33 {
30
- background-color: #28587d;
31
- }
32
-
33
- ._loading_1vfu4_33::before {
34
- content: "";
35
- position: absolute;
36
- top: 0;
37
- left: 0;
38
- width: 190%;
39
- height: 100%;
40
- background: linear-gradient(
41
- 65deg,
42
- rgba(255, 255, 255, 0) 20%,
43
- rgba(255, 255, 255, 0.5) 50%,
44
- rgba(255, 255, 255, 0) 80%
45
- );
46
- animation: _shimmer_1vfu4_1 1.3s infinite linear;
47
- z-index: 1;
48
- }
1
+ @keyframes _shimmer_ib32l_1 {
2
+ from {
3
+ transform: translateX(-100%);
4
+ }
5
+ to {
6
+ transform: translateX(100%);
7
+ }
8
+ }
9
+
10
+ ._loader_ib32l_10 {
11
+ position: absolute;
12
+ height: 100%;
13
+ width: 100%;
14
+ inset: 0;
15
+ }
16
+
17
+ ._loading_ib32l_17 {
18
+ position: relative;
19
+ width: 100%;
20
+ height: 100%;
21
+ overflow: hidden;
22
+ background: #1e3860;
23
+ }
24
+
25
+ ._1es6o1h0 ._loading_ib32l_17 {
26
+ background-color: #1e262f;
27
+ }
28
+
29
+ .fl2fv50 ._loading_ib32l_17 {
30
+ background-color: #28587d;
31
+ }
32
+
33
+ ._loading_ib32l_17::before {
34
+ content: "";
35
+ position: absolute;
36
+ top: 0;
37
+ left: 0;
38
+ width: 190%;
39
+ height: 100%;
40
+ background: linear-gradient(
41
+ 65deg,
42
+ rgba(255, 255, 255, 0) 20%,
43
+ rgba(255, 255, 255, 0.5) 50%,
44
+ rgba(255, 255, 255, 0) 80%
45
+ );
46
+ animation: _shimmer_ib32l_1 1.3s infinite linear;
47
+ z-index: 1;
48
+ }
package/dist/main.js CHANGED
@@ -82,7 +82,7 @@ import { SuccesFormWrapper } from "./Forms/SuccesForm.js";
82
82
  import { VendorQuestionnaire } from "./Forms/VendorQuestionnaire.js";
83
83
  import { WCPLSurvey } from "./Forms/WcplSurvey.js";
84
84
  import { HeroBanner } from "./HeroBanner/HeroBanner.js";
85
- import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_embedded_image, hero_img, hero_text, hero_wrapper, logout, reversed, reversed_lg_image } from "./HeroBanner/HeroBanner.css.js";
85
+ import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_embedded_image, hero_img, hero_text, hero_wrapper, img_contents, logout, reversed, reversed_lg_image } from "./HeroBanner/HeroBanner.css.js";
86
86
  import { selection_headline_text, selection_section, selection_section_bg, selection_section_content, selection_section_icon, selection_section_icon_img } from "./HeroBanner/SelectionBanner.css.js";
87
87
  import { Hyperlink } from "./Hyperlink/index.js";
88
88
  import { Icon, IconBillboard } from "./IconBillboard/IconBillboard.js";
@@ -515,6 +515,7 @@ export {
515
515
  imagePlacement,
516
516
  image_background,
517
517
  img_area,
518
+ img_contents,
518
519
  inline_container,
519
520
  input,
520
521
  insight_header,
@@ -6,9 +6,6 @@ export interface OptimizeImageProps {
6
6
  height?: number;
7
7
  width?: number;
8
8
  className?: string;
9
- priority?: boolean;
10
- fill?: boolean;
11
- unoptimized?: boolean;
12
9
  rootMargin?: string;
13
10
  }
14
11
  export declare const OptimizeImage: FC<OptimizeImageProps>;
@@ -1,22 +1,19 @@
1
1
  "use client";
2
2
  import { jsxs, jsx } from "react/jsx-runtime";
3
- import { useState, useEffect } from "react";
3
+ import { useRef, useState, useEffect } from "react";
4
4
  import css from "./optimizeImage.module.js";
5
- import Image from "next/image.js";
6
5
  const OptimizeImage = ({
7
6
  src,
8
7
  alt = "",
9
8
  height,
10
9
  width,
11
10
  className,
12
- priority = false,
13
- fill = false,
14
- unoptimized = true,
15
- rootMargin = "550px"
11
+ rootMargin = "500px"
16
12
  }) => {
17
- const [isVisible, setIsVisible] = useState(priority);
13
+ const imgRef = useRef(null);
14
+ const [isVisible, setIsVisible] = useState(false);
18
15
  useEffect(() => {
19
- if (priority) return;
16
+ if (!imgRef.current) return;
20
17
  const observer = new IntersectionObserver(
21
18
  ([entry]) => {
22
19
  if (entry.isIntersecting) {
@@ -26,27 +23,23 @@ const OptimizeImage = ({
26
23
  },
27
24
  { rootMargin }
28
25
  );
29
- const imgElement = document.getElementById(src);
30
- if (imgElement) observer.observe(imgElement);
26
+ observer.observe(imgRef.current);
31
27
  return () => observer.disconnect();
32
- }, [src, priority, rootMargin]);
28
+ }, [rootMargin]);
33
29
  return isVisible ? /* @__PURE__ */ jsxs("picture", { children: [
34
- /* @__PURE__ */ jsx("source", { srcSet: `https:${src}?fm=avif`, type: "image/avif" }),
35
- /* @__PURE__ */ jsx("source", { srcSet: `https:${src}?fm=webp`, type: "image/webp" }),
30
+ /* @__PURE__ */ jsx("source", { srcSet: `${src}?fm=avif`, type: "image/avif" }),
31
+ /* @__PURE__ */ jsx("source", { srcSet: `${src}?fm=webp`, type: "image/webp" }),
36
32
  /* @__PURE__ */ jsx(
37
- Image,
33
+ "img",
38
34
  {
39
- src: `https:${src}`,
35
+ src,
40
36
  alt,
41
37
  className,
42
- width: fill ? void 0 : width,
43
- height: fill ? void 0 : height,
44
- fill,
45
- priority,
46
- unoptimized
38
+ width,
39
+ height
47
40
  }
48
41
  )
49
- ] }) : /* @__PURE__ */ jsx("div", { className: css.loader, children: /* @__PURE__ */ jsx("div", { id: src, className: css.loading, style: { width, height } }) });
42
+ ] }) : /* @__PURE__ */ jsx("div", { className: css.loader, children: /* @__PURE__ */ jsx("div", { ref: imgRef, className: css.loading, style: { width, height } }) });
50
43
  };
51
44
  export {
52
45
  OptimizeImage
@@ -1,6 +1,6 @@
1
- import '../../assets/utils/optimizeImage/optimizeImage.css.css';const loader = "_loader_1vfu4_19";
2
- const loading = "_loading_1vfu4_33";
3
- const shimmer = "_shimmer_1vfu4_1";
1
+ import '../../assets/utils/optimizeImage/optimizeImage.css.css';const loader = "_loader_ib32l_10";
2
+ const loading = "_loading_ib32l_17";
3
+ const shimmer = "_shimmer_ib32l_1";
4
4
  const css = {
5
5
  loader,
6
6
  loading,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@axos-web-dev/shared-components",
3
3
  "description": "Axos shared components library for web.",
4
- "version": "1.0.13",
4
+ "version": "1.0.15",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",