@axos-web-dev/shared-components 1.0.100-dev.10 → 1.0.100-dev.12

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

@@ -19,8 +19,11 @@ export type BuyDownCalculatorInputs = {
     fullTimeCharter: boolean;
     mooringOutsideContinentalUS: boolean;
     operatingAccount: boolean;
-    ltvAbove60: boolean;
     floorplanDealerIncentive: boolean;
     dealerCommercialDeposit: boolean;
+    vesselOver15Years: boolean;
+    highPerformanceBoats: boolean;
+    retailCheckingAccount: boolean;
+    electricMotorHybrid: boolean;
 };
 export declare const BuyDownCalculator: FC<BuyDownCalculatorProps>;

package/dist/Calculators/BuyDownCalculator/index.js

@@ -16,14 +16,14 @@ import "../../Input/InputAmount.js";
 import "../../Input/InputPhone.js";
 import "../../Input/InputTextArea.js";
 import "../../Input/DownPaymentInput.js";
-import { RadioButtonSet, RadioButton } from "../../Input/RadioButton.js";
+import "../../Input/RadioButton.js";
 import { PercentageInput } from "../../Input/PercentageInput.js";
 import "../../utils/allowedAxosDomains.js";
 import { getVariant } from "../../utils/getVariant.js";
 import clsx from "clsx";
 import { useForm, FormProvider } from "react-hook-form";
 import { z } from "zod";
-import { calc_container, calculator_section, section_header, theme_header, mt_8, buydown_calculator_form, row_form, limit_one, calculate_row, form_wrapper, form_disclosure } from "./BuyDownCalculator.css.js";
+import { calc_container, calculator_section, section_header, theme_header, mt_8, buydown_calculator_form, row_form, calculate_row, form_wrapper, form_disclosure } from "./BuyDownCalculator.css.js";
 const BuyDownCalculator = ({
   header,
   body,
@@ -45,12 +45,12 @@ const BuyDownCalculator = ({
   const [dealerContributionAmount, setDealerContributionAmount] = useState("");
   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 [ltvDiscountApplied, setLtvDiscountApplied] = useState(false);
   const schema = z.object({
     purchasePrice: z.string().min(1, { message: "Loan amount is required." }).transform((val) => {
       return formatToNumber(val);
@@ -111,7 +111,6 @@ const BuyDownCalculator = ({
     if (purchasePrice && downpayment) {
       const financedAmount2 = purchasePrice - downpayment;
       const range = getRange(financedAmount2);
-      const disableLTV = checkLTVStatus(downpayment, purchasePrice);
       if (financedAmount2 < 0) {
         ctx.addIssue({
           code: z.ZodIssueCode.custom,
@@ -123,11 +122,6 @@ const BuyDownCalculator = ({
           const loanRange2 = getRange(financedAmount2, program);
           setLoanRange(loanRange2);
         }
-        if (!disableLTV) {
-          setDisableLTVAbove60(false);
-        } else {
-          setDisableLTVAbove60(true);
-        }
       }
       if (updateFicoRequirements(range, program) === false) {
         ctx.addIssue({
@@ -166,7 +160,6 @@ const BuyDownCalculator = ({
     }
   }, [watchedFields]);
   const calculator_variant = getVariant(variant);
-  const enableDependentInputs = enableFullTimeCharter;
   const formatToNumber = (value) => {
     const cleanValue = value.replace(/[%$, ]/gi, "");
     return parseFloat(cleanValue);
@@ -189,7 +182,7 @@ const BuyDownCalculator = ({
     const percentage = downpayment / purchasePrice * 100;
     const loanToValue2 = 100 - percentage;
     if (loanToValue2 <= 60) return false;
-    else return true;
+    return true;
   };
   const getRange = (financedAmount2, program, forRates) => {
     let range = "";
@@ -358,23 +351,34 @@ const BuyDownCalculator = ({
     }
     return rate;
   };
-  const calculateAdjustments = () => {
+  const calculateAdjustments = (purchasePrice, downpayment) => {
     let total = 0;
     const checkboxes = document.querySelectorAll(
-      'input[type="checkbox"]:checked, input[type="radio"]:checked'
+      'input[type="checkbox"]:checked'
     );
     checkboxes.forEach((checkbox) => {
       total += parseFloat(checkbox.value);
     });
+    if (purchasePrice && downpayment && purchasePrice > 0 && downpayment >= 0) {
+      const ltvStatus = checkLTVStatus(downpayment, purchasePrice);
+      if (!ltvStatus) {
+        total += -0.35;
+        setLtvDiscountApplied(true);
+      } else {
+        setLtvDiscountApplied(false);
+      }
+    } else {
+      setLtvDiscountApplied(false);
+    }
     return total;
   };
-  const calculateRates = (program, fico, financedAmount2, buydownRate) => {
+  const calculateRates = (program, fico, financedAmount2, buydownRate, purchasePrice, downpayment) => {
     const minRate = 6.94;
     const loanRange2 = getRange(financedAmount2, program, true);
     const startingRate = parseFloat(
       getInterestRate(program, fico, loanRange2).replace(/[%,]/g, "")
     );
-    const rateAdjustments = calculateAdjustments();
+    const rateAdjustments = calculateAdjustments(purchasePrice, downpayment);
     const adjustedRate = startingRate + rateAdjustments;
     const finalNoteRateValue = Math.max(minRate, adjustedRate);
     const finalNoteRate2 = formatToPercentage(finalNoteRateValue);
@@ -469,13 +473,19 @@ const BuyDownCalculator = ({
     setManuContributionPercentage(percentage);
     return manufacturerContribution;
   };
-  const calculateDealerContributionAmount = (dealerContribution, totalBuydownCost2) => {
-    const dealerContributionValue = totalBuydownCost2 * (dealerContribution / 100);
+  const calculateDealerContributionAmount = (dealerContribution, manufacturerContributionAmount, totalBuydownCost2) => {
+    let dealerContributionValue;
+    if (dealerContribution > 0) {
+      dealerContributionValue = totalBuydownCost2 * (dealerContribution / 100);
+    } else {
+      dealerContributionValue = totalBuydownCost2 - manufacturerContributionAmount;
+    }
     const formattedAmount = formatToCurrency(dealerContributionValue);
     setDealerContributionAmount(formattedAmount);
   };
   const onSubmit = (data) => {
     if (isValid) {
+      setLtvDiscountApplied(false);
       const {
         buydownRate,
         buydownTerm,
@@ -495,7 +505,9 @@ const BuyDownCalculator = ({
         program,
         fico,
         financedAmountValue,
-        buydownRate
+        buydownRate,
+        purchasePrice,
+        downpayment
       );
       const buydownPayment2 = calculateBuydownPayment(
         buydownRate,
@@ -517,7 +529,11 @@ const BuyDownCalculator = ({
         manufacturerContributionAmount,
         totalBuydownCost2
       );
-      calculateDealerContributionAmount(dealerContribution, totalBuydownCost2);
+      calculateDealerContributionAmount(
+        dealerContribution,
+        manufacturerContributionAmount,
+        totalBuydownCost2
+      );
     }
   };
   return /* @__PURE__ */ jsxs("section", { className: `${calc_container({ variant: calculator_variant })}`, children: [
@@ -689,7 +705,7 @@ const BuyDownCalculator = ({
                   required: true,
                   deps: ["program"]
                 }),
-                label: "Buydown Term (1-5 Years)",
+                label: "Buydown Term",
                 sizes: "medium",
                 required: true,
                 error: !!errors.buydownTerm,
@@ -700,56 +716,57 @@ const BuyDownCalculator = ({
                 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__ */ jsx("div", { className: `${row_form}`, children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("label", { children: "Loan Level Rate Adjustments. Rate Adjustments are subject to change, are limited, and restricted by floor rate." }) }) }),
             /* @__PURE__ */ jsxs("div", { className: `${row_form}`, children: [
-              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: row_form, children: /* @__PURE__ */ jsxs(
-                RadioButtonSet,
-                {
-                  id: "dependentInputs",
-                  label: "Limit One",
-                  sizes: "medium",
-                  variant,
-                  direction: "column",
-                  disabled: !enableDependentInputs,
-                  className: limit_one,
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      RadioButton,
-                      {
-                        id: "mooringOutsideContinentalUS",
-                        ...register("mooringOutsideContinentalUS"),
-                        value: 0.5,
-                        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
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      RadioButton,
-                      {
-                        id: "operatingAccount",
-                        ...register("operatingAccount"),
-                        value: -0.25,
-                        radioText: "Open and fund an LLC Operating Account with Axos - 0.25",
-                        groupName: "dependentInputs"
-                      }
-                    )
-                  ]
-                }
-              ) }) }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("div", { className: row_form, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: "mooringOutsideContinentalUS",
+                    ...register("mooringOutsideContinentalUS"),
+                    sizes: "medium",
+                    variant: calculator_variant,
+                    value: 0.5,
+                    disabled: !enableFullTimeCharter || disableMooringOutside,
+                    children: "Mooring Outside Continental U.S. (Includes Puerto Rico, Hawaii, and Alaska) (Does not apply to Full Time Charter) +0.500"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: "operatingAccount",
+                    ...register("operatingAccount"),
+                    sizes: "medium",
+                    variant: calculator_variant,
+                    value: -0.25,
+                    disabled: !enableFullTimeCharter,
+                    children: "Open and fund an LLC Operating Account with Axos - 0.25"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
                   Checkbox,
                   {
-                    id: "ltvAbove60",
-                    ...register("ltvAbove60"),
+                    id: "vesselOver15Years",
+                    ...register("vesselOver15Years"),
                     sizes: "medium",
-                    variant,
-                    value: -0.35,
-                    disabled: disableLTVAbove60,
-                    children: "LTV ≤ 60% (If not required by program) -0.350"
+                    variant: calculator_variant,
+                    value: 1.25,
+                    children: "Vessel > 15 Years +1.250"
                   }
                 ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: "highPerformanceBoats",
+                    ...register("highPerformanceBoats"),
+                    sizes: "medium",
+                    variant: calculator_variant,
+                    value: 0.5,
+                    children: "High Performance Boats (>4 Engines) +0.500"
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
                   Checkbox,
                   {
@@ -758,7 +775,29 @@ const BuyDownCalculator = ({
                     sizes: "medium",
                     variant: calculator_variant,
                     value: -0.125,
-                    children: "Floorplan dealer incentive -0.125"
+                    children: "Floor Plan Dealer Incentive -0.125"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: "retailCheckingAccount",
+                    ...register("retailCheckingAccount"),
+                    sizes: "medium",
+                    variant: calculator_variant,
+                    value: -0.125,
+                    children: "Retail Checking Account w/ACH and Minimum of 3 Months P&I Balance -0.125"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    id: "electricMotorHybrid",
+                    ...register("electricMotorHybrid"),
+                    sizes: "medium",
+                    variant: calculator_variant,
+                    value: -0.25,
+                    children: "100% Electric Motor / Hybrid -0.250"
                   }
                 ) }),
                 /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
@@ -853,7 +892,8 @@ const BuyDownCalculator = ({
                 label: "Final Note Rate",
                 disabled: true,
                 variant: calculator_variant,
-                value: finalNoteRate
+                value: finalNoteRate,
+                helperText: ltvDiscountApplied && "LTV discount applied"
               }
             ) })
           ] }),
@@ -874,7 +914,7 @@ const BuyDownCalculator = ({
               {
                 id: "buydownPayment",
                 sizes: "medium",
-                label: "Buydown Payment",
+                label: "Monthly payment WITH buydown",
                 disabled: true,
                 variant: calculator_variant,
                 value: buydownPayment
@@ -887,7 +927,7 @@ const BuyDownCalculator = ({
               {
                 id: "nonBuydownPayment",
                 sizes: "medium",
-                label: "Non-buydown Payment",
+                label: "Monthly Payment WITHOUT buydown",
                 disabled: true,
                 variant: calculator_variant,
                 value: nonBuydownPayment

package/dist/Chatbot/useHeadlessChat.d.ts

@@ -8,7 +8,6 @@ interface UseHeadlessChatOptions {
     channelId?: string;
     projectId?: "axos" | "" | "ufb" | string;
     debug?: boolean;
-    menuOption?: string;
 }
 export interface ChatMessage {
     id: string;
@@ -16,7 +15,7 @@ export interface ChatMessage {
     sender?: string;
     timestamp?: string;
 }
-export declare function useHeadlessChat({ companyId, tenant, host, getToken, projectId, debug, menuOption, }: UseHeadlessChatOptions): {
+export declare function useHeadlessChat({ companyId, tenant, host, getToken, projectId, debug, }: UseHeadlessChatOptions): {
     status: "error" | "idle" | "connected" | "connecting" | "finished";
     sendMessage: (body: string) => Promise<void>;
     showReconnect: boolean;

package/dist/Chatbot/useHeadlessChat.js

@@ -12,8 +12,7 @@ function useHeadlessChat({
   host,
   getToken,
   projectId = "axos",
-  debug = false,
-  menuOption = "Support Virtual Agent"
+  debug = false
 }) {
   const addMessage = useMessages((state) => state.addMessage);
   const addMessages = useMessages((state) => state.addMessages);
@@ -34,11 +33,9 @@ function useHeadlessChat({
     if (chatRef.current) {
       await clientRef.current?.finishChat();
       clearMessages();
-      clientRef.current?.createChat(
-        menuRef.current.menus.find((menu) => menu.name === menuOption)?.id
-      );
+      clientRef.current?.createChat(menuRef.current.menus[5].id);
     }
-  }, [clearMessages, menuOption]);
+  }, [clearMessages]);
   useEffect(() => {
     let messageHandler;
     let chatReadyHandler;
@@ -69,11 +66,7 @@ function useHeadlessChat({
       }
       menuRef.current = await clientRef.current?.getMenus();
       if (debug) console.log("channelId:", menuRef.current);
-      if (debug)
-        console.log(
-          "channelId:",
-          menuRef.current?.menus.find((menu) => menu.name === menuOption)?.id
-        );
+      if (debug) console.log("channelId:", menuRef.current?.menus[5].id);
       try {
         chatRef.current = await clientRef.current?.loadOngoingChat();
         if (chatRef.current != null) {
@@ -87,19 +80,11 @@ function useHeadlessChat({
               facingBrandId: {
                 label: "facingBrandId",
                 value: brandMap.get(projectId) || 1
-              },
-              channel: {
-                label: "channel",
-                value: "in_web"
-              },
-              user_auth: {
-                label: "user_auth",
-                value: false
               }
             }
           };
           chatRef.current = await clientRef.current?.createChat(
-            menuRef.current.menus.find((menu) => menu.name === menuOption)?.id,
+            menuRef.current.menus[5].id,
             {
               custom_data
             }
@@ -194,8 +179,7 @@ function useHeadlessChat({
     addMessage,
     addMessages,
     debug,
-    projectId,
-    menuOption
+    projectId
   ]);
   return {
     status,

package/dist/FooterSiteMap/AxosBank/FooterSiteMap.js

@@ -431,7 +431,15 @@ const AxosFooterSiteMap = ({
       /* @__PURE__ */ jsxs("div", { className: ft_col, children: [
         /* @__PURE__ */ jsx("h2", { className: ft_col_header, children: /* @__PURE__ */ jsx("a", { href: findMoreAxosDomains("{AXOSBANK}/partners"), children: "Partners" }) }),
         /* @__PURE__ */ jsxs("ul", { children: [
-          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: "https://lavictoirefinance.com/dealers", children: "Marine Dealer Floorplan Finance" }) }),
+          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: findMoreAxosDomains(
+                "{AXOSBANK}/pages/axos-capital-solutions"
+              ),
+              children: "Marine Dealer Floorplan Finance"
+            }
+          ) }),
           /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
             "a",
             {
@@ -877,7 +885,15 @@ const AxosFooterSiteMap = ({
             )
           ] }),
           /* @__PURE__ */ jsxs("ul", { children: [
-            /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: "https://lavictoirefinance.com/dealers", children: "Marine Dealer Floorplan Finance" }) }),
+            /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: findMoreAxosDomains(
+                  "{AXOSBANK}/pages/axos-capital-solutions"
+                ),
+                children: "Marine Dealer Floorplan Finance"
+              }
+            ) }),
             /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
               "a",
               {

package/dist/NavigationMenu/AxosBank/MobileMenu/MobileNavData.js

@@ -529,7 +529,9 @@ const menuData = {
         "Leveraged Finance": findMoreAxosDomains(
           "{AXOSBANK}/commercial/lending/leveraged-finance"
         ),
-        "Marine Dealer Floorplan Finance": "https://lavictoirefinance.com/dealers",
+        "Marine Dealer Floorplan Finance": findMoreAxosDomains(
+          "{AXOSBANK}/pages/axos-capital-solutions"
+        ),
         "Premium Finance": findMoreAxosDomains(
           "{AXOSBANK}/commercial/lending/premium-finance"
         )
@@ -545,7 +547,9 @@ const menuData = {
   },
   Partners: {
     "Partners Home": findMoreAxosDomains("{AXOSBANK}/partners"),
-    "Marine Dealer Floorplan Finance": "https://lavictoirefinance.com/dealers",
+    "Marine Dealer Floorplan Finance": findMoreAxosDomains(
+      "{AXOSBANK}/pages/axos-capital-solutions"
+    ),
     "Wholesale Lending": {
       "Wholesale & Correspondent Lending": {
         "WCPL Home": findMoreAxosDomains(

package/dist/NavigationMenu/AxosBank/SubNavBar.js

@@ -557,9 +557,11 @@ function SubNavBar() {
             children: /* @__PURE__ */ jsx(
               Link,
               {
-                href: `https://lavictoirefinance.com/dealers`,
+                href: findMoreAxosDomains(
+                  "{AXOSBANK}/pages/axos-capital-solutions"
+                ),
                 id: "partNav1",
-                "aria-label": "Press Enter to navigate to the LaVictoire Finance website (www.lavictoirefinance.com). Owned and operated by Axos Bank.",
+                "aria-label": "Press Enter to navigate to the axos capital solutions website. Owned and operated by Axos Bank.",
                 children: "Marine Dealer Floorplan Finance"
               }
             )
@@ -3004,7 +3006,9 @@ function SubNavBar() {
                         /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
                           Link,
                           {
-                            href: `https://lavictoirefinance.com/dealers`,
+                            href: findMoreAxosDomains(
+                              "{AXOSBANK}/pages/axos-capital-solutions"
+                            ),
                             children: "Marine Dealer Floorplan Finance"
                           }
                         ) }),

package/dist/NavigationMenu/AxosBank/index.js

@@ -539,6 +539,13 @@ function NavBar({
                                 className: `${styles.signin_subheader} ${signin_subheader}`,
                                 children: /* @__PURE__ */ jsx("a", { href: findMoreAxosDomains("{ARMS}"), children: "Advisor Login" })
                               }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "li",
+                              {
+                                className: `${styles.signin_subheader} ${signin_subheader}`,
+                                children: /* @__PURE__ */ jsx("a", { href: "https://lv.accesscompass.com/web/control", children: "Marine Dealer Finance" })
+                              }
                             )
                           ] })
                         ] }),

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" | "hint" | undefined;
+    popover?: "" | "auto" | "manual" | 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_13j22_10";
-const shimmer = "_shimmer_13j22_1";
-const wrapper_control = "_wrapper_control_13j22_39";
+import '../assets/WalnutIframe/wrapper.css.css';const wrapper = "_wrapper_1jpv7_19";
+const shimmer = "_shimmer_1jpv7_1";
+const wrapper_control = "_wrapper_control_1jpv7_77";
 const css = {
   wrapper,
   shimmer,

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

@@ -1,49 +1,49 @@
-@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;
-  }
-}
+@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;
+  }
+}

package/package.json

@@ -1,136 +1,136 @@
-{
-  "name": "@axos-web-dev/shared-components",
-  "description": "Axos shared components library for web.",
-  "version": "1.0.100-dev.10",
-  "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",
-    "@ts-stack/markdown": "^1.5.0",
-    "@types/iframe-resizer": "3.5.13",
-    "@ujet/websdk-headless": "^3.41.4",
-    "@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.1.0",
-    "react-popper": "^2.3.0",
-    "react-slick": "^0.30.2",
-    "react-use": "^17.6.0",
-    "react-wrap-balancer": "^1.1.1",
-    "remark-gfm": "^4.0.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-dev.12",
+  "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",
+    "@ts-stack/markdown": "^1.5.0",
+    "@types/iframe-resizer": "3.5.13",
+    "@ujet/websdk-headless": "^3.41.4",
+    "@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.1.0",
+    "react-popper": "^2.3.0",
+    "react-slick": "^0.30.2",
+    "react-use": "^17.6.0",
+    "react-wrap-balancer": "^1.1.1",
+    "remark-gfm": "^4.0.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"
+}