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

package/dist/NavigationMenu/AxosAdvisor/index.js

@@ -1,17 +1,38 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import clsx from "clsx";
-import { useState, useRef } from "react";
+import { Button } from "../../Button/Button.js";
+import "../../Button/Button.css.js";
+import { useState, useRef, useEffect } from "react";
 import { useClickAway } from "react-use";
+import clsx from "clsx";
+import { NavItem } from "../NavItem/index.js";
+import { Sign_in_btn } from "./NavBar.css.js";
 import styles from "./NavBar.module.js";
+import { navItems } from "./NavData.js";
 import SubNavBar from "./SubNavBar.js";
 var define_process_env_default = {};
 function NavBar() {
   const [isOpenSignIn, setisOpenSignIn] = useState(false);
   const [isOpenMobile, setisOpenMobile] = useState(false);
+  const [activeIndex, setActiveIndex] = useState();
+  const [lastNavItem, setLastNavItem] = useState();
   const ref = useRef(null);
   const toggle = () => setisOpenSignIn(!isOpenSignIn);
   const mobileToggle = () => setisOpenMobile(!isOpenMobile);
+  const handleClick = (index) => setActiveIndex(index);
+  const getActiveIndex = () => {
+    const pathname = "/" + location.pathname.split("/")[1];
+    const index = navItems.findIndex(
+      (path) => path.url === pathname
+    );
+    setActiveIndex(index);
+  };
+  useEffect(() => {
+    getActiveIndex();
+  }, [activeIndex]);
+  useEffect(() => {
+    setLastNavItem(navItems[navItems.length - 1]);
+  }, [navItems]);
   useClickAway(ref, (e) => {
     var _a;
     if (((_a = e == null ? void 0 : e.target) == null ? void 0 : _a.tagName) !== "A") {
@@ -30,12 +51,20 @@ function NavBar() {
             height: 51
           }
         ) }) }),
-        /* @__PURE__ */ jsx("div", { className: styles.primary_links, children: /* @__PURE__ */ jsxs("ul", { className: "list_unstyled flex_row middle", role: "menu", children: [
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/products", className: "active", role: "menuitem", children: "Products" }) }),
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/find-your-advisor", role: "menuitem", children: "Find Your Advisor" }) }),
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/RIAs", role: "menuitem", children: "RIAs" }) }),
-          /* @__PURE__ */ jsx("li", { className: styles.main_nav_link, children: /* @__PURE__ */ jsx("a", { href: "/resources", role: "menuitem", children: "Resources" }) })
-        ] }) })
+        /* @__PURE__ */ jsx("div", { className: styles.primary_links, children: /* @__PURE__ */ jsx("ul", { className: "list_unstyled flex_row middle", role: "menu", children: navItems.map(
+          (item, i, arr) => arr.length - 1 !== i && /* @__PURE__ */ jsx(
+            NavItem,
+            {
+              className: styles.main_nav_link,
+              onClick: handleClick,
+              index: i,
+              name: item.name,
+              url: item.url,
+              isActive: activeIndex == i
+            },
+            i
+          )
+        ) }) })
       ] }) }),
       /* @__PURE__ */ jsx(
         "button",
@@ -53,8 +82,8 @@ function NavBar() {
               children: /* @__PURE__ */ jsx(
                 "path",
                 {
-                  "fill-rule": "evenodd",
-                  "clip-rule": "evenodd",
+                  fillRule: "evenodd",
+                  clipRule: "evenodd",
                   d: "M22.5 15.75V17.25H1.5V15.75H22.5ZM22.5 11.25V12.75H1.5V11.25H22.5ZM22.5 6.75V8.25H1.5V6.75H22.5Z",
                   fill: "#4A5560"
                 }
@@ -72,133 +101,139 @@ function NavBar() {
           height: 33
         }
       ) }) }),
-      /* @__PURE__ */ jsxs("div", { className: styles.signin_wrap, children: [
-        /* @__PURE__ */ jsx("div", { className: styles.mobile_only, children: /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: `${define_process_env_default.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
-            className: "link",
-            children: "Sign In"
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `${styles.desktop_only} flex_row middle relative`,
-            ref,
-            children: [
-              /* @__PURE__ */ jsx("a", { href: "/Contact-Us", className: "link", children: "Contact Us" }),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  className: clsx(
-                    styles.signin_btn,
-                    "flex_row",
-                    "center",
-                    "middle",
-                    isOpenSignIn ? styles.open : ""
-                  ),
-                  id: "signIn",
-                  onClick: toggle,
-                  "aria-controls": "signin-drop-menu",
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: "Sign In" }),
-                    /* @__PURE__ */ jsx(
-                      "svg",
-                      {
-                        width: "20",
-                        height: "12",
-                        viewBox: "0 0 20 12",
-                        fill: "none",
-                        xmlns: "http://www.w3.org/2000/svg",
-                        children: /* @__PURE__ */ jsx(
-                          "path",
+      /* @__PURE__ */ jsx("div", { className: styles.signin_wrap, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${styles.desktop_only} flex_row middle relative`,
+          ref,
+          children: [
+            lastNavItem && /* @__PURE__ */ jsx(
+              NavItem,
+              {
+                url: lastNavItem.url,
+                name: lastNavItem.name,
+                className: `link list_unstyled ${styles.main_nav_link}`,
+                isActive: activeIndex == navItems.length + 1,
+                onClick: handleClick,
+                index: navItems.length + 1
+              },
+              navItems.length + 1
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                className: clsx(
+                  styles.signin_btn,
+                  "flex_row",
+                  "center",
+                  "middle",
+                  isOpenSignIn ? styles.open : "",
+                  Sign_in_btn
+                ),
+                as: "button",
+                type: "button",
+                color: "primary",
+                id: "signIn",
+                action: toggle,
+                size: "small",
+                "aria-controls": "signin-drop-menu",
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: "Sign In" }),
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: "20",
+                      height: "12",
+                      viewBox: "0 0 20 12",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M0.46875 1.76574L9.99908 11.2961L19.5294 1.76574L18.4687 0.705078L9.99908 9.17491L1.52941 0.705078L0.46875 1.76574Z",
+                          fill: "white"
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `${styles.signin_dropdown} ${styles.shadow} rounded bg_white`,
+                children: /* @__PURE__ */ jsx("div", { className: styles.opacity, children: /* @__PURE__ */ jsxs(
+                  "ul",
+                  {
+                    className: "list_unstyled",
+                    role: "menu",
+                    "aria-expanded": isOpenSignIn,
+                    id: "signin-drop-menu",
+                    children: [
+                      /* @__PURE__ */ jsxs("li", { role: "heading", children: [
+                        /* @__PURE__ */ jsx("a", { href: "#", className: styles.signin_header, children: "Personal" }),
+                        /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
+                          "a",
                           {
-                            d: "M0.46875 1.76574L9.99908 11.2961L19.5294 1.76574L18.4687 0.705078L9.99908 9.17491L1.52941 0.705078L0.46875 1.76574Z",
-                            fill: "white"
+                            href: `${define_process_env_default.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
+                            role: "menuitem",
+                            children: "Account Login"
                           }
-                        )
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: `${styles.signin_dropdown} ${styles.shadow} rounded bg_white`,
-                  children: /* @__PURE__ */ jsx("div", { className: styles.opacity, children: /* @__PURE__ */ jsxs(
-                    "ul",
-                    {
-                      className: "list_unstyled",
-                      role: "menu",
-                      "aria-expanded": isOpenSignIn,
-                      id: "signin-drop-menu",
-                      children: [
-                        /* @__PURE__ */ jsxs("li", { role: "heading", children: [
-                          /* @__PURE__ */ jsx("a", { href: "#", className: styles.signin_header, children: "Personal" }),
-                          /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
-                            "a",
-                            {
-                              href: `${define_process_env_default.NEXT_PUBLIC_LOGIN_APP_LOGIN_URL}/auth/login`,
-                              role: "menuitem",
-                              children: "Account Login"
-                            }
-                          ) }) })
-                        ] }),
-                        /* @__PURE__ */ jsxs("li", { role: "heading", children: [
-                          /* @__PURE__ */ jsx("a", { href: "#", className: `${styles.signin_header}`, children: "Business" }),
-                          /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
-                            "a",
-                            {
-                              href: "https://www.netteller.com/axosbank",
-                              role: "menuitem",
-                              children: "Business Banking Login"
-                            }
-                          ) }) })
-                        ] }),
-                        /* @__PURE__ */ jsxs("li", { role: "heading", children: [
-                          /* @__PURE__ */ jsx(
-                            "a",
-                            {
-                              href: "#",
-                              role: "menuitem",
-                              className: `${styles.signin_header}`,
-                              children: "Advisors"
-                            }
-                          ),
-                          /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
+                        ) }) })
+                      ] }),
+                      /* @__PURE__ */ jsxs("li", { role: "heading", children: [
+                        /* @__PURE__ */ jsx("a", { href: "#", className: `${styles.signin_header}`, children: "Business" }),
+                        /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: "https://www.netteller.com/axosbank",
+                            role: "menuitem",
+                            children: "Business Banking Login"
+                          }
+                        ) }) })
+                      ] }),
+                      /* @__PURE__ */ jsxs("li", { role: "heading", children: [
+                        /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: "#",
+                            role: "menuitem",
+                            className: `${styles.signin_header}`,
+                            children: "Advisors"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: /* @__PURE__ */ jsx("li", { className: styles.signin_subheader, children: /* @__PURE__ */ jsx(
+                          "a",
+                          {
+                            href: "https://arms.axosadvisor.com/",
+                            role: "menuitem",
+                            children: "Advisor Login"
+                          }
+                        ) }) })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        "li",
+                        {
+                          className: `${styles.signin_subheader} ${styles.footer} relative`,
+                          children: /* @__PURE__ */ jsx(
                             "a",
                             {
-                              href: "https://arms.axosadvisor.com/",
+                              href: "{AXOSBANK}/Return-to-Application",
                               role: "menuitem",
-                              children: "Advisor Login"
+                              children: "Return to Application"
                             }
-                          ) }) })
-                        ] }),
-                        /* @__PURE__ */ jsx(
-                          "li",
-                          {
-                            className: `${styles.signin_subheader} ${styles.footer} relative`,
-                            children: /* @__PURE__ */ jsx(
-                              "a",
-                              {
-                                href: "{AXOSBANK}/Return-to-Application",
-                                role: "menuitem",
-                                children: "Return to Application"
-                              }
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  ) })
-                }
-              )
-            ]
-          }
-        )
-      ] })
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ) })
+              }
+            )
+          ]
+        }
+      ) })
     ] }) }) }),
     /* @__PURE__ */ jsx(SubNavBar, {}),
     /* @__PURE__ */ jsx(
@@ -274,20 +309,20 @@ function NavBar() {
                     /* @__PURE__ */ jsx(
                       "a",
                       {
-                        href: "/Products/Select-High-Yield-Money-Market",
+                        href: "/products/select-high-yield-money-market",
                         role: "menuitem",
                         children: "Select High Yield Money Market"
                       }
                     ),
-                    /* @__PURE__ */ jsx("a", { href: "/Products/Select-CDs", role: "menuitem", children: "Select CDs" }),
-                    /* @__PURE__ */ jsx("a", { href: "/Products/Select-Checking", role: "menuitem", children: "Select Checking" }),
-                    /* @__PURE__ */ jsx("a", { href: "/Products/Select-Savings", role: "menuitem", children: "Select Savings" }),
-                    /* @__PURE__ */ jsx("a", { href: "/Products/Business-Banking", role: "menuitem", children: "Business Banking" }),
-                    /* @__PURE__ */ jsx("a", { href: "/Products/Mortgage", role: "menuitem", children: "Mortgage" }),
+                    /* @__PURE__ */ jsx("a", { href: "/products/select-cds", role: "menuitem", children: "Select CDs" }),
+                    /* @__PURE__ */ jsx("a", { href: "/products/select-checking", role: "menuitem", children: "Select Checking" }),
+                    /* @__PURE__ */ jsx("a", { href: "/products/select-savings", role: "menuitem", children: "Select Savings" }),
+                    /* @__PURE__ */ jsx("a", { href: "/products/business-banking", role: "menuitem", children: "Business Banking" }),
+                    /* @__PURE__ */ jsx("a", { href: "/products/mortgage", role: "menuitem", children: "Mortgage" }),
                     /* @__PURE__ */ jsx(
                       "a",
                       {
-                        href: "/Products/Premier-World-Checking-and-Savings",
+                        href: "/products/premier-world-checking-and-savings",
                         className: styles.main,
                         role: "heading",
                         children: "Private Client"
@@ -296,16 +331,16 @@ function NavBar() {
                     /* @__PURE__ */ jsx(
                       "a",
                       {
-                        href: "/Products/Premier-Private-Client-Banking",
+                        href: "/products/premier-private-client-banking",
                         role: "menuitem",
                         children: "Advisor Private Client Banking"
                       }
                     ),
-                    /* @__PURE__ */ jsx("a", { href: "/Products/InsureGuard-for-Advisor", role: "menuitem", children: "InsureGuard+" }),
+                    /* @__PURE__ */ jsx("a", { href: "/products/insureGuard-for-advisor", role: "menuitem", children: "InsureGuard+" }),
                     /* @__PURE__ */ jsx(
                       "a",
                       {
-                        href: "/Products/Premier-World-Checking-and-Savings",
+                        href: "/products/premier-world-checking-and-savings",
                         role: "menuitem",
                         children: "Advisor World Checking and Savings"
                       }
@@ -400,7 +435,14 @@ function NavBar() {
                 className: `${styles.mobile_footer_content} flex_col between`,
                 children: [
                   /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: "Get personalized support" }) }),
-                  /* @__PURE__ */ jsx("div", { className: styles.footer_cta, children: /* @__PURE__ */ jsx("a", { href: "mailto:support@axosadvisor.com", children: "Contact Us" }) })
+                  /* @__PURE__ */ jsx("div", { className: styles.footer_cta, children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      color: "primary",
+                      targetUrl: "mailto:support@axosadvisor.com",
+                      children: "Contact Us"
+                    }
+                  ) })
                 ]
               }
             ),

package/dist/NavigationMenu/AxosFiduciary/index.js

@@ -123,12 +123,18 @@ const NavBarAFS = () => {
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: styles.mobile_body, children: /* @__PURE__ */ jsxs("ul", { className: "list_unstyled", children: [
-            /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_1", children: /* @__PURE__ */ jsx("a", { href: "#", children: "About Us" }) }),
-            /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_2", children: /* @__PURE__ */ jsx("a", { href: "/services", children: "Services" }) }),
-            /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_3", children: /* @__PURE__ */ jsx("a", { href: "/Software", children: "Software" }) }),
-            /* @__PURE__ */ jsx("li", { className: `${styles.mobile_nav_item}`, id: "dd_4", children: /* @__PURE__ */ jsx("a", { href: "/Contact", children: "Contact" }) })
-          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: styles.mobile_body, children: /* @__PURE__ */ jsx("ul", { className: "list_unstyled", children: navItems.map(
+            (item, i) => /* @__PURE__ */ jsx(
+              NavItem,
+              {
+                className: styles.mobile_nav_item,
+                index: i,
+                name: item.name,
+                url: item.url
+              },
+              `dd_${i}`
+            )
+          ) }) }),
           /* @__PURE__ */ jsx("div", { className: styles.mobile_footer, children: /* @__PURE__ */ jsxs("div", { className: "flex_row between", children: [
             /* @__PURE__ */ jsxs(
               "div",

package/dist/SetContainer/SetContainer.js

@@ -11,6 +11,7 @@ import "../Chevron/Chevron.css.js";
 import "clsx";
 import "react";
 import "../Button/Button.css.js";
+import "react-use";
 import { inline_container } from "./SetContainer.css.js";
 const SetContainer = ({
   id,

package/dist/Table/Table.css.d.ts

@@ -77,7 +77,7 @@ export declare const td: import("@vanilla-extract/recipes").RuntimeFn<{
             selectors: {
                 "&:first-child": {
                     background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    color: `var(--${string}) !important` | `var(--${string}, ${string}) !important` | `var(--${string}, ${number}) !important`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                 };
             };
             "@media": {
@@ -96,7 +96,7 @@ export declare const td: import("@vanilla-extract/recipes").RuntimeFn<{
             selectors: {
                 "&:first-child": {
                     background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    color: `var(--${string}) !important` | `var(--${string}, ${string}) !important` | `var(--${string}, ${number}) !important`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
                 };
             };
             "@media": {
@@ -114,23 +114,36 @@ export declare const td: import("@vanilla-extract/recipes").RuntimeFn<{
         true: {};
     };
 }>;
+export declare const tableWrapper: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        primary: {
+            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
+        };
+        secondary: {
+            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
+        };
+        tertiary: {
+            border: "none";
+        };
+        quaternary: {
+            border: "none";
+        };
+    };
+}>;
 export declare const table: import("@vanilla-extract/recipes").RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
         };
         secondary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
         };
         tertiary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
         };
         quaternary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
         };
     };
 }>;
+export declare const alternate_color_rows: string;

package/dist/Table/Table.css.js

@@ -12,14 +12,18 @@ var headerVariants = { primary: "_1nivbwe6 _1nivbwe5", secondary: "_1nivbwe7 _1n
 var bodyHeader = "_1nivbwea";
 var th = createRuntimeFn({ defaultClassName: "_1nivbweb", variantClassNames: { variant: { primary: "_1nivbwec", secondary: "_1nivbwed", tertiary: "_1nivbwee", quaternary: "_1nivbwef" }, highlighted: { true: "_1nivbweg" } }, defaultVariants: {}, compoundVariants: [] });
 var td = createRuntimeFn({ defaultClassName: "_1nivbweh", variantClassNames: { variant: { primary: "_1nivbwei", secondary: "_1nivbwej", tertiary: "_1nivbwek", quaternary: "_1nivbwel" }, highlighted: { true: "_1nivbwem" } }, defaultVariants: {}, compoundVariants: [[{ highlighted: true, variant: "primary" }, "_1nivbwen"], [{ highlighted: true, variant: "tertiary" }, "_1nivbweo"]] });
-var table = createRuntimeFn({ defaultClassName: "_1nivbwep", variantClassNames: { variant: { primary: "_1nivbweq", secondary: "_1nivbwer", tertiary: "_1nivbwes", quaternary: "_1nivbwet" } }, defaultVariants: {}, compoundVariants: [] });
+var tableWrapper = createRuntimeFn({ defaultClassName: "_1nivbwep", variantClassNames: { variant: { primary: "_1nivbweq", secondary: "_1nivbwer", tertiary: "_1nivbwes", quaternary: "_1nivbwet" } }, defaultVariants: {}, compoundVariants: [] });
+var table = createRuntimeFn({ defaultClassName: "_1nivbweu", variantClassNames: { variant: { primary: "_1nivbwev", secondary: "_1nivbwew", tertiary: "_1nivbwex", quaternary: "_1nivbwey" } }, defaultVariants: {}, compoundVariants: [] });
+var alternate_color_rows = "_1nivbwez";
 export {
+  alternate_color_rows,
   bodyHeader,
   headerCell,
   headerVariants,
   highlight_first_row,
   highlight_last_row,
   table,
+  tableWrapper,
   table_container,
   table_container_text,
   table_headline,

package/dist/Table/Table.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react";
 import { CellProps, RowProps, TableContainerProps, TableProps } from "./Table.interface";
 export declare const TableContainer: ({ tableTitle, tableBody, tableFooter, }: TableContainerProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Table: ({ variant, children, highlight, }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ variant, children, highlight, tableType, alternateColorRows, }: TableProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableRow: ({ children, ...props }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableHead: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export declare const TableBody: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
@@ -53,7 +53,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "false" | "true") | undefined;
@@ -67,7 +67,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "step" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;

package/dist/Table/Table.interface.d.ts

@@ -9,6 +9,8 @@ export interface CellProps extends HtmlHTMLAttributes<HTMLTableCellElement>, Pro
 export interface TableProps extends PropsWithChildren {
     variant: string;
     highlight?: "First Row" | "Last Row" | "First and Last Row" | undefined;
+    tableType?: "Standard" | "Rate";
+    alternateColorRows?: boolean;
 }
 export interface TableContainerProps extends PropsWithChildren {
     variant: string;

package/dist/Table/Table.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { createElement } from "react";
-import { table_container, table_container_text, table_headline, table, highlight_first_row, highlight_last_row, td, th } from "./Table.css.js";
+import { table_container, table_container_text, table_headline, tableWrapper, table, highlight_first_row, highlight_last_row, alternate_color_rows, td, th } from "./Table.css.js";
 const TableContainer = ({
   tableTitle,
   tableBody,
@@ -17,20 +17,23 @@ const TableContainer = ({
 const Table = ({
   variant = "primary",
   children,
-  highlight
+  highlight,
+  tableType,
+  alternateColorRows = false
 }) => {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: tableWrapper({ variant: getVariant(variant) }), children: /* @__PURE__ */ jsx(
     "table",
     {
       className: clsx(
         table({ variant: getVariant(variant) }),
         highlight === "First Row" && highlight_first_row,
         highlight === "Last Row" && highlight_last_row,
-        highlight === "First and Last Row" && `${highlight_first_row} ${highlight_last_row}`
+        highlight === "First and Last Row" && `${highlight_first_row} ${highlight_last_row}`,
+        alternateColorRows || tableType === "Rate" ? alternate_color_rows : ""
       ),
       children
     }
-  );
+  ) });
 };
 const TableRow = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx("tr", { ...props, children });

package/dist/Table/index.js

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

package/dist/VideoTile/VideoTile.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import ReactMarkdown from "react-markdown";
 import { useToggle } from "react-use";
 import "../icons/CheckIcon/CheckIcon.css.js";
@@ -25,7 +25,7 @@ const VideoTile = ({
     event.preventDefault();
     toggle();
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs("div", { className: `flex center`, children: [
     /* @__PURE__ */ jsx(VideoInit, {}),
     /* @__PURE__ */ jsxs("div", { className: `${video_container} ${w_100} flex flex_col`, children: [
       /* @__PURE__ */ jsx("h2", { className: `${mb_8} ${video_title}`, children: title ? title : null }),