@axos-web-dev/shared-components 0.0.118 → 0.0.119

package/dist/TextBlock/TextBlock.css.d.ts

@@ -1,3 +1,4 @@
+export declare const textBlockSection: string;
 export declare const textBlockParagraph: string;
 export declare const textBlockHeader: string;
 export declare const textBlockList: string;

package/dist/TextBlock/TextBlock.css.js

@@ -1,11 +1,13 @@
 /* empty css                                */
 /* empty css                                   */
 /* empty css                             */
-var textBlockParagraph = "_16g7rvn0";
-var textBlockHeader = "_16g7rvn1";
-var textBlockList = "_16g7rvn2";
+var textBlockSection = "_16g7rvn0";
+var textBlockParagraph = "_16g7rvn1";
+var textBlockHeader = "_16g7rvn2";
+var textBlockList = "_16g7rvn3";
 export {
   textBlockHeader,
   textBlockList,
-  textBlockParagraph
+  textBlockParagraph,
+  textBlockSection
 };

package/dist/TextBlock/TextBlock.d.ts

@@ -4,5 +4,6 @@ export interface TextBlockProps {
     bodyCopy: ReactNode | string;
     headline: ReactNode | string;
     id?: string;
+    internalName?: string;
 }
 export declare const TextBlock: (props: TextBlockProps) => import("react/jsx-runtime").JSX.Element;

package/dist/TextBlock/TextBlock.js

@@ -1,10 +1,18 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { textBlockHeader } from "./TextBlock.css.js";
+import clsx from "clsx";
+import { textBlockSection, textBlockHeader } from "./TextBlock.css.js";
 const TextBlock = (props) => {
-  return /* @__PURE__ */ jsxs("div", { id: `${props.id}`, className: "containment", children: [
-    /* @__PURE__ */ jsx("h2", { className: `header_2 text_center ${textBlockHeader}`, children: props.headline }),
-    /* @__PURE__ */ jsx("div", { children: props.bodyCopy })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: props.internalName?.replace(/ /g, "-") ?? props.id,
+      className: clsx("containment", textBlockSection),
+      children: [
+        /* @__PURE__ */ jsx("h2", { className: `header_2 text_center ${textBlockHeader}`, children: props.headline }),
+        /* @__PURE__ */ jsx("div", { children: props.bodyCopy })
+      ]
+    }
+  );
 };
 export {
   TextBlock

package/dist/TextBlock/index.js

@@ -1,8 +1,9 @@
 import { TextBlock } from "./TextBlock.js";
-import { textBlockHeader, textBlockList, textBlockParagraph } from "./TextBlock.css.js";
+import { textBlockHeader, textBlockList, textBlockParagraph, textBlockSection } from "./TextBlock.css.js";
 export {
   TextBlock,
   textBlockHeader,
   textBlockList,
-  textBlockParagraph
+  textBlockParagraph,
+  textBlockSection
 };

package/dist/VideoTile/VideoTile.css.d.ts

@@ -1,3 +1,4 @@
+export declare const video_tile: string;
 export declare const show: string;
 export declare const video_title: string;
 export declare const transcript_btn: string;

package/dist/VideoTile/VideoTile.css.js

@@ -2,19 +2,20 @@
 /* empty css                                */
 /* empty css                                   */
 /* empty css                             */
-var show = "_16puo4g0";
-var video_title = "_16puo4g1";
-var transcript_btn = "_16puo4g2";
-var item = "_16puo4g3";
-var video_container = "_16puo4g4";
-var mb_8 = "_16puo4g5";
-var toggle_container = "_16puo4g6";
-var expand_icon = "_16puo4g7";
-var transcript_container = "_16puo4g8";
-var w_100 = "_16puo4g9";
-var transcript_content = "_16puo4ga";
-var vidyard_height = "_16puo4gb";
-var hide_transcript = "_16puo4gc";
+var video_tile = "_16puo4g0";
+var show = "_16puo4g1";
+var video_title = "_16puo4g2";
+var transcript_btn = "_16puo4g3";
+var item = "_16puo4g4";
+var video_container = "_16puo4g5";
+var mb_8 = "_16puo4g6";
+var toggle_container = "_16puo4g7";
+var expand_icon = "_16puo4g8";
+var transcript_container = "_16puo4g9";
+var w_100 = "_16puo4ga";
+var transcript_content = "_16puo4gb";
+var vidyard_height = "_16puo4gc";
+var hide_transcript = "_16puo4gd";
 export {
   expand_icon,
   hide_transcript,
@@ -26,6 +27,7 @@ export {
   transcript_container,
   transcript_content,
   video_container,
+  video_tile,
   video_title,
   vidyard_height,
   w_100

package/dist/VideoTile/VideoTile.interface.d.ts

@@ -10,4 +10,5 @@ export interface VideoTileInterface {
     videoPlayer: string;
     transcript: string;
     description?: string | ReactNode;
+    internalName?: string;
 }

package/dist/VideoTile/VideoTile.js

@@ -11,7 +11,7 @@ import SvgChevronUp from "../icons/ChevronUp.js";
 import ReactMarkdown from "react-markdown";
 import { useToggle } from "react-use";
 import { VideoInit } from "./VideoInit.js";
-import { video_container, mb_8, video_title, vidyard_height, transcript_container, toggle_container, transcript_btn, expand_icon, transcript_content, show, hide_transcript } from "./VideoTile.css.js";
+import { video_tile, video_container, mb_8, video_title, vidyard_height, transcript_container, toggle_container, transcript_btn, expand_icon, transcript_content, show, hide_transcript } from "./VideoTile.css.js";
 const VideoTile = ({
   //   ariaLabel,
   title,
@@ -22,70 +22,79 @@ const VideoTile = ({
   videoPlayer,
   transcript,
   id,
-  description
+  description,
+  internalName
 }) => {
   const [on, toggle] = useToggle(false);
   const handleToggleClick = (event) => {
     event.preventDefault();
     toggle();
   };
-  return /* @__PURE__ */ jsxs("div", { id, className: `flex center`, children: [
-    /* @__PURE__ */ jsx(VideoInit, {}),
-    /* @__PURE__ */ jsxs("div", { className: `containment ${video_container} flex_col`, children: [
-      title && /* @__PURE__ */ jsx("h2", { className: `${mb_8} ${video_title}`, children: title }),
-      description && /* @__PURE__ */ jsx("div", { className: "push_up", children: description }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          id: "",
-          className: `${mb_8} ${vidyard_height} vidyard-player-container rounded bordered`,
-          "data-uuid": videoId,
-          children: /* @__PURE__ */ jsx(
-            "img",
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: internalName?.replace(/ /g, "-") ?? id,
+      className: `flex center ${video_tile}`,
+      children: [
+        /* @__PURE__ */ jsx(VideoInit, {}),
+        /* @__PURE__ */ jsxs("div", { className: `containment ${video_container} flex_col`, children: [
+          title && /* @__PURE__ */ jsx("h2", { className: `${mb_8} ${video_title}`, children: title }),
+          description && /* @__PURE__ */ jsx("div", { className: "push_up", children: description }),
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              style: {
-                width: "100%",
-                margin: "auto",
-                display: "block",
-                maxWidth
-              },
-              alt: "",
-              className: "vidyard-player-embed",
-              src: thumbnailImage ? thumbnailImage : `https://play.vidyard.com/${videoId}.jpg`,
+              id: "",
+              className: `${mb_8} ${vidyard_height} vidyard-player-container rounded bordered`,
               "data-uuid": videoId,
-              "data-v": "4",
-              "data-type": videoPlayer,
-              "data-width": maxWidth,
-              "data-height": "331px"
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  style: {
+                    width: "100%",
+                    margin: "auto",
+                    display: "block",
+                    maxWidth
+                  },
+                  alt: "",
+                  className: "vidyard-player-embed",
+                  src: thumbnailImage ? thumbnailImage : `https://play.vidyard.com/${videoId}.jpg`,
+                  "data-uuid": videoId,
+                  "data-v": "4",
+                  "data-type": videoPlayer,
+                  "data-width": maxWidth,
+                  "data-height": "331px"
+                }
+              )
             }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: `${transcript_container}`, children: [
-        /* @__PURE__ */ jsxs(
-          "a",
-          {
-            className: `${toggle_container}`,
-            "aria-expanded": on,
-            href: "#",
-            "aria-label": "",
-            onClick: handleToggleClick,
-            children: [
-              /* @__PURE__ */ jsx("span", { className: `${transcript_btn}`, children: "Review transcript" }),
-              /* @__PURE__ */ jsx("span", { className: expand_icon, "aria-hidden": "true", children: on ? /* @__PURE__ */ jsx(SvgChevronUp, {}) : /* @__PURE__ */ jsx(SvgChevronDown, {}) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-          ReactMarkdown,
-          {
-            className: `${transcript_content} ${on ? show : hide_transcript}`,
-            children: transcript
-          }
-        ) })
-      ] })
-    ] })
-  ] }, id);
+          ),
+          /* @__PURE__ */ jsxs("div", { className: `${transcript_container}`, children: [
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                className: `${toggle_container}`,
+                "aria-expanded": on,
+                href: "#",
+                "aria-label": "",
+                onClick: handleToggleClick,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: `${transcript_btn}`, children: "Review transcript" }),
+                  /* @__PURE__ */ jsx("span", { className: expand_icon, "aria-hidden": "true", children: on ? /* @__PURE__ */ jsx(SvgChevronUp, {}) : /* @__PURE__ */ jsx(SvgChevronDown, {}) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+              ReactMarkdown,
+              {
+                className: `${transcript_content} ${on ? show : hide_transcript}`,
+                children: transcript
+              }
+            ) })
+          ] })
+        ] })
+      ]
+    },
+    id
+  );
 };
 export {
   VideoTile

package/dist/VideoTile/index.js

@@ -1,6 +1,6 @@
 import { VideoInit } from "./VideoInit.js";
 import { VideoTile } from "./VideoTile.js";
-import { expand_icon, hide_transcript, item, mb_8, show, toggle_container, transcript_btn, transcript_container, transcript_content, video_container, video_title, vidyard_height, w_100 } from "./VideoTile.css.js";
+import { expand_icon, hide_transcript, item, mb_8, show, toggle_container, transcript_btn, transcript_container, transcript_content, video_container, video_tile, video_title, vidyard_height, w_100 } from "./VideoTile.css.js";
 export {
   VideoInit,
   VideoTile,
@@ -14,6 +14,7 @@ export {
   transcript_container,
   transcript_content,
   video_container,
+  video_tile,
   video_title,
   vidyard_height,
   w_100

package/dist/VideoWrapper/VideoWrapper.css.d.ts

@@ -1,3 +1,4 @@
+export declare const video_tile_set: string;
 export declare const grid_wrapper: string;
 export declare const grid_2: string;
 export declare const grid_3: string;

package/dist/VideoWrapper/VideoWrapper.css.js

@@ -1,9 +1,11 @@
 /* empty css                                */
-var grid_wrapper = "_2i5u4u0";
-var grid_2 = "_2i5u4u1";
-var grid_3 = "_2i5u4u2";
+var video_tile_set = "_2i5u4u0";
+var grid_wrapper = "_2i5u4u1";
+var grid_2 = "_2i5u4u2";
+var grid_3 = "_2i5u4u3";
 export {
   grid_2,
   grid_3,
-  grid_wrapper
+  grid_wrapper,
+  video_tile_set
 };

package/dist/VideoWrapper/index.d.ts

@@ -6,5 +6,6 @@ export interface VideoWrapperProps {
     backgroundColor?: string;
     title: string;
     id: string;
+    internalName?: string;
 }
 export declare const VideoWrapper: FC<VideoWrapperProps>;

package/dist/VideoWrapper/index.js

@@ -4,36 +4,46 @@ import { VideoTile } from "../VideoTile/VideoTile.js";
 /* empty css                                */
 /* empty css                                   */
 /* empty css                                        */
-import { grid_wrapper, grid_3, grid_2 } from "./VideoWrapper.css.js";
+import { video_tile_set, grid_wrapper, grid_3, grid_2 } from "./VideoWrapper.css.js";
 const VideoWrapper = ({
   title,
   videoTiles,
   backgroundColor,
-  id
+  id,
+  internalName
 }) => {
-  return /* @__PURE__ */ jsx("div", { id, style: backgroundColor ? { backgroundColor } : {}, children: /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs("div", { className: "containment", children: [
-    /* @__PURE__ */ jsx("div", { className: "section_header", children: /* @__PURE__ */ jsx("h2", { className: "header_1", children: title }) }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `${grid_wrapper} ${videoTiles.length % 3 === 0 ? grid_3 : grid_2}`,
-        children: videoTiles?.map((videoItem, index) => /* @__PURE__ */ jsx(
-          VideoTile,
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      style: backgroundColor ? { backgroundColor } : {},
+      className: video_tile_set,
+      children: /* @__PURE__ */ jsx("section", { id: internalName?.replace(/ /g, "-"), children: /* @__PURE__ */ jsxs("div", { className: "containment", children: [
+        /* @__PURE__ */ jsx("div", { className: "section_header", children: /* @__PURE__ */ jsx("h2", { className: "header_1", children: title }) }),
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            id: videoItem.id,
-            title: videoItem?.title,
-            videoId: videoItem?.videoId,
-            thumbnailImage: videoItem?.thumbnailImage,
-            displayType: videoItem?.displayType,
-            maxWidth: videoItem?.maxWidth || "588px",
-            videoPlayer: videoItem.displayType,
-            transcript: videoItem?.transcript
-          },
-          index
-        ))
-      }
-    )
-  ] }) }) }, id);
+            className: `${grid_wrapper} ${videoTiles.length % 3 === 0 ? grid_3 : grid_2}`,
+            children: videoTiles?.map((videoItem, index) => /* @__PURE__ */ jsx(
+              VideoTile,
+              {
+                id: videoItem.id,
+                title: videoItem?.title,
+                videoId: videoItem?.videoId,
+                thumbnailImage: videoItem?.thumbnailImage,
+                displayType: videoItem?.displayType,
+                maxWidth: videoItem?.maxWidth || "588px",
+                videoPlayer: videoItem.displayType,
+                transcript: videoItem?.transcript
+              },
+              index
+            ))
+          }
+        )
+      ] }) })
+    },
+    id
+  );
 };
 export {
   VideoWrapper

package/dist/assets/ArticlesSet/ArticlesSet.css

@@ -1,5 +1,5 @@
 .kjcqgc0 {
-  padding: 56px 0;
+  margin: 56px 0;
   background-color: #fff;
 }
 .kjcqgc1 {

package/dist/assets/Calculators/AnnualFeeCalculator/AnnualFeeCalculator.css

@@ -31,7 +31,6 @@
   flex-basis: 50%;
 }
 ._7zr6kta {
-  color: #1e3860;
   font-family: var(--main-font-family);
   font-size: 34px;
   font-weight: 500;
@@ -39,13 +38,25 @@
   line-height: 1.29;
 }
 ._7zr6ktb {
-  width: 100%;
+  color: var(--_1073cm83);
 }
 ._7zr6ktc {
+  color: var(--_1073cm8a);
+}
+._7zr6ktd {
+  color: var(--_1073cm8h);
+}
+._7zr6kte {
+  color: var(--_1073cm8o);
+}
+._7zr6ktf {
+  width: 100%;
+}
+._7zr6ktg {
   position: relative;
   padding-right: 1rem;
 }
-._7zr6ktc::after {
+._7zr6ktg::after {
   content: "";
   position: absolute;
   background-color: #bdbdbd;
@@ -55,16 +66,16 @@
   top: 0;
   bottom: 0;
 }
-._7zr6ktd {
+._7zr6kth {
   border-bottom: 1px solid #bdbdbd;
   padding: 1.5rem 0;
 }
-._7zr6kte {
+._7zr6kti {
   margin: auto;
   min-width: 100%;
   padding: 77px 0 60px;
 }
-._7zr6ktf {
+._7zr6ktj {
   width: 100%;
   -webkit-appearance: none;
   height: 12px;
@@ -75,7 +86,7 @@
   transition: opacity .2s, background .2s;
   border-radius: 1rem;
 }
-._7zr6ktf::-webkit-slider-thumb {
+._7zr6ktj::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 2rem;
@@ -87,7 +98,7 @@
   -webkit-transition: all .35s ease;
   transition: all .35s ease;
 }
-._7zr6ktf::-moz-range-thumb {
+._7zr6ktj::-moz-range-thumb {
   width: 2rem;
   height: 2rem;
   border: 1px solid #2670af;
@@ -97,11 +108,11 @@
   -moz-transition: all .35s ease;
   transition: all .35s ease;
 }
-._7zr6ktf::-webkit-slider-thumb:hover {
+._7zr6ktj::-webkit-slider-thumb:hover {
   -webkit-transform: scale(1.2);
   transform: scale(1.2);
 }
-._7zr6ktf::-moz-range-thumb:hover {
+._7zr6ktj::-moz-range-thumb:hover {
   transform: scale(1.2);
 }
 @media screen and (max-width:1023px) {
@@ -111,10 +122,10 @@
   ._7zr6kt8 {
     flex-direction: column;
   }
-  ._7zr6ktg {
+  ._7zr6ktk {
     padding-top: 0!important;
   }
-  ._7zr6kth {
+  ._7zr6ktl {
     padding-bottom: 0!important;
   }
 }

package/dist/assets/Calculators/calculator.css

@@ -1,47 +1,60 @@
-.iois7n0 {
+.iois7n1 {
   margin: 1.5em 0;
   font: 400 16px / 1.3 var(--main-font-family);
 }
-.iois7n1 {
+.iois7n2 {
   background: var(--_1073cm81);
   color: var(--_1073cm82);
 }
-.iois7n2 {
+.iois7n3 {
   background: var(--_1073cm88);
   color: var(--_1073cm89);
 }
-.iois7n3 {
+.iois7n4 {
   background: var(--_1073cm8f);
   color: var(--_1073cm8g);
 }
-.iois7n4 {
+.iois7n5 {
   background: var(--_1073cm8m);
   color: var(--_1073cm8n);
 }
-.iois7n5 {
+.iois7n6 {
   font: 600 2.5rem / 1.25 var(--header-font-family);
 }
-.iois7n6 {
+.iois7n7 {
   background: var(--_1073cm84);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0px 0px #00000000;
 }
-.iois7n7 {
+.iois7n8 {
   background: var(--_1073cm8b);
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0px 0px #00000000;
 }
-.iois7n8 {
+.iois7n9 {
   color: var(--_1073cm8h);
 }
-.iois7n9 {
+.iois7na {
   color: var(--_1073cm8o);
 }
+main > div:nth-last-child(2) > .iois7n0 {
+  margin-bottom: 3.5rem;
+}
 @media screen and (max-width:768px) {
-  .iois7n5 {
+  .iois7n6 {
     font-size: 28px;
     line-height: 1.29;
   }
+}
+@media screen and (max-width: 1023px) {
+  main > div:nth-last-child(2) > .iois7n0 {
+    margin-bottom: 42px;
+  }
+}
+@media screen and (max-width: 768px) {
+  main > div:nth-last-child(2) > .iois7n0 {
+    margin-bottom: 2rem;
+  }
 }