@axos-web-dev/shared-components 1.0.100-feature-lvfformcontextdata → 1.0.100-feature-comparisonCTAs.1

package/dist/Calculators/BuyDownCalculator/index.d.ts

@@ -11,6 +11,7 @@ export type BuyDownCalculatorInputs = {
     purchasePrice: number;
     downpayment: number;
     dealerContribution: number;
+    manufacturerContributionAmount: number;
     program: string;
     fico: string;
     buydownRate: number;

package/dist/Calculators/BuyDownCalculator/index.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Button } from "../../Button/Button.js";
 import "../../Button/Button.css.js";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import "react-use";
 import { Program, Fico, BuydownRate, BuydownTerm, LoanRates } from "../../Forms/FormEnums.js";
 import { Checkbox } from "../../Input/Checkbox.js";
@@ -39,7 +39,6 @@ const BuyDownCalculator = ({
   const [finalNoteRate, setFinalNoteRate] = useState("");
   const [manuContributionPercentage, setManuContributionPercentage] = useState("");
   const [buydownPayment, setBuydownPayment] = useState("");
-  const [manuContributionAmount, setManuContributionAmount] = useState("");
   const [nonBuydownPayment, setNonBuydownPayment] = useState("");
   const [totalBuydownCost, setTotalBuydownCost] = useState("");
   const [monthlySavings, setMonthlySavings] = useState("");
@@ -47,6 +46,11 @@ const BuyDownCalculator = ({
   const [enableFullTimeCharter, setEnableFullTimeCharter] = useState(false);
   const [disableMooringOutside, setDisableMooringOutside] = useState(false);
   const [disableLTVAbove60, setDisableLTVAbove60] = useState(true);
+  const [isDealerContributionDisabled, setIsDealerContributionDisabled] = useState(false);
+  const [
+    isManufacturerContributionDisabled,
+    setIsManufacturerContributionDisabled
+  ] = useState(false);
   const schema = z.object({
     purchasePrice: z.string().min(1, { message: "Loan amount is required." }).transform((val) => {
       return formatToNumber(val);
@@ -54,8 +58,13 @@ const BuyDownCalculator = ({
     downpayment: z.string().min(1, { message: "Down Payment is required." }).transform((val) => {
       return formatToNumber(val);
     }),
-    dealerContribution: z.string().min(1, { message: "Dealer Contribution is required." }).transform((val) => {
-      return formatToNumber(val);
+    dealerContribution: z.union([z.string(), z.number()]).optional().transform((val) => {
+      if (typeof val === "number") return val;
+      return val ? formatToNumber(val) : 0;
+    }),
+    manufacturerContributionAmount: z.union([z.string(), z.number()]).optional().transform((val) => {
+      if (typeof val === "number") return val;
+      return val ? formatToNumber(val) : 0;
     }),
     program: z.string().min(1, { message: "Program is required." }),
     fico: z.string().min(1, { message: "FICO is required." }),
@@ -66,7 +75,32 @@ const BuyDownCalculator = ({
       return formatToNumber(val);
     })
   }).superRefine((values, ctx) => {
-    const { purchasePrice, downpayment, program, buydownTerm } = values;
+    const {
+      purchasePrice,
+      downpayment,
+      program,
+      buydownTerm,
+      dealerContribution,
+      manufacturerContributionAmount
+    } = values;
+    if (dealerContribution > 0 && manufacturerContributionAmount > 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["dealerContribution"],
+        message: "Cannot specify both Dealer Contribution and Manufacturer Contribution Amount. Please choose one."
+      });
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["manufacturerContributionAmount"],
+        message: "Cannot specify both Dealer Contribution and Manufacturer Contribution Amount. Please choose one."
+      });
+    } else if (dealerContribution === 0 && manufacturerContributionAmount === 0) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["dealerContribution"],
+        message: "Either Dealer Contribution or Manufacturer Contribution Amount is required."
+      });
+    }
     if (program === "3/6 SOFR ARM" && (buydownTerm === 4 || buydownTerm === 5)) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
@@ -114,8 +148,23 @@ const BuyDownCalculator = ({
     handleSubmit,
     register,
     setValue,
+    watch,
+    trigger,
     formState: { errors, isValid }
   } = methods;
+  const watchedFields = watch(["purchasePrice", "downpayment", "program"]);
+  useEffect(() => {
+    const [purchasePrice, downpayment, program] = watchedFields;
+    if (purchasePrice && downpayment && program) {
+      const purchasePriceNum = typeof purchasePrice === "string" ? formatToNumber(purchasePrice) : purchasePrice;
+      const downpaymentNum = typeof downpayment === "string" ? formatToNumber(downpayment) : downpayment;
+      if (purchasePriceNum > 0 && downpaymentNum >= 0 && purchasePriceNum > downpaymentNum) {
+        const financedAmount2 = purchasePriceNum - downpaymentNum;
+        const loanRange2 = getRange(financedAmount2, program);
+        setLoanRange(loanRange2);
+      }
+    }
+  }, [watchedFields]);
   const calculator_variant = getVariant(variant);
   const enableDependentInputs = enableFullTimeCharter;
   const formatToNumber = (value) => {
@@ -224,6 +273,32 @@ const BuyDownCalculator = ({
       setDisableMooringOutside(true);
     }
   };
+  const handleDealerContributionChange = (event) => {
+    const value = event.target.value;
+    const numericValue = formatToNumber(value);
+    if (numericValue > 0) {
+      setIsManufacturerContributionDisabled(true);
+      setValue("manufacturerContributionAmount", 0);
+    } else {
+      setIsManufacturerContributionDisabled(false);
+    }
+    setTimeout(() => {
+      trigger(["dealerContribution", "manufacturerContributionAmount"]);
+    }, 0);
+  };
+  const handleManufacturerContributionChange = (event) => {
+    const value = event.target.value;
+    const numericValue = formatToNumber(value);
+    if (numericValue > 0) {
+      setIsDealerContributionDisabled(true);
+      setValue("dealerContribution", 0);
+    } else {
+      setIsDealerContributionDisabled(false);
+    }
+    setTimeout(() => {
+      trigger(["dealerContribution", "manufacturerContributionAmount"]);
+    }, 0);
+  };
   const updateFicoRequirements = (loanRangeValue, program) => {
     const ficoOptionsToDisable = ["700-719", "720-759"];
     const ficoSelect = document.getElementById("fico");
@@ -383,17 +458,17 @@ const BuyDownCalculator = ({
     setTotalBuydownCost(formatToCurrency(TBC));
     return TBC;
   };
-  const calculateManufacturerContribution = (dealerContribution) => {
-    const manufacturerContribution = 100 - dealerContribution;
+  const calculateManufacturerContribution = (dealerContribution, manufacturerContributionAmount, totalBuydownCost2) => {
+    let manufacturerContribution;
+    if (manufacturerContributionAmount > 0) {
+      manufacturerContribution = manufacturerContributionAmount / totalBuydownCost2 * 100;
+    } else {
+      manufacturerContribution = 100 - dealerContribution;
+    }
     const percentage = formatToPercentage(manufacturerContribution);
     setManuContributionPercentage(percentage);
     return manufacturerContribution;
   };
-  const calculateManufacturerAmount = (totalBuydownCost2, manufacturerContribution) => {
-    const manufacturerAmount = totalBuydownCost2 * (manufacturerContribution / 100);
-    const formattedAmount = formatToCurrency(manufacturerAmount);
-    setManuContributionAmount(formattedAmount);
-  };
   const calculateDealerContributionAmount = (dealerContribution, totalBuydownCost2) => {
     const dealerContributionValue = totalBuydownCost2 * (dealerContribution / 100);
     const formattedAmount = formatToCurrency(dealerContributionValue);
@@ -405,6 +480,7 @@ const BuyDownCalculator = ({
         buydownRate,
         buydownTerm,
         dealerContribution,
+        manufacturerContributionAmount,
         downpayment,
         fico,
         program,
@@ -436,8 +512,11 @@ const BuyDownCalculator = ({
         financedAmountValue,
         buydownTerm
       );
-      const manufacturerContribution = calculateManufacturerContribution(dealerContribution);
-      calculateManufacturerAmount(totalBuydownCost2, manufacturerContribution);
+      calculateManufacturerContribution(
+        dealerContribution,
+        manufacturerContributionAmount,
+        totalBuydownCost2
+      );
       calculateDealerContributionAmount(dealerContribution, totalBuydownCost2);
     }
   };
@@ -495,16 +574,40 @@ const BuyDownCalculator = ({
                 PercentageInput,
                 {
                   id: "dealerContribution",
-                  ...register("dealerContribution", { required: true }),
+                  ...register("dealerContribution", {
+                    required: false,
+                    onChange: handleDealerContributionChange
+                  }),
                   sizes: "medium",
                   placeholder: "0.00%",
                   label: "Dealer Contribution",
-                  required: true,
+                  required: false,
                   error: !!errors["dealerContribution"],
                   helperText: errors["dealerContribution"]?.message,
-                  variant: calculator_variant
+                  variant: calculator_variant,
+                  disabled: isDealerContributionDisabled
                 }
               ) }),
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                CurrencyInput,
+                {
+                  id: "manufacturerContributionAmount",
+                  ...register("manufacturerContributionAmount", {
+                    required: false,
+                    onChange: handleManufacturerContributionChange
+                  }),
+                  sizes: "medium",
+                  placeholder: "$0.00",
+                  label: "Manufacturer Contribution Amount",
+                  required: false,
+                  error: !!errors["manufacturerContributionAmount"],
+                  helperText: errors["manufacturerContributionAmount"]?.message,
+                  variant: calculator_variant,
+                  disabled: isManufacturerContributionDisabled
+                }
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: `${row_form}`, children: [
               /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
                 Dropdown,
                 {
@@ -526,9 +629,7 @@ const BuyDownCalculator = ({
                     Program.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
                   ]
                 }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: `${row_form}`, children: [
+              ) }),
               /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
                 Dropdown,
                 {
@@ -546,7 +647,9 @@ const BuyDownCalculator = ({
                     Fico.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
                   ]
                 }
-              ) }),
+              ) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: `${row_form}`, children: [
               /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
                 Input,
                 {
@@ -558,10 +661,8 @@ const BuyDownCalculator = ({
                   variant: calculator_variant,
                   value: loanRange
                 }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: `${row_form}`, children: [
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+              ) }),
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
                 Dropdown,
                 {
                   id: "buydownRate",
@@ -574,35 +675,31 @@ const BuyDownCalculator = ({
                   error: !!errors.buydownRate,
                   helperText: errors.buydownRate?.message,
                   variant: calculator_variant,
-                  defaultValue: "",
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select Buydown Rate" }),
-                    BuydownRate.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
-                Dropdown,
-                {
-                  id: "buydownTerm",
-                  ...register("buydownTerm", {
-                    required: true,
-                    deps: ["program"]
-                  }),
-                  label: "Buydown Term (1-5 Years)",
-                  sizes: "medium",
-                  required: true,
-                  error: !!errors.buydownTerm,
-                  helperText: errors.buydownTerm?.message,
-                  variant: calculator_variant,
-                  defaultValue: 0,
-                  children: [
-                    /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select Buydown Term" }),
-                    BuydownTerm.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
-                  ]
+                  disabled: true,
+                  defaultValue: 3.74,
+                  children: BuydownRate.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
                 }
               ) })
             ] }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              Dropdown,
+              {
+                id: "buydownTerm",
+                ...register("buydownTerm", {
+                  required: true,
+                  deps: ["program"]
+                }),
+                label: "Buydown Term (1-5 Years)",
+                sizes: "medium",
+                required: true,
+                error: !!errors.buydownTerm,
+                helperText: errors.buydownTerm?.message,
+                variant: calculator_variant,
+                disabled: true,
+                defaultValue: 3,
+                children: BuydownTerm.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.text }, item.value))
+              }
+            ) }) }),
             /* @__PURE__ */ jsx("div", { className: `${row_form}`, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("label", { children: "Loan Level Rate Adjustments" }) }) }),
             /* @__PURE__ */ jsxs("div", { className: `${row_form}`, children: [
               /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: row_form, children: /* @__PURE__ */ jsxs(
@@ -622,7 +719,7 @@ const BuyDownCalculator = ({
                         id: "mooringOutsideContinentalUS",
                         ...register("mooringOutsideContinentalUS"),
                         value: 0.5,
-                        radioText: "Mooring Outside Continental U.S. (Includes Puerto Rico,\r\n                                    Hawaii, and Alaska) (Does not apply to Full Time Charter)\r\n                                    +0.500",
+                        radioText: "Mooring Outside Continental U.S. (Includes Puerto Rico,\n                                    Hawaii, and Alaska) (Does not apply to Full Time Charter)\n                                    +0.500",
                         groupName: "dependentInputs",
                         disabled: disableMooringOutside
                       }
@@ -788,23 +885,23 @@ const BuyDownCalculator = ({
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               CurrencyInput,
               {
-                id: "manuContributionAmount",
+                id: "nonBuydownPayment",
                 sizes: "medium",
-                label: "Manufacturer Contribution Amount",
+                label: "Non-buydown Payment",
                 disabled: true,
                 variant: calculator_variant,
-                value: manuContributionAmount
+                value: nonBuydownPayment
               }
             ) }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               CurrencyInput,
               {
-                id: "nonBuydownPayment",
+                id: "totalBuydownCost",
                 sizes: "medium",
-                label: "Non-buydown Payment",
+                label: "Total Buydown Cost",
                 disabled: true,
                 variant: calculator_variant,
-                value: nonBuydownPayment
+                value: totalBuydownCost
               }
             ) })
           ] }),
@@ -812,38 +909,27 @@ const BuyDownCalculator = ({
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               CurrencyInput,
               {
-                id: "totalBuydownCost",
+                id: "monthlySavings",
                 sizes: "medium",
-                label: "Total Buydown Cost",
+                label: "Monthly Savings",
                 disabled: true,
                 variant: calculator_variant,
-                value: totalBuydownCost
+                value: monthlySavings
               }
             ) }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               CurrencyInput,
               {
-                id: "monthlySavings",
+                id: "dealerContributionAmount",
                 sizes: "medium",
-                label: "Monthly Savings",
+                label: "Dealer Contribution Amount",
                 disabled: true,
                 variant: calculator_variant,
-                value: monthlySavings
+                value: dealerContributionAmount,
+                helperText: "Dealer reserve offset not included in this amount."
               }
             ) })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: `${row_form}`, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-            CurrencyInput,
-            {
-              id: "dealerContributionAmount",
-              sizes: "medium",
-              label: "Dealer Contribution Amount",
-              disabled: true,
-              variant: calculator_variant,
-              value: dealerContributionAmount,
-              helperText: "Dealer reserve offset not included in this amount."
-            }
-          ) }) })
+          ] })
         ]
       }
     ) }),

package/dist/Comparison/ComparisonSet.js

@@ -35,30 +35,39 @@ const ComparisonSet = ({
       bodyCopy,
       additionalDetails,
       isolate: true,
-      children: /* @__PURE__ */ jsxs("div", { className: clsx(comparison_container), children: [
-        /* @__PURE__ */ jsx(TabContainer, { className: comparison_tab_container, children: comparisonElements.map(({ headerTab, id: id2 }, index) => /* @__PURE__ */ jsx(
-          Tab,
-          {
-            id: `tab_${id2}_${index}`,
-            headline: `${headerTab}`,
-            onClick: () => {
-              toggleTab(index);
-            },
-            className: toggleState === index ? active_tab({ variant: getVariant(variant) }) : "",
-            variant
-          },
-          `tab_${id2}_${index}`
-        )) }),
-        comparisonElements.map((item, index) => /* @__PURE__ */ createElement(
-          Comparison,
-          {
-            ...item,
-            key: item.id,
-            index,
-            toggleState
-          }
-        ))
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(
+            comparison_container,
+            comparisonElements.length > 2 && "comparison_container--many_items"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(TabContainer, { className: comparison_tab_container, children: comparisonElements.map(({ headerTab, id: id2 }, index) => /* @__PURE__ */ jsx(
+              Tab,
+              {
+                id: `tab_${id2}_${index}`,
+                headline: `${headerTab}`,
+                onClick: () => {
+                  toggleTab(index);
+                },
+                className: toggleState === index ? active_tab({ variant: getVariant(variant) }) : "",
+                variant
+              },
+              `tab_${id2}_${index}`
+            )) }),
+            comparisonElements.map((item, index) => /* @__PURE__ */ createElement(
+              Comparison,
+              {
+                ...item,
+                key: item.id,
+                index,
+                toggleState
+              }
+            ))
+          ]
+        }
+      )
     }
   );
 };

package/dist/Forms/FormEnums.js

@@ -177,20 +177,8 @@ const Fico = [
   { value: "720-759", text: "720-759" },
   { value: "700-719", text: "700-719" }
 ];
-const BuydownRate = [
-  { value: 2.99, text: "2.99%" },
-  { value: 3.99, text: "3.99%" },
-  { value: 4.99, text: "4.99%" },
-  { value: 5.99, text: "5.99%" },
-  { value: 6.99, text: "6.99%" }
-];
-const BuydownTerm = [
-  { value: 1, text: "1 Year" },
-  { value: 2, text: "2 Years" },
-  { value: 3, text: "3 Years" },
-  { value: 4, text: "4 Years" },
-  { value: 5, text: "5 Years" }
-];
+const BuydownRate = [{ value: 3.74, text: "3.74%" }];
+const BuydownTerm = [{ value: 3, text: "3 Years" }];
 const LoanRates = /* @__PURE__ */ new Map([
   [
     "3/6 SOFR ARM",

package/dist/Input/Dropdown.js

@@ -32,6 +32,7 @@ const Dropdown = forwardRef(
           "select",
           {
             ...rest,
+            disabled,
             className: clsx(
               props.className,
               input({ size: sizes }),

package/dist/Table/Table.d.ts

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

package/dist/WalnutIframe/wrapper.module.js

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

package/dist/assets/Comparison/Comparison.css

@@ -103,7 +103,6 @@
   width: 100%;
   text-align: center;
   gap: 24px;
-  flex-wrap: wrap;
   align-items: center;
 }
 ._198o0lt0 ._1nivbwe1 {
@@ -112,6 +111,9 @@
 ._198o0lt0 ._1nivbwe5 {
   font-size: 20px;
 }
+.comparison_container--many_items ._198o0lte {
+  flex-direction: column;
+}
 @media screen and (max-width: 1023px) {
   ._198o0lt0 {
     border-radius: 0;

package/dist/assets/WalnutIframe/wrapper.css.css

@@ -1,49 +1,49 @@
-@keyframes _shimmer_1jpv7_1 {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-
-._wrapper_1jpv7_19 {
-  background: #1e3860;
-  border-radius: 8px;
-  height: 555px;
-  isolation: isolate;
-  margin-block: 48px;
-}
-
-section > ._wrapper_1jpv7_19:first-child {
-  margin-top: 0 !important;
-}
-
-._wrapper_1jpv7_19::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 190%;
-  height: 100%;
-  background: linear-gradient(
-    65deg,
-    rgba(255, 255, 255, 0) 20%,
-    rgba(255, 255, 255, 0.5) 50%,
-    rgba(255, 255, 255, 0) 80%
-  );
-  animation: _shimmer_1jpv7_1 1.3s infinite linear;
-  z-index: -1;
-}
-
-._wrapper_control_1jpv7_77 {
-  height: 100%;
-  width: 100%;
-  overflow-x: scroll;
-}
-
-@media (max-width: 1023px) {
-  ._wrapper_1jpv7_19 {
-    display: none;
-  }
-}
+@keyframes _shimmer_13j22_1 {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+._wrapper_13j22_10 {
+  background: #1e3860;
+  border-radius: 8px;
+  height: 555px;
+  isolation: isolate;
+  margin-block: 48px;
+}
+
+section > ._wrapper_13j22_10:first-child {
+  margin-top: 0 !important;
+}
+
+._wrapper_13j22_10::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 190%;
+  height: 100%;
+  background: linear-gradient(
+    65deg,
+    rgba(255, 255, 255, 0) 20%,
+    rgba(255, 255, 255, 0.5) 50%,
+    rgba(255, 255, 255, 0) 80%
+  );
+  animation: _shimmer_13j22_1 1.3s infinite linear;
+  z-index: -1;
+}
+
+._wrapper_control_13j22_39 {
+  height: 100%;
+  width: 100%;
+  overflow-x: scroll;
+}
+
+@media (max-width: 1023px) {
+  ._wrapper_13j22_10 {
+    display: none;
+  }
+}

package/package.json

@@ -1,133 +1,133 @@
-{
-  "name": "@axos-web-dev/shared-components",
-  "description": "Axos shared components library for web.",
-  "version": "1.0.100-feature-lvfformcontextdata",
-  "type": "module",
-  "module": "dist/main.js",
-  "types": "dist/main.d.ts",
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "dist/assets/**/*.css"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc --p ./tsconfig.build.json && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "prepublishOnly": "npm run build",
-    "check-types": "tsc --pretty --noEmit",
-    "check-format": "prettier --check .",
-    "check-lint": "eslint . --ext ts --ext tsx --ext js",
-    "format": "prettier --write .",
-    "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
-    "prepare": "husky",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "npm:link": "npm run build && npm link"
-  },
-  "dependencies": {
-    "@headlessui/react": "^2.2.0",
-    "@hookform/resolvers": "^3.10.0",
-    "@next-safe-action/adapter-react-hook-form": "^2.0.0",
-    "@react-input/mask": "^1.2.15",
-    "@react-input/number-format": "^1.1.3",
-    "@storybook/icons": "^1.3.0",
-    "@storybook/preview-api": "^8.4.7",
-    "@types/iframe-resizer": "3.5.13",
-    "@vanilla-extract/css": "^1.16.1",
-    "@vanilla-extract/recipes": "^0.5.1",
-    "antd": "^5.22.5",
-    "clsx": "^2.1.1",
-    "framer-motion": "^12.9.2",
-    "iframe-resizer": "^3.6.6",
-    "lodash": "^4.17.21",
-    "moment": "^2.30.1",
-    "next-safe-action": "^8.0.2",
-    "react-date-picker": "^11.0.0",
-    "react-date-range": "^2.0.1",
-    "react-hook-form": "^7.54.2",
-    "react-markdown": "^9.0.1",
-    "react-popper": "^2.3.0",
-    "react-slick": "^0.30.2",
-    "react-use": "^17.6.0",
-    "react-wrap-balancer": "^1.1.1",
-    "rsuite": "^5.75.0",
-    "slick-carousel": "^1.8.1",
-    "typed-css-modules": "^0.9.1",
-    "vite-plugin-svgr": "^4.3.0",
-    "zod": "^3.24.1",
-    "zustand": "^4.5.5"
-  },
-  "peerDependencies": {
-    "@vanilla-extract/css-utils": "^0.1.3",
-    "@vanilla-extract/recipes": "^0.5.1",
-    "@vanilla-extract/vite-plugin": "^4.0.3",
-    "next": "^14.1.4",
-    "react": "^18.2.0",
-    "react-date-range": "^2.0.1",
-    "react-dom": "^18.2.0",
-    "react-popper": "^2.3.0",
-    "react-slick": "^0.30.2",
-    "slick-carousel": "^1.8.1"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@rollup/plugin-alias": "^5.1.1",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-mdx-gfm": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
-    "@storybook/addon-themes": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.6.14",
-    "@svgr/core": "^8.1.0",
-    "@svgr/plugin-prettier": "^8.1.0",
-    "@svgr/plugin-svgo": "^8.1.0",
-    "@types/lodash": "^4.17.17",
-    "@types/node": "^20.19.0",
-    "@types/react": "^18.3.23",
-    "@types/react-date-range": "^1.4.9",
-    "@types/react-datepicker": "^6.2.0",
-    "@types/react-dom": "^18.3.7",
-    "@types/react-slick": "^0.23.13",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@vanilla-extract/css-utils": "^0.1.4",
-    "@vanilla-extract/recipes": "^0.5.5",
-    "@vanilla-extract/vite-plugin": "^4.0.18",
-    "@vitejs/plugin-react-swc": "^3.7.2",
-    "esbuild-vanilla-image-loader": "^0.1.3",
-    "eslint": "^8.57.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "^0.8.0",
-    "glob": "^10.4.5",
-    "husky": "^9.1.7",
-    "next": "^14.1.4",
-    "prettier": "3.2.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rollup-plugin-preserve-directives": "^0.4.0",
-    "rollup-plugin-svg-import": "^3.0.0",
-    "rollup-plugin-svgo": "^2.0.0",
-    "storybook": "^8.4.7",
-    "typescript": "^5.7.2",
-    "typescript-plugin-css-modules": "^5.1.0",
-    "vite": "^5.4.11",
-    "vite-plugin-dts": "^3.9.1",
-    "vite-plugin-lib-inject-css": "^2.1.1",
-    "vite-plugin-setting-css-module": "^1.1.4",
-    "vite-tsconfig-paths": "^4.3.2"
-  },
-  "main": "index.js",
-  "directories": {
-    "lib": "lib"
-  },
-  "author": "axos-web-dev",
-  "license": "ISC"
-}
+{
+  "name": "@axos-web-dev/shared-components",
+  "description": "Axos shared components library for web.",
+  "version": "1.0.100-feature-comparisonCTAs.1",
+  "type": "module",
+  "module": "dist/main.js",
+  "types": "dist/main.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "dist/assets/**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --p ./tsconfig.build.json && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build",
+    "check-types": "tsc --pretty --noEmit",
+    "check-format": "prettier --check .",
+    "check-lint": "eslint . --ext ts --ext tsx --ext js",
+    "format": "prettier --write .",
+    "test-all": "npm run check-format && npm run check-lint && npm run check-types && npm run build",
+    "prepare": "husky",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "npm:link": "npm run build && npm link"
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.0",
+    "@hookform/resolvers": "^3.10.0",
+    "@next-safe-action/adapter-react-hook-form": "^2.0.0",
+    "@react-input/mask": "^1.2.15",
+    "@react-input/number-format": "^1.1.3",
+    "@storybook/icons": "^1.3.0",
+    "@storybook/preview-api": "^8.4.7",
+    "@types/iframe-resizer": "3.5.13",
+    "@vanilla-extract/css": "^1.16.1",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "antd": "^5.22.5",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.9.2",
+    "iframe-resizer": "^3.6.6",
+    "lodash": "^4.17.21",
+    "moment": "^2.30.1",
+    "next-safe-action": "^8.0.2",
+    "react-date-picker": "^11.0.0",
+    "react-date-range": "^2.0.1",
+    "react-hook-form": "^7.54.2",
+    "react-markdown": "^9.0.1",
+    "react-popper": "^2.3.0",
+    "react-slick": "^0.30.2",
+    "react-use": "^17.6.0",
+    "react-wrap-balancer": "^1.1.1",
+    "rsuite": "^5.75.0",
+    "slick-carousel": "^1.8.1",
+    "typed-css-modules": "^0.9.1",
+    "vite-plugin-svgr": "^4.3.0",
+    "zod": "^3.24.1",
+    "zustand": "^4.5.5"
+  },
+  "peerDependencies": {
+    "@vanilla-extract/css-utils": "^0.1.3",
+    "@vanilla-extract/recipes": "^0.5.1",
+    "@vanilla-extract/vite-plugin": "^4.0.3",
+    "next": "^14.1.4",
+    "react": "^18.2.0",
+    "react-date-range": "^2.0.1",
+    "react-dom": "^18.2.0",
+    "react-popper": "^2.3.0",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@rollup/plugin-alias": "^5.1.1",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-mdx-gfm": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.6.14",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-prettier": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@types/lodash": "^4.17.17",
+    "@types/node": "^20.19.0",
+    "@types/react": "^18.3.23",
+    "@types/react-date-range": "^1.4.9",
+    "@types/react-datepicker": "^6.2.0",
+    "@types/react-dom": "^18.3.7",
+    "@types/react-slick": "^0.23.13",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/recipes": "^0.5.5",
+    "@vanilla-extract/vite-plugin": "^4.0.18",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "esbuild-vanilla-image-loader": "^0.1.3",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-storybook": "^0.8.0",
+    "glob": "^10.4.5",
+    "husky": "^9.1.7",
+    "next": "^14.1.4",
+    "prettier": "3.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "rollup-plugin-svg-import": "^3.0.0",
+    "rollup-plugin-svgo": "^2.0.0",
+    "storybook": "^8.4.7",
+    "typescript": "^5.7.2",
+    "typescript-plugin-css-modules": "^5.1.0",
+    "vite": "^5.4.11",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-setting-css-module": "^1.1.4",
+    "vite-tsconfig-paths": "^4.3.2"
+  },
+  "main": "index.js",
+  "directories": {
+    "lib": "lib"
+  },
+  "author": "axos-web-dev",
+  "license": "ISC"
+}