@axos-web-dev/shared-components 0.0.94 → 0.0.96

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

@@ -1,34 +1,34 @@
-const header = "_header_n5dx1_1";
-const wrapper = "_wrapper_n5dx1_5";
-const header_main_row = "_header_main_row_n5dx1_11";
-const mobile_header = "_mobile_header_n5dx1_12";
-const logo_wrap = "_logo_wrap_n5dx1_18";
-const primary_links = "_primary_links_n5dx1_22";
-const main_nav_link = "_main_nav_link_n5dx1_26";
-const sub_nav_link = "_sub_nav_link_n5dx1_45";
-const signin_wrap = "_signin_wrap_n5dx1_47";
-const signin_btn = "_signin_btn_n5dx1_48";
-const sub_nav = "_sub_nav_n5dx1_45";
-const header_sub_row = "_header_sub_row_n5dx1_100";
-const hamburger = "_hamburger_n5dx1_129";
-const mobile_only = "_mobile_only_n5dx1_143";
-const mobile_logo = "_mobile_logo_n5dx1_149";
-const highlight = "_highlight_n5dx1_154";
-const mobile_nav = "_mobile_nav_n5dx1_181";
-const mobile_opened = "_mobile_opened_n5dx1_192";
-const mobile_nav_item = "_mobile_nav_item_n5dx1_200";
-const has_dropdown = "_has_dropdown_n5dx1_215";
-const icon_wrap = "_icon_wrap_n5dx1_236";
-const mobile_footer = "_mobile_footer_n5dx1_241";
-const mobile_footer_content = "_mobile_footer_content_n5dx1_246";
-const mobile_footer_media = "_mobile_footer_media_n5dx1_260";
-const footer_cta = "_footer_cta_n5dx1_266";
-const inner_wrapper = "_inner_wrapper_n5dx1_294";
-const btn = "_btn_n5dx1_299";
-const sub_menu = "_sub_menu_n5dx1_304";
-const main = "_main_n5dx1_26";
-const dd_footer = "_dd_footer_n5dx1_329";
-const desktop_only = "_desktop_only_n5dx1_354";
+const header = "_header_11jbd_1";
+const wrapper = "_wrapper_11jbd_5";
+const header_main_row = "_header_main_row_11jbd_11";
+const mobile_header = "_mobile_header_11jbd_12";
+const logo_wrap = "_logo_wrap_11jbd_18";
+const primary_links = "_primary_links_11jbd_22";
+const main_nav_link = "_main_nav_link_11jbd_26";
+const sub_nav_link = "_sub_nav_link_11jbd_45";
+const signin_wrap = "_signin_wrap_11jbd_47";
+const signin_btn = "_signin_btn_11jbd_48";
+const sub_nav = "_sub_nav_11jbd_45";
+const header_sub_row = "_header_sub_row_11jbd_100";
+const hamburger = "_hamburger_11jbd_129";
+const mobile_only = "_mobile_only_11jbd_143";
+const mobile_logo = "_mobile_logo_11jbd_149";
+const highlight = "_highlight_11jbd_154";
+const mobile_nav = "_mobile_nav_11jbd_181";
+const mobile_opened = "_mobile_opened_11jbd_192";
+const mobile_nav_item = "_mobile_nav_item_11jbd_200";
+const has_dropdown = "_has_dropdown_11jbd_215";
+const icon_wrap = "_icon_wrap_11jbd_236";
+const mobile_footer = "_mobile_footer_11jbd_241";
+const mobile_footer_content = "_mobile_footer_content_11jbd_246";
+const mobile_footer_media = "_mobile_footer_media_11jbd_261";
+const footer_cta = "_footer_cta_11jbd_267";
+const inner_wrapper = "_inner_wrapper_11jbd_295";
+const btn = "_btn_11jbd_300";
+const sub_menu = "_sub_menu_11jbd_305";
+const main = "_main_11jbd_26";
+const dd_footer = "_dd_footer_11jbd_330";
+const desktop_only = "_desktop_only_11jbd_355";
 const styles = {
   header,
   wrapper,

package/dist/PageNavItem/PageNavItem.css.d.ts

@@ -0,0 +1,38 @@
+export declare const pn_btn: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            selectors: {
+                [x: string]: {
+                    border: "1px solid #87b9d7";
+                } | {
+                    border: "1px solid #1E262F";
+                };
+            };
+        };
+        secondary: {
+            selectors: {
+                [x: string]: {
+                    border: "1px solid #87b9d7";
+                } | {
+                    border: "1px solid #1E262F";
+                };
+            };
+        };
+    };
+}>;
+export declare const pn_link: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundClip: "text";
+            WebkitTextFillColor: "transparent";
+            textShadow: "0px 0px #00000000";
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundClip: "text";
+            WebkitTextFillColor: "transparent";
+            textShadow: "0px 0px #00000000";
+        };
+    };
+}>;

package/dist/PageNavItem/PageNavItem.css.js

@@ -0,0 +1,11 @@
+/* empty css                                    */
+/* empty css                                       */
+/* empty css                                              */
+/* empty css                                                */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var pn_btn = createRuntimeFn({ defaultClassName: "_13qd2mm0", variantClassNames: { variant: { primary: "_13qd2mm1", secondary: "_13qd2mm2" } }, defaultVariants: {}, compoundVariants: [] });
+var pn_link = createRuntimeFn({ defaultClassName: "_13qd2mm3", variantClassNames: { variant: { primary: "_13qd2mm4", secondary: "_13qd2mm5" } }, defaultVariants: {}, compoundVariants: [] });
+export {
+  pn_btn,
+  pn_link
+};

package/dist/PageNavItem/PageNavItem.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { SecondaryTypes } from '../utils/variant.types';
+
+export interface PageNavItemProps {
+    id: string;
+    variant?: SecondaryTypes;
+    addClassName?: string;
+    label?: string;
+}
+export declare const PageNavItem: FC<PageNavItemProps>;

package/dist/PageNavItem/PageNavItem.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { getVariant } from "../utils/getVariant.js";
+import { pn_btn, pn_link } from "./PageNavItem.css.js";
+const PageNavItem = ({
+  id,
+  addClassName,
+  label,
+  variant: fullVariant = "primary"
+}) => {
+  const variant = getVariant(fullVariant);
+  return /* @__PURE__ */ jsx("div", { className: `${pn_btn({ variant })} ${addClassName}`, children: /* @__PURE__ */ jsx("a", { href: `#${id}`, className: `${pn_link({ variant })}`, children: label }) });
+};
+export {
+  PageNavItem
+};

package/dist/PageNavItem/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PageNavItem.css';
+export * from './PageNavItem';

package/dist/PageNavItem/index.js

@@ -0,0 +1,7 @@
+import { pn_btn, pn_link } from "./PageNavItem.css.js";
+import { PageNavItem } from "./PageNavItem.js";
+export {
+  PageNavItem,
+  pn_btn,
+  pn_link
+};

package/dist/PageNavSet/PageNavSet.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { PageNavItemProps } from '../PageNavItem';
+
+export interface PagNavSetProps {
+    id: string;
+    pageNavItems: PageNavItemProps[];
+}
+export declare const PageNavSet: FC<PagNavSetProps>;

package/dist/PageNavSet/PageNavSet.js

@@ -0,0 +1,92 @@
+"use client";
+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 }) => {
+  const [activeSection, setActiveSection] = useState(pageNavItems[0].id);
+  const sliderRef = useRef(null);
+  const settings = {
+    dots: false,
+    arrows: false,
+    infinite: false,
+    slidesToShow: 3,
+    variableWidth: true,
+    centerMode: false,
+    slidesToScroll: 1,
+    responsive: [
+      {
+        breakpoint: 1023,
+        settings: {
+          variableWidth: false,
+          centerMode: true,
+          infinite: true
+        }
+      },
+      {
+        breakpoint: 768,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+          infinite: true,
+          centerPadding: "0px",
+          centerMode: true,
+          focusOnSelect: true
+        }
+      }
+    ]
+  };
+  function autoSizer() {
+    const children = Array.from(document.querySelectorAll(".nav_child"));
+    if (children !== null) {
+      let totalWidth = 0;
+      const gaps = (children.length - 1) * 8;
+      children.forEach(
+        (child) => totalWidth += parseInt(child.offsetWidth, 10)
+      );
+      document.querySelector("#pageNav > .containment").style.width = `min(${totalWidth + gaps + 6}px, 100%)`;
+    }
+  }
+  window.onload = () => autoSizer();
+  window.onresize = () => autoSizer();
+  const handleScroll = throttle(() => {
+    const scrollPosition = window.scrollY;
+    let selectedSection = pageNavItems[0].id;
+    pageNavItems.forEach((section) => {
+      const element = document.getElementById(section.id);
+      if (element.offsetTop <= scrollPosition + window.innerHeight / 2) {
+        selectedSection = section.id;
+      }
+    });
+    setActiveSection(selectedSection);
+    const activeIndex = pageNavItems.findIndex(
+      (section) => section.id === selectedSection
+    );
+    if (sliderRef.current) {
+      sliderRef.current.slickGoTo(activeIndex, false);
+    }
+  }, 100);
+  useEffect(() => {
+    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,
+    {
+      id: section?.id,
+      label: section.label,
+      addClassName: `nav_child ${activeSection === section.id ? "active" : ""}`
+    },
+    section?.id
+  )) }) }) });
+};
+export {
+  PageNavSet
+};

package/dist/PageNavSet/PageNavSet.module.js

@@ -0,0 +1,14 @@
+const sticky_nav = "_sticky_nav_g0p9u_1";
+const containment = "_containment_g0p9u_11";
+const nav_wrapper = "_nav_wrapper_g0p9u_15";
+const css = {
+  sticky_nav,
+  containment,
+  nav_wrapper
+};
+export {
+  containment,
+  css as default,
+  nav_wrapper,
+  sticky_nav
+};

package/dist/PageNavSet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PageNavSet.module.css';
+export * from './PageNavSet';

package/dist/PageNavSet/index.js

@@ -0,0 +1,8 @@
+import { containment, nav_wrapper, sticky_nav } from "./PageNavSet.module.js";
+import { PageNavSet } from "./PageNavSet.js";
+export {
+  PageNavSet,
+  containment,
+  nav_wrapper,
+  sticky_nav
+};

package/dist/SecondaryFooter/SecondaryFooter.css.js

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

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,12 +4,12 @@ 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                                                */
-/* empty css                                          */
-/* empty css                                          */
+/* empty css                                              */
+/* empty css                                              */
 import { getVariant } from "../utils/getVariant.js";
 import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
@@ -27,9 +27,9 @@ import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
 import "../Input/Input.css.js";
-/* empty css                                     */
+/* empty css                                         */
 import "../Input/Dropdown.js";
-/* empty css                                   */
+/* empty css                                       */
 import "../Input/Input.js";
 import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
@@ -40,51 +40,56 @@ import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.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                                          */
 import "next/image.js";
-/* 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";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../Chevron/Chevron.css.js";
-/* empty css                                */
+/* empty css                                    */
 import "../Modal/contextApi/store.js";
 import "react-use";
-/* empty css                                                      */
-/* empty css                                                         */
-/* empty css                                                              */
-/* empty css                                                                 */
+/* empty css                                                          */
+/* empty css                                                             */
+/* empty css                                                                  */
+/* empty css                                                                     */
 import "next/link.js";
-/* empty css                                                   */
+/* empty css                                                       */
 import "next/navigation.js";
+/* 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                                                    */
-/* empty css                                                  */
 import "../StepItem/StepItem.css.js";
 import "../StepItemSet/StepItemSet.css.js";
-/* empty css                                        */
-/* empty css                                                  */
-/* empty css                                                */
+/* empty css                                            */
+/* empty css                                                      */
+/* empty css                                                    */
 import "next/script.js";
-/* empty css                                        */
-/* empty css                                              */
+/* empty css                                            */
+/* empty css                                                  */
 import "../Interstitial/Interstitial-variants.css.js";
 import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
@@ -105,7 +110,7 @@ const SetContainer = ({
   return /* @__PURE__ */ jsx(
     "section",
     {
-      id: internalName ? internalName?.replace(/ /g, "-") : "",
+      id: internalName ? internalName?.replace(/ /g, "-") : id ?? "",
       className: clsx(
         set_container({ variant: container_variant }),
         isolate ? isolate_container({ variant: container_variant }) : ""

package/dist/SocialMediaBar/SocialMediaBar.css.js

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

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/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/TopicalNavItem/TopicalNavItem.js

@@ -1,4 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { Hyperlink } from "../Hyperlink/index.js";
 import { picker_navItem, picker_itemContent, picker_navIcon, picker_itemProduct, picker_arrow } from "./TopicalNavItem.css.js";
 const TopicalNavItem = ({
   id,
@@ -6,7 +7,7 @@ const TopicalNavItem = ({
   displayText,
   targetUrl
 }) => {
-  return /* @__PURE__ */ jsxs("a", { className: picker_navItem, href: targetUrl, id: `id_${id}`, children: [
+  return /* @__PURE__ */ jsxs(Hyperlink, { className: picker_navItem, targetUrl, id: `id_${id}`, children: [
     /* @__PURE__ */ jsxs("div", { className: picker_itemContent, children: [
       /* @__PURE__ */ jsx(
         "img",

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,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "next/script.js";
 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/CallToActionBar/CallToActionBar.css

@@ -101,9 +101,6 @@
     text-align: center;
     flex-direction: column;
   }
-  ._1tdyl74a p {
-    margin-top: 8px;
-  }
   ._1tdyl74c {
     position: fixed;
     top: 10px;
@@ -114,17 +111,19 @@
   }
   ._1tdyl741 > img {
     position: unset;
-    margin-top: 32px;
     max-height: 200px;
     object-fit: cover;
   }
   ._1tdyl74d {
     justify-content: center;
-    padding: 24px;
+    padding: 24px 0 0 0;
   }
   ._1tdyl74e {
     margin-top: 1rem;
   }
+  ._1tdyl740 .containment {
+    padding: 1.5rem 0;
+  }
 }
 @media screen and (min-width:1024px) {
   ._1tdyl740 .flex {

package/dist/assets/HeroBanner/HeroBanner.css

@@ -95,6 +95,10 @@
 ._1ye8k3fm:empty {
   display: none;
 }
+._1ye8k3fn {
+  margin-right: 15px;
+  margin-top: 24px;
+}
 @media screen and (min-width:1024px) {
   ._1ye8k3f7 {
     flex-direction: row-reverse;
@@ -145,6 +149,9 @@
   ._1ye8k3fm {
     flex-direction: column;
   }
+  ._1ye8k3fn {
+    margin: 24px auto 0 auto;
+  }
 }
 @media (max-width: 1023px) {
   ._1ye8k3fb {