@axos-web-dev/shared-components 0.0.117 → 0.0.119

package/dist/IconBillboard/IconBillboard.d.ts

@@ -13,5 +13,6 @@ export interface FocusProps {
     }[];
     callToActionRow?: ChevronProps[];
     set?: boolean;
+    id?: string;
 }
 export declare const IconBillboard: (props: FocusProps & ContainerVariants & LayoutVariants) => import("react/jsx-runtime").JSX.Element;

package/dist/IconBillboard/IconBillboard.js

@@ -17,7 +17,8 @@ const IconBillboard = (props) => {
     headline,
     body,
     icon,
-    set
+    set,
+    id
   } = props;
   const variant = getVariant(fullVariant);
   return /* @__PURE__ */ jsxs(
@@ -28,6 +29,7 @@ const IconBillboard = (props) => {
         "billboard",
         `${set ? "" : "containment"}`
       ),
+      id,
       children: [
         /* @__PURE__ */ jsxs("div", { className: `middle ${layout({ side })}`, children: [
           icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, role: "presentation", children: /* @__PURE__ */ jsx("img", { src: icon?.src, className: "img_fluid", alt: icon?.alt }) }),
@@ -41,7 +43,7 @@ const IconBillboard = (props) => {
         ] }),
         callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
           ({
-            id,
+            id: id2,
             variant: variant2,
             displayText,
             targetUrl,
@@ -59,7 +61,7 @@ const IconBillboard = (props) => {
               newTab,
               children: displayText
             },
-            id
+            id2
           ) : /* @__PURE__ */ jsx(
             Chevron,
             {
@@ -69,7 +71,7 @@ const IconBillboard = (props) => {
               newTab,
               children: displayText
             },
-            id
+            id2
           )
         ) })
       ]

package/dist/ImageBillboard/ImageBillboard.interface.d.ts

@@ -30,4 +30,5 @@ export interface ImageBillboardInterface {
     textImageLineOneSmall?: ReactNode | string;
     textImageLineTwoBig?: ReactNode | string;
     textImageLineThreeSmall?: ReactNode | string;
+    internalName?: string;
 }

package/dist/ImageBillboard/ImageBillboardSet.d.ts

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

package/dist/ImageBillboard/ImageBillboardSet.js

@@ -28,13 +28,15 @@ const ImageBillboard = ({
   set,
   textImageLineOneSmall,
   textImageLineTwoBig,
-  textImageLineThreeSmall
+  textImageLineThreeSmall,
+  internalName
 }) => {
   const billboard_variant = getVariant(variant);
   position = position?.toLocaleLowerCase();
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      id: internalName?.replace(/ /g, "-") ?? id,
       className: clsx(
         "billboard",
         "containment",

package/dist/ImageLink/ImageLink.css.d.ts

@@ -0,0 +1 @@
+export declare const image_link_set: string;

package/dist/ImageLink/ImageLink.css.js

@@ -1 +1,5 @@
-import "./ImageLink.css.ts.vanilla.css.js";
+/* empty css                             */
+var image_link_set = "xd6m5c0";
+export {
+  image_link_set
+};

package/dist/ImageLink/ImageLink.js

@@ -15,11 +15,12 @@ import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
+import "clsx";
 import { isValidElement } from "react";
+import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Button/Button.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
-import "clsx";
 import "../Table/Table.css.js";
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
@@ -41,7 +42,6 @@ import "../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
-import "../Calculators/calculator.css.js";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
@@ -61,6 +61,7 @@ import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import { imageLinkContainer } from "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                             */
 /* empty css                                              */
 /* empty css                                                      */
 import "../LandingPageHeader/LandingPageHeader.css.js";

package/dist/ImageLink/ImageLinkSet.js

@@ -23,6 +23,7 @@ import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
+import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../Table/Table.css.js";
@@ -45,7 +46,6 @@ import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
-import "../Calculators/calculator.css.js";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
@@ -98,6 +98,7 @@ import "../StepItemSet/StepItemSet.css.js";
 /* empty css                                                */
 /* empty css                                        */
 /* empty css                                              */
+import { image_link_set } from "./ImageLink.css.js";
 const ImageLinkSet = (props) => {
   const { callToActionRow } = props;
   const linksItems = props.imageLinks.map((item) => {
@@ -127,16 +128,17 @@ const ImageLinkSet = (props) => {
       )
     ) })
   ] }) : void 0;
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     SetContainer,
     {
       id: props.id,
       variant: props.variant,
       headline: props.headline,
       additionalDetails,
+      className: image_link_set,
       children: linksItems
     }
-  ) });
+  );
 };
 export {
   ImageLinkSet

package/dist/ImageLink/index.js

@@ -22,6 +22,7 @@ import "../Interstitial/Interstitial-variants.css.js";
 /* empty css                                */
 import "../Modal/contextApi/store.js";
 import "clsx";
+import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../Table/Table.css.js";
@@ -44,7 +45,6 @@ import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
-import "../Calculators/calculator.css.js";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */

package/dist/Insight/Featured/CategorySelector.js

@@ -20,6 +20,7 @@ import "../../AlertBanner/AlertBanner.css.js";
 import "../../Article/Article.css.js";
 import "../../ArticlesSet/ArticlesSet.css.js";
 import "react";
+import "../../Calculators/calculator.css.js";
 import "../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../../Button/Button.css.js";
 import "../../Calculators/ApyCalculator/ApyCalculator.css.js";
@@ -44,7 +45,6 @@ import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 import "../../Input/RadioButton.js";
 import "iframe-resizer";
-import "../../Calculators/calculator.css.js";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
@@ -67,6 +67,7 @@ import "../../FaqAccordion/index.js";
 import "../../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                            */
 import "../../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                           */
 import { featured_maingrid_img, featured_maingrid_item, featured_center_vertical } from "./Featured.css.js";
 import "../../LandingPageHeader/LandingPageHeader.css.js";
 /* empty css                                                         */

package/dist/Insight/Featured/Featured.js

@@ -24,6 +24,7 @@ import "../../Chevron/Chevron.css.js";
 /* empty css                                   */
 import "../../Modal/contextApi/store.js";
 import clsx from "clsx";
+import "../../Calculators/calculator.css.js";
 import "../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../../Table/Table.css.js";
@@ -46,7 +47,6 @@ import "../../Input/Checkbox.css.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "../../Input/RadioButton.js";
 import "iframe-resizer";
-import "../../Calculators/calculator.css.js";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
@@ -69,6 +69,7 @@ import "../../FaqAccordion/index.js";
 import "../../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                            */
 import { supertag } from "../../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                           */
 /* empty css                            */
 /* empty css                                    */
 import { featured_subgrid_item, featured_supertag, featured_subgrid_title, featured_center_vertical, featured_section, featured_title, featured_grid, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_title, featured_subgrid, featured_subgrid_divider } from "./Featured.css.js";

package/dist/MainHTML/index.d.ts

@@ -2,5 +2,6 @@ import { PropsWithChildren } from 'react';
 
 export interface BodyProps extends PropsWithChildren {
     theme: "Axos" | "Premier";
+    className?: string;
 }
-export declare const MainHTML: ({ theme, children }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MainHTML: ({ theme, children, className, }: BodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/MainHTML/index.js

@@ -1,11 +1,19 @@
 import { jsx } from "react/jsx-runtime";
 import { axosTheme } from "../themes/axos.css.js";
 import { premierTheme } from "../themes/premier.css.js";
-const MainHTML = ({ theme = "Axos", children }) => {
+import clsx from "clsx";
+const MainHTML = ({
+  theme = "Axos",
+  children,
+  className
+}) => {
   return /* @__PURE__ */ jsx(
     "main",
     {
-      className: theme === "Premier" ? premierTheme : axosTheme,
+      className: clsx(
+        theme === "Premier" ? premierTheme : axosTheme,
+        className
+      ),
       id: "main-body",
       children
     }

package/dist/Modal/Modal.js

@@ -15,11 +15,12 @@ import "../ArticlesSet/ArticlesSet.css.js";
 import { Button } from "../Button/Button.js";
 import "../IconBillboard/IconBillboard.css.js";
 import "../utils/allowedAxosDomains.js";
+import "clsx";
+import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Button/Button.css.js";
 import "react-use";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
-import "clsx";
 import "../Table/Table.css.js";
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
@@ -41,7 +42,6 @@ import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
-import "../Calculators/calculator.css.js";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
@@ -65,6 +65,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                        */
 /* empty css                                              */
 /* empty css                                                      */
 import "../Interstitial/Interstitial-variants.css.js";

package/dist/NavigationMenu/AxosBank/NavData.js

@@ -22,6 +22,7 @@ import "../../Interstitial/Interstitial-variants.css.js";
 /* empty css                                   */
 import "../../Modal/contextApi/store.js";
 import "clsx";
+import "../../Calculators/calculator.css.js";
 import "../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../../Table/Table.css.js";
@@ -44,7 +45,6 @@ import "../../Input/Checkbox.css.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "../../Input/RadioButton.js";
 import "iframe-resizer";
-import "../../Calculators/calculator.css.js";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
@@ -67,6 +67,7 @@ import "../../FaqAccordion/index.js";
 import "../../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                            */
 import "../../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                           */
 /* empty css                                                 */
 /* empty css                                                         */
 import "../../LandingPageHeader/LandingPageHeader.css.js";

package/dist/NavigationMenu/AxosBank/SubNavBar.js

@@ -23,6 +23,7 @@ import "../../Interstitial/Interstitial-variants.css.js";
 /* empty css                                   */
 import "../../Modal/contextApi/store.js";
 import "clsx";
+import "../../Calculators/calculator.css.js";
 import "../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../../Calculators/ApyCalculator/ApyCalculator.css.js";
 import "../../Table/Table.css.js";
@@ -45,7 +46,6 @@ import "../../Input/Checkbox.css.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "../../Input/RadioButton.js";
 import "iframe-resizer";
-import "../../Calculators/calculator.css.js";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
@@ -68,6 +68,7 @@ import "../../FaqAccordion/index.js";
 import "../../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                            */
 import "../../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                           */
 /* empty css                                                 */
 /* empty css                                                         */
 import "../../LandingPageHeader/LandingPageHeader.css.js";

package/dist/NavigationMenu/AxosBank/index.js

@@ -18,9 +18,10 @@ import "../../Article/Article.css.js";
 import "../../ArticlesSet/ArticlesSet.css.js";
 import "../../IconBillboard/IconBillboard.css.js";
 import { findMoreAxosDomains } from "../../utils/allowedAxosDomains.js";
+import clsx from "clsx";
+import "../../Calculators/calculator.css.js";
 import "../../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../../Calculators/ApyCalculator/ApyCalculator.css.js";
-import clsx from "clsx";
 import "../../Table/Table.css.js";
 import "../../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
@@ -42,7 +43,6 @@ import "../../Input/Checkbox.css.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "../../Input/RadioButton.js";
 import "iframe-resizer";
-import "../../Calculators/calculator.css.js";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                                 */
@@ -66,6 +66,7 @@ import "../../FaqAccordion/index.js";
 import "../../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                            */
 import "../../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                           */
 /* empty css                                                 */
 /* empty css                                                         */
 import "../../Interstitial/Interstitial-variants.css.js";

package/dist/PageNavItem/PageNavItem.js

@@ -9,7 +9,14 @@ const PageNavItem = ({
   onClick
 }) => {
   const variant = getVariant(fullVariant);
-  return /* @__PURE__ */ jsx("div", { onClick, 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?.replace(/ /g, "-")}`,
+      className: `${pn_link({ variant })}`,
+      children: label
+    }
+  ) });
 };
 export {
   PageNavItem

package/dist/PageNavSet/PageNavSet.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useState, useRef, useEffect } from "react";
+import { useState, useEffect } from "react";
 import Slider from "react-slick";
 import "../PageNavItem/PageNavItem.css.js";
 import { PageNavItem } from "../PageNavItem/PageNavItem.js";
@@ -9,39 +9,36 @@ import { sticky_nav, nav_wrapper, sticky_page_nav } from "./PageNavigationSet.cs
 const PageNavSet = ({ id, pageNavItems }) => {
   const SliderComponent = Slider.default ? Slider.default : Slider;
   const [activeSection, setActiveSection] = useState("");
-  const sliderRef = useRef(null);
   const settings = {
     className: `${nav_wrapper} center`,
+    slidesToShow: 7,
     dots: false,
     arrows: false,
     infinite: false,
-    slidesToShow: 3,
     variableWidth: true,
-    centerMode: false,
-    centerPadding: "60px",
-    slidesToScroll: 1,
     responsive: [
       {
         breakpoint: 1023,
         settings: {
-          arrows: false,
-          centerMode: true,
           slidesToShow: 5,
-          variableWidth: true,
+          slidesToScroll: 5,
+          swipeToSlide: true,
           infinite: true,
-          centerPadding: "40px"
+          centerMode: true,
+          centerPadding: "0",
+          focusOnSelect: true
         }
       },
       {
         breakpoint: 768,
         settings: {
-          arrows: false,
-          centerMode: true,
           slidesToShow: 3,
-          slidesToScroll: 1,
+          slidesToScroll: 3,
+          swipeToSlide: true,
           infinite: true,
-          focusOnSelect: true,
-          centerPadding: "40px"
+          centerMode: true,
+          centerPadding: "0",
+          focusOnSelect: true
         }
       }
     ]
@@ -53,7 +50,7 @@ const PageNavSet = ({ id, pageNavItems }) => {
         document.documentElement.clientHeight,
         window.innerHeight
       );
-      return rect.bottom - viewHeight < 100;
+      return rect.bottom - viewHeight < 0;
     }
   };
   const handleScroll = () => {
@@ -80,15 +77,15 @@ const PageNavSet = ({ id, pageNavItems }) => {
       window.removeEventListener("scroll", handleScroll);
     };
   }, []);
-  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(
+  return /* @__PURE__ */ jsx("nav", { className: clsx(sticky_nav), id: "pageNav", children: /* @__PURE__ */ jsx("div", { className: "", id: `id_${id}`, children: /* @__PURE__ */ jsx(SliderComponent, { ...settings, children: pageNavItems?.map((section) => /* @__PURE__ */ jsx(
     PageNavItem,
     {
       onClick: () => {
-        setActiveSection(section.id);
+        setActiveSection(section?.id?.replace(/ /g, "-"));
       },
       id: section?.id,
       label: section.label,
-      addClassName: `nav_child ${activeSection === section.id ? "active" : ""}`
+      addClassName: `nav_child ${activeSection === section?.id?.replace(/ /g, "-") ? "active" : ""}`
     },
     section?.id
   )) }) }) });

package/dist/SetContainer/SetContainer.d.ts

@@ -7,5 +7,6 @@ export interface SetContainerProps extends Omit<ImageBillboardSetProps, "imageBi
     eyebrow?: ReactNode | string;
     style?: CSSProperties;
     isolate?: boolean;
+    className?: string;
 }
-export declare const SetContainer: ({ id, variant, headline, bodyCopy, additionalDetails, children, internalName, icon, eyebrow, style, isolate, }: SetContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SetContainer: ({ id, variant, headline, bodyCopy, additionalDetails, children, internalName, icon, eyebrow, style, isolate, className, }: SetContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/SetContainer/SetContainer.js

@@ -17,11 +17,12 @@ import "../Accordion/Accordion.css.js";
 import "../AlertBanner/AlertBanner.css.js";
 import "../Article/Article.css.js";
 import "../ArticlesSet/ArticlesSet.css.js";
+import clsx from "clsx";
 import "react";
+import "../Calculators/calculator.css.js";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
 import "../Button/Button.css.js";
 import "../Calculators/ApyCalculator/ApyCalculator.css.js";
-import clsx from "clsx";
 import "../Table/Table.css.js";
 import "../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
 import "@hookform/resolvers/zod";
@@ -43,7 +44,6 @@ import "../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
-import "../Calculators/calculator.css.js";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
@@ -64,6 +64,7 @@ import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
+/* empty css                                        */
 /* empty css                                              */
 /* empty css                                                      */
 import "../LandingPageHeader/LandingPageHeader.css.js";
@@ -107,7 +108,8 @@ const SetContainer = ({
   icon,
   eyebrow,
   style,
-  isolate
+  isolate,
+  className
 }) => {
   const container_variant = getVariant(variant);
   return /* @__PURE__ */ jsx(
@@ -116,6 +118,7 @@ const SetContainer = ({
       id: internalName ? internalName?.replace(/ /g, "-") : id ?? "",
       className: clsx(
         set_container({ variant: container_variant }),
+        className,
         isolate ? isolate_container({ variant: container_variant }) : ""
       ),
       style: { ...style },

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/Table/Table.css.d.ts

@@ -1,3 +1,4 @@
+export declare const table_section: string;
 export declare const table_container: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         apy: {

package/dist/Table/Table.css.js

@@ -2,22 +2,23 @@
 /* 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";
-var table_headline = "_1nivbwe4";
-var highlight_first_row = "_1nivbwe5";
-var highlight_last_row = "_1nivbwe6";
-var headerCell = "_1nivbwe7";
-var headerVariants = { primary: "_1nivbwe8 _1nivbwe7", secondary: "_1nivbwe9 _1nivbwe7", tertiary: "_1nivbwea _1nivbwe7", quaternary: "_1nivbweb _1nivbwe7" };
-var bodyHeader = "_1nivbwec";
-var th = createRuntimeFn({ defaultClassName: "_1nivbwed", variantClassNames: { variant: { primary: "_1nivbwee", secondary: "_1nivbwef", tertiary: "_1nivbweg", quaternary: "_1nivbweh" }, highlighted: { true: "_1nivbwei" } }, defaultVariants: {}, compoundVariants: [] });
-var td = createRuntimeFn({ defaultClassName: "_1nivbwej", variantClassNames: { variant: { primary: "_1nivbwek", secondary: "_1nivbwel", tertiary: "_1nivbwem", quaternary: "_1nivbwen" }, highlighted: { true: "_1nivbweo" } }, defaultVariants: {}, compoundVariants: [[{ highlighted: true, variant: "primary" }, "_1nivbwep"], [{ highlighted: true, variant: "tertiary" }, "_1nivbweq"]] });
-var tableWrapper = createRuntimeFn({ defaultClassName: "_1nivbwer", variantClassNames: { variant: { primary: "_1nivbwes", secondary: "_1nivbwet", tertiary: "_1nivbweu", quaternary: "_1nivbwev" } }, defaultVariants: {}, compoundVariants: [] });
-var table = createRuntimeFn({ defaultClassName: "_1nivbwew", variantClassNames: { variant: { primary: "_1nivbwex", secondary: "_1nivbwey", tertiary: "_1nivbwez", quaternary: "_1nivbwe10" } }, defaultVariants: {}, compoundVariants: [] });
-var alternate_color_rows = "_1nivbwe11";
-var apy_table = "_1nivbwe12";
-var table_description_text = "_1nivbwe13 _1nivbwe3";
-var highlight_cell = "_1nivbwe14";
+var table_section = "_1nivbwe0";
+var table_container = createRuntimeFn({ defaultClassName: "_1nivbwe1", variantClassNames: { variant: { apy: "_1nivbwe2", standard: "_1nivbwe3" } }, defaultVariants: {}, compoundVariants: [] });
+var table_container_text = "_1nivbwe4";
+var table_headline = "_1nivbwe5";
+var highlight_first_row = "_1nivbwe6";
+var highlight_last_row = "_1nivbwe7";
+var headerCell = "_1nivbwe8";
+var headerVariants = { primary: "_1nivbwe9 _1nivbwe8", secondary: "_1nivbwea _1nivbwe8", tertiary: "_1nivbweb _1nivbwe8", quaternary: "_1nivbwec _1nivbwe8" };
+var bodyHeader = "_1nivbwed";
+var th = createRuntimeFn({ defaultClassName: "_1nivbwee", variantClassNames: { variant: { primary: "_1nivbwef", secondary: "_1nivbweg", tertiary: "_1nivbweh", quaternary: "_1nivbwei" }, highlighted: { true: "_1nivbwej" } }, defaultVariants: {}, compoundVariants: [] });
+var td = createRuntimeFn({ defaultClassName: "_1nivbwek", variantClassNames: { variant: { primary: "_1nivbwel", secondary: "_1nivbwem", tertiary: "_1nivbwen", quaternary: "_1nivbweo" }, highlighted: { true: "_1nivbwep" } }, defaultVariants: {}, compoundVariants: [[{ highlighted: true, variant: "primary" }, "_1nivbweq"], [{ highlighted: true, variant: "tertiary" }, "_1nivbwer"]] });
+var tableWrapper = createRuntimeFn({ defaultClassName: "_1nivbwes", variantClassNames: { variant: { primary: "_1nivbwet", secondary: "_1nivbweu", tertiary: "_1nivbwev", quaternary: "_1nivbwew" } }, defaultVariants: {}, compoundVariants: [] });
+var table = createRuntimeFn({ defaultClassName: "_1nivbwex", variantClassNames: { variant: { primary: "_1nivbwey", secondary: "_1nivbwez", tertiary: "_1nivbwe10", quaternary: "_1nivbwe11" } }, defaultVariants: {}, compoundVariants: [] });
+var alternate_color_rows = "_1nivbwe12";
+var apy_table = "_1nivbwe13";
+var table_description_text = "_1nivbwe14 _1nivbwe4";
+var highlight_cell = "_1nivbwe15";
 export {
   alternate_color_rows,
   apy_table,
@@ -33,6 +34,7 @@ export {
   table_container_text,
   table_description_text,
   table_headline,
+  table_section,
   td,
   th
 };