@axos-web-dev/shared-components 0.0.60 → 0.0.61

package/dist/{StepItems/StepItemsSet.js → StepItemSet/StepItemSet.js}

@@ -5,8 +5,10 @@ import "react";
 import "react-use";
 import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
-import { bs_section, bs_wrapper, svg_logo, modifier, sec_title, sec_subtitle, tablet_col, bs_image, steps_wrapper, ol, li, line_points, point, step_num, bullet_details, bs_topic, bs_copy, bs_btns, bs_add_details } from "./StepItems.css.js";
-const StepItemsSet = ({
+import { StepItem } from "../StepItem/StepItem.js";
+import "../StepItem/StepItem.css.js";
+import { bs_section, bs_wrapper, svg_logo, modifier, sec_title, sec_subtitle, tablet_col, bs_image, steps_wrapper, ol, bs_btns, bs_add_details } from "./StepItemSet.css.js";
+const StepItemSet = ({
   id,
   variant: fullVariant = "primary",
   title,
@@ -17,9 +19,8 @@ const StepItemsSet = ({
   additionalDetails
 }) => {
   const variant = getVariant(fullVariant);
-  let counter = 0;
   return /* @__PURE__ */ jsx("section", { className: `${bs_section({ variant })}`, id: `id_${id}`, children: /* @__PURE__ */ jsxs("div", { className: `${bs_wrapper} containment`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "text_center", children: [
+    title || description && /* @__PURE__ */ jsxs("div", { className: "text_center", children: [
       /* @__PURE__ */ jsxs(
         "svg",
         {
@@ -49,11 +50,11 @@ const StepItemsSet = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx("h2", { className: `header_1 ${sec_title({ variant })}`, children: title }),
-      /* @__PURE__ */ jsx("div", { className: sec_subtitle, children: description })
+      title && /* @__PURE__ */ jsx("h2", { className: `header_1 ${sec_title({ variant })}`, children: title }),
+      description && /* @__PURE__ */ jsx("div", { className: sec_subtitle, children: /* @__PURE__ */ jsx(Fragment, { children: description }) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: `push_up_32 flex ${tablet_col}`, children: [
-      /* @__PURE__ */ jsx(
+      image && /* @__PURE__ */ jsx(
         "div",
         {
           className: bs_image,
@@ -61,24 +62,18 @@ const StepItemsSet = ({
           children: " "
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: steps_wrapper, children: /* @__PURE__ */ jsx("ol", { className: ol, children: stepItems.map(({ id: id2, title: title2, description: description2 }) => /* @__PURE__ */ jsxs("li", { className: `flex ${li}`, children: [
-        /* @__PURE__ */ jsx("div", { className: `${line_points({ variant })}`, children: /* @__PURE__ */ jsxs("div", { className: "flex middle", children: [
-          /* @__PURE__ */ jsx("div", { className: `${point({ variant })}`, children: " " }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `flex center middle ${step_num({ variant })}`,
-              children: ++counter
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: bullet_details, children: [
-          /* @__PURE__ */ jsx("span", { className: `${bs_topic({ variant })}`, role: "heading", children: title2 }),
-          /* @__PURE__ */ jsx("span", { className: bs_copy, children: description2 })
-        ] })
-      ] }, id2)) }) })
+      /* @__PURE__ */ jsx("div", { className: steps_wrapper, children: /* @__PURE__ */ jsx("ol", { className: ol, children: stepItems?.map((step, index) => /* @__PURE__ */ jsx(
+        StepItem,
+        {
+          id: `id_${id}`,
+          title: step?.title,
+          description: step?.description,
+          variant: step?.variant
+        },
+        index
+      )) }) })
     ] }),
-    callToActionRow && callToActionRow.length > 0 && /* @__PURE__ */ jsx(
+    Array.isArray(callToActionRow) && callToActionRow?.length > 0 && /* @__PURE__ */ jsx(
       "div",
       {
         className: `flex middle center push_up_32 text_center ${bs_btns}`,
@@ -109,5 +104,5 @@ const StepItemsSet = ({
   ] }) });
 };
 export {
-  StepItemsSet
+  StepItemSet
 };

package/dist/StepItemSet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './StepItemSet';
+export * from './StepItemSet.css';

package/dist/StepItemSet/index.js

@@ -0,0 +1,17 @@
+import { StepItemSet } from "./StepItemSet.js";
+import { bs_add_details, bs_btns, bs_image, bs_section, bs_wrapper, modifier, ol, sec_subtitle, sec_title, steps_wrapper, svg_logo, tablet_col } from "./StepItemSet.css.js";
+export {
+  StepItemSet,
+  bs_add_details,
+  bs_btns,
+  bs_image,
+  bs_section,
+  bs_wrapper,
+  modifier,
+  ol,
+  sec_subtitle,
+  sec_title,
+  steps_wrapper,
+  svg_logo,
+  tablet_col
+};

package/dist/TopicalNavItem/TopicalNavItem.css.d.ts

@@ -0,0 +1,5 @@
+export declare const picker_navItem: string;
+export declare const picker_itemProduct: string;
+export declare const picker_arrow: string;
+export declare const picker_itemContent: string;
+export declare const picker_navIcon: string;

package/dist/TopicalNavItem/TopicalNavItem.css.js

@@ -0,0 +1,13 @@
+/* empty css                                  */
+var picker_navItem = "dmebjx0";
+var picker_itemProduct = "dmebjx1";
+var picker_arrow = "dmebjx2";
+var picker_itemContent = "dmebjx3";
+var picker_navIcon = "dmebjx4";
+export {
+  picker_arrow,
+  picker_itemContent,
+  picker_itemProduct,
+  picker_navIcon,
+  picker_navItem
+};

package/dist/TopicalNavItem/TopicalNavItem.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { ImageInterface } from '../IconBillboard';
+
+export interface TopicalItemProps {
+    id: string;
+    icon?: ImageInterface;
+    displayText?: string;
+    targetUrl: string;
+}
+export declare const TopicalNavItem: FC<TopicalItemProps>;

package/dist/TopicalNavItem/TopicalNavItem.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { picker_navItem, picker_itemContent, picker_navIcon, picker_itemProduct, picker_arrow } from "./TopicalNavItem.css.js";
+const TopicalNavItem = ({
+  id,
+  icon,
+  displayText,
+  targetUrl
+}) => {
+  return /* @__PURE__ */ jsxs("a", { className: picker_navItem, href: targetUrl, id: `id_${id}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: picker_itemContent, children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: icon?.src,
+          alt: "",
+          className: picker_navIcon,
+          width: 24,
+          height: 24,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: picker_itemProduct, children: displayText })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        className: picker_arrow,
+        width: "12",
+        height: "20",
+        viewBox: "0 0 12 20",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M1.76378 0.46875L11.2941 9.99908L1.76378 19.5294L0.703125 18.4687L9.17295 9.99908L0.703125 1.52941L1.76378 0.46875Z",
+            fill: "#4A5560"
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  TopicalNavItem
+};

package/dist/TopicalNavItem/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TopicalNavItem.css';
+export * from './TopicalNavItem';

package/dist/TopicalNavItem/index.js

@@ -0,0 +1,10 @@
+import { picker_arrow, picker_itemContent, picker_itemProduct, picker_navIcon, picker_navItem } from "./TopicalNavItem.css.js";
+import { TopicalNavItem } from "./TopicalNavItem.js";
+export {
+  TopicalNavItem,
+  picker_arrow,
+  picker_itemContent,
+  picker_itemProduct,
+  picker_navIcon,
+  picker_navItem
+};

package/dist/TopicalNavSet/TopicalNavSet.css.d.ts

@@ -0,0 +1,3 @@
+export declare const picker_section: string;
+export declare const picker_container: string;
+export declare const picker_orient: string;

package/dist/TopicalNavSet/TopicalNavSet.css.js

@@ -0,0 +1,9 @@
+/* empty css                                 */
+var picker_section = "xbzzeo0";
+var picker_container = "xbzzeo1";
+var picker_orient = "xbzzeo2";
+export {
+  picker_container,
+  picker_orient,
+  picker_section
+};

package/dist/TopicalNavSet/TopicalNavSet.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { TopicalItemProps } from '../TopicalNavItem/TopicalNavItem';
+
+export interface TopicalNavSetProps {
+    id: string;
+    topicalNavigationItems: TopicalItemProps[];
+}
+export declare const TopicalNavSet: FC<TopicalNavSetProps>;

package/dist/TopicalNavSet/TopicalNavSet.js

@@ -0,0 +1,21 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { picker_section, picker_container, picker_orient } from "./TopicalNavSet.css.js";
+import { TopicalNavItem } from "../TopicalNavItem/TopicalNavItem.js";
+const TopicalNavSet = ({
+  id,
+  topicalNavigationItems
+}) => {
+  return /* @__PURE__ */ jsx("nav", { className: picker_section, children: /* @__PURE__ */ jsx("div", { className: picker_container, children: /* @__PURE__ */ jsx("div", { className: `${picker_orient} flex`, children: topicalNavigationItems?.map((nav, index) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    TopicalNavItem,
+    {
+      id: `id_${id}`,
+      icon: { src: nav?.icon?.src || "" },
+      displayText: nav?.displayText,
+      targetUrl: nav?.targetUrl
+    },
+    index
+  ) })) }) }) });
+};
+export {
+  TopicalNavSet
+};

package/dist/TopicalNavSet/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TopicalNavSet.css';
+export * from './TopicalNavSet';

package/dist/TopicalNavSet/index.js

@@ -0,0 +1,8 @@
+import { picker_container, picker_orient, picker_section } from "./TopicalNavSet.css.js";
+import { TopicalNavSet } from "./TopicalNavSet.js";
+export {
+  TopicalNavSet,
+  picker_container,
+  picker_orient,
+  picker_section
+};

package/dist/assets/AwardsBanner/AwardsBanner.css

@@ -9,6 +9,9 @@
   max-width: 1392px;
   width: calc(100% - 48px);
 }
+.section_spacer:has(._1amgyqo0) {
+  margin-top: 0px;
+}
 ._1amgyqo1 {
   min-height: 54px;
 }

package/dist/assets/AwardsItem/AwardsItem.css

@@ -4,7 +4,7 @@
   text-align: center;
   padding: 4px 0;
 }
-._16tnqb20 + ._16tnqb20::after {
+._16tnqb20::after {
   content: "";
   position: absolute;
   background-color: #bdbdbd;
@@ -14,6 +14,12 @@
   top: 50%;
   transform: translateY(-50%);
 }
+._16tnqb20:first-child::after {
+  display: none;
+}
+._16tnqb20 > img {
+  display: inline-block;
+}
 ._16tnqb21 {
   color: #ddd;
   font-size: 12px;
@@ -27,10 +33,10 @@
   margin-bottom: 2px;
 }
 @media (max-width: 1023px) {
-  ._16tnqb20 + ._16tnqb20 {
+  ._16tnqb20 {
     padding-top: 18px;
   }
-  ._16tnqb20 + ._16tnqb20::after {
+  ._16tnqb20::after {
     left: 50%;
     top: 0;
     -webkit-transform: translateX(-50%) rotate(90deg);

package/dist/assets/ContentBanner/ContentBanner.css

@@ -14,6 +14,12 @@
   background: var(--_1073cm8m);
   color: var(--_1073cm8n);
 }
+._1bwl51g5 {
+  display: block;
+  font: 700 18px / 1.3 var(--main-font-family);
+  margin-bottom: 8px;
+  letter-spacing: .2px;
+}
 ._1bwl51g6 {
   background: var(--_1073cm84);
   background-clip: text;
@@ -21,48 +27,64 @@
   text-shadow: 0px 0px #00000000;
 }
 ._1bwl51g7 {
-  color: var(--_1073cm8a);
+  background: var(--_1073cm8b);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 0px 0px #00000000;
 }
 ._1bwl51g8 {
-  color: var(--_1073cm8h);
+  color: var(--_1073cm8k);
 }
 ._1bwl51g9 {
-  color: var(--_1073cm8o);
+  color: var(--_1073cm8n);
 }
 ._1bwl51ga {
+  margin-bottom: 24px;
+}
+._1bwl51gb {
   padding-top: 80px;
   padding-bottom: 80px;
 }
-._1bwl51gb {
+._1bwl51gc {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
+._1bwl51gd {
   margin-top: 9px;
 }
-._1bwl51gb p {
+._1bwl51gd p {
   font: 400 1rem/1.5 var(--main-font-family);
 }
-._1bwl51gb > *+* {
+._1bwl51gd > * + * {
   margin-top: 10px;
 }
-._1bwl51gc {
+._1bwl51ge {
   align-items: center;
   display: flex;
   justify-content: center;
   margin-top: 1.5rem;
   gap: 48px;
 }
-._1bwl51gd {
+._1bwl51gf {
   margin-left: 48px;
 }
 @media screen and (max-width:1023px) {
-  ._1bwl51ga {
+  ._1bwl51gb {
     padding-top: 48px;
     padding-bottom: 48px;
   }
-  ._1bwl51gc {
+  ._1bwl51ge {
     flex-direction: column;
     gap: 16px;
   }
-  ._1bwl51gd {
+  ._1bwl51gf {
     margin-top: 24px;
     margin-left: 0;
   }
+}
+@media screen and (max-width:768px) {
+  ._1bwl51gc {
+    padding-top: 24px;
+    padding-bottom: 24px;
+  }
 }

package/dist/assets/StepItem/StepItem.css

@@ -0,0 +1,144 @@
+._1y8r7dk0 {
+  position: relative;
+}
+._1y8r7dk0:first-child > :first-child::before {
+  height: calc(100% - 31px);
+  bottom: 0;
+}
+._1y8r7dk0:last-child > :first-child::before {
+  top: 0;
+  height: 65px;
+}
+._1y8r7dk1 {
+  position: relative;
+  isolation: isolate;
+}
+._1y8r7dk1::before {
+  content: "";
+  position: absolute;
+  height: 100%;
+  border-left: 1px dashed transparent;
+  left: 7px;
+  z-index: -1;
+}
+._1y8r7dk2 {
+  border-color: var(--_1073cm82);
+}
+._1y8r7dk3 {
+  border-color: var(--_1073cm89);
+}
+._1y8r7dk4 {
+  border-color: var(--_1073cm8g);
+}
+._1y8r7dk5 {
+  border-color: var(--_1073cm8n);
+}
+._1y8r7dk6 {
+  border: 4px solid transparent;
+  border-radius: 50%;
+  height: 7px;
+  width: 7px;
+  box-sizing: content-box;
+}
+._1073cm80 ._1y8r7dk7 {
+  border-color: #4D85B0;
+  background: var(--_1073cm81);
+}
+._1es6o1h0 ._1y8r7dk7 {
+  border-color: #4A5560;
+  background: var(--_1073cm81);
+}
+._1073cm80 ._1y8r7dk8 {
+  border-color: #4D85B0;
+  background: var(--_1073cm88);
+}
+._1es6o1h0 ._1y8r7dk8 {
+  border-color: #4A5560;
+  background: var(--_1073cm88);
+}
+._1073cm80 ._1y8r7dk9 {
+  border-color: #FAA74A;
+  background: #1E3860;
+}
+._1es6o1h0 ._1y8r7dk9 {
+  border-color: #FAA74A;
+  background: var(--_1073cm8f);
+}
+._1073cm80 ._1y8r7dka {
+  border-color: #FAA74A;
+  background: #1E3860;
+}
+._1es6o1h0 ._1y8r7dka {
+  border-color: #FAA74A;
+  background: var(--_1073cm8m);
+}
+._1y8r7dkb {
+  font: 500 60px/1.13 var(--header-font-family);
+  letter-spacing: 0.2px;
+  height: 72px;
+  width: 72px;
+  margin-left: 16px;
+}
+._1y8r7dkc {
+  color: var(--_1073cm83);
+}
+._1y8r7dkd {
+  color: var(--_1073cm8a);
+}
+._1y8r7dke {
+  color: var(--_1073cm8h);
+}
+._1y8r7dkf {
+  color: var(--_1073cm8o);
+}
+._1y8r7dkg {
+  flex: 1 1 0%;
+  margin-left: 24px;
+}
+._1y8r7dkh {
+  font: 600 24px/1.33 var(--header-font-family);
+  letter-spacing: 0.2px;
+  display: block;
+}
+._1y8r7dki {
+  color: var(--_1073cm83);
+}
+._1y8r7dkj {
+  color: var(--_1073cm8a);
+}
+._1y8r7dkk {
+  color: var(--_1073cm8h);
+}
+._1y8r7dkl {
+  color: var(--_1073cm8o);
+}
+._1y8r7dkm {
+  margin-top: 8px;
+  display: block;
+}
+._1y8r7dkm > * {
+  font: 400 16px/1.5 var(--main-font-family);
+}
+@media screen and (max-width:1023px) {
+  ._1y8r7dk1::before {
+    display: none;
+  }
+  ._1y8r7dk6 {
+    display: none;
+  }
+  ._1y8r7dkb {
+    height: 52px;
+    width: 52px;
+    font-size: 40px;
+    line-height: 1.25;
+    margin-left: 0px;
+  }
+  ._1y8r7dkh {
+    font-size: 18px;
+    line-height: 1.77;
+  }
+  ._1y8r7dkm {
+    font-size: 14px;
+    line-height: 1.5;
+  }
+}

package/dist/assets/StepItemSet/StepItemSet.css

@@ -0,0 +1,119 @@
+._18par6f0 {
+  padding-bottom: 48px;
+  padding-top: 48px;
+}
+._18par6f1 {
+  background: var(--_1073cm81);
+  color: var(--_1073cm82);
+}
+._18par6f2 {
+  background: var(--_1073cm88);
+  color: var(--_1073cm82);
+}
+._18par6f3 {
+  background: var(--_1073cm8f);
+  color: var(--_1073cm82);
+}
+._18par6f4 {
+  background: var(--_1073cm8m);
+  color: var(--_1073cm82);
+}
+._18par6f6 {
+  margin-bottom: 16px;
+}
+._18par6f8 {
+  fill: #1E3860;
+}
+._18par6f9 {
+  fill: #1E3860;
+}
+._18par6fa {
+  fill: #FFF;
+}
+._18par6fb {
+  fill: #FFF;
+}
+._18par6fd {
+  color: var(--_1073cm83);
+}
+._18par6fe {
+  color: var(--_1073cm8a);
+}
+._18par6ff {
+  color: var(--_1073cm8h);
+}
+._18par6fg {
+  color: var(--_1073cm8o);
+}
+._18par6fh {
+  margin-top: 16px;
+  text-align: center;
+}
+._18par6fh p {
+  font-size: 1rem;
+  line-height: 1.5;
+}
+._18par6fj {
+  min-height: 378px;
+  width: 48%;
+  background-position: center center;
+  background-size: cover;
+}
+._18par6fk {
+  padding: 27px 48px;
+  flex: 1 1 0%;
+}
+._18par6fl {
+  padding: 0;
+  list-style: none;
+  margin: 0;
+}
+._18par6fl > li + li > :first-child > :first-child {
+  padding-top: 24px;
+}
+._18par6fl > li + li > :last-child {
+  padding-top: 24px;
+}
+._18par6fm > * + * {
+  margin-left: 48px;
+}
+._18par6fn {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+  max-width: 800px;
+}
+@media screen and (min-width:1024px) {
+  ._18par6f5 {
+    width: min(1392px,calc(100% - 48px));
+  }
+}
+@media screen and (max-width:1280px) {
+  ._18par6fk {
+    padding-left: 24px;
+    padding-right: 0;
+  }
+}
+@media screen and (max-width:1023px) {
+  ._18par6fi {
+    flex-direction: column;
+    margin-top: 24px;
+  }
+  ._18par6fj {
+    width: 100%;
+    min-height: 183px;
+    aspect-ratio: 16 / 9;
+  }
+  ._18par6fk {
+    padding: 0px;
+    margin-top: 24px;
+  }
+  ._18par6fm {
+    flex-direction: column;
+    margin-top: 24px;
+  }
+  ._18par6fm > * + * {
+    margin-left: 0px;
+    margin-top: 24px;
+  }
+}