@axos-web-dev/shared-components 1.0.83 → 1.0.84

package/dist/Calculators/ApyCalculator/index.js

@@ -264,7 +264,7 @@ const ApyCalculator = ({
         {
           className: `${container({ variant: getVariant(variant) })} ${marketingTile} rounded bordered`,
           children: [
-            /* @__PURE__ */ jsx("div", { className: `${content} ${bodyContent}`, children: /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
+            /* @__PURE__ */ jsx("div", { className: `${content} ${bodyContent}`, children: /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, style: { textAlign: "left" }, children: [
               /* @__PURE__ */ jsx(
                 "div",
                 {

package/dist/Calculators/BuyDownCalculator/index.js

@@ -622,7 +622,7 @@ const BuyDownCalculator = ({
                         id: "mooringOutsideContinentalUS",
                         ...register("mooringOutsideContinentalUS"),
                         value: 0.5,
-                        radioText: "Mooring Outside Continental U.S. (Includes Puerto Rico,\n                                    Hawaii, and Alaska) (Does not apply to Full Time Charter)\n                                    +0.500",
+                        radioText: "Mooring Outside Continental U.S. (Includes Puerto Rico,\r\n                                    Hawaii, and Alaska) (Does not apply to Full Time Charter)\r\n                                    +0.500",
                         groupName: "dependentInputs",
                         disabled: disableMooringOutside
                       }

package/dist/IconBillboard/IconBillboard.js

@@ -57,8 +57,8 @@ const IconBillboard = (props) => {
               width: icon?.width
             }
           ) }),
-          /* @__PURE__ */ jsxs("div", { className: clsx(content, "flex_col gap_24"), children: [
-            /* @__PURE__ */ jsxs("div", { className: `${headerIconBillboard} flex_col text_center`, children: [
+          /* @__PURE__ */ jsxs("div", { className: clsx(content), children: [
+            /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
               headline && createElement(
                 headingLevel,
                 {
@@ -69,10 +69,10 @@ const IconBillboard = (props) => {
               ),
               body && /* @__PURE__ */ jsx("div", { children: body })
             ] }),
-            items && items?.length > 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: clsx(list, "list_unstyled flex_col"), children: items?.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, variant, children: item.content }, item.id)) }) })
+            items && items?.length > 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: clsx(list, "list_unstyled"), children: items?.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, variant, children: item.content }, item.id)) }) })
           ] })
         ] }),
-        callToActionRow && /* @__PURE__ */ jsx("div", { className: `${buttons} flex middle center text_center gap_24`, children: callToActionRow.map(
+        callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
           ({
             id: id2,
             variant: variant2,

package/dist/ImageBillboard/ImageBillboard.css.d.ts

@@ -145,6 +145,7 @@ export declare const header: import('@vanilla-extract/recipes').RuntimeFn<{
 }>;
 export declare const billboard_container: string;
 export declare const billboard_img: string;
+export declare const is_bg_img: string;
 export declare const billboard_body: string;
 export declare const billboard_header_section: string;
 export declare const billboard_ctas: string;
@@ -156,6 +157,8 @@ export declare const section_text_ImageBillboard: string;
 export declare const billboard_image: string;
 export declare const mh_330: string;
 export declare const image_background: string;
+export declare const image_inner_wrapper: string;
+export declare const image_based: string;
 export declare const rate_container: string;
 export declare const rate_pad: string;
 export declare const up_to: string;
@@ -163,6 +166,16 @@ export declare const rate_billboard: string;
 export declare const apy_billboard: string;
 export declare const body_copy: string;
 export declare const sub_bullets: string;
+export declare const top_left: string;
+export declare const top_center: string;
+export declare const top_right: string;
+export declare const center_left: string;
+export declare const center_right: string;
+export declare const center_center: string;
+export declare const bottom_left: string;
+export declare const bottom_right: string;
+export declare const bottom_center: string;
+export declare const remove_padding: string;
 export declare const exit_intent_backdrop: string;
 export declare const exit_intent: string;
 export declare const modal_close_button: string;

package/dist/ImageBillboard/ImageBillboard.css.js

@@ -11,27 +11,40 @@ var supertag = createRuntimeFn({ defaultClassName: "_1m7m2a8", variantClassNames
 var header = createRuntimeFn({ defaultClassName: "_1m7m2ad", variantClassNames: { variant: { primary: "_1m7m2ae", secondary: "_1m7m2af", tertiary: "_1m7m2ag", quaternary: "_1m7m2ah" } }, defaultVariants: {}, compoundVariants: [] });
 var billboard_container = "_1m7m2ai";
 var billboard_img = "_1m7m2aj";
-var billboard_body = "_1m7m2ak";
-var billboard_header_section = "_1m7m2al";
-var billboard_ctas = "_1m7m2am";
-var body = "_1m7m2an";
-var single_container = "_1m7m2ao";
-var two_inline = "_1m7m2ap";
-var three_inline = "_1m7m2aq";
-var section_text_ImageBillboard = "_1m7m2ar";
-var billboard_image = "_1m7m2as";
-var mh_330 = "_1m7m2at";
-var image_background = "_1m7m2au";
-var rate_container = "_1m7m2av";
-var rate_pad = "_1m7m2aw";
-var up_to = "_1m7m2ax";
-var rate_billboard = "_1m7m2ay";
-var apy_billboard = "_1m7m2az";
-var body_copy = "_1m7m2a10";
-var sub_bullets = "_1m7m2a11";
-var exit_intent_backdrop = "_1m7m2a12";
-var exit_intent = "_1m7m2a13";
-var modal_close_button = "_1m7m2a14";
+var is_bg_img = "_1m7m2ak";
+var billboard_body = "_1m7m2al";
+var billboard_header_section = "_1m7m2am";
+var billboard_ctas = "_1m7m2an";
+var body = "_1m7m2ao";
+var single_container = "_1m7m2ap";
+var two_inline = "_1m7m2aq";
+var three_inline = "_1m7m2ar";
+var section_text_ImageBillboard = "_1m7m2as";
+var billboard_image = "_1m7m2at";
+var mh_330 = "_1m7m2au";
+var image_background = "_1m7m2av";
+var image_inner_wrapper = "_1m7m2aw";
+var image_based = "_1m7m2ax";
+var rate_container = "_1m7m2ay";
+var rate_pad = "_1m7m2az";
+var up_to = "_1m7m2a10";
+var rate_billboard = "_1m7m2a11";
+var apy_billboard = "_1m7m2a12";
+var body_copy = "_1m7m2a13";
+var sub_bullets = "_1m7m2a14";
+var top_left = "_1m7m2a15";
+var top_center = "_1m7m2a16";
+var top_right = "_1m7m2a17";
+var center_left = "_1m7m2a18";
+var center_right = "_1m7m2a19";
+var center_center = "_1m7m2a1a";
+var bottom_left = "_1m7m2a1b";
+var bottom_right = "_1m7m2a1c";
+var bottom_center = "_1m7m2a1d";
+var remove_padding = "_1m7m2a1e";
+var exit_intent_backdrop = "_1m7m2a1f";
+var exit_intent = "_1m7m2a1g";
+var modal_close_button = "_1m7m2a1h";
 export {
   apy_billboard,
   billboard,
@@ -43,21 +56,34 @@ export {
   billboard_img,
   body,
   body_copy,
+  bottom_center,
+  bottom_left,
+  bottom_right,
+  center_center,
+  center_left,
+  center_right,
   exit_intent,
   exit_intent_backdrop,
   header,
   imagePlacement,
   image_background,
+  image_based,
+  image_inner_wrapper,
+  is_bg_img,
   mh_330,
   modal_close_button,
   rate_billboard,
   rate_container,
   rate_pad,
+  remove_padding,
   section_text_ImageBillboard,
   single_container,
   sub_bullets,
   supertag,
   three_inline,
+  top_center,
+  top_left,
+  top_right,
   two_inline,
   up_to
 };

package/dist/ImageBillboard/ImageBillboard.interface.d.ts

@@ -1,6 +1,5 @@
 import { BulletItemProps } from '../BulletItem';
 import { ChevronProps } from '../Chevron/Chevron.interface';
-import { ImageInterface } from '../IconBillboard';
 import { QuaternaryTypes } from '../utils/variant.types';
 import { ReactNode } from 'react';
 
@@ -13,6 +12,16 @@ export interface ImageBillboardSetProps {
     variant: QuaternaryTypes;
     set?: boolean;
     bordered?: boolean;
+    layout?: "Inline" | "Stacked";
+}
+export interface BillboardImageInterface {
+    src: string;
+    alt?: string;
+    imageType?: "Image" | "Background Image";
+    imageAlignment?: string;
+    imageBackgroundColor?: string;
+    height?: string | number;
+    width?: string | number;
 }
 export interface ImageBillboardInterface {
     id: string;
@@ -24,7 +33,7 @@ export interface ImageBillboardInterface {
     variant: QuaternaryTypes;
     eyebrow: string | ReactNode;
     bullets: BulletItemProps[];
-    image?: ImageInterface;
+    image?: BillboardImageInterface;
     callToActionRow: ChevronProps[];
     set?: boolean;
     textImageLineOneSmall?: ReactNode | string;
@@ -32,4 +41,5 @@ export interface ImageBillboardInterface {
     textImageLineThreeSmall?: ReactNode | string;
     internalName?: string;
     exitIntent?: boolean;
+    layout?: ImageBillboardSetProps["layout"];
 }

package/dist/ImageBillboard/ImageBillboardSet.d.ts

@@ -1,3 +1,3 @@
 import { ImageBillboardInterface } from './ImageBillboard.interface';
 
-export declare const ImageBillboard: ({ id, variant, headline, bodyCopy, bordered, bullets, callToActionRow, eyebrow, image, imagePlacement: position, set, textImageLineOneSmall, textImageLineTwoBig, textImageLineThreeSmall, internalName, exitIntent, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ImageBillboard: ({ id, bodyCopy, bordered, bullets, callToActionRow, exitIntent, eyebrow, headline, image, imagePlacement: position, internalName, set, textImageLineOneSmall, textImageLineThreeSmall, textImageLineTwoBig, variant, }: ImageBillboardInterface) => import("react/jsx-runtime").JSX.Element | null;

package/dist/ImageBillboard/ImageBillboardSet.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useRef, useState, useEffect, createElement } from "react";
 import { Button } from "../Button/Button.js";
 import "../Button/Button.css.js";
@@ -18,24 +18,24 @@ import { OptimizeImage } from "../utils/optimizeImage/OptimizeImage.js";
 import { useExitIntentModal } from "./ExitIntentModal/useExitIntentModal.js";
 import { ModalWrapper } from "./ExitIntentModal/ModalWrapper.js";
 import clsx from "clsx";
-import { billboard_img, image_background, up_to, rate_billboard, apy_billboard, rate_pad, rate_container, body, billboard_body, billboard_header_section, supertag, header, body_copy, sub_bullets, billboard_ctas, billboard, imagePlacement } from "./ImageBillboard.css.js";
+import { billboard_img, center_center, remove_padding, image_inner_wrapper, image_background, is_bg_img, up_to, rate_billboard, apy_billboard, rate_pad, rate_container, body, billboard_body, billboard_header_section, supertag, header, body_copy, sub_bullets, billboard_ctas, billboard, imagePlacement, image_based, bottom_right, bottom_center, bottom_left, center_right, center_left, top_right, top_center, top_left } from "./ImageBillboard.css.js";
 const ImageBillboard = ({
   id,
-  variant,
-  headline,
   bodyCopy,
   bordered = false,
   bullets,
   callToActionRow,
+  exitIntent = false,
   eyebrow,
+  headline,
   image,
   imagePlacement: position = "left",
+  internalName,
   set,
   textImageLineOneSmall,
-  textImageLineTwoBig,
   textImageLineThreeSmall,
-  internalName,
-  exitIntent = false
+  textImageLineTwoBig,
+  variant
 }) => {
   const billboard_variant = getVariant(variant);
   position = position?.toLocaleLowerCase();
@@ -55,22 +55,74 @@ const ImageBillboard = ({
       }
     }
   }, []);
+  const imgAlignment = (alignment) => {
+    switch (alignment) {
+      case "Top Left":
+        return top_left;
+      case "Top Center":
+        return top_center;
+      case "Top Right":
+        return top_right;
+      case "Center Left":
+        return center_left;
+      case "Center Center":
+        return center_center;
+      case "Center Right":
+        return center_right;
+      case "Bottom Left":
+        return bottom_left;
+      case "Bottom Center":
+        return bottom_center;
+      case "Bottom Right":
+        return bottom_right;
+      default:
+        return center_center;
+    }
+  };
   const renderBillboard = () => /* @__PURE__ */ jsxs(
     "div",
     {
       id: internalName?.replace(/ /g, "-") ?? id,
       className: clsx(
-        "billboard",
-        "containment",
+        "billboard rounded flex",
         billboard({ variant: billboard_variant }),
-        `rounded flex`,
         bordered && billboard_variant === "primary" ? "bordered" : "",
         imagePlacement({ position: position?.toLowerCase() }),
-        `${set ? "" : "containment"}`,
-        position === "right" && "reversed"
+        position === "right" && "reversed",
+        set ? "" : "containment",
+        image?.imageType === "Image" ? image_based : ""
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image ? /* @__PURE__ */ jsx("div", { className: image_background, role: "presentation", children: /* @__PURE__ */ jsx(OptimizeImage, { src: image?.src, alt: image?.alt ?? "" }) }) : /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: image ? /* @__PURE__ */ jsx(Fragment, { children: image?.imageType === "Image" ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "presentation",
+            className: clsx(
+              "rounded overflow_hidden flex",
+              imgAlignment(image?.imageAlignment ?? center_center),
+              image?.imageBackgroundColor === "transparent" ? remove_padding : "",
+              image_inner_wrapper
+            ),
+            style: image?.imageBackgroundColor ? { background: image?.imageBackgroundColor } : {},
+            children: /* @__PURE__ */ jsx(
+              OptimizeImage,
+              {
+                src: image?.src,
+                alt: image?.alt ?? "",
+                className: "img_fluid",
+                height: image?.height,
+                width: image?.width
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: image_background, role: "presentation", children: /* @__PURE__ */ jsx(
+          OptimizeImage,
+          {
+            src: image?.src,
+            alt: image?.alt ?? "",
+            className: is_bg_img
+          }
+        ) }) }) : /* @__PURE__ */ jsx(
           "div",
           {
             className: clsx(

package/dist/ImageBillboard/index.js

@@ -1,5 +1,5 @@
 import { ImageBillboardSet } from "./ImageBillboard.js";
-import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, body_copy, exit_intent, exit_intent_backdrop, header, imagePlacement, image_background, mh_330, modal_close_button, rate_billboard, rate_container, rate_pad, section_text_ImageBillboard, single_container, sub_bullets, supertag, three_inline, two_inline, up_to } from "./ImageBillboard.css.js";
+import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, body_copy, bottom_center, bottom_left, bottom_right, center_center, center_left, center_right, exit_intent, exit_intent_backdrop, header, imagePlacement, image_background, image_based, image_inner_wrapper, is_bg_img, mh_330, modal_close_button, rate_billboard, rate_container, rate_pad, remove_padding, section_text_ImageBillboard, single_container, sub_bullets, supertag, three_inline, top_center, top_left, top_right, two_inline, up_to } from "./ImageBillboard.css.js";
 import { ImageBillboard } from "./ImageBillboardSet.js";
 export {
   ImageBillboard,
@@ -14,21 +14,34 @@ export {
   billboard_img,
   body,
   body_copy,
+  bottom_center,
+  bottom_left,
+  bottom_right,
+  center_center,
+  center_left,
+  center_right,
   exit_intent,
   exit_intent_backdrop,
   header,
   imagePlacement,
   image_background,
+  image_based,
+  image_inner_wrapper,
+  is_bg_img,
   mh_330,
   modal_close_button,
   rate_billboard,
   rate_container,
   rate_pad,
+  remove_padding,
   section_text_ImageBillboard,
   single_container,
   sub_bullets,
   supertag,
   three_inline,
+  top_center,
+  top_left,
+  top_right,
   two_inline,
   up_to
 };

package/dist/SetContainer/SetContainer.d.ts

@@ -11,4 +11,4 @@ export interface SetContainerProps extends Omit<ImageBillboardSetProps, "imageBi
     numberOfColumns?: string;
     additionalDetails?: ReactNode | string;
 }
-export declare const SetContainer: ({ id, variant, headline, bodyCopy, additionalDetails, children, internalName, icon, eyebrow, style, isolate, className, numberOfColumns, }: SetContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SetContainer: ({ id, variant, headline, bodyCopy, additionalDetails, children, internalName, icon, eyebrow, style, isolate, className, numberOfColumns, layout, }: SetContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/SetContainer/SetContainer.js

@@ -138,7 +138,8 @@ const SetContainer = ({
   style,
   isolate,
   className,
-  numberOfColumns
+  numberOfColumns,
+  layout = "Inline"
 }) => {
   const container_variant = getVariant(variant);
   const numOfCols = getNumOfColumns(numberOfColumns);
@@ -177,7 +178,8 @@ const SetContainer = ({
           "div",
           {
             className: clsx(
-              numOfCols && columnValues.includes(numOfCols) ? `${set_container_cols({ columns: numOfCols })} cols_${numOfCols}` : inline_container
+              numOfCols && columnValues.includes(numOfCols) ? `${set_container_cols({ columns: numOfCols })} cols_${numOfCols}` : inline_container,
+              layout === "Stacked" ? "stacked" : ""
             ),
             children
           }

package/dist/assets/IconBillboard/IconBillboard.css

@@ -30,12 +30,17 @@
   width: 48px;
 }
 ._1r4ovbu8 {
-  font-family: var(--main-font-family);
+  display: flex;
+  flex-direction: column;
   gap: 24px;
+  font-family: var(--main-font-family);
   width: 100%;
 }
 ._1r4ovbu9 {
+  display: flex;
+  flex-direction: column;
   gap: 8px;
+  text-align: center;
 }
 ._1r4ovbua {
   font: 600 28px/1.29 var(--header-font-family);
@@ -71,6 +76,8 @@
   color: var(--_1073cm8o);
 }
 ._1r4ovbuf {
+  display: flex;
+  flex-direction: column;
   gap: 1em;
 }
 ._1r4ovbug {
@@ -79,9 +86,14 @@
   gap: 10px;
 }
 ._1r4ovbuh {
+  display: flex;
+  justify-content: center;
   width: 100%;
   margin-top: auto;
+  text-align: center;
   flex-wrap: wrap;
+  gap: 24px;
+  align-items: center;
 }
 ._1r4ovbui {
   margin-inline: auto;

package/dist/assets/ImageBillboard/ImageBillboard.css

@@ -116,7 +116,7 @@
   width: 100%;
   height: auto;
 }
-._1m7m2aj img {
+._1m7m2ak {
   height: 100%;
   inset: 0;
   object-fit: cover;
@@ -124,86 +124,193 @@
   position: absolute;
   width: 100%;
 }
-._1m7m2an {
+._1m7m2ao {
   padding: 32px 28px;
   width: 100%;
   max-width: 50%;
 }
-._18ygy9m5 ._1m7m2an {
+._18ygy9m5 ._1m7m2ao {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
-._1m7m2ao {
+._1m7m2ap {
   display: flex;
   gap: 20px;
 }
-._1m7m2ap {
+._1m7m2aq {
   grid-template-columns: 1fr 1fr;
 }
-._1m7m2aq {
+._1m7m2ar {
   grid-template-columns: 1fr 1fr 1fr;
 }
-._1m7m2ar {
+._1m7m2as {
   margin-inline: auto;
   margin-bottom: 2.5rem;
   text-align: center;
   max-width: 1000px;
 }
-._1m7m2ar > p {
+._1m7m2as > p {
   margin-top: 24px;
 }
-._1m7m2as {
+._1m7m2at {
   width: 100%;
 }
-._1m7m2at {
+._1m7m2au {
   min-height: 330px;
 }
-._1m7m2au {
+._1m7m2av {
   width: 100%;
   height: 100%;
   position: relative;
 }
-._18ygy9m5 ._1m7m2au {
+._1m7m2aw {
+  position: relative;
+  width: 100%;
+}
+._1m7m2ax {
+  border: none !important;
+  align-items: center;
+}
+.section_spacer ._1m7m2ax {
+  background: none;
+}
+._1m7m2ax ._1m7m2aj {
+  justify-content: flex-end;
+}
+._18ygy9m5 ._1m7m2av {
   min-height: 330px;
 }
-._1m7m2av {
+._1m7m2ay {
   background: var(--_1073cm8f);
   color: #FFFFFF;
 }
-._1m7m2aw {
+._1m7m2az {
   padding: 1.5rem;
   height: 100%;
   justify-content: center;
 }
-._1m7m2ax {
+._1m7m2a10 {
   color: #fff;
   font-size: 48px;
   font-weight: 600;
   letter-spacing: 0.4px;
   line-height: 1;
 }
-._1m7m2ay {
+._1m7m2a11 {
   color: #f4f4f4;
   font: 700 150px/1 var(--header-font-family);
   letter-spacing: 0.2px;
   line-height: 1;
 }
-._1m7m2az {
+._1m7m2a12 {
   color: var(--_1073cm8k);
   font-size: 37px;
   font-weight: 600;
   letter-spacing: 0.3px;
   line-height: 1;
 }
-._1m7m2a10 > p {
+._1m7m2a13 > p {
   white-space: break-spaces;
 }
 main > div:nth-last-child(2) > ._1m7m2a0 {
   margin-bottom: 3.5rem;
 }
-._1m7m2a12 {
+._1m7m2a15 {
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 0 1.5rem 1.5rem 0;
+}
+._1m7m2a16 {
+  justify-content: center;
+  align-items: flex-start;
+  padding: 0 1.5rem 1.5rem 1.5rem;
+}
+._1m7m2a17 {
+  justify-content: flex-end;
+  align-items: flex-start;
+  padding: 0 0 1.5rem 1.5rem;
+}
+._1m7m2a18 {
+  justify-content: flex-start;
+  align-items: center;
+  padding: 1.5rem 1.5rem 1.5rem 0;
+}
+._1m7m2a19 {
+  justify-content: flex-end;
+  align-items: center;
+  padding: 1.5rem 0 1.5rem 1.5rem;
+}
+._1m7m2a1a {
+  justify-content: center;
+  align-items: center;
+  padding: 1.5rem;
+}
+._1m7m2a1b {
+  justify-content: flex-start;
+  align-items: flex-end;
+  padding: 1.5rem 1.5rem 0 0;
+}
+._1m7m2a1c {
+  justify-content: flex-end;
+  align-items: flex-end;
+  padding: 1.5rem 0 0 1.5rem;
+}
+._1m7m2a1d {
+  justify-content: center;
+  align-items: flex-end;
+  padding: 1.5rem 1.5rem 0 1.5rem;
+}
+._1m7m2a1e {
+  padding: 0 !important;
+}
+.stacked {
+  gap: 56px;
+}
+.stacked > .billboard {
+  grid-column: 1;
+}
+.stacked ._1m7m2ao {
+  height: auto;
+}
+.section_spacer:has(._1m7m2ax._1m7m2a1) {
+  background: var(--_1073cm81);
+}
+.section_spacer:has(._1m7m2ax._1m7m2a1) + .section_spacer:has(._1m7m2ax._1m7m2a1) {
+  padding-top: 0;
+}
+.section_spacer:has(._1m7m2ax._1m7m2a2) {
+  background: var(--_1073cm88);
+}
+.section_spacer:has(._1m7m2ax._1m7m2a2) + .section_spacer:has(._1m7m2ax._1m7m2a2) {
+  padding-top: 0;
+}
+.section_spacer:has(._1m7m2ax._1m7m2a3) {
+  background: var(--_1073cm8f);
+}
+.section_spacer:has(._1m7m2ax._1m7m2a3) + .section_spacer:has(._1m7m2ax._1m7m2a3) {
+  padding-top: 0;
+}
+.section_spacer:has(._1m7m2ax._1m7m2a4) {
+  background: var(--_1073cm8m);
+}
+.section_spacer:has(._1m7m2ax._1m7m2a4) + .section_spacer:has(._1m7m2ax._1m7m2a4) {
+  padding-top: 0;
+}
+.section_spacer:has(.stacked) {
+  padding-bottom: 40px;
+}
+.section_spacer:has(> ._1m7m2ax) {
+  padding-block: 56px;
+}
+.section_spacer:has(> ._1m7m2ax) + .section_spacer:has(> ._1m7m2ax) {
+  margin-top: 0;
+}
+.section_spacer:has(._1m7m2ax) ._1m7m2an {
+  margin-top: 1.7rem;
+}
+._1m7m2a1f {
   position: fixed;
   inset: 0;
   align-items: center;
@@ -216,27 +323,27 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   overflow-y: auto;
   box-sizing: border-box;
 }
-._1m7m2a13 {
+._1m7m2a1g {
   width: min(1214px, 100%);
 }
-._1m7m2a13 .billboard {
+._1m7m2a1g .billboard {
   animation: fadeIn 0.3s ease-in-out;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
   gap: 1.5rem;
   max-width: 1150px;
   position: relative;
 }
-._1m7m2a13 ._1m7m2au {
+._1m7m2a1g ._1m7m2av {
   border-radius: 1rem;
   overflow: hidden;
 }
-._1m7m2a13 ._1m7m2an {
+._1m7m2a1g ._1m7m2ao {
   padding: 0;
 }
-._1m7m2a13 ._1m7m2aj img {
+._1m7m2a1g ._1m7m2aj img {
   object-fit: none;
 }
-._1m7m2a14 {
+._1m7m2a1h {
   position: absolute;
   top: 0.9rem;
   right: 2.85rem;
@@ -252,7 +359,7 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   padding: 5px 9px;
   z-index: 2;
 }
-._1m7m2a14:focus {
+._1m7m2a1h:focus {
   outline: 2px solid #fAA74A;
   outline-offset: 2px;
 }
@@ -272,119 +379,178 @@ main > div:nth-last-child(2) > ._1m7m2a0 {
   ._1m7m2ai > * {
     max-width: 100%;
   }
-  ._1m7m2al {
+  ._1m7m2am {
     display: flex;
     flex-direction: column;
   }
-  ._1m7m2an {
+  ._1m7m2ao {
     max-width: 100%;
   }
-  ._1m7m2a12 {
+  ._1m7m2a1f {
     display: block;
     padding-top: 85px;
     padding-bottom: 1rem;
   }
 }
 @media screen and (max-width:475px) {
-  ._1m7m2am {
+  ._1m7m2an {
     flex-direction: column;
     gap: 24px;
     align-items: center;
   }
 }
 @media screen and (max-width: 1023px) {
-  ._1m7m2au {
+  ._1m7m2av {
     min-height: 275px;
   }
-  ._18ygy9m5 ._1m7m2au {
+  ._1m7m2ax ._1m7m2aj {
+    justify-content: center;
+  }
+  ._1m7m2ax ._1m7m2ao {
+    text-align: center;
+    padding-inline: 14px;
+  }
+  ._1m7m2ax:not(.reversed) ._1m7m2ao {
+    padding-bottom: 0;
+  }
+  ._1m7m2ax ._1m7m2ao :is(ul,ol) {
+    text-align: left;
+  }
+  ._18ygy9m5 ._1m7m2av {
     min-height: 275px;
   }
-  ._1m7m2ax {
+  ._1m7m2a10 {
     font-size: 30px;
   }
-  ._1m7m2ay {
+  ._1m7m2a11 {
     font-size: 82px;
   }
-  ._1m7m2az {
+  ._1m7m2a12 {
     font-size: 20px;
   }
   main > div:nth-last-child(2) > ._1m7m2a0 {
     margin-bottom: 42px;
   }
-  ._1m7m2a13 {
+  ._1m7m2a1e {
+    width: auto;
+  }
+  ._1m7m2a1g {
     width: min(592px, 100%);
     margin-inline: auto;
   }
-  ._1m7m2a13 .billboard {
+  ._1m7m2a1g .billboard {
     padding: 32px;
     width: min(33rem, calc(100% - 2rem));
   }
-  ._1m7m2a13 ._1m7m2aj img {
+  ._1m7m2a1g ._1m7m2aj img {
     object-fit: cover;
   }
-  ._1m7m2a14 {
+  ._1m7m2a1h {
     top: 0.9rem;
     right: 2.85rem;
   }
 }
+@media screen and (max-width: 1025px) {
+  .stacked {
+    gap: 42px;
+  }
+  .section_spacer:has(> ._1m7m2ax) {
+    padding-block: 42px;
+  }
+}
 @media screen and (max-width: 768px) {
-  ._1m7m2au {
+  ._1m7m2av {
     min-height: 200px;
   }
-  ._18ygy9m5 ._1m7m2au {
+  ._18ygy9m5 ._1m7m2av {
     min-height: 200px;
   }
   main > div:nth-last-child(2) > ._1m7m2a0 {
     margin-bottom: 2rem;
   }
+  .stacked {
+    gap: 2rem;
+  }
+  .section_spacer:has(> ._1m7m2ax) {
+    padding-block: 2rem;
+  }
 }
 @media screen and (max-width: 327px) {
-  ._1m7m2au {
+  ._1m7m2av {
     min-height: 160px;
   }
-  ._18ygy9m5 ._1m7m2au {
+  ._18ygy9m5 ._1m7m2av {
     min-height: 160px;
   }
 }
-@media screen and (max-width:432px) {
-  ._1m7m2a11 {
-    padding-left: 20px;
+@media screen and (min-width: 768px) {
+  .section_spacer:has(._1m7m2ax) ._1m7m2an {
+    margin-top: 2.5rem;
   }
 }
 @media screen and (min-width: 1024px) {
-  ._1m7m2a13 .billboard {
+  ._1m7m2ax ._1m7m2ao {
+    padding-right: 0;
+  }
+  ._1m7m2ax.reversed ._1m7m2ao {
+    padding-left: 0;
+    padding-right: 28px;
+  }
+  .stacked > .billboard {
+    flex-direction: row;
+  }
+  .stacked > .billboard.reversed {
+    flex-direction: row-reverse;
+  }
+  ._18ygy9m5.stacked ._1m7m2av {
+    min-height: 1px !important;
+  }
+  .section_spacer:has(._1m7m2ax) ._1m7m2an {
+    justify-content: flex-start;
+  }
+  ._1m7m2a1g .billboard {
     gap: calc(1rem + ((1vw - 10.24px) * 21.875));
     padding-inline: calc(1.25rem + ((1vw - 10.24px) * 10.9375));
     padding-block: calc(2rem + ((1vw - 10.24px) * 6.25));
   }
-  ._1m7m2a13 h2 {
+  ._1m7m2a1g h2 {
     font-size: 40px;
     line-height: 1.25;
     text-wrap: pretty;
   }
-  ._1m7m2a13 ._1m7m2an {
+  ._1m7m2a1g ._1m7m2ao {
     max-width: 60%;
   }
-  ._1m7m2a13 ._1m7m2aj {
+  ._1m7m2a1g ._1m7m2aj {
     max-width: 40%;
   }
-  ._1m7m2a13 ._1m7m2am {
+  ._1m7m2a1g ._1m7m2an {
     justify-content: flex-start;
   }
 }
+@media screen and (max-width:432px) {
+  ._1m7m2a14 {
+    padding-left: 20px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .section_spacer:has(._1m7m2ax) ._1m7m2an {
+    margin-top: 3rem;
+  }
+}
 @media screen and (min-width: 1281px) {
-  ._1m7m2a13 .billboard {
+  ._1m7m2a1g .billboard {
     gap: 72px;
     padding: 48px;
   }
 }
 @media screen and (max-width: 1024px) {
-  ._1m7m2a13 .billboard:not(.reversed) {
+  ._1m7m2a1g .billboard:not(.reversed) {
     flex-direction: column-reverse;
   }
 }
 @media screen and (max-width: 550px) {
-  ._1m7m2a14 {
+  ._1m7m2a1h {
     right: 1.65rem;
   }
 }

package/dist/assets/SetContainer/SetContainer.css

@@ -52,7 +52,6 @@
 }
 ._18ygy9mb {
   margin-inline: auto;
-  max-width: 1000px;
   padding-block: 2.5rem;
 }
 :is(._18ygy9m5, ._18ygy9m6) .containment {

package/dist/assets/utils/optimizeImage/optimizeImage.css.css

@@ -1,4 +1,4 @@
-@keyframes _shimmer_ib32l_1 {
+@keyframes _shimmer_pwl74_1 {
   from {
     transform: translateX(-100%);
   }
@@ -7,14 +7,13 @@
   }
 }
 
-._loader_ib32l_10 {
-  position: absolute;
+._loader_pwl74_10 {
   height: 100%;
   width: 100%;
   inset: 0;
 }
 
-._loading_ib32l_17 {
+._loading_pwl74_16 {
   position: relative;
   width: 100%;
   height: 100%;
@@ -22,15 +21,15 @@
   background: #1e3860;
 }
 
-._1es6o1h0 ._loading_ib32l_17 {
-  background-color: #1e262f;
+._1es6o1h0 ._loading_pwl74_16 {
+  background-color: var(--_1073cm8f);
 }
 
-.fl2fv50 ._loading_ib32l_17 {
+.fl2fv50 ._loading_pwl74_16 {
   background-color: #28587d;
 }
 
-._loading_ib32l_17::before {
+._loading_pwl74_16::before {
   content: "";
   position: absolute;
   top: 0;
@@ -43,6 +42,6 @@
     rgba(255, 255, 255, 0.5) 50%,
     rgba(255, 255, 255, 0) 80%
   );
-  animation: _shimmer_ib32l_1 1.3s infinite linear;
+  animation: _shimmer_pwl74_1 1.3s infinite linear;
   z-index: 1;
 }

package/dist/main.js

@@ -125,7 +125,7 @@ import { default as default26 } from "./icons/Logos/GBLVF.js";
 import { default as default27 } from "./icons/Logos/LVF.js";
 import { default as default28 } from "./icons/Logos/LVFText.js";
 import { ImageBillboardSet } from "./ImageBillboard/ImageBillboard.js";
-import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, body_copy, exit_intent, exit_intent_backdrop, header, imagePlacement, image_background, mh_330, modal_close_button, rate_billboard, rate_container, rate_pad, section_text_ImageBillboard, single_container, sub_bullets, supertag, three_inline, two_inline, up_to } from "./ImageBillboard/ImageBillboard.css.js";
+import { apy_billboard, billboard, billboard_body, billboard_container, billboard_ctas, billboard_header_section, billboard_image, billboard_img, body, body_copy, bottom_center, bottom_left, bottom_right, center_center, center_left, center_right, exit_intent, exit_intent_backdrop, header, imagePlacement, image_background, image_based, image_inner_wrapper, is_bg_img, mh_330, modal_close_button, rate_billboard, rate_container, rate_pad, remove_padding, section_text_ImageBillboard, single_container, sub_bullets, supertag, three_inline, top_center, top_left, top_right, two_inline, up_to } from "./ImageBillboard/ImageBillboard.css.js";
 import { ImageBillboard } from "./ImageBillboard/ImageBillboardSet.js";
 import { SetContainer } from "./SetContainer/SetContainer.js";
 import { imageLinkContainer, inline_container, isolate_container, set_container, set_container_cols, set_logo, setcontainer_section_text } from "./SetContainer/SetContainer.css.js";
@@ -412,6 +412,9 @@ export {
   bodyHeader,
   body_copy,
   body_sign_in,
+  bottom_center,
+  bottom_left,
+  bottom_right,
   bs_add_details,
   bs_btns,
   bs_copy,
@@ -426,6 +429,9 @@ export {
   calculator_description,
   calculator_headline,
   centerSelect,
+  center_center,
+  center_left,
+  center_right,
   checkbox_group,
   columnValues,
   comaprison_content,
@@ -545,6 +551,8 @@ export {
   imageLinkContainer,
   imagePlacement,
   image_background,
+  image_based,
+  image_inner_wrapper,
   img_area,
   img_contents,
   inline_container,
@@ -561,6 +569,7 @@ export {
   isAllowedUrl,
   isEmailLink,
   isPhoneLink,
+  is_bg_img,
   isolate_container,
   item,
   item_bio,
@@ -615,6 +624,7 @@ export {
   rate_container,
   rate_pad,
   rate_table_title,
+  remove_padding,
   resposiveLabel,
   results_container,
   reversed,
@@ -679,6 +689,9 @@ export {
   three_inline,
   title,
   toggle_container,
+  top_center,
+  top_left,
+  top_right,
   topic_columns,
   topic_container,
   topic_header,

package/dist/utils/optimizeImage/OptimizeImage.d.ts

@@ -3,8 +3,8 @@ import { FC } from 'react';
 export interface OptimizeImageProps {
     src: string;
     alt?: string;
-    height?: number;
-    width?: number;
+    height?: string | number;
+    width?: string | number;
     className?: string;
     rootMargin?: string;
 }

package/dist/utils/optimizeImage/OptimizeImage.js

@@ -39,7 +39,7 @@ const OptimizeImage = ({
         height
       }
     )
-  ] }) : /* @__PURE__ */ jsx("div", { className: css.loader, children: /* @__PURE__ */ jsx("div", { ref: imgRef, className: css.loading, style: { width, height } }) });
+  ] }) : /* @__PURE__ */ jsx("div", { className: `${css.loader} ${css.loading}`, children: /* @__PURE__ */ jsx("div", { ref: imgRef, style: { width, height } }) });
 };
 export {
   OptimizeImage

package/dist/utils/optimizeImage/optimizeImage.module.js

@@ -1,6 +1,6 @@
-import '../../assets/utils/optimizeImage/optimizeImage.css.css';const loader = "_loader_ib32l_10";
-const loading = "_loading_ib32l_17";
-const shimmer = "_shimmer_ib32l_1";
+import '../../assets/utils/optimizeImage/optimizeImage.css.css';const loader = "_loader_pwl74_10";
+const loading = "_loading_pwl74_16";
+const shimmer = "_shimmer_pwl74_1";
 const css = {
   loader,
   loading,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "1.0.83",
+  "version": "1.0.84",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",