@axos-web-dev/shared-components 0.0.113 → 0.0.115

package/dist/PageNavSet/PageNavSet.js

@@ -3,12 +3,11 @@ import { jsx } from "react/jsx-runtime";
 import { throttle } from "lodash";
 import { useState, useRef, useEffect } from "react";
 import Slider from "react-slick";
-/* empty css                                                   */
-/* empty css                                             */
 import "../PageNavItem/PageNavItem.css.js";
 import { PageNavItem } from "../PageNavItem/PageNavItem.js";
 import css from "./PageNavSet.module.js";
 const PageNavSet = ({ id, pageNavItems }) => {
+  console.log(id, pageNavItems, "Teeeeeest");
   const [activeSection, setActiveSection] = useState(pageNavItems[0].id);
   const sliderRef = useRef(null);
   const settings = {
@@ -60,7 +59,7 @@ const PageNavSet = ({ id, pageNavItems }) => {
   window.onload = () => autoSizer();
   window.onresize = () => autoSizer();
   const handleScroll = throttle(() => {
-    const scrollPosition = window.scrollY;
+    const scrollPosition = typeof window !== "undefined" ? window.scrollY : 0;
     let selectedSection = pageNavItems[0].id;
     pageNavItems.forEach((section) => {
       const element = document.getElementById(section.id);
@@ -77,10 +76,12 @@ const PageNavSet = ({ id, pageNavItems }) => {
     }
   }, 100);
   useEffect(() => {
-    window.addEventListener("scroll", handleScroll);
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
+    if (typeof window !== "undefined") {
+      window.addEventListener("scroll", handleScroll);
+      return () => {
+        window.removeEventListener("scroll", handleScroll);
+      };
+    }
   }, []);
   return /* @__PURE__ */ jsx("nav", { className: css.sticky_nav, id: "pageNav", children: /* @__PURE__ */ jsx("div", { className: "containment", id: `id_${id}`, children: /* @__PURE__ */ jsx(Slider, { ref: sliderRef, ...settings, className: css.nav_wrapper, children: pageNavItems?.map((section) => /* @__PURE__ */ jsx(
     PageNavItem,

package/dist/SecondaryFooter/SecondaryFooter.css.js

@@ -1,6 +1,6 @@
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                                        */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                   */
 var secondary_footer = "_2lraiw0";
 var footer_link = "_2lraiw1";
 var footer_items_wrapper = "_2lraiw2";

package/dist/SecondaryFooter/index.js

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { secondary_footer, footer_items_wrapper, footer_item, footer_link } from "./SecondaryFooter.css.js";
 const SecondaryFooter = (props) => {
   const { items } = props;
-  return /* @__PURE__ */ jsx("div", { className: clsx(secondary_footer, "containment section_spacer"), children: /* @__PURE__ */ jsx("div", { className: footer_items_wrapper, children: items?.map((item) => /* @__PURE__ */ jsx("div", { className: footer_item, children: /* @__PURE__ */ jsx(Hyperlink, { targetUrl: item.targetURL, className: footer_link, children: item.displayText }) }, item.id)) }) });
+  return /* @__PURE__ */ jsx("div", { className: clsx(secondary_footer, "containment", "section_spacer"), children: /* @__PURE__ */ jsx("div", { className: footer_items_wrapper, children: items?.map((item) => /* @__PURE__ */ jsx("div", { className: footer_item, children: /* @__PURE__ */ jsx(Hyperlink, { targetUrl: item.targetURL, className: footer_link, children: item.displayText }) }, item.id)) }) });
 };
 export {
   SecondaryFooter

package/dist/SetContainer/SetContainer.css.js

@@ -1,6 +1,6 @@
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                                  */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var set_container = createRuntimeFn({ defaultClassName: "_18ygy9m0", variantClassNames: { variant: { primary: "_18ygy9m1", secondary: "_18ygy9m2", tertiary: "_18ygy9m3", quaternary: "_18ygy9m4" } }, defaultVariants: {}, compoundVariants: [] });
 var inline_container = "_18ygy9m5";

package/dist/SetContainer/SetContainer.js

@@ -4,14 +4,14 @@ import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgAxosX from "../icons/AxosX/index.js";
 import SvgComponent from "../icons/AxosX/Blue.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                                        */
+/* empty css                                */
+/* empty css                                   */
 /* empty css                                                    */
+/* empty css                                                */
 import "../utils/allowedAxosDomains.js";
 import { getVariant } from "../utils/getVariant.js";
-/* empty css                                              */
-/* empty css                                              */
+/* empty css                                          */
+/* empty css                                          */
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
@@ -28,7 +28,7 @@ import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
 import "../Input/Dropdown.js";
-/* empty css                                       */
+/* empty css                                   */
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputAmount.js";
@@ -44,57 +44,55 @@ import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
-/* empty css                                                                                    */
+/* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
-/* empty css                                                  */
 /* empty css                                              */
-/* empty css                                                        */
+/* empty css                                          */
+/* empty css                                                    */
 import "../Carousel/index.js";
 import "../Hyperlink/Hyperlink.css.js";
-/* empty css                                                                        */
+/* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import { set_container, isolate_container, heading, inline_container, setcontainer_section_text } from "./SetContainer.css.js";
 import "../Tab/Tab.css.js";
 import "../icons/Star/Star.css.js";
 import { heroSupertag } from "../HeroBanner/HeroBanner.css.js";
 import "../ContentBanner/ContentBanner.css.js";
-/* empty css                                                  */
+/* empty css                                              */
 import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
-/* empty css                                                             */
+/* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
-/* empty css                                                  */
-/* empty css                                                          */
+/* empty css                                              */
+/* empty css                                                      */
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../Chevron/Chevron.css.js";
-/* empty css                                    */
+/* empty css                                */
 import "../Modal/contextApi/store.js";
-/* empty css                                                          */
-/* empty css                                                             */
-/* empty css                                                                  */
-/* empty css                                                                     */
-/* empty css                                                       */
+/* empty css                                                      */
+/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                                 */
+/* empty css                                                   */
 import "../NavigationMenu/AxosBank/NavData.js";
 import "next/image.js";
 import "next/link.js";
 import "next/navigation.js";
-/* empty css                                                          */
-/* empty css                                                           */
+/* empty css                                                      */
+/* empty css                                                       */
 import "../PageNavItem/PageNavItem.css.js";
 import "lodash";
 import "react-slick";
-/* empty css                                                   */
-/* empty css                                             */
-/* empty css                                                        */
-/* empty css                                                      */
+/* empty css                                                    */
+/* empty css                                                  */
 import "../StepItem/StepItem.css.js";
 import "../StepItemSet/StepItemSet.css.js";
-/* empty css                                            */
-/* empty css                                                      */
-/* empty css                                                    */
-/* empty css                                            */
+/* empty css                                        */
 /* empty css                                                  */
+/* empty css                                                */
+/* empty css                                        */
+/* empty css                                              */
 import "../Interstitial/Interstitial-variants.css.js";
 import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";

package/dist/SocialMediaBar/SocialMediaBar.css.js

@@ -1,4 +1,4 @@
-/* empty css                                                      */
+/* empty css                                  */
 var smb_section = "nkpt490";
 var smb_wrapper = "nkpt491";
 var padding_in_footer = "nkpt492";

package/dist/StepItem/StepItem.css.js

@@ -1,7 +1,7 @@
-/* empty css                                              */
-/* empty css                                    */
-/* empty css                                       */
 /* empty css                                          */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                            */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var li = "_1y8r7dk0";
 var line_points = createRuntimeFn({ defaultClassName: "_1y8r7dk1", variantClassNames: { variant: { primary: "_1y8r7dk2", secondary: "_1y8r7dk3", tertiary: "_1y8r7dk4", quaternary: "_1y8r7dk5" } }, defaultVariants: {}, compoundVariants: [] });

package/dist/StepItemSet/StepItemSet.css.js

@@ -1,6 +1,6 @@
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                                */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                               */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var bs_section = createRuntimeFn({ defaultClassName: "_18par6f0", variantClassNames: { variant: { primary: "_18par6f1", secondary: "_18par6f2", tertiary: "_18par6f3", quaternary: "_18par6f4" } }, defaultVariants: {}, compoundVariants: [] });
 var bs_wrapper = "_18par6f5";

package/dist/Tab/Tab.css.js

@@ -1,7 +1,7 @@
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                              */
 /* empty css                                */
+/* empty css                                   */
+/* empty css                                          */
+/* empty css                       */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var tab = createRuntimeFn({ defaultClassName: "lhhm340", variantClassNames: { variant: { primary: "lhhm341", secondary: "lhhm342", tertiary: "lhhm343", quaternary: "lhhm344" } }, defaultVariants: {}, compoundVariants: [] });
 var active_tab = createRuntimeFn({ defaultClassName: "lhhm345", variantClassNames: { variant: { primary: "lhhm346", secondary: "lhhm347", tertiary: "lhhm348", quaternary: "lhhm349" } }, defaultVariants: {}, compoundVariants: [] });

package/dist/Table/Table.css.js

@@ -1,6 +1,6 @@
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                    */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                         */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var table_container = createRuntimeFn({ defaultClassName: "_1nivbwe0", variantClassNames: { variant: { apy: "_1nivbwe1", standard: "_1nivbwe2" } }, defaultVariants: {}, compoundVariants: [] });
 var table_container_text = "_1nivbwe3";

package/dist/TextBlock/TextBlock.css.js

@@ -1,6 +1,6 @@
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                            */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                             */
 var textBlockParagraph = "_16g7rvn0";
 var textBlockHeader = "_16g7rvn1";
 var textBlockList = "_16g7rvn2";

package/dist/TextBlock/TextBlock.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { textBlockHeader } from "./TextBlock.css.js";
 const TextBlock = (props) => {
-  return /* @__PURE__ */ jsxs("div", { id: `id_${props.id}`, className: "containment section_spacer", children: [
+  return /* @__PURE__ */ jsxs("div", { id: `id_${props.id}`, className: "containment", children: [
     /* @__PURE__ */ jsx("h2", { className: `header_2 text_center ${textBlockHeader}`, children: props.headline }),
     /* @__PURE__ */ jsx("div", { children: props.bodyCopy })
   ] });

package/dist/TopicalNavItem/TopicalNavItem.css.js

@@ -1,4 +1,4 @@
-/* empty css                                                      */
+/* empty css                                  */
 var picker_navItem = "dmebjx0";
 var picker_itemProduct = "dmebjx1";
 var picker_arrow = "dmebjx2";

package/dist/TopicalNavSet/TopicalNavSet.css.js

@@ -1,4 +1,4 @@
-/* empty css                                                    */
+/* empty css                                 */
 var picker_section = "xbzzeo0";
 var picker_container = "xbzzeo1";
 var picker_orient = "xbzzeo2";

package/dist/Typography/Typography.css.js

@@ -1,4 +1,4 @@
-/* empty css                                              */
+/* empty css                              */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var headerCssVariable = "var(--header-font-family)";
 var mainCssVariable = "var(--main-font-family)";

package/dist/VideoTile/VideoTile.css.js

@@ -1,7 +1,7 @@
-/* empty css                                              */
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                            */
+/* empty css                                          */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                             */
 var show = "_16puo4g0";
 var video_title = "_16puo4g1";
 var transcript_btn = "_16puo4g2";

package/dist/VideoTile/VideoTile.js

@@ -4,10 +4,10 @@ import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgChevronDown from "../icons/ChevronDown.js";
 import SvgChevronUp from "../icons/ChevronUp.js";
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                                        */
+/* empty css                                */
+/* empty css                                   */
 /* empty css                                                    */
+/* empty css                                                */
 import ReactMarkdown from "react-markdown";
 import { useToggle } from "react-use";
 import { VideoInit } from "./VideoInit.js";

package/dist/VideoWrapper/VideoWrapper.css.js

@@ -1,4 +1,4 @@
-/* empty css                                                  */
+/* empty css                                */
 var grid_wrapper = "_2i5u4u0";
 var grid_2 = "_2i5u4u1";
 var grid_3 = "_2i5u4u2";

package/dist/VideoWrapper/index.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { VideoTile } from "../VideoTile/VideoTile.js";
-/* empty css                                              */
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                            */
+/* empty css                                          */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                        */
 import { grid_wrapper, grid_3, grid_2 } from "./VideoWrapper.css.js";
 const VideoWrapper = ({
   title,

package/dist/assets/Comparison/Comparison.css

@@ -83,6 +83,7 @@
   margin-right: 8px;
 }
 ._198o0ltb {
+  padding-bottom: 2rem;
   display: grid;
   grid-template-columns:  repeat( auto-fit, minmax(250px, 1fr) );
   gap: 24px;

package/dist/globals.css.js

@@ -1,2 +1,2 @@
-/* empty css                                             */
-/* empty css                               */
+/* empty css                                         */
+/* empty css                           */

package/dist/icons/ArrowIcon/ArrowIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                       */
-/* empty css                                          */
-/* empty css                                                     */
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                             */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var Arrow = createRuntimeFn({ defaultClassName: "_1pwixiv0", variantClassNames: { variant: { primary: "_1pwixiv1", secondary: "_1pwixiv2", tertiary: "_1pwixiv3" } }, defaultVariants: {}, compoundVariants: [] });
 export {

package/dist/icons/CheckIcon/CheckIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                       */
-/* empty css                                          */
-/* empty css                                                     */
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                             */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var checkColor = createRuntimeFn({ defaultClassName: "_1xajnqu0", variantClassNames: { variant: { primary: "_1xajnqu1", secondary: "_1xajnqu2" } }, defaultVariants: {}, compoundVariants: [] });
 export {

package/dist/icons/DownloadIcon/DownloadIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                       */
-/* empty css                                          */
-/* empty css                                                           */
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                                */
 var DownloadColor = "_1r03g400";
 export {
   DownloadColor

package/dist/icons/FollowIcon/FollowIcon.css.js

@@ -1,6 +1,6 @@
-/* empty css                                       */
-/* empty css                                          */
-/* empty css                                                       */
+/* empty css                                   */
+/* empty css                                      */
+/* empty css                              */
 var FollowColor = "_1wjdwci0";
 export {
   FollowColor

package/dist/icons/Star/Star.css.js

@@ -1,4 +1,4 @@
-/* empty css                                           */
+/* empty css                        */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var Star = createRuntimeFn({ defaultClassName: "mi4mae0", variantClassNames: { variant: { gold: "mi4mae1", gray: "mi4mae2" } }, defaultVariants: {}, compoundVariants: [] });
 export {

package/dist/index.css.js

@@ -1,3 +1,3 @@
-/* empty css                               */
-/* empty css                                             */
-/* empty css                             */
+/* empty css                           */
+/* empty css                                         */
+/* empty css                         */

package/dist/themes/axos.css.js

@@ -1,4 +1,4 @@
-/* empty css                                    */
+/* empty css                        */
 var axosTheme = "_1073cm80";
 var vars = { colors: { primary: { background: "var(--_1073cm81)", body: "var(--_1073cm82)", headline: "var(--_1073cm83)", textGradient: "var(--_1073cm84)", textButton: "var(--_1073cm85)", backgroundButton: "var(--_1073cm86)", border: "var(--_1073cm87)" }, secondary: { background: "var(--_1073cm88)", body: "var(--_1073cm89)", headline: "var(--_1073cm8a)", textGradient: "var(--_1073cm8b)", textButton: "var(--_1073cm8c)", backgroundButton: "var(--_1073cm8d)", border: "var(--_1073cm8e)" }, tertiary: { background: "var(--_1073cm8f)", body: "var(--_1073cm8g)", headline: "var(--_1073cm8h)", textGradient: "var(--_1073cm8i)", textButton: "var(--_1073cm8j)", backgroundButton: "var(--_1073cm8k)", border: "var(--_1073cm8l)" }, quaternary: { background: "var(--_1073cm8m)", body: "var(--_1073cm8n)", headline: "var(--_1073cm8o)", textGradient: "var(--_1073cm8p)", textButton: "var(--_1073cm8q)", backgroundButton: "var(--_1073cm8r)", border: "var(--_1073cm8s)" } }, error: "var(--_1073cm8t)", disabled: { border: "var(--_1073cm8u)", color: "var(--_1073cm8v)", background: "var(--_1073cm8w)" }, icons: { check: { primary: "var(--_1073cm8x)", secondary: "var(--_1073cm8y)" } }, table: { highlight: "var(--_1073cm8z)", color: "var(--_1073cm810)" }, footer: { link: { color: "var(--_1073cm811)" } } };
 export {

package/dist/themes/premier.css.js

@@ -1,5 +1,5 @@
-/* empty css                                    */
-/* empty css                                       */
+/* empty css                        */
+/* empty css                           */
 var premierTheme = "_1es6o1h0";
 export {
   premierTheme

package/dist/utils/allowedAxosDomains.js

@@ -16,7 +16,7 @@ const moreDomains = {
   "{AFP}": process.env.AFP_URL || "https://afp.axosbank.com",
   "{INVESTORS}": process.env.INVESTORS_URL || "https://investors.axosfinancial.com",
   "{OBAXB}": process.env.ONLINEBANKING_URL || "https://onlinebanking.axosbank.com",
-  "{UNVENROLLMENT}": String(process.env.UNVENROLLMENT_URL) || "https://enroll.axosbank.com",
+  "{UNVENROLLMENT}": process.env.UNVENROLLMENT_URL || "https://enroll.axosbank.com",
   "{AUTOAXB}": "https://auto.axosbank.com/partner/axos-purchase/AU"
 };
 const isAllowedUrl = (url) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.113",
+  "version": "0.0.115",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -31,9 +31,8 @@
     "@hookform/resolvers": "^3.9.0",
     "@react-input/mask": "^1.2.5",
     "@react-input/number-format": "^1.0.27",
-    "@storybook/builder-vite": "^7.6.19",
     "@storybook/icons": "^1.2.9",
-    "@storybook/preview-api": "^7.6.19",
+    "@storybook/preview-api": "^8.2.9",
     "@types/iframe-resizer": "3.5.13",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/recipes": "^0.5.1",
@@ -58,19 +57,22 @@
     "@vanilla-extract/vite-plugin": "^4.0.3",
     "next": "^14.1.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-slick": "^0.30.2"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1.8.0",
     "@rollup/plugin-alias": "^5.1.0",
-    "@storybook/addon-essentials": "^7.6.19",
-    "@storybook/addon-interactions": "^7.6.19",
-    "@storybook/addon-links": "^7.6.19",
-    "@storybook/addon-onboarding": "^8.1.0",
-    "@storybook/addon-themes": "^7.6.19",
-    "@storybook/blocks": "^7.6.19",
-    "@storybook/react": "^7.6.19",
-    "@storybook/react-vite": "^7.6.19",
-    "@storybook/test": "^7.6.19",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-mdx-gfm": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/addon-themes": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-prettier": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
@@ -100,7 +102,7 @@
     "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-svg-import": "^3.0.0",
     "rollup-plugin-svgo": "^2.0.0",
-    "storybook": "^7.6.19",
+    "storybook": "^8.2.9",
     "typescript": "^5.4.5",
     "typescript-plugin-css-modules": "^5.1.0",
     "vite": "^5.3.4",