@axos-web-dev/shared-components 0.0.2 → 0.0.4

package/dist/HeroBanner/index.js

@@ -1,10 +1,10 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { Button } from "../Button/index.js";
 import { Chevron } from "../Chevron/index.js";
 import { getVariant } from "../utils/getVariant.js";
-import clsx from "clsx";
-import { hero_banner, mobile_shift, reversed, hero_content, hero_text, eyebrow_tag, headline_hero, hero_body, hero_btns, hero_img } from "./HeroBanner.css.js";
+import { logout, hero_banner, hero_content, reversed, hero_text, supertag, headline_text, hero_btns, hero_img } from "./HeroBanner.css.js";
 const HeroBanner = ({
+  id,
   eyebrow,
   headline,
   bodyCopy,
@@ -17,62 +17,63 @@ const HeroBanner = ({
   return /* @__PURE__ */ jsx(
     "section",
     {
-      className: clsx(
-        bannerType !== "Hero" ? "logout" : null,
-        hero_banner({ variant: getVariant(variant) })
-      ),
-      children: /* @__PURE__ */ jsx("div", { className: `containment ${mobile_shift}`, children: /* @__PURE__ */ jsxs(
+      className: `${bannerType !== "Hero" ? logout : ""} 
+      ${hero_banner({ variant: getVariant(variant) })}`,
+      children: /* @__PURE__ */ jsx("div", { className: "containment", children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: clsx(
-            imagePlacement !== "Right" ? reversed : null,
-            `${hero_content}`
-          ),
+          className: `${hero_content} ${imagePlacement !== "Right" ? reversed : ""}`,
           children: [
-            /* @__PURE__ */ jsxs("div", { className: `${hero_text}`, children: [
-              eyebrow && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: `supertag ${eyebrow_tag({ variant: getVariant(variant) })}`,
-                  children: eyebrow
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "h1",
-                {
-                  className: `header_1 ${headline_hero({ variant: getVariant(variant) })}`,
-                  children: headline
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: `${hero_body}`, children: bodyCopy })
-            ] }),
-            callToActionRow && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
-              ({
-                id,
-                variant: variant2,
-                displayText,
-                targetUrl,
-                type
-              }) => type === "Button" ? /* @__PURE__ */ jsx(
-                Button,
-                {
+            /* @__PURE__ */ jsxs("div", { className: hero_text, children: [
+              /* @__PURE__ */ jsx("span", { className: supertag({ variant: getVariant(variant) }), children: eyebrow }),
+              /* @__PURE__ */ jsx("h1", { className: headline_text({ variant: getVariant(variant) }), children: headline }),
+              /* @__PURE__ */ jsx(Fragment, { children: bodyCopy }),
+              callToActionRow && /* @__PURE__ */ jsx("div", { className: `${hero_btns}`, children: callToActionRow.map(
+                ({
+                  id: id2,
+                  variant: variant2,
+                  displayText,
                   targetUrl,
-                  color: variant2,
-                  size: "medium",
-                  rounded: "medium",
-                  children: displayText
-                },
-                id
-              ) : /* @__PURE__ */ jsx(Chevron, { targetUrl, variant: variant2, children: displayText }, id)
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: `${hero_img}`, role: "presentation", children: /* @__PURE__ */ jsx("img", { src: image.src, className: "img_fluid", alt: image.alt }) })
+                  type
+                }) => type === "Button" ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    targetUrl,
+                    color: getVariant(variant2),
+                    size: "large",
+                    rounded: "medium",
+                    children: displayText
+                  },
+                  id2
+                ) : /* @__PURE__ */ jsx(
+                  Chevron,
+                  {
+                    targetUrl,
+                    variant: getVariant(variant2),
+                    children: displayText
+                  },
+                  id2
+                )
+              ) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: hero_img, role: "presentation", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                decoding: "async",
+                "data-nimg": 1,
+                className: "img_fluid",
+                style: { color: "transparent" },
+                src: image.src,
+                alt: image.alt
+              }
+            ) })
           ]
         }
       ) })
-    }
+    },
+    id
   );
 };
 export {
   HeroBanner
 };
-//# sourceMappingURL=index.js.map

package/dist/Hyperlink/Hyperlink.interface.d.ts

@@ -17,4 +17,3 @@ export interface HyperlinkProps extends PropsWithChildren {
      */
     className?: string;
 }
-//# sourceMappingURL=Hyperlink.interface.d.ts.map

package/dist/Hyperlink/Hyperlink.interface.js

@@ -1,2 +1 @@
 
-//# sourceMappingURL=Hyperlink.interface.js.map

package/dist/Hyperlink/index.d.ts

@@ -1,4 +1,3 @@
 import { FC } from "react";
 import { HyperlinkProps } from "./Hyperlink.interface";
 export declare const Hyperlink: FC<HyperlinkProps>;
-//# sourceMappingURL=index.d.ts.map

package/dist/Hyperlink/index.js

@@ -18,4 +18,3 @@ const Hyperlink = ({
 export {
   Hyperlink
 };
-//# sourceMappingURL=index.js.map

package/dist/IconBillboard/IconBillboard.css.d.ts

@@ -1,5 +1,5 @@
 import { RecipeVariants } from "@vanilla-extract/recipes";
-export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const containerIconBillboard: import("@vanilla-extract/recipes").RuntimeFn<{
     variant: {
         primary: {
             background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -24,19 +24,39 @@ export declare const layout: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const icon: string;
-export declare const header: string;
+export declare const billboard_icon: string;
+export declare const headerIconBillboard: string;
 export declare const title: import("@vanilla-extract/recipes").RuntimeFn<{
     variant: {
         primary: {
-            WebkitBackgroundClip: "text";
-            backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            WebkitTextFillColor: "transparent";
+            readonly selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: string;
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: string;
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                };
+            };
         };
         secondary: {
-            WebkitBackgroundClip: "text";
-            backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            WebkitTextFillColor: "transparent";
+            selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: "text";
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: "transparent";
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                };
+            };
         };
         tertiary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -50,6 +70,27 @@ export declare const content: string;
 export declare const list: string;
 export declare const listItem: string;
 export declare const buttons: string;
-export type ContainerVariants = RecipeVariants<typeof container>;
+export declare const section_text: string;
+export declare const header_section: import("@vanilla-extract/recipes").RuntimeFn<{
+    variant: {
+        primary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundClip: "text";
+            WebkitTextFillColor: "transparent";
+        };
+        secondary: {
+            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            backgroundClip: "text";
+            WebkitTextFillColor: "transparent";
+        };
+        tertiary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        quaternary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+export declare const section_container: string;
+export type ContainerVariants = RecipeVariants<typeof containerIconBillboard>;
 export type LayoutVariants = RecipeVariants<typeof layout>;
-//# sourceMappingURL=IconBillboard.css.d.ts.map

package/dist/IconBillboard/IconBillboard.css.js

@@ -1,23 +1,30 @@
+/* empty css                                */
+/* empty css                                   */
 /* empty css                                 */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var container = createRuntimeFn({ defaultClassName: "_1r4ovbu0", variantClassNames: { variant: { primary: "_1r4ovbu1", secondary: "_1r4ovbu2", tertiary: "_1r4ovbu3", quaternary: "_1r4ovbu4" } }, defaultVariants: {}, compoundVariants: [] });
+var containerIconBillboard = createRuntimeFn({ defaultClassName: "_1r4ovbu0", variantClassNames: { variant: { primary: "_1r4ovbu1", secondary: "_1r4ovbu2", tertiary: "_1r4ovbu3", quaternary: "_1r4ovbu4" } }, defaultVariants: {}, compoundVariants: [] });
 var layout = createRuntimeFn({ defaultClassName: "_1r4ovbu5", variantClassNames: { side: { true: "_1r4ovbu6" } }, defaultVariants: {}, compoundVariants: [] });
-var icon = "_1r4ovbu7";
-var header = "_1r4ovbu8";
+var billboard_icon = "_1r4ovbu7";
+var headerIconBillboard = "_1r4ovbu8";
 var title = createRuntimeFn({ defaultClassName: "_1r4ovbu9", variantClassNames: { variant: { primary: "_1r4ovbua", secondary: "_1r4ovbub", tertiary: "_1r4ovbuc", quaternary: "_1r4ovbud" } }, defaultVariants: {}, compoundVariants: [] });
 var content = "_1r4ovbue";
 var list = "_1r4ovbuf";
 var listItem = "_1r4ovbug";
 var buttons = "_1r4ovbuh";
+var section_text = "_1r4ovbui";
+var header_section = createRuntimeFn({ defaultClassName: "_1r4ovbuj", variantClassNames: { variant: { primary: "_1r4ovbuk", secondary: "_1r4ovbul", tertiary: "_1r4ovbum", quaternary: "_1r4ovbun" } }, defaultVariants: {}, compoundVariants: [] });
+var section_container = "_1r4ovbuo";
 export {
+  billboard_icon,
   buttons,
-  container,
+  containerIconBillboard,
   content,
-  header,
-  icon,
+  headerIconBillboard,
+  header_section,
   layout,
   list,
   listItem,
+  section_container,
+  section_text,
   title
 };
-//# sourceMappingURL=IconBillboard.css.js.map

package/dist/IconBillboard/IconBillboard.d.ts

@@ -0,0 +1,14 @@
+import { ChevronProps } from '../Chevron/Chevron.interface';
+import { ReactNode } from "react";
+import { ContainerVariants, LayoutVariants } from "./IconBillboard.css";
+export interface FocusProps {
+    icon?: ReactNode;
+    headline?: ReactNode | undefined;
+    body?: ReactNode | undefined;
+    items?: {
+        id: string;
+        content: ReactNode;
+    }[];
+    callToActionRow?: ChevronProps[];
+}
+export declare const IconBillboard: (props: FocusProps & ContainerVariants & LayoutVariants) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { BulletItemProps } from '../BulletItem';
+import { ChevronProps } from '../Chevron/Chevron.interface';
+import { QuaternaryTypes } from '../utils/variant.types';
+import { ReactNode } from "react";
+export interface IconBillboardSet {
+    id: string;
+    headline: ReactNode | string;
+    variant: QuaternaryTypes;
+    bodyCopy: ReactNode | string;
+    iconBillboards: IconBillboardProps[];
+    additionalDetails: ReactNode | string;
+    side: boolean;
+}
+export interface IconBillboardProps {
+    id?: string;
+    icon?: ImageInterface;
+    headline?: ReactNode | undefined;
+    bodyCopy?: ReactNode | undefined;
+    bullets: BulletItemProps[];
+    callToActionRow: ChevronProps[];
+}
+export interface ImageInterface {
+    src: string;
+    alt?: string;
+}

package/dist/IconBillboard/IconBillboard.interface.js

@@ -0,0 +1 @@
+

package/dist/IconBillboard/IconBillboard.js

@@ -0,0 +1,52 @@
+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 { Button } from "../Button/index.js";
+import { containerIconBillboard, layout, billboard_icon, content, headerIconBillboard, title, list, buttons } from "./IconBillboard.css.js";
+const IconBillboard = (props) => {
+  const {
+    callToActionRow,
+    variant,
+    side = false,
+    items,
+    headline,
+    body
+  } = props;
+  return /* @__PURE__ */ jsxs("div", { className: containerIconBillboard({ variant }), 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 })
+        ] }),
+        /* @__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
+      )
+    ) })
+  ] });
+};
+export {
+  IconBillboard
+};

package/dist/IconBillboard/IconBillboardSet.d.ts

@@ -0,0 +1,2 @@
+import type { IconBillboardSet as Props } from "./IconBillboard.interface";
+export declare const IconBillboardSet: ({ variant, side, iconBillboards, headline, bodyCopy, additionalDetails, }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/IconBillboard/IconBillboardSet.js

@@ -0,0 +1,80 @@
+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 { section_text, header_section, section_container, containerIconBillboard, layout, billboard_icon, content, headerIconBillboard, title, list, buttons } from "./IconBillboard.css.js";
+const IconBillboardSet = ({
+  variant,
+  side = false,
+  iconBillboards,
+  headline,
+  bodyCopy,
+  additionalDetails
+}) => {
+  const billboard_variant = getVariant(variant);
+  return /* @__PURE__ */ jsxs("section", { className: "containment section_spacer", children: [
+    (headline || bodyCopy) && /* @__PURE__ */ jsxs("div", { className: section_text, children: [
+      headline && /* @__PURE__ */ jsx(
+        "h2",
+        {
+          className: `header_2 ${header_section({ variant: billboard_variant })}`,
+          children: headline
+        }
+      ),
+      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 }), 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)) }) })
+          ] })
+        ] }),
+        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 }) })
+  ] });
+};
+export {
+  IconBillboardSet
+};

package/dist/IconBillboard/index.d.ts

@@ -1,13 +1,4 @@
-import { ReactNode } from "react";
-import { ContainerVariants, LayoutVariants } from "./IconBillboard.css";
-export interface FocusProps {
-    icon?: ReactNode;
-    headline: ReactNode | undefined;
-    body: ReactNode | undefined;
-    items: {
-        id: string;
-        content: ReactNode;
-    }[];
-}
-export declare const IconBillboard: (props: FocusProps & ContainerVariants & LayoutVariants) => import("react/jsx-dev-runtime").JSX.Element;
-//# sourceMappingURL=index.d.ts.map
+export * from "./IconBillboard";
+export * from "./IconBillboard.css";
+export type { IconBillboardSet, ImageInterface, } from "./IconBillboard.interface";
+export * from "./IconBillboardSet";

package/dist/IconBillboard/index.js

@@ -1,34 +1,19 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { BulletItem } from "../BulletItem/BulletItem.js";
-import { Button } from "../Button/index.js";
-import { container, layout, icon, content, header, title, list, buttons } from "./IconBillboard.css.js";
-const IconBillboard = (props) => {
-  const { variant, side = false, items, headline, body } = props;
-  const variantButton = /* @__PURE__ */ new Map([
-    ["primary", "primary"],
-    ["secondary", "primary"],
-    ["tertiary", "secondary"],
-    ["quaternary", "secondary"],
-    [void 0, "primary"]
-  ]);
-  return /* @__PURE__ */ jsxs("div", { className: container({ variant }), children: [
-    /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
-      /* @__PURE__ */ jsx("div", { className: icon, children: props.icon }),
-      /* @__PURE__ */ jsxs("div", { className: content, children: [
-        /* @__PURE__ */ jsxs("div", { className: header, 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.map((item) => /* @__PURE__ */ jsx(BulletItem, { children: item.content }, item.id)) }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: buttons, children: [
-      /* @__PURE__ */ jsx(Button, { rounded: "small", size: "large", color: variantButton.get(variant), children: "Lorem ipsum" }),
-      /* @__PURE__ */ jsx(Button, { color: "tertiary", children: "Lorem ipsum" })
-    ] })
-  ] });
-};
+import { IconBillboard } from "./IconBillboard.js";
+import { billboard_icon, buttons, containerIconBillboard, content, headerIconBillboard, header_section, layout, list, listItem, section_container, section_text, title } from "./IconBillboard.css.js";
+import { IconBillboardSet } from "./IconBillboardSet.js";
 export {
-  IconBillboard
+  IconBillboard,
+  IconBillboardSet,
+  billboard_icon,
+  buttons,
+  containerIconBillboard,
+  content,
+  headerIconBillboard,
+  header_section,
+  layout,
+  list,
+  listItem,
+  section_container,
+  section_text,
+  title
 };
-//# sourceMappingURL=index.js.map

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

@@ -18,17 +18,55 @@ export declare const billboard: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
+export declare const imagePlacement: import("@vanilla-extract/recipes").RuntimeFn<{
+    position: {
+        left: {
+            selectors: {
+                [x: string]: {
+                    flexDirection: "column";
+                };
+            };
+        };
+        right: {
+            selectors: {
+                [x: string]: {
+                    flexDirection: "column-reverse";
+                };
+            };
+        };
+    };
+}>;
 export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
+            selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: "text";
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: "transparent";
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                };
+            };
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
+            selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: "text";
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: "transparent";
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                };
+            };
         };
         tertiary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -41,14 +79,34 @@ export declare const supertag: import("@vanilla-extract/recipes").RuntimeFn<{
 export declare const header: import("@vanilla-extract/recipes").RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
+            selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: "text";
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: "transparent";
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                };
+            };
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundClip: "text";
-            WebkitTextFillColor: "transparent";
+            selectors: {
+                [x: string]: {
+                    WebkitBackgroundClip: "text";
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitTextFillColor: "transparent";
+                    color?: undefined;
+                } | {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    WebkitBackgroundClip?: undefined;
+                    backgroundImage?: undefined;
+                    WebkitTextFillColor?: undefined;
+                };
+            };
         };
         tertiary: {
             color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -64,6 +122,7 @@ export declare const billboard_body: string;
 export declare const billboard_header_section: string;
 export declare const billboard_ctas: string;
 export declare const body: string;
-export declare const container: string;
-export declare const section_text: string;
-//# sourceMappingURL=ImageBillboard.css.d.ts.map
+export declare const single_container: string;
+export declare const two_inline: string;
+export declare const three_inline: string;
+export declare const section_text_ImageBillboard: string;