@axos-web-dev/shared-components 0.0.116 → 0.0.118

package/dist/NavigationMenu/AxosBank/index.js

@@ -8,10 +8,10 @@ import "../../Accordion/Accordion.js";
 import "../../Accordion/Accordion.css.js";
 import "../../icons/ArrowIcon/ArrowIcon.css.js";
 import "../../icons/CheckIcon/CheckIcon.css.js";
-/* empty css                                       */
-/* empty css                                          */
-/* empty css                                                           */
+/* empty css                                   */
+/* empty css                                      */
 /* empty css                                                       */
+/* empty css                                                   */
 import "../../Chevron/Chevron.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
 import "../../Article/Article.css.js";
@@ -27,8 +27,8 @@ import "@hookform/resolvers/zod";
 import "../../Input/Checkbox.js";
 import "../../Input/CurrencyInput.js";
 import "../../Input/Dropdown.js";
-/* empty css                                                 */
-/* empty css                                          */
+/* empty css                                             */
+/* empty css                                      */
 import "../../Input/Input.js";
 import "../../Input/Input.css.js";
 import "../../Input/InputAmount.js";
@@ -43,15 +43,15 @@ 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                                                 */
-/* 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 "../../HeroBanner/HeroBanner.css.js";
 import "../../HeroBanner/LargeBanner.css.js";
@@ -60,38 +60,36 @@ import "../../SetContainer/SetContainer.css.js";
 import "../../Tab/Tab.css.js";
 import "../../icons/Star/Star.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 "../../Interstitial/Interstitial-variants.css.js";
 import "../../LandingPageHeader/LandingPageHeader.css.js";
-/* empty css                                       */
+/* empty css                                   */
 import "../../Modal/contextApi/store.js";
 import { NavItem } from "../NavItem/index.js";
-/* empty css                                                             */
-/* empty css                                                                */
-/* empty css                                                                     */
-/* empty css                                                                        */
-/* empty css                                                              */
+/* empty css                                       */
+/* 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                                                       */
+/* 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 { Sign_in_btn, expand } from "./NavBar.css.js";
 import styles from "./NavBar.module.js";
 import { navItems } from "./NavData.js";

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

@@ -1,4 +1,4 @@
-/* empty css                                                              */
+/* empty css                          */
 var expand = "_1rp73910";
 export {
   expand

package/dist/NavigationMenu/AxosClearing/index.js

@@ -291,7 +291,7 @@ function NavBar() {
                             href: "/who-we-serve",
                             className: styles.main,
                             role: "heading",
-                            children: "Who We Serve Home"
+                            children: "Who We Serve"
                           }
                         ),
                         /* @__PURE__ */ jsx("a", { href: "/who-we-serve/broker-dealers", role: "menuitem", children: "Broker Dealers" }),
@@ -364,7 +364,7 @@ function NavBar() {
                             href: "/products-and-services",
                             className: styles.main,
                             role: "heading",
-                            children: "Products and Services Home"
+                            children: "Products and Services"
                           }
                         ),
                         /* @__PURE__ */ jsx(
@@ -460,7 +460,7 @@ function NavBar() {
                             href: "/axos-advantage",
                             className: styles.main,
                             role: "heading",
-                            children: "Axos Advantage Home"
+                            children: "Axos Advantage"
                           }
                         ),
                         /* @__PURE__ */ jsx("a", { href: "/axos-advantage/contact-us", role: "menuitem", children: "Contact Us" }),

package/dist/PageNavItem/PageNavItem.css.js

@@ -1,7 +1,7 @@
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                              */
-/* empty css                                                */
+/* 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: [] });

package/dist/PageNavItem/PageNavItem.d.ts

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

package/dist/PageNavItem/PageNavItem.js

@@ -5,10 +5,11 @@ const PageNavItem = ({
   id,
   addClassName,
   label,
-  variant: fullVariant = "primary"
+  variant: fullVariant = "primary",
+  onClick
 }) => {
   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 }) });
+  return /* @__PURE__ */ jsx("div", { onClick, className: `${pn_btn({ variant })} ${addClassName}`, children: /* @__PURE__ */ jsx("a", { href: `#${id}`, className: `${pn_link({ variant })}`, children: label }) });
 };
 export {
   PageNavItem

package/dist/PageNavSet/PageNavSet.js

@@ -1,90 +1,91 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { throttle } from "lodash";
+import clsx from "clsx";
 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";
+import { sticky_nav, nav_wrapper, sticky_page_nav } from "./PageNavigationSet.css.js";
 const PageNavSet = ({ id, pageNavItems }) => {
-  const [activeSection, setActiveSection] = useState(pageNavItems[0].id);
+  const SliderComponent = Slider.default ? Slider.default : Slider;
+  const [activeSection, setActiveSection] = useState("");
   const sliderRef = useRef(null);
   const settings = {
+    className: `${nav_wrapper} center`,
     dots: false,
     arrows: false,
     infinite: false,
     slidesToShow: 3,
     variableWidth: true,
     centerMode: false,
+    centerPadding: "60px",
     slidesToScroll: 1,
     responsive: [
       {
         breakpoint: 1023,
         settings: {
-          variableWidth: false,
+          arrows: false,
           centerMode: true,
-          infinite: true
+          slidesToShow: 5,
+          variableWidth: true,
+          infinite: true,
+          centerPadding: "40px"
         }
       },
       {
         breakpoint: 768,
         settings: {
-          slidesToShow: 1,
+          arrows: false,
+          centerMode: true,
+          slidesToShow: 3,
           slidesToScroll: 1,
           infinite: true,
-          centerPadding: "0px",
-          centerMode: true,
-          focusOnSelect: true
+          focusOnSelect: true,
+          centerPadding: "40px"
         }
       }
     ]
   };
-  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)
+  const scrolledElement = (elem) => {
+    if (elem) {
+      const rect = elem.getBoundingClientRect();
+      const viewHeight = Math.max(
+        document.documentElement.clientHeight,
+        window.innerHeight
       );
-      const containment = document.querySelector(
-        "#pageNav > .containment"
-      );
-      if (containment) {
-        containment.style.width = `min(${totalWidth + gaps + 6}px, 100%)`;
-      }
+      return rect.bottom - viewHeight < 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;
+  };
+  const handleScroll = () => {
+    const main = document.querySelector("main");
+    const bannerHeight = main.getElementsByTagName("section")[0].offsetHeight;
+    const stickyElem = document.querySelector(`.${sticky_nav}`);
+    const scrollTop = window.scrollY;
+    if (scrollTop >= bannerHeight) {
+      stickyElem.classList.add(sticky_page_nav);
+    } else {
+      stickyElem.classList.remove(sticky_page_nav);
+    }
+    const pageNav = document.getElementById("pageNav");
+    const links = pageNav?.querySelectorAll("a");
+    links?.forEach((link) => {
+      if (scrolledElement(document.getElementById(link.hash.substring(1)))) {
+        setActiveSection(link.hash.substring(1));
       }
     });
-    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(
+  return /* @__PURE__ */ jsx("nav", { className: clsx(sticky_nav), id: "pageNav", children: /* @__PURE__ */ jsx("div", { className: "containment", id: `id_${id}`, children: /* @__PURE__ */ jsx(SliderComponent, { ...settings, ref: sliderRef, children: pageNavItems?.map((section) => /* @__PURE__ */ jsx(
     PageNavItem,
     {
+      onClick: () => {
+        setActiveSection(section.id);
+      },
       id: section?.id,
       label: section.label,
       addClassName: `nav_child ${activeSection === section.id ? "active" : ""}`

package/dist/PageNavSet/PageNavigationSet.css.d.ts

@@ -0,0 +1,3 @@
+export declare const nav_wrapper: string;
+export declare const sticky_nav: string;
+export declare const sticky_page_nav: string;

package/dist/PageNavSet/PageNavigationSet.css.js

@@ -0,0 +1,9 @@
+/* empty css                                     */
+var nav_wrapper = "_1qd6ohx0";
+var sticky_nav = "_1qd6ohx1";
+var sticky_page_nav = "_1qd6ohx2";
+export {
+  nav_wrapper,
+  sticky_nav,
+  sticky_page_nav
+};

package/dist/PageNavSet/index.d.ts

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

package/dist/PageNavSet/index.js

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

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/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 "react-use";
 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                                                        */
+/* 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                                                    */
+/* 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/StepItemSet/StepItemSet.js

@@ -19,7 +19,7 @@ const StepItemSet = ({
   additionalDetails
 }) => {
   const variant = getVariant(fullVariant);
-  return /* @__PURE__ */ jsx("section", { className: `${bs_section({ variant })}`, id: `id_${id}`, children: /* @__PURE__ */ jsxs("div", { className: `${bs_wrapper} containment`, children: [
+  return /* @__PURE__ */ jsx("section", { className: `${bs_section({ variant })}`, id, children: /* @__PURE__ */ jsxs("div", { className: `${bs_wrapper} containment`, children: [
     (title || description) && /* @__PURE__ */ jsxs("div", { className: "text_center", children: [
       /* @__PURE__ */ jsxs(
         "svg",

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", children: [
+  return /* @__PURE__ */ jsxs("div", { 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";
@@ -29,7 +29,7 @@ const VideoTile = ({
     event.preventDefault();
     toggle();
   };
-  return /* @__PURE__ */ jsxs("div", { id: `id_${id}`, className: `flex center`, children: [
+  return /* @__PURE__ */ jsxs("div", { id, className: `flex center`, children: [
     /* @__PURE__ */ jsx(VideoInit, {}),
     /* @__PURE__ */ jsxs("div", { className: `containment ${video_container} flex_col`, children: [
       title && /* @__PURE__ */ jsx("h2", { className: `${mb_8} ${video_title}`, children: title }),