@axos-web-dev/shared-components 1.0.7 → 1.0.9-9.dev.1

package/dist/assets/SetContainer/SetContainer.css

@@ -33,38 +33,48 @@
 ._18ygy9ma {
   grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
 }
+._18ygy9m6:has(.is_icon) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+}
+._18ygy9m6.cols_1 > .is_icon {
+  flex: 1 1 100%;
+}
+._18ygy9m6.cols_2 > .is_icon {
+  flex: 1 1 calc(50% - 12px);
+}
+._18ygy9m6.cols_3 > .is_icon {
+  flex: 1 1 calc(33.333% - 1rem);
+}
+._18ygy9m6.cols_4 > .is_icon {
+  flex: 1 1 calc(25% - 18px);
+}
 ._18ygy9mb {
   margin-inline: auto;
-  padding-bottom: 2.5rem;
-  text-align: center;
-  max-width: 1000px;
-  padding-top: 2.5rem;
+  padding-block: 2.5rem;
+}
+:is(._18ygy9m5, ._18ygy9m6) .containment {
+  width: 100%;
 }
-._18ygy9m5 .containment {
+._18ygy9m0 .containment .containment {
   width: 100%;
 }
 ._18ygy9mc {
   display: flex;
+  margin-inline: auto;
   place-items: center;
   text-align: center;
-  margin-inline: auto;
 }
 ._18ygy9md {
   display: block;
   margin: auto;
 }
 ._18ygy9me {
-  margin-inline: auto;
-  padding-top: 2.5rem;
-  text-align: center;
-  max-width: 1000px;
-  padding-bottom: 2.5rem;
-}
-._18ygy9mf {
   isolation: isolate;
   position: relative;
 }
-._18ygy9mf::before {
+._18ygy9me::before {
   content: "";
   position: absolute;
   width: 100%;
@@ -74,29 +84,29 @@
   right: 0;
   z-index: -1;
 }
-._18ygy9mg {
+._18ygy9mf {
   background: var(--_1073cm88);
 }
-._18ygy9mg::before {
+._18ygy9mf::before {
   background: var(--_1073cm81);
 }
-._18ygy9mh {
+._18ygy9mg {
   background: var(--_1073cm81);
 }
-._18ygy9mh::before {
+._18ygy9mg::before {
   background: var(--_1073cm88);
 }
-._18ygy9mi {
+._18ygy9mh {
   background: var(--_1073cm81);
 }
-._18ygy9mi::before {
+._18ygy9mh::before {
   background: var(--_1073cm8f);
   color: var(--_1073cm8n);
 }
-._18ygy9mj {
+._18ygy9mi {
   background: var(--_1073cm81);
 }
-._18ygy9mj::before {
+._18ygy9mi::before {
   background: var(--_1073cm8m);
   color: var(--_1073cm8n);
 }
@@ -107,6 +117,9 @@
   ._18ygy9m6 {
     grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
   }
+  ._18ygy9m6.cols_3 > .is_icon {
+    flex-basis: calc(50% - 12px);
+  }
 }
 @media (min-width: 1024px) {
   ._18ygy9m5:has(> :nth-child(5):last-child) {
@@ -129,10 +142,19 @@
   }
 }
 @media screen and (max-width: 768px) {
+  ._18ygy9m6:has(.is_icon) {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
   ._18ygy9mb {
     padding-block: 1.5rem;
   }
 }
+@media screen and (max-width: 1280px) {
+  ._18ygy9m6.cols_4 > .is_icon {
+    flex-basis: calc(50% - 12px);
+  }
+}
 @media screen and (max-width:320px) {
   ._18ygy9mc {
     max-width: 100%;

package/dist/assets/Topic/Topic.css

@@ -0,0 +1,54 @@
+.un906l0 {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  font-family: var(--main-font-family);
+  padding: 40px 0;
+  color: #1E3860;
+}
+.un906l1 {
+  display: grid;
+  gap: 12px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  grid-template-columns: repeat(2, minmax(auto, 1fr));
+}
+.un906l2 {
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 36px;
+  letter-spacing: 0.2px;
+  font-family: var(--header-font-family);
+  margin-bottom: 48px;
+  text-decoration: none;
+  margin: 0;
+}
+.un906l2 a {
+  text-decoration: none;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+.un906l3 {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 18px;
+  line-height: 26px;
+  letter-spacing: 0.2px;
+  font-family: var(--main-font-family);
+  font-weight: 700;
+  text-decoration: none;
+  color: #2F5B88;
+}
+@media screen and (max-width: 768px) {
+  .un906l1 {
+    grid-template-columns: repeat(2, minmax(200px, 1fr));
+  }
+}
+@media screen and (max-width: 480px) {
+  .un906l1 {
+    grid-template-columns: repeat(1, minmax(200px, 1fr));
+  }
+}

package/dist/assets/WalnutIframe/wrapper.css.css

@@ -0,0 +1,49 @@
+@keyframes _shimmer_13j22_1 {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+._wrapper_13j22_10 {
+  background: #1e3860;
+  border-radius: 8px;
+  height: 555px;
+  isolation: isolate;
+  margin-block: 48px;
+}
+
+section > ._wrapper_13j22_10:first-child {
+  margin-top: 0 !important;
+}
+
+._wrapper_13j22_10::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 190%;
+  height: 100%;
+  background: linear-gradient(
+    65deg,
+    rgba(255, 255, 255, 0) 20%,
+    rgba(255, 255, 255, 0.5) 50%,
+    rgba(255, 255, 255, 0) 80%
+  );
+  animation: _shimmer_13j22_1 1.3s infinite linear;
+  z-index: -1;
+}
+
+._wrapper_control_13j22_39 {
+  height: 100%;
+  width: 100%;
+  overflow-x: scroll;
+}
+
+@media (max-width: 1023px) {
+  ._wrapper_13j22_10 {
+    display: none;
+  }
+}

package/dist/assets/globals.css

@@ -1,19 +1,3 @@
-@keyframes _5fvzn90 {
-  0% {
-    left: 4px;
-  }
-  to {
-    left: 0px;
-  }
-}
-@keyframes _5fvzn91 {
-  0% {
-    left: 0px;
-  }
-  to {
-    left: 4px;
-  }
-}
 * {
   box-sizing: border-box;
   margin: 0;
@@ -100,6 +84,9 @@ li p, p:last-child, p:only-child {
   border-radius: 1rem;
   overflow: hidden;
 }
+.overflow_hidden {
+  overflow: hidden;
+}
 .bordered {
   border: 1px solid #d4d4d4;
 }
@@ -209,11 +196,11 @@ h1, h2, h3, h4, h5, h6, es_font {
 }
 .sc__btn > .arrow {
   position: relative;
-  animation: _5fvzn90 0.1s linear 0s 1 normal forwards;
+  will-change: transform;
+  transition: transform 0.3s ease;
 }
-.sc__btn:hover > .arrow, .arrow, .sc__btn:focus-within > .arrow {
-  transition: 0.3s;
-  animation: _5fvzn91 0.3s ease-out 0s 1 normal forwards;
+.sc__btn:hover > .arrow, .sc__btn:focus-within > .arrow {
+  transform: translateX(4px);
 }
 .link {
   word-break: break-word;
@@ -239,11 +226,7 @@ a {
 }
 sup {
   font-size: 75%;
-}
-.list_item sup {
-  vertical-align: top;
-  position: relative;
-  top: -0.5em;
+  line-height: 1;
 }
 p:empty, ul:empty {
   display: none;
@@ -275,6 +258,11 @@ p:empty, ul:empty {
     width: calc(100% - 2rem);
   }
 }
+@media screen and (max-width:1280px) {
+  .header_2 {
+    font-size: 2rem;
+  }
+}
 @media screen and (max-width:768px) {
   .header_1 {
     font-size: 28px;
@@ -290,11 +278,6 @@ p:empty, ul:empty {
     margin-bottom: 1.5rem;
   }
 }
-@media screen and (max-width:1280px) {
-  .header_2 {
-    font-size: 2rem;
-  }
-}
 @media screen and (max-width:320px) {
   .header_1 {
     font-size: 25px;

package/dist/assets/utils/optimizeImage/optimizeImage.css.css

@@ -0,0 +1,47 @@
+@keyframes _shimmer_pwl74_1 {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+._loader_pwl74_10 {
+  height: 100%;
+  width: 100%;
+  inset: 0;
+}
+
+._loading_pwl74_16 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #1e3860;
+}
+
+._1es6o1h0 ._loading_pwl74_16 {
+  background-color: var(--_1073cm8f);
+}
+
+.fl2fv50 ._loading_pwl74_16 {
+  background-color: #28587d;
+}
+
+._loading_pwl74_16::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 190%;
+  height: 100%;
+  background: linear-gradient(
+    65deg,
+    rgba(255, 255, 255, 0) 20%,
+    rgba(255, 255, 255, 0.5) 50%,
+    rgba(255, 255, 255, 0) 80%
+  );
+  animation: _shimmer_pwl74_1 1.3s infinite linear;
+  z-index: 1;
+}

package/dist/globals.css.js

@@ -1,2 +1,2 @@
-/* empty css                                         */
+import './assets/globals.css';import './assets/Typography/Typography.css';/* empty css                                         */
 /* empty css                           */

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

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

package/dist/icons/ArrowIcon/ArrowIcon.css.js

@@ -1,4 +1,4 @@
-/* empty css                                   */
+import '../../assets/icons/ArrowIcon/ArrowIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
 /* empty css                                       */
 /* empty css                             */

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

@@ -3,10 +3,10 @@ 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})`;
+            fill: `var(--${string})`;
         };
         secondary: {
-            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fill: `var(--${string})`;
         };
     };
 }>;

package/dist/icons/CheckIcon/CheckIcon.css.js

@@ -1,4 +1,4 @@
-/* empty css                                   */
+import '../../assets/icons/CheckIcon/CheckIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
 /* empty css                                       */
 /* empty css                             */

package/dist/icons/DownloadIcon/DownloadIcon.css.js

@@ -1,4 +1,4 @@
-/* empty css                                   */
+import '../../assets/icons/DownloadIcon/DownloadIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
 /* empty css                                       */
 /* empty css                                */

package/dist/icons/FollowIcon/FollowIcon.css.js

@@ -1,4 +1,4 @@
-/* empty css                                   */
+import '../../assets/icons/FollowIcon/FollowIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
 /* empty css                                       */
 /* empty css                              */

package/dist/icons/Logos/AXB.d.ts

@@ -0,0 +1,8 @@
+import { SVGProps } from 'react';
+
+declare const SvgComponent: (props: SVGProps<SVGSVGElement> & {
+    classNameFill?: string;
+    height?: number;
+    width?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SvgComponent;

package/dist/icons/Logos/AXB.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const SvgComponent = (props) => {
+  const { classNameFill, height, width } = props;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: width || 137,
+      height: height || 30,
+      viewBox: "0 0 137 30",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M40.9059 0.655984C40.3905 0.140561 39.594 0.140561 39.0785 0.655984L38.3288 1.40569C37.8134 1.92112 37.8134 2.71768 38.3288 3.2331L50.1836 15.1347L38.3288 27.0363C37.8134 27.5517 37.8134 28.3483 38.3288 28.8637L39.0785 29.6134C39.594 30.1289 40.3905 30.1289 40.9059 29.6134L55.3378 15.1347L40.9059 0.655984Z",
+            fill: "#FAA74A"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M131.058 2.71769C131.058 1.17142 132.23 0 133.776 0C135.322 0 136.494 1.17142 136.494 2.71769C136.494 4.26396 135.322 5.43538 133.776 5.43538C132.23 5.43538 131.058 4.26396 131.058 2.71769ZM136.166 2.71769C136.166 1.31199 135.182 0.327997 133.776 0.327997C132.37 0.327997 131.386 1.35884 131.386 2.71769C131.386 4.12339 132.37 5.10738 133.776 5.10738C135.135 5.15424 136.166 4.07653 136.166 2.71769ZM133.307 4.07653H132.932V1.26513C133.12 1.21827 133.354 1.21827 133.588 1.21827C134.291 1.21827 134.713 1.54627 134.713 2.15541C134.713 2.62398 134.385 2.90512 134.057 2.99883L134.994 4.12339H134.572L133.729 3.09254H133.354L133.307 4.07653ZM133.307 2.76455H133.635C134.01 2.76455 134.338 2.57712 134.338 2.15541C134.338 1.78055 134.057 1.59313 133.588 1.59313C133.495 1.59313 133.354 1.59313 133.26 1.59313L133.307 2.76455Z",
+            fill: "#1E3860",
+            className: classNameFill
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M120.281 13.4479C120.281 13.4479 118.922 13.1199 118.173 12.8387C115.783 11.9953 113.581 10.7302 113.581 8.4342C113.581 5.76337 115.877 3.93595 119.344 3.93595C121.64 3.93595 123.421 4.59195 124.686 5.85708L125.107 6.27879C125.623 6.79421 126.419 6.79421 126.935 6.27879L127.685 5.52908C128.2 5.01366 128.2 4.21709 127.685 3.70167C127.497 3.46739 127.263 3.27996 127.263 3.27996C125.248 1.35883 122.483 0.327987 119.344 0.327987C116.486 0.327987 114.19 1.07769 112.269 2.67082C110.441 4.21709 109.551 6.13822 109.551 8.48105C109.551 14.1976 114.893 15.6033 119.578 16.8684L119.719 16.9153C123.842 17.8993 125.904 19.5392 125.904 21.7884C125.904 24.6466 123.514 26.3335 119.578 26.3335C117.095 26.3335 114.893 25.49 113.393 23.9906L112.972 23.5689C112.456 23.0535 111.66 23.0535 111.144 23.5689L110.254 24.4592C109.738 24.9746 109.738 25.7712 110.254 26.2866L110.676 26.7083C112.831 28.8169 115.924 29.9883 119.578 29.9883C122.624 29.9883 125.107 29.2386 127.075 27.6923C128.997 26.2397 129.934 24.2249 129.934 21.7415C130.027 16.4467 125.435 14.6193 120.281 13.4479Z",
+            fill: "#1E3860",
+            className: classNameFill
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M86.9661 0.281143C78.7661 0.281143 72.1593 6.9348 72.1593 15.1347C72.1593 23.3347 78.7661 29.9883 86.9661 29.9883C95.166 29.9883 101.773 23.3347 101.773 15.1347C101.773 6.9348 95.1191 0.281143 86.9661 0.281143ZM86.9661 3.93597C93.1511 3.93597 98.1648 8.94964 98.1648 15.1347C98.1648 21.3198 93.1511 26.3335 86.9661 26.3335C80.781 26.3335 75.7673 21.3198 75.7673 15.1347C75.7673 8.94964 80.781 3.93597 86.9661 3.93597Z",
+            fill: "#1E3860",
+            className: classNameFill
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M67.1924 28.8637L66.4427 29.6134C65.9273 30.1289 65.1308 30.1289 64.6153 29.6134L54.5412 19.5392L57.1183 16.9621L67.1924 27.0363C67.7079 27.5049 67.7079 28.3483 67.1924 28.8637Z",
+            fill: "#1E3860",
+            className: classNameFill
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M67.1924 1.40569L66.4427 0.655984C65.9273 0.140561 65.1308 0.140561 64.6153 0.655984L54.5412 10.7302L57.1183 13.3073L67.1924 3.2331C67.7079 2.76454 67.7079 1.92112 67.1924 1.40569Z",
+            fill: "#1E3860",
+            className: classNameFill
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M26.0055 15.1816C25.9586 21.3198 20.9449 26.3335 14.8067 26.3335C8.62164 26.3335 3.60797 21.3198 3.60797 15.1347C3.60797 8.94964 8.66849 3.93597 14.8067 3.93597C20.9449 3.93597 25.9586 8.90278 26.0055 15.0879V15.1816ZM28.3483 0.281143H27.2706C26.5678 0.281143 25.9586 0.843424 25.9586 1.59313V5.38853C23.2878 2.24913 19.305 0.281143 14.8067 0.281143C6.6068 0.281143 0 6.9348 0 15.1347C0 23.3347 6.65365 29.9883 14.8067 29.9883C19.2581 29.9883 23.2878 28.0203 26.0055 24.8809V28.6763C26.0055 29.3792 26.5678 29.9883 27.3175 29.9883H28.3952C29.098 29.9883 29.7072 29.426 29.7072 28.6763V1.59313C29.6603 0.890281 29.098 0.281143 28.3483 0.281143Z",
+            fill: "#1E3860",
+            className: classNameFill
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  SvgComponent as default
+};

package/dist/icons/Star/Star.css.js

@@ -1,4 +1,4 @@
-/* empty css                        */
+import '../../assets/icons/Star/Star.css';/* empty css                        */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var Star = createRuntimeFn({ defaultClassName: "mi4mae0", variantClassNames: { variant: { gold: "mi4mae1", gray: "mi4mae2" } }, defaultVariants: {}, compoundVariants: [] });
 export {

package/dist/index.css.js

@@ -1,3 +1,3 @@
-/* empty css                                         */
+import './assets/index.css';import './assets/globals.css';import './assets/Typography/Typography.css';/* empty css                                         */
 /* empty css                           */
 /* empty css                         */

package/dist/main.d.ts

@@ -3,6 +3,7 @@ export * from './AlertBanner';
 export * from './Article';
 export * from './ArticlesSet';
 export * from './ATMLocator';
+export * from './Auth';
 export * from './Avatar';
 export * from './AwardsBanner';
 export * from './AwardsItem';
@@ -14,6 +15,7 @@ export * from './Calculators/AnnualFeeCalculator';
 export * from './Calculators/ApyCalculator';
 export * from './Calculators/AxosOneCalculator';
 export * from './Calculators/BalanceAPYCalculator';
+export * from './Calculators/BuyDownCalculator';
 export * from './Calculators/MarginTradingCalculator';
 export * from './Calculators/MonthlyPaymentCalculator';
 export * from './CallToActionBar';
@@ -29,6 +31,7 @@ export * from './FdicCallout';
 export * from './FooterDisclosure';
 export * from './FooterSiteMap/AxosBank';
 export * from './Forms';
+export * from './HelpArticle';
 export * from './HeroBanner';
 export * from './Hyperlink';
 export * from './IconBillboard';
@@ -55,9 +58,11 @@ export * from './StepItemSet';
 export * from './Table';
 export * from './TextBlock';
 export * from './themes';
+export * from './Topic';
 export * from './TopicalNavItem';
 export * from './TopicalNavSet';
 export * from './VideoTile';
 export * from './VideoWrapper';
+export * from './WalnutIframe';
 export * from './Tab';
 export * from './utils';