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

package/dist/Accordion/Accordion.css.d.ts

@@ -4,39 +4,39 @@ export declare const accordion: import('@vanilla-extract/recipes').RuntimeFn<{
     width: {
         "1/2": {
             display: "flex";
-            flexBasis: "50%";
+            flexBasis: `${number}%`;
         };
         "1/3": {
             display: "flex";
-            flexBasis: "33.333333333333336%";
+            flexBasis: `${number}%`;
         };
         "2/3": {
             display: "flex";
-            flexBasis: "66.66666666666667%";
+            flexBasis: `${number}%`;
         };
         "1/4": {
             display: "flex";
-            flexBasis: "25%";
+            flexBasis: `${number}%`;
         };
         "3/4": {
             display: "flex";
-            flexBasis: "75%";
+            flexBasis: `${number}%`;
         };
         "1/5": {
             display: "flex";
-            flexBasis: "20%";
+            flexBasis: `${number}%`;
         };
         "2/5": {
             display: "flex";
-            flexBasis: "40%";
+            flexBasis: `${number}%`;
         };
         "3/5": {
             display: "flex";
-            flexBasis: "60%";
+            flexBasis: `${number}%`;
         };
         "4/5": {
             display: "flex";
-            flexBasis: "80%";
+            flexBasis: `${number}%`;
         };
     };
 }>;

package/dist/ArticlesSet/ArticlesSet.js

@@ -11,7 +11,7 @@ const ArticlesSet = ({
   variant: fullVariant = "primary"
 }) => {
   const variant = getVariant(fullVariant);
-  return /* @__PURE__ */ jsx("section", { className: ant_section, id: `id_${id}`, children: /* @__PURE__ */ jsxs("div", { className: "containment", children: [
+  return /* @__PURE__ */ jsx("section", { className: ant_section, id, children: /* @__PURE__ */ jsxs("div", { className: "containment", children: [
     /* @__PURE__ */ jsxs("div", { className: `${ant_header} text_center`, children: [
       /* @__PURE__ */ jsx("h2", { className: `${ant_sec_title({ variant })} header_1`, children: title || "Articles & Tools" }),
       /* @__PURE__ */ jsx("div", { className: `${ant_sec_body({ variant })} push_up`, children: /* @__PURE__ */ jsx(Fragment, { children: description }) }),

package/dist/Calculators/MarginTradingCalculator/index.js

@@ -217,7 +217,8 @@ const MarginTradingCalculator = ({
                   className: "bordered",
                   type: "number",
                   id: "accCashVal",
-                  max: 999999999e-2
+                  max: 999999999e-2,
+                  min: 0
                 }
               )
             ] }),
@@ -232,7 +233,8 @@ const MarginTradingCalculator = ({
                   className: "bordered",
                   type: "number",
                   id: "accSecVal",
-                  max: 999999999e-2
+                  max: 999999999e-2,
+                  min: 0
                 }
               )
             ] }),

package/dist/Calculators/calculators.js

@@ -108,6 +108,12 @@ const calculators = /* @__PURE__ */ new Map([
     {
       src: "https://www.fintactix.com/bofi/tools/retirement/r03"
     }
+  ],
+  [
+    "Save for College",
+    {
+      src: "https://www.fintactix.com/bofi/tools/savings/s03"
+    }
   ]
 ]);
 export {

package/dist/Carousel/index.d.ts

@@ -15,6 +15,7 @@ export interface CarouselProps extends PropsWithChildren {
     items?: SlideProps[];
     title?: ReactNode;
     description?: ReactNode;
+    id?: string;
 }
 export declare const CarouselSlide: (props: SlideProps & carouselVariants) => import("react/jsx-runtime").JSX.Element;
 export declare const Carousel: (props: CarouselProps & carouselVariants) => import("react/jsx-runtime").JSX.Element;

package/dist/Carousel/index.js

@@ -142,7 +142,8 @@ const Carousel = (props) => {
     items,
     auto = false,
     title = void 0,
-    description = void 0
+    description = void 0,
+    id
   } = props;
   const change = useCarousel((state) => state.change);
   const itemSelected = useCarousel((state) => state.selected);
@@ -163,8 +164,8 @@ const Carousel = (props) => {
     const changeAfterTime = setInterval(() => plusSlides(itemSelected), time);
     return () => clearInterval(changeAfterTime);
   }, [auto, change, children, itemSelected, time]);
-  const selectItem = (id) => {
-    change(id);
+  const selectItem = (id2) => {
+    change(id2);
   };
   const child = children;
   const showDots = () => {
@@ -179,7 +180,7 @@ const Carousel = (props) => {
       )) });
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: `containment`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `containment`, id, children: [
     title && /* @__PURE__ */ jsxs("div", { className: section_text, children: [
       /* @__PURE__ */ jsx("h2", { className: clsx("header_2", headerCarousel({ variant })), children: title }),
       /* @__PURE__ */ jsx("div", { className: clsx(descriptionCarousel({ variant })), children: description })

package/dist/Comparison/Comparison.css.js

@@ -1,7 +1,7 @@
 /* empty css                                */
-/* empty css                                   */
-/* empty css                                */
 /* empty css                                          */
+/* empty css                                */
+/* empty css                                   */
 /* empty css                              */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var comparison = createRuntimeFn({ defaultClassName: "_198o0lt0", variantClassNames: { variant: { primary: "_198o0lt1", secondary: "_198o0lt2", tertiary: "_198o0lt3", quaternary: "_198o0lt4" } }, defaultVariants: {}, compoundVariants: [] });

package/dist/ContentBanner/index.js

@@ -21,7 +21,7 @@ const ContentBanner = ({
   return /* @__PURE__ */ jsx(
     "section",
     {
-      id: `id_${id}`,
+      id,
       className: `${content_banner({ variant: banner_variant })} ${bannerSize == "Large" ? section_pad : section_min_pad}`,
       children: /* @__PURE__ */ jsxs("div", { className: `containment`, children: [
         /* @__PURE__ */ jsxs("div", { className: `text_center`, children: [

package/dist/ExecutiveBio/ExecutiveBio.js

@@ -15,7 +15,7 @@ const ExecutiveBio = ({
   variant: fullVariant = "primary"
 }) => {
   const variant = getVariant(fullVariant);
-  return /* @__PURE__ */ jsx("section", { className: "section_spacer", id: `id_${id}`, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsx("div", { className: `${padding} ${item_bio({ variant })} rounded`, children: /* @__PURE__ */ jsxs("div", { className: `${shift} flex`, children: [
+  return /* @__PURE__ */ jsx("section", { className: "section_spacer", id, children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsx("div", { className: `${padding} ${item_bio({ variant })} rounded`, children: /* @__PURE__ */ jsxs("div", { className: `${shift} flex`, children: [
     executiveHeadshot && /* @__PURE__ */ jsx("div", { className: media, children: /* @__PURE__ */ jsx("div", { className: headshot, children: /* @__PURE__ */ jsx(
       "div",
       {

package/dist/FaqAccordion/index.d.ts

@@ -16,4 +16,5 @@ export declare const AccordionItemContent: (props: PropsWithChildren) => import(
 export declare const FaqAccordion: (props: {
     header?: string;
     accordionEmbedLevel?: string;
+    id?: string;
 } & PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/FaqAccordion/index.js

@@ -179,8 +179,8 @@ const AccordionItemContent = (props) => {
   return /* @__PURE__ */ jsx("div", { className: content, children: props.children });
 };
 const FaqAccordion = (props) => {
-  const { children } = props;
-  return /* @__PURE__ */ jsxs("section", { children: [
+  const { children, id } = props;
+  return /* @__PURE__ */ jsxs("section", { id, children: [
     props.header && /* @__PURE__ */ jsx("h2", { className: header, children: props.header }),
     /* @__PURE__ */ jsx("div", { className: faqAccordion, children })
   ] });

package/dist/FooterDisclosure/FooterDisclosure.d.ts

@@ -4,8 +4,11 @@ type WithStyles = {
     style?: CSSProperties;
     className?: string;
 };
-export declare const FooterContent: (props: PropsWithChildren & WithStyles) => import("react/jsx-runtime").JSX.Element;
-export declare const FooterParagraph: (props: PropsWithChildren & WithStyles) => import("react/jsx-runtime").JSX.Element;
+type WithId = {
+    id?: string;
+};
+export declare const FooterContent: (props: PropsWithChildren & WithStyles & WithId) => import("react/jsx-runtime").JSX.Element;
+export declare const FooterParagraph: (props: PropsWithChildren & WithStyles & WithId) => import("react/jsx-runtime").JSX.Element;
 export declare const FooterIcons: (props: PropsWithChildren & WithStyles) => import("react/jsx-runtime").JSX.Element;
 export declare const FooterDisclosure: (props: PropsWithChildren & WithStyles) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/FooterDisclosure/FooterDisclosure.js

@@ -2,10 +2,26 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { footerParagraph, iconsContent, footerDisclosure } from "./FooterDisclosure.css.js";
 const FooterContent = (props) => {
-  return /* @__PURE__ */ jsx("div", { className: clsx(props.className, "containment"), style: props.style, children: props.children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: props?.id ?? void 0,
+      className: clsx(props.className, "containment"),
+      style: props.style,
+      children: props.children
+    }
+  );
 };
 const FooterParagraph = (props) => {
-  return /* @__PURE__ */ jsx("div", { className: clsx(footerParagraph, props.className), style: props.style, children: props.children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: props.id ?? void 0,
+      className: clsx(footerParagraph, props.className),
+      style: props.style,
+      children: props.children
+    }
+  );
 };
 const FooterIcons = (props) => {
   return /* @__PURE__ */ jsx(

package/dist/Forms/ApplicationStart.js

@@ -85,120 +85,112 @@ const ApplicationStart = ({
     await onSubmit(processData);
   };
   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: clsx(
-                "text_center",
-                form,
-                descriptionField({ variant })
-              ),
-              children: description
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
-          /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
-            /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "first_name",
-                ...register("first_name", { required: true }),
-                label: "First Name",
-                sizes: "medium",
-                placeholder: "First Name",
-                required: true,
-                error: !!errors.first_name,
-                helperText: errors.first_name?.message,
-                variant
+  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: clsx(
+            "text_center",
+            form,
+            descriptionField({ variant })
+          ),
+          children: description
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("form", { className: form, onSubmit: handleSubmit(submitForm), children: [
+      /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
+        /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "first_name",
+            ...register("first_name", { required: true }),
+            label: "First Name",
+            sizes: "medium",
+            placeholder: "First Name",
+            required: true,
+            error: !!errors.first_name,
+            helperText: errors.first_name?.message,
+            variant
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "last_name",
+            ...register("last_name", { required: true }),
+            label: "Last Name",
+            sizes: "medium",
+            placeholder: "Last Name",
+            required: true,
+            error: !!errors.last_name,
+            helperText: errors.last_name?.message,
+            variant
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "email",
+            ...register("email", {
+              required: true,
+              validate: {
+                isValid: associatedEmail
               }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "last_name",
-                ...register("last_name", { required: true }),
-                label: "Last Name",
-                sizes: "medium",
-                placeholder: "Last Name",
-                required: true,
-                error: !!errors.last_name,
-                helperText: errors.last_name?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "email",
-                ...register("email", {
-                  required: true,
-                  validate: {
-                    isValid: associatedEmail
-                  }
-                }),
-                label: "Email",
-                sizes: "medium",
-                placeholder: "Email",
-                required: true,
-                error: !!errors.email,
-                helperText: errors.email?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              InputPhone,
-              {
-                id: "phone",
-                ...register("phone", { required: true, maxLength: 12 }),
-                label: "Phone",
-                sizes: "medium",
-                placeholder: "Phone",
-                required: true,
-                error: !!errors.phone,
-                helperText: errors.phone?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: fullRowForm, children: /* @__PURE__ */ jsx(
-              Checkbox,
-              {
-                id: "checkbox__c",
-                ...register("checkbox__c"),
-                sizes: "medium",
-                error: !!errors.checkbox__c,
-                helperText: errors.checkbox__c?.message,
-                variant,
-                children: "By providing your phone number and selecting the checkbox, you have agreed to these Terms and Conditions, and you have agreed to receive automated text messages, calls, and emails for any purpose including but not limited to marketing of products and services by Axos Bank. You understand and agree that such messages may be sent via Automatic Telephone Dialing System and/or artificial or pre-recorded voice, and that such consent is not a condition of receipt of any good or service. Mobile carrier messages and data rates may apply. You may opt out at any time."
-              }
-            ) })
-          ] }),
-          children,
-          /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
-          /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              color: getVariant(callToAction?.variant),
-              as: "button",
-              type: "submit",
-              disabled: !isValid || isSubmitting,
-              children: callToAction?.displayText
-            }
-          ) })
-        ] })
-      ] }) })
-    },
-    id
-  );
+            }),
+            label: "Email",
+            sizes: "medium",
+            placeholder: "Email",
+            required: true,
+            error: !!errors.email,
+            helperText: errors.email?.message,
+            variant
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          InputPhone,
+          {
+            id: "phone",
+            ...register("phone", { required: true, maxLength: 12 }),
+            label: "Phone",
+            sizes: "medium",
+            placeholder: "Phone",
+            required: true,
+            error: !!errors.phone,
+            helperText: errors.phone?.message,
+            variant
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: fullRowForm, children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            id: "checkbox__c",
+            ...register("checkbox__c"),
+            sizes: "medium",
+            error: !!errors.checkbox__c,
+            helperText: errors.checkbox__c?.message,
+            variant,
+            children: "By providing your phone number and selecting the checkbox, you have agreed to these Terms and Conditions, and you have agreed to receive automated text messages, calls, and emails for any purpose including but not limited to marketing of products and services by Axos Bank. You understand and agree that such messages may be sent via Automatic Telephone Dialing System and/or artificial or pre-recorded voice, and that such consent is not a condition of receipt of any good or service. Mobile carrier messages and data rates may apply. You may opt out at any time."
+          }
+        ) })
+      ] }),
+      children,
+      /* @__PURE__ */ jsx("div", { className: disclosureForm({ variant }), children: disclosure }),
+      /* @__PURE__ */ jsx("div", { className: actions, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          color: getVariant(callToAction?.variant),
+          as: "button",
+          type: "submit",
+          disabled: !isValid || isSubmitting,
+          children: callToAction?.displayText
+        }
+      ) })
+    ] })
+  ] }) }) }, id);
 };
 export {
   ApplicationStart