@axos-web-dev/shared-components 2.0.0-dev.31.insights.3 → 2.0.0-dev.31.insights.4

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

@@ -1,10 +1,11 @@
 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_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,15 +7,17 @@ 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 _1sr2o6v5";
-var selector_title = "_13y9ptj7";
+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_grid_content = "_13y9ptj8";
-var selector_img = "_13y9ptj9";
+var selector_title = "_13y9ptj9";
+var selector_link_mobile = "_13y9ptja _13y9ptj1";
 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/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                                       */
@@ -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_link_mobile, img_fit, selector_img, selector_grid_content, selector_title, 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: 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,
         {
@@ -159,15 +159,17 @@ const CategorySelector = (props) => {
           children: `See More ${title2.replaceAll("-", " ")} 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(
+    ] }) : /* @__PURE__ */ jsx("p", { className: selector_title_link, children: subcategory !== void 0 ? subcategory : title2 }) }),
+    /* @__PURE__ */ jsx("div", { className: 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,
-        url: item.url
+        text: item.text,
+        url: item.url,
+        supertag: item.supertag
       },
       item.id
     )) : children }),
@@ -183,26 +185,46 @@ const CategorySelector = (props) => {
   ] }) });
 };
 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"), 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 }, 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",
+            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

@@ -12,7 +12,6 @@ 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 no_tablet: string;
 export declare const divider_tab: string;
 export declare const featured_subgrid_item: string;
 export declare const featured_subgrid_title: string;
@@ -21,3 +20,4 @@ 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;

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

@@ -15,15 +15,15 @@ var info_details = "_1sr2o6va";
 var tab_details = "_1sr2o6vb";
 var featured_subgrid = "_1sr2o6vc";
 var featured_subimage = "_1sr2o6vd";
-var no_tablet = "_1sr2o6ve";
-var divider_tab = "_1sr2o6vf";
-var featured_subgrid_item = "_1sr2o6vg";
-var featured_subgrid_title = "_1sr2o6vh";
-var featured_center_vertical = "_1sr2o6vi";
-var featured_maingrid_img = "_1sr2o6vj";
-var featured_maingrid_item = "_1sr2o6vk";
-var featured_subcontent = "_1sr2o6vl";
-var featured_subwrap = "_1sr2o6vm";
+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";
 export {
   divider_tab,
   featured_center_vertical,
@@ -40,11 +40,11 @@ export {
   featured_subgrid_item,
   featured_subgrid_title,
   featured_subimage,
+  featured_subouter,
   featured_subwrap,
   featured_supertag,
   featured_title,
   info_details,
-  no_tablet,
   onhover,
   ratio,
   tab_details

package/dist/Insight/Featured/Featured.js

@@ -103,8 +103,8 @@ import "next/script.js";
 /* empty css                                           */
 /* empty css                            */
 /* empty css                                    */
-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_subgrid, featured_subwrap, featured_subimage, featured_subcontent, featured_subgrid_title, no_tablet, tab_details, divider_tab, featured_subgrid_item } from "./Featured.css.js";
 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 "../../LandingPageHeader/LandingPageHeader.css.js";
 import "next/link.js";
 /* empty css                                                      */
@@ -163,7 +163,7 @@ const FeaturedItem = (props) => {
     /* @__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, { className: no_tablet }),
+        /* @__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",
@@ -247,7 +247,7 @@ const Featured = (props) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { children: [
+    /* @__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,

package/dist/Insight/Featured/index.js

@@ -1,6 +1,6 @@
 import { CategorySelector, InsightItem } from "./CategorySelector.js";
 import { Featured, FeaturedItem } from "./Featured.js";
-import { divider_tab, featured_center_vertical, featured_grid, featured_main_wrapper, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_text, featured_maingrid_title, featured_section, featured_subcontent, featured_subgrid, featured_subgrid_item, featured_subgrid_title, featured_subimage, featured_subwrap, featured_supertag, featured_title, info_details, no_tablet, onhover, ratio, tab_details } from "./Featured.css.js";
+import { divider_tab, featured_center_vertical, featured_grid, featured_main_wrapper, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_text, featured_maingrid_title, featured_section, featured_subcontent, featured_subgrid, featured_subgrid_item, featured_subgrid_title, featured_subimage, featured_subouter, featured_subwrap, featured_supertag, featured_title, info_details, onhover, ratio, tab_details } from "./Featured.css.js";
 import { BreadcumbHeader } from "./Header.js";
 export {
   BreadcumbHeader,
@@ -23,11 +23,11 @@ export {
   featured_subgrid_item,
   featured_subgrid_title,
   featured_subimage,
+  featured_subouter,
   featured_subwrap,
   featured_supertag,
   featured_title,
   info_details,
-  no_tablet,
   onhover,
   ratio,
   tab_details

package/dist/Insight/index.js

@@ -1,6 +1,6 @@
 import { CategorySelector, InsightItem } from "./Featured/CategorySelector.js";
 import { Featured, FeaturedItem } from "./Featured/Featured.js";
-import { divider_tab, featured_center_vertical, featured_grid, featured_main_wrapper, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_text, featured_maingrid_title, featured_section, featured_subcontent, featured_subgrid, featured_subgrid_item, featured_subgrid_title, featured_subimage, featured_subwrap, featured_supertag, featured_title, info_details, no_tablet, onhover, ratio, tab_details } from "./Featured/Featured.css.js";
+import { divider_tab, featured_center_vertical, featured_grid, featured_main_wrapper, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_text, featured_maingrid_title, featured_section, featured_subcontent, featured_subgrid, featured_subgrid_item, featured_subgrid_title, featured_subimage, featured_subouter, featured_subwrap, featured_supertag, featured_title, info_details, onhover, ratio, tab_details } from "./Featured/Featured.css.js";
 import { BreadcumbHeader } from "./Featured/Header.js";
 import { article_aside, article_blockquote, article_main_content, article_navigation_link, article_navigation_list, article_navigation_title, article_preview_img, article_preview_wrapper, article_share, article_share_buttons, article_share_icon, article_share_link, article_share_p, article_share_svg, article_spacer, elementSpacer_block, footnotes, insight_header, insight_header_2, insight_header_3, insight_header_4, insight_info__divider, insight_info_row, insight_intro_p, insight_list_item, insight_p } from "./Insight.css.js";
 export {
@@ -40,6 +40,7 @@ export {
   featured_subgrid_item,
   featured_subgrid_title,
   featured_subimage,
+  featured_subouter,
   featured_subwrap,
   featured_supertag,
   featured_title,
@@ -54,7 +55,6 @@ export {
   insight_intro_p,
   insight_list_item,
   insight_p,
-  no_tablet,
   onhover,
   ratio,
   tab_details

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

@@ -1,43 +1,54 @@
 ._13y9ptj0 {
-  padding: 24px 0;
+  padding: 40px 0;
 }
 ._13y9ptj1 {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 24px;
   align-items: center;
+  margin-bottom: 32px;
 }
 ._13y9ptj2 {
-  display: none;
-}
-._13y9ptj2._13y9ptj1 .sc__btn {
-  margin-top: 24px;
-  margin-bottom: 0;
-}
-._13y9ptj3 {
-  font-size: 24px;
+  font-size: clamp(32px, calc(2rem + ((1vw - 7.69px) * 1.5656)), 40px);
   color: var(--_1073cm85);
   text-decoration: none;
   font-family: var(--header-font-family);
   text-transform: capitalize;
   font-weight: 700;
 }
-._13y9ptj4 {
+._13y9ptj3 {
   text-transform: capitalize;
 }
-._13y9ptj5 {
+._13y9ptj4 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 24px;
   overflow: hidden;
 }
+._13y9ptj5 {
+  border: 1px solid #E9EBEF;
+  display: flex;
+  flex-direction: column;
+}
 ._13y9ptj6 {
-  max-width: 370px;
-  grid-template-rows: 1fr 1fr;
+  aspect-ratio: 384 / 200;
+  max-height: 200px;
+  width: 100%;
+  overflow: hidden;
 }
 ._13y9ptj7 {
-  font-size: 28px;
-  padding-bottom: 10px;
+  object-fit: cover;
+  object-position: top;
+}
+._13y9ptj8 {
+  padding: 24px;
+  color: #14263D;
+  flex: 1 1 0%;
+  display: flex;
+  flex-direction: column;
+}
+._13y9ptj9 {
+  font-size: 24px !important;
+  margin-bottom: 16px;
   -webkit-line-clamp: 2;
   box-orient: vertical;
   overflow: hidden;
@@ -46,38 +57,29 @@
   -webkit-box-orient: vertical;
   display: -webkit-box;
 }
-._13y9ptj8 {
-  padding: 24px;
-  color: #333D46;
-  font-family: var(--main-font-family);
-  min-height: 182px;
-  display: grid;
-  grid-template-rows: 120px 30px;
-}
-._13y9ptj9 {
-  aspect-ratio: 16 / 9;
+._13y9ptja {
+  display: none;
 }
-@media screen and (max-width:1024px) {
-  ._13y9ptj5 {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
+._13y9ptja._13y9ptj1 .sc__btn {
+  margin-top: 24px;
+  margin-bottom: 0;
 }
 @media screen and (max-width:768px) {
-  ._13y9ptj2 {
-    display: flex;
-  }
-  ._13y9ptj5 {
+  ._13y9ptj4 {
     grid-template-columns: 1fr;
     justify-items: center;
   }
+  ._13y9ptja {
+    display: flex;
+  }
 }
 @media screen and (max-width: 768px) {
-  :is(._13y9ptj1):not(._13y9ptj2) .sc__btn {
+  :is(._13y9ptj1):not(._13y9ptja) .sc__btn {
     display: none;
   }
 }
 @media screen and (min-width:768px) {
-  ._13y9ptj2._13y9ptj1 .sc__btn {
+  ._13y9ptja._13y9ptj1 .sc__btn {
     display: none;
   }
 }

package/dist/assets/Insight/Featured/Featured.css

@@ -1,3 +1,10 @@
+._1sr2o6v0 {
+  transition: opacity 0.3s ease;
+  will-change: opacity;
+}
+._1sr2o6v0:hover {
+  opacity: 0.75;
+}
 ._1sr2o6v1 {
   background: var(--_1073cm88);
   padding-block-end: clamp(48px, calc(3rem + ((1vw - 6.03px) * 19.3939)), 80px);
@@ -76,11 +83,11 @@
   max-width: 269px;
   overflow: hidden;
 }
-._1sr2o6vg {
+._1sr2o6vf {
   flex: 1 1 0%;
   text-decoration: none;
 }
-._1sr2o6vh {
+._1sr2o6vg {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   line-clamp: 2;
@@ -91,70 +98,77 @@
   font-size: 20px !important;
   transition: color 0.3s ease;
 }
-._1sr2o6v0:hover ._1sr2o6vh {
+._1sr2o6v0:hover ._1sr2o6vg {
   color: var(--_1073cm82);
 }
-._1sr2o6vi {
+._1sr2o6vh {
   display: inline-block;
   vertical-align: middle;
 }
-._1sr2o6vj {
+._1sr2o6vi {
   height: 100%;
   object-fit: cover;
 }
-._1sr2o6vk {
+._1sr2o6vj {
   padding: 24px;
   color: #333D46;
   font-family: var(--main-font-family);
   min-height: 170px;
 }
-._1sr2o6vl {
+._1sr2o6vk {
   flex: 1 1 0%;
   gap: 24px;
   display: flex;
   flex-direction: column;
 }
-._1sr2o6vm {
+._1sr2o6vl {
   gap: 16px;
   display: flex;
 }
-@media screen and (max-width:768px) {
-  ._1sr2o6v2 {
-    font-size: 16px;
-    padding-bottom: 24px;
-  }
+@media screen and (min-width:769px) {
   ._1sr2o6v4 {
-    grid-template-columns: 1fr;
+    grid-template-columns: clamp(285px, calc(17.8125rem + ((1vw - 7.69px) * 58.5127)), 584px) 1fr;
   }
-}
-@media screen and (min-width:769px) {
   ._1sr2o6v9 {
     font-size: clamp(14px, calc(0.875rem + ((1vw - 7.69px) * 0.3914)), 16px);
   }
   ._1sr2o6vd {
     flex-basis: clamp(103px, calc(6.4375rem + ((1vw - 7.69px) * 32.4853)), 269px);
   }
-  ._1sr2o6vf {
+  ._1sr2o6ve {
     height: clamp(10px, calc(0.625rem + ((1vw - 7.69px) * 1.9569)), 20px);
   }
-  ._1sr2o6vh {
+  ._1sr2o6vg {
     font-size: clamp(16px, calc(1rem + ((1vw - 7.69px) * 0.7828)), 20px) !important;
   }
 }
+@media screen and (max-width:768px) {
+  ._1sr2o6v2 {
+    font-size: 16px;
+    padding-bottom: 24px;
+  }
+  ._1sr2o6v4 {
+    grid-template-columns: 1fr;
+  }
+  ._1sr2o6vd {
+    flex-basis: 100%;
+    max-width: none;
+  }
+  ._1sr2o6vm {
+    padding-block-start: 24px;
+    border-block-start: 1px solid #98A3B6;
+  }
+}
 @media screen and (min-width:769px) and (max-width:980px) {
   ._1sr2o6vb {
     font-size: 12px;
   }
-  ._1sr2o6ve {
-    display: none;
-  }
 }
 @media screen and (max-width:650px) {
-  ._1sr2o6vl {
-    gap: 10px;
+  ._1sr2o6vk {
+    gap: 8px;
   }
-  ._1sr2o6vm {
-    gap: 14px;
+  ._1sr2o6vl {
     flex-direction: column;
   }
 }

package/dist/main.js

@@ -165,7 +165,7 @@ import { DownPaymentInput } from "./Input/DownPaymentInput.js";
 import { RadioButton, RadioButtonSet } from "./Input/RadioButton.js";
 import { CategorySelector, InsightItem } from "./Insight/Featured/CategorySelector.js";
 import { Featured, FeaturedItem } from "./Insight/Featured/Featured.js";
-import { divider_tab, featured_center_vertical, featured_grid, featured_main_wrapper, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_text, featured_maingrid_title, featured_section, featured_subcontent, featured_subgrid, featured_subgrid_item, featured_subgrid_title, featured_subimage, featured_subwrap, featured_supertag, featured_title, info_details, no_tablet, onhover, ratio, tab_details } from "./Insight/Featured/Featured.css.js";
+import { divider_tab, featured_center_vertical, featured_grid, featured_main_wrapper, featured_maingrid, featured_maingrid_img, featured_maingrid_item, featured_maingrid_text, featured_maingrid_title, featured_section, featured_subcontent, featured_subgrid, featured_subgrid_item, featured_subgrid_title, featured_subimage, featured_subouter, featured_subwrap, featured_supertag, featured_title, info_details, onhover, ratio, tab_details } from "./Insight/Featured/Featured.css.js";
 import { BreadcumbHeader } from "./Insight/Featured/Header.js";
 import { article_aside, article_blockquote, article_main_content, article_navigation_link, article_navigation_list, article_navigation_title, article_preview_img, article_preview_wrapper, article_share, article_share_buttons, article_share_icon, article_share_link, article_share_p, article_share_svg, article_spacer, elementSpacer_block, footnotes, insight_header, insight_header_2, insight_header_3, insight_header_4, insight_info__divider, insight_info_row, insight_intro_p, insight_list_item, insight_p } from "./Insight/Insight.css.js";
 import { Interstitial } from "./Interstitial/Interstitial.js";
@@ -595,6 +595,7 @@ export {
   featured_subgrid_item,
   featured_subgrid_title,
   featured_subimage,
+  featured_subouter,
   featured_subwrap,
   featured_supertag,
   featured_title,
@@ -752,7 +753,6 @@ export {
   na_cursor,
   nested_grid,
   noAnswerButton,
-  no_tablet,
   notificationStyle,
   ol,
   one_row,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "2.0.0-dev.31.insights.3",
+  "version": "2.0.0-dev.31.insights.4",
   "type": "module",
   "main": "index.js",
   "module": "dist/main.js",