@axos-web-dev/shared-components 0.0.116 → 0.0.118

package/dist/Forms/WcplSurvey.js

@@ -8,8 +8,8 @@ import "react-use";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
 import "../Input/Dropdown.js";
-/* empty css                                              */
-/* empty css                                       */
+/* empty css                                          */
+/* empty css                                   */
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputAmount.js";
@@ -21,10 +21,10 @@ import "../icons/ArrowIcon/ArrowIcon.css.js";
 import SvgAxosX from "../icons/AxosX/index.js";
 import SvgComponent from "../icons/AxosX/Blue.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                                        */
+/* empty css                                */
+/* empty css                                   */
 /* empty css                                                    */
+/* empty css                                                */
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
@@ -79,116 +79,108 @@ const WCPLSurvey = ({
     console.log(errors, isValid);
   };
   const variant = getVariant(fullVariant);
-  return /* @__PURE__ */ jsx(
-    "section",
-    {
-      id: `id_${id}`,
-      className: clsx(formContainer({ variant })),
-      children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
-        icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
-        /* @__PURE__ */ jsxs("div", { className: `${headerContainer} text_center`, children: [
-          /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: headline }),
-          description && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `${form} ${descriptionField({ variant })} text_center`,
-              children: description
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
-          /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant, formType: "email" })), children: [
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-              RadioButtonSet,
-              {
-                id: "Has_Deal",
-                label: "Do You have a potential deal you would like to discuss with an Account Executive?",
-                sizes: "medium",
-                placeholder: "Details",
-                required: true,
-                error: !!errors.Has_Deal,
-                helperText: errors.Has_Deal?.message,
-                variant,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    RadioButton,
-                    {
-                      ...register("Has_Deal", {
-                        required: true
-                      }),
-                      value: "Yes",
-                      radioText: "Yes",
-                      groupName: "Has_Deal"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    RadioButton,
-                    {
-                      ...register("Has_Deal", {
-                        required: true
-                      }),
-                      value: "No",
-                      radioText: "No",
-                      groupName: "Has_Deal"
-                    }
-                  )
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              InputTextArea,
-              {
-                id: "Description_of_Deal_Details",
-                ...register("Description_of_Deal_Details", {
-                  required: true
-                }),
-                label: "Write Your Message",
-                sizes: "medium",
-                placeholder: "Details",
-                required: true,
-                error: !!errors.Description_of_Deal_Details,
-                helperText: errors.Description_of_Deal_Details?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              InputPhone,
-              {
-                id: "Telephone",
-                ...register("Telephone", { required: true, maxLength: 12 }),
-                label: "Telephone",
-                sizes: "medium",
-                placeholder: "Phone",
-                required: true,
-                error: !!errors.Telephone,
-                helperText: errors.Telephone?.message,
-                variant
-              }
-            ) })
-          ] }),
-          children,
-          /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
-          /* @__PURE__ */ jsx("div", { className: actions, children: isSubmitting ? /* @__PURE__ */ jsx(
-            LoadingIndicator,
-            {
-              style: { marginInline: "auto" },
-              variant
-            }
-          ) : /* @__PURE__ */ jsx(
-            Button,
-            {
-              color: getVariant(callToAction?.variant),
-              as: "button",
-              type: "submit",
-              disabled: !isValid || isSubmitting,
-              children: callToAction?.displayText
-            }
-          ) })
-        ] })
-      ] }) })
-    },
-    id
-  );
+  return /* @__PURE__ */ jsx("section", { id, className: clsx(formContainer({ variant })), children: /* @__PURE__ */ jsx("div", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
+    /* @__PURE__ */ jsxs("div", { className: `${headerContainer} text_center`, children: [
+      /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerForm({ variant })), children: headline }),
+      description && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${form} ${descriptionField({ variant })} text_center`,
+          children: description
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
+      /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant, formType: "email" })), children: [
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+          RadioButtonSet,
+          {
+            id: "Has_Deal",
+            label: "Do You have a potential deal you would like to discuss with an Account Executive?",
+            sizes: "medium",
+            placeholder: "Details",
+            required: true,
+            error: !!errors.Has_Deal,
+            helperText: errors.Has_Deal?.message,
+            variant,
+            children: [
+              /* @__PURE__ */ jsx(
+                RadioButton,
+                {
+                  ...register("Has_Deal", {
+                    required: true
+                  }),
+                  value: "Yes",
+                  radioText: "Yes",
+                  groupName: "Has_Deal"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                RadioButton,
+                {
+                  ...register("Has_Deal", {
+                    required: true
+                  }),
+                  value: "No",
+                  radioText: "No",
+                  groupName: "Has_Deal"
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          InputTextArea,
+          {
+            id: "Description_of_Deal_Details",
+            ...register("Description_of_Deal_Details", {
+              required: true
+            }),
+            label: "Write Your Message",
+            sizes: "medium",
+            placeholder: "Details",
+            required: true,
+            error: !!errors.Description_of_Deal_Details,
+            helperText: errors.Description_of_Deal_Details?.message,
+            variant
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          InputPhone,
+          {
+            id: "Telephone",
+            ...register("Telephone", { required: true, maxLength: 12 }),
+            label: "Telephone",
+            sizes: "medium",
+            placeholder: "Phone",
+            required: true,
+            error: !!errors.Telephone,
+            helperText: errors.Telephone?.message,
+            variant
+          }
+        ) })
+      ] }),
+      children,
+      /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
+      /* @__PURE__ */ jsx("div", { className: actions, children: isSubmitting ? /* @__PURE__ */ jsx(
+        LoadingIndicator,
+        {
+          style: { marginInline: "auto" },
+          variant
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          color: getVariant(callToAction?.variant),
+          as: "button",
+          type: "submit",
+          disabled: !isValid || isSubmitting,
+          children: callToAction?.displayText
+        }
+      ) })
+    ] })
+  ] }) }) }, id);
 };
 export {
   WCPLSurvey

package/dist/HeroBanner/HeroBanner.css.js

@@ -1,8 +1,8 @@
-/* empty css                                                   */
-/* empty css                                              */
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                              */
+/* empty css                                   */
+/* empty css                                          */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                              */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var logout = "_1ye8k3f0";
 var hero_banner = createRuntimeFn({ defaultClassName: "_1ye8k3f1", variantClassNames: { variant: { primary: "_1ye8k3f2", secondary: "_1ye8k3f3", tertiary: "_1ye8k3f4", quaternary: "_1ye8k3f5" } }, defaultVariants: {}, compoundVariants: [] });

package/dist/HeroBanner/HeroBanner.js

@@ -25,7 +25,7 @@ const HeroBanner = ({
   return /* @__PURE__ */ jsx(Fragment, { children: bannerType === "Hero" || bannerType === "Logout" ? /* @__PURE__ */ jsx(
     "section",
     {
-      id: `id_${id}`,
+      id,
       className: `${bannerType !== "Hero" ? logout : ""} ${hero_banner({ variant: getVariant(variant) })}`,
       children: /* @__PURE__ */ jsx("div", { className: `${hero_wrapper} containment`, children: /* @__PURE__ */ jsxs(
         "div",
@@ -199,7 +199,7 @@ const HeroBanner = ({
     "section",
     {
       className: lg_hero_banner({ variant: getVariant(variant) }),
-      id: `id_${id}`,
+      id,
       children: /* @__PURE__ */ jsx("div", { className: `${hero_wrapper} containment`, children: /* @__PURE__ */ jsxs(
         "div",
         {

package/dist/HeroBanner/LargeBanner.css.js

@@ -1,7 +1,7 @@
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                              */
-/* empty css                                               */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                          */
+/* empty css                               */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var lg_hero_banner = createRuntimeFn({ defaultClassName: "_1bsyngo0", variantClassNames: { variant: { primary: "_1bsyngo1", secondary: "_1bsyngo2", tertiary: "_1bsyngo3", quaternary: "_1bsyngo4" } }, defaultVariants: {}, compoundVariants: [] });
 var lg_hero_content = "_1bsyngo5";

package/dist/HeroBanner/SelectionBanner.css.js

@@ -1,7 +1,7 @@
-/* empty css                                              */
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                                   */
+/* empty css                                          */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                   */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var selection_headline_text = createRuntimeFn({ defaultClassName: "_7etqoq0", variantClassNames: { variant: { primary: "_7etqoq1", secondary: "_7etqoq2", tertiary: "_7etqoq3", quaternary: "_7etqoq4" } }, defaultVariants: {}, compoundVariants: [] });
 var selection_section = "_7etqoq5";

package/dist/Hyperlink/Hyperlink.css.js

@@ -1,4 +1,4 @@
-/* empty css                                            */
+/* empty css                             */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var hyperlink = createRuntimeFn({ defaultClassName: "hvs5ng0", variantClassNames: { variant: { primary: "hvs5ng1", secondary: "hvs5ng2", "default": "hvs5ng3" } }, defaultVariants: { variant: "default" }, compoundVariants: [] });
 export {

package/dist/Hyperlink/index.js

@@ -4,10 +4,10 @@ import "../Accordion/Accordion.js";
 import "../Accordion/Accordion.css.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                                        */
+/* empty css                                */
+/* empty css                                   */
 /* empty css                                                    */
+/* empty css                                                */
 import "react";
 import "../Chevron/Chevron.css.js";
 import "../AlertBanner/AlertBanner.css.js";
@@ -16,12 +16,12 @@ import "../ArticlesSet/ArticlesSet.css.js";
 import "../IconBillboard/IconBillboard.css.js";
 import { findMoreAxosDomains } from "../utils/allowedAxosDomains.js";
 import { validateLink } from "../utils/validateExternalLinks.js";
-/* empty css                                              */
-/* empty css                                              */
+/* empty css                                          */
+/* empty css                                          */
 import "../Button/Button.css.js";
 import "react-use";
 import "../Interstitial/Interstitial-variants.css.js";
-/* empty css                                    */
+/* empty css                                */
 import { useGlobalContext } from "../Modal/contextApi/store.js";
 import clsx from "clsx";
 import "../Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css.js";
@@ -32,7 +32,7 @@ import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
 import "../Input/Dropdown.js";
-/* empty css                                       */
+/* empty css                                   */
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputAmount.js";
@@ -47,13 +47,13 @@ import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
-/* empty css                                                                                    */
+/* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
-/* empty css                                                  */
 /* empty css                                              */
-/* empty css                                                        */
+/* empty css                                          */
+/* empty css                                                    */
 import "../Carousel/index.js";
-/* empty css                                                                        */
+/* empty css                                                                    */
 import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
 import "../HeroBanner/LargeBanner.css.js";
@@ -62,40 +62,38 @@ import "../SetContainer/SetContainer.css.js";
 import "../Tab/Tab.css.js";
 import "../icons/Star/Star.css.js";
 import "../ContentBanner/ContentBanner.css.js";
-/* empty css                                                  */
+/* empty css                                              */
 import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
-/* empty css                                                             */
+/* empty css                                                         */
 import "../ImageBillboard/ImageBillboard.css.js";
-/* empty css                                                  */
-/* empty css                                                          */
+/* empty css                                              */
+/* empty css                                                      */
 import "../LandingPageHeader/LandingPageHeader.css.js";
-/* empty css                                                          */
-/* empty css                                                             */
-/* empty css                                                                  */
-/* empty css                                                                     */
-/* empty css                                                       */
+/* empty css                                                      */
+/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                                 */
+/* empty css                                                   */
 import "../NavigationMenu/AxosBank/NavData.js";
 import "next/image.js";
 import "next/link.js";
 import "next/navigation.js";
-/* empty css                                                          */
-/* empty css                                                           */
+/* empty css                                                      */
+/* empty css                                                       */
 import "../PageNavItem/PageNavItem.css.js";
-import "lodash";
 import "react-slick";
-/* empty css                                                   */
-/* empty css                                             */
-/* empty css                                                        */
-/* empty css                                                      */
+/* empty css                                                 */
+/* empty css                                                    */
+/* empty css                                                  */
 import "../StepItem/StepItem.css.js";
 import "../StepItemSet/StepItemSet.css.js";
-/* empty css                                            */
-/* empty css                                                      */
-/* empty css                                                    */
-/* empty css                                            */
+/* empty css                                        */
 /* empty css                                                  */
+/* empty css                                                */
+/* empty css                                        */
+/* empty css                                              */
 import { hyperlink } from "./Hyperlink.css.js";
 const Hyperlink = ({
   children,

package/dist/IconBillboard/IconBillboard.css.js

@@ -1,7 +1,7 @@
-/* empty css                                              */
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                                    */
+/* empty css                                          */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                 */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var containerIconBillboard = createRuntimeFn({ defaultClassName: "_1r4ovbu0", variantClassNames: { variant: { primary: "_1r4ovbu1", secondary: "_1r4ovbu2", tertiary: "_1r4ovbu3", quaternary: "_1r4ovbu4" } }, defaultVariants: {}, compoundVariants: [] });
 var layout = createRuntimeFn({ defaultClassName: "_1r4ovbu5", variantClassNames: { side: { true: "_1r4ovbu6" } }, defaultVariants: {}, compoundVariants: [] });

package/dist/IconBillboard/IconBillboard.d.ts

@@ -13,5 +13,6 @@ export interface FocusProps {
     }[];
     callToActionRow?: ChevronProps[];
     set?: boolean;
+    id?: string;
 }
 export declare const IconBillboard: (props: FocusProps & ContainerVariants & LayoutVariants) => import("react/jsx-runtime").JSX.Element;

package/dist/IconBillboard/IconBillboard.js

@@ -17,7 +17,8 @@ const IconBillboard = (props) => {
     headline,
     body,
     icon,
-    set
+    set,
+    id
   } = props;
   const variant = getVariant(fullVariant);
   return /* @__PURE__ */ jsxs(
@@ -28,6 +29,7 @@ const IconBillboard = (props) => {
         "billboard",
         `${set ? "" : "containment"}`
       ),
+      id,
       children: [
         /* @__PURE__ */ jsxs("div", { className: `middle ${layout({ side })}`, children: [
           icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, role: "presentation", children: /* @__PURE__ */ jsx("img", { src: icon?.src, className: "img_fluid", alt: icon?.alt }) }),
@@ -41,7 +43,7 @@ const IconBillboard = (props) => {
         ] }),
         callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
           ({
-            id,
+            id: id2,
             variant: variant2,
             displayText,
             targetUrl,
@@ -59,7 +61,7 @@ const IconBillboard = (props) => {
               newTab,
               children: displayText
             },
-            id
+            id2
           ) : /* @__PURE__ */ jsx(
             Chevron,
             {
@@ -69,7 +71,7 @@ const IconBillboard = (props) => {
               newTab,
               children: displayText
             },
-            id
+            id2
           )
         ) })
       ]

package/dist/ImageBillboard/ImageBillboard.css.js

@@ -1,8 +1,8 @@
-/* empty css                                                  */
 /* empty css                                              */
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                                      */
+/* empty css                                          */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                  */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var billboard = createRuntimeFn({ defaultClassName: "_1m7m2a0", variantClassNames: { variant: { primary: "_1m7m2a1", secondary: "_1m7m2a2", tertiary: "_1m7m2a3", quaternary: "_1m7m2a4" } }, defaultVariants: {}, compoundVariants: [] });
 var imagePlacement = createRuntimeFn({ defaultClassName: "_1m7m2a5", variantClassNames: { position: { left: "_1m7m2a6", right: "_1m7m2a7" } }, defaultVariants: { position: "left" }, compoundVariants: [] });

package/dist/ImageBillboard/ImageBillboard.js

@@ -3,10 +3,10 @@ import { Chevron } from "../Chevron/index.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgCheckIcon from "../icons/CheckIcon/index.js";
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                                        */
+/* empty css                                */
+/* empty css                                   */
 /* empty css                                                    */
+/* empty css                                                */
 import { getVariant } from "../utils/getVariant.js";
 import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";

package/dist/ImageBillboard/ImageBillboardSet.js

@@ -7,10 +7,10 @@ import { Chevron } from "../Chevron/index.js";
 import "../icons/ArrowIcon/ArrowIcon.css.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgCheckIcon from "../icons/CheckIcon/index.js";
-/* empty css                                    */
-/* empty css                                       */
-/* empty css                                                        */
+/* empty css                                */
+/* empty css                                   */
 /* empty css                                                    */
+/* empty css                                                */
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { billboard, imagePlacement, billboard_img, image_background, rate_container, rate_pad, up_to, rate_billboard, apy_billboard, body, billboard_body, billboard_header_section, supertag, header, body_copy, sub_bullets, billboard_ctas } from "./ImageBillboard.css.js";
@@ -35,6 +35,7 @@ const ImageBillboard = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      id,
       className: clsx(
         "billboard",
         "containment",

package/dist/ImageLink/ImageLink.css.js

@@ -1 +1 @@
-import "../lib/ImageLink/ImageLink.css.ts.vanilla.css.js";
+import "./ImageLink.css.ts.vanilla.css.js";