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

package/dist/Input/InputDate.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import DatePicker from "react-date-picker";
+import { wrapper, labelClassName, container, iconContainer, iconInput, helperText } from "./Input.css.js";
+const InputDate = (props) => {
+  const {
+    disabled,
+    label,
+    iconLeft,
+    iconRight,
+    sizes,
+    error = false,
+    helperText: helper,
+    variant
+  } = props;
+  const [value, onChange] = useState();
+  return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: labelClassName({ error, variant }),
+        htmlFor: props.name,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: container({ size: sizes, error }), children: [
+      iconLeft && /* @__PURE__ */ jsx("span", { className: iconContainer["left"], children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconLeft }) }),
+      /* @__PURE__ */ jsx(
+        DatePicker,
+        {
+          dayPlaceholder: "dd",
+          monthPlaceholder: "mm",
+          yearPlaceholder: "yyyy",
+          minDate: /* @__PURE__ */ new Date(),
+          onChange,
+          value
+        }
+      ),
+      iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconRight }) })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: helperText({ disabled, error }), children: helper })
+  ] });
+};
+export {
+  InputDate
+};

package/dist/Input/InputProps.d.ts

@@ -36,3 +36,9 @@ export interface RadioButtonProps extends InputProps {
     value: string | number;
     groupName: string;
 }
+export interface DatepickerInputProps extends InputProps {
+    month?: string;
+    selected?: string;
+    show?: boolean;
+    onDateChange: (day: string) => void;
+}

package/dist/Insight/Featured/CategorySelector.css.js

@@ -1,7 +1,7 @@
-/* empty css                            */
 /* empty css                                   */
 /* empty css                                      */
 /* empty css                                             */
+/* empty css                            */
 /* empty css                                    */
 var selector_section = "_13y9ptj0";
 var selector_link = "_13y9ptj1";

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/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
 };

package/dist/Table/Table.d.ts

@@ -9,14 +9,14 @@ export declare const TableBody: ({ children }: PropsWithChildren) => import("rea
 export declare const TableCell: ({ children, as, variant, highlighted, ...props }: CellProps) => import('react').DetailedReactHTMLElement<{
     className: string;
     manifest?: string | undefined;
-    amp?: string | undefined;
+    amp?: string;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+    contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
@@ -29,7 +29,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     style?: import('react').CSSProperties | undefined;
     tabIndex?: number | undefined;
     title?: string | undefined;
-    translate?: "no" | "yes" | undefined;
+    translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: import('react').AriaRole | undefined;
     about?: string | undefined;
@@ -54,38 +54,38 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     itemRef?: string | undefined;
     results?: number | undefined;
     security?: string | undefined;
-    unselectable?: "off" | "on" | undefined;
-    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
     is?: string | undefined;
     popover?: "" | "auto" | "manual" | undefined;
-    popoverTargetAction?: "hide" | "show" | "toggle" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
     popoverTarget?: string | undefined;
     onToggle?: import('react').ToggleEventHandler<HTMLTableCellElement> | undefined;
     onBeforeToggle?: import('react').ToggleEventHandler<HTMLTableCellElement> | undefined;
     inert?: boolean | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "false" | "true") | undefined;
-    "aria-autocomplete"?: "none" | "both" | "inline" | "list" | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
     "aria-busy"?: (boolean | "false" | "true") | undefined;
-    "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-colcount"?: number | undefined;
     "aria-colindex"?: number | undefined;
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -100,9 +100,9 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     "aria-owns"?: string | undefined;
     "aria-placeholder"?: string | undefined;
     "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-readonly"?: (boolean | "false" | "true") | undefined;
-    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
     "aria-required"?: (boolean | "false" | "true") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;

package/dist/Table/Table.js

@@ -3,7 +3,7 @@ import "../utils/allowedAxosDomains.js";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { createElement } from "react";
-import { table_container, table_container_text, table_headline, table_description_text, tableWrapper, table, highlight_first_row, highlight_last_row, alternate_color_rows, apy_table, td, th } from "./Table.css.js";
+import { table_section, table_container, table_container_text, table_headline, table_description_text, tableWrapper, table, highlight_first_row, highlight_last_row, alternate_color_rows, apy_table, td, th } from "./Table.css.js";
 const TableContainer = ({
   tableTitle,
   tableBody,
@@ -13,21 +13,29 @@ const TableContainer = ({
   internalName,
   id
 }) => {
-  return /* @__PURE__ */ jsx("section", { id: internalName?.replace(/ /g, "-"), children: /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    "section",
     {
-      className: clsx(
-        tableType === "Rate" ? table_container({ variant: "apy" }) : table_container({ variant: "standard" }),
-        "containment"
-      ),
-      children: [
-        tableTitle && /* @__PURE__ */ jsx("div", { className: table_container_text, children: /* @__PURE__ */ jsx("h1", { className: clsx("header_1", table_headline), children: tableTitle }) }),
-        tableDescription && /* @__PURE__ */ jsx("div", { className: table_description_text, children: tableDescription }),
-        tableBody,
-        tableFooter && /* @__PURE__ */ jsx("div", { className: clsx(table_container_text, "push_up_24"), children: tableFooter })
-      ]
-    }
-  ) }, id);
+      id: internalName?.replace(/ /g, "-"),
+      className: table_section,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(
+            tableType === "Rate" ? table_container({ variant: "apy" }) : table_container({ variant: "standard" }),
+            "containment"
+          ),
+          children: [
+            tableTitle && /* @__PURE__ */ jsx("div", { className: table_container_text, children: /* @__PURE__ */ jsx("h1", { className: clsx("header_1", table_headline), children: tableTitle }) }),
+            tableDescription && /* @__PURE__ */ jsx("div", { className: table_description_text, children: tableDescription }),
+            tableBody,
+            tableFooter && /* @__PURE__ */ jsx("div", { className: clsx(table_container_text, "push_up_24"), children: tableFooter })
+          ]
+        }
+      )
+    },
+    id
+  );
 };
 const Table = ({
   variant = "primary",

package/dist/Table/index.js

@@ -1,5 +1,5 @@
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "./Table.js";
-import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_cell, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_description_text, table_headline, td, th } from "./Table.css.js";
+import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_cell, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_description_text, table_headline, table_section, td, th } from "./Table.css.js";
 export {
   Table,
   TableBody,
@@ -21,6 +21,7 @@ export {
   table_container_text,
   table_description_text,
   table_headline,
+  table_section,
   td,
   th
 };