@axos-web-dev/shared-components 1.0.99-feature-brand.3 → 1.0.99-feature-newQPvalues

package/dist/StepItemSet/StepItemSet.js

@@ -1,11 +1,14 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
+import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
-import { bs_section, bs_wrapper, tablet_col } from "./StepItemSet.css.js";
-import { HeaderSection } from "./sections/HeaderSection.js";
-import { ImageSection } from "./sections/ImageSection.js";
-import { StepsList } from "./sections/StepsList.js";
-import { CallToActionSection } from "./sections/CallToActionSection.js";
-import { AdditionalDetailsSection } from "./sections/AdditionalDetailsSection.js";
+import { OptimizeImage } from "../utils/optimizeImage/OptimizeImage.js";
+import { StepItem } from "../StepItem/StepItem.js";
+import "../StepItem/StepItem.css.js";
+import { bs_section, bs_wrapper, svg_logo, modifier, sec_title, sec_subtitle, tablet_col, bs_image, steps_wrapper, ol, bs_btns, bs_add_details } from "./StepItemSet.css.js";
 const StepItemSet = ({
   id,
   variant: fullVariant = "primary",
@@ -18,20 +21,81 @@ const StepItemSet = ({
 }) => {
   const variant = getVariant(fullVariant);
   return /* @__PURE__ */ jsx("section", { className: `${bs_section({ variant })}`, id, children: /* @__PURE__ */ jsxs("div", { className: `${bs_wrapper} containment`, children: [
-    /* @__PURE__ */ jsx(
-      HeaderSection,
+    (title || description) && /* @__PURE__ */ jsxs("div", { className: "text_center", children: [
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: svg_logo,
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "40",
+          height: "40",
+          fill: "none",
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                fill: "#FAA74A",
+                d: "M4.012.513a1.726 1.726 0 0 0-2.455 0L.539 1.53a1.726 1.726 0 0 0 0 2.456L16.536 20 .539 36.014a1.726 1.726 0 0 0 0 2.456l1.018 1.017a1.726 1.726 0 0 0 2.455 0L23.464 20 4.012.513Z"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                fill: "#1E3860",
+                fillRule: "evenodd",
+                d: "m38.443.513 1.018 1.017c.684.684.684 1.79 0 2.456L25.902 17.562l-3.473-3.473L35.988.513a1.726 1.726 0 0 1 2.455 0Zm0 38.974 1.018-1.017a1.726 1.726 0 0 0 0-2.456L25.902 22.438l-3.473 3.473 13.559 13.576a1.726 1.726 0 0 0 2.455 0Z",
+                clipRule: "evenodd",
+                className: `${modifier({ variant })}`
+              }
+            )
+          ]
+        }
+      ),
+      title && /* @__PURE__ */ jsx("h2", { className: `header_1 ${sec_title({ variant })}`, children: title }),
+      description && /* @__PURE__ */ jsx("div", { className: sec_subtitle, children: /* @__PURE__ */ jsx(Fragment, { children: description }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `push_up_32 flex ${tablet_col}`, children: [
+      image && /* @__PURE__ */ jsx("div", { className: bs_image, role: "presentation", children: /* @__PURE__ */ jsx(OptimizeImage, { src: image?.src, alt: "" }) }),
+      /* @__PURE__ */ jsx("div", { className: steps_wrapper, children: /* @__PURE__ */ jsx("ol", { className: ol, children: stepItems?.map((step, index) => /* @__PURE__ */ jsx(
+        StepItem,
+        {
+          id: `id_${step.id}`,
+          counter: index + 1,
+          title: step?.title,
+          description: step?.description,
+          variant
+        },
+        step?.id
+      )) }) })
+    ] }),
+    Array.isArray(callToActionRow) && callToActionRow?.length > 0 && /* @__PURE__ */ jsx(
+      "div",
       {
-        title,
-        description,
-        variant
+        className: `flex middle center push_up_32 text_center ${bs_btns}`,
+        children: callToActionRow.map(
+          ({ id: id2, variant: variant2, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              targetUrl,
+              color: getVariant(variant2),
+              size: "large",
+              rounded: "medium",
+              children: displayText
+            },
+            id2
+          ) : /* @__PURE__ */ jsx(
+            Chevron,
+            {
+              targetUrl,
+              variant: getVariant(variant2),
+              children: displayText
+            },
+            id2
+          )
+        )
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: `push_up_32 flex ${tablet_col}`, children: [
-      /* @__PURE__ */ jsx(ImageSection, { image }),
-      /* @__PURE__ */ jsx(StepsList, { stepItems, variant })
-    ] }),
-    /* @__PURE__ */ jsx(CallToActionSection, { callToActionRow }),
-    /* @__PURE__ */ jsx(AdditionalDetailsSection, { additionalDetails })
+    additionalDetails && /* @__PURE__ */ jsx("div", { className: "containment push_up_24", children: /* @__PURE__ */ jsx("div", { className: bs_add_details, children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) }) })
   ] }) });
 };
 export {

package/dist/StepItemSet/index.d.ts

@@ -1,7 +1,2 @@
 export * from './StepItemSet';
 export * from './StepItemSet.css';
-export * from './sections/HeaderSection';
-export * from './sections/ImageSection';
-export * from './sections/StepsList';
-export * from './sections/CallToActionSection';
-export * from './sections/AdditionalDetailsSection';

package/dist/StepItemSet/index.js

@@ -1,17 +1,7 @@
 import { StepItemSet } from "./StepItemSet.js";
 import { bs_add_details, bs_btns, bs_image, bs_section, bs_wrapper, modifier, ol, sec_subtitle, sec_title, steps_wrapper, svg_logo, tablet_col } from "./StepItemSet.css.js";
-import { HeaderSection } from "./sections/HeaderSection.js";
-import { ImageSection } from "./sections/ImageSection.js";
-import { StepsList } from "./sections/StepsList.js";
-import { CallToActionSection } from "./sections/CallToActionSection.js";
-import { AdditionalDetailsSection } from "./sections/AdditionalDetailsSection.js";
 export {
-  AdditionalDetailsSection,
-  CallToActionSection,
-  HeaderSection,
-  ImageSection,
   StepItemSet,
-  StepsList,
   bs_add_details,
   bs_btns,
   bs_image,

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

@@ -2,12 +2,11 @@ export declare const table_section: string;
 export declare const table_container: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         apy: {
-            background: `var(--${string})`;
-            border: "1px solid #f1f1f1";
+            background: "#f4f4f4";
             padding: "2rem 0";
         };
         standard: {
-            background: "#ffffff";
+            background: "white";
         };
     };
 }>;

package/dist/Table/Table.d.ts

@@ -61,7 +61,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, colSpan,
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: "" | "auto" | "manual" | "hint" | undefined;
+    popover?: "" | "auto" | "manual" | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
     popoverTarget?: string | undefined;
     onToggle?: import('react').ToggleEventHandler<HTMLTableCellElement> | undefined;

package/dist/Table/Table.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgComponent from "../icons/AxosX/Blue.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
@@ -10,6 +9,7 @@ import '../assets/icons/FollowIcon/FollowIcon.css';import '../assets/icons/Downl
 /* empty css                                                */
 import "../utils/allowedAxosDomains.js";
 import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
 import { createElement } from "react";
 import { table_section, table_container_text, table_headline, table_description_text, table_container, table, highlight_first_row, highlight_last_row, alternate_color_rows, apy_table, tableWrapper, td, th } from "./Table.css.js";
 const TableContainer = ({

package/dist/VideoTile/VideoTile.js

@@ -53,6 +53,7 @@ import "../Input/PercentageInput.js";
 import "react-hook-form";
 import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 import "../Forms/Forms.css.js";
+import "../Forms/HoneyPot/index.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";

package/dist/VideoWrapper/index.js

@@ -46,6 +46,7 @@ import "../Input/PercentageInput.js";
 import "react-hook-form";
 import "../Calculators/BuyDownCalculator/BuyDownCalculator.css.js";
 import "../Forms/Forms.css.js";
+import "../Forms/HoneyPot/index.js";
 import "../Forms/SalesforceFieldsForm.js";
 import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";

package/dist/WalnutIframe/wrapper.module.js

@@ -1,6 +1,6 @@
-import '../assets/WalnutIframe/wrapper.css.css';const wrapper = "_wrapper_1wqdl_19";
-const shimmer = "_shimmer_1wqdl_1";
-const wrapper_control = "_wrapper_control_1wqdl_77";
+import '../assets/WalnutIframe/wrapper.css.css';const wrapper = "_wrapper_13j22_10";
+const shimmer = "_shimmer_13j22_1";
+const wrapper_control = "_wrapper_control_13j22_39";
 const css = {
   wrapper,
   shimmer,

package/dist/assets/Accordion/Accordion.css

@@ -69,7 +69,7 @@
   text-transform: uppercase;
 }
 .qfoxngb {
-  color: var(--_1073cm85);
+  color: var(--_1073cm83);
 }
 .qfoxngd {
   display: flex;

package/dist/assets/Article/Article.css

@@ -1,5 +1,5 @@
 .n5hj5p1 {
-  border: 1px solid #B9C1CE;
+  border: 1px solid #d4d4d4;
 }
 .n5hj5p2 {
   border: none;
@@ -28,119 +28,131 @@
   padding: 24px;
 }
 .n5hj5p7 {
-  display: block;
   font: 700 18px / 1.44 var(--main-font-family);
+  display: block;
 }
 .n5hj5p8 {
-  color: var(--_1073cm85);
+  color: var(--_1073cm83);
 }
 .n5hj5p9 {
-  color: var(--_1073cm8c);
+  color: var(--_1073cm8a);
 }
 .n5hj5pa {
-  color: var(--_1073cm8j);
+  color: #FAA74A;
 }
 .n5hj5pb {
-  color: var(--_1073cm8q);
+  color: var(--_1073cm8o);
 }
 .n5hj5pc {
   font-size: 28px;
 }
-.n5hj5pd {
-  color: var(--_1073cm85);
+._1073cm80 .n5hj5pd {
+  -webkit-background-clip: text;
+  background-image: var(--_1073cm84);
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
 }
-.n5hj5pe {
-  color: var(--_1073cm8c);
+._1es6o1h0 .n5hj5pd {
+  color: var(--_1073cm83);
+}
+._1073cm80 .n5hj5pe {
+  -webkit-background-clip: text;
+  background-image: var(--_1073cm8b);
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
+}
+._1es6o1h0 .n5hj5pe {
+  color: var(--_1073cm8a);
 }
 .n5hj5pf {
-  color: var(--_1073cm8j);
+  color: var(--_1073cm8h);
 }
 .n5hj5pg {
-  color: var(--_1073cm8q);
+  color: var(--_1073cm8o);
 }
 .n5hj5pi {
-  color: var(--_1073cm83);
+  color: var(--_1073cm82);
   background: var(--_1073cm81);
 }
 .n5hj5pj {
-  color: var(--_1073cm8a);
+  color: var(--_1073cm89);
   background: var(--_1073cm88);
 }
 .n5hj5pk {
-  color: var(--_1073cm8h);
+  color: var(--_1073cm8g);
   background: var(--_1073cm8f);
 }
 .n5hj5pl {
-  color: var(--_1073cm8o);
+  color: var(--_1073cm8n);
   background: var(--_1073cm8m);
 }
 .n5hj5pm {
   border: 2px solid transparent;
-  border-radius: 8px;
-  cursor: pointer;
-  display: inline-block;
-  font-size: 18px;
   font-weight: 700;
-  line-height: 1.44;
   margin-bottom: 0;
-  opacity: 1;
-  padding: 12px 64px;
-  text-decoration: none;
   transition-duration: 0.15s;
   transition-property: color , background-color , border-color;
   transition-timing-function: linear;
+  text-decoration: none;
+  display: inline-block;
   white-space: nowrap;
+  font-size: 18px;
+  opacity: 1;
+  cursor: pointer;
+  padding: 12px 64px;
+  border-radius: 8px;
+  line-height: 1.44;
 }
 .n5hj5pm:hover {
   background-color: transparent;
 }
 .n5hj5pn {
-  background: var(--_1073cm82);
-  color: var(--_1073cm86);
+  background: var(--_1073cm86);
+  color: var(--_1073cm85);
 }
 .n5hj5pn:hover {
-  border-color: var(--_1073cm82);
-  color: var(--_1073cm82);
+  border-color: var(--_1073cm86);
+  color: var(--_1073cm86);
 }
 .n5hj5pn:active {
-  background-color: var(--_1073cm82);
+  background-color: var(--_1073cm86);
   color: var(--_1073cm86);
 }
 .n5hj5po {
-  background: var(--_1073cm89);
-  color: var(--_1073cm8d);
+  background: var(--_1073cm8d);
+  color: var(--_1073cm8c);
 }
 .n5hj5po:hover {
-  border-color: var(--_1073cm89);
-  color: var(--_1073cm89);
+  border-color: var(--_1073cm8d);
+  color: var(--_1073cm8d);
 }
 .n5hj5po:active {
-  background-color: var(--_1073cm89);
-  color: var(--_1073cm8d);
+  background-color: var(--_1073cm8d);
+  color: var(--_1073cm8c);
 }
 .n5hj5pp {
-  background-color: var(--_1073cm8g);
-  color: var(--_1073cm8k);
+  color: var(--_1073cm8j);
+  background-color: var(--_1073cm86);
 }
 .n5hj5pp:hover {
-  border-color: var(--_1073cm8g);
-  color: var(--_1073cm82);
+  border-color: var(--_1073cm8k);
+  color: var(--_1073cm86);
 }
 .n5hj5pp:active {
-  background-color: var(--_1073cm8g);
-  color: var(--_1073cm8k);
+  color: var(--_1073cm8j);
+  background-color: var(--_1073cm86);
 }
 .n5hj5pq {
-  background-color: var(--_1073cm8n);
-  color: var(--_1073cm8r);
+  color: var(--_1073cm8q);
+  background-color: var(--_1073cm8r);
 }
 .n5hj5pq:hover {
-  border-color: var(--_1073cm8n);
-  color: var(--_1073cm8n);
+  border-color: var(--_1073cm8r);
+  color: var(--_1073cm8r);
 }
 .n5hj5pq:active {
-  background-color: var(--_1073cm8n);
-  color: var(--_1073cm8r);
+  color: var(--_1073cm8q);
+  background-color: var(--_1073cm8r);
 }
 @media (max-width:1280px) {
   .n5hj5p5 {

package/dist/assets/ArticlesSet/ArticlesSet.css

@@ -6,16 +6,22 @@
   margin-bottom: 40px;
 }
 .kjcqgc3 {
-  color: var(--_1073cm85);
+  color: var(--_1073cm83);
 }
 .kjcqgc4 {
-  color: var(--_1073cm8c);
+  color: var(--_1073cm8a);
 }
-.kjcqgc5 {
-  color: var(--_1073cm8j);
+._1073cm80 .kjcqgc5 {
+  color: var(--_1073cm8h);
 }
-.kjcqgc6 {
-  color: var(--_1073cm8q);
+._1es6o1h0 .kjcqgc5 {
+  color: #1E262F;
+}
+._1073cm80 .kjcqgc6 {
+  color: var(--_1073cm8o);
+}
+._1es6o1h0 .kjcqgc6 {
+  color: #1E262F;
 }
 .kjcqgc7 {
   font: 700 18px/1.44 var(--main-font-family);
@@ -25,50 +31,74 @@
 .kjcqgc7:hover {
   opacity: 0.7;
 }
-.kjcqgc8 {
-  color: var(--_1073cm82);
+._1073cm80 .kjcqgc8 {
+  color: #2F5B88;
 }
-.kjcqgc9 {
-  color: var(--_1073cm82);
+._1es6o1h0 .kjcqgc8 {
+  color: var(--_1073cm83);
 }
-.kjcqgca {
-  color: var(--_1073cm82);
+._1073cm80 .kjcqgc9 {
+  color: #2F5B88;
 }
-.kjcqgcb {
-  color: var(--_1073cm82);
+._1es6o1h0 .kjcqgc9 {
+  color: var(--_1073cm8a);
+}
+._1073cm80 .kjcqgca {
+  color: #2F5B88;
+}
+._1es6o1h0 .kjcqgca {
+  color: #1E262F;
+}
+._1073cm80 .kjcqgcb {
+  color: #2F5B88;
+}
+._1es6o1h0 .kjcqgcb {
+  color: #1E262F;
 }
 .kjcqgc2 + .sc__btn {
   display: inline-block;
 }
-.kjcqgcd {
-  fill: var(--_1073cm82);
+._1073cm80 .kjcqgcd {
+  fill: #2F5B88;
+}
+._1es6o1h0 .kjcqgcd {
+  fill: var(--_1073cm83);
+}
+._1073cm80 .kjcqgce {
+  fill: #2F5B88;
+}
+._1es6o1h0 .kjcqgce {
+  fill: var(--_1073cm8a);
 }
-.kjcqgce {
-  fill: var(--_1073cm82);
+._1073cm80 .kjcqgcf {
+  fill: #2F5B88;
 }
-.kjcqgcf {
-  fill: var(--_1073cm82);
+._1es6o1h0 .kjcqgcf {
+  fill: #1E262F;
 }
-.kjcqgcg {
-  fill: var(--_1073cm82);
+._1073cm80 .kjcqgcg {
+  fill: #2F5B88;
+}
+._1es6o1h0 .kjcqgcg {
+  fill: #1E262F;
 }
 .kjcqgch article {
   flex: 1 1 0%;
 }
 .kjcqgcj {
-  color: var(--_1073cm83);
+  color: var(--_1073cm82);
   background: var(--_1073cm81);
 }
 .kjcqgck {
-  color: var(--_1073cm8a);
+  color: var(--_1073cm89);
   background: var(--_1073cm88);
 }
 .kjcqgcl {
-  color: var(--_1073cm8h);
+  color: var(--_1073cm8g);
   background: var(--_1073cm8f);
 }
 .kjcqgcm {
-  color: var(--_1073cm8o);
+  color: var(--_1073cm8n);
   background: var(--_1073cm8m);
 }
 @media (max-width: 1023px) {

package/dist/assets/Auth/SignIn.css

@@ -13,7 +13,7 @@
   animation-delay: 0.2s;
   background: #1E3860;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-  color: var(--_1073cm8h);
+  color: var(--_1073cm8g);
   gap: 16px;
   isolation: isolate;
   margin: 0 auto;
@@ -23,9 +23,9 @@
   will-change: opacity, transform;
 }
 ._1c7jj82 {
-  background: var(--_1073cm8g);
-  color: var(--_1073cm8k);
-  border: 1px solid var(--_1073cm8g);
+  background: var(--_1073cm8k);
+  color: var(--_1073cm8j);
+  border: 1px solid var(--_1073cm8k);
   padding: 11px 24px;
   border-radius: 8px;
   font-size: 1rem;
@@ -36,23 +36,23 @@
 }
 ._1c7jj82:hover {
   background: transparent;
-  color: var(--_1073cm8g);
+  color: var(--_1073cm8k);
   opacity: 0.9;
 }
 ._1c7jj82:active {
-  background: var(--_1073cm8g);
-  color: var(--_1073cm8k);
+  background: var(--_1073cm8k);
+  color: var(--_1073cm8j);
 }
 ._1c7jj82:focus {
-  box-shadow: 0 0 0 2px var(--_1073cm8g);
+  box-shadow: 0 0 0 2px var(--_1073cm8k);
   outline: none;
 }
 ._1c7jj82:focus-visible {
-  box-shadow: 0 0 0 2px var(--_1073cm8g);
+  box-shadow: 0 0 0 2px var(--_1073cm8k);
   outline: none;
 }
 ._1c7jj82:focus-within {
-  box-shadow: 0 0 0 2px var(--_1073cm8g);
+  box-shadow: 0 0 0 2px var(--_1073cm8k);
   outline: none;
 }
 ._1c7jj82:disabled {
@@ -74,10 +74,10 @@
   width: min(434px, 100%);
 }
 ._1c7jj85 ._18du0lar:focus-within {
-  color: var(--_1073cm8q);
+  color: var(--_1073cm8o);
 }
 ._1c7jj85 ._18du0laf:focus-within {
-  border-color: var(--_1073cm8q);
+  border-color: var(--_1073cm8o);
 }
 @media (max-width: 603px) {
   ._1c7jj81 {

package/dist/assets/AwardsBanner/AwardsBanner.css

@@ -1,5 +1,5 @@
 ._1amgyqo0 {
-  background-color: var(--_1073cm8m);
+  background-color: #333d46;
   color: #fff;
   -webkit-filter: drop-shadow(03px4pxrgba(0,0,0,0.25));
   filter: drop-shadow(03px4pxrgba(0,0,0,0.25));

package/dist/assets/AwardsItem/AwardsItem.css

@@ -7,7 +7,7 @@
 ._16tnqb20::after {
   content: "";
   position: absolute;
-  background-color: #B9C1CE;
+  background-color: #bdbdbd;
   height: 18.5px;
   width: 1px;
   left: 0;
@@ -24,11 +24,12 @@
   color: #ddd;
   font-size: 12px;
   font-weight: 400;
-  line-height: 1.5;
+  line-height: 16px;
 }
 ._16tnqb22 {
+  font-family: var(--header-font-family);
   font-size: 14px;
-  font-weight: 700;
+  font-weight: 600;
   margin-bottom: 2px;
 }
 @media (max-width: 1023px) {