@axos-web-dev/shared-components 0.0.66 → 0.0.68

package/dist/Table/Table.d.ts

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import { CellProps, RowProps, TableContainerProps, TableProps } from './Table.interface';
 
 export declare const TableContainer: ({ tableTitle, tableBody, tableFooter, tableType, tableDescription, internalName, id, }: TableContainerProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Table: ({ variant, children, highlight, tableType, alternateColorRows, }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ variant, children, highlight, tableType, alternateColorRows, className, style, }: TableProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableRow: ({ children, ...props }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TableHead: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
 export declare const TableBody: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
@@ -53,7 +53,7 @@ export declare const TableCell: ({ children, as, variant, highlighted, ...props
     itemRef?: string | undefined;
     results?: number | undefined;
     security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
+    unselectable?: "off" | "on" | undefined;
     inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;

package/dist/Table/Table.interface.d.ts

@@ -1,4 +1,4 @@
-import { HtmlHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import { CSSProperties, HtmlHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 
 export interface RowProps extends HtmlHTMLAttributes<HTMLTableRowElement>, PropsWithChildren {
 }
@@ -12,6 +12,8 @@ export interface TableProps extends PropsWithChildren {
     highlight?: "First Row" | "Last Row" | "First and Last Row" | undefined;
     tableType?: "Standard" | "Rate";
     alternateColorRows?: boolean;
+    className?: string;
+    style?: CSSProperties;
 }
 export interface TableContainerProps extends PropsWithChildren {
     id?: string;

package/dist/Table/Table.js

@@ -33,13 +33,21 @@ const Table = ({
   children,
   highlight,
   tableType = "Standard",
-  alternateColorRows = false
+  alternateColorRows = false,
+  className,
+  style
 }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: tableWrapper({ variant: getVariant(variant) }),
-      style: tableType === "Rate" ? { width: "90%", border: "none" } : {},
+      className: clsx(
+        tableWrapper({ variant: getVariant(variant) }),
+        className
+      ),
+      style: {
+        ...style,
+        ...tableType === "Rate" && { width: "90%", border: "none" }
+      },
       children: /* @__PURE__ */ jsx(
         "table",
         {

package/dist/TopicalNavItem/TopicalNavItem.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
 import { ImageInterface } from '../IconBillboard';
+import { FC } from 'react';
 
 export interface TopicalItemProps {
     id: string;

package/dist/TopicalNavItem/TopicalNavItem.js

@@ -6,40 +6,49 @@ const TopicalNavItem = ({
   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",
+  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",
           {
-            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"
+            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"
+              }
+            )
           }
         )
-      }
-    )
-  ] });
+      ]
+    },
+    `id_${id}`
+  );
 };
 export {
   TopicalNavItem

package/dist/TopicalNavSet/TopicalNavSet.js

@@ -1,11 +1,11 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { picker_section, picker_container, picker_orient } from "./TopicalNavSet.css.js";
+import { jsx } from "react/jsx-runtime";
 import { TopicalNavItem } from "../TopicalNavItem/TopicalNavItem.js";
+import { picker_section, picker_container, picker_orient } from "./TopicalNavSet.css.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(
+  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) => /* @__PURE__ */ jsx(
     TopicalNavItem,
     {
       id: `id_${id}`,
@@ -13,8 +13,8 @@ const TopicalNavSet = ({
       displayText: nav?.displayText,
       targetUrl: nav?.targetUrl
     },
-    index
-  ) })) }) }) });
+    `id_${id}`
+  )) }) }) });
 };
 export {
   TopicalNavSet

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

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 export interface VideoTileInterface {
     id: string;
     title: string;
@@ -7,4 +9,5 @@ export interface VideoTileInterface {
     maxWidth: string | number;
     videoPlayer: string;
     transcript: string;
+    description?: string | ReactNode;
 }

package/dist/VideoTile/VideoTile.js

@@ -21,7 +21,8 @@ const VideoTile = ({
   maxWidth = "588px",
   videoPlayer,
   transcript,
-  id
+  id,
+  description
 }) => {
   const [on, toggle] = useToggle(false);
   const handleToggleClick = (event) => {
@@ -32,6 +33,7 @@ const VideoTile = ({
     /* @__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",
         {

package/dist/assets/CallToActionBar/CallToActionBar.css

@@ -10,69 +10,78 @@
   align-items: center;
 }
 ._1tdyl741 {
-  height: -webkit-fit-content;
+  height: 100%;
 }
 ._1tdyl742 {
+  height: -webkit-fit-content;
+}
+._1tdyl743 {
   width: 256px;
   height: 256px;
 }
-._1tdyl743 {
+._1tdyl744 {
   width: 491px;
   height: 256px;
 }
-._1tdyl744 {
+._1tdyl745 {
   width: 160px;
   height: 160px;
 }
-._1tdyl745 {
+._1tdyl746 {
   width: 306px;
   height: 160px;
 }
-._1tdyl746 {
+._1tdyl747 {
   height: 256px;
 }
-._1tdyl747 {
+._1tdyl748 {
   height: 216px;
 }
-._1tdyl748 {
+._1tdyl749 {
   height: 160px;
 }
-._1tdyl749 {
+._1tdyl74a {
   height: 120px;
 }
-._1tdyl74a {
+._1tdyl74b {
   height: 88px;
 }
-._1tdyl74b {
+._1tdyl74c {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   gap: 24px;
 }
-._1tdyl74c {
+._1tdyl74d {
   position: relative;
   top: -20px;
+  max-height: 200px;
 }
-._1tdyl74e {
+._1tdyl74f {
   filter: drop-shadow(0 1px 3px rgb(255 255 255/0.4));
 }
-._1tdyl74e .containment .promo_wrapper {
+._1tdyl74f .containment .promo_wrapper {
   min-height: 0;
 }
-._1tdyl74f {
+._1tdyl74g {
   position: fixed;
   top: 10px;
   z-index: 999;
   animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
   margin: -10px 0;
 }
-._1tdyl74g {
+._1tdyl741 > img {
+  flex: 0 0 316px;
+  max-width: fit-content;
+  height: 100%;
+}
+._1tdyl74h {
   gap: 24px;
 }
-._1tdyl74g .sc__btn {
+._1tdyl74h .sc__btn {
   margin-left: 0;
 }
-._1tdyl746 ._1tdyl74g, ._1tdyl747 ._1tdyl74g {
+._1tdyl747 ._1tdyl74h, ._1tdyl748 ._1tdyl74h {
   margin-top: 24px;
 }
 @media screen and (max-width:1127px) {
@@ -95,14 +104,14 @@
   ._1tdyl740 .flex {
     flex-direction: column;
   }
-  ._1tdyl74d {
+  ._1tdyl74e {
     text-align: center;
     flex-direction: column;
   }
-  ._1tdyl74d p {
+  ._1tdyl74e p {
     margin-top: 8px;
   }
-  ._1tdyl74f {
+  ._1tdyl74g {
     position: fixed;
     top: 10px;
     z-index: 999;
@@ -113,15 +122,14 @@
   ._1tdyl741 > img {
     position: unset;
     margin-top: 32px;
-    width: 375px !important;
-    height: 196px !important;
+    max-height: 200px;
     object-fit: cover;
   }
-  ._1tdyl74g {
+  ._1tdyl74h {
     justify-content: center;
     padding: 24px;
   }
-  ._1tdyl74h {
+  ._1tdyl74i {
     margin-top: 1rem;
   }
 }
@@ -129,19 +137,19 @@
   ._1tdyl740 .flex {
     gap: 24px;
   }
-  ._1tdyl74d {
+  ._1tdyl74e {
     gap: 24px;
   }
 }
 @media screen and (max-width:510px) {
-  ._1tdyl74g {
+  ._1tdyl74h {
     gap: 24px;
     flex-direction: column;
     margin-right: 0;
   }
 }
 @media screen and (max-width: 1023px) {
-  ._1tdyl746 ._1tdyl74g, ._1tdyl747 ._1tdyl74g {
+  ._1tdyl747 ._1tdyl74h, ._1tdyl748 ._1tdyl74h {
     margin-top: 0;
   }
 }

package/dist/assets/Carousel/Carousel.css

@@ -76,6 +76,7 @@
   gap: 10px;
   text-align: center;
   justify-content: center;
+  font-style: normal;
 }
 .jgs3fsh {
   font-size: 18px;
@@ -120,6 +121,7 @@
 }
 .jgs3fsq {
   display: flex;
+  justify-content: center;
 }
 .jgs3fsr {
   display: flex;

package/dist/assets/Chevron/Chevron.css

@@ -2,10 +2,10 @@
   font-weight: 600;
   opacity: 1;
   margin-bottom: 0;
-  padding: 0;
   text-decoration: none;
   cursor: pointer;
   font-family: var(--main-font-family);
+  padding: 0;
 }
 ._1gp5vfo1 {
   color: var(--_1073cm86);

package/dist/assets/Comparison/Comparison.css

@@ -0,0 +1,141 @@
+._198o0lt0 {
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  border-radius: 16px;
+  padding: 32px 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 24px;
+}
+._198o0lt1 {
+  background: var(--_1073cm81);
+  border: 1px solid #D4D4D4;
+  color: black;
+}
+._198o0lt1::before {
+  background: var(--_1073cm81);
+}
+._198o0lt2 {
+  background: var(--_1073cm88);
+  color: black;
+}
+._198o0lt2::before {
+  background: var(--_1073cm88);
+}
+._198o0lt3 {
+  background: var(--_1073cm8f);
+  color: var(--_1073cm8g);
+}
+._198o0lt3::before {
+  background: var(--_1073cm8f);
+}
+._198o0lt4 {
+  background: var(--_1073cm8m);
+  color: var(--_1073cm8n);
+}
+._198o0lt4::before {
+  background: var(--_1073cm8m);
+}
+._198o0lt5 {
+  display: flex;
+  gap: 16px;
+  flex-direction: column;
+}
+._198o0lt6 {
+  text-align: center;
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+}
+._198o0lt7 {
+  background: var(--_1073cm81);
+  border: 1px solid #D4D4D4;
+  color: black;
+  box-shadow: 0px 8px 16px 0px #00000033;
+  border-radius: 16px;
+  padding: 32px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+._198o0lt8 {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  list-style: none;
+  padding-inline-start: 0;
+}
+._198o0lt9 {
+  font: var(--main-font-family);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.2px;
+  color: var(--_1073cm83);
+}
+._198o0lta {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+}
+._198o0lta > img {
+  margin-right: 8px;
+}
+._198o0ltb {
+  display: grid;
+  grid-template-columns:  repeat( auto-fit, minmax(250px, 1fr) );
+  gap: 24px;
+}
+._198o0ltc {
+  display: none;
+}
+._198o0ltd {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+  gap: 24px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+@media screen and (max-width: 1023px) {
+  ._198o0lt0 {
+    border-radius: 0;
+    display: none;
+  }
+  ._198o0ltb {
+    grid-template-columns: 1fr;
+    gap: 0;
+  }
+  ._198o0ltc {
+    display: flex;
+  }
+}
+@media screen and (max-width: 768px) {
+  ._198o0lt0 {
+    position: relative;
+    isolation: isolate;
+    box-shadow: none;
+    border: 0;
+  }
+  ._198o0lt0::before {
+    content: "";
+    position: absolute;
+    height: 100%;
+    top: 0;
+    left: 50%;
+    right: 0;
+    z-index: -1;
+    width: 100vw;
+    transform: translatex(-50%);
+  }
+}
+@media screen and (max-width: 380px) {
+  ._198o0ltd {
+    flex-direction: column;
+  }
+  ._198o0ltd:first-child {
+    margin-bottom: 1em;
+  }
+}