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

package/dist/HeroBanner/index.js

@@ -63,10 +63,8 @@ const HeroBanner = ({
                 "data-nimg": 1,
                 className: "img_fluid",
                 style: { color: "transparent" },
-                src: `${image.src}?fm=png&w=500&h=400&fit=fill&r=20`,
-                alt: image.alt,
-                width: 500,
-                height: 400
+                src: `${image.src}?w=604&h=480&fit=fill`,
+                alt: image.alt
               }
             ) })
           ]

package/dist/ImageBillboard/ImageBillboard.d.ts

@@ -1,2 +1,2 @@
 import type { ImageBillboardSetProps as Props } from "./ImageBillboard.interface";
-export declare const ImageBillboard: ({ id, variant, headline, bodyCopy, additionalDetails, imageBillboards, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageBillboardSet: ({ id, variant, headline, bodyCopy, additionalDetails, imageBillboards, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/ImageBillboard/ImageBillboard.js

@@ -9,7 +9,7 @@ import clsx from "clsx";
 import { Button } from "../Button/index.js";
 import { inline_container } from "../SetContainer/SetContainer.css.js";
 import { section_text_ImageBillboard, header, billboard, billboard_container, billboard_img, body, billboard_body, billboard_header_section, supertag, billboard_ctas } from "./ImageBillboard.css.js";
-const ImageBillboard = ({
+const ImageBillboardSet = ({
   id,
   variant,
   headline,
@@ -128,5 +128,5 @@ const ImageBillboard = ({
   ] }, id);
 };
 export {
-  ImageBillboard
+  ImageBillboardSet
 };

package/dist/ImageBillboard/ImageBillboardSet.d.ts

@@ -1,2 +1,2 @@
 import { ImageBillboardInterface } from "./ImageBillboard.interface";
-export declare const ImageBillboardSet: ({ id, variant, headline, bodyCopy, bordered, bullets, callToActionRow, eyebrow, image, imagePlacement: position, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageBillboard: ({ id, variant, headline, bodyCopy, bordered, bullets, callToActionRow, eyebrow, image, imagePlacement: position, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/ImageBillboard/ImageBillboardSet.js

@@ -8,7 +8,7 @@ import SvgCheckIcon from "../icons/CheckIcon/index.js";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { billboard, imagePlacement, billboard_img, body, billboard_body, billboard_header_section, supertag, header, billboard_ctas } from "./ImageBillboard.css.js";
-const ImageBillboardSet = ({
+const ImageBillboard = ({
   id,
   variant,
   headline,
@@ -102,5 +102,5 @@ const ImageBillboardSet = ({
   );
 };
 export {
-  ImageBillboardSet
+  ImageBillboard
 };

package/dist/ImageBillboard/index.js

@@ -1,6 +1,6 @@
-import { ImageBillboard } from "./ImageBillboard.js";
+import { ImageBillboardSet } from "./ImageBillboard.js";
 import { billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_img, body, header, imagePlacement, section_text_ImageBillboard, single_container, supertag, three_inline, two_inline } from "./ImageBillboard.css.js";
-import { ImageBillboardSet } from "./ImageBillboardSet.js";
+import { ImageBillboard } from "./ImageBillboardSet.js";
 export {
   ImageBillboard,
   ImageBillboardSet,

package/dist/NavigationMenu/AxosFiduciary/MobileToggle.d.ts

@@ -0,0 +1,2 @@
+declare const MobileToggle: () => import("react/jsx-runtime").JSX.Element;
+export default MobileToggle;

package/dist/NavigationMenu/AxosFiduciary/MobileToggle.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useState } from "react";
+import { NavItem } from "../NavItem/index.js";
+import styles from "./NavBar.module.js";
+import { navItems } from "./NavData.js";
+const MobileToggle = () => {
+  const [isOpenMobile, setisOpenMobile] = useState(false);
+  const mobileToggle = () => setisOpenMobile(!isOpenMobile);
+  return /* @__PURE__ */ jsxs("header", { children: [
+    /* @__PURE__ */ jsx("div", { className: `${styles.header} bg_white`, children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.header_main_row} flex_row between middle`, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: clsx(styles.mobile_only, styles.hamburger),
+          onClick: mobileToggle,
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: 24,
+              height: 24,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  clipRule: "evenodd",
+                  d: "M22.5 15.75V17.25H1.5V15.75H22.5ZM22.5 11.25V12.75H1.5V11.25H22.5ZM22.5 6.75V8.25H1.5V6.75H22.5Z",
+                  fill: "#4A5560"
+                }
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: `${styles.mobile_only} ${styles.mobile_logo}`, children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: "//images.axos.com/o9ov1v03uwqk/70DeSnNiwKxnnpoNEmdHYc/c89285e7f92b31397b49e09ddb9ea14d/afs-logo-mobile.svg",
+          alt: "",
+          width: 113,
+          height: 58
+        }
+      ) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          styles.mobile_nav,
+          styles.mobile_only,
+          "relative",
+          "bg_white",
+          isOpenMobile ? styles.mobile_opened : ""
+        ),
+        "aria-expanded": isOpenMobile,
+        role: "menu",
+        children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.inner_wrapper, "bg_white"), children: [
+          /* @__PURE__ */ jsxs("div", { className: `${styles.mobile_header} relative text_center`, children: [
+            /* @__PURE__ */ jsx("p", { role: "heading", children: "Welcome" }),
+            /* @__PURE__ */ jsx("button", { onClick: mobileToggle, "aria-label": "close navigation menu", children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: 24,
+                height: 24,
+                viewBox: "0 0 24 24",
+                fill: "none",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M20.2812 2.65625L21.3419 3.71691L13.0602 11.9982L21.3419 20.2812L20.2812 21.3419L11.9982 13.0602L3.71691 21.3419L2.65625 20.2812L10.9377 11.9982L2.65625 3.71691L3.71691 2.65625L11.9982 10.9377L20.2812 2.65625Z",
+                    fill: "#4A5560"
+                  }
+                )
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: styles.mobile_body, children: [
+            navItems.map((item, i) => /* @__PURE__ */ jsx(
+              NavItem,
+              {
+                className: styles.main_nav_link,
+                index: i,
+                name: item.name,
+                url: item.url
+              },
+              i
+            )),
+            /* @__PURE__ */ jsxs("ul", { className: "list_unstyled", children: [
+              /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_1", children: /* @__PURE__ */ jsx("a", { href: "#", children: "About Us" }) }),
+              /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_2", children: /* @__PURE__ */ jsx("a", { href: "/services", children: "Services" }) }),
+              /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_3", children: /* @__PURE__ */ jsx("a", { href: "/Software", children: "Software" }) }),
+              /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_4", children: /* @__PURE__ */ jsx("a", { href: "/Contact", children: "Contact" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.mobile_footer, children: /* @__PURE__ */ jsxs("div", { className: "flex_row between", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `${styles.mobile_footer_content} flex_col between`,
+                children: [
+                  /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: "Contact a Specialist Today!" }) }),
+                  /* @__PURE__ */ jsx("div", { className: styles.footer_cta, children: /* @__PURE__ */ jsx("a", { href: "/contact", children: "Talk With Us" }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: styles.mobile_footer_media, children: " " })
+          ] }) })
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  MobileToggle as default
+};

package/dist/NavigationMenu/AxosFiduciary/NavBar.module.js

@@ -1,43 +1,43 @@
-const header = "_header_106qs_1";
-const wrapper = "_wrapper_106qs_5";
-const header_main_row = "_header_main_row_106qs_11";
-const mobile_header = "_mobile_header_106qs_12";
-const logo_wrap = "_logo_wrap_106qs_18";
-const primary_links = "_primary_links_106qs_22";
-const main_nav = "_main_nav_106qs_26";
-const main_nav_link = "_main_nav_link_106qs_33";
-const sub_nav_link = "_sub_nav_link_106qs_55";
-const signin_wrap = "_signin_wrap_106qs_57";
-const signin_btn = "_signin_btn_106qs_58";
-const sub_nav = "_sub_nav_106qs_55";
-const header_sub_row = "_header_sub_row_106qs_99";
-const shadow = "_shadow_106qs_115";
-const opacity = "_opacity_106qs_131";
-const fadeInDown = "_fadeInDown_106qs_1";
-const footer = "_footer_106qs_137";
-const open = "_open_106qs_153";
-const mt_8 = "_mt_8_106qs_161";
-const mt_16 = "_mt_16_106qs_165";
-const ml_8 = "_ml_8_106qs_169";
-const reversed_row = "_reversed_row_106qs_173";
-const nav_anchor = "_nav_anchor_106qs_177";
-const site_lists = "_site_lists_106qs_188";
-const hamburger = "_hamburger_106qs_192";
-const mobile_logo = "_mobile_logo_106qs_206";
-const mobile_nav = "_mobile_nav_106qs_229";
-const mobile_opened = "_mobile_opened_106qs_241";
-const mobile_nav_item = "_mobile_nav_item_106qs_245";
-const icon_wrap = "_icon_wrap_106qs_260";
-const mobile_footer = "_mobile_footer_106qs_265";
-const mobile_footer_content = "_mobile_footer_content_106qs_271";
-const mobile_footer_media = "_mobile_footer_media_106qs_285";
-const footer_cta = "_footer_cta_106qs_292";
-const inner_wrapper = "_inner_wrapper_106qs_324";
-const btn = "_btn_106qs_328";
-const sub_menu = "_sub_menu_106qs_333";
-const main = "_main_106qs_26";
-const desktop_only = "_desktop_only_106qs_362";
-const mobile_only = "_mobile_only_106qs_409";
+const header = "_header_nlu6n_1";
+const wrapper = "_wrapper_nlu6n_5";
+const header_main_row = "_header_main_row_nlu6n_11";
+const mobile_header = "_mobile_header_nlu6n_12";
+const logo_wrap = "_logo_wrap_nlu6n_18";
+const primary_links = "_primary_links_nlu6n_22";
+const main_nav = "_main_nav_nlu6n_26";
+const main_nav_link = "_main_nav_link_nlu6n_33";
+const sub_nav_link = "_sub_nav_link_nlu6n_55";
+const signin_wrap = "_signin_wrap_nlu6n_57";
+const signin_btn = "_signin_btn_nlu6n_58";
+const sub_nav = "_sub_nav_nlu6n_55";
+const header_sub_row = "_header_sub_row_nlu6n_99";
+const shadow = "_shadow_nlu6n_115";
+const opacity = "_opacity_nlu6n_131";
+const fadeInDown = "_fadeInDown_nlu6n_1";
+const footer = "_footer_nlu6n_137";
+const open = "_open_nlu6n_153";
+const mt_8 = "_mt_8_nlu6n_161";
+const mt_16 = "_mt_16_nlu6n_165";
+const ml_8 = "_ml_8_nlu6n_169";
+const reversed_row = "_reversed_row_nlu6n_173";
+const nav_anchor = "_nav_anchor_nlu6n_177";
+const site_lists = "_site_lists_nlu6n_188";
+const hamburger = "_hamburger_nlu6n_192";
+const mobile_logo = "_mobile_logo_nlu6n_206";
+const mobile_nav = "_mobile_nav_nlu6n_229";
+const mobile_opened = "_mobile_opened_nlu6n_241";
+const mobile_nav_item = "_mobile_nav_item_nlu6n_245";
+const icon_wrap = "_icon_wrap_nlu6n_260";
+const mobile_footer = "_mobile_footer_nlu6n_265";
+const mobile_footer_content = "_mobile_footer_content_nlu6n_271";
+const mobile_footer_media = "_mobile_footer_media_nlu6n_285";
+const footer_cta = "_footer_cta_nlu6n_292";
+const inner_wrapper = "_inner_wrapper_nlu6n_324";
+const btn = "_btn_nlu6n_328";
+const sub_menu = "_sub_menu_nlu6n_333";
+const main = "_main_nlu6n_26";
+const desktop_only = "_desktop_only_nlu6n_362";
+const mobile_only = "_mobile_only_nlu6n_409";
 const styles = {
   header,
   wrapper,

package/dist/NavigationMenu/AxosFiduciary/NavData.d.ts

@@ -0,0 +1,4 @@
+export declare const navItems: {
+    name: string;
+    url: string;
+}[];

package/dist/NavigationMenu/AxosFiduciary/NavData.js

@@ -0,0 +1,9 @@
+const navItems = [
+  { name: "About Us", url: "/about-us" },
+  { name: "Services", url: "/services" },
+  { name: "Software", url: "/software" },
+  { name: "Contact", url: "/contact" }
+];
+export {
+  navItems
+};

package/dist/NavigationMenu/AxosFiduciary/index.js

@@ -1,11 +1,25 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { NavItem } from "../NavItem/index.js";
 import styles from "./NavBar.module.js";
+import { navItems } from "./NavData.js";
 const NavBarAFS = () => {
   const [isOpenMobile, setisOpenMobile] = useState(false);
   const mobileToggle = () => setisOpenMobile(!isOpenMobile);
+  const [activeIndex, setActiveIndex] = useState();
+  const handleClick = (index) => setActiveIndex(index);
+  const getActiveIndex = () => {
+    const pathname = "/" + location.pathname.split("/")[1];
+    const index = navItems.findIndex(
+      (path) => path.url === pathname
+    );
+    setActiveIndex(index);
+  };
+  useEffect(() => {
+    getActiveIndex();
+  }, [activeIndex]);
   return /* @__PURE__ */ jsxs("header", { children: [
     /* @__PURE__ */ jsx("div", { className: `${styles.header} bg_white`, children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.header_main_row} flex_row between middle`, children: [
       /* @__PURE__ */ jsx("div", { className: `${styles.desktop_only} flex_row middle`, children: /* @__PURE__ */ jsxs("div", { className: `${styles.main_nav} flex_row middle`, children: [
@@ -25,12 +39,20 @@ const NavBarAFS = () => {
             )
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: styles.primary_links, children: /* @__PURE__ */ jsxs("ul", { className: "list_unstyled flex_row middle", role: "menu", children: [
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/about-us", className: "active", role: "menuitem", children: "About Us" }) }),
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/services", role: "menuitem", children: "Services" }) }),
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/software", role: "menuitem", children: "Software" }) }),
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "contact", role: "menuitem", children: "Contact" }) })
-        ] }) })
+        /* @__PURE__ */ jsx("div", { className: styles.primary_links, children: /* @__PURE__ */ jsx("ul", { className: "list_unstyled flex_row middle", role: "menu", children: navItems.map(
+          (item, i) => /* @__PURE__ */ jsx(
+            NavItem,
+            {
+              className: styles.main_nav_link,
+              onClick: handleClick,
+              index: i,
+              name: item.name,
+              url: item.url,
+              isActive: activeIndex == i
+            },
+            i
+          )
+        ) }) })
       ] }) }),
       /* @__PURE__ */ jsx(
         "button",

package/dist/NavigationMenu/NavItem/index.d.ts

@@ -0,0 +1,10 @@
+export interface NavItemProps {
+    className: string;
+    url: string;
+    index: number;
+    name: string;
+    onClick?: (index: number) => void;
+    isActive?: boolean;
+}
+export declare const NavItem: ({ className, url, name, index, onClick, isActive, }: NavItemProps) => import("react/jsx-runtime").JSX.Element;
+export default NavItem;

package/dist/NavigationMenu/NavItem/index.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+const NavItem = ({
+  className,
+  url,
+  name,
+  index,
+  onClick,
+  isActive
+}) => {
+  const handleClick = () => onClick && onClick(index);
+  return /* @__PURE__ */ jsx("li", { className, children: /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: url,
+      className: isActive ? "active" : "",
+      role: "menuitem",
+      onClick: handleClick,
+      children: name
+    }
+  ) });
+};
+export {
+  NavItem,
+  NavItem as default
+};

package/dist/assets/Button/Button.css

@@ -99,6 +99,7 @@
   background: transparent;
   text-decoration: none;
   color: #5E6A74;
+  border-color: transparent;
 }
 ._13pdpuje {
   background: #8F8F8F;
@@ -109,6 +110,7 @@
   background: #8F8F8F;
   text-decoration: none;
   color: #FFFFFF;
+  border-color: #8F8F8F;
 }
 ._13pdpujf {
   background: #8F8F8F;
@@ -119,6 +121,7 @@
   background: #8F8F8F;
   text-decoration: none;
   color: #FFFFFF;
+  border-color: #8F8F8F;
 }
 ._13pdpujg {
   height: 50px;

package/dist/assets/HeroBanner/HeroBanner.css

@@ -34,6 +34,9 @@
   justify-content: flex-end;
 }
 ._1ye8k3f8 img {
+  max-width: 663px;
+  object-fit: cover;
+  aspect-ratio: 1 / 1;
   max-height: 480px;
 }
 ._1ye8k3fa {

package/dist/assets/ImageBillboard/ImageBillboard.css

@@ -85,7 +85,6 @@
   min-height: 304px;
   object-fit: cover;
   aspect-ratio: 1 / 1;
-  min-width: 600px;
 }
 ._1m7m2an {
   padding: 32px 28px;

package/dist/assets/NavigationMenu/AxosFiduciary/NavBar.css.css

@@ -1,50 +1,50 @@
-._header_106qs_1 {
+._header_nlu6n_1 {
   border-bottom: 1px solid #ebebeb;
 }
 
-._wrapper_106qs_5 {
+._wrapper_nlu6n_5 {
   width: calc(100% - 80px);
   margin-left: auto;
   margin-right: auto;
 }
 
-._header_main_row_106qs_11,
-._mobile_header_106qs_12 {
+._header_main_row_nlu6n_11,
+._mobile_header_nlu6n_12 {
   min-height: 80px;
   padding-top: 1rem;
   padding-bottom: 0.5rem;
 }
 
-._logo_wrap_106qs_18 {
+._logo_wrap_nlu6n_18 {
   padding: 9px 6px;
 }
 
-._primary_links_106qs_22 {
+._primary_links_nlu6n_22 {
   margin-left: 30px;
 }
 
-._main_nav_106qs_26 {
+._main_nav_nlu6n_26 {
   margin: 0 auto;
   width: 94%;
   max-width: 1640px;
   justify-content: space-between;
 }
 
-._main_nav_link_106qs_33 {
+._main_nav_link_nlu6n_33 {
   padding: 10px 8px;
   text-align: center;
 }
 
-._main_nav_link_106qs_33 .active {
+._main_nav_link_nlu6n_33 .active {
   border-color: currentColor;
   transition: border-color 0.5s ease;
 }
 
-._main_nav_link_106qs_33 .active {
+._main_nav_link_nlu6n_33 .active {
   font-weight: 700;
 }
 
-._main_nav_link_106qs_33 > a {
+._main_nav_link_nlu6n_33 > a {
   color: #1e3860;
   display: inline-block;
   font-size: 18px;
@@ -52,26 +52,26 @@
   border-bottom: 4px solid transparent;
 }
 
-._sub_nav_link_106qs_55 a,
-._main_nav_link_106qs_33 a,
-._signin_wrap_106qs_57 a,
-._signin_btn_106qs_58 {
+._sub_nav_link_nlu6n_55 a,
+._main_nav_link_nlu6n_33 a,
+._signin_wrap_nlu6n_57 a,
+._signin_btn_nlu6n_58 {
   text-decoration: none;
   transition: opacity 0.3s ease;
 }
 
-._sub_nav_link_106qs_55:hover,
-._main_nav_link_106qs_33 a:hover,
-._signin_wrap_106qs_57 a:hover {
+._sub_nav_link_nlu6n_55:hover,
+._main_nav_link_nlu6n_33 a:hover,
+._signin_wrap_nlu6n_57 a:hover {
   opacity: 0.8;
 }
 
-._signin_wrap_106qs_57 .link {
+._signin_wrap_nlu6n_57 .link {
   text-decoration: none;
   padding: 8px;
 }
 
-._signin_btn_106qs_58 {
+._signin_btn_nlu6n_58 {
   background-color: #2f5b88;
   border: none;
   color: #fff;
@@ -84,39 +84,39 @@
   cursor: pointer;
 }
 
-._signin_btn_106qs_58:hover {
+._signin_btn_nlu6n_58:hover {
   opacity: 0.9;
 }
 
-._signin_btn_106qs_58 > span {
+._signin_btn_nlu6n_58 > span {
   margin-right: 8px;
 }
 
-._sub_nav_106qs_55 {
+._sub_nav_nlu6n_55 {
   background-color: #1e3860;
 }
 
-._header_sub_row_106qs_99 {
+._header_sub_row_nlu6n_99 {
   padding-block: 12px;
   min-height: 48px;
 }
 
-._sub_nav_link_106qs_55 {
+._sub_nav_link_nlu6n_55 {
   padding-inline: 1rem;
   text-align: center;
   color: #fff;
 }
 
-._sub_nav_link_106qs_55 a {
+._sub_nav_link_nlu6n_55 a {
   font-weight: 500;
   line-height: 1.5;
 }
 
-._shadow_106qs_115 {
+._shadow_nlu6n_115 {
   box-shadow: 0px 8px 16px 0px rgba(30, 38, 47, 0.2);
 }
 
-@keyframes _fadeInDown_106qs_1 {
+@keyframes _fadeInDown_nlu6n_1 {
   from {
     opacity: 0;
     transform: translate3d(0, -1%, 0);
@@ -128,18 +128,18 @@
   }
 }
 
-._opacity_106qs_131 {
+._opacity_nlu6n_131 {
   animation-duration: 0.5s;
   animation-fill-mode: both;
-  animation-name: _fadeInDown_106qs_1;
+  animation-name: _fadeInDown_nlu6n_1;
 }
 
-._footer_106qs_137 {
+._footer_nlu6n_137 {
   margin-top: 0.5rem;
   padding-top: 1rem;
 }
 
-._footer_106qs_137::before {
+._footer_nlu6n_137::before {
   content: "";
   background-color: #8f8f8f;
   height: 2px;
@@ -150,31 +150,31 @@
   width: 94%;
 }
 
-._open_106qs_153 {
+._open_nlu6n_153 {
   opacity: 0.8;
 }
 
-._open_106qs_153 > img {
+._open_nlu6n_153 > img {
   transform: scaleY(-1);
 }
 
-._mt_8_106qs_161 {
+._mt_8_nlu6n_161 {
   margin-top: 8px;
 }
 
-._mt_16_106qs_165 {
+._mt_16_nlu6n_165 {
   margin-top: 1rem;
 }
 
-._ml_8_106qs_169 {
+._ml_8_nlu6n_169 {
   margin-left: 8px;
 }
 
-._reversed_row_106qs_173 {
+._reversed_row_nlu6n_173 {
   flex-direction: row-reverse;
 }
 
-._nav_anchor_106qs_177 {
+._nav_anchor_nlu6n_177 {
   width: 1.5rem;
   height: 1.5rem;
   aspect-ratio: 1;
@@ -182,14 +182,14 @@
   border-radius: 8px;
 }
 
-._sub_nav_link_106qs_55:hover,
-._signin_wrap_106qs_57 a:hover,
-._main_nav_link_106qs_33 a:not(.active):hover,
-._site_lists_106qs_188 a:hover {
+._sub_nav_link_nlu6n_55:hover,
+._signin_wrap_nlu6n_57 a:hover,
+._main_nav_link_nlu6n_33 a:not(.active):hover,
+._site_lists_nlu6n_188 a:hover {
   text-decoration: underline;
 }
 
-._hamburger_106qs_192 {
+._hamburger_nlu6n_192 {
   background: transparent;
   border: none;
   font-size: 0px;
@@ -197,36 +197,36 @@
   outline: none;
 }
 
-._hamburger_106qs_192:hover,
-._mobile_header_106qs_12 button:hover {
+._hamburger_nlu6n_192:hover,
+._mobile_header_nlu6n_12 button:hover {
   cursor: pointer;
   opacity: 0.8;
 }
 
-._mobile_logo_106qs_206 {
+._mobile_logo_nlu6n_206 {
   flex: 1 1 0%;
   text-align: center;
 }
 
-._mobile_header_106qs_12 {
+._mobile_header_nlu6n_12 {
   padding-bottom: 1rem;
   display: grid;
   place-items: center;
   border-bottom: 1px solid #ebebeb;
 }
 
-._mobile_header_106qs_12 p {
+._mobile_header_nlu6n_12 p {
   font: 400 20px / 1.3 var(--main-font-family);
 }
 
-._mobile_header_106qs_12 button {
+._mobile_header_nlu6n_12 button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 40px;
 }
 
-._mobile_nav_106qs_229 {
+._mobile_nav_nlu6n_229 {
   border-right: 1px solid #ebebeb;
   left: -100%;
   min-height: 100vh;
@@ -238,16 +238,16 @@
   z-index: 9999999;
 }
 
-._mobile_opened_106qs_241 {
+._mobile_opened_nlu6n_241 {
   left: 0%;
 }
 
-._mobile_nav_item_106qs_245 {
+._mobile_nav_item_nlu6n_245 {
   background-color: #fff;
   border-bottom: 1px solid #ebebeb;
 }
 
-._mobile_nav_item_106qs_245 > a {
+._mobile_nav_item_nlu6n_245 > a {
   color: #333d46;
   display: flex;
   font-weight: 700;
@@ -257,24 +257,24 @@
   width: 100%;
 }
 
-._icon_wrap_106qs_260 {
+._icon_wrap_nlu6n_260 {
   line-height: 1;
   height: 24px;
 }
 
-._mobile_footer_106qs_265 {
+._mobile_footer_nlu6n_265 {
   position: fixed;
   bottom: 0;
   width: 100%;
 }
 
-._mobile_footer_content_106qs_271 {
+._mobile_footer_content_nlu6n_271 {
   background-color: #f4f4f4;
   flex: 1 1 0%;
   padding: 16px 24px 16px 40px;
 }
 
-._mobile_footer_content_106qs_271 p {
+._mobile_footer_content_nlu6n_271 p {
   line-height: 1.5;
   text-overflow: ellipsis;
   display: -webkit-box;
@@ -282,18 +282,18 @@
   -webkit-line-clamp: 2;
 }
 
-._mobile_footer_media_106qs_285 {
+._mobile_footer_media_nlu6n_285 {
   flex-basis: 42%;
   background: url("https://images.axos.com/o9ov1v03uwqk/7bX71xagL9g8Bc0gqlHLR/e51fb20a12c50b5e7458a4cf15567964/afs-nav-footer.jpg")
     no-repeat right center / cover;
   background-color: #f4f4f4;
 }
 
-._footer_cta_106qs_292 {
+._footer_cta_nlu6n_292 {
   margin-top: 3px;
 }
 
-._footer_cta_106qs_292 a {
+._footer_cta_nlu6n_292 a {
   background-color: #2f5b88;
   border-radius: 4px;
   border: 2px solid transparent;
@@ -304,40 +304,40 @@
   text-decoration: none;
 }
 
-._footer_cta_106qs_292 a:hover {
+._footer_cta_nlu6n_292 a:hover {
   background-color: transparent;
   border-color: #2f5b88;
   color: #2f5b88;
   text-decoration: underline;
 }
 
-._footer_cta_106qs_292 a:active {
+._footer_cta_nlu6n_292 a:active {
   background-color: #2f5b88;
   border-color: transparent;
   color: #fff;
 }
 
-._mobile_footer_106qs_265 > .flex_row {
+._mobile_footer_nlu6n_265 > .flex_row {
   min-height: 112px;
 }
 
-._inner_wrapper_106qs_324 {
+._inner_wrapper_nlu6n_324 {
   max-height: calc(100vh - 117px);
 }
 
-._btn_106qs_328 {
+._btn_nlu6n_328 {
   display: block;
   position: relative;
 }
 
-._sub_menu_106qs_333 {
+._sub_menu_nlu6n_333 {
   overflow: hidden;
   max-height: 0;
   transition: max-height 0.8s ease-out;
   background: #fff;
 }
 
-._sub_menu_106qs_333 a {
+._sub_menu_nlu6n_333 a {
   display: block;
   padding: 12px 14px 12px 64px;
   position: relative;
@@ -345,28 +345,28 @@
   text-decoration: none;
 }
 
-._sub_menu_106qs_333 a._main_106qs_26 {
+._sub_menu_nlu6n_333 a._main_nlu6n_26 {
   font-weight: 700;
 }
 
-._sub_menu_106qs_333 a + a {
+._sub_menu_nlu6n_333 a + a {
   border-top: 1px solid #ebebeb;
 }
 
 @media (max-width: 1280px) and (min-width: 1024px) {
-  ._wrapper_106qs_5 {
+  ._wrapper_nlu6n_5 {
     width: calc(100% - 28px);
   }
 }
 
-._desktop_only_106qs_362 {
+._desktop_only_nlu6n_362 {
   margin: 0 auto;
   width: 94%;
   max-width: 1640px;
 }
 
 @media (max-width: 1075px) {
-  ._desktop_only_106qs_362 {
+  ._desktop_only_nlu6n_362 {
     display: none !important;
     margin: 0 auto;
     width: 94%;
@@ -375,30 +375,30 @@
 }
 
 @media (max-width: 768px) {
-  ._wrapper_106qs_5 {
+  ._wrapper_nlu6n_5 {
     width: calc(100% - 48px);
   }
 
-  ._mobile_header_106qs_12 button {
+  ._mobile_header_nlu6n_12 button {
     right: 1.5rem;
   }
 
-  ._mobile_nav_item_106qs_245 > a {
+  ._mobile_nav_item_nlu6n_245 > a {
     padding: 16px 24px;
   }
 
-  ._sub_menu_106qs_333 a {
+  ._sub_menu_nlu6n_333 a {
     padding-left: 48px;
   }
 
-  ._mobile_footer_content_106qs_271 {
+  ._mobile_footer_content_nlu6n_271 {
     padding-right: 15px;
     padding-left: 24px;
   }
 }
 
 @media (max-width: 450px) {
-  ._footer_cta_106qs_292 a {
+  ._footer_cta_nlu6n_292 a {
     white-space: break-spaces;
     width: 100%;
     text-align: center;
@@ -406,14 +406,14 @@
 }
 
 @media (min-width: 1076px) {
-  ._mobile_only_106qs_409 {
+  ._mobile_only_nlu6n_409 {
     display: none !important;
   }
 }
 
 @media (max-width: 1076px) {
-  ._mobile_logo_106qs_206 {
+  ._mobile_logo_nlu6n_206 {
     margin: 10px auto;
-    max-width: 150px;
+    max-width: 110px;
   }
 }

package/dist/assets/globals.css

@@ -225,6 +225,11 @@ hide {
   max-width: 49.5rem;
   text-align: center;
 }
+sup {
+  vertical-align: top;
+  position: relative;
+  top: -0.5em;
+}
 @media screen and (max-width: 1023px) {
   .containment {
     width: min(41.25rem, calc(100% - 4rem));

package/dist/main.js

@@ -22,9 +22,9 @@ import { HeroBanner } from "./HeroBanner/index.js";
 import { IconBillboard } from "./IconBillboard/IconBillboard.js";
 import { billboard_icon, buttons, containerIconBillboard, content, headerIconBillboard, header_section, layout, list, listItem, section_container, section_text, title } from "./IconBillboard/IconBillboard.css.js";
 import { IconBillboardSet } from "./IconBillboard/IconBillboardSet.js";
-import { ImageBillboard } from "./ImageBillboard/ImageBillboard.js";
+import { ImageBillboardSet } from "./ImageBillboard/ImageBillboard.js";
 import { billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_img, body, header, imagePlacement, section_text_ImageBillboard, single_container, supertag, three_inline, two_inline } from "./ImageBillboard/ImageBillboard.css.js";
-import { ImageBillboardSet } from "./ImageBillboard/ImageBillboardSet.js";
+import { ImageBillboard } from "./ImageBillboard/ImageBillboardSet.js";
 import { Input } from "./Input/index.js";
 import { MainHTML } from "./MainHTML/index.js";
 import { Modal } from "./Modal/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -47,7 +47,6 @@
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/recipes": "^0.5.1",
     "@vanilla-extract/vite-plugin": "^4.0.3",
-    "next": "14.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },