@axos-web-dev/shared-components 0.0.119 → 0.0.120

package/dist/assets/PageNavItem/PageNavItem.css

@@ -58,5 +58,6 @@
 @media (max-width:1280px) {
   ._13qd2mm3 {
     font: 400 16px / 1.5 var(--main-font-family);
+    padding: 8px 24px;
   }
 }

package/dist/assets/PageNavSet/PageNavigationSet.css

@@ -9,7 +9,7 @@
 .slick-slide + .slick-slide {
   margin-left: 8px;
 }
-main > .section_spacer:has(.sticky_nav) {
+.section_spacer:has(._1qd6ohx1) {
   margin-top: 0;
   position: sticky;
   top: 0;

package/dist/assets/SetContainer/SetContainer.css

@@ -22,7 +22,6 @@
   padding-bottom: 2.5rem;
   text-align: center;
   max-width: 1000px;
-  padding-top: 3rem;
 }
 ._18ygy9m5 .containment {
   width: 100%;

package/dist/assets/Table/Table.css

@@ -226,10 +226,10 @@ tr:last-child td {
   min-width: unset;
   width: 100%;
 }
- tr:has(> :last-child:nth-child(-n + 3)) td {
+._1nivbwe13 tr:has(> :last-child:nth-child(-n + 3)) td {
   width: 33%;
 }
-tr:has(> :last-child:nth-child(-n + 3)) th {
+._1nivbwe13 tr:has(> :last-child:nth-child(-n + 3)) th {
   width: 33%;
 }
  tr:has(> :last-child:nth-child(-n + 3)) td:first-child {
@@ -305,14 +305,18 @@ main > div:nth-last-child(2) > ._1nivbwe0 {
     overflow: auto;
     width: auto;
   }
-   tr:has(> :last-child:nth-child(-n + 3)) td {
+  ._1nivbwe13 tr:has(> :last-child:nth-child(-n + 3)) td {
+    width: 30%;
+  }
+  tr:has(> :last-child:nth-child(-n + 3)) td {
     font-size: 14px;
     min-width: unset;
+  }
+  ._1nivbwe13 tr:has(> :last-child:nth-child(-n + 3)) th {
     width: 30%;
   }
   tr:has(> :last-child:nth-child(-n + 3)) th {
     min-width: unset;
-    width: 30%;
   }
    tr:has(> :last-child:nth-child(-n + 3)) td:first-child {
     box-shadow: none;

package/dist/assets/VideoTile/VideoTile.css

@@ -14,6 +14,11 @@
   text-align: center;
   font-family: var(--header-font-family);
   height: 64px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 ._16puo4g3 {
   font-size: 18px;

package/dist/utils/allowedAxosDomains.js

@@ -17,7 +17,8 @@ const moreDomains = {
   "{INVESTORS}": process.env.INVESTORS_URL || "https://investors.axosfinancial.com",
   "{OBAXB}": process.env.ONLINEBANKING_URL || "https://onlinebanking.axosbank.com",
   "{UNVENROLLMENT}": process.env.UNVENROLLMENT_URL || "https://enroll.axosbank.com",
-  "{AUTOAXB}": "https://auto.axosbank.com/partner/axos-purchase/AU"
+  "{AUTOAXB}": "https://auto.axosbank.com/partner/axos-purchase/AU",
+  "{COMMERCIALPORTAL}": process.env.COMMERCIALPORTAL_URL || "https://portals.axosbank.com/"
 };
 const isAllowedUrl = (url) => {
   const uri = new URL(url, location.href);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "0.0.119",
+  "version": "0.0.120",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -29,19 +29,19 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
-    "@react-input/mask": "^1.2.5",
-    "@react-input/number-format": "^1.0.27",
-    "@storybook/icons": "^1.2.9",
-    "@storybook/preview-api": "^8.2.9",
+    "@react-input/mask": "^1.2.8",
+    "@react-input/number-format": "^1.0.28",
+    "@storybook/icons": "^1.2.10",
+    "@storybook/preview-api": "^8.3.0",
     "@types/iframe-resizer": "3.5.13",
-    "@vanilla-extract/css": "^1.15.3",
+    "@vanilla-extract/css": "^1.15.5",
     "@vanilla-extract/recipes": "^0.5.1",
     "clsx": "^2.1.1",
     "iframe-resizer": "4.3.11",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "react-date-picker": "^11.0.0",
-    "react-hook-form": "^7.52.1",
+    "react-hook-form": "^7.53.0",
     "react-markdown": "^9.0.1",
     "react-slick": "^0.30.2",
     "react-use": "^17.5.1",
@@ -49,7 +49,7 @@
     "typed-css-modules": "^0.9.1",
     "vite-plugin-svgr": "^4.2.0",
     "zod": "^3.23.8",
-    "zustand": "^4.5.4"
+    "zustand": "^4.5.5"
   },
   "peerDependencies": {
     "@vanilla-extract/css-utils": "^0.1.3",
@@ -78,24 +78,24 @@
     "@svgr/plugin-prettier": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
     "@types/lodash": "^4.17.7",
-    "@types/node": "^20.14.11",
-    "@types/react": "^18.3.3",
+    "@types/node": "^20.16.5",
+    "@types/react": "^18.3.5",
     "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18.3.0",
     "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
-    "@vanilla-extract/css-utils": "^0.1.3",
-    "@vanilla-extract/recipes": "^0.5.2",
-    "@vanilla-extract/vite-plugin": "^4.0.9",
-    "@vitejs/plugin-react-swc": "^3.6.0",
+    "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/recipes": "^0.5.5",
+    "@vanilla-extract/vite-plugin": "^4.0.15",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "esbuild-vanilla-image-loader": "^0.1.3",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-storybook": "^0.8.0",
     "glob": "^10.4.5",
-    "husky": "^9.0.11",
+    "husky": "^9.1.6",
     "next": "^14.1.4",
     "prettier": "3.2.5",
     "react": "^18.3.1",
@@ -104,9 +104,9 @@
     "rollup-plugin-svg-import": "^3.0.0",
     "rollup-plugin-svgo": "^2.0.0",
     "storybook": "^8.2.9",
-    "typescript": "^5.4.5",
+    "typescript": "^5.6.2",
     "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^5.3.4",
+    "vite": "^5.4.4",
     "vite-plugin-dts": "^3.9.1",
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-plugin-setting-css-module": "^1.1.4",

package/dist/Forms/BlendPurchase.d.ts

@@ -1,11 +0,0 @@
-import { FormProps } from './FormProps';
-
-export type BlendPurchaseInputs = {
-    property_Type: string;
-    Occupancy: string;
-    SalesPrice: string;
-    DownPayment: string;
-    CreditScore: string;
-    ZipCode: string;
-};
-export declare const BlendPurchase: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/BlendPurchase.js

@@ -1,215 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "../Button/Button.js";
-import "../Button/Button.css.js";
-import "react";
-import "react-use";
-import "../Input/Checkbox.js";
-import "../Input/CurrencyInput.js";
-import "../Input/Dropdown.js";
-/* empty css                                          */
-/* empty css                                   */
-import { Input } from "../Input/Input.js";
-import "../Input/Input.css.js";
-import "../Input/InputAmount.js";
-import { InputPhone } from "../Input/InputPhone.js";
-import "../Input/InputTextArea.js";
-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                                                */
-import { associatedEmail } from "../utils/EverestValidity.js";
-import "../utils/allowedAxosDomains.js";
-import { getVariant } from "../utils/getVariant.js";
-import clsx from "clsx";
-import { useForm, FormProvider } from "react-hook-form";
-import * as z from "zod";
-import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
-import { SalesforceSchema } from "./SalesforceFieldsForm.js";
-const BlendPurchase = ({
-  icon = false,
-  children,
-  onSubmit = (values) => {
-    console.log(values);
-  },
-  disclosure,
-  variant: fullVariant = "primary",
-  headline,
-  description,
-  callToAction,
-  validateEmail,
-  id
-}) => {
-  const schema = z.object({
-    property_Type: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "First Name is required." }),
-    Occupancy: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Last Name is required." }),
-    SalesPrice: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
-    DownPayment: z.string().regex(/[\d-]{10}/).min(10, { message: "Phone is required." }).max(12, { message: "Phone is required." }).transform((val, ctx) => {
-      const removeDashes = val.replace(/-/gi, "");
-      if (removeDashes.length !== 10) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: "Phone must have at least 10 and no more than 10 characters."
-        });
-        return z.NEVER;
-      }
-      return removeDashes;
-    }),
-    CreditScore: z.string(),
-    ZipCode: z.string()
-  });
-  const methods = useForm({
-    resolver: zodResolver(schema.merge(SalesforceSchema), {
-      async: true
-    }),
-    mode: "all",
-    defaultValues: {}
-  });
-  const {
-    handleSubmit,
-    register,
-    formState: { errors, isValid, isSubmitting }
-  } = methods;
-  const submitForm = async (data) => {
-    await onSubmit(data);
-  };
-  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: "property_Type",
-                ...register("property_Type", { required: true }),
-                label: "Property Type",
-                sizes: "medium",
-                required: true,
-                error: !!errors.property_Type,
-                helperText: errors.property_Type?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "Occupancy",
-                ...register("Occupancy", { required: true }),
-                label: "Property Usage",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Occupancy,
-                helperText: errors.Occupancy?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "SalesPrice",
-                ...register("SalesPrice", {
-                  required: true,
-                  validate: {
-                    isValid: associatedEmail
-                  }
-                }),
-                label: "Purchase Price",
-                sizes: "medium",
-                required: true,
-                error: !!errors.SalesPrice,
-                helperText: errors.SalesPrice?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              InputPhone,
-              {
-                id: "DownPayment",
-                ...register("DownPayment", {
-                  required: true,
-                  maxLength: 12
-                }),
-                label: "Down Payment",
-                sizes: "medium",
-                required: true,
-                error: !!errors.DownPayment,
-                helperText: errors.DownPayment?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              InputPhone,
-              {
-                id: "CreditScore",
-                ...register("CreditScore", {
-                  required: true,
-                  maxLength: 12
-                }),
-                label: "Credit Score",
-                sizes: "medium",
-                required: true,
-                error: !!errors.CreditScore,
-                helperText: errors.CreditScore?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              InputPhone,
-              {
-                id: "ZipCode",
-                ...register("ZipCode", { required: true, maxLength: 12 }),
-                label: "Zip Code",
-                sizes: "medium",
-                required: true,
-                error: !!errors.ZipCode,
-                helperText: errors.ZipCode?.message,
-                variant
-              }
-            ) })
-          ] }),
-          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 {
-  BlendPurchase
-};

package/dist/Forms/BlendRefinance.d.ts

@@ -1,11 +0,0 @@
-import { FormProps } from './FormProps';
-
-export type BlendPurchaseInputs = {
-    property_Type: string;
-    Occupancy: string;
-    SalesPrice: string;
-    DownPayment: string;
-    CreditScore: string;
-    ZipCode: string;
-};
-export declare const BlendPurchase: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, description, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/BlendRefinance.js

@@ -1,215 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "../Button/Button.js";
-import "../Button/Button.css.js";
-import "react";
-import "react-use";
-import "../Input/Checkbox.js";
-import "../Input/CurrencyInput.js";
-import "../Input/Dropdown.js";
-/* empty css                                          */
-/* empty css                                   */
-import { Input } from "../Input/Input.js";
-import "../Input/Input.css.js";
-import "../Input/InputAmount.js";
-import { InputPhone } from "../Input/InputPhone.js";
-import "../Input/InputTextArea.js";
-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                                                */
-import { associatedEmail } from "../utils/EverestValidity.js";
-import "../utils/allowedAxosDomains.js";
-import { getVariant } from "../utils/getVariant.js";
-import clsx from "clsx";
-import { useForm, FormProvider } from "react-hook-form";
-import * as z from "zod";
-import { formContainer, iconForm, headerContainer, headerForm, form, descriptionField, formWrapper, disclosureForm, actions } from "./Forms.css.js";
-import { SalesforceSchema } from "./SalesforceFieldsForm.js";
-const BlendPurchase = ({
-  icon = false,
-  children,
-  onSubmit = (values) => {
-    console.log(values);
-  },
-  disclosure,
-  variant: fullVariant = "primary",
-  headline,
-  description,
-  callToAction,
-  validateEmail,
-  id
-}) => {
-  const schema = z.object({
-    property_Type: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "First Name is required." }),
-    Occupancy: z.string().regex(/^[A-Za-z][^0-9_!¡?÷?¿/\\+=@#$%ˆ&*,.^(){}|~<>;:[\]]{1,}$/g).trim().min(1, { message: "Last Name is required." }),
-    SalesPrice: z.string().email({ message: "Email is required." }).refine(async (val) => await validateEmail(val)),
-    DownPayment: z.string().regex(/[\d-]{10}/).min(10, { message: "Phone is required." }).max(12, { message: "Phone is required." }).transform((val, ctx) => {
-      const removeDashes = val.replace(/-/gi, "");
-      if (removeDashes.length !== 10) {
-        ctx.addIssue({
-          code: z.ZodIssueCode.custom,
-          message: "Phone must have at least 10 and no more than 10 characters."
-        });
-        return z.NEVER;
-      }
-      return removeDashes;
-    }),
-    CreditScore: z.string(),
-    ZipCode: z.string()
-  });
-  const methods = useForm({
-    resolver: zodResolver(schema.merge(SalesforceSchema), {
-      async: true
-    }),
-    mode: "all",
-    defaultValues: {}
-  });
-  const {
-    handleSubmit,
-    register,
-    formState: { errors, isValid, isSubmitting }
-  } = methods;
-  const submitForm = async (data) => {
-    await onSubmit(data);
-  };
-  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: "property_Type",
-                ...register("property_Type", { required: true }),
-                label: "Property Type",
-                sizes: "medium",
-                required: true,
-                error: !!errors.property_Type,
-                helperText: errors.property_Type?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "Occupancy",
-                ...register("Occupancy", { required: true }),
-                label: "Property Usage",
-                sizes: "medium",
-                required: true,
-                error: !!errors.Occupancy,
-                helperText: errors.Occupancy?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                id: "SalesPrice",
-                ...register("SalesPrice", {
-                  required: true,
-                  validate: {
-                    isValid: associatedEmail
-                  }
-                }),
-                label: "Purchase Price",
-                sizes: "medium",
-                required: true,
-                error: !!errors.SalesPrice,
-                helperText: errors.SalesPrice?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              InputPhone,
-              {
-                id: "DownPayment",
-                ...register("DownPayment", {
-                  required: true,
-                  maxLength: 12
-                }),
-                label: "Down Payment",
-                sizes: "medium",
-                required: true,
-                error: !!errors.DownPayment,
-                helperText: errors.DownPayment?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              InputPhone,
-              {
-                id: "CreditScore",
-                ...register("CreditScore", {
-                  required: true,
-                  maxLength: 12
-                }),
-                label: "Credit Score",
-                sizes: "medium",
-                required: true,
-                error: !!errors.CreditScore,
-                helperText: errors.CreditScore?.message,
-                variant
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              InputPhone,
-              {
-                id: "ZipCode",
-                ...register("ZipCode", { required: true, maxLength: 12 }),
-                label: "Zip Code",
-                sizes: "medium",
-                required: true,
-                error: !!errors.ZipCode,
-                helperText: errors.ZipCode?.message,
-                variant
-              }
-            ) })
-          ] }),
-          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 {
-  BlendPurchase
-};

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

@@ -1 +0,0 @@
-export declare const datePicker: string;

package/dist/Input/DatePicker.css.js

@@ -1,6 +0,0 @@
-/* empty css                                          */
-/* empty css                              */
-var datePicker = "_1oit9ls0";
-export {
-  datePicker
-};

package/dist/Input/Datepicker.d.ts

@@ -1,3 +0,0 @@
-import { DatepickerInputProps } from './InputProps';
-
-export declare const DatePickerInput: (props: DatepickerInputProps) => import("react/jsx-runtime").JSX.Element;