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

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" })
+      ] })
     ] })
   ] });
 };

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

@@ -1,23 +1,14 @@
-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_subcontent: string;
-export declare const featured_subwrap: string;
-export declare const featured_subouter: string;
+export declare const featured_maingrid_title: string;

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

@@ -1,51 +1,32 @@
-import '../../assets/Insight/Featured/Featured.css';import '../../assets/themes/axos.css';import '../../assets/Typography/Typography.css';/* empty css                                             */
-/* empty css                                   */
+import '../../assets/Insight/Featured/Featured.css';import '../../assets/Typography/Typography.css';/* empty css                                             */
 /* empty css                            */
-var onhover = "_1sr2o6v0";
-var featured_section = "_1sr2o6v1";
-var featured_title = "_1sr2o6v2";
-var featured_supertag = "_1sr2o6v3";
-var featured_grid = "_1sr2o6v4";
-var featured_maingrid = "_1sr2o6v5";
-var ratio = "_1sr2o6v6";
-var featured_main_wrapper = "_1sr2o6v7";
-var featured_maingrid_title = "_1sr2o6v8";
-var featured_maingrid_text = "_1sr2o6v9";
-var info_details = "_1sr2o6va";
-var tab_details = "_1sr2o6vb";
-var featured_subgrid = "_1sr2o6vc";
-var featured_subimage = "_1sr2o6vd";
-var divider_tab = "_1sr2o6ve";
-var featured_subgrid_item = "_1sr2o6vf";
-var featured_subgrid_title = "_1sr2o6vg";
-var featured_center_vertical = "_1sr2o6vh";
-var featured_maingrid_img = "_1sr2o6vi";
-var featured_maingrid_item = "_1sr2o6vj";
-var featured_subcontent = "_1sr2o6vk";
-var featured_subwrap = "_1sr2o6vl";
-var featured_subouter = "_1sr2o6vm";
+var featured_section = "_1sr2o6v0";
+var featured_title = "_1sr2o6v1";
+var featured_supertag = "_1sr2o6v2";
+var featured_grid = "_1sr2o6v3";
+var featured_subgrid = "_1sr2o6v4";
+var featured_subgrid_item = "_1sr2o6v5";
+var featured_subgrid_title = "_1sr2o6v6";
+var featured_subgrid_divider = "_1sr2o6v7";
+var featured_center_vertical = "_1sr2o6v8";
+var featured_maingrid = "_1sr2o6v9";
+var featured_hero = "_1sr2o6va";
+var featured_maingrid_img = "_1sr2o6vb";
+var featured_maingrid_item = "_1sr2o6vc";
+var featured_maingrid_title = "_1sr2o6vd";
 export {
-  divider_tab,
   featured_center_vertical,
   featured_grid,
-  featured_main_wrapper,
+  featured_hero,
   featured_maingrid,
   featured_maingrid_img,
   featured_maingrid_item,
-  featured_maingrid_text,
   featured_maingrid_title,
   featured_section,
-  featured_subcontent,
   featured_subgrid,
+  featured_subgrid_divider,
   featured_subgrid_item,
   featured_subgrid_title,
-  featured_subimage,
-  featured_subouter,
-  featured_subwrap,
   featured_supertag,
-  featured_title,
-  info_details,
-  onhover,
-  ratio,
-  tab_details
+  featured_title
 };

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

@@ -16,7 +16,6 @@ export interface FeaturedItemProps {
         alt: string;
     };
     title?: ReactNode;
-    text?: string;
     supertag?: ReactNode;
     readingTime?: string;
 }

package/dist/Insight/Featured/Featured.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/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/CategorySelector.css';import '../../assets/Insight/Featured/Featured.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/Modal/Modal.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/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/Insight/Featured/CategorySelector.css';import '../../assets/Insight/Featured/Featured.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/Modal/Modal.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                                       */
@@ -30,7 +30,7 @@ import "../../HeroBanner/LargeBanner.css.js";
 import "../../HeroBanner/HeroBanner.css.js";
 import "../../HeroBanner/SelectionBanner.css.js";
 /* empty css                                             */
-import "../../SetContainer/SetContainer.css.js";
+import { set_container } from "../../SetContainer/SetContainer.css.js";
 import "../../Table/Table.css.js";
 import "../../Calculators/AxosOneCalculator/BalanceAPYCalculator.css.js";
 import "../../Calculators/BalanceAPYCalculator/BalanceAPYCalculator.css.js";
@@ -97,14 +97,14 @@ import "../../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                             */
 /* empty css                                                            */
 /* empty css                                               */
-import "../../ImageBillboard/ImageBillboard.css.js";
+import { supertag } from "../../ImageBillboard/ImageBillboard.css.js";
 import "next/script.js";
 /* empty css                                           */
 /* empty css                                           */
 /* empty css                            */
 /* empty css                                    */
-import { insight_wrap } from "./Header.css.js";
-import { featured_section, featured_grid, featured_title, featured_maingrid_img, ratio, featured_main_wrapper, featured_maingrid_title, featured_maingrid_text, info_details, featured_maingrid, onhover, featured_subouter, featured_subgrid, featured_subwrap, featured_subimage, featured_subcontent, featured_subgrid_title, tab_details, divider_tab, featured_subgrid_item } from "./Featured.css.js";
+import { featured_title, featured_maingrid_img, featured_maingrid_title, featured_center_vertical, featured_maingrid_item, featured_maingrid, featured_hero, featured_subgrid_divider, featured_subgrid, featured_grid, featured_section, featured_subgrid_item, featured_supertag, featured_subgrid_title } from "./Featured.css.js";
+/* empty css                          */
 import "../../LandingPageHeader/LandingPageHeader.css.js";
 import "next/link.js";
 /* empty css                                                      */
@@ -139,146 +139,110 @@ const FeaturedItem = (props) => {
     readingTime,
     supertag: supertagText,
     title: featureItemTitle,
-    variant: fullVariant,
-    image
+    variant: fullVariant
   } = props;
   const variant = getVariant(fullVariant);
-  const imageUrl = image?.url ? `https:${image.url}` : void 0;
-  return /* @__PURE__ */ jsx("a", { href: url ?? "/", className: clsx(featured_subgrid_item, onhover), children: /* @__PURE__ */ jsxs("div", { className: featured_subwrap, children: [
-    imageUrl ? /* @__PURE__ */ jsxs(
-      "picture",
-      {
-        className: clsx(ratio, featured_subimage),
-        "aria-hidden": "true",
-        children: [
-          /* @__PURE__ */ jsx("source", { srcSet: `${imageUrl}?fm=avif`, type: "image/avif" }),
-          /* @__PURE__ */ jsx("source", { srcSet: `${imageUrl}?fm=webp`, type: "image/webp" }),
-          /* @__PURE__ */ jsx(
-            Image,
-            {
-              src: imageUrl,
-              className: clsx(featured_maingrid_img, ratio),
-              height: 159,
-              width: 269,
-              priority: true,
-              alt: image?.alt ?? ""
-            }
-          )
-        ]
-      }
-    ) : null,
-    /* @__PURE__ */ jsxs("div", { className: featured_subcontent, children: [
-      /* @__PURE__ */ jsx("h3", { className: clsx(featured_subgrid_title, title({ variant })), children: featureItemTitle ?? "" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex middle", style: { gap: "4px" }, children: [
-        /* @__PURE__ */ jsx(ClockIcon, {}),
-        /* @__PURE__ */ jsx("span", { className: clsx(info_details, tab_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",
-            className: divider_tab,
-            "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx("path", { d: "M0.5 0V20", stroke: "#14263D" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(info_details, tab_details),
-            style: { fontWeight: "600" },
-            children: (typeof supertagText == "string" && supertagText.replaceAll("-", " ")) ?? ""
+  return /* @__PURE__ */ jsxs("a", { href: url ?? "/", className: featured_subgrid_item, children: [
+    /* @__PURE__ */ jsx("h2", { className: clsx(supertag({ variant }), featured_supertag), children: (typeof supertagText == "string" && supertagText.replaceAll("-", " ")) ?? "" }),
+    /* @__PURE__ */ jsx("h3", { className: clsx(featured_subgrid_title, title({ variant })), children: featureItemTitle ?? "" }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        ClockIcon,
+        {
+          className: clsx(featured_center_vertical),
+          style: {
+            filter: ["tertiary", "quaternary"].includes(variant) ? "brightness(0) invert(1)" : ""
           }
-        )
-      ] })
+        }
+      ),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: clsx(featured_center_vertical), children: (readingTime ?? "0") + " minutes" })
     ] })
-  ] }) });
+  ] });
 };
 const Featured = (props) => {
   const { id, variant: fullVariant, featured, headline } = props;
   const variant = getVariant(fullVariant);
   const [main, ...restFeatured] = featured;
-  const mainImageUrl = main?.image?.url ? `https:${main.image.url}` : void 0;
-  return /* @__PURE__ */ jsx("section", { id, className: featured_section, children: /* @__PURE__ */ jsx("div", { className: insight_wrap, children: /* @__PURE__ */ jsxs("div", { className: featured_grid, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      headline && /* @__PURE__ */ jsx("h2", { className: featured_title, children: headline }),
-      /* @__PURE__ */ jsxs("a", { href: main?.url, className: clsx(featured_maingrid, onhover), children: [
-        mainImageUrl ? /* @__PURE__ */ jsxs("picture", { className: clsx(ratio, "rounded"), "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx(
-            "source",
-            {
-              srcSet: `${mainImageUrl}?fm=avif`,
-              type: "image/avif"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "source",
-            {
-              srcSet: `${mainImageUrl}?fm=webp`,
-              type: "image/webp"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Image,
-            {
-              src: mainImageUrl,
-              className: clsx(featured_maingrid_img, ratio),
-              height: 346,
-              width: 586,
-              priority: true,
-              alt: main?.image?.alt ?? ""
-            }
-          )
-        ] }) : null,
-        /* @__PURE__ */ jsxs("div", { className: featured_main_wrapper, children: [
-          /* @__PURE__ */ jsx("h3", { className: featured_maingrid_title, children: main?.title ?? "" }),
-          /* @__PURE__ */ jsx("p", { className: featured_maingrid_text, children: main?.text ?? "" }),
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id,
+      className: clsx(featured_section, set_container({ variant })),
+      children: /* @__PURE__ */ jsxs("div", { className: clsx("containment"), children: [
+        headline && /* @__PURE__ */ jsx("h2", { className: clsx(featured_title), children: headline }),
+        /* @__PURE__ */ jsxs("div", { className: clsx(featured_grid), children: [
           /* @__PURE__ */ jsxs(
-            "div",
+            "a",
             {
-              className: "flex middle",
-              style: { gap: "4px", flexWrap: "wrap" },
+              href: main?.url,
+              className: clsx(featured_maingrid, featured_hero),
               children: [
-                /* @__PURE__ */ jsx(ClockIcon, {}),
-                /* @__PURE__ */ jsx("span", { className: info_details, children: (main?.readingTime ?? "") + " 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 main?.supertag == "string" && main?.supertag.replaceAll("-", " ")) ?? "" })
+                /* @__PURE__ */ jsxs("picture", { children: [
+                  /* @__PURE__ */ jsx(
+                    "source",
+                    {
+                      srcSet: `https:${main?.image?.url}?fm=avif`,
+                      type: "image/avif"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "source",
+                    {
+                      srcSet: `https:${main?.image?.url}?fm=webp`,
+                      type: "image/webp"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      src: `https:${main?.image?.url}?q=85`,
+                      className: clsx(featured_maingrid_img),
+                      width: 703,
+                      height: 340,
+                      priority: true,
+                      alt: ""
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: clsx(featured_maingrid_item), children: [
+                  /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: clsx(
+                        title({ variant: "primary" }),
+                        featured_maingrid_title
+                      ),
+                      children: main?.title ?? ""
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(ClockIcon, { className: clsx(featured_center_vertical) }),
+                    " ",
+                    /* @__PURE__ */ jsx("span", { className: clsx(featured_center_vertical), children: (main?.readingTime ?? "") + " minutes" })
+                  ] })
+                ] })
               ]
             }
-          )
+          ),
+          /* @__PURE__ */ jsx("div", { className: clsx(featured_subgrid), children: restFeatured.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              FeaturedItem,
+              {
+                variant: variant ?? "tertiary",
+                readingTime: item.readingTime,
+                supertag: item.supertag,
+                title: item.title,
+                url: item.url
+              },
+              item.id
+            ),
+            index < restFeatured.length - 1 && /* @__PURE__ */ jsx("hr", { className: clsx(featured_subgrid_divider) })
+          ] }, item.id)) })
         ] })
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: featured_subouter, children: [
-      /* @__PURE__ */ jsx("h2", { className: featured_title, children: "Popular topics" }),
-      /* @__PURE__ */ jsx("div", { className: featured_subgrid, children: restFeatured.map((item) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-        FeaturedItem,
-        {
-          variant: variant ?? "secondary",
-          image: item.image,
-          readingTime: item.readingTime,
-          supertag: item.supertag,
-          title: item.title,
-          url: item.url
-        },
-        item.id
-      ) }, item.id)) })
-    ] })
-  ] }) }) });
+    }
+  );
 };
 export {
   Featured,

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

@@ -1,5 +1,4 @@
 export declare const header_featured: string;
-export declare const insight_wrap: string;
 export declare const breadcumbs_header_featured_section: string;
 export declare const breadcumb_link: string;
 export declare const header_title_featured: string;

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

@@ -1,16 +1,13 @@
-import '../../assets/Insight/Featured/Header.css';import '../../assets/themes/axos.css';/* empty css                                   */
-/* empty css                          */
+import '../../assets/Insight/Featured/Header.css';/* empty css                          */
 var header_featured = "_19yqlq40";
-var insight_wrap = "_19yqlq41";
-var breadcumbs_header_featured_section = "_19yqlq42";
-var breadcumb_link = "_19yqlq43";
-var header_title_featured = "_19yqlq44";
-var header_in_insight = "_19yqlq45";
+var breadcumbs_header_featured_section = "_19yqlq41";
+var breadcumb_link = "_19yqlq42";
+var header_title_featured = "_19yqlq43";
+var header_in_insight = "_19yqlq44";
 export {
   breadcumb_link,
   breadcumbs_header_featured_section,
   header_featured,
   header_in_insight,
-  header_title_featured,
-  insight_wrap
+  header_title_featured
 };

package/dist/Insight/Featured/Header.js

@@ -101,7 +101,6 @@ import "next/script.js";
 /* empty css                                           */
 /* empty css                            */
 /* empty css                                    */
-import { insight_wrap, header_title_featured, header_in_insight, header_featured } from "./Header.css.js";
 import "../../LandingPageHeader/LandingPageHeader.css.js";
 import "next/link.js";
 /* empty css                                                      */
@@ -130,21 +129,29 @@ import "../../StepItemSet/StepItemSet.css.js";
 /* empty css                                                     */
 /* empty css                                                   */
 /* empty css                                                 */
+import { header_title_featured, header_in_insight, header_featured } from "./Header.css.js";
 const BreadcumbHeader = (props) => {
   const { section, showTitle = true } = props;
-  return /* @__PURE__ */ jsx("div", { className: clsx(!showTitle ? header_in_insight : "", header_featured), children: /* @__PURE__ */ jsx("div", { className: insight_wrap, children: showTitle && /* @__PURE__ */ jsxs(
-    "h1",
+  return /* @__PURE__ */ jsx(
+    "div",
     {
       className: clsx(
-        title({ variant: "primary" }),
-        header_title_featured
+        !showTitle ? header_in_insight : "",
+        "containment",
+        header_featured
       ),
-      children: [
-        section?.replaceAll("-", " "),
-        " Insights"
-      ]
+      children: showTitle && /* @__PURE__ */ jsxs(
+        "h1",
+        {
+          className: clsx(title({ variant: "primary" }), header_title_featured),
+          children: [
+            section?.replaceAll("-", " "),
+            " Insights"
+          ]
+        }
+      )
     }
-  ) }) });
+  );
 };
 export {
   BreadcumbHeader