@axos-web-dev/shared-components 0.0.10 → 0.0.12

package/dist/ApyCalculator/index.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "../Button/index.js";
+import { Button } from "../Button/Button.js";
 import { button } from "../Button/Button.css.js";
-import { Chevron } from "../Chevron/index.js";
 import { useState, useCallback, useEffect } from "react";
+import "react-use";
+import { Chevron } from "../Chevron/index.js";
 import { vars } from "../themes/axos.css.js";
 /* empty css                                */
 /* empty css                                   */

package/dist/Button/Button.d.ts

@@ -0,0 +1,24 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+import { ButtonVariants } from "./Button.css";
+export type ButtonBase = {
+    children?: ReactNode;
+    targetUrl?: string;
+    id?: string;
+    action?: () => void;
+    className?: string;
+    newTab?: boolean;
+};
+export type ButtonAsButton = ButtonBase & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBase> & {
+    as?: "button";
+};
+export type ButtonAsLink = ButtonBase & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBase> & {
+    as?: "a";
+};
+export type ButtonProps = ButtonAsButton | ButtonAsLink;
+export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, newTab, action, className, }: ButtonProps & ButtonVariants) => import("react").DetailedReactHTMLElement<{
+    className: string;
+    href: string | undefined;
+    id: string | undefined;
+    target: string;
+    onClick: (() => void) | undefined;
+}, HTMLElement>;

package/dist/Button/Button.js

@@ -0,0 +1,31 @@
+import clsx from "clsx";
+import { createElement } from "react";
+import { button } from "./Button.css.js";
+const Button = ({
+  as = "a",
+  children,
+  color = "primary",
+  size = "large",
+  disabled,
+  rounded = "medium",
+  targetUrl,
+  id,
+  newTab = false,
+  action,
+  className
+}) => {
+  return createElement(
+    as,
+    {
+      className: clsx(button({ color, size, disabled, rounded }), className),
+      href: targetUrl,
+      id,
+      target: newTab ? "_blank" : "_self",
+      onClick: action
+    },
+    children
+  );
+};
+export {
+  Button
+};

package/dist/Button/GoBackButton.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from "./Button";
+import { ButtonVariants } from "./Button.css";
+export declare const GoBackButton: (props: ButtonProps & ButtonVariants) => import("react/jsx-runtime").JSX.Element;

package/dist/Button/GoBackButton.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useMount } from "react-use";
+import { Button } from "./Button.js";
+const GoBackButton = (props) => {
+  const [previusUrl, setPreviusUrl] = useState("");
+  useMount(() => {
+    setPreviusUrl(document == null ? void 0 : document.referrer);
+  });
+  return /* @__PURE__ */ jsx(Button, { as: "a", targetUrl: previusUrl, children: props.children });
+};
+export {
+  GoBackButton
+};

package/dist/Button/index.d.ts

@@ -1,21 +1,3 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
-import { ButtonVariants } from "./Button.css";
-export type ButtonBase = {
-    children?: ReactNode;
-    targetUrl?: string;
-    id?: string;
-    action?: () => void;
-};
-export type ButtonAsButton = ButtonBase & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBase> & {
-    as?: "button";
-};
-export type ButtonAsLink = ButtonBase & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBase> & {
-    as?: "a";
-};
-export type ButtonProps = ButtonAsButton | ButtonAsLink;
-export declare const Button: ({ as, children, color, size, disabled, rounded, targetUrl, id, action, }: ButtonProps & ButtonVariants) => import("react").DetailedReactHTMLElement<{
-    className: string;
-    href: string | undefined;
-    id: string | undefined;
-    onClick: (() => void) | undefined;
-}, HTMLElement>;
+export * from "./Button";
+export * from "./Button.css";
+export * from "./GoBackButton";

package/dist/Button/index.js

@@ -1,23 +1,8 @@
-import { createElement } from "react";
+import { Button } from "./Button.js";
 import { button } from "./Button.css.js";
-const Button = ({
-  as = "a",
-  children,
-  color,
-  size = "large",
-  disabled,
-  rounded = "medium",
-  targetUrl,
-  id,
-  action
-}) => {
-  const className = button({ color, size, disabled, rounded });
-  return createElement(
-    as,
-    { className, href: targetUrl, id, onClick: action },
-    children
-  );
-};
+import { GoBackButton } from "./GoBackButton.js";
 export {
-  Button
+  Button,
+  GoBackButton,
+  button
 };

package/dist/CallToActionBar/index.js

@@ -1,10 +1,12 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Button } from "../Button/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import { useState, useEffect } from "react";
+import "react-use";
 import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
-import { useState, useEffect } from "react";
 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";
 const CallToActionBar = ({
@@ -80,8 +82,11 @@ const CallToActionBar = ({
             /* @__PURE__ */ jsxs(
               "div",
               {
-                className: `${cta_body_section} ${banner_size !== "large" ? "flex middle" : ""}`,
-                style: row_reverse ? { flexDirection: "row-reverse" } : {},
+                className: clsx(
+                  cta_body_section,
+                  banner_size !== "large" ? "flex middle" : "",
+                  row_reverse ? "reversed" : ""
+                ),
                 children: [
                   /* @__PURE__ */ jsxs(
                     "div",
@@ -97,38 +102,27 @@ const CallToActionBar = ({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: clsx(ctas_section, "flex", "text_center"),
-                      style: banner_size === "small" ? {
-                        flexShrink: 0,
-                        marginRight: `${row_reverse ? "40px" : "20px"}`,
-                        padding: 0
-                      } : {},
-                      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
-                        )
-                      )
-                    }
-                  )
+                  /* @__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,
+                        color: getVariant(variant),
+                        size: "medium",
+                        rounded: "medium",
+                        children: displayText
+                      },
+                      id2
+                    ) : /* @__PURE__ */ jsx(
+                      Chevron,
+                      {
+                        targetUrl,
+                        variant: getVariant(variant),
+                        children: displayText
+                      },
+                      id2
+                    )
+                  ) })
                 ]
               }
             )

package/dist/CollectInformationAlert/index.js

@@ -1,5 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { Button } from "../Button/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
 import { Hyperlink } from "../Hyperlink/index.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
 import SvgCloseIcon from "../icons/CloseIcon/index.js";

package/dist/ContentBanner/index.js

@@ -2,7 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Chevron } from "../Chevron/index.js";
 import { headline_text } from "../HeroBanner/HeroBanner.css.js";
 import { getVariant } from "../utils/getVariant.js";
-import { Button } from "../Button/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
 import { content_banner, section_pad, body_copy, call_to_action_row, link } from "./ContentBanner.css.js";
 const ContentBanner = ({
   variant,

package/dist/Forms/ScheduleCall.d.ts

@@ -2,6 +2,7 @@ import { ChevronProps } from '../Chevron/Chevron.interface';
 import { QuaternaryTypes } from '../utils/variant.types';
 import { PropsWithChildren, ReactNode } from "react";
 export interface FormProps extends PropsWithChildren {
+    id?: string;
     onSubmit?: (values: {
         [index: string]: string;
     }) => void;
@@ -12,4 +13,4 @@ export interface FormProps extends PropsWithChildren {
     validateEmail: (email: string) => Promise<boolean>;
     callToAction: Omit<ChevronProps, "targetUrl">;
 }
-export declare const ScheduleCall: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, callToAction, validateEmail, }: FormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ScheduleCall: ({ icon, children, onSubmit, disclosure, variant: fullVariant, headline, callToAction, validateEmail, id, }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Forms/ScheduleCall.js

@@ -1,7 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button } from "../Button/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
 import { Input } from "../Input/index.js";
 import SvgAxosX from "../icons/AxosX/index.js";
 import "../icons/CheckIcon/CheckIcon.css.js";
@@ -25,7 +28,8 @@ const ScheduleCall = ({
   variant: fullVariant = "primary",
   headline,
   callToAction,
-  validateEmail
+  validateEmail,
+  id
 }) => {
   var _a, _b, _c, _d;
   const schema = z.object({
@@ -52,15 +56,9 @@ const ScheduleCall = ({
     await onSubmit(data);
   };
   const variant = getVariant(fullVariant);
-  return /* @__PURE__ */ jsx("section", { className: clsx(formContainer({ variant })), children: /* @__PURE__ */ jsx("section", { className: clsx("containment"), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
+  return /* @__PURE__ */ jsx("section", { className: clsx(formContainer({ variant })), children: /* @__PURE__ */ jsxs(FormProvider, { ...methods, children: [
     icon && /* @__PURE__ */ jsx("div", { className: clsx("text_center", iconForm), children: /* @__PURE__ */ jsx(SvgAxosX, {}) }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx("header_2 text_center", headerForm({ variant })),
-        children: headline
-      }
-    ),
+    /* @__PURE__ */ jsx("div", { className: clsx("header_2 text_center", headerForm({ variant })), children: headline }),
     /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(submitForm), children: [
       /* @__PURE__ */ jsxs("div", { className: clsx(formWrapper({ variant })), children: [
         /* @__PURE__ */ jsx("div", { className: "", children: /* @__PURE__ */ jsx(
@@ -134,7 +132,7 @@ const ScheduleCall = ({
         }
       ) })
     ] })
-  ] }) }) });
+  ] }) }, id);
 };
 export {
   ScheduleCall

package/dist/HeroBanner/index.js

@@ -1,5 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Button } from "../Button/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
 import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
 import { logout, hero_banner, hero_content, reversed, hero_text, supertag, headline_text, hero_btns, hero_img } from "./HeroBanner.css.js";
@@ -63,10 +66,8 @@ const HeroBanner = ({
                 "data-nimg": 1,
                 className: "img_fluid",
                 style: { color: "transparent" },
-                src: `${image.src}?fm=png&w=500&h=400&fit=fill&r=20`,
-                alt: image.alt,
-                width: 500,
-                height: 400
+                src: `${image.src}?w=604&h=480&fit=fill`,
+                alt: image.alt
               }
             ) })
           ]

package/dist/IconBillboard/IconBillboard.d.ts

@@ -1,8 +1,9 @@
 import { ChevronProps } from '../Chevron/Chevron.interface';
 import { ReactNode } from "react";
+import { ImageInterface } from ".";
 import { ContainerVariants, LayoutVariants } from "./IconBillboard.css";
 export interface FocusProps {
-    icon?: ReactNode;
+    icon?: ImageInterface;
     headline?: ReactNode | undefined;
     body?: ReactNode | undefined;
     items?: {
@@ -10,5 +11,6 @@ export interface FocusProps {
         content: ReactNode;
     }[];
     callToActionRow?: ChevronProps[];
+    set?: boolean;
 }
 export declare const IconBillboard: (props: FocusProps & ContainerVariants & LayoutVariants) => import("react/jsx-runtime").JSX.Element;

package/dist/IconBillboard/IconBillboard.interface.d.ts

@@ -10,6 +10,7 @@ export interface IconBillboardSet {
     iconBillboards: IconBillboardProps[];
     additionalDetails: ReactNode | string;
     side: boolean;
+    set?: boolean;
 }
 export interface IconBillboardProps {
     id?: string;
@@ -18,6 +19,7 @@ export interface IconBillboardProps {
     bodyCopy?: ReactNode | undefined;
     bullets: BulletItemProps[];
     callToActionRow: ChevronProps[];
+    set?: boolean;
 }
 export interface ImageInterface {
     src: string;

package/dist/IconBillboard/IconBillboard.js

@@ -3,7 +3,10 @@ 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/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
 import { containerIconBillboard, layout, billboard_icon, content, headerIconBillboard, title, list, buttons } from "./IconBillboard.css.js";
 const IconBillboard = (props) => {
   const {
@@ -12,42 +15,54 @@ const IconBillboard = (props) => {
     side = false,
     items,
     headline,
-    body
+    body,
+    icon,
+    set
   } = props;
   const variant = getVariant(fullVariant);
-  return /* @__PURE__ */ jsxs("div", { className: clsx(containerIconBillboard({ variant }), "containment"), children: [
-    /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
-      /* @__PURE__ */ jsx("div", { className: billboard_icon, children: props.icon }),
-      /* @__PURE__ */ jsxs("div", { className: content, children: [
-        /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
-          /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline }),
-          /* @__PURE__ */ jsx("div", { children: body })
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        containerIconBillboard({ variant }),
+        "billboard",
+        `${set ? "" : "containment"}`
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: `middle ${layout({ side })}`, children: [
+          icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, children: /* @__PURE__ */ jsx("img", { src: icon == null ? void 0 : icon.src, className: "img_fluid", alt: icon == null ? void 0 : icon.alt }) }),
+          /* @__PURE__ */ jsxs("div", { className: content, children: [
+            /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
+              /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline }),
+              /* @__PURE__ */ jsx("div", { children: body })
+            ] }),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: items == null ? void 0 : items.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.content }, item.id)) }) })
+          ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: items == null ? void 0 : items.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.content }, item.id)) }) })
-      ] })
-    ] }),
-    callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
-      ({ id, variant: variant2, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
-        Button,
-        {
-          targetUrl,
-          color: getVariant(variant2),
-          size: "medium",
-          rounded: "medium",
-          children: displayText
-        },
-        id
-      ) : /* @__PURE__ */ jsx(
-        Chevron,
-        {
-          targetUrl,
-          variant: getVariant(variant2),
-          children: displayText
-        },
-        id
-      )
-    ) })
-  ] });
+        callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
+          ({ id, variant: variant2, displayText, targetUrl, type }) => type === "Button" ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              targetUrl,
+              color: getVariant(variant2),
+              size: "medium",
+              rounded: "medium",
+              children: displayText
+            },
+            id
+          ) : /* @__PURE__ */ jsx(
+            Chevron,
+            {
+              targetUrl,
+              variant: getVariant(variant2),
+              children: displayText
+            },
+            id
+          )
+        ) })
+      ]
+    }
+  );
 };
 export {
   IconBillboard

package/dist/IconBillboard/IconBillboardSet.js

@@ -2,7 +2,10 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { BulletItem } from "../BulletItem/BulletItem.js";
 import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
-import { Button } from "../Button/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/Button.css.js";
+import "react";
+import "react-use";
 import { section_text, header_section, section_container, containerIconBillboard, layout, billboard_icon, content, headerIconBillboard, title, list, buttons } from "./IconBillboard.css.js";
 const IconBillboardSet = ({
   variant,
@@ -13,7 +16,7 @@ const IconBillboardSet = ({
   additionalDetails
 }) => {
   const billboard_variant = getVariant(variant);
-  return /* @__PURE__ */ jsxs("section", { className: "containment section_spacer", children: [
+  return /* @__PURE__ */ jsxs("section", { className: "containment section_spacer billboard", children: [
     (headline || bodyCopy) && /* @__PURE__ */ jsxs("div", { className: section_text, children: [
       headline && /* @__PURE__ */ jsx(
         "h2",
@@ -25,61 +28,52 @@ const IconBillboardSet = ({
       bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
     ] }),
     /* @__PURE__ */ jsx("div", { className: section_container, children: iconBillboards.map(
-      ({ id, icon, headline: headline2, bodyCopy: bodyCopy2, bullets, callToActionRow }) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: containerIconBillboard({
-            variant: getVariant(variant)
-          }),
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
-              icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, children: /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: icon == null ? void 0 : icon.src,
-                  className: "img_fluid",
-                  alt: icon == null ? void 0 : icon.alt
-                }
-              ) }),
-              /* @__PURE__ */ jsxs("div", { className: content, children: [
-                /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
-                  /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline2 }),
-                  /* @__PURE__ */ jsx("div", { children: bodyCopy2 })
-                ] }),
-                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: bullets.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.copy }, item.id)) }) })
-              ] })
+      ({ id, icon, headline: headline2, bodyCopy: bodyCopy2, bullets, callToActionRow }) => /* @__PURE__ */ jsxs("div", { className: containerIconBillboard({ variant }), children: [
+        /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
+          icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: icon == null ? void 0 : icon.src,
+              className: "img_fluid",
+              alt: icon == null ? void 0 : icon.alt
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: content, children: [
+            /* @__PURE__ */ jsxs("div", { className: headerIconBillboard, children: [
+              /* @__PURE__ */ jsx("div", { className: title({ variant }), children: headline2 }),
+              /* @__PURE__ */ jsx("div", { children: bodyCopy2 })
             ] }),
-            callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
-              ({
-                id: id2,
-                variant: variant2,
-                displayText,
-                targetUrl,
-                type
-              }) => type === "Button" ? /* @__PURE__ */ jsx(
-                Button,
-                {
-                  targetUrl,
-                  color: getVariant(variant2),
-                  size: "medium",
-                  rounded: "medium",
-                  children: displayText
-                },
-                id2
-              ) : /* @__PURE__ */ jsx(
-                Chevron,
-                {
-                  targetUrl,
-                  variant: getVariant(variant2),
-                  children: displayText
-                },
-                id2
-              )
-            ) })
-          ]
-        },
-        id
-      )
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("ul", { className: list, children: bullets.map((item) => /* @__PURE__ */ jsx(BulletItem, { id: item.id, children: item.copy }, item.id)) }) })
+          ] })
+        ] }),
+        callToActionRow && /* @__PURE__ */ jsx("div", { className: buttons, children: callToActionRow.map(
+          ({
+            id: id2,
+            variant: variant2,
+            displayText,
+            targetUrl,
+            type
+          }) => type === "Button" ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              targetUrl,
+              color: getVariant(variant2),
+              size: "medium",
+              rounded: "medium",
+              children: displayText
+            },
+            id2
+          ) : /* @__PURE__ */ jsx(
+            Chevron,
+            {
+              targetUrl,
+              variant: getVariant(variant2),
+              children: displayText
+            },
+            id2
+          )
+        ) })
+      ] }, id)
     ) }),
     additionalDetails && /* @__PURE__ */ jsx("div", { className: section_text, children: /* @__PURE__ */ jsx(Fragment, { children: additionalDetails }) })
   ] });

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

@@ -31,6 +31,7 @@ export declare const imagePlacement: import("@vanilla-extract/recipes").RuntimeF
             selectors: {
                 [x: string]: {
                     flexDirection: "column-reverse";
+                    justifyContent: "space-between";
                 };
             };
         };

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

@@ -10,6 +10,8 @@ export interface ImageBillboardSetProps {
     imageBillboards: ImageBillboardInterface[];
     additionalDetails?: string | ReactNode;
     variant: QuaternaryTypes;
+    set?: boolean;
+    bordered?: boolean;
 }
 export interface ImageBillboardInterface {
     id: string;
@@ -23,4 +25,5 @@ export interface ImageBillboardInterface {
     bullets: BulletItemProps[];
     image: ImageInterface;
     callToActionRow: ChevronProps[];
+    set?: boolean;
 }