@axos-web-dev/shared-components 0.0.159 → 0.0.160

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 (36) hide show
  1. package/dist/ATMLocator/ATMLocator.js +1 -0
  2. package/dist/Blockquote/Blockquote.module.js +3 -3
  3. package/dist/Button/Button.js +1 -0
  4. package/dist/Calculators/Calculator.js +1 -0
  5. package/dist/Carousel/index.js +1 -0
  6. package/dist/Chevron/index.js +1 -0
  7. package/dist/Comparison/Comparison.js +1 -0
  8. package/dist/FaqAccordion/index.js +1 -0
  9. package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js +1 -0
  10. package/dist/Forms/ContactUsBusiness.js +1 -0
  11. package/dist/Forms/ContactUsNMLSId.js +1 -0
  12. package/dist/Forms/EmailOnly.js +1 -0
  13. package/dist/Forms/MortgageRate/MortgageRateForm.js +1 -0
  14. package/dist/Forms/MortgageRate/MortgageRateWatch.js +1 -0
  15. package/dist/Forms/SuccesForm.js +1 -0
  16. package/dist/Hyperlink/index.js +1 -0
  17. package/dist/ImageLink/ImageLink.js +1 -0
  18. package/dist/ImageLink/ImageLinkSet.js +1 -0
  19. package/dist/ImageLink/index.js +1 -0
  20. package/dist/Insight/Featured/CategorySelector.js +2 -1
  21. package/dist/Insight/Featured/Featured.js +3 -2
  22. package/dist/Insight/Featured/Header.js +1 -0
  23. package/dist/Modal/Modal.js +1 -0
  24. package/dist/NavigationMenu/AxosBank/NavData.js +1 -0
  25. package/dist/NavigationMenu/AxosBank/SubNavBar.js +2 -1
  26. package/dist/NavigationMenu/AxosBank/index.js +1 -0
  27. package/dist/PageNavItem/PageNavItem.d.ts +0 -1
  28. package/dist/PageNavItem/PageNavItem.js +2 -3
  29. package/dist/PageNavSet/PageNavSet.js +70 -32
  30. package/dist/PageNavSet/PageNavigationSet.css.d.ts +0 -1
  31. package/dist/PageNavSet/PageNavigationSet.css.js +1 -3
  32. package/dist/SetContainer/SetContainer.js +1 -0
  33. package/dist/assets/Blockquote/Blockquote.css.css +68 -68
  34. package/dist/assets/PageNavItem/PageNavItem.css +6 -1
  35. package/dist/assets/PageNavSet/PageNavigationSet.css +25 -23
  36. package/package.json +131 -131
@@ -72,6 +72,7 @@ import "../Inputs/Input.css.js";
72
72
  /* empty css */
73
73
  import "../ImageBillboard/ImageBillboard.css.js";
74
74
  /* empty css */
75
+ import "react-wrap-balancer";
75
76
  /* empty css */
76
77
  /* empty css */
77
78
  /* empty css */
@@ -1,6 +1,6 @@
1
- const quote_spacer = "_quote_spacer_1mzku_1";
2
- const author = "_author_1mzku_7";
3
- const quote = "_quote_1mzku_1";
1
+ const quote_spacer = "_quote_spacer_1r8g1_1";
2
+ const author = "_author_1r8g1_13";
3
+ const quote = "_quote_1r8g1_1";
4
4
  const css = {
5
5
  quote_spacer,
6
6
  author,
@@ -75,6 +75,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
75
75
  /* empty css */
76
76
  import "../ImageBillboard/ImageBillboard.css.js";
77
77
  /* empty css */
78
+ import "react-wrap-balancer";
78
79
  /* empty css */
79
80
  /* empty css */
80
81
  /* empty css */
@@ -61,6 +61,7 @@ import "../Input/InputAmount.js";
61
61
  import "../Input/InputPhone.js";
62
62
  import "../Input/InputTextArea.js";
63
63
  import "../Input/DownPaymentInput.js";
64
+ import "react-wrap-balancer";
64
65
  /* empty css */
65
66
  /* empty css */
66
67
  /* empty css */
@@ -77,6 +77,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
77
77
  /* empty css */
78
78
  import "../ImageBillboard/ImageBillboard.css.js";
79
79
  /* empty css */
80
+ import "react-wrap-balancer";
80
81
  /* empty css */
81
82
  /* empty css */
82
83
  /* empty css */
@@ -77,6 +77,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
77
77
  /* empty css */
78
78
  import "../ImageBillboard/ImageBillboard.css.js";
79
79
  /* empty css */
80
+ import "react-wrap-balancer";
80
81
  /* empty css */
81
82
  /* empty css */
82
83
  /* empty css */
@@ -74,6 +74,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
74
74
  /* empty css */
75
75
  import "../ImageBillboard/ImageBillboard.css.js";
76
76
  /* empty css */
77
+ import "react-wrap-balancer";
77
78
  /* empty css */
78
79
  /* empty css */
79
80
  /* empty css */
@@ -75,6 +75,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
75
75
  /* empty css */
76
76
  import "../ImageBillboard/ImageBillboard.css.js";
77
77
  /* empty css */
78
+ import "react-wrap-balancer";
78
79
  /* empty css */
79
80
  /* empty css */
80
81
  /* empty css */
@@ -73,6 +73,7 @@ import "../../FooterDisclosure/FooterDisclosure.css.js";
73
73
  import { footer_section, footer_wrapper, ft_col, ft_col_header, ft_col_subheader, nested_grid, app_col, footer_mobile, ft_panel_group, ft_panel } from "./FooterSiteMap.css.js";
74
74
  import "../../ImageBillboard/ImageBillboard.css.js";
75
75
  /* empty css */
76
+ import "react-wrap-balancer";
76
77
  /* empty css */
77
78
  /* empty css */
78
79
  /* empty css */
@@ -77,6 +77,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
77
77
  /* empty css */
78
78
  import "../ImageBillboard/ImageBillboard.css.js";
79
79
  /* empty css */
80
+ import "react-wrap-balancer";
80
81
  /* empty css */
81
82
  /* empty css */
82
83
  /* empty css */
@@ -77,6 +77,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
77
77
  /* empty css */
78
78
  import "../ImageBillboard/ImageBillboard.css.js";
79
79
  /* empty css */
80
+ import "react-wrap-balancer";
80
81
  /* empty css */
81
82
  /* empty css */
82
83
  /* empty css */
@@ -78,6 +78,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
78
78
  /* empty css */
79
79
  import "../ImageBillboard/ImageBillboard.css.js";
80
80
  /* empty css */
81
+ import "react-wrap-balancer";
81
82
  /* empty css */
82
83
  /* empty css */
83
84
  /* empty css */
@@ -77,6 +77,7 @@ import "../../FooterDisclosure/FooterDisclosure.css.js";
77
77
  /* empty css */
78
78
  import "../../ImageBillboard/ImageBillboard.css.js";
79
79
  /* empty css */
80
+ import "react-wrap-balancer";
80
81
  /* empty css */
81
82
  /* empty css */
82
83
  /* empty css */
@@ -73,6 +73,7 @@ import "../../FooterDisclosure/FooterDisclosure.css.js";
73
73
  /* empty css */
74
74
  import "../../ImageBillboard/ImageBillboard.css.js";
75
75
  /* empty css */
76
+ import "react-wrap-balancer";
76
77
  /* empty css */
77
78
  /* empty css */
78
79
  /* empty css */
@@ -59,6 +59,7 @@ import "../Input/InputAmount.js";
59
59
  import "../Input/InputPhone.js";
60
60
  import "../Input/InputTextArea.js";
61
61
  import "../Input/DownPaymentInput.js";
62
+ import "react-wrap-balancer";
62
63
  /* empty css */
63
64
  /* empty css */
64
65
  /* empty css */
@@ -74,6 +74,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
74
74
  /* empty css */
75
75
  import "../ImageBillboard/ImageBillboard.css.js";
76
76
  /* empty css */
77
+ import "react-wrap-balancer";
77
78
  /* empty css */
78
79
  /* empty css */
79
80
  /* empty css */
@@ -69,6 +69,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
69
69
  import { imageLinkContainer } from "../SetContainer/SetContainer.css.js";
70
70
  import "../ImageBillboard/ImageBillboard.css.js";
71
71
  /* empty css */
72
+ import "react-wrap-balancer";
72
73
  /* empty css */
73
74
  /* empty css */
74
75
  /* empty css */
@@ -75,6 +75,7 @@ import "../HeroBanner/LargeBanner.css.js";
75
75
  import "../HeroBanner/SelectionBanner.css.js";
76
76
  import "../ImageBillboard/ImageBillboard.css.js";
77
77
  import ImageLink from "./ImageLink.js";
78
+ import "react-wrap-balancer";
78
79
  /* empty css */
79
80
  /* empty css */
80
81
  /* empty css */
@@ -72,6 +72,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
72
72
  /* empty css */
73
73
  import "../ImageBillboard/ImageBillboard.css.js";
74
74
  import { ImageLinkSet } from "./ImageLinkSet.js";
75
+ import "react-wrap-balancer";
75
76
  /* empty css */
76
77
  /* empty css */
77
78
  /* empty css */
@@ -73,6 +73,7 @@ import "../../FooterDisclosure/FooterDisclosure.css.js";
73
73
  /* empty css */
74
74
  import "../../ImageBillboard/ImageBillboard.css.js";
75
75
  /* empty css */
76
+ import Balancer from "react-wrap-balancer";
76
77
  import { featured_maingrid_img, featured_maingrid_item, featured_center_vertical } from "./Featured.css.js";
77
78
  /* empty css */
78
79
  /* empty css */
@@ -164,7 +165,7 @@ const InsightItem = (props) => {
164
165
  }
165
166
  ),
166
167
  /* @__PURE__ */ jsxs("div", { className: clsx(featured_maingrid_item, selector_grid_content), children: [
167
- /* @__PURE__ */ jsx("h2", { className: clsx(title({ variant: "primary" }), selector_title), children: itemTitle ?? "" }),
168
+ /* @__PURE__ */ jsx("h2", { className: clsx(title({ variant: "primary" }), selector_title), children: /* @__PURE__ */ jsx(Balancer, { children: itemTitle ?? "" }) }),
168
169
  /* @__PURE__ */ jsxs("div", { children: [
169
170
  /* @__PURE__ */ jsx(ClockIcon, { className: clsx(featured_center_vertical) }),
170
171
  " ",
@@ -75,6 +75,7 @@ import "../../FooterDisclosure/FooterDisclosure.css.js";
75
75
  /* empty css */
76
76
  import { supertag } from "../../ImageBillboard/ImageBillboard.css.js";
77
77
  /* empty css */
78
+ import Balancer from "react-wrap-balancer";
78
79
  /* empty css */
79
80
  /* empty css */
80
81
  import { featured_subgrid_item, featured_supertag, featured_subgrid_title, featured_center_vertical, featured_section, featured_title, featured_grid, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_title, featured_subgrid, featured_subgrid_divider } from "./Featured.css.js";
@@ -116,7 +117,7 @@ const FeaturedItem = (props) => {
116
117
  const variant = getVariant(fullVariant);
117
118
  return /* @__PURE__ */ jsxs("a", { href: url ?? "/", className: featured_subgrid_item, children: [
118
119
  /* @__PURE__ */ jsx("h3", { className: clsx(supertag({ variant }), featured_supertag), children: supertagText ?? "" }),
119
- /* @__PURE__ */ jsx("h2", { className: clsx(featured_subgrid_title, title({ variant })), children: featureItemTitle ?? "" }),
120
+ /* @__PURE__ */ jsx("h2", { className: clsx(featured_subgrid_title, title({ variant })), children: /* @__PURE__ */ jsx(Balancer, { children: featureItemTitle ?? "" }) }),
120
121
  /* @__PURE__ */ jsxs("div", { children: [
121
122
  /* @__PURE__ */ jsx(
122
123
  ClockIcon,
@@ -161,7 +162,7 @@ const Featured = (props) => {
161
162
  title({ variant: "primary" }),
162
163
  featured_maingrid_title
163
164
  ),
164
- children: main?.title ?? ""
165
+ children: /* @__PURE__ */ jsx(Balancer, { children: main?.title ?? "" })
165
166
  }
166
167
  ),
167
168
  /* @__PURE__ */ jsxs("div", { children: [
@@ -73,6 +73,7 @@ import "../../FooterDisclosure/FooterDisclosure.css.js";
73
73
  /* empty css */
74
74
  import "../../ImageBillboard/ImageBillboard.css.js";
75
75
  /* empty css */
76
+ import "react-wrap-balancer";
76
77
  /* empty css */
77
78
  /* empty css */
78
79
  /* empty css */
@@ -72,6 +72,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
72
72
  /* empty css */
73
73
  import "../ImageBillboard/ImageBillboard.css.js";
74
74
  /* empty css */
75
+ import "react-wrap-balancer";
75
76
  /* empty css */
76
77
  /* empty css */
77
78
  /* empty css */
@@ -73,6 +73,7 @@ import "../../FooterDisclosure/FooterDisclosure.css.js";
73
73
  /* empty css */
74
74
  import "../../ImageBillboard/ImageBillboard.css.js";
75
75
  /* empty css */
76
+ import "react-wrap-balancer";
76
77
  /* empty css */
77
78
  /* empty css */
78
79
  /* empty css */
@@ -74,6 +74,7 @@ import "../../FooterDisclosure/FooterDisclosure.css.js";
74
74
  /* empty css */
75
75
  import "../../ImageBillboard/ImageBillboard.css.js";
76
76
  /* empty css */
77
+ import "react-wrap-balancer";
77
78
  /* empty css */
78
79
  /* empty css */
79
80
  /* empty css */
@@ -2400,7 +2401,7 @@ function SubNavBar() {
2400
2401
  Link,
2401
2402
  {
2402
2403
  href: "/commercial/lending/commercial-term-loans",
2403
- children: "Comnmercial Term Loans"
2404
+ children: "Commercial Term Loans"
2404
2405
  }
2405
2406
  ) }),
2406
2407
  /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
@@ -73,6 +73,7 @@ import "../../FooterDisclosure/FooterDisclosure.css.js";
73
73
  /* empty css */
74
74
  import "../../ImageBillboard/ImageBillboard.css.js";
75
75
  /* empty css */
76
+ import "react-wrap-balancer";
76
77
  /* empty css */
77
78
  /* empty css */
78
79
  /* empty css */
@@ -6,6 +6,5 @@ export interface PageNavItemProps {
6
6
  variant?: SecondaryTypes;
7
7
  addClassName?: string;
8
8
  label?: string;
9
- onClick?: () => void;
10
9
  }
11
10
  export declare const PageNavItem: FC<PageNavItemProps>;
@@ -5,11 +5,10 @@ const PageNavItem = ({
5
5
  id,
6
6
  addClassName,
7
7
  label,
8
- variant: fullVariant = "primary",
9
- onClick
8
+ variant: fullVariant = "primary"
10
9
  }) => {
11
10
  const variant = getVariant(fullVariant);
12
- return /* @__PURE__ */ jsx("div", { onClick, className: `${pn_btn({ variant })} ${addClassName}`, children: /* @__PURE__ */ jsx(
11
+ return /* @__PURE__ */ jsx("div", { className: `${pn_btn({ variant })} ${addClassName}`, children: /* @__PURE__ */ jsx(
13
12
  "a",
14
13
  {
15
14
  href: `#${id?.replace(/ /g, "-")}`,
@@ -1,14 +1,16 @@
1
1
  "use client";
2
2
  import { jsx } from "react/jsx-runtime";
3
3
  import clsx from "clsx";
4
- import { useState, useEffect } from "react";
4
+ import { useState, useRef, useEffect } from "react";
5
5
  import Slider from "react-slick";
6
6
  import "../PageNavItem/PageNavItem.css.js";
7
7
  import { PageNavItem } from "../PageNavItem/PageNavItem.js";
8
- import { sticky_nav, nav_wrapper, sticky_page_nav } from "./PageNavigationSet.css.js";
8
+ import { sticky_nav, nav_wrapper } from "./PageNavigationSet.css.js";
9
9
  const PageNavSet = ({ id, pageNavItems }) => {
10
10
  const SliderComponent = Slider.default ? Slider.default : Slider;
11
- const [activeSection, setActiveSection] = useState("");
11
+ const [activeSection, setActiveSection] = useState(pageNavItems[0].id.replace(/ /g, "-"));
12
+ const sliderRef = useRef(null);
13
+ const [isClient, setIsClient] = useState(false);
12
14
  const settings = {
13
15
  className: `${nav_wrapper} center`,
14
16
  slidesToShow: 7,
@@ -20,69 +22,105 @@ const PageNavSet = ({ id, pageNavItems }) => {
20
22
  {
21
23
  breakpoint: 1023,
22
24
  settings: {
23
- slidesToShow: 5,
24
- slidesToScroll: 5,
25
+ slidesToShow: 2.5,
26
+ slidesToScroll: 4,
25
27
  swipeToSlide: true,
26
28
  infinite: true,
27
29
  centerMode: true,
28
- centerPadding: "0",
29
- focusOnSelect: true
30
+ centerPadding: "140px",
31
+ focusOnSelect: true,
32
+ variableWidth: false
30
33
  }
31
34
  },
32
35
  {
33
- breakpoint: 768,
36
+ breakpoint: 735,
34
37
  settings: {
35
- slidesToShow: 3,
36
- slidesToScroll: 3,
38
+ slidesToShow: 1,
39
+ slidesToScroll: 1,
37
40
  swipeToSlide: true,
38
41
  infinite: true,
39
42
  centerMode: true,
40
- centerPadding: "0",
41
- focusOnSelect: true
43
+ centerPadding: "0px",
44
+ focusOnSelect: false
42
45
  }
43
46
  }
44
47
  ]
45
48
  };
49
+ useEffect(() => {
50
+ setIsClient(true);
51
+ }, []);
46
52
  const scrolledElement = (elem) => {
53
+ const docViewTop = window.scrollY + 200;
47
54
  if (elem) {
48
- const rect = elem.getBoundingClientRect();
49
- const viewHeight = Math.max(
50
- document.documentElement.clientHeight,
51
- window.innerHeight
52
- );
53
- return rect.bottom - viewHeight < 0;
55
+ const elemTop = elem.getBoundingClientRect().top + window.scrollY;
56
+ if (elemTop < docViewTop) {
57
+ return true;
58
+ }
54
59
  }
55
60
  };
56
61
  const handleScroll = () => {
57
- const main = document.querySelector("main");
58
- const bannerHeight = main.getElementsByTagName("section")[0].offsetHeight;
59
- const stickyElem = document.querySelector(`.${sticky_nav}`);
60
- const scrollTop = window.scrollY;
61
- if (scrollTop >= bannerHeight) {
62
- stickyElem.classList.add(sticky_page_nav);
63
- } else {
64
- stickyElem.classList.remove(sticky_page_nav);
65
- }
62
+ let selectedSection = pageNavItems[0].id.replace(/ /g, "-");
66
63
  const pageNav = document.getElementById("pageNav");
67
64
  const links = pageNav?.querySelectorAll("a");
68
65
  links?.forEach((link) => {
69
66
  if (scrolledElement(document.getElementById(link.hash.substring(1)))) {
70
- setActiveSection(link.hash.substring(1));
67
+ selectedSection = link.hash.substring(1);
68
+ setActiveSection(selectedSection);
71
69
  }
72
70
  });
71
+ const activeIndex = pageNavItems.findIndex(
72
+ (section) => section.id === selectedSection
73
+ );
74
+ if (sliderRef.current) {
75
+ sliderRef.current.slickGoTo(activeIndex, true);
76
+ }
73
77
  };
74
78
  useEffect(() => {
79
+ handleScroll();
75
80
  window.addEventListener("scroll", handleScroll);
81
+ window.addEventListener("resize", handleScroll);
76
82
  return () => {
77
83
  window.removeEventListener("scroll", handleScroll);
84
+ window.removeEventListener("resize", handleScroll);
78
85
  };
79
86
  }, []);
80
- return /* @__PURE__ */ jsx("nav", { className: clsx(sticky_nav), id: "pageNav", children: /* @__PURE__ */ jsx("div", { className: "", id: `id_${id}`, children: /* @__PURE__ */ jsx(SliderComponent, { ...settings, children: pageNavItems?.map((section) => /* @__PURE__ */ jsx(
87
+ function smoothScrollTo(targetY, duration, easingFunction) {
88
+ const startY = window.scrollY;
89
+ const distance = targetY - startY;
90
+ const startTime = performance.now();
91
+ function animateScroll(currentTime) {
92
+ const elapsedTime = currentTime - startTime;
93
+ const progress = Math.min(elapsedTime / duration, 1);
94
+ const easedProgress = easingFunction(progress);
95
+ window.scrollTo(0, startY + distance * easedProgress);
96
+ if (progress < 1) {
97
+ requestAnimationFrame(animateScroll);
98
+ }
99
+ }
100
+ requestAnimationFrame(animateScroll);
101
+ }
102
+ function linear(t) {
103
+ return t;
104
+ }
105
+ useEffect(() => {
106
+ if (isClient) {
107
+ const pageNavLinks = document.querySelectorAll('#pageNav a[href*="#"]');
108
+ pageNavLinks.forEach((link) => {
109
+ link.addEventListener("click", (e) => {
110
+ e.preventDefault();
111
+ const targetId = link.getAttribute("href")?.substring(1);
112
+ const targetElement = document.getElementById(targetId || "");
113
+ if (targetElement) {
114
+ const offsetTop = targetElement.getBoundingClientRect().top + window.scrollY - 110;
115
+ smoothScrollTo(offsetTop, 200, linear);
116
+ }
117
+ });
118
+ });
119
+ }
120
+ }, [isClient]);
121
+ return /* @__PURE__ */ jsx("nav", { className: clsx(sticky_nav), id: "pageNav", children: /* @__PURE__ */ jsx("div", { className: "containment", id: `id_${id}`, style: { width: "100%" }, children: /* @__PURE__ */ jsx(SliderComponent, { ...settings, ref: sliderRef, children: pageNavItems?.map((section) => /* @__PURE__ */ jsx(
81
122
  PageNavItem,
82
123
  {
83
- onClick: () => {
84
- setActiveSection(section?.id?.replace(/ /g, "-"));
85
- },
86
124
  id: section?.id,
87
125
  label: section.label,
88
126
  addClassName: `nav_child ${activeSection === section?.id?.replace(/ /g, "-") ? "active" : ""}`
@@ -1,3 +1,2 @@
1
1
  export declare const nav_wrapper: string;
2
2
  export declare const sticky_nav: string;
3
- export declare const sticky_page_nav: string;
@@ -1,9 +1,7 @@
1
1
  /* empty css */
2
2
  var nav_wrapper = "_1qd6ohx0";
3
3
  var sticky_nav = "_1qd6ohx1";
4
- var sticky_page_nav = "_1qd6ohx2";
5
4
  export {
6
5
  nav_wrapper,
7
- sticky_nav,
8
- sticky_page_nav
6
+ sticky_nav
9
7
  };
@@ -72,6 +72,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
72
72
  /* empty css */
73
73
  import "../ImageBillboard/ImageBillboard.css.js";
74
74
  /* empty css */
75
+ import "react-wrap-balancer";
75
76
  /* empty css */
76
77
  /* empty css */
77
78
  /* empty css */
@@ -1,68 +1,68 @@
1
- ._quote_spacer_1mzku_1 {
2
- line-height: 1.35;
3
- margin-block: clamp(1.88rem, 1.99vw + 1.41rem, 3rem);
4
- margin-inline: auto;
5
- }
6
-
7
- ._author_1mzku_7,
8
- ._quote_1mzku_1 {
9
- color: #333d46;
10
- }
11
-
12
- ._author_1mzku_7 {
13
- text-align: right;
14
- margin-top: 18px;
15
- }
16
-
17
- ._author_1mzku_7 cite {
18
- font-style: normal;
19
- }
20
-
21
- ._quote_spacer_1mzku_1 .img_fluid {
22
- margin-right: 24px;
23
- transform: rotateY(180deg) scaleY(-1);
24
- }
25
-
26
- ._quote_spacer_1mzku_1 .flex_row {
27
- align-items: flex-start;
28
- }
29
-
30
- ._quote_1mzku_1 p {
31
- font-size: clamp(1.22rem, 0.92vw + 1rem, 1.74rem);
32
- font-style: italic;
33
- line-height: 1.2;
34
- }
35
-
36
- @media (max-width: 768px) {
37
- ._quote_spacer_1mzku_1 .img_fluid {
38
- max-width: 30px;
39
- margin-right: 12px;
40
- }
41
- ._author_1mzku_7 {
42
- margin-top: 14px;
43
- }
44
- ._quote_1mzku_1 p {
45
- font-size: 18px;
46
- }
47
- ._author_1mzku_7 cite {
48
- font-size: 14px;
49
- }
50
- }
51
-
52
- @media (max-width: 500px) {
53
- ._author_1mzku_7 {
54
- margin-top: 12px;
55
- }
56
- }
57
-
58
- @media (min-width: 604px) {
59
- ._quote_spacer_1mzku_1 {
60
- width: min(calc(100% - 2rem), 792px);
61
- }
62
- }
63
-
64
- @media (min-width: 1023px) {
65
- ._quote_1mzku_1 p {
66
- font-weight: 600;
67
- }
68
- }
1
+ ._quote_spacer_1r8g1_1 {
2
+ line-height: 1.35;
3
+ margin-block: clamp(1.88rem, 1.99vw + 1.41rem, 3rem);
4
+ margin-inline: auto;
5
+ }
6
+
7
+ ._author_1r8g1_13,
8
+ ._quote_1r8g1_1 {
9
+ color: #333d46;
10
+ }
11
+
12
+ ._author_1r8g1_13 {
13
+ text-align: right;
14
+ margin-top: 18px;
15
+ }
16
+
17
+ ._author_1r8g1_13 cite {
18
+ font-style: normal;
19
+ }
20
+
21
+ ._quote_spacer_1r8g1_1 .img_fluid {
22
+ margin-right: 24px;
23
+ transform: rotateY(180deg) scaleY(-1);
24
+ }
25
+
26
+ ._quote_spacer_1r8g1_1 .flex_row {
27
+ align-items: flex-start;
28
+ }
29
+
30
+ ._quote_1r8g1_1 p {
31
+ font-size: clamp(1.22rem, 0.92vw + 1rem, 1.74rem);
32
+ font-style: italic;
33
+ line-height: 1.2;
34
+ }
35
+
36
+ @media (max-width: 768px) {
37
+ ._quote_spacer_1r8g1_1 .img_fluid {
38
+ max-width: 30px;
39
+ margin-right: 12px;
40
+ }
41
+ ._author_1r8g1_13 {
42
+ margin-top: 14px;
43
+ }
44
+ ._quote_1r8g1_1 p {
45
+ font-size: 18px;
46
+ }
47
+ ._author_1r8g1_13 cite {
48
+ font-size: 14px;
49
+ }
50
+ }
51
+
52
+ @media (max-width: 500px) {
53
+ ._author_1r8g1_13 {
54
+ margin-top: 12px;
55
+ }
56
+ }
57
+
58
+ @media (min-width: 604px) {
59
+ ._quote_spacer_1r8g1_1 {
60
+ width: min(calc(100% - 2rem), 792px);
61
+ }
62
+ }
63
+
64
+ @media (min-width: 1023px) {
65
+ ._quote_1r8g1_1 p {
66
+ font-weight: 600;
67
+ }
68
+ }
@@ -2,7 +2,6 @@
2
2
  background-color: transparent;
3
3
  border-radius: 8px;
4
4
  overflow: hidden;
5
- transition: all 0.15s ease-in;
6
5
  outline: 0 !important;
7
6
  text-align: center;
8
7
  }
@@ -60,4 +59,10 @@
60
59
  font: 400 16px / 1.5 var(--main-font-family);
61
60
  padding: 8px 24px;
62
61
  }
62
+ }
63
+ @media (max-width:1023px) {
64
+ ._13qd2mm3 {
65
+ width: 100%;
66
+ text-align: center;
67
+ }
63
68
  }
@@ -9,28 +9,34 @@
9
9
  .slick-slide + .slick-slide {
10
10
  margin-left: 8px;
11
11
  }
12
- .section_spacer:has(._1qd6ohx1) {
13
- margin-top: 0;
14
- position: sticky;
15
- top: 0;
16
- z-index: 999;
17
- }
18
12
  .slick-list:focus {
19
13
  outline: 0;
20
14
  }
21
15
  .slick-list.dragging {
22
16
  cursor: pointer;
23
17
  }
24
- ._1qd6ohx2 {
25
- position: fixed;
26
- top: 10px;
18
+ .slick-slide {
19
+ margin-left: 8px;
20
+ }
21
+ .section_spacer:has(#pageNav) {
22
+ margin-top: 0;
23
+ position: sticky;
24
+ top: 0;
27
25
  z-index: 999;
28
- animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
29
- margin: -10px 0;
30
- width: 100%;
31
26
  }
32
- @media Screen and (max-width: 1023px) {
33
- ._1qd6ohx1 containment {
27
+ @media screen and (max-width:735px) {
28
+ .slick-slide + .slick-slide {
29
+ margin-left: 4px;
30
+ }
31
+ .slick-track {
32
+ left: -23px !important;
33
+ }
34
+ .slick-slide {
35
+ flex: 0 0 214px;
36
+ }
37
+ }
38
+ @media screen and (max-width: 1023px) {
39
+ ._1qd6ohx1 .containment {
34
40
  width: 100% !important;
35
41
  max-width: 100%;
36
42
  }
@@ -54,6 +60,11 @@
54
60
  right: 0;
55
61
  }
56
62
  }
63
+ @media screen and (max-width: 500px) {
64
+ ._1qd6ohx1::before, ._1qd6ohx1::after {
65
+ width: 20px;
66
+ }
67
+ }
57
68
  @media screen and (min-width:1024px) {
58
69
  .slick-track {
59
70
  display: flex !important;
@@ -61,13 +72,4 @@
61
72
  width: auto !important;
62
73
  transform: none !important;
63
74
  }
64
- }
65
- @media screen and (max-width:1023px) {
66
- ._1qd6ohx2 {
67
- position: fixed;
68
- top: 10px;
69
- z-index: 999;
70
- animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
71
- margin: -10px 0;
72
- }
73
75
  }
package/package.json CHANGED
@@ -1,131 +1,131 @@
1
- {
2
- "name": "@axos-web-dev/shared-components",
3
- "description": "Axos shared components library for web.",
4
- "version": "0.0.159",
5
- "type": "module",
6
- "module": "dist/main.js",
7
- "types": "dist/main.d.ts",
8
- "files": [
9
- "dist"
10
- ],
11
- "sideEffects": [
12
- "dist/assets/**/*.css"
13
- ],
14
- "scripts": {
15
- "dev": "vite",
16
- "build": "tsc --p ./tsconfig.build.json && vite build",
17
- "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
18
- "preview": "vite preview",
19
- "prepublishOnly": "npm run build",
20
- "check-types": "tsc --pretty --noEmit",
21
- "check-format": "prettier --check .",
22
- "check-lint": "eslint . --ext ts --ext tsx --ext js",
23
- "format": "prettier --write .",
24
- "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
25
- "prepare": "husky",
26
- "storybook": "storybook dev -p 6006",
27
- "build-storybook": "storybook build",
28
- "npm:link": "npm run build && npm link"
29
- },
30
- "dependencies": {
31
- "@headlessui/react": "^2.1.10",
32
- "@hookform/resolvers": "^3.9.0",
33
- "@react-input/mask": "^1.2.11",
34
- "@react-input/number-format": "^1.1.1",
35
- "@storybook/icons": "^1.2.12",
36
- "@storybook/preview-api": "^8.3.5",
37
- "@types/iframe-resizer": "3.5.13",
38
- "@vanilla-extract/css": "^1.16.0",
39
- "@vanilla-extract/recipes": "^0.5.1",
40
- "antd": "^5.21.5",
41
- "clsx": "^2.1.1",
42
- "iframe-resizer": "4.3.11",
43
- "lodash": "^4.17.21",
44
- "moment": "^2.30.1",
45
- "react-date-picker": "^11.0.0",
46
- "react-hook-form": "^7.53.1",
47
- "react-date-range": "^2.0.1",
48
- "react-markdown": "^9.0.1",
49
- "react-popper": "^2.3.0",
50
- "react-slick": "^0.30.2",
51
- "react-use": "^17.5.1",
52
- "react-wrap-balancer": "^1.1.1",
53
- "rsuite": "^5.72.0",
54
- "slick-carousel": "^1.8.1",
55
- "typed-css-modules": "^0.9.1",
56
- "vite-plugin-svgr": "^4.2.0",
57
- "zod": "^3.23.8",
58
- "zustand": "^4.5.5"
59
- },
60
- "peerDependencies": {
61
- "@headlessui/react": "^2.1.10",
62
- "@vanilla-extract/css-utils": "^0.1.3",
63
- "@vanilla-extract/recipes": "^0.5.1",
64
- "@vanilla-extract/vite-plugin": "^4.0.3",
65
- "next": "^14.1.4",
66
- "react": "^18.2.0",
67
- "react-date-range": "^2.0.1",
68
- "react-dom": "^18.2.0",
69
- "react-popper": "^2.3.0",
70
- "react-slick": "^0.30.2",
71
- "slick-carousel": "^1.8.1"
72
- },
73
- "devDependencies": {
74
- "@chromatic-com/storybook": "^1.8.0",
75
- "@rollup/plugin-alias": "^5.1.0",
76
- "@storybook/addon-essentials": "^8.2.9",
77
- "@storybook/addon-interactions": "^8.2.9",
78
- "@storybook/addon-links": "^8.2.9",
79
- "@storybook/addon-mdx-gfm": "^8.2.9",
80
- "@storybook/addon-onboarding": "^8.2.9",
81
- "@storybook/addon-themes": "^8.2.9",
82
- "@storybook/blocks": "^8.2.9",
83
- "@storybook/react": "^8.2.9",
84
- "@storybook/react-vite": "^8.2.9",
85
- "@storybook/test": "^8.2.9",
86
- "@svgr/core": "^8.1.0",
87
- "@svgr/plugin-prettier": "^8.1.0",
88
- "@svgr/plugin-svgo": "^8.1.0",
89
- "@types/lodash": "^4.17.10",
90
- "@types/node": "^20.16.10",
91
- "@types/react": "^18.3.11",
92
- "@types/react-date-range": "^1.4.9",
93
- "@types/react-datepicker": "^6.2.0",
94
- "@types/react-dom": "^18.3.0",
95
- "@types/react-slick": "^0.23.13",
96
- "@typescript-eslint/eslint-plugin": "^7.9.0",
97
- "@typescript-eslint/parser": "^7.9.0",
98
- "@vanilla-extract/css-utils": "^0.1.4",
99
- "@vanilla-extract/recipes": "^0.5.5",
100
- "@vanilla-extract/vite-plugin": "^4.0.15",
101
- "@vitejs/plugin-react-swc": "^3.7.0",
102
- "esbuild-vanilla-image-loader": "^0.1.3",
103
- "eslint": "^8.57.0",
104
- "eslint-plugin-react-hooks": "^4.6.2",
105
- "eslint-plugin-react-refresh": "^0.4.7",
106
- "eslint-plugin-storybook": "^0.8.0",
107
- "glob": "^10.4.5",
108
- "husky": "^9.1.6",
109
- "next": "^14.1.4",
110
- "prettier": "3.2.5",
111
- "react": "^18.3.1",
112
- "react-dom": "^18.3.1",
113
- "rollup-plugin-preserve-directives": "^0.4.0",
114
- "rollup-plugin-svg-import": "^3.0.0",
115
- "rollup-plugin-svgo": "^2.0.0",
116
- "storybook": "^8.2.9",
117
- "typescript": "^5.6.2",
118
- "typescript-plugin-css-modules": "^5.1.0",
119
- "vite": "^5.4.9",
120
- "vite-plugin-dts": "^3.9.1",
121
- "vite-plugin-lib-inject-css": "^2.1.1",
122
- "vite-plugin-setting-css-module": "^1.1.4",
123
- "vite-tsconfig-paths": "^4.3.2"
124
- },
125
- "main": "index.js",
126
- "directories": {
127
- "lib": "lib"
128
- },
129
- "author": "axos-web-dev",
130
- "license": "ISC"
131
- }
1
+ {
2
+ "name": "@axos-web-dev/shared-components",
3
+ "description": "Axos shared components library for web.",
4
+ "version": "0.0.160",
5
+ "type": "module",
6
+ "module": "dist/main.js",
7
+ "types": "dist/main.d.ts",
8
+ "files": [
9
+ "dist"
10
+ ],
11
+ "sideEffects": [
12
+ "dist/assets/**/*.css"
13
+ ],
14
+ "scripts": {
15
+ "dev": "vite",
16
+ "build": "tsc --p ./tsconfig.build.json && vite build",
17
+ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
18
+ "preview": "vite preview",
19
+ "prepublishOnly": "npm run build",
20
+ "check-types": "tsc --pretty --noEmit",
21
+ "check-format": "prettier --check .",
22
+ "check-lint": "eslint . --ext ts --ext tsx --ext js",
23
+ "format": "prettier --write .",
24
+ "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
25
+ "prepare": "husky",
26
+ "storybook": "storybook dev -p 6006",
27
+ "build-storybook": "storybook build",
28
+ "npm:link": "npm run build && npm link"
29
+ },
30
+ "dependencies": {
31
+ "@headlessui/react": "^2.1.10",
32
+ "@hookform/resolvers": "^3.9.0",
33
+ "@react-input/mask": "^1.2.11",
34
+ "@react-input/number-format": "^1.1.1",
35
+ "@storybook/icons": "^1.2.12",
36
+ "@storybook/preview-api": "^8.3.5",
37
+ "@types/iframe-resizer": "3.5.13",
38
+ "@vanilla-extract/css": "^1.16.0",
39
+ "@vanilla-extract/recipes": "^0.5.1",
40
+ "antd": "^5.21.5",
41
+ "clsx": "^2.1.1",
42
+ "iframe-resizer": "4.3.11",
43
+ "lodash": "^4.17.21",
44
+ "moment": "^2.30.1",
45
+ "react-date-picker": "^11.0.0",
46
+ "react-hook-form": "^7.53.1",
47
+ "react-date-range": "^2.0.1",
48
+ "react-markdown": "^9.0.1",
49
+ "react-popper": "^2.3.0",
50
+ "react-slick": "^0.30.2",
51
+ "react-use": "^17.5.1",
52
+ "react-wrap-balancer": "^1.1.1",
53
+ "rsuite": "^5.72.0",
54
+ "slick-carousel": "^1.8.1",
55
+ "typed-css-modules": "^0.9.1",
56
+ "vite-plugin-svgr": "^4.2.0",
57
+ "zod": "^3.23.8",
58
+ "zustand": "^4.5.5"
59
+ },
60
+ "peerDependencies": {
61
+ "@headlessui/react": "^2.1.10",
62
+ "@vanilla-extract/css-utils": "^0.1.3",
63
+ "@vanilla-extract/recipes": "^0.5.1",
64
+ "@vanilla-extract/vite-plugin": "^4.0.3",
65
+ "next": "^14.1.4",
66
+ "react": "^18.2.0",
67
+ "react-date-range": "^2.0.1",
68
+ "react-dom": "^18.2.0",
69
+ "react-popper": "^2.3.0",
70
+ "react-slick": "^0.30.2",
71
+ "slick-carousel": "^1.8.1"
72
+ },
73
+ "devDependencies": {
74
+ "@chromatic-com/storybook": "^1.8.0",
75
+ "@rollup/plugin-alias": "^5.1.0",
76
+ "@storybook/addon-essentials": "^8.2.9",
77
+ "@storybook/addon-interactions": "^8.2.9",
78
+ "@storybook/addon-links": "^8.2.9",
79
+ "@storybook/addon-mdx-gfm": "^8.2.9",
80
+ "@storybook/addon-onboarding": "^8.2.9",
81
+ "@storybook/addon-themes": "^8.2.9",
82
+ "@storybook/blocks": "^8.2.9",
83
+ "@storybook/react": "^8.2.9",
84
+ "@storybook/react-vite": "^8.2.9",
85
+ "@storybook/test": "^8.2.9",
86
+ "@svgr/core": "^8.1.0",
87
+ "@svgr/plugin-prettier": "^8.1.0",
88
+ "@svgr/plugin-svgo": "^8.1.0",
89
+ "@types/lodash": "^4.17.10",
90
+ "@types/node": "^20.16.10",
91
+ "@types/react": "^18.3.11",
92
+ "@types/react-date-range": "^1.4.9",
93
+ "@types/react-datepicker": "^6.2.0",
94
+ "@types/react-dom": "^18.3.0",
95
+ "@types/react-slick": "^0.23.13",
96
+ "@typescript-eslint/eslint-plugin": "^7.9.0",
97
+ "@typescript-eslint/parser": "^7.9.0",
98
+ "@vanilla-extract/css-utils": "^0.1.4",
99
+ "@vanilla-extract/recipes": "^0.5.5",
100
+ "@vanilla-extract/vite-plugin": "^4.0.15",
101
+ "@vitejs/plugin-react-swc": "^3.7.0",
102
+ "esbuild-vanilla-image-loader": "^0.1.3",
103
+ "eslint": "^8.57.0",
104
+ "eslint-plugin-react-hooks": "^4.6.2",
105
+ "eslint-plugin-react-refresh": "^0.4.7",
106
+ "eslint-plugin-storybook": "^0.8.0",
107
+ "glob": "^10.4.5",
108
+ "husky": "^9.1.6",
109
+ "next": "^14.1.4",
110
+ "prettier": "3.2.5",
111
+ "react": "^18.3.1",
112
+ "react-dom": "^18.3.1",
113
+ "rollup-plugin-preserve-directives": "^0.4.0",
114
+ "rollup-plugin-svg-import": "^3.0.0",
115
+ "rollup-plugin-svgo": "^2.0.0",
116
+ "storybook": "^8.2.9",
117
+ "typescript": "^5.6.2",
118
+ "typescript-plugin-css-modules": "^5.1.0",
119
+ "vite": "^5.4.9",
120
+ "vite-plugin-dts": "^3.9.1",
121
+ "vite-plugin-lib-inject-css": "^2.1.1",
122
+ "vite-plugin-setting-css-module": "^1.1.4",
123
+ "vite-tsconfig-paths": "^4.3.2"
124
+ },
125
+ "main": "index.js",
126
+ "directories": {
127
+ "lib": "lib"
128
+ },
129
+ "author": "axos-web-dev",
130
+ "license": "ISC"
131
+ }