@axos-web-dev/shared-components 2.0.0-dev.31.insights.7 → 2.0.0-dev.33

package/dist/Calculators/ApyCalculator/index.js

@@ -326,7 +326,8 @@ const ApyCalculator = ({
                       className: `${field_row_input} ${fieldErrors.APY ? ` ${field_row_input_error}` : ""}`,
                       id: "apy",
                       type: "text",
-                      inputMode: "numeric",
+                      inputMode: "decimal",
+                      pattern: "[0-9.]*",
                       name: "apy",
                       value: APYDisplay,
                       onChange: handleAPYChange,

package/dist/Chatbot/ChatWindow.d.ts

@@ -3,6 +3,7 @@ import { default as React } from 'react';
 
 interface MessageResponse extends BaseMessageResponse {
     to_agent?: HumanAgent;
+    pending?: boolean;
 }
 export interface ChatBubble {
     id: string | number;

package/dist/Chatbot/ChatWindow.js

@@ -18,7 +18,6 @@ import { useOpenChat } from "./store/chat.js";
 import { ThankYouMessage } from "./ThankYouMessage.js";
 const ChatWindow = ({
   messages,
-  status = "connected",
   onSend,
   inputDisabled = false,
   onClose,
@@ -43,7 +42,6 @@ const ChatWindow = ({
     showThankyouMessage,
     toggleThankyouMessage,
     hasEscalated,
-    isBlockedInput,
     isOpen,
     hasOpenedOnce,
     chatStatus,
@@ -65,7 +63,6 @@ const ChatWindow = ({
   const handleSend = (e) => {
     e.preventDefault();
     const cleaned = cleanInput(input);
-    if (isBlockedInput) return;
     if (cleaned != "") {
       onSend(cleaned);
       setInput("");
@@ -460,7 +457,7 @@ const ChatWindow = ({
           }
         ) }) : null,
         /* @__PURE__ */ jsxs("div", { className: clsx(messagesContainerStyle), children: [
-          (status === "idle" && messages.length == 0 || messages.length == 0) && /* @__PURE__ */ jsx(
+          !messages.some((msg) => !msg.pending) && /* @__PURE__ */ jsx(
             "div",
             {
               className: clsx(),
@@ -525,9 +522,7 @@ const ChatWindow = ({
             /* @__PURE__ */ jsx(
               "div",
               {
-                className: clsx(
-                  focused && !inputDisabled && !isBlockedInput ? focusAnimation : ""
-                ),
+                className: clsx(focused && !inputDisabled ? focusAnimation : ""),
                 style: {
                   position: "absolute",
                   left: "10%",
@@ -544,7 +539,7 @@ const ChatWindow = ({
                 style: {
                   display: "flex",
                   padding: "12px 16px",
-                  background: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected ? "light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3))" : "#ffffff",
+                  background: inputDisabled || escalationDeflected ? "light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3))" : "#ffffff",
                   borderRadius: 12
                 },
                 children: [
@@ -568,7 +563,7 @@ const ChatWindow = ({
                       "aria-label": "Ask anything...",
                       className: clsx(inputStyle, autoResize),
                       autoFocus: true,
-                      disabled: isBlockedInput || inputDisabled || status !== "connected" || messages.length == 0 || escalationDeflected,
+                      disabled: inputDisabled || escalationDeflected,
                       rows: 1
                     }
                   ),
@@ -582,7 +577,7 @@ const ChatWindow = ({
                       type: "submit",
                       title: "Send message",
                       "aria-label": "Send message",
-                      disabled: isBlockedInput || inputDisabled || status !== "connected" || !input.trim() || messages.length == 0 || escalationDeflected,
+                      disabled: inputDisabled || !input.trim() || escalationDeflected,
                       children: /* @__PURE__ */ jsx(
                         "svg",
                         {

package/dist/Chatbot/Chatbot.js

@@ -40,17 +40,34 @@ const Chatbot = ({
     hideDisplayThankyouMessage
   } = useOpenChat();
   const isVisible = usePageVisibility();
-  const { addMessage, addMessages, clearMessages, messages } = useMessages();
+  const {
+    addMessage,
+    addMessages,
+    clearMessages,
+    messages,
+    addPendingMessage,
+    resolvePendingMessage
+  } = useMessages();
   const clientRef = useRef(null);
   const menuRef = useRef(null);
   const isMountedRef = useRef(false);
   const chatRef = useRef(null);
   const chatLoading = useRef(false);
   const agent_virtual = useRef(null);
+  const messageQueueRef = useRef([]);
+  const sendInFlightRef = useRef(false);
+  const flushingRef = useRef(false);
+  const statusRef = useRef("idle");
   const [status, setStatus] = useState("idle");
   const [menusLoaded, setMenusLoaded] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
   const [scalationStarted, setScalationStarted] = useState(false);
+  useEffect(() => {
+    statusRef.current = status;
+    if (status === "connected") {
+      flushQueuedMessages();
+    }
+  }, [status]);
   useEffect(() => {
     if (messages.length === 0) return;
     const hasScalation = messages.some(
@@ -67,6 +84,9 @@ const Chatbot = ({
     ["axos", 1],
     ["ufb", 3]
   ]);
+  const hasRealReply = () => useMessages.getState().messages.some(
+    (m) => !m.pending && m.$userType !== "end_user" && m.type !== "noti" && m.$sid !== "typing-1"
+  );
   const typingMessage = {
     $sid: "typing-1",
     type: "system",
@@ -107,7 +127,7 @@ const Chatbot = ({
       menuRef.current = await clientRef.current.getMenus();
       setMenusLoaded(true);
       console.log("menus:", menuRef.current);
-      if (menuRef.current !== null) {
+      if (menuRef.current !== null && useOpenChat.getState().isOpen) {
         await startChat("onReady");
       }
     }
@@ -121,10 +141,11 @@ const Chatbot = ({
   const onChatMessageHandler = async (message) => {
     console.log("Received message:", message);
     const { event, $userType } = message;
-    if (["system", "virtual_agent", "user"].includes($userType) && event === void 0) {
+    if (["virtual_agent", "user"].includes($userType) && event === void 0) {
       addMessage(message);
       if (!hasEscalated) {
         unblockInput?.();
+        flushQueuedMessages();
       }
       return;
     }
@@ -205,6 +226,7 @@ const Chatbot = ({
           startEscalation?.();
         }
       }
+      flushQueuedMessages();
     } catch (error) {
       console.error("Error fetching messages on chat connected:", error);
     }
@@ -226,7 +248,7 @@ const Chatbot = ({
   const deregisterEventHandlers = () => {
     clientRef.current?.off("ready", onReadyHandler);
     clientRef.current?.off("authenticated", onAuthenticatedHandler);
-    clientRef.current?.off("chat.ongoing", onDismissedHandler);
+    clientRef.current?.off("chat.ongoing", onChatOngoingHandler);
     clientRef.current?.off("chat.message", onChatMessageHandler);
     clientRef.current?.off("chat.typingStarted", onChatTypingStartedHandler);
     clientRef.current?.off("chat.typingEnded", onChatTypingEndedHandler);
@@ -340,6 +362,41 @@ const Chatbot = ({
       setChatStarted();
     }
   };
+  const sendNow = async (msg) => {
+    sendInFlightRef.current = true;
+    let success = true;
+    try {
+      await clientRef.current?.sendTextMessage(msg);
+    } catch (error) {
+      console.log(error);
+      success = false;
+    } finally {
+      sendInFlightRef.current = false;
+      if (!hasEscalated) {
+        blockInput?.();
+      }
+    }
+    return success;
+  };
+  const flushQueuedMessages = async () => {
+    if (flushingRef.current) return;
+    if (messageQueueRef.current.length === 0) return;
+    if (!clientRef.current || statusRef.current !== "connected") return;
+    if (!hasRealReply()) return;
+    flushingRef.current = true;
+    try {
+      while (messageQueueRef.current.length > 0 && !useOpenChat.getState().isBlockedInput && !sendInFlightRef.current) {
+        const next = messageQueueRef.current[0];
+        const success = await sendNow(next.text);
+        messageQueueRef.current.shift();
+        if (!success) {
+          resolvePendingMessage(next.id);
+        }
+      }
+    } finally {
+      flushingRef.current = false;
+    }
+  };
   const onSendMessage = async (msg) => {
     const clientChatId = clientRef.current?.chat?.id;
     const refChatId = chatRef.current?.id;
@@ -351,15 +408,16 @@ const Chatbot = ({
       "| chatRef.id:",
       refChatId
     );
-    try {
-      await clientRef.current?.sendTextMessage(msg);
-    } catch (error) {
-      console.log(error);
-    } finally {
-      if (!hasEscalated) {
-        blockInput?.();
-      }
+    const notReady = !clientRef.current || statusRef.current !== "connected";
+    const isThinking = useOpenChat.getState().isBlockedInput;
+    const noReplyYet = !hasRealReply();
+    if (notReady || isThinking || sendInFlightRef.current || noReplyYet) {
+      const id = `pending-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+      messageQueueRef.current.push({ id, text: msg });
+      addPendingMessage(id, msg);
+      return;
     }
+    await sendNow(msg);
   };
   const onEndChat = async () => {
     console.log(`Ending chat [end chat]`);
@@ -373,6 +431,9 @@ const Chatbot = ({
           clearMessages();
           chatRef.current = null;
           resetChatStarted();
+          messageQueueRef.current = [];
+          sendInFlightRef.current = false;
+          flushingRef.current = false;
           console.log("Chat ended");
           endEscalation?.();
         } finally {
@@ -399,6 +460,8 @@ const Chatbot = ({
     console.log("Chatbot unmounted");
     deregisterEventHandlers();
     chatLoading.current = false;
+    messageQueueRef.current = [];
+    sendInFlightRef.current = false;
     reset();
     resetChatStarted();
     setStatus("idle");
@@ -443,36 +506,6 @@ const Chatbot = ({
       }
     }
   }, [isOpen, isVisible]);
-  useMount(() => {
-    const hasParams = () => {
-      return window.location.search.includes("utm_");
-    };
-    const tryStart = () => {
-      if (hasParams()) {
-        startChat("utm-ready");
-        return true;
-      }
-      return false;
-    };
-    if (tryStart()) return;
-    const original = history.replaceState;
-    history.replaceState = function(...args) {
-      original.apply(this, args);
-      if (tryStart()) {
-        history.replaceState = original;
-      }
-    };
-    const interval = setInterval(() => {
-      if (tryStart()) {
-        clearInterval(interval);
-        history.replaceState = original;
-      }
-    }, 100);
-    return () => {
-      clearInterval(interval);
-      history.replaceState = original;
-    };
-  });
   return menusLoaded && /* @__PURE__ */ jsxs(
     "div",
     {

package/dist/Chatbot/ChatbotMessage.d.ts

@@ -3,6 +3,7 @@ import { MessageResponse as BaseMessageResponse, HumanAgent, VirtualAgent } from
 
 interface MessageResponse extends BaseMessageResponse {
     to_agent?: HumanAgent;
+    pending?: boolean;
 }
 interface ChatbotMessageProps {
     msg: MessageResponse;

package/dist/Chatbot/ChatbotMessage.js

@@ -108,6 +108,7 @@ const ChatbotMessage = ({
               messageStyle,
               msg.$userType == "end_user" ? user_msg : agent_msg
             ),
+            style: msg.pending ? { opacity: 0.65 } : void 0,
             children: /* @__PURE__ */ jsxs(
               "div",
               {
@@ -253,7 +254,7 @@ const ChatbotMessage = ({
               textTransform: "capitalize",
               fontFamily: "inherit"
             },
-            children: timeText
+            children: msg.pending ? "Sending..." : timeText
           }
         )
       ]

package/dist/Chatbot/store/messages.d.ts

@@ -1,12 +1,17 @@
 import { MessageResponse } from '@ujet/websdk-headless';
 
+export type PendingMessage = MessageResponse & {
+    pending?: boolean;
+};
 interface MessageStore {
-    messages: Array<MessageResponse>;
+    messages: Array<PendingMessage>;
     addMessage: (message: MessageResponse) => void;
     removeMessage: (id: string) => void;
     addMessages: (newMessages: MessageResponse[]) => void;
     clearMessages: () => void;
     isEscalated: boolean;
+    addPendingMessage: (id: string, text: string) => void;
+    resolvePendingMessage: (id: string) => void;
 }
 export interface Message {
     id: string;

package/dist/Chatbot/store/messages.js

@@ -3,18 +3,77 @@ const useMessages = create((set, get) => ({
   messages: [],
   addMessage: (message) => set((state) => {
     const cleaned = state.messages.filter((m) => m.$sid !== "typing-1");
-    return { messages: [...cleaned, message] };
+    const isPending = message.pending;
+    if (!isPending && message.$userType === "end_user") {
+      const pendingIdx = cleaned.findIndex(
+        (m) => m.pending && m.content === message.content
+      );
+      if (pendingIdx !== -1) {
+        return {
+          messages: [
+            ...cleaned.slice(0, pendingIdx),
+            message,
+            ...cleaned.slice(pendingIdx + 1)
+          ]
+        };
+      }
+      return { messages: [...cleaned, message] };
+    }
+    const insertBeforeIdx = !isPending ? cleaned.findIndex((m) => m.pending) : -1;
+    if (insertBeforeIdx === -1) {
+      return { messages: [...cleaned, message] };
+    }
+    return {
+      messages: [
+        ...cleaned.slice(0, insertBeforeIdx),
+        message,
+        ...cleaned.slice(insertBeforeIdx)
+      ]
+    };
   }),
   removeMessage: (id) => set((state) => ({
     messages: state.messages.filter(
       (msg) => "$sid" in msg && msg.$sid !== id
     )
   })),
-  addMessages: (newMessages) => set((state) => ({ messages: [...state.messages, ...newMessages] })),
+  addMessages: (newMessages) => set((state) => {
+    const pendingIdx = state.messages.findIndex(
+      (m) => m.pending
+    );
+    if (pendingIdx === -1) {
+      return { messages: [...state.messages, ...newMessages] };
+    }
+    return {
+      messages: [
+        ...state.messages.slice(0, pendingIdx),
+        ...newMessages,
+        ...state.messages.slice(pendingIdx)
+      ]
+    };
+  }),
   clearMessages: () => set({ messages: [] }),
   isEscalated: get()?.messages?.some(
     (msg) => ["escalationAccepted", "escalationStarted"].includes(msg.event)
-  )
+  ),
+  addPendingMessage: (id, text) => set((state) => ({
+    messages: [
+      ...state.messages,
+      {
+        $sid: id,
+        type: "text",
+        content: text,
+        sender: { id: "end_user", type: "end_user" },
+        $timestamp: /* @__PURE__ */ new Date(),
+        $userType: "end_user",
+        $index: Date.now(),
+        $userId: 0,
+        pending: true
+      }
+    ]
+  })),
+  resolvePendingMessage: (id) => set((state) => ({
+    messages: state.messages.filter((msg) => msg.$sid !== id)
+  }))
 }));
 export {
   useMessages

package/dist/FdicCallout/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import css from "./FdicCallout.module.js";
 const FdicBanner = () => {
-  return /* @__PURE__ */ jsx("div", { className: css.fdic_callout, "aria-label": "FDIC Notice banner", children: /* @__PURE__ */ jsx("div", { className: css.inner_container, children: /* @__PURE__ */ jsx("div", { className: "flex middle", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: css.fdic_callout, children: /* @__PURE__ */ jsx("div", { className: css.inner_container, children: /* @__PURE__ */ jsx("div", { className: "flex middle", children: /* @__PURE__ */ jsxs(
     "svg",
     {
       width: "430",

package/dist/Forms/EmailOnly.js

@@ -197,7 +197,17 @@ const EmailOnly = ({
       children: /* @__PURE__ */ jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
         icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: ["primary", "secondary"].includes(variant) ? /* @__PURE__ */ jsx(SvgComponent, {}) : /* @__PURE__ */ jsx(SvgAxosX, {}) }),
         /* @__PURE__ */ jsxs("div", { className: `${headerContainer} text_center`, children: [
-          /* @__PURE__ */ jsx("h2", { className: clsx(headerForm({ variant }), email_only_h2), children: headline }),
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: clsx(
+                "header_2",
+                headerForm({ variant }),
+                email_only_h2
+              ),
+              children: headline
+            }
+          ),
           description && /* @__PURE__ */ jsx(
             "div",
             {

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

@@ -1,11 +1,10 @@
 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_small_item: 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;
+export declare const selector_grid_content: string;
+export declare const selector_img: string;

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

@@ -7,17 +7,15 @@ import '../../assets/Insight/Featured/CategorySelector.css';import '../../assets
 /* empty css                                    */
 var selector_section = "_13y9ptj0";
 var selector_link = "_13y9ptj1";
-var selector_title_link = "_13y9ptj2";
-var selector_more = "_13y9ptj3";
-var selector_grid_items = "_13y9ptj4";
-var selector_small_item = "_13y9ptj5 _1sr2o6v5";
-var selector_img = "_13y9ptj6";
-var img_fit = "_13y9ptj7";
+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_title = "_13y9ptj9";
-var selector_link_mobile = "_13y9ptja _13y9ptj1";
+var selector_img = "_13y9ptj9";
 export {
-  img_fit,
   selector_grid_content,
   selector_grid_items,
   selector_img,

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/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/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                                   */
 /* empty css                                      */
 /* empty css                                  */
 /* empty css                                       */
@@ -101,8 +101,8 @@ import "../../ImageBillboard/ImageBillboard.css.js";
 import "next/script.js";
 /* empty css                                           */
 /* empty css                                           */
-import { featured_maingrid_text, info_details, onhover } from "./Featured.css.js";
-import { insight_wrap } from "./Header.css.js";
+import { featured_maingrid_img, featured_center_vertical, featured_maingrid_item } from "./Featured.css.js";
+/* empty css                          */
 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_section, selector_link, selector_title_link, selector_more, selector_grid_items, selector_link_mobile, img_fit, selector_img, selector_grid_content, selector_title, selector_small_item } from "./CategorySelector.css.js";
+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";
 const CategorySelector = (props) => {
   const {
     id,
@@ -147,9 +147,9 @@ const CategorySelector = (props) => {
   } = props;
   const base = section ? `/${section}/insights` : `/insights`;
   const url = (subcategory !== void 0 ? `${base}/${category}/${subcategory}` : `${base}/${category}/`).toLowerCase();
-  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("-", " ") }) }),
+  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("-", " ") }),
       /* @__PURE__ */ jsx(
         Chevron,
         {
@@ -159,17 +159,15 @@ const CategorySelector = (props) => {
           children: `See More ${title2.replaceAll("-", " ")} Articles`
         }
       )
-    ] }) : /* @__PURE__ */ jsx("p", { className: selector_title_link, children: subcategory !== void 0 ? subcategory.replaceAll("-", " ") : title2.replaceAll("-", " ") }) }),
-    /* @__PURE__ */ jsx("div", { className: selector_grid_items, children: typeof insights !== "undefined" ? insights.map((item) => /* @__PURE__ */ jsx(
+    ] }) : /* @__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,
       {
         id: item.id,
         image: item.image,
         readingTime: item.readingTime,
         title: item.title,
-        text: item.text,
-        url: item.url,
-        supertag: item.supertag
+        url: item.url
       },
       item.id
     )) : children }),
@@ -185,54 +183,26 @@ const CategorySelector = (props) => {
   ] }) });
 };
 const InsightItem = (props) => {
-  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(
+  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(
       OptimizeImage,
       {
         src: `${image?.url}`,
         alt: image?.alt ?? "",
-        className: img_fit,
-        height: 200,
-        width: 384,
+        className: clsx(featured_maingrid_img, selector_img),
+        height: 207,
+        width: 368,
         rootMargin: "210px"
       }
     ) }),
-    /* @__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("-", " ")) ?? "" })
-      ] }) })
+    /* @__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" })
+      ] })
     ] })
   ] });
 };