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

package/dist/AwardsItem/AwardsItem.js

@@ -18,11 +18,19 @@ const AwardsItem = ({
       rating = "https://images.axos.com/o9ov1v03uwqk/7qNXIOMTzaDfPhCAlXP41u/2a7d54670fb94594994a2beb3b3c00fc/4-stars.svg";
       break;
   }
-  return /* @__PURE__ */ jsxs("div", { className: `${award_item} text_center`, id: `id_${id}`, children: [
-    starRating && /* @__PURE__ */ jsx("img", { src: rating, alt: "", role: "presentation" }),
-    /* @__PURE__ */ jsx("p", { className: award_name, children: awardsName }),
-    /* @__PURE__ */ jsx("p", { className: award_company, children: awardsSource })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${award_item} text_center`,
+      id: `id_${id}`,
+      children: [
+        starRating && /* @__PURE__ */ jsx("img", { src: rating, alt: "", role: "presentation" }),
+        /* @__PURE__ */ jsx("p", { className: award_name, children: awardsName }),
+        /* @__PURE__ */ jsx("p", { className: award_company, children: awardsSource })
+      ]
+    },
+    `id_${id}`
+  );
 };
 export {
   AwardsItem

package/dist/BulletItem/BulletItem.js

@@ -49,7 +49,7 @@ const BulletItem = (props) => {
   return /* @__PURE__ */ jsxs("li", { className: listItem, children: [
     /* @__PURE__ */ jsx("span", { className: bulletIcon, children: Icon }),
     /* @__PURE__ */ jsx("div", { children: props.children })
-  ] });
+  ] }, props.id);
 };
 export {
   BulletItem

package/dist/Calculators/Calculator.js

@@ -42,17 +42,21 @@ import { calculator_headline, calculator_description } from "./calculator.css.js
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
+import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/SelectionBanner.css.js";
+import "../SetContainer/SetContainer.css.js";
+import "../Tab/Tab.css.js";
+import "../icons/Star/Star.css.js";
 import "../ContentBanner/ContentBanner.css.js";
 /* empty css                                              */
 import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
-import "../HeroBanner/SelectionBanner.css.js";
-import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
+import "../LoadingIndicator/LoadingIndicator.css.js";
 /* empty css                                */
 /* empty css                                                      */
 /* empty css                                                         */
@@ -69,6 +73,7 @@ import "../Table/Table.css.js";
 import "next/script.js";
 /* empty css                                        */
 /* empty css                                              */
+import "../Input/RadioButton.js";
 import { iframeResizer } from "iframe-resizer";
 import { calculators } from "./calculators.js";
 const Calculator = (props) => {

package/dist/CallToActionBar/CallToActionBar.css.d.ts

@@ -1,5 +1,6 @@
 export declare const cta: string;
 export declare const cta_image_section: string;
+export declare const cta_image_section_overlap: string;
 export declare const cta_square_image_lg: string;
 export declare const cta_rectangle_image_lg: string;
 export declare const cta_square_image_md: string;

package/dist/CallToActionBar/CallToActionBar.css.js

@@ -3,27 +3,29 @@
 /* empty css                                   */
 var cta = "_1tdyl740";
 var cta_image_section = "_1tdyl741";
-var cta_square_image_lg = "_1tdyl742";
-var cta_rectangle_image_lg = "_1tdyl743";
-var cta_square_image_md = "_1tdyl744";
-var cta_rectangle_image_md = "_1tdyl745";
-var cta_section_lg = "_1tdyl746";
-var cta_section_lg_overlap = "_1tdyl747";
-var cta_section_md = "_1tdyl748";
-var cta_section_md_overlap = "_1tdyl749";
-var cta_section_sm = "_1tdyl74a";
-var cta_section = "_1tdyl74b";
-var cta_image_overlap = "_1tdyl74c";
-var cta_body_section = "_1tdyl74d";
-var sticky_banner = "_1tdyl74e";
-var is_sticky = "_1tdyl74f";
-var ctas_section = "_1tdyl74g";
-var cta_text = "_1tdyl74h";
+var cta_image_section_overlap = "_1tdyl742";
+var cta_square_image_lg = "_1tdyl743";
+var cta_rectangle_image_lg = "_1tdyl744";
+var cta_square_image_md = "_1tdyl745";
+var cta_rectangle_image_md = "_1tdyl746";
+var cta_section_lg = "_1tdyl747";
+var cta_section_lg_overlap = "_1tdyl748";
+var cta_section_md = "_1tdyl749";
+var cta_section_md_overlap = "_1tdyl74a";
+var cta_section_sm = "_1tdyl74b";
+var cta_section = "_1tdyl74c";
+var cta_image_overlap = "_1tdyl74d";
+var cta_body_section = "_1tdyl74e";
+var sticky_banner = "_1tdyl74f";
+var is_sticky = "_1tdyl74g";
+var ctas_section = "_1tdyl74h";
+var cta_text = "_1tdyl74i";
 export {
   cta,
   cta_body_section,
   cta_image_overlap,
   cta_image_section,
+  cta_image_section_overlap,
   cta_rectangle_image_lg,
   cta_rectangle_image_md,
   cta_section,

package/dist/CallToActionBar/index.js

@@ -7,8 +7,8 @@ import "react-use";
 import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
-import { returnImageDimensions, imageOrientation, getBannerSizeClassName } from "../utils/ctaOptions.js";
-import { sticky_banner, is_sticky, cta, cta_image_section, cta_image_overlap, cta_body_section, cta_text, ctas_section } from "./CallToActionBar.css.js";
+import { getBannerSizeClassName } from "../utils/ctaOptions.js";
+import { sticky_banner, is_sticky, cta, cta_image_section, cta_image_section_overlap, cta_image_overlap, cta_body_section, cta_text, ctas_section } from "./CallToActionBar.css.js";
 const CallToActionBar = ({
   bannerSize,
   image,
@@ -22,7 +22,6 @@ const CallToActionBar = ({
   internalName
 }) => {
   const [stickyTop, setstickyTop] = useState(0);
-  const [imageSize, setImageSize] = useState({ width: "0px", height: "0px" });
   const banner_size = bannerSize.toLowerCase();
   const row_reverse = imagePlacement.toLowerCase() === "right" ? true : false;
   const banner_behavior = bannerBehavior.toLocaleLowerCase();
@@ -32,10 +31,7 @@ const CallToActionBar = ({
     if (domRectStickyEl) {
       setstickyTop(domRectStickyEl.top);
     }
-    if (image) {
-      setImageSize(returnImageDimensions(banner_size, imageOrientation(image)));
-    }
-  }, [image, banner_size]);
+  }, [banner_size]);
   useEffect(() => {
     if (!stickyTop)
       return;
@@ -69,17 +65,22 @@ const CallToActionBar = ({
         "div",
         {
           className: "containment flex middle",
-          style: !image || imageMobileView || banner_size === "small" ? { justifyContent: "center" } : {},
+          style: { justifyContent: "center" },
           children: [
-            banner_size !== "small" && !imageMobileView && image ? /* @__PURE__ */ jsx("div", { className: `${cta_image_section}`, children: /* @__PURE__ */ jsx(
-              "img",
+            banner_size !== "small" && !imageMobileView && image ? /* @__PURE__ */ jsx(
+              "div",
               {
-                src: image.src,
-                alt: "",
-                style: { ...imageSize },
-                className: `${image_overlap ? `${cta_image_overlap}` : ""}`
+                className: `${cta_image_section} ${image_overlap ? cta_image_section_overlap : ""}`,
+                children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: image.src,
+                    alt: "",
+                    className: `${image_overlap && banner_size !== "large" ? cta_image_overlap : ""}`
+                  }
+                )
               }
-            ) }) : null,
+            ) : null,
             /* @__PURE__ */ jsxs(
               "div",
               {
@@ -103,8 +104,14 @@ const CallToActionBar = ({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx("div", { className: clsx(ctas_section, "flex", "text_center"), children: callToActionRow.map(
-                    ({ id: id2, variant, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
+                  callToActionRow.length > 0 && /* @__PURE__ */ jsx("div", { className: clsx(ctas_section, "flex", "text_center"), children: callToActionRow.map(
+                    ({
+                      id: id2,
+                      variant,
+                      displayText,
+                      targetUrl,
+                      type
+                    }) => type === "Button" ? /* @__PURE__ */ jsx(
                       Button,
                       {
                         targetUrl,

package/dist/Carousel/index.js

@@ -38,19 +38,24 @@ import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+import "../LoadingIndicator/LoadingIndicator.css.js";
+import "../Input/RadioButton.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                    */
 /* empty css                                                                    */
+import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/SelectionBanner.css.js";
+import "../SetContainer/SetContainer.css.js";
+import "../Tab/Tab.css.js";
+import "../icons/Star/Star.css.js";
 import "../ContentBanner/ContentBanner.css.js";
 /* empty css                                              */
 import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
-import "../HeroBanner/SelectionBanner.css.js";
-import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import "../Chevron/Chevron.css.js";

package/dist/Chevron/index.js

@@ -37,20 +37,25 @@ import "../Input/InputTextArea.js";
 import "react-hook-form";
 import "../Forms/Forms.css.js";
 import "../Forms/SalesforceFieldsForm.js";
+import "../LoadingIndicator/LoadingIndicator.css.js";
+import "../Input/RadioButton.js";
 import "iframe-resizer";
 import "../Calculators/calculator.css.js";
 /* empty css                                                    */
 import "../Carousel/index.js";
 /* empty css                                                                    */
+import "../Comparison/Comparison.css.js";
 import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/SelectionBanner.css.js";
+import "../SetContainer/SetContainer.css.js";
+import "../Tab/Tab.css.js";
+import "../icons/Star/Star.css.js";
 import "../ContentBanner/ContentBanner.css.js";
 /* empty css                                              */
 import "../ExecutiveBio/ExecutiveBio.css.js";
 import "../FaqAccordion/index.js";
 import "../FooterDisclosure/FooterDisclosure.css.js";
 /* empty css                                                         */
-import "../HeroBanner/SelectionBanner.css.js";
-import "../SetContainer/SetContainer.css.js";
 import "../ImageBillboard/ImageBillboard.css.js";
 import "../LandingPageHeader/LandingPageHeader.css.js";
 import { chevron_wrapper, chevron } from "./Chevron.css.js";

package/dist/Comparison/Comparison.css.d.ts

@@ -0,0 +1,42 @@
+export declare const comparison: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            border: "1px solid #D4D4D4";
+            color: "black";
+            "::before": {
+                background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: "black";
+            "::before": {
+                background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        tertiary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "::before": {
+                background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        quaternary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            "::before": {
+                background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    };
+}>;
+export declare const comparison_layout: string;
+export declare const headerComparison: string;
+export declare const comparison_feature: string;
+export declare const comparison_list: string;
+export declare const feature_title: string;
+export declare const feature_header: string;
+export declare const comparison_container: string;
+export declare const comparison_tab_container: string;
+export declare const comparison_buttons: string;

package/dist/Comparison/Comparison.css.js

@@ -0,0 +1,27 @@
+/* empty css                                          */
+/* empty css                                */
+/* empty css                                   */
+/* empty css                              */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var comparison = createRuntimeFn({ defaultClassName: "_198o0lt0", variantClassNames: { variant: { primary: "_198o0lt1", secondary: "_198o0lt2", tertiary: "_198o0lt3", quaternary: "_198o0lt4" } }, defaultVariants: {}, compoundVariants: [] });
+var comparison_layout = "_198o0lt5";
+var headerComparison = "_198o0lt6";
+var comparison_feature = "_198o0lt7";
+var comparison_list = "_198o0lt8";
+var feature_title = "_198o0lt9";
+var feature_header = "_198o0lta";
+var comparison_container = "_198o0ltb";
+var comparison_tab_container = "_198o0ltc";
+var comparison_buttons = "_198o0ltd";
+export {
+  comparison,
+  comparison_buttons,
+  comparison_container,
+  comparison_feature,
+  comparison_layout,
+  comparison_list,
+  comparison_tab_container,
+  feature_header,
+  feature_title,
+  headerComparison
+};

package/dist/Comparison/Comparison.d.ts

@@ -0,0 +1,3 @@
+import { ComparisonProps } from './Comparison.interface';
+
+export declare const Comparison: ({ id, variant: fullVariant, headline, description, bullets, callToActionRow, keyFeature, keyFeatureDescription, highlightedFeature, index, toggleState, }: ComparisonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Comparison/Comparison.interface.d.ts

@@ -0,0 +1,24 @@
+import { BulletItemProps } from '../BulletItem';
+import { ChevronProps } from '../Chevron/Chevron.interface';
+import { SetContainerProps } from '../SetContainer';
+import { QuaternaryTypes } from '../utils/variant.types';
+import { ReactNode } from 'react';
+
+export interface ComparisonSetProps extends SetContainerProps {
+    comparisonElements: ComparisonProps[];
+    callToActionRow?: ChevronProps[];
+}
+export interface ComparisonProps {
+    id?: string;
+    headline?: ReactNode | string;
+    variant: QuaternaryTypes;
+    description?: ReactNode | undefined;
+    bullets: BulletItemProps[];
+    callToActionRow: ChevronProps[];
+    keyFeature: ReactNode | string;
+    keyFeatureDescription: ReactNode | string;
+    highlightedFeature: boolean;
+    index?: number;
+    toggleState?: number;
+    headerTab?: string;
+}

package/dist/Comparison/Comparison.interface.js

@@ -0,0 +1 @@
+

package/dist/Comparison/Comparison.js

@@ -0,0 +1,143 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { BulletItem } from "../BulletItem/BulletItem.js";
+import { Chevron } from "../Chevron/index.js";
+import { getVariant } from "../utils/getVariant.js";
+import clsx from "clsx";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
+import { content, title } from "../IconBillboard/IconBillboard.css.js";
+import SvgStarIcon from "../icons/Star/index.js";
+import "../Accordion/Accordion.js";
+import "../Accordion/Accordion.css.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
+import "../icons/CheckIcon/CheckIcon.css.js";
+/* empty css                                */
+/* empty css                                   */
+/* empty css                                                    */
+/* empty css                                                */
+import "../AlertBanner/AlertBanner.css.js";
+/* empty css                                                */
+import "../Article/Article.css.js";
+import "../ArticlesSet/ArticlesSet.css.js";
+/* empty css                                              */
+/* empty css                                          */
+/* empty css                                          */
+import "@hookform/resolvers/zod";
+import "../Input/Checkbox.js";
+import "../Input/CurrencyInput.js";
+import "../Input/Dropdown.js";
+/* empty css                                   */
+import "../Input/Input.js";
+import "../Input/Input.css.js";
+import "../Input/InputPhone.js";
+import "../Input/InputTextArea.js";
+import "react-hook-form";
+import "../Forms/Forms.css.js";
+import "../Forms/SalesforceFieldsForm.js";
+import "../LoadingIndicator/LoadingIndicator.css.js";
+import "../Input/RadioButton.js";
+import "iframe-resizer";
+import "../Calculators/calculator.css.js";
+/* empty css                                                    */
+import "../Carousel/index.js";
+/* empty css                                                                    */
+import { comparison, comparison_layout, headerComparison, comparison_feature, feature_header, feature_title, comparison_list, comparison_buttons } from "./Comparison.css.js";
+import "../HeroBanner/HeroBanner.css.js";
+import "../HeroBanner/SelectionBanner.css.js";
+import "../SetContainer/SetContainer.css.js";
+import { active_content } from "../Tab/Tab.css.js";
+import "../ContentBanner/ContentBanner.css.js";
+/* empty css                                              */
+import "../ExecutiveBio/ExecutiveBio.css.js";
+import "../FaqAccordion/index.js";
+import "../FooterDisclosure/FooterDisclosure.css.js";
+/* empty css                                                         */
+import "../ImageBillboard/ImageBillboard.css.js";
+import "../LandingPageHeader/LandingPageHeader.css.js";
+import "../Chevron/Chevron.css.js";
+/* empty css                                */
+import "../Modal/contextApi/store.js";
+/* empty css                                                      */
+/* empty css                                                         */
+/* empty css                                                              */
+/* empty css                                                                 */
+/* empty css                                                    */
+/* empty css                                                  */
+import "../StepItem/StepItem.css.js";
+import "../StepItemSet/StepItemSet.css.js";
+import "../Table/Table.css.js";
+/* empty css                                        */
+/* empty css                                                  */
+/* empty css                                                */
+import "next/script.js";
+/* empty css                                        */
+/* empty css                                              */
+const Comparison = ({
+  id,
+  variant: fullVariant,
+  headline,
+  description,
+  bullets,
+  callToActionRow,
+  keyFeature,
+  keyFeatureDescription,
+  highlightedFeature,
+  index,
+  toggleState
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      className: clsx(
+        comparison({
+          variant: getVariant(fullVariant)
+        }),
+        toggleState === index ? active_content : ""
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: comparison_layout, children: /* @__PURE__ */ jsxs("div", { className: content, children: [
+          (headline || description) && /* @__PURE__ */ jsxs("div", { className: clsx(headerComparison), children: [
+            headline && /* @__PURE__ */ jsx("h3", { className: title({ variant: getVariant(fullVariant) }), children: headline }),
+            description && /* @__PURE__ */ jsx("div", { children: description })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: clsx(comparison_feature), children: [
+            /* @__PURE__ */ jsxs("div", { className: feature_header, children: [
+              highlightedFeature ? /* @__PURE__ */ jsx(SvgStarIcon, { variant: "gold" }) : /* @__PURE__ */ jsx(SvgStarIcon, { variant: "gray" }),
+              keyFeature && /* @__PURE__ */ jsx("div", { className: feature_title, children: keyFeature })
+            ] }),
+            keyFeatureDescription && /* @__PURE__ */ jsx("div", { className: "text_center", children: keyFeatureDescription })
+          ] }),
+          bullets.length > 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: comparison_list, children: bullets.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.copy }, item.id)) }) })
+        ] }) }),
+        callToActionRow && /* @__PURE__ */ jsx("div", { className: clsx(comparison_buttons, "push_up"), children: callToActionRow.map(
+          ({ id: id2, variant, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              targetUrl,
+              color: getVariant(variant),
+              size: "medium",
+              rounded: "medium",
+              children: displayText
+            },
+            id2
+          ) : /* @__PURE__ */ jsx(
+            Chevron,
+            {
+              targetUrl,
+              variant: getVariant(variant),
+              children: displayText
+            },
+            id2
+          )
+        ) })
+      ]
+    },
+    id
+  );
+};
+export {
+  Comparison
+};

package/dist/Comparison/ComparisonSet.d.ts

@@ -0,0 +1,3 @@
+import { ComparisonSetProps } from './Comparison.interface';
+
+export declare const ComparisonSet: ({ headline, variant, id, additionalDetails, icon, eyebrow, bodyCopy, comparisonElements, callToActionRow, }: ComparisonSetProps) => import("react/jsx-runtime").JSX.Element;