@axos-web-dev/shared-components 0.0.147 → 0.0.149

package/dist/Hyperlink/index.js

@@ -34,12 +34,13 @@ import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
 import "../Input/Dropdown.js";
-/* empty css                                   */
+import "../Input/Dropdown.css.js";
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputAmount.js";
 import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
+import "../Input/DownPaymentInput.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
@@ -47,6 +48,7 @@ import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Inputs/Input.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";

package/dist/ImageLink/ImageLink.js

@@ -28,12 +28,13 @@ import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
 import "../Input/Dropdown.js";
-/* empty css                                   */
+import "../Input/Dropdown.css.js";
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputAmount.js";
 import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
+import "../Input/DownPaymentInput.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
@@ -42,6 +43,9 @@ import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 import "../Input/RadioButton.js";
+import "../Chevron/Chevron.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
+import "../Inputs/Input.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
@@ -68,7 +72,6 @@ import "react-wrap-balancer";
 /* empty css                                                      */
 /* empty css                                    */
 import "../LandingPageHeader/LandingPageHeader.css.js";
-import "../Chevron/Chevron.css.js";
 /* empty css                                */
 import "../Modal/contextApi/store.js";
 /* empty css                                                      */
@@ -95,7 +98,6 @@ import "../StepItemSet/StepItemSet.css.js";
 import "next/script.js";
 /* empty css                                        */
 /* empty css                                              */
-import "../Interstitial/Interstitial-variants.css.js";
 import "../HeroBanner/LargeBanner.css.js";
 import "../HeroBanner/SelectionBanner.css.js";
 const ImageLink = ({

package/dist/ImageLink/ImageLinkSet.js

@@ -33,12 +33,13 @@ import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
 import "../Input/Dropdown.js";
-/* empty css                                   */
+import "../Input/Dropdown.css.js";
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputAmount.js";
 import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
+import "../Input/DownPaymentInput.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
@@ -46,6 +47,9 @@ import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Chevron/Chevron.css.js";
+import "../Interstitial/Interstitial-variants.css.js";
+import "../Inputs/Input.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
@@ -73,9 +77,7 @@ import "react-wrap-balancer";
 /* empty css                                              */
 /* empty css                                                      */
 /* empty css                                    */
-import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
-import "../Chevron/Chevron.css.js";
 /* empty css                                */
 import "../Modal/contextApi/store.js";
 /* empty css                                                      */

package/dist/ImageLink/index.js

@@ -32,12 +32,13 @@ import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
 import "../Input/Dropdown.js";
-/* empty css                                   */
+import "../Input/Dropdown.css.js";
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputAmount.js";
 import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
+import "../Input/DownPaymentInput.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
@@ -45,6 +46,7 @@ import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Inputs/Input.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";

package/dist/Input/CurrencyInput.js

@@ -3,13 +3,13 @@ import { InputNumberFormat } from "@react-input/number-format";
 import { forwardRef } from "react";
 import "./Checkbox.js";
 import "./Dropdown.js";
-/* empty css                                          */
-/* empty css                            */
+import "./Dropdown.css.js";
 import { Input } from "./Input.js";
 import "./Input.css.js";
 import "./InputAmount.js";
 import "./InputPhone.js";
 import "./InputTextArea.js";
+import "./DownPaymentInput.js";
 const CurrencyInput = forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(

package/dist/Input/DownPaymentInput.d.ts

@@ -0,0 +1,12 @@
+import { InputProps } from './InputProps';
+
+interface DownPaymentInputProps extends InputProps {
+    salesPrice: number | undefined;
+    downPaymentPercentage: number;
+    setDownPaymentPercentage: (percentage: number) => void;
+    isTypingDownPayment: boolean;
+    setIsTypingDownPayment: (value: boolean) => void;
+    methods: any;
+}
+export declare const DownPaymentInput: import('react').ForwardRefExoticComponent<DownPaymentInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/dist/Input/DownPaymentInput.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef, useState, useEffect } from "react";
+import { wrapper, labelClassName, container, input, helperText } from "./Input.css.js";
+import { dp_input } from "./Dropdown.css.js";
+const DownPaymentInput = forwardRef(
+  ({
+    salesPrice,
+    downPaymentPercentage,
+    isTypingDownPayment,
+    methods,
+    setIsTypingDownPayment,
+    setDownPaymentPercentage,
+    label,
+    variant,
+    disabled,
+    helperText: helper,
+    error = false,
+    ...rest
+  }, ref) => {
+    const [downPayment, setDownPayment] = useState(0);
+    useEffect(() => {
+      if (salesPrice && salesPrice > 0 && !isTypingDownPayment) {
+        const calculatedDownPayment = Math.round(
+          salesPrice * downPaymentPercentage / 100
+        );
+        setDownPayment(calculatedDownPayment);
+      }
+    }, [salesPrice, downPaymentPercentage, isTypingDownPayment]);
+    const handleDownPaymentChange = (e) => {
+      const value = parseCurrency(e.target.value);
+      setDownPayment(value);
+      setIsTypingDownPayment(true);
+      console.log("handleDownPaymentChange ? yup");
+      methods.setValue("downPayment", value);
+      methods.trigger("downPayment");
+      if (salesPrice && !isTypingDownPayment) {
+        const newPercentage = Math.round(value / salesPrice * 100);
+        setDownPaymentPercentage(newPercentage);
+      }
+    };
+    const handlePercentageChange = (e) => {
+      const newPercentage = Math.max(1, Math.min(100, Number(e.target.value)));
+      setDownPaymentPercentage(newPercentage);
+      setIsTypingDownPayment(false);
+      if (salesPrice) {
+        const calculatedDownPayment = Math.round(
+          salesPrice * newPercentage / 100
+        );
+        setDownPayment(calculatedDownPayment);
+      }
+    };
+    const handleDownPaymentFocus = () => {
+      setIsTypingDownPayment(true);
+    };
+    const handleDownPaymentBlur = () => {
+      setIsTypingDownPayment(true);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: `${wrapper()} ${dp_input}`, children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: `${labelClassName({ error, variant })}`,
+          htmlFor: rest.name,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: container({ size: "medium", error }),
+          style: { display: "flex", alignItems: "center" },
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...rest,
+                ref,
+                className: clsx(rest.className, input()),
+                type: "text",
+                value: formatCurrency(downPayment),
+                onChange: handleDownPaymentChange,
+                onFocus: handleDownPaymentFocus,
+                onBlur: handleDownPaymentBlur
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: 100,
+                value: downPaymentPercentage,
+                onChange: handlePercentageChange,
+                style: {
+                  width: "40px",
+                  marginLeft: "8px",
+                  border: "none",
+                  color: "#5E6A74"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { style: { marginLeft: "4px", color: "#5E6A74" }, children: "%" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: helperText({ disabled, error }), children: helper })
+    ] });
+  }
+);
+const formatCurrency = (value) => {
+  if (value > 0) {
+    return `$${value.toLocaleString()}`;
+  } else return "";
+};
+const parseCurrency = (value) => {
+  const cleanedValue = value.replace(/[^0-9.-]+/g, "");
+  return cleanedValue ? Number(cleanedValue) : 0;
+};
+export {
+  DownPaymentInput
+};

package/dist/Input/Dropdown.css.d.ts

@@ -1 +1,6 @@
 export declare const selectInput: string;
+export declare const dp_input: import('@vanilla-extract/recipes').RuntimeFn<{
+    [x: string]: {
+        [x: string]: string | import('@vanilla-extract/css').ComplexStyleRule;
+    };
+}>;

package/dist/Input/Dropdown.css.js

@@ -1,6 +1,9 @@
 /* empty css                                          */
 /* empty css                            */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var selectInput = "_1vzv2cd0";
+var dp_input = createRuntimeFn({ defaultClassName: "_1vzv2cd1", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
 export {
+  dp_input,
   selectInput
 };

package/dist/Input/Input.js

@@ -15,6 +15,7 @@ const Input = forwardRef((props, ref) => {
     helperText: helper,
     variant,
     type = "text",
+    placeholder,
     ...rest
   } = props;
   return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
@@ -34,7 +35,8 @@ const Input = forwardRef((props, ref) => {
           ...rest,
           ref,
           className: clsx(props.className, input({ size: sizes })),
-          type
+          type,
+          placeholder
         }
       ),
       iconRight && /* @__PURE__ */ jsx("span", { className: iconContainer.right, children: /* @__PURE__ */ jsx("div", { className: iconInput({ size: sizes }), children: iconRight }) })

package/dist/Input/InputAmount.js

@@ -4,12 +4,12 @@ import { forwardRef } from "react";
 import "./Checkbox.js";
 import "./CurrencyInput.js";
 import "./Dropdown.js";
-/* empty css                                          */
-/* empty css                            */
+import "./Dropdown.css.js";
 import { Input } from "./Input.js";
 import "./Input.css.js";
 import "./InputPhone.js";
 import "./InputTextArea.js";
+import "./DownPaymentInput.js";
 const InputAmount = forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(

package/dist/Input/InputPhone.js

@@ -4,12 +4,12 @@ import { forwardRef } from "react";
 import "./Checkbox.js";
 import "./CurrencyInput.js";
 import "./Dropdown.js";
-/* empty css                                          */
-/* empty css                            */
+import "./Dropdown.css.js";
 import { Input } from "./Input.js";
 import "./Input.css.js";
 import "./InputAmount.js";
 import "./InputTextArea.js";
+import "./DownPaymentInput.js";
 const InputPhone = forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(

package/dist/Input/InputProps.d.ts

@@ -36,3 +36,6 @@ export interface RadioButtonProps extends InputProps {
     value: string | number;
     groupName: string;
 }
+export interface DownPaymentProps extends InputHTMLAttributes<HTMLInputElement> {
+    inputRight?: ReactNode;
+}

package/dist/Input/index.d.ts

@@ -8,3 +8,4 @@ export * from './InputAmount';
 export * from './InputPhone';
 export * from './InputProps';
 export * from './InputTextArea';
+export * from './DownPaymentInput';

package/dist/Input/index.js

@@ -1,21 +1,24 @@
 import { Checkbox } from "./Checkbox.js";
 import { CurrencyInput } from "./CurrencyInput.js";
 import { Dropdown } from "./Dropdown.js";
-import { selectInput } from "./Dropdown.css.js";
+import { dp_input, selectInput } from "./Dropdown.css.js";
 import { Input } from "./Input.js";
 import { container, helperText, iconContainer, iconContainerBase, iconInput, input, labelClassName, wrapper } from "./Input.css.js";
 import { InputAmount } from "./InputAmount.js";
 import { InputPhone } from "./InputPhone.js";
 import { InputTextArea } from "./InputTextArea.js";
+import { DownPaymentInput } from "./DownPaymentInput.js";
 export {
   Checkbox,
   CurrencyInput,
+  DownPaymentInput,
   Dropdown,
   Input,
   InputAmount,
   InputPhone,
   InputTextArea,
   container,
+  dp_input,
   helperText,
   iconContainer,
   iconContainerBase,

package/dist/Insight/Featured/CategorySelector.css.d.ts

@@ -1,6 +1,7 @@
 export declare const selector_section: string;
 export declare const selector_link: string;
 export declare const selector_title_link: string;
+export declare const selector_more: string;
 export declare const selector_grid_items: string;
 export declare const selector_small_item: string;
 export declare const selector_title: string;

package/dist/Insight/Featured/CategorySelector.css.js

@@ -6,16 +6,18 @@
 var selector_section = "_13y9ptj0";
 var selector_link = "_13y9ptj1";
 var selector_title_link = "_13y9ptj2";
-var selector_grid_items = "_13y9ptj3";
-var selector_small_item = "_13y9ptj4 _1sr2o6v9";
-var selector_title = "_13y9ptj5";
-var selector_grid_content = "_13y9ptj6";
-var selector_img = "_13y9ptj7";
+var selector_more = "_13y9ptj3";
+var selector_grid_items = "_13y9ptj4";
+var selector_small_item = "_13y9ptj5 _1sr2o6v9";
+var selector_title = "_13y9ptj6";
+var selector_grid_content = "_13y9ptj7";
+var selector_img = "_13y9ptj8";
 export {
   selector_grid_content,
   selector_grid_items,
   selector_img,
   selector_link,
+  selector_more,
   selector_section,
   selector_small_item,
   selector_title,

package/dist/Insight/Featured/CategorySelector.js

@@ -31,12 +31,13 @@ import "@hookform/resolvers/zod";
 import "../../Input/Checkbox.js";
 import "../../Input/CurrencyInput.js";
 import "../../Input/Dropdown.js";
-/* empty css                                      */
+import "../../Input/Dropdown.css.js";
 import "../../Input/Input.js";
 import "../../Input/Input.css.js";
 import "../../Input/InputAmount.js";
 import "../../Input/InputPhone.js";
 import "../../Input/InputTextArea.js";
+import "../../Input/DownPaymentInput.js";
 import "react-hook-form";
 import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
@@ -45,6 +46,7 @@ import "../../Input/Checkbox.css.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 import "../../Input/RadioButton.js";
+import "../../Inputs/Input.css.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
@@ -99,7 +101,7 @@ import "next/script.js";
 /* empty css                                                 */
 /* empty css                                   */
 import "../../Modal/contextApi/store.js";
-import { selector_section, selector_link, selector_title_link, selector_grid_items, selector_small_item, selector_img, selector_grid_content, selector_title } from "./CategorySelector.css.js";
+import { selector_section, selector_link, selector_title_link, selector_more, selector_grid_items, selector_small_item, selector_img, selector_grid_content, selector_title } from "./CategorySelector.css.js";
 const CategorySelector = (props) => {
   const {
     id,
@@ -119,6 +121,7 @@ const CategorySelector = (props) => {
         {
           targetUrl: url,
           variant: "primary",
+          className: selector_more,
           children: `See More ${category} Articles`
         }
       )

package/dist/Insight/Featured/Featured.js

@@ -34,12 +34,13 @@ import "@hookform/resolvers/zod";
 import "../../Input/Checkbox.js";
 import "../../Input/CurrencyInput.js";
 import "../../Input/Dropdown.js";
-/* empty css                                      */
+import "../../Input/Dropdown.css.js";
 import "../../Input/Input.js";
 import "../../Input/Input.css.js";
 import "../../Input/InputAmount.js";
 import "../../Input/InputPhone.js";
 import "../../Input/InputTextArea.js";
+import "../../Input/DownPaymentInput.js";
 import "react-hook-form";
 import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
@@ -47,6 +48,7 @@ import "../../Input/RadioButton.css.js";
 import "../../Input/Checkbox.css.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "../../Input/RadioButton.js";
+import "../../Inputs/Input.css.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";

package/dist/Interstitial/Interstitial.module.js

@@ -1,12 +1,13 @@
-const overlay = "_overlay_1euix_24";
-const modal = "_modal_1euix_40";
-const vanish = "_vanish_1euix_1";
-const appear = "_appear_1euix_1";
-const close_button = "_close_button_1euix_55";
-const modal_content = "_modal_content_1euix_70";
-const img_area = "_img_area_1euix_74";
-const body_copy = "_body_copy_1euix_84";
-const btns = "_btns_1euix_98";
+const overlay = "_overlay_1u8jc_24";
+const modal = "_modal_1u8jc_40";
+const vanish = "_vanish_1u8jc_1";
+const appear = "_appear_1u8jc_1";
+const close_button = "_close_button_1u8jc_55";
+const modal_content = "_modal_content_1u8jc_70";
+const img_area = "_img_area_1u8jc_74";
+const body_copy = "_body_copy_1u8jc_84";
+const btns = "_btns_1u8jc_98";
+const white_modal = "_white_modal_1u8jc_139";
 const css = {
   overlay,
   modal,
@@ -16,7 +17,8 @@ const css = {
   modal_content,
   img_area,
   body_copy,
-  btns
+  btns,
+  white_modal
 };
 export {
   appear,
@@ -28,5 +30,6 @@ export {
   modal,
   modal_content,
   overlay,
-  vanish
+  vanish,
+  white_modal
 };

package/dist/Modal/Modal.js

@@ -28,13 +28,13 @@ import "@hookform/resolvers/zod";
 import "../Input/Checkbox.js";
 import "../Input/CurrencyInput.js";
 import "../Input/Dropdown.js";
-/* empty css                                          */
-/* empty css                                   */
+import "../Input/Dropdown.css.js";
 import "../Input/Input.js";
 import "../Input/Input.css.js";
 import "../Input/InputAmount.js";
 import "../Input/InputPhone.js";
 import "../Input/InputTextArea.js";
+import "../Input/DownPaymentInput.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
@@ -42,12 +42,15 @@ import "../Input/RadioButton.css.js";
 import "../Input/Checkbox.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "../Input/RadioButton.js";
+import "../Interstitial/Interstitial-variants.css.js";
+import "../Inputs/Input.css.js";
 import "iframe-resizer";
 /* empty css                                                                                */
 import "../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";
 /* empty css                                              */
 /* empty css                                          */
 /* empty css                                          */
+/* empty css                                          */
 /* empty css                                                    */
 import "../Carousel/index.js";
 import "../Hyperlink/Hyperlink.css.js";
@@ -71,7 +74,6 @@ import "react-wrap-balancer";
 /* empty css                                              */
 /* empty css                                                      */
 /* empty css                                    */
-import "../Interstitial/Interstitial-variants.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "./contextApi/store.js";
 /* empty css                                                      */

package/dist/NavigationMenu/AxosBank/NavData.js

@@ -32,12 +32,13 @@ import "@hookform/resolvers/zod";
 import "../../Input/Checkbox.js";
 import "../../Input/CurrencyInput.js";
 import "../../Input/Dropdown.js";
-/* empty css                                      */
+import "../../Input/Dropdown.css.js";
 import "../../Input/Input.js";
 import "../../Input/Input.css.js";
 import "../../Input/InputAmount.js";
 import "../../Input/InputPhone.js";
 import "../../Input/InputTextArea.js";
+import "../../Input/DownPaymentInput.js";
 import "react-hook-form";
 import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
@@ -45,6 +46,7 @@ import "../../Input/RadioButton.css.js";
 import "../../Input/Checkbox.css.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "../../Input/RadioButton.js";
+import "../../Inputs/Input.css.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";

package/dist/NavigationMenu/AxosBank/SubNavBar.js

@@ -33,12 +33,13 @@ import "@hookform/resolvers/zod";
 import "../../Input/Checkbox.js";
 import "../../Input/CurrencyInput.js";
 import "../../Input/Dropdown.js";
-/* empty css                                      */
+import "../../Input/Dropdown.css.js";
 import "../../Input/Input.js";
 import "../../Input/Input.css.js";
 import "../../Input/InputAmount.js";
 import "../../Input/InputPhone.js";
 import "../../Input/InputTextArea.js";
+import "../../Input/DownPaymentInput.js";
 import "react-hook-form";
 import "../../Forms/Forms.css.js";
 import "../../Forms/SalesforceFieldsForm.js";
@@ -46,6 +47,7 @@ import "../../Input/RadioButton.css.js";
 import "../../Input/Checkbox.css.js";
 import "../../LoadingIndicator/LoadingIndicator.css.js";
 import "../../Input/RadioButton.js";
+import "../../Inputs/Input.css.js";
 import "iframe-resizer";
 /* empty css                                                                                   */
 import "../../Calculators/MonthlyPaymentCalculator/MonthlyPaymentCalculator.css.js";