@axos-web-dev/shared-components 0.0.17 → 0.0.19

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/TextBlock/TextBlock.css

@@ -10,5 +10,4 @@
 ._16g7rvn2 {
   margin: 1em 0;
   padding-left: 1.5em;
-  list-style: auto !important;
 }

package/dist/assets/VideoTile/VideoTile.css

@@ -61,4 +61,9 @@
   ._16puo4g4 {
     grid-column: span 12!important;
   }
+}
+@media screen and (min-width:1024px) {
+  ._16puo4g4 {
+    width: 100%;
+  }
 }

package/dist/assets/VideoWrapper/VideoWrapper.css

@@ -1,16 +1,19 @@
 ._2i5u4u0 {
   display: grid;
-  grid-template-columns: repeat(12, 1fr);
+  grid-template-columns: repeat(12,1fr);
   gap: 1.5rem;
 }
-._2i5u4u1 {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  gap: 1.5rem;
-}
-._2i5u4u0 > div {
+._2i5u4u1 > div {
   grid-column: span 6;
 }
-._2i5u4u1 > div {
+._2i5u4u2 > div {
   grid-column: span 4;
+}
+@media (max-width: 1023px) {
+  ._2i5u4u1 > div {
+    grid-column: span 12;
+  }
+  ._2i5u4u2 > div {
+    grid-column: span 12;
+  }
 }

package/dist/assets/globals.css

@@ -33,6 +33,9 @@ body {
 p {
   margin-bottom: 10px;
 }
+li p {
+  margin-bottom: 0;
+}
 p:last-child {
   margin-bottom: 0;
 }
@@ -42,7 +45,8 @@ p:only-child {
 .containment {
   width: min(1200px, calc(100% - 4rem));
   box-sizing: border-box;
-  margin-inline: auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 .section_spacer {
   margin-top: 3.5rem;
@@ -226,7 +230,8 @@ hide {
   display: none !important;
 }
 .section_header {
-  margin-inline: auto;
+  margin-left: auto;
+  margin-right: auto;
   margin-bottom: 2.5rem;
   max-width: 49.5rem;
   text-align: center;

package/dist/assets/index.css

@@ -23,9 +23,6 @@ input, button, textarea, select {
 p, h1, h2, h3, h4, h5, h6 {
   overflow-wrap: break-word;
 }
-ul[class], ol[class] {
-  list-style: none;
-}
 #__next  {
   isolation: isolate;
 }

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

@@ -13,6 +13,7 @@ export * from './FaqAccordion';
 export * from './FooterDisclosure';
 export * from './Forms';
 export * from './HeroBanner';
+export * from './Hyperlink';
 export * from './IconBillboard';
 export * from './ImageBillboard';
 export * from './Input';
@@ -27,4 +28,4 @@ export * from './VideoTile';
 export * from './VideoWrapper';
 export * from './icons';
 export * from './themes';
-export * from "./utils";
+export * from './utils';