@axos-web-dev/shared-components 0.0.1 → 0.0.3

package/dist/HeroBanner/HeroBanner.interface.d.ts

@@ -1,14 +1,14 @@
 import { ChevronProps } from '../Chevron/Chevron.interface';
-import { PrimaryAndTertiaryTypes } from '../utils/variant.types';
 import { ReactNode } from "react";
 export interface ImageInterface {
     src: string;
     alt?: string;
 }
 export interface HeroBannerInterface {
+    id?: string;
     bannerType?: "Hero" | "Logout";
     className?: string;
-    variant: PrimaryAndTertiaryTypes;
+    variant: string;
     eyebrow: string | ReactNode;
     headline: string | ReactNode;
     bodyCopy: string | ReactNode;

package/dist/HeroBanner/HeroBanner.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeroBanner.interface.d.ts","sourceRoot":"","sources":["../../lib/HeroBanner/HeroBanner.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,uBAAuB,CAAC;IACjC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,cAAc,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAClC,eAAe,CAAC,EAAE,YAAY,EAAE,CAAC;CAClC"}
+{"version":3,"file":"HeroBanner.interface.d.ts","sourceRoot":"","sources":["../../lib/HeroBanner/HeroBanner.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,cAAc,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAClC,eAAe,CAAC,EAAE,YAAY,EAAE,CAAC;CAClC"}

package/dist/HeroBanner/index.d.ts

@@ -1,4 +1,3 @@
-import { FC } from "react";
 import { HeroBannerInterface } from "./HeroBanner.interface";
-export declare const HeroBanner: FC<HeroBannerInterface>;
+export declare const HeroBanner: ({ id, eyebrow, headline, bodyCopy, callToActionRow, bannerType, image, imagePlacement, variant, }: HeroBannerInterface) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/HeroBanner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/HeroBanner/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAa3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,mBAAmB,CA2E9C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/HeroBanner/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,eAAO,MAAM,UAAU,sGAUpB,mBAAmB,4CAkErB,CAAC"}

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,59 +17,61 @@ 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 {

package/dist/HeroBanner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../lib/HeroBanner/index.tsx"],"sourcesContent":["\"use client\";\nimport { Button } from \"@lib/Button\";\nimport { Chevron } from \"@lib/Chevron\";\nimport { ChevronProps } from \"@lib/Chevron/Chevron.interface\";\nimport { getVariant } from \"@lib/utils/getVariant\";\nimport clsx from \"clsx\";\nimport { FC } from \"react\";\nimport {\n  eyebrow_tag,\n  headline_hero,\n  hero_banner,\n  hero_body,\n  hero_btns,\n  hero_content,\n  hero_img,\n  hero_text,\n  mobile_shift,\n  reversed,\n} from \"./HeroBanner.css\";\nimport { HeroBannerInterface } from \"./HeroBanner.interface\";\n\nexport const HeroBanner: FC<HeroBannerInterface> = ({\n  eyebrow,\n  headline,\n  bodyCopy,\n  callToActionRow,\n  bannerType = \"Hero\",\n  image,\n  imagePlacement = \"Right\",\n  variant,\n}) => {\n  return (\n    <section\n      className={clsx(\n        bannerType !== \"Hero\" ? \"logout\" : null,\n        hero_banner({ variant: getVariant(variant) })\n      )}\n    >\n      <div className={`containment ${mobile_shift}`}>\n        <div\n          className={clsx(\n            imagePlacement !== \"Right\" ? reversed : null,\n            `${hero_content}`\n          )}\n        >\n          <div className={`${hero_text}`}>\n            {eyebrow && (\n              <span\n                className={`supertag ${eyebrow_tag({ variant: getVariant(variant) })}`}\n              >\n                {eyebrow}\n              </span>\n            )}\n            <h1\n              className={`header_1 ${headline_hero({ variant: getVariant(variant) })}`}\n            >\n              {headline}\n            </h1>\n            <div className={`${hero_body}`}>{bodyCopy}</div>\n          </div>\n\n          {callToActionRow && (\n            <div className={`${hero_btns}`}>\n              {callToActionRow.map(\n                ({\n                  id,\n                  variant,\n                  displayText,\n                  targetUrl,\n                  type,\n                }: ChevronProps) =>\n                  type === \"Button\" ? (\n                    <Button\n                      key={id}\n                      targetUrl={targetUrl}\n                      color={variant}\n                      size=\"medium\"\n                      rounded=\"medium\"\n                    >\n                      {displayText}\n                    </Button>\n                  ) : (\n                    <Chevron key={id} targetUrl={targetUrl} variant={variant}>\n                      {displayText}\n                    </Chevron>\n                  )\n              )}\n            </div>\n          )}\n          <div className={`${hero_img}`} role=\"presentation\">\n            <img src={image.src} className=\"img_fluid\" alt={image.alt} />\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n"],"names":["variant"],"mappings":";;;;;;AAqBO,MAAM,aAAsC,CAAC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,iBAAiB;AAAA,EACjB;AACF,MAAM;AAEF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,eAAe,SAAS,WAAW;AAAA,QACnC,YAAY,EAAE,SAAS,WAAW,OAAO,GAAG;AAAA,MAC9C;AAAA,MAEA,UAAC,oBAAA,OAAA,EAAI,WAAW,eAAe,YAAY,IACzC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT,mBAAmB,UAAU,WAAW;AAAA,YACxC,GAAG,YAAY;AAAA,UACjB;AAAA,UAEA,UAAA;AAAA,YAAA,qBAAC,OAAI,EAAA,WAAW,GAAG,SAAS,IACzB,UAAA;AAAA,cACC,WAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,YAAY,YAAY,EAAE,SAAS,WAAW,OAAO,EAAG,CAAA,CAAC;AAAA,kBAEnE,UAAA;AAAA,gBAAA;AAAA,cACH;AAAA,cAEF;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW,YAAY,cAAc,EAAE,SAAS,WAAW,OAAO,EAAG,CAAA,CAAC;AAAA,kBAErE,UAAA;AAAA,gBAAA;AAAA,cACH;AAAA,kCACC,OAAI,EAAA,WAAW,GAAG,SAAS,IAAK,UAAS,UAAA;AAAA,YAAA,GAC5C;AAAA,YAEC,mBACE,oBAAA,OAAA,EAAI,WAAW,GAAG,SAAS,IACzB,UAAgB,gBAAA;AAAA,cACf,CAAC;AAAA,gBACC;AAAA,gBACA,SAAAA;AAAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA,MAEA,SAAS,WACP;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEC;AAAA,kBACA,OAAOA;AAAAA,kBACP,MAAK;AAAA,kBACL,SAAQ;AAAA,kBAEP,UAAA;AAAA,gBAAA;AAAA,gBANI;AAAA,cAAA,IASN,oBAAA,SAAA,EAAiB,WAAsB,SAASA,UAC9C,yBADW,EAEd;AAAA,YAAA,GAGR;AAAA,gCAED,OAAI,EAAA,WAAW,GAAG,QAAQ,IAAI,MAAK,gBAClC,UAAA,oBAAC,OAAI,EAAA,KAAK,MAAM,KAAK,WAAU,aAAY,KAAK,MAAM,IAAK,CAAA,GAC7D;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.js","sources":["../../lib/HeroBanner/index.tsx"],"sourcesContent":["import { Button } from \"@lib/Button\";\nimport { Chevron } from \"@lib/Chevron\";\nimport { ChevronProps } from \"@lib/Chevron/Chevron.interface\";\nimport { getVariant } from \"@lib/utils/getVariant\";\nimport {\n  headline_text,\n  hero_banner,\n  hero_btns,\n  hero_content,\n  hero_img,\n  hero_text,\n  logout,\n  reversed,\n  supertag,\n} from \"./HeroBanner.css\";\nimport { HeroBannerInterface } from \"./HeroBanner.interface\";\n\nexport const HeroBanner = ({\n  id,\n  eyebrow,\n  headline,\n  bodyCopy,\n  callToActionRow,\n  bannerType = \"Hero\",\n  image,\n  imagePlacement = \"Right\",\n  variant,\n}: HeroBannerInterface) => {\n  return (\n    <section\n      key={id}\n      className={`${bannerType !== \"Hero\" ? logout : \"\"} \n      ${hero_banner({ variant: getVariant(variant) })}`}\n    >\n      <div className=\"containment\">\n        <div\n          className={`${hero_content} ${imagePlacement !== \"Right\" ? reversed : \"\"}`}\n        >\n          <div className={hero_text}>\n            <span className={supertag({ variant: getVariant(variant) })}>\n              {eyebrow}\n            </span>\n            <h1 className={headline_text({ variant: getVariant(variant) })}>\n              {headline}\n            </h1>\n            <>{bodyCopy}</>\n            {callToActionRow && (\n              <div className={`${hero_btns}`}>\n                {callToActionRow.map(\n                  ({\n                    id,\n                    variant,\n                    displayText,\n                    targetUrl,\n                    type,\n                  }: ChevronProps) =>\n                    type === \"Button\" ? (\n                      <Button\n                        key={id}\n                        targetUrl={targetUrl}\n                        color={getVariant(variant)}\n                        size=\"large\"\n                        rounded=\"medium\"\n                      >\n                        {displayText}\n                      </Button>\n                    ) : (\n                      <Chevron\n                        key={id}\n                        targetUrl={targetUrl}\n                        variant={getVariant(variant)}\n                      >\n                        {displayText}\n                      </Chevron>\n                    )\n                )}\n              </div>\n            )}\n          </div>\n          <div className={hero_img} role=\"presentation\">\n            <img\n              decoding=\"async\"\n              data-nimg={1}\n              className=\"img_fluid\"\n              style={{ color: \"transparent\" }}\n              src={image.src}\n              alt={image.alt}\n            />\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n"],"names":["id","variant"],"mappings":";;;;;AAiBO,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,iBAAiB;AAAA,EACjB;AACF,MAA2B;AAEvB,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAW,GAAG,eAAe,SAAS,SAAS,EAAE;AAAA,QAC/C,YAAY,EAAE,SAAS,WAAW,OAAO,EAAG,CAAA,CAAC;AAAA,MAE/C,UAAA,oBAAC,OAAI,EAAA,WAAU,eACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,YAAY,IAAI,mBAAmB,UAAU,WAAW,EAAE;AAAA,UAExE,UAAA;AAAA,YAAC,qBAAA,OAAA,EAAI,WAAW,WACd,UAAA;AAAA,cAAC,oBAAA,QAAA,EAAK,WAAW,SAAS,EAAE,SAAS,WAAW,OAAO,EAAG,CAAA,GACvD,UACH,QAAA,CAAA;AAAA,cACA,oBAAC,MAAG,EAAA,WAAW,cAAc,EAAE,SAAS,WAAW,OAAO,EAAG,CAAA,GAC1D,UACH,SAAA,CAAA;AAAA,8CACG,UAAS,SAAA,CAAA;AAAA,cACX,mBACE,oBAAA,OAAA,EAAI,WAAW,GAAG,SAAS,IACzB,UAAgB,gBAAA;AAAA,gBACf,CAAC;AAAA,kBACC,IAAAA;AAAAA,kBACA,SAAAC;AAAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA,MAEA,SAAS,WACP;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBAEC;AAAA,oBACA,OAAO,WAAWA,QAAO;AAAA,oBACzB,MAAK;AAAA,oBACL,SAAQ;AAAA,oBAEP,UAAA;AAAA,kBAAA;AAAA,kBANID;AAAAA,gBAAA,IASP;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBAEC;AAAA,oBACA,SAAS,WAAWC,QAAO;AAAA,oBAE1B,UAAA;AAAA,kBAAA;AAAA,kBAJID;AAAAA,gBAKP;AAAA,cAAA,GAGR;AAAA,YAAA,GAEJ;AAAA,YACC,oBAAA,OAAA,EAAI,WAAW,UAAU,MAAK,gBAC7B,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,UAAS;AAAA,gBACT,aAAW;AAAA,gBACX,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,cAAc;AAAA,gBAC9B,KAAK,MAAM;AAAA,gBACX,KAAK,MAAM;AAAA,cAAA;AAAA,YAAA,GAEf;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,GAEJ;AAAA,IAAA;AAAA,IA5DK;AAAA,EAAA;AA+DX;"}

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

@@ -24,7 +24,7 @@ export declare const layout: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
 }>;
-export declare const icon: string;
+export declare const billboard_icon: string;
 export declare const header: string;
 export declare const title: import("@vanilla-extract/recipes").RuntimeFn<{
     variant: {
@@ -50,6 +50,28 @@ export declare const content: string;
 export declare const list: string;
 export declare const listItem: string;
 export declare const buttons: string;
+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 container>;
 export type LayoutVariants = RecipeVariants<typeof layout>;
 //# sourceMappingURL=IconBillboard.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconBillboard.css.d.ts","sourceRoot":"","sources":["../../lib/IconBillboard/IconBillboard.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAU,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA2BpB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;EAajB,CAAC;AAEH,eAAO,MAAM,IAAI,QAGf,CAAC;AAEH,eAAO,MAAM,MAAM,QAKjB,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;EA2BhB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC;AAEH,eAAO,MAAM,IAAI,QAKf,CAAC;AAEH,eAAO,MAAM,QAAQ,QAKnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAelB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AACjE,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC"}
+{"version":3,"file":"IconBillboard.css.d.ts","sourceRoot":"","sources":["../../lib/IconBillboard/IconBillboard.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAU,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA2BpB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;EAajB,CAAC;AAEH,eAAO,MAAM,cAAc,QAGzB,CAAC;AAEH,eAAO,MAAM,MAAM,QAKjB,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;EA2BhB,CAAC;AAEH,eAAO,MAAM,OAAO,QAIlB,CAAC;AAEH,eAAO,MAAM,IAAI,QAKf,CAAC;AAEH,eAAO,MAAM,QAAQ,QAKnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAelB,CAAC;AAEH,eAAO,MAAM,YAAY,QAKvB,CAAC;AAMH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;EAqBzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AACjE,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC"}

package/dist/IconBillboard/IconBillboard.css.js

@@ -2,22 +2,28 @@
 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 layout = createRuntimeFn({ defaultClassName: "_1r4ovbu5", variantClassNames: { side: { true: "_1r4ovbu6" } }, defaultVariants: {}, compoundVariants: [] });
-var icon = "_1r4ovbu7";
+var billboard_icon = "_1r4ovbu7";
 var header = "_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,
   content,
   header,
-  icon,
+  header_section,
   layout,
   list,
   listItem,
+  section_container,
+  section_text,
   title
 };
 //# sourceMappingURL=IconBillboard.css.js.map

package/dist/IconBillboard/IconBillboard.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconBillboard.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"IconBillboard.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

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

@@ -0,0 +1,34 @@
+import { ChevronProps } from '../Chevron/Chevron.interface';
+import { QuaternaryTypes, SecondaryTypes } from '../utils/variant.types';
+import { ReactNode } from "react";
+export interface IconBillboardSet {
+    id: string;
+    headline: ReactNode | string;
+    variant: QuaternaryTypes;
+    bodyCopy: ReactNode | string;
+    iconBillboards: IconBillboard[];
+    additionalDetails: ReactNode | string;
+    side: boolean;
+}
+export interface IconBillboard {
+    id?: string;
+    icon?: ImageInterface;
+    headline?: ReactNode | undefined;
+    bodyCopy?: ReactNode | undefined;
+    bullets: Bullet[];
+    callToActionRow: ChevronProps[];
+}
+export interface Bullet {
+    id: string;
+    variant: SecondaryTypes;
+    icon: {
+        src: string;
+        altText?: string;
+    };
+    copy: string | ReactNode;
+}
+export interface ImageInterface {
+    src: string;
+    alt?: string;
+}
+//# sourceMappingURL=IconBillboard.interface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconBillboard.interface.d.ts","sourceRoot":"","sources":["../../lib/IconBillboard/IconBillboard.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,iBAAiB,EAAE,SAAS,GAAG,MAAM,CAAC;IACtC,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,eAAe,EAAE,YAAY,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;CACd"}

package/dist/IconBillboard/IconBillboard.interface.js

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

package/dist/IconBillboard/IconBillboard.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconBillboard.interface.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/IconBillboard/index.d.ts

@@ -1,13 +1,3 @@
-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;
+import { IconBillboardSet } from "./IconBillboard.interface";
+export declare const IconBillboard: ({ variant, side, iconBillboards, headline, bodyCopy, additionalDetails, }: IconBillboardSet) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/IconBillboard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/IconBillboard/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EACL,iBAAiB,EACjB,cAAc,EASf,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,EAAE,SAAS,GAAG,SAAS,CAAC;IAC5B,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;CAC7C;AAED,eAAO,MAAM,aAAa,UACjB,UAAU,GAAG,iBAAiB,GAAG,cAAc,gDAyCvD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/IconBillboard/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,eAAO,MAAM,aAAa,8EAOvB,gBAAgB,4CA2FlB,CAAC"}

package/dist/IconBillboard/index.js

@@ -1,31 +1,78 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+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 { 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)) }) })
-      ] })
+import { section_text, header_section, section_container, container, layout, billboard_icon, content, header, title, list, buttons } from "./IconBillboard.css.js";
+const IconBillboard = ({
+  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__ */ 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" })
-    ] })
+    /* @__PURE__ */ jsx("div", { className: section_container, children: iconBillboards.map(
+      ({ id, icon, headline: headline2, bodyCopy: bodyCopy2, bullets, callToActionRow }) => /* @__PURE__ */ jsxs("div", { className: container({ variant }), children: [
+        /* @__PURE__ */ jsxs("div", { className: layout({ side }), children: [
+          icon && /* @__PURE__ */ jsx("div", { className: billboard_icon, children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: icon.src,
+              className: "img_fluid",
+              alt: icon.alt
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: content, children: [
+            /* @__PURE__ */ jsxs("div", { className: header, 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, { 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 {

package/dist/IconBillboard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../lib/IconBillboard/index.tsx"],"sourcesContent":["\"use client\";\nimport { BulletItem } from \"@lib/BulletItem\";\nimport { ReactNode } from \"react\";\nimport { Button } from \"../Button\";\nimport {\n  ContainerVariants,\n  LayoutVariants,\n  buttons,\n  container,\n  content,\n  header,\n  icon,\n  layout,\n  list,\n  title,\n} from \"./IconBillboard.css\";\n\nexport interface FocusProps {\n  icon?: ReactNode;\n  headline: ReactNode | undefined;\n  body: ReactNode | undefined;\n  items: { id: string; content: ReactNode }[];\n}\n\nexport const IconBillboard = (\n  props: FocusProps & ContainerVariants & LayoutVariants\n) => {\n  const { variant, side = false, items, headline, body } = props;\n\n  const variantButton = new Map<\n    \"primary\" | \"secondary\" | \"tertiary\" | \"quaternary\" | undefined,\n    \"primary\" | \"secondary\" | \"tertiary\" | undefined\n  >([\n    [\"primary\", \"primary\"],\n    [\"secondary\", \"primary\"],\n    [\"tertiary\", \"secondary\"],\n    [\"quaternary\", \"secondary\"],\n    [undefined, \"primary\"],\n  ]);\n\n  return (\n    <div className={container({ variant })}>\n      <div className={layout({ side })}>\n        <div className={icon}>{props.icon}</div>\n        <div className={content}>\n          <div className={header}>\n            <div className={title({ variant })}>{headline}</div>\n            <div>{body}</div>\n          </div>\n          <div>\n            <ul className={list}>\n              {items.map((item) => (\n                <BulletItem key={item.id}>{item.content}</BulletItem>\n              ))}\n            </ul>\n          </div>\n        </div>\n      </div>\n      <div className={buttons}>\n        <Button rounded=\"small\" size=\"large\" color={variantButton.get(variant)}>\n          Lorem ipsum\n        </Button>\n        <Button color=\"tertiary\">Lorem ipsum</Button>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAwBa,MAAA,gBAAgB,CAC3B,UACG;AACH,QAAM,EAAE,SAAS,OAAO,OAAO,OAAO,UAAU,KAAS,IAAA;AAEnD,QAAA,oCAAoB,IAGxB;AAAA,IACA,CAAC,WAAW,SAAS;AAAA,IACrB,CAAC,aAAa,SAAS;AAAA,IACvB,CAAC,YAAY,WAAW;AAAA,IACxB,CAAC,cAAc,WAAW;AAAA,IAC1B,CAAC,QAAW,SAAS;AAAA,EAAA,CACtB;AAED,8BACG,OAAI,EAAA,WAAW,UAAU,EAAE,QAAA,CAAS,GACnC,UAAA;AAAA,IAAA,qBAAC,SAAI,WAAW,OAAO,EAAE,KAAA,CAAM,GAC7B,UAAA;AAAA,MAAA,oBAAC,OAAI,EAAA,WAAW,MAAO,UAAA,MAAM,MAAK;AAAA,MAClC,qBAAC,OAAI,EAAA,WAAW,SACd,UAAA;AAAA,QAAC,qBAAA,OAAA,EAAI,WAAW,QACd,UAAA;AAAA,UAAA,oBAAC,SAAI,WAAW,MAAM,EAAE,SAAS,GAAI,UAAS,UAAA;AAAA,UAC9C,oBAAC,SAAK,UAAK,KAAA,CAAA;AAAA,QAAA,GACb;AAAA,4BACC,OACC,EAAA,UAAA,oBAAC,QAAG,WAAW,MACZ,gBAAM,IAAI,CAAC,SACV,oBAAC,cAA0B,UAAK,KAAA,QAAA,GAAf,KAAK,EAAkB,CACzC,GACH,EACF,CAAA;AAAA,MAAA,GACF;AAAA,IAAA,GACF;AAAA,IACA,qBAAC,OAAI,EAAA,WAAW,SACd,UAAA;AAAA,MAAC,oBAAA,QAAA,EAAO,SAAQ,SAAQ,MAAK,SAAQ,OAAO,cAAc,IAAI,OAAO,GAAG,UAExE,cAAA,CAAA;AAAA,MACC,oBAAA,QAAA,EAAO,OAAM,YAAW,UAAW,eAAA;AAAA,IAAA,GACtC;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../lib/IconBillboard/index.tsx"],"sourcesContent":["\"use client\";\nimport { BulletItem } from \"@lib/BulletItem\";\nimport { Chevron } from \"@lib/Chevron\";\nimport { ChevronProps } from \"@lib/Chevron/Chevron.interface\";\nimport { getVariant } from \"@lib/utils/getVariant\";\nimport { Button } from \"../Button\";\nimport {\n  billboard_icon,\n  buttons,\n  container,\n  content,\n  header,\n  header_section,\n  layout,\n  list,\n  section_container,\n  section_text,\n  title,\n} from \"./IconBillboard.css\";\nimport { IconBillboardSet } from \"./IconBillboard.interface\";\n\nexport const IconBillboard = ({\n  variant,\n  side = false,\n  iconBillboards,\n  headline,\n  bodyCopy,\n  additionalDetails,\n}: IconBillboardSet) => {\n  const billboard_variant = getVariant(variant);\n\n  return (\n    <section className=\"containment section_spacer\">\n      {(headline || bodyCopy) && (\n        <div className={section_text}>\n          {headline && (\n            <h2\n              className={`header_2 ${header_section({ variant: billboard_variant })}`}\n            >\n              {headline}\n            </h2>\n          )}\n\n          {bodyCopy && <>{bodyCopy}</>}\n        </div>\n      )}\n\n      <div className={section_container}>\n        {iconBillboards.map(\n          ({ id, icon, headline, bodyCopy, bullets, callToActionRow }) => (\n            <div key={id} className={container({ variant })}>\n              <div className={layout({ side })}>\n                {icon && (\n                  <div className={billboard_icon}>\n                    <img\n                      src={icon.src}\n                      className=\"img_fluid\"\n                      alt={icon.alt}\n                    ></img>\n                  </div>\n                )}\n                <div className={content}>\n                  <div className={header}>\n                    <div className={title({ variant })}>{headline}</div>\n                    <div>{bodyCopy}</div>\n                  </div>\n                  <div>\n                    <ul className={list}>\n                      {bullets.map((item) => (\n                        <BulletItem key={item.id}>{item.copy}</BulletItem>\n                      ))}\n                    </ul>\n                  </div>\n                </div>\n              </div>\n              {callToActionRow && (\n                <div className={buttons}>\n                  {callToActionRow.map(\n                    ({\n                      id,\n                      variant,\n                      displayText,\n                      targetUrl,\n                      type,\n                    }: ChevronProps) =>\n                      type === \"Button\" ? (\n                        <Button\n                          key={id}\n                          targetUrl={targetUrl}\n                          color={getVariant(variant)}\n                          size=\"medium\"\n                          rounded=\"medium\"\n                        >\n                          {displayText}\n                        </Button>\n                      ) : (\n                        <Chevron\n                          key={id}\n                          targetUrl={targetUrl}\n                          variant={getVariant(variant)}\n                        >\n                          {displayText}\n                        </Chevron>\n                      )\n                  )}\n                </div>\n              )}\n            </div>\n          )\n        )}\n      </div>\n\n      {additionalDetails && (\n        <div className={section_text}>\n          <>{additionalDetails}</>\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["headline","bodyCopy","id","variant"],"mappings":";;;;;;AAqBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAwB;AAChB,QAAA,oBAAoB,WAAW,OAAO;AAG1C,SAAA,qBAAC,WAAQ,EAAA,WAAU,8BACf,UAAA;AAAA,KAAA,YAAY,aACZ,qBAAC,OAAI,EAAA,WAAW,cACb,UAAA;AAAA,MACC,YAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,YAAY,eAAe,EAAE,SAAS,kBAAmB,CAAA,CAAC;AAAA,UAEpE,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,MAGD,4CAAe,UAAS,SAAA,CAAA;AAAA,IAAA,GAC3B;AAAA,IAGD,oBAAA,OAAA,EAAI,WAAW,mBACb,UAAe,eAAA;AAAA,MACd,CAAC,EAAE,IAAI,MAAM,UAAAA,WAAU,UAAAC,WAAU,SAAS,gBAAgB,2BACvD,OAAa,EAAA,WAAW,UAAU,EAAE,QAAA,CAAS,GAC5C,UAAA;AAAA,QAAA,qBAAC,SAAI,WAAW,OAAO,EAAE,KAAA,CAAM,GAC5B,UAAA;AAAA,UACC,QAAA,oBAAC,OAAI,EAAA,WAAW,gBACd,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK,KAAK;AAAA,cACV,WAAU;AAAA,cACV,KAAK,KAAK;AAAA,YAAA;AAAA,UAAA,GAEd;AAAA,UAEF,qBAAC,OAAI,EAAA,WAAW,SACd,UAAA;AAAA,YAAC,qBAAA,OAAA,EAAI,WAAW,QACd,UAAA;AAAA,cAAC,oBAAA,OAAA,EAAI,WAAW,MAAM,EAAE,SAAS,GAAI,UAAAD,WAAS;AAAA,cAC9C,oBAAC,OAAK,EAAA,UAAAC,UAAS,CAAA;AAAA,YAAA,GACjB;AAAA,gCACC,OACC,EAAA,UAAA,oBAAC,QAAG,WAAW,MACZ,kBAAQ,IAAI,CAAC,SACZ,oBAAC,cAA0B,UAAK,KAAA,KAAA,GAAf,KAAK,EAAe,CACtC,GACH,EACF,CAAA;AAAA,UAAA,GACF;AAAA,QAAA,GACF;AAAA,QACC,mBACC,oBAAC,OAAI,EAAA,WAAW,SACb,UAAgB,gBAAA;AAAA,UACf,CAAC;AAAA,YACC,IAAAC;AAAAA,YACA,SAAAC;AAAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA,MAEA,SAAS,WACP;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC;AAAA,cACA,OAAO,WAAWA,QAAO;AAAA,cACzB,MAAK;AAAA,cACL,SAAQ;AAAA,cAEP,UAAA;AAAA,YAAA;AAAA,YANID;AAAAA,UAAA,IASP;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC;AAAA,cACA,SAAS,WAAWC,QAAO;AAAA,cAE1B,UAAA;AAAA,YAAA;AAAA,YAJID;AAAAA,UAKP;AAAA,QAAA,GAGR;AAAA,MAAA,EAAA,GAvDM,EAyDV;AAAA,IAAA,GAGN;AAAA,IAEC,qBACE,oBAAA,OAAA,EAAI,WAAW,cACd,UAAA,oBAAA,UAAA,EAAG,6BAAkB,EACvB,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

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

@@ -64,6 +64,9 @@ 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 single_container: string;
+export declare const inline_container: string;
+export declare const two_inline: string;
+export declare const three_inline: string;
 export declare const section_text: string;
 //# sourceMappingURL=ImageBillboard.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageBillboard.css.d.ts","sourceRoot":"","sources":["../../lib/ImageBillboard/ImageBillboard.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;EA6BpB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;EAqBnB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;EAqBjB,CAAC;AAUH,eAAO,MAAM,mBAAmB,QAAY,CAAC;AAY7C,eAAO,MAAM,aAAa,QAAY,CAAC;AAcvC,eAAO,MAAM,cAAc,QAAY,CAAC;AACxC,eAAO,MAAM,wBAAwB,QAOnC,CAAC;AAEH,eAAO,MAAM,cAAc,QAOzB,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC;AAEH,eAAO,MAAM,SAAS,QAGpB,CAAC;AAEH,eAAO,MAAM,YAAY,QAKvB,CAAC"}
+{"version":3,"file":"ImageBillboard.css.d.ts","sourceRoot":"","sources":["../../lib/ImageBillboard/ImageBillboard.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;EA6BpB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;EAqBnB,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;EAqBjB,CAAC;AAUH,eAAO,MAAM,mBAAmB,QAAY,CAAC;AAY7C,eAAO,MAAM,aAAa,QAAY,CAAC;AAcvC,eAAO,MAAM,cAAc,QAAY,CAAC;AACxC,eAAO,MAAM,wBAAwB,QAOnC,CAAC;AAEH,eAAO,MAAM,cAAc,QAOzB,CAAC;AAEH,eAAO,MAAM,IAAI,QAEf,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAG3B,CAAC;AAEH,eAAO,MAAM,gBAAgB,QAI3B,CAAC;AAEH,eAAO,MAAM,UAAU,QAErB,CAAC;AAEH,eAAO,MAAM,YAAY,QAEvB,CAAC;AAEH,eAAO,MAAM,YAAY,QAKvB,CAAC"}

package/dist/ImageBillboard/ImageBillboard.css.js

@@ -9,8 +9,11 @@ var billboard_body = "_1m7m2ah";
 var billboard_header_section = "_1m7m2ai";
 var billboard_ctas = "_1m7m2aj";
 var body = "_1m7m2ak";
-var container = "_1m7m2al";
-var section_text = "_1m7m2am";
+var single_container = "_1m7m2al";
+var inline_container = "_1m7m2am";
+var two_inline = "_1m7m2an";
+var three_inline = "_1m7m2ao";
+var section_text = "_1m7m2ap";
 export {
   billboard,
   billboard_body,
@@ -19,9 +22,12 @@ export {
   billboard_header_section,
   billboard_img,
   body,
-  container,
   header,
+  inline_container,
   section_text,
-  supertag
+  single_container,
+  supertag,
+  three_inline,
+  two_inline
 };
 //# sourceMappingURL=ImageBillboard.css.js.map

package/dist/ImageBillboard/ImageBillboard.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageBillboard.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"ImageBillboard.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/ImageBillboard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/ImageBillboard/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAgB3B,OAAO,EAAU,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAEvE,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,CAkIhD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/ImageBillboard/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAe3B,OAAO,EAAU,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAEvE,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,iBAAiB,CAoIhD,CAAC"}

package/dist/ImageBillboard/index.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { Chevron } from "../Chevron/index.js";
+import "../icons/ArrowIcon/ArrowIcon.css.js";
+import SvgCheckIcon from "../icons/CheckIcon/index.js";
+/* empty css                                                    */
 import { getVariant } from "../utils/getVariant.js";
 import { Button } from "../Button/index.js";
-import { CheckIcon } from "../icons/CheckIcon/index.js";
-import "../themes/vars.css.ts.vanilla.css.js";
-/* empty css                                                    */
-import { section_text, header, container, billboard, billboard_container, billboard_img, body, billboard_body, billboard_header_section, supertag, billboard_ctas } from "./ImageBillboard.css.js";
+import { section_text, header, inline_container, billboard, billboard_container, billboard_img, body, billboard_body, billboard_header_section, supertag, billboard_ctas } from "./ImageBillboard.css.js";
 const ImageBillboard = ({
   id,
   variant,
@@ -27,7 +27,7 @@ const ImageBillboard = ({
       ),
       bodyCopy && /* @__PURE__ */ jsx(Fragment, { children: bodyCopy })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: container, children: imageBillboards.map(
+    /* @__PURE__ */ jsx("div", { className: `${inline_container}`, children: imageBillboards.map(
       ({
         id: id2,
         bordered,
@@ -43,7 +43,7 @@ const ImageBillboard = ({
         {
           className: `
               ${billboard({ variant: billboard_variant })} ${inline ? "" : billboard_container} 
-              rounded flex ${inline ? "flex_col" : "flex_row"} ${bordered ? "bordered" : ""} ${imagePlacement.toLowerCase() === "left" ? "reversed" : ""}`,
+              rounded flex ${inline ? "flex_col" : "flex_row"} ${bordered ? "bordered" : ""} ${imagePlacement.toLowerCase() === "left" && !inline ? "reversed" : ""}`,
           children: [
             /* @__PURE__ */ jsx("div", { className: `${billboard_img} flex`, children: /* @__PURE__ */ jsx("img", { src: image.src, className: "img_fluid", alt: image.alt }) }),
             /* @__PURE__ */ jsxs("div", { className: body, children: [
@@ -67,7 +67,7 @@ const ImageBillboard = ({
                 /* @__PURE__ */ jsx("div", { className: "push_up", children: bodyCopy2 }),
                 /* @__PURE__ */ jsx("ul", { className: "list_unstyled mb_0 push_up", children: bullets.map(({ id: id3, icon, copy }) => /* @__PURE__ */ jsxs("li", { className: "list_item flex", children: [
                   /* @__PURE__ */ jsx("div", { className: "img_item", children: billboard_variant ? /* @__PURE__ */ jsx(
-                    CheckIcon,
+                    SvgCheckIcon,
                     {
                       variant: billboard_variant === "primary" || billboard_variant === "secondary" ? "primary" : "secondary"
                     }
@@ -75,7 +75,7 @@ const ImageBillboard = ({
                   /* @__PURE__ */ jsx("span", { children: copy })
                 ] }, id3)) })
               ] }),
-              /* @__PURE__ */ jsx(
+              callToActionRow && /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: `${billboard_ctas} push_up_24 flex ${inline ? "flex_col" : "flex_row"} gap_24 ${callToActionRow.length > 1 ? "middle" : ""} center`,