@axos-web-dev/shared-components 2.0.0-dev.enableCTA2 → 2.0.0-dev.insights.11

package/dist/Forms/MortgageRate/MortgageRateWatch.js

@@ -80,10 +80,10 @@ import "../../Auth/SignInPassword.js";
 /* empty css                                                       */
 import "../../Carousel/index.js";
 /* empty css                                                      */
-import "../../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                      */
 import "../../Chatbot/store/chat.js";
 import "../../Chatbot/Chatbot.js";
+import "../../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                          */
 import "../../Chatbot/store/messages.js";
 /* empty css                                                                       */
@@ -140,34 +140,12 @@ const RateWatchForm = ({
   toggleModal,
   setRateWatchSubmitted
 }) => {
-  const desiredRateFields = [
-    "tR1DesiredRate",
-    "tR2DesiredRate",
-    "tR3DesiredRate"
-  ];
-  const sanitizeDesiredRate = (value) => {
-    if (!value) return "";
-    const normalizedValue = value.replace(/[^\d.]/g, "");
-    if (!normalizedValue || normalizedValue === ".") return "";
-    const [wholePart, decimalPart = ""] = normalizedValue.split(".");
-    const trimmedDecimal = decimalPart.slice(0, 4);
-    const formattedValue = trimmedDecimal ? `${wholePart || "0"}.${trimmedDecimal}` : wholePart || "0";
-    const numericValue = Number(formattedValue);
-    if (!Number.isFinite(numericValue)) return "";
-    return Number.isInteger(numericValue) ? String(numericValue) : numericValue.toFixed(4).replace(/\.0+$|(?<=\.\d*)(0+)$/, "").replace(/\.$/, "");
-  };
-  const isDesiredRateOutOfRange = (value) => {
-    if (!value) return false;
-    const numericValue = Number(value);
-    if (!Number.isFinite(numericValue)) return false;
-    return numericValue < 2 || numericValue > 10;
-  };
   const [updateType, setUpdateType] = useState(
     "Target Rate"
   );
   const schema = z.object({
     updateType: z.string().min(1, { message: "Update type is required." }),
-    updateCadence: z.string().optional().refine((val) => !(updateType === "Frequency" && !val), {
+    updateCadence: z.string().refine((val) => !(updateType === "Frequency" && !val), {
       message: "Frequency is required."
     }),
     loanTerms: z.string().optional().refine((val) => !(updateType === "Frequency" && !val), {
@@ -176,13 +154,11 @@ const RateWatchForm = ({
     hasSmsConsent: z.boolean().refine((val) => val === true, {
       message: "You must agree to receive SMS messages."
     }),
-    tR1DesiredRate: z.string().optional().refine((val) => updateType === "Target Rate" ? !!val : true, {
-      message: "Desired Rate is required."
-    }).refine(
+    tR1DesiredRate: z.string().optional().refine(
       (val) => {
         if (val && updateType === "Target Rate") {
           const numericValue = +val;
-          return numericValue >= 2 && numericValue <= 10;
+          return !val || numericValue >= 2 && numericValue <= 10;
         }
         return true;
       },
@@ -221,21 +197,15 @@ const RateWatchForm = ({
     email: z.string()
   });
   const methods = useForm({
-    resolver: zodResolver(schema),
-    mode: "onChange"
+    resolver: zodResolver(schema)
   });
   const {
     handleSubmit,
     register,
     formState: { errors, isSubmitting, isValid },
     setValue,
-    clearErrors,
-    watch
+    clearErrors
   } = methods;
-  const watchedDesiredRates = watch(desiredRateFields);
-  const hasDesiredRateWarning = desiredRateFields.some(
-    (_, index) => isDesiredRateOutOfRange(watchedDesiredRates[index])
-  );
   const submitForm = async (data) => {
     const processedData = {
       ...data,
@@ -274,22 +244,12 @@ const RateWatchForm = ({
   const handleTypeChange = (event) => {
     const value = event.target.value;
     setUpdateType(value);
-    methods.setValue("updateType", value, { shouldValidate: true });
-  };
-  const handleDesiredRateChange = (fieldName) => (event) => {
-    const sanitizedValue = sanitizeDesiredRate(event.target.value);
-    event.target.value = sanitizedValue;
-    setValue(fieldName, sanitizedValue, {
-      shouldValidate: true,
-      shouldDirty: true,
-      shouldTouch: true
-    });
   };
   const handleSubmitClick = () => {
     handleSubmit(submitForm)();
   };
   useEffect(() => {
-    methods.reset({ updateType });
+    methods.reset();
   }, [updateType]);
   return /* @__PURE__ */ jsx("section", { className: "rate-watch-form", children: /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(
     SuccesFormWrapper,
@@ -367,7 +327,7 @@ const RateWatchForm = ({
           /* @__PURE__ */ jsx("p", { className: mt1Rem, children: "You can establish up to three different targets with one rate watch." }),
           /* @__PURE__ */ jsxs("div", { className: threeColRow, children: [
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("label", { className: resposiveLabel, children: "Select a Loan Type" }),
+              /* @__PURE__ */ jsx("label", { className: resposiveLabel, children: "Select a Loan Type*" }),
               /* @__PURE__ */ jsxs(
                 Dropdown,
                 {
@@ -386,24 +346,18 @@ const RateWatchForm = ({
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("label", { className: resposiveLabel, children: [
-                "Desired Rate",
-                /* @__PURE__ */ jsx("sup", { children: "*" })
-              ] }),
+              /* @__PURE__ */ jsx("label", { className: resposiveLabel, children: "Desired Rate" }),
               /* @__PURE__ */ jsx(
                 Input,
                 {
                   className: dynPH,
                   ...register("tR1DesiredRate", {
-                    setValueAs: (value) => sanitizeDesiredRate(String(value ?? ""))
+                    setValueAs: (value) => value ? `${value}` : ""
                   }),
-                  onChange: handleDesiredRateChange("tR1DesiredRate"),
                   type: "number",
-                  min: "2",
-                  max: "10",
                   placeholder: "Desired Rate",
                   error: !!errors.tR1DesiredRate,
-                  helperText: isDesiredRateOutOfRange(watch("tR1DesiredRate")) ? "Desired Rate must be between 2 and 10." : errors.tR1DesiredRate?.message
+                  helperText: errors.tR1DesiredRate?.message
                 }
               )
             ] }),
@@ -454,16 +408,9 @@ const RateWatchForm = ({
               Input,
               {
                 className: dynPH,
-                ...register("tR2DesiredRate", {
-                  setValueAs: (value) => sanitizeDesiredRate(String(value ?? ""))
-                }),
-                onChange: handleDesiredRateChange("tR2DesiredRate"),
-                type: "number",
-                min: "2",
-                max: "10",
-                placeholder: "Desired Rate",
-                error: isDesiredRateOutOfRange(watch("tR2DesiredRate")),
-                helperText: isDesiredRateOutOfRange(watch("tR2DesiredRate")) ? "Desired Rate must be between 2 and 10." : errors.tR2DesiredRate?.message
+                ...register("tR2DesiredRate"),
+                type: "string",
+                placeholder: "Desired Rate"
               }
             ) }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
@@ -509,17 +456,10 @@ const RateWatchForm = ({
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               Input,
               {
-                ...register("tR3DesiredRate", {
-                  setValueAs: (value) => sanitizeDesiredRate(String(value ?? ""))
-                }),
-                onChange: handleDesiredRateChange("tR3DesiredRate"),
-                type: "number",
-                min: "2",
-                max: "10",
+                ...register("tR3DesiredRate"),
+                type: "string",
                 placeholder: "Desired Rate",
-                className: dynPH,
-                error: isDesiredRateOutOfRange(watch("tR3DesiredRate")),
-                helperText: isDesiredRateOutOfRange(watch("tR3DesiredRate")) ? "Desired Rate must be between 2 and 10." : errors.tR3DesiredRate?.message
+                className: dynPH
               }
             ) }),
             /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
@@ -544,20 +484,7 @@ const RateWatchForm = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxs(
-            "p",
-            {
-              className: mt1Rem,
-              style: {
-                color: hasDesiredRateWarning ? "#d92d20" : void 0,
-                fontWeight: hasDesiredRateWarning ? 600 : void 0
-              },
-              children: [
-                /* @__PURE__ */ jsx("sup", { children: "*" }),
-                " Please enter a desired rate between 2% and 10%"
-              ]
-            }
-          )
+          /* @__PURE__ */ jsx("p", { className: mt1Rem, children: "*The number in Desired Rate must be at least 2% and no more than 10%" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: modalCheckboxContainer, children: [
           /* @__PURE__ */ jsx(

package/dist/Forms/MortgageWarehouseLending.js

@@ -83,10 +83,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Forms/SuccesForm.js

@@ -66,10 +66,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 import "../LoadingIndicator/LoadingIndicator.css.js";
 import "react-use";
 /* empty css                                       */

package/dist/Forms/index.d.ts

@@ -39,4 +39,3 @@ export * from './SuccesForm';
 export * from './VendorQuestionnaire';
 export * from './WcplSurvey';
 export * from './BoatMooringLocation';
-export * from './NonQMLoans';

package/dist/Forms/index.js

@@ -45,7 +45,6 @@ import { SuccesFormWrapper } from "./SuccesForm.js";
 import { VendorQuestionnaire } from "./VendorQuestionnaire.js";
 import { WCPLSurvey } from "./WcplSurvey.js";
 import { BoatMooringLocation } from "./BoatMooringLocation.js";
-import { NonQMLoans } from "./NonQMLoans.js";
 import { honeyPotFieldsSchema, honeyPotSchema, isValidHoneyPot } from "./HoneyPot/honeyPotValidation.js";
 export {
   ApplicationStart,
@@ -77,7 +76,6 @@ export {
   MortgageRate,
   MortgageRateFilters,
   MortgageWarehouseLending,
-  NonQMLoans,
   QuickPricer,
   RateWatchForm,
   SalesforceFieldsForm,

package/dist/Hyperlink/index.js

@@ -77,10 +77,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/ImageLink/ImageLink.js

@@ -72,10 +72,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/ImageLink/ImageLinkSet.js

@@ -77,10 +77,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/ImageLink/index.js

@@ -75,10 +75,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/ImageToast/index.js

@@ -79,10 +79,10 @@ import "../Auth/SignInPassword.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                   */
-import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                   */
 import "../Chatbot/store/chat.js";
 import "../Chatbot/Chatbot.js";
+import "../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                       */
 import "../Chatbot/store/messages.js";
 /* empty css                                                                    */

package/dist/Input/DownPaymentInput.js

@@ -17,7 +17,6 @@ const DownPaymentInput = forwardRef(
     disabled,
     helperText: helper,
     error = false,
-    defaultValue,
     ...rest
   }, ref) => {
     const [downPayment, setDownPayment] = useState(0);

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

@@ -1,10 +1,12 @@
 export declare const selector_section: string;
 export declare const selector_link: string;
-export declare const selector_link_mobile: string;
 export declare const selector_title_link: string;
 export declare const selector_more: string;
 export declare const selector_grid_items: string;
+export declare const selector_grid_stacked: string;
 export declare const selector_small_item: string;
-export declare const selector_title: string;
-export declare const selector_grid_content: string;
 export declare const selector_img: string;
+export declare const img_fit: string;
+export declare const selector_grid_content: string;
+export declare const selector_title: string;
+export declare const selector_link_mobile: string;

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

@@ -7,17 +7,21 @@ import '../../assets/Insight/Featured/CategorySelector.css';import '../../assets
 /* empty css                                    */
 var selector_section = "_13y9ptj0";
 var selector_link = "_13y9ptj1";
-var selector_link_mobile = "_13y9ptj2 _13y9ptj1";
-var selector_title_link = "_13y9ptj3";
-var selector_more = "_13y9ptj4";
-var selector_grid_items = "_13y9ptj5";
-var selector_small_item = "_13y9ptj6 _1sr2o6v9";
-var selector_title = "_13y9ptj7";
-var selector_grid_content = "_13y9ptj8";
-var selector_img = "_13y9ptj9";
+var selector_title_link = "_13y9ptj2";
+var selector_more = "_13y9ptj3";
+var selector_grid_items = "_13y9ptj4";
+var selector_grid_stacked = "_13y9ptj5";
+var selector_small_item = "_13y9ptj6 _1sr2o6v5";
+var selector_img = "_13y9ptj7";
+var img_fit = "_13y9ptj8";
+var selector_grid_content = "_13y9ptj9";
+var selector_title = "_13y9ptja";
+var selector_link_mobile = "_13y9ptjb _13y9ptj1";
 export {
+  img_fit,
   selector_grid_content,
   selector_grid_items,
+  selector_grid_stacked,
   selector_img,
   selector_link,
   selector_link_mobile,

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

@@ -10,6 +10,7 @@ export interface CategorySelectorProps extends PropsWithChildren {
     insights?: FeaturedItemProps[];
     hideLink?: boolean;
     hideMore?: boolean;
+    stackOnMobile?: boolean;
 }
 export declare const CategorySelector: (props: CategorySelectorProps) => import("react").JSX.Element;
 export declare const InsightItem: (props: FeaturedItemProps) => import("react").JSX.Element;

package/dist/Insight/Featured/CategorySelector.js

@@ -6,7 +6,7 @@ import { title } from "../../IconBillboard/IconBillboard.css.js";
 import "../../icons/ArrowIcon/ArrowIcon.css.js";
 import "../../icons/CheckIcon/CheckIcon.css.js";
 import ClockIcon from "../../icons/Clock/index.js";
-import '../../assets/Modal/Modal.css';import '../../assets/VideoWrapper/VideoWrapper.css';import '../../assets/TopicalNavSet/TopicalNavSet.css';import '../../assets/TopicalNavItem/TopicalNavItem.css';import '../../assets/Topic/Topic.css';import '../../assets/TextBlock/TextBlock.css';import '../../assets/SocialMediaBar/SocialMediaBar.css';import '../../assets/SecondaryFooter/SecondaryFooter.css';import '../../assets/Pagination/Pagination.css';import '../../assets/PageNavSet/PageNavigationSet.css';import '../../assets/NavigationMenu/LaVictoire/NavBar2.css';import '../../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../../assets/NavigationMenu/ServerNavigation/NavigationBar.css';import '../../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../../assets/NavigationMenu/AxosAdvisor/NavBar2.css';import '../../assets/NavigationMenu/AxosBank/NavBar2.css';import '../../assets/Insight/Featured/Header.css';import '../../assets/ImageLink/ImageLink.css';import '../../assets/VideoTile/VideoTile.css';import '../../assets/HelpArticle/HelpArticle.css';import '../../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../../assets/DownloadTile/DownloadTile.css';import '../../assets/CollectInformationAlert/CollectInformationAlert.css';import '../../assets/Chatbot/ChatWindow.css';import '../../assets/Chatbot/Bubble.css';import '../../assets/Chatbot/AnimatedGradientBorder.css';import '../../assets/CallToActionBar/CallToActionBar.css';import '../../assets/Insight/Insight.css';import '../../assets/AwardsItem/AwardsItem.css';import '../../assets/AwardsBanner/AwardsBanner.css';import '../../assets/Auth/SignIn.css';import '../../assets/Auth/ErrorAlert.css';import '../../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../../assets/Forms/QuickPricer/UserInformation.css';import '../../assets/Forms/QuickPricer/QuickPricerResults.css';import '../../assets/Forms/HoneyPot/HoneyPot.css';import '../../assets/ImageToast/ImageToast.css';import '../../assets/BulletItem/BulletItem.css';import '../../assets/Typography/Typography.css';import '../../assets/icons/FollowIcon/FollowIcon.css';import '../../assets/icons/DownloadIcon/DownloadIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
+import '../../assets/Modal/Modal.css';import '../../assets/VideoWrapper/VideoWrapper.css';import '../../assets/TopicalNavSet/TopicalNavSet.css';import '../../assets/TopicalNavItem/TopicalNavItem.css';import '../../assets/Topic/Topic.css';import '../../assets/TextBlock/TextBlock.css';import '../../assets/SocialMediaBar/SocialMediaBar.css';import '../../assets/SecondaryFooter/SecondaryFooter.css';import '../../assets/Pagination/Pagination.css';import '../../assets/PageNavSet/PageNavigationSet.css';import '../../assets/NavigationMenu/LaVictoire/NavBar2.css';import '../../assets/NavigationMenu/AxosALTS/NavBar2.css';import '../../assets/NavigationMenu/AxosClearing/NavBar2.css';import '../../assets/NavigationMenu/AxosBank/SubNavbar.css';import '../../assets/NavigationMenu/ServerNavigation/NavigationBar.css';import '../../assets/NavigationMenu/AxosAdvisorServices/SubNavbar.css';import '../../assets/NavigationMenu/AxosAdvisorServices/NavBar2.css';import '../../assets/NavigationMenu/AxosAdvisor/SubNavbar.css';import '../../assets/NavigationMenu/AxosAdvisor/NavBar2.css';import '../../assets/NavigationMenu/AxosBank/NavBar2.css';import '../../assets/ImageLink/ImageLink.css';import '../../assets/VideoTile/VideoTile.css';import '../../assets/HelpArticle/HelpArticle.css';import '../../assets/FooterSiteMap/AxosBank/FooterSiteMap.css';import '../../assets/FooterDisclosure/LVF/LaVictorieFooter.css';import '../../assets/DownloadTile/DownloadTile.css';import '../../assets/CollectInformationAlert/CollectInformationAlert.css';import '../../assets/Chatbot/ChatWindow.css';import '../../assets/Chatbot/Bubble.css';import '../../assets/Chatbot/AnimatedGradientBorder.css';import '../../assets/CallToActionBar/CallToActionBar.css';import '../../assets/Insight/Insight.css';import '../../assets/AwardsItem/AwardsItem.css';import '../../assets/AwardsBanner/AwardsBanner.css';import '../../assets/Auth/SignIn.css';import '../../assets/Auth/ErrorAlert.css';import '../../assets/Calculators/MarginTradingCalculator/MarginTradingCalculator.css';import '../../assets/Forms/QuickPricer/UserInformation.css';import '../../assets/Forms/QuickPricer/QuickPricerResults.css';import '../../assets/Forms/HoneyPot/HoneyPot.css';import '../../assets/ImageToast/ImageToast.css';import '../../assets/BulletItem/BulletItem.css';import '../../assets/Typography/Typography.css';import '../../assets/icons/FollowIcon/FollowIcon.css';import '../../assets/icons/DownloadIcon/DownloadIcon.css';import '../../assets/themes/victorie.css';import '../../assets/themes/ufb.css';import '../../assets/themes/premier.css';import '../../assets/themes/axos.css';/* empty css                                   */
 /* empty css                                      */
 /* empty css                                  */
 /* empty css                                       */
@@ -79,10 +79,10 @@ import "../../Auth/SignInPassword.js";
 /* empty css                                                       */
 import "../../Carousel/index.js";
 /* empty css                                                      */
-import "../../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                      */
 import "../../Chatbot/store/chat.js";
 import "../../Chatbot/Chatbot.js";
+import "../../Chatbot/Chatbot.css.ts.vanilla.css.js";
 /* empty css                                          */
 import "../../Chatbot/store/messages.js";
 /* empty css                                                                       */
@@ -101,8 +101,8 @@ import "../../ImageBillboard/ImageBillboard.css.js";
 import "next/script.js";
 /* empty css                                           */
 /* empty css                                           */
-import { featured_maingrid_img, featured_center_vertical, featured_maingrid_item } from "./Featured.css.js";
-/* empty css                          */
+import { featured_maingrid_text, info_details, onhover } from "./Featured.css.js";
+import { insight_wrap } from "./Header.css.js";
 import "../../LandingPageHeader/LandingPageHeader.css.js";
 import "next/link.js";
 /* empty css                                                      */
@@ -132,7 +132,7 @@ import "../../StepItemSet/StepItemSet.css.js";
 /* empty css                                                   */
 /* empty css                                                 */
 /* empty css                                   */
-import { selector_title_link, selector_more, selector_link, selector_grid_items, selector_link_mobile, selector_section, selector_img, selector_title, selector_grid_content, selector_small_item } from "./CategorySelector.css.js";
+import { selector_section, selector_link, selector_title_link, selector_more, selector_grid_items, selector_grid_stacked, selector_link_mobile, img_fit, selector_img, selector_grid_content, selector_title, selector_small_item } from "./CategorySelector.css.js";
 const CategorySelector = (props) => {
   const {
     id,
@@ -143,66 +143,106 @@ const CategorySelector = (props) => {
     insights,
     children,
     hideLink = false,
-    hideMore = false
+    hideMore = false,
+    stackOnMobile = false
   } = props;
   const base = section ? `/${section}/insights` : `/insights`;
   const url = (subcategory !== void 0 ? `${base}/${category}/${subcategory}` : `${base}/${category}/`).toLowerCase();
-  return /* @__PURE__ */ jsx("section", { id, className: clsx(selector_section), children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
-    !hideLink && /* @__PURE__ */ jsx("div", { className: clsx(selector_link), children: !hideMore ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("a", { href: url, className: clsx(selector_title_link), children: title2.replaceAll("-", " ") }),
+  return /* @__PURE__ */ jsx("section", { id, className: selector_section, children: /* @__PURE__ */ jsxs("div", { className: insight_wrap, children: [
+    !hideLink && /* @__PURE__ */ jsx("div", { className: selector_link, children: !hideMore ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("h2", { children: /* @__PURE__ */ jsx("a", { href: url, className: selector_title_link, children: title2.replaceAll("-", " ") }) }),
       /* @__PURE__ */ jsx(
         Chevron,
         {
           targetUrl: url,
           variant: "primary",
           className: selector_more,
-          children: `See More ${title2.replaceAll("-", " ")} Articles`
+          children: `See More Articles`
         }
       )
-    ] }) : /* @__PURE__ */ jsx("p", { className: clsx(selector_title_link), children: subcategory !== void 0 ? subcategory : title2 }) }),
-    /* @__PURE__ */ jsx("div", { className: clsx(selector_grid_items), children: typeof insights !== "undefined" ? insights.map((item) => /* @__PURE__ */ jsx(
-      InsightItem,
+    ] }) : /* @__PURE__ */ jsx("p", { className: selector_title_link, children: subcategory !== void 0 ? subcategory.replaceAll("-", " ") : title2.replaceAll("-", " ") }) }),
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        id: item.id,
-        image: item.image,
-        readingTime: item.readingTime,
-        title: item.title,
-        url: item.url
-      },
-      item.id
-    )) : children }),
+        className: clsx(
+          selector_grid_items,
+          stackOnMobile && selector_grid_stacked
+        ),
+        children: typeof insights !== "undefined" ? insights.map((item) => /* @__PURE__ */ jsx(
+          InsightItem,
+          {
+            id: item.id,
+            image: item.image,
+            readingTime: item.readingTime,
+            title: item.title,
+            text: item.text,
+            url: item.url,
+            supertag: item.supertag
+          },
+          item.id
+        )) : children
+      }
+    ),
     !hideLink && /* @__PURE__ */ jsx("div", { className: clsx(selector_link_mobile), children: /* @__PURE__ */ jsx(
       Chevron,
       {
         targetUrl: url,
         variant: "primary",
         className: selector_more,
-        children: `See More ${title2.replaceAll("-", " ")} Articles`
+        children: `See More Articles`
       }
     ) })
   ] }) });
 };
 const InsightItem = (props) => {
-  const { id, image, readingTime, title: itemTitle, url } = props;
-  return /* @__PURE__ */ jsxs("a", { id, href: url, className: clsx(selector_small_item), children: [
-    /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+  const {
+    id,
+    image,
+    readingTime,
+    title: itemTitle,
+    url,
+    text,
+    supertag
+  } = props;
+  return /* @__PURE__ */ jsxs("a", { id, href: url, className: clsx(onhover, selector_small_item), children: [
+    /* @__PURE__ */ jsx("div", { className: clsx(selector_img, "relative"), "aria-hidden": "true", children: /* @__PURE__ */ jsx(
       OptimizeImage,
       {
         src: `${image?.url}`,
         alt: image?.alt ?? "",
-        className: clsx(featured_maingrid_img, selector_img),
-        height: 207,
-        width: 368,
+        className: img_fit,
+        height: 200,
+        width: 384,
         rootMargin: "210px"
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: clsx(featured_maingrid_item, selector_grid_content), children: [
-      /* @__PURE__ */ jsx("h2", { className: clsx(title({ variant: "primary" }), selector_title), children: itemTitle ?? "" }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(ClockIcon, { className: clsx(featured_center_vertical) }),
-        " ",
-        /* @__PURE__ */ jsx("span", { className: clsx(featured_center_vertical), children: (readingTime ?? "0") + " minutes" })
-      ] })
+    /* @__PURE__ */ jsxs("div", { className: selector_grid_content, children: [
+      /* @__PURE__ */ jsx("h3", { className: clsx(title({ variant: "primary" }), selector_title), children: itemTitle ?? "" }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: featured_maingrid_text,
+          style: { marginBottom: 24, color: "#1F1F1F" },
+          children: text ?? ""
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { marginTop: "auto" }, children: /* @__PURE__ */ jsxs("div", { className: "flex middle", style: { gap: "4px" }, children: [
+        /* @__PURE__ */ jsx(ClockIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: info_details, children: (readingTime ?? "0") + " minute read" }),
+        /* @__PURE__ */ jsx("div", { className: "flex middle", style: { paddingInline: "8px" }, children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: 1,
+            height: 20,
+            viewBox: "0 0 1 20",
+            fill: "none",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "M0.5 0V20", stroke: "#14263D" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: info_details, style: { fontWeight: "600" }, children: (typeof supertag == "string" && supertag.replaceAll("-", " ")) ?? "" })
+      ] }) })
     ] })
   ] });
 };

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

@@ -1,14 +1,23 @@
+export declare const onhover: string;
 export declare const featured_section: string;
 export declare const featured_title: string;
 export declare const featured_supertag: string;
 export declare const featured_grid: string;
+export declare const featured_maingrid: string;
+export declare const ratio: string;
+export declare const featured_main_wrapper: string;
+export declare const featured_maingrid_title: string;
+export declare const featured_maingrid_text: string;
+export declare const info_details: string;
+export declare const tab_details: string;
 export declare const featured_subgrid: string;
+export declare const featured_subimage: string;
+export declare const divider_tab: string;
 export declare const featured_subgrid_item: string;
 export declare const featured_subgrid_title: string;
-export declare const featured_subgrid_divider: string;
 export declare const featured_center_vertical: string;
-export declare const featured_maingrid: string;
-export declare const featured_hero: string;
 export declare const featured_maingrid_img: string;
 export declare const featured_maingrid_item: string;
-export declare const featured_maingrid_title: string;
+export declare const featured_subcontent: string;
+export declare const featured_subwrap: string;
+export declare const featured_subouter: string;