@axos-web-dev/shared-components 0.0.16 → 0.0.18

package/dist/assets/Table/Table.css

@@ -1,88 +1,94 @@
 ._1nivbwe0 {
-  background: white;
   border-radius: 16px;
 }
 ._1nivbwe1 {
+  background: #f4f4f4;
+  padding: 2rem 0;
+}
+._1nivbwe2 {
+  background: white;
+}
+._1nivbwe3 {
   margin-inline: auto;
   margin-bottom: 2.5rem;
   text-align: center;
   max-width: 1000px;
 }
-._1nivbwe2 {
+._1nivbwe4 {
   background: var(--_1073cm84);
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-._1nivbwe3 tbody tr:first-child td {
+._1nivbwe5 tbody tr:first-child td {
   background-color: #DEF4FF !important;
   background: #DEF4FF !important;
   color: #1E3860;
   font-size: 20px;
 }
-._1nivbwe4 tbody tr:last-child td {
+._1nivbwe6 tbody tr:last-child td {
   background-color: #DEF4FF !important;
   background: #DEF4FF !important;
   color: #1E3860;
   font-size: 20px;
 }
-._1nivbwe5 {
+._1nivbwe7 {
   font-size: 16px;
   font-weight: 700;
   line-height: 24px;
   letter-spacing: 0.2px;
   margin-bottom: 8px;
 }
-._1nivbwe6 {
+._1nivbwe8 {
   color: var(--_1073cm82);
 }
-._1nivbwe7 {
+._1nivbwe9 {
   color: var(--_1073cm89);
 }
-._1nivbwe8 {
+._1nivbwea {
   color: var(--_1073cm8g);
 }
-._1nivbwe9 {
+._1nivbweb {
   color: var(--_1073cm8o);
 }
-._1nivbwea {
+._1nivbwec {
   font-size: 12px;
   font-weight: 700;
   line-height: 24px;
   letter-spacing: 0.2px;
 }
-._1nivbweb {
+._1nivbwed {
   padding: 16px;
   border-bottom: thin solid #F4F4F4;
 }
-._1nivbweb:first-child {
+._1nivbwed:first-child {
   position: sticky;
   left: 0;
 }
-._1nivbwec {
+._1nivbwee {
   color: #4A5560;
   background: var(--_1073cm81);
   border-bottom: 1px solid var(--_1073cm87);
 }
-._1nivbwed {
+._1nivbwef {
   color: #4A5560;
   background: var(--_1073cm88);
   border-bottom: 1px solid var(--_1073cm8e);
 }
-._1nivbwee {
+._1nivbweg {
   color: var(--_1073cm8g);
   border-bottom: 1px solid #F4F4F4;
 }
-._1nivbwee:first-child {
+._1nivbweg:first-child {
   background: var(--_1073cm8f);
 }
-._1nivbwef {
+._1nivbweh {
   color: #FFFFFF;
   border-bottom: 1px solid #F4F4F4;
 }
-._1nivbwef:first-child {
+._1nivbweh:first-child {
   background: var(--_1073cm8m);
 }
-._1nivbweh {
+._1nivbwej {
   padding: 16px;
   font-size: 12px;
   font-weight: 700;
@@ -91,64 +97,64 @@
   border-bottom: thin solid #FFFFFF66;
   text-align: center;
 }
-._1nivbweh:first-child {
+._1nivbwej:first-child {
   position: sticky;
   left: 0;
 }
-._1nivbwei {
+._1nivbwek {
   background: var(--_1073cm81);
   color: #4A5560;
   border-bottom: 1px solid #D4D4D4;
 }
-._1nivbwej {
+._1nivbwel {
   background: var(--_1073cm88);
   color: #4A5560;
   border-bottom: 1px solid #D4D4D4;
 }
-._1nivbwek {
+._1nivbwem {
   color: var(--_1073cm8g);
   border-bottom: 1px solid #F4F4F4;
 }
-._1nivbwek:first-child {
+._1nivbwem:first-child {
   background: var(--_1073cm8f);
   color: var(--_1073cm8g);
 }
-._1nivbwel {
+._1nivbwen {
   color: var(--_1073cm8n);
   border-bottom: 1px solid #F4F4F4;
 }
-._1nivbwel:first-child {
+._1nivbwen:first-child {
   background: var(--_1073cm8m);
   color: var(--_1073cm8n);
 }
-._1nivbwen {
+._1nivbwep {
   background: #F4F4F4;
 }
-._1nivbweo {
+._1nivbweq {
   background: #D4D4D4;
 }
 tr:last-child td {
   border-bottom: 0;
 }
-._1nivbwep {
+._1nivbwer {
   width: 100%;
   overflow: hidden;
   margin: auto;
   border-radius: 1rem;
 }
-._1nivbweq {
+._1nivbwes {
   border: 1px solid var(--_1073cm87);
 }
-._1nivbwer {
+._1nivbwet {
   border: 1px solid var(--_1073cm8e);
 }
-._1nivbwes {
+._1nivbweu {
   border: none;
 }
-._1nivbwet {
+._1nivbwev {
   border: none;
 }
-._1nivbweu {
+._1nivbwew {
   background-color: white;
   position: relative;
   overflow: hidden;
@@ -158,46 +164,75 @@ tr:last-child td {
   width: 100%;
   table-layout: fixed;
 }
-._1nivbwev {
+._1nivbwex {
   background: var(--_1073cm81);
 }
-._1nivbwew {
+._1nivbwey {
   background: var(--_1073cm88);
 }
-._1nivbwex {
+._1nivbwez {
   background: var(--_1073cm8f);
 }
-._1nivbwey {
+._1nivbwe10 {
   background: var(--_1073cm8m);
 }
-._1nivbweq ._1nivbwez tr:nth-child(even) td {
+._1nivbwes ._1nivbwe11 tr:nth-child(even) td {
   background: #F4F4F4;
 }
-._1nivbwer ._1nivbwez tr:nth-child(even) td {
+._1nivbwet ._1nivbwe11 tr:nth-child(even) td {
   background: #FFFFFF;
 }
+._1nivbwe12 ._1nivbwed {
+  font-size: 18px;
+  text-align: left;
+  line-height: 1.44;
+  letter-spacing: 0.2px;
+}
+._1nivbwe12 ._1nivbwej {
+  font-size: 18px;
+  text-align: left;
+  line-height: 1.44;
+  letter-spacing: 0.2px;
+  font-weight: 400;
+}
+._1nivbwe1 ._1nivbwe3 {
+  max-width: 90%;
+  text-align: left;
+}
+._1nivbwe12 ._1nivbwed {
+  background: #f4f4f4;
+}
+._1nivbwe12 tr:nth-child(even) td {
+  background: #f4f4f4;
+}
+._1nivbwe12 tr:nth-child(odd) td {
+  background: #ffffff !important;
+}
+._1nivbwe12 tr td, ._1nivbwe12 tr th {
+  border-bottom: 0;
+}
 @media screen and (max-width: 768px) {
-  ._1nivbweb:first-child {
+  ._1nivbwed:first-child {
     box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     z-index: 2;
     top: 0;
     width: 25%;
   }
-  ._1nivbwee:first-child {
+  ._1nivbweg:first-child {
     background: var(--_1073cm8f);
   }
-  ._1nivbwef:first-child {
+  ._1nivbweh:first-child {
     background-image: var(--_1073cm8m);
   }
-  ._1nivbweh {
+  ._1nivbwej {
     font-size: 14px;
   }
-  ._1nivbweh:first-child {
+  ._1nivbwej:first-child {
     box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
     z-index: 2;
     width: 25%;
   }
-  ._1nivbweu {
+  ._1nivbwew {
     border-radius: 0;
     overflow: auto;
     min-width: 900px;
@@ -205,13 +240,13 @@ tr:last-child td {
   }
 }
 @media screen and (max-width: 400px) {
-  ._1nivbweb:first-child {
+  ._1nivbwed:first-child {
     width: 20%;
   }
-  ._1nivbweh:first-child {
+  ._1nivbwej:first-child {
     width: 20%;
   }
-  ._1nivbweu {
+  ._1nivbwew {
     min-width: 650px;
   }
 }
@@ -219,22 +254,22 @@ tr:last-child td {
   ._1nivbwe0 {
     scrollbar-width: thin;
   }
-  ._1nivbwek:first-child {
+  ._1nivbwem:first-child {
     background-image: var(--_1073cm8f);
   }
-  ._1nivbwel:first-child {
+  ._1nivbwen:first-child {
     background-image: var(--_1073cm8m);
   }
-  ._1nivbweu {
+  ._1nivbwew {
     overflow-x: auto;
   }
 }
 @media screen and (max-width:768px) {
-  ._1nivbwe2 {
+  ._1nivbwe4 {
     font-size: 28px;
     line-height: 1.29;
   }
-  ._1nivbwep {
+  ._1nivbwer {
     border-radius: 0;
     overflow-x: scroll;
   }

package/dist/assets/globals.css

@@ -30,6 +30,15 @@ body {
   line-height: 1.39;
   letter-spacing: 0.2px;
 }
+p {
+  margin-bottom: 10px;
+}
+p:last-child {
+  margin-bottom: 0;
+}
+p:only-child {
+  margin-bottom: 0;
+}
 .containment {
   width: min(1200px, calc(100% - 4rem));
   box-sizing: border-box;

package/dist/icons/ArrowIcon/ArrowIcon.css.d.ts

@@ -1,4 +1,4 @@
-export declare const Arrow: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const Arrow: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/icons/ArrowIcon/index.d.ts

@@ -1,5 +1,6 @@
+import { FC } from 'react';
 import { CallToActionTypes } from '../../utils/variant.types';
-import { FC } from "react";
+
 export interface ArrowProps {
     variant: CallToActionTypes;
     className?: string;

package/dist/icons/ArrowIcon/index.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-const SvgArrowIcon = ({ className }) => {
+import { Arrow } from "./ArrowIcon.css.js";
+const SvgArrowIcon = ({ className, variant }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -48,6 +49,7 @@ const SvgArrowIcon = ({ className }) => {
                           /* @__PURE__ */ jsx(
                             "path",
                             {
+                              className: Arrow({ variant }),
                               d: "M1.13491422,0.187942261 C0.94986252,0.00203917967 0.649789062,0.00203917967 0.464737367,0.187942261 L0.187303721,0.466652324 C0.00225202625,0.652555405 0.00225202625,0.95391307 0.187303721,1.13991252 L4.55851447,5.53075249 L0.187303721,9.92149608 C0.00225202625,10.1074955 0.00225202625,10.4088532 0.187303721,10.5947563 L0.464737367,10.8734663 C0.649789062,11.0593694 0.94986252,11.0593694 1.13491422,10.8734663 L6.45248835,5.53075249 L1.13491422,0.187942261 Z",
                               id: "Fill-1",
                               fill: "#2F5B88",

package/dist/icons/AxosX/Blue.d.ts

@@ -1,3 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
+
 declare const SvgComponent: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgComponent;

package/dist/icons/AxosX/index.d.ts

@@ -1,3 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
+
 declare const SvgAxosX: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgAxosX;

package/dist/icons/CheckCircle.d.ts

@@ -1,3 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
+
 declare const SvgCheckCircle: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgCheckCircle;

package/dist/icons/CheckCircleLight.d.ts

@@ -1,3 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
+
 declare const SvgCheckCircleLight: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgCheckCircleLight;

package/dist/icons/CheckIcon/CheckIcon.css.d.ts

@@ -1,5 +1,6 @@
-import { RecipeVariants } from "@vanilla-extract/recipes";
-export declare const checkColor: import("@vanilla-extract/recipes").RuntimeFn<{
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+export declare const checkColor: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;

package/dist/icons/CheckIcon/index.d.ts

@@ -1,3 +1,4 @@
-import { CheckColorVariant } from "./CheckIcon.css";
+import { CheckColorVariant } from './CheckIcon.css';
+
 declare const SvgCheckIcon: (props: CheckColorVariant) => import("react/jsx-runtime").JSX.Element;
 export default SvgCheckIcon;

package/dist/icons/ChevronDown.d.ts

@@ -1,3 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
+
 declare const SvgChevronDown: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgChevronDown;

package/dist/icons/ChevronUp.d.ts

@@ -1,3 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
+
 declare const SvgChevronUp: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgChevronUp;

package/dist/icons/CloseIcon/index.d.ts

@@ -1,3 +1,4 @@
-import { FC } from "react";
+import { FC } from 'react';
+
 declare const SvgCloseIcon: FC;
 export default SvgCloseIcon;

package/dist/icons/DownloadIcon/index.d.ts

@@ -1,4 +1,5 @@
-import { FC } from "react";
+import { FC } from 'react';
+
 declare const SvgDownloadIcon: FC<{
     className?: string;
 }>;

package/dist/icons/EqualHousingLender.d.ts

@@ -1,3 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
+
 declare const SvgEqualHousingLender: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgEqualHousingLender;

package/dist/icons/LockIcon/index.d.ts

@@ -1,3 +1,4 @@
-import { FC } from "react";
+import { FC } from 'react';
+
 declare const SvgLockIcon: FC;
 export default SvgLockIcon;

package/dist/icons/MemberFdicLogo.d.ts

@@ -1,3 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
+
 declare const SvgMemberFdicLogo: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgMemberFdicLogo;

package/dist/icons/QuoteIconGrey.d.ts

@@ -1,3 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
+
 declare const SvgQuoteIconGrey: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgQuoteIconGrey;

package/dist/icons/QuoteIconWhite.d.ts

@@ -1,3 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
+
 declare const SvgQuoteIconWhite: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgQuoteIconWhite;

package/dist/icons/QuoteIconYellow.d.ts

@@ -1,3 +1,4 @@
-import { SVGProps } from "react";
+import { SVGProps } from 'react';
+
 declare const SvgQuoteIconYellow: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgQuoteIconYellow;

package/dist/icons/WarningIcon/index.d.ts

@@ -1,3 +1,4 @@
-import { FC } from "react";
+import { FC } from 'react';
+
 export declare const SvgWarningIcon: FC;
 export default SvgWarningIcon;

package/dist/icons/index.d.ts

@@ -1,17 +1,17 @@
-export { default as ArrowIcon } from "./ArrowIcon";
-export { default as AxosX } from "./AxosX";
-export { default as AxosXBlue } from "./AxosX/Blue";
-export { default as CheckCircle } from "./CheckCircle";
-export { default as CheckCircleLight } from "./CheckCircleLight";
-export { default as CheckIcon } from "./CheckIcon";
-export { default as ChevronDown } from "./ChevronDown";
-export { default as ChevronUp } from "./ChevronUp";
-export { default as CloseIcon } from "./CloseIcon";
-export { default as DownloadIcon } from "./DownloadIcon";
-export { default as EqualHousingLender } from "./EqualHousingLender";
-export { default as LockIcon } from "./LockIcon";
-export { default as MemberFdicLogo } from "./MemberFdicLogo";
-export { default as QuoteIconGrey } from "./QuoteIconGrey";
-export { default as QuoteIconWhite } from "./QuoteIconWhite";
-export { default as QuoteIconYellow } from "./QuoteIconYellow";
-export { default as WarningIcon } from "./WarningIcon";
+export { default as ArrowIcon } from './ArrowIcon';
+export { default as AxosX } from './AxosX';
+export { default as AxosXBlue } from './AxosX/Blue';
+export { default as CheckCircle } from './CheckCircle';
+export { default as CheckCircleLight } from './CheckCircleLight';
+export { default as CheckIcon } from './CheckIcon';
+export { default as ChevronDown } from './ChevronDown';
+export { default as ChevronUp } from './ChevronUp';
+export { default as CloseIcon } from './CloseIcon';
+export { default as DownloadIcon } from './DownloadIcon';
+export { default as EqualHousingLender } from './EqualHousingLender';
+export { default as LockIcon } from './LockIcon';
+export { default as MemberFdicLogo } from './MemberFdicLogo';
+export { default as QuoteIconGrey } from './QuoteIconGrey';
+export { default as QuoteIconWhite } from './QuoteIconWhite';
+export { default as QuoteIconYellow } from './QuoteIconYellow';
+export { default as WarningIcon } from './WarningIcon';

package/dist/index.css.d.ts

@@ -0,0 +1 @@
+

package/dist/main.d.ts

@@ -27,4 +27,4 @@ export * from './VideoTile';
 export * from './VideoWrapper';
 export * from './icons';
 export * from './themes';
-export * from "./utils";
+export * from './utils';

package/dist/main.js

@@ -27,7 +27,9 @@ import { IconBillboardSet } from "./IconBillboard/IconBillboardSet.js";
 import { ImageBillboardSet } from "./ImageBillboard/ImageBillboard.js";
 import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, header, imagePlacement, image_background, mh_330, rate_billboard, rate_container, rate_pad, section_text_ImageBillboard, single_container, supertag, three_inline, two_inline, up_to } from "./ImageBillboard/ImageBillboard.css.js";
 import { ImageBillboard } from "./ImageBillboard/ImageBillboardSet.js";
-import { Input } from "./Input/index.js";
+import { Input } from "./Input/Input.js";
+import { container, helperText, iconContainer, iconContainerBase, iconInput, input, labelClassName, wrapper } from "./Input/Input.css.js";
+import { InputPhone } from "./Input/InputPhone.js";
 import { MainHTML } from "./MainHTML/index.js";
 import { Modal } from "./Modal/Modal.js";
 import { GlobalContext, GlobalContextProvider, useGlobalContext } from "./Modal/contextApi/store.js";
@@ -37,7 +39,7 @@ import { SecondaryFooter } from "./SecondaryFooter/index.js";
 import { SetContainer } from "./SetContainer/SetContainer.js";
 import { inline_container } from "./SetContainer/SetContainer.css.js";
 import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "./Table/Table.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/Table.css.js";
+import { alternate_color_rows, apy_table, bodyHeader, headerCell, headerVariants, highlight_first_row, highlight_last_row, table, tableWrapper, table_container, table_container_text, table_headline, td, th } from "./Table/Table.css.js";
 import { TextBlock } from "./TextBlock/TextBlock.js";
 import { textBlockHeader, textBlockList, textBlockParagraph } from "./TextBlock/TextBlock.css.js";
 import { VideoInit } from "./VideoTile/VideoInit.js";
@@ -111,6 +113,7 @@ export {
   ImageBillboard,
   ImageBillboardSet,
   Input,
+  InputPhone,
   default15 as LockIcon,
   MainHTML,
   default16 as MemberFdicLogo,
@@ -141,6 +144,7 @@ export {
   actions,
   alternate_color_rows,
   apy_billboard,
+  apy_table,
   associatedEmail,
   axosTheme,
   billboard,
@@ -156,6 +160,7 @@ export {
   bodyHeader,
   button,
   buttons,
+  container,
   containerIconBillboard,
   content,
   disclosureForm,
@@ -178,21 +183,27 @@ export {
   headerIconBillboard,
   headerVariants,
   header_section,
+  helperText,
   hide,
   hide_transcript,
   highlight_first_row,
   highlight_last_row,
   icon,
+  iconContainer,
+  iconContainerBase,
   iconForm,
+  iconInput,
   iconsContent,
   imagePlacement,
   image_background,
   inline_container,
+  input,
   isAbsoluteUrl,
   isAllowedUrl,
   isEmailLink,
   isPhoneLink,
   item,
+  labelClassName,
   layout,
   list,
   listItem,
@@ -235,5 +246,6 @@ export {
   video_container,
   video_title,
   vidyard_height,
-  w_100
+  w_100,
+  wrapper
 };

package/dist/themes/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./axos.css";
-export * from "./premier.css";
+export * from './axos.css';
+export * from './premier.css';

package/dist/utils/allowedAxosDomains.js

@@ -1,15 +1,15 @@
 const moreDomains = {
-  "{AXOS}": "www.axos.com",
-  "{AXOSBANK}": "www.axosbank.com",
+  "{AXOS}": "https://www.axos.com",
+  "{AXOSBANK}": "https://www.axosbank.com",
   "{AXOSCLEARING}": "https://axosclearing.com/",
-  "{AAS}": "www.axosadvisorservices.com",
-  "{NATIONWIDE}": "www.nationwide.axosbank.com",
+  "{AAS}": "https://www.axosadvisorservices.com",
+  "{NATIONWIDE}": "https://www.nationwide.axosbank.com",
   // '{ENROLLMENT}': process.env.NEXT_PUBLIC_ENROLLMENT_URL as string,
   // '{SECENROLLMENT}': process.env.NEXT_PUBLIC_ENROLLMENT2_URL as string,
   "{ASSETSURL}": "https://assets.ctfassets.net",
   "{IMAGEASSETSURL}": "https://images.ctfassets.net",
   "{ONLINEBANKING}": "https://onlinebanking.uat.axsobank.com",
-  "{UFBDIRECT": "www.ufbdirect.com"
+  "{UFBDIRECT": "https://www.ufbdirect.com"
 };
 const isAllowedUrl = (url) => {
   const uri = new URL(url, location.href);

package/dist/utils/ctaOptions.d.ts

@@ -1,4 +1,5 @@
 import { ImageInterface } from '../CallToActionBar/CallToActionBar.interface';
+
 export declare const imageOrientation: (image: ImageInterface) => string;
 export declare const getBannerSizeClassName: (size: string, overlap: boolean) => string;
 export declare const returnImageDimensions: (size: string, image_orientation: string) => {