@affinda/wc 0.0.15 → 0.0.17

package/dist/components/af-grid-callout.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AfGridCallout extends Components.AfGridCallout, HTMLElement {}
+export const AfGridCallout: {
+    prototype: AfGridCallout;
+    new (): AfGridCallout;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-grid-callout.js

@@ -0,0 +1,82 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$2 } from './p-BMp8QbY-.js';
+
+const afGridCalloutCss = ".sc-af-grid-callout-h{display:block;width:100%}.grid-callout.sc-af-grid-callout{display:flex;width:100%;gap:40px;align-items:stretch}.grid-callout__image-container.sc-af-grid-callout{flex:0 0 auto;width:45%;min-height:400px;position:relative;overflow:hidden}.grid-callout--image-left.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:0 4000px 4000px 0;margin-left:calc(-1 * var(--container-padding, 80px))}.grid-callout--image-right.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:4000px 0 0 4000px;margin-right:calc(-1 * var(--container-padding, 80px))}.grid-callout__image.sc-af-grid-callout{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.grid-callout__content.sc-af-grid-callout{flex:1;display:flex;flex-direction:column;gap:48px;padding:40px 0}.grid-callout--image-left.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-left:40px}.grid-callout--image-right.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-right:40px}.grid-callout--no-image.sc-af-grid-callout{flex-direction:column}.grid-callout--no-image.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding:0}.grid-callout__heading.sc-af-grid-callout{max-width:840px}.grid-callout__items.sc-af-grid-callout{display:grid;gap:40px;width:100%}.grid-callout__items--cols-2.sc-af-grid-callout{grid-template-columns:repeat(2, 1fr)}.grid-callout__items--cols-3.sc-af-grid-callout{grid-template-columns:repeat(3, 1fr)}.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:repeat(4, 1fr)}.grid-callout__cta.sc-af-grid-callout{display:flex;gap:12px;flex-wrap:wrap}.grid-callout__cta.sc-af-grid-callout:empty{display:none}@media (max-width: 1024px){.grid-callout.sc-af-grid-callout{gap:32px}.grid-callout__image-container.sc-af-grid-callout{width:40%}.grid-callout__content.sc-af-grid-callout{gap:40px}.grid-callout__items--cols-3.sc-af-grid-callout,.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:repeat(2, 1fr)}.grid-callout__items.sc-af-grid-callout{gap:32px}}@media (max-width: 768px){.grid-callout.sc-af-grid-callout{flex-direction:column;gap:32px}.grid-callout__image-container.sc-af-grid-callout{width:calc(100% + 2 * var(--container-padding, 20px));min-height:280px;margin-left:calc(-1 * var(--container-padding, 20px));margin-right:calc(-1 * var(--container-padding, 20px));border-radius:0}.grid-callout--image-left.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout,.grid-callout--image-right.sc-af-grid-callout .grid-callout__image-container.sc-af-grid-callout{border-radius:0;margin-left:calc(-1 * var(--container-padding, 20px));margin-right:calc(-1 * var(--container-padding, 20px))}.grid-callout__content.sc-af-grid-callout{padding:0;gap:32px}.grid-callout--image-left.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout,.grid-callout--image-right.sc-af-grid-callout .grid-callout__content.sc-af-grid-callout{padding-left:0;padding-right:0}.grid-callout__items.sc-af-grid-callout{grid-template-columns:1fr;gap:32px}.grid-callout__items--cols-2.sc-af-grid-callout,.grid-callout__items--cols-3.sc-af-grid-callout,.grid-callout__items--cols-4.sc-af-grid-callout{grid-template-columns:1fr}}";
+
+const AfGridCallout$1 = /*@__PURE__*/ proxyCustomElement(class AfGridCallout extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Alt text for the image (required for accessibility when imageSrc is provided)
+         */
+        this.imageAlt = '';
+        /**
+         * Position of the image relative to the content
+         */
+        this.imagePosition = 'left';
+        /**
+         * Number of columns for the IconText grid on desktop
+         */
+        this.columns = 2;
+        /**
+         * Heading size for the main title
+         */
+        this.headingSize = 2;
+    }
+    render() {
+        const hasImage = !!this.imageSrc;
+        const containerClasses = {
+            'grid-callout': true,
+            'grid-callout--has-image': hasImage,
+            'grid-callout--no-image': !hasImage,
+            [`grid-callout--image-${this.imagePosition}`]: hasImage,
+        };
+        const gridClasses = {
+            'grid-callout__items': true,
+            [`grid-callout__items--cols-${this.columns}`]: true,
+        };
+        const renderImage = () => {
+            if (!hasImage)
+                return null;
+            return (h("div", { class: "grid-callout__image-container" }, h("img", { src: this.imageSrc, alt: this.imageAlt, class: "grid-callout__image" })));
+        };
+        const renderContent = () => (h("div", { class: "grid-callout__content" }, h("af-typography-lockup", { headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "grid-callout__heading" }, h("slot", null), h("span", { slot: "description" }, h("slot", { name: "description" }))), h("div", { class: gridClasses }, h("slot", { name: "items" })), h("div", { class: "grid-callout__cta" }, h("slot", { name: "cta" }))));
+        return (h(Host, null, h("div", { class: containerClasses }, this.imagePosition === 'left' && renderImage(), renderContent(), this.imagePosition === 'right' && renderImage())));
+    }
+    static get style() { return afGridCalloutCss; }
+}, [262, "af-grid-callout", {
+        "imageSrc": [1, "image-src"],
+        "imageAlt": [1, "image-alt"],
+        "imagePosition": [1, "image-position"],
+        "columns": [2],
+        "headingSize": [2, "heading-size"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-grid-callout", "af-typography-lockup"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-grid-callout":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfGridCallout$1);
+            }
+            break;
+        case "af-typography-lockup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const AfGridCallout = AfGridCallout$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfGridCallout, defineCustomElement };
+//# sourceMappingURL=af-grid-callout.js.map
+
+//# sourceMappingURL=af-grid-callout.js.map

package/dist/components/af-grid-callout.js.map

@@ -0,0 +1 @@
+{"file":"af-grid-callout.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,wrGAAwrG;;MC0CpsGA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAYE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AAE7B;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAqB,MAAM;AAEhD;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAc,CAAC;AAE9B;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAiE3C;IA/DC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;AAEhC,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,yBAAyB,EAAE,QAAQ;YACnC,wBAAwB,EAAE,CAAC,QAAQ;AACnC,YAAA,CAAC,uBAAuB,IAAI,CAAC,aAAa,CAAE,CAAA,GAAG,QAAQ;SACxD;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,qBAAqB,EAAE,IAAI;AAC3B,YAAA,CAAC,6BAA6B,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;SACpD;QAED,MAAM,WAAW,GAAG,MAAK;AACvB,YAAA,IAAI,CAAC,QAAQ;AAAE,gBAAA,OAAO,IAAI;AAE1B,YAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,+BAA+B,EAAA,EACxC,CAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qBAAqB,EAC3B,CAAA,CACE;AAEV,SAAC;QAED,MAAM,aAAa,GAAG,OACpB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,sBAAA,EAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,uBAAuB,EAAA,EAE7B,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC3B,CACc,EAEvB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,WAAW,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAQ,CACtB,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACF,CACP;AAED,QAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EACzB,IAAI,CAAC,aAAa,KAAK,MAAM,IAAI,WAAW,EAAE,EAC9C,aAAa,EAAE,EACf,IAAI,CAAC,aAAa,KAAK,OAAO,IAAI,WAAW,EAAE,CAC5C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfGridCallout","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-grid-callout/af-grid-callout.css?tag=af-grid-callout&encapsulation=scoped","src/components/af-grid-callout/af-grid-callout.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.grid-callout {\n  display: flex;\n  width: 100%;\n  gap: 40px;\n  align-items: stretch;\n}\n\n/* ==========================================================================\n   Image Container - Pill shape with rounded right edge\n   ========================================================================== */\n\n.grid-callout__image-container {\n  flex: 0 0 auto;\n  width: 45%;\n  min-height: 400px;\n  position: relative;\n  overflow: hidden;\n}\n\n/* Left position - rounded on right side */\n.grid-callout--image-left .grid-callout__image-container {\n  border-radius: 0 4000px 4000px 0;\n  margin-left: calc(-1 * var(--container-padding, 80px));\n}\n\n/* Right position - rounded on left side */\n.grid-callout--image-right .grid-callout__image-container {\n  border-radius: 4000px 0 0 4000px;\n  margin-right: calc(-1 * var(--container-padding, 80px));\n}\n\n.grid-callout__image {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n/* ==========================================================================\n   Content Area\n   ========================================================================== */\n\n.grid-callout__content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 48px;\n  padding: 40px 0;\n}\n\n/* Add left padding when image is on left */\n.grid-callout--image-left .grid-callout__content {\n  padding-left: 40px;\n}\n\n/* Add right padding when image is on right */\n.grid-callout--image-right .grid-callout__content {\n  padding-right: 40px;\n}\n\n/* No image layout - full width content */\n.grid-callout--no-image {\n  flex-direction: column;\n}\n\n.grid-callout--no-image .grid-callout__content {\n  padding: 0;\n}\n\n.grid-callout__heading {\n  max-width: 840px;\n}\n\n/* ==========================================================================\n   Items Grid\n   ========================================================================== */\n\n.grid-callout__items {\n  display: grid;\n  gap: 40px;\n  width: 100%;\n}\n\n.grid-callout__items--cols-2 {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n.grid-callout__items--cols-3 {\n  grid-template-columns: repeat(3, 1fr);\n}\n\n.grid-callout__items--cols-4 {\n  grid-template-columns: repeat(4, 1fr);\n}\n\n/* ==========================================================================\n   CTA Area\n   ========================================================================== */\n\n.grid-callout__cta {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n}\n\n.grid-callout__cta:empty {\n  display: none;\n}\n\n/* ==========================================================================\n   Responsive - Tablet\n   ========================================================================== */\n\n@media (max-width: 1024px) {\n  .grid-callout {\n    gap: 32px;\n  }\n\n  .grid-callout__image-container {\n    width: 40%;\n  }\n\n  .grid-callout__content {\n    gap: 40px;\n  }\n\n  .grid-callout__items--cols-3,\n  .grid-callout__items--cols-4 {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n  .grid-callout__items {\n    gap: 32px;\n  }\n}\n\n/* ==========================================================================\n   Responsive - Mobile\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .grid-callout {\n    flex-direction: column;\n    gap: 32px;\n  }\n\n  .grid-callout__image-container {\n    width: calc(100% + 2 * var(--container-padding, 20px));\n    min-height: 280px;\n    margin-left: calc(-1 * var(--container-padding, 20px));\n    margin-right: calc(-1 * var(--container-padding, 20px));\n    border-radius: 0;\n  }\n\n  /* Reset rounded corners on mobile */\n  .grid-callout--image-left .grid-callout__image-container,\n  .grid-callout--image-right .grid-callout__image-container {\n    border-radius: 0;\n    margin-left: calc(-1 * var(--container-padding, 20px));\n    margin-right: calc(-1 * var(--container-padding, 20px));\n  }\n\n  .grid-callout__content {\n    padding: 0;\n    gap: 32px;\n  }\n\n  .grid-callout--image-left .grid-callout__content,\n  .grid-callout--image-right .grid-callout__content {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .grid-callout__items {\n    grid-template-columns: 1fr;\n    gap: 32px;\n  }\n\n  .grid-callout__items--cols-2,\n  .grid-callout__items--cols-3,\n  .grid-callout__items--cols-4 {\n    grid-template-columns: 1fr;\n  }\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * GridCallout organism - a marketing section combining an optional pill-shaped image \n * with a grid of IconText feature items.\n * \n * Composes:\n * - Pill-shaped image container (optional)\n * - Heading via af-typography-lockup\n * - Grid of af-icon-text items\n * - Optional CTA button\n * \n * Inherits theme colors from parent af-section via CSS custom properties.\n * \n * @slot - Main heading text\n * @slot description - Optional description/subheading text\n * @slot items - IconText components for the feature grid\n * @slot cta - CTA button(s) at the bottom\n * \n * @example\n * ```html\n * <af-section theme=\"mist-green\">\n *   <af-grid-callout image-src=\"/team.jpg\" image-alt=\"Team photo\">\n *     Affinda blends AI and engineering\n *     <span slot=\"description\">Optional description text.</span>\n *     \n *     <af-icon-text slot=\"items\" icon=\"settings\">\n *       Feature One\n *       <span slot=\"description\">Feature description.</span>\n *     </af-icon-text>\n *     \n *     <af-button slot=\"cta\" variant=\"primary\">Learn more</af-button>\n *   </af-grid-callout>\n * </af-section>\n * ```\n */\n@Component({\n  tag: 'af-grid-callout',\n  styleUrl: 'af-grid-callout.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfGridCallout {\n  /**\n   * Image source URL for the pill-shaped image\n   */\n  @Prop() imageSrc?: string;\n\n  /**\n   * Alt text for the image (required for accessibility when imageSrc is provided)\n   */\n  @Prop() imageAlt: string = '';\n\n  /**\n   * Position of the image relative to the content\n   */\n  @Prop() imagePosition: 'left' | 'right' = 'left';\n\n  /**\n   * Number of columns for the IconText grid on desktop\n   */\n  @Prop() columns: 2 | 3 | 4 = 2;\n\n  /**\n   * Heading size for the main title\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n  render() {\n    const hasImage = !!this.imageSrc;\n    \n    const containerClasses = {\n      'grid-callout': true,\n      'grid-callout--has-image': hasImage,\n      'grid-callout--no-image': !hasImage,\n      [`grid-callout--image-${this.imagePosition}`]: hasImage,\n    };\n\n    const gridClasses = {\n      'grid-callout__items': true,\n      [`grid-callout__items--cols-${this.columns}`]: true,\n    };\n\n    const renderImage = () => {\n      if (!hasImage) return null;\n      \n      return (\n        <div class=\"grid-callout__image-container\">\n          <img \n            src={this.imageSrc} \n            alt={this.imageAlt}\n            class=\"grid-callout__image\"\n          />\n        </div>\n      );\n    };\n\n    const renderContent = () => (\n      <div class=\"grid-callout__content\">\n        <af-typography-lockup\n          headingSize={this.headingSize}\n          textAlignment=\"left\"\n          buttonAlignment=\"vertical\"\n          class=\"grid-callout__heading\"\n        >\n          <slot></slot>\n          <span slot=\"description\">\n            <slot name=\"description\"></slot>\n          </span>\n        </af-typography-lockup>\n\n        <div class={gridClasses}>\n          <slot name=\"items\"></slot>\n        </div>\n\n        <div class=\"grid-callout__cta\">\n          <slot name=\"cta\"></slot>\n        </div>\n      </div>\n    );\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          {this.imagePosition === 'left' && renderImage()}\n          {renderContent()}\n          {this.imagePosition === 'right' && renderImage()}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/af-heading.js

@@ -1,4 +1,4 @@
-import { A as AfHeading$1, d as defineCustomElement$1 } from './p-BTEblSAo.js';
+import { A as AfHeading$1, d as defineCustomElement$1 } from './p-BRN73McC.js';
 
 const AfHeading = AfHeading$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-hero-section.js

@@ -1,7 +1,8 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
-import { d as defineCustomElement$2 } from './p-BkEmrXbw.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$3 } from './p-D3UZ60qM.js';
+import { d as defineCustomElement$2 } from './p-BMp8QbY-.js';
 
-const afHeroSectionCss = ".sc-af-hero-section-h{display:block;width:100%}.hero-section.sc-af-hero-section{width:100%;padding-top:clamp(6rem, 12vh, 8rem);padding-bottom:clamp(3rem, 8vh, 5rem);display:flex;align-items:center;justify-content:center;margin-top:0;position:relative;z-index:1;overflow:hidden}.variant-light.sc-af-hero-section{background-color:var(--colour-background-white, #FFFFFF)}.variant-dark.sc-af-hero-section{background-color:var(--colour-brand-inkwell, #14343B)}.variant-dark.sc-af-hero-section af-heading.sc-af-hero-section,.variant-dark.sc-af-hero-section af-text.sc-af-hero-section{--typography-heading-primary:var(--colour-brand-mist-green, #C6D5D1);--typography-body-default:var(--colour-brand-mist-green, #C6D5D1)}.hero-decoration.sc-af-hero-section{position:absolute;inset:0;pointer-events:none;z-index:0;height:0;width:0;overflow:visible}.hero-decoration.sc-af-hero-section-s>*,.hero-decoration .sc-af-hero-section-s>*{position:absolute !important;bottom:-440px;right:-1200px;width:1250px;height:820px;opacity:0.5}.hero-content.sc-af-hero-section{text-align:center;max-width:1000px;margin:0 auto;position:relative;z-index:1}@media (max-width: 768px){.hero-section.sc-af-hero-section{padding:3rem 1.5rem 2.5rem}}";
+const afHeroSectionCss = ".sc-af-hero-section-h{display:block;width:100%}.hero-section.sc-af-hero-section{width:100%;padding-top:clamp(6rem, 12vh, 8rem);padding-bottom:clamp(3rem, 8vh, 5rem);display:flex;align-items:center;justify-content:center;margin-top:0;position:relative;z-index:1;overflow:hidden}.theme-white.sc-af-hero-section{background-color:var(--colour-brand-white, #FFFFFF);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(255, 255, 255, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b)}.theme-inkwell.sc-af-hero-section{background-color:var(--colour-brand-inkwell, #14343B);--af-typography-heading-primary:var(--colour-brand-mist-green, #c6d5d1);--af-typography-heading-secondary:var(--colour-brand-white, #ffffff);--af-typography-body-dark:var(--colour-brand-white, #ffffff);--af-typography-body-default:var(--colour-inkwell-100, #d0d6d8);--af-typography-body-subtle:var(--colour-inkwell-200, #a1aeb1);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-icon:var(--colour-brand-white, #ffffff);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff);--af-button-tertiary-text:var(--colour-brand-white, #ffffff);--af-button-tertiary-icon:var(--colour-brand-white, #ffffff)}.theme-mist-green.sc-af-hero-section{background-color:var(--colour-brand-mist-green, #C6D5D1);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-soft-clay, #b09670);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b)}.theme-soft-clay.sc-af-hero-section{background-color:var(--colour-softclay-400, #c0ab8d);--af-typography-heading-primary:var(--colour-brand-inkwell, #14343b);--af-typography-heading-secondary:var(--colour-brand-ivory-paper, #fff9ee);--af-typography-body-dark:var(--colour-brand-inkwell, #14343b);--af-typography-body-default:var(--colour-inkwell-400, #2b484f);--af-typography-body-subtle:var(--colour-inkwell-350, #60767b);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-icon:var(--colour-brand-inkwell, #14343b);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-icon:var(--colour-brand-inkwell, #14343b);--af-button-secondary-bg:transparent;--af-button-secondary-bg-hover:rgba(0, 0, 0, 0.08);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-text:var(--colour-brand-inkwell, #14343b);--af-button-tertiary-icon:var(--colour-brand-inkwell, #14343b)}.hero-decoration.sc-af-hero-section{position:absolute;inset:0;pointer-events:none;z-index:0;height:0;width:0;overflow:visible}.hero-decoration.sc-af-hero-section-s>*,.hero-decoration .sc-af-hero-section-s>*{position:absolute !important;bottom:-440px;right:-1200px;width:1250px;height:820px;opacity:0.5}.hero-content.sc-af-hero-section{max-width:1000px;margin:0 auto;position:relative;z-index:1}@media (max-width: 768px){.hero-section.sc-af-hero-section{padding:3rem 1.5rem 2.5rem}}";
 
 const AfHeroSection$1 = /*@__PURE__*/ proxyCustomElement(class AfHeroSection extends H {
     constructor(registerHost) {
@@ -9,27 +10,37 @@ const AfHeroSection$1 = /*@__PURE__*/ proxyCustomElement(class AfHeroSection ext
         if (registerHost !== false) {
             this.__registerHost();
         }
-        /** Hero variant */
-        this.variant = 'dark';
+        /** Theme - sets background color and provides theme context to children */
+        this.theme = 'inkwell';
         /** Show decorative paperclip */
         this.withDecoration = false;
         /** Minimum height */
         this.minHeight = '60vh';
+        /** Heading size for the typography lockup (1-5, where 1 is largest) */
+        this.headingSize = 1;
+        /** Text alignment for the typography lockup */
+        this.textAlignment = 'center';
+        /** Button alignment - horizontal places buttons inline, vertical stacks them */
+        this.buttonAlignment = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '1472626cfbfd204d694aad7615322af59cfe58bd' }, h("div", { key: '5fc1bc9e414c6ef5d27796563d7e699549c8e9a7', class: `hero-section variant-${this.variant}`, style: { minHeight: this.minHeight } }, this.withDecoration && (h("div", { key: '9fdb9eab09c662db140ee75574ca216424fd821f', class: "hero-decoration" }, h("slot", { key: '98760cee0be401595c59bae814cdd1b3d5466679', name: "decoration" }))), h("af-container", { key: 'a86a8c89ef973beb23639d827bc73c1707884676' }, h("div", { key: '2936add9e7607e354482f6dc401439c339269bfd', class: "hero-content" }, h("slot", { key: '8571e1497804a58e812a2c4e2a4229aaacd50f60' }))))));
+        return (h(Host, { key: '478e5359018d24bf6bce587711b3c35b951739a1' }, h("div", { key: '546fda1797f5f823bf420ef1372d1638dd329aa5', class: `hero-section theme-${this.theme}`, style: { minHeight: this.minHeight } }, this.withDecoration && (h("div", { key: 'da2db2c51444ff67f5d4d37e20004572c5f1da20', class: "hero-decoration" }, h("slot", { key: '71de6018d16c4f67c4c4dcd97cdb4d3e3c630afe', name: "decoration" }))), h("af-container", { key: 'c5f8da09f7b86776ea4df223e1e1c95f4502b468' }, h("div", { key: '4a9f69af1143cdfe53d70787332929a44d42e32a', class: "hero-content" }, h("af-typography-lockup", { key: 'b1c810fd26dfd2ce5603be6b22d1704eaea3fc40', headingSize: this.headingSize, textAlignment: this.textAlignment, buttonAlignment: this.buttonAlignment, maxWidth: this.maxWidth }, h("slot", { key: 'da9f749476bc343fd224552c313f0df41629d4dd', name: "heading" }), h("span", { key: '29118e86cc44446c73a12f43ff9ea3f4f798cc47', slot: "description" }, h("slot", { key: '0a8f7fafb3dc47fa01304867163c66f4fa676672', name: "description" })), h("span", { key: '7f5a08600946d7a0a2093bc9319198fd4a97cc32', slot: "buttons" }, h("slot", { key: 'd835dab6f8506520fb060647281e99c274bbd2d0', name: "buttons" }))))))));
     }
     static get style() { return afHeroSectionCss; }
 }, [262, "af-hero-section", {
-        "variant": [1],
+        "theme": [1],
         "withDecoration": [4, "with-decoration"],
-        "minHeight": [1, "min-height"]
+        "minHeight": [1, "min-height"],
+        "headingSize": [2, "heading-size"],
+        "textAlignment": [1, "text-alignment"],
+        "buttonAlignment": [1, "button-alignment"],
+        "maxWidth": [2, "max-width"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["af-hero-section", "af-container"];
+    const components = ["af-hero-section", "af-container", "af-typography-lockup"];
     components.forEach(tagName => { switch (tagName) {
         case "af-hero-section":
             if (!customElements.get(tagName)) {
@@ -37,6 +48,11 @@ function defineCustomElement$1() {
             }
             break;
         case "af-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "af-typography-lockup":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/af-hero-section.js.map

@@ -1 +1 @@
-{"file":"af-hero-section.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,8rCAA8rC;;MCW1sCA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAqB,MAAM;;AAGlC,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;;AAG/B,QAAA,IAAS,CAAA,SAAA,GAAW,MAAM;AAoBnC;IAlBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,qBAAA,EAAwB,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAA,EACrF,IAAI,CAAC,cAAc,KAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ,CAC3B,CACP,EACD,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACO,CACX,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfHeroSection","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-hero-section/af-hero-section.css?tag=af-hero-section&encapsulation=scoped","src/components/af-hero-section/af-hero-section.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.hero-section {\n  width: 100%;\n  padding-top: clamp(6rem, 12vh, 8rem);\n  padding-bottom: clamp(3rem, 8vh, 5rem);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 0;\n  position: relative;\n  z-index: 1;\n  overflow: hidden;\n}\n\n/* Light variant */\n.variant-light {\n  background-color: var(--colour-background-white, #FFFFFF);\n}\n\n/* Dark variant */\n.variant-dark {\n  background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n/* Set theme colors on dark backgrounds */\n.variant-dark af-heading,\n.variant-dark af-text {\n  --typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);\n  --typography-body-default: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.hero-decoration {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  height: 0;\n  width: 0;\n  overflow: visible;\n}\n\n.hero-decoration ::slotted(*) {\n  position: absolute !important;\n  bottom: -440px;\n  right: -1200px;\n  width: 1250px;\n  height: 820px;\n  opacity: 0.5;\n}\n\n.hero-content {\n  text-align: center;\n  max-width: 1000px;\n  margin: 0 auto;\n  position: relative;\n  z-index: 1;\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n  .hero-section {\n    padding: 3rem 1.5rem 2.5rem;\n  }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Hero section component for marketing pages\n */\n@Component({\n  tag: 'af-hero-section',\n  styleUrl: 'af-hero-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfHeroSection {\n  /** Hero variant */\n  @Prop() variant: 'light' | 'dark' = 'dark';\n  \n  /** Show decorative paperclip */\n  @Prop() withDecoration: boolean = false;\n  \n  /** Minimum height */\n  @Prop() minHeight: string = '60vh';\n\n  render() {\n    return (\n      <Host>\n        <div class={`hero-section variant-${this.variant}`} style={{ minHeight: this.minHeight }}>\n          {this.withDecoration && (\n            <div class=\"hero-decoration\">\n              <slot name=\"decoration\"></slot>\n            </div>\n          )}\n          <af-container>\n            <div class=\"hero-content\">\n              <slot></slot>\n            </div>\n          </af-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"af-hero-section.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,sqKAAsqK;;MCkBlrKA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQU,QAAA,IAAK,CAAA,KAAA,GAAqD,SAAS;;AAGnE,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;;AAG/B,QAAA,IAAS,CAAA,SAAA,GAAW,MAAM;;AAG1B,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;;AAGlC,QAAA,IAAa,CAAA,aAAA,GAAsB,QAAQ;;AAG3C,QAAA,IAAe,CAAA,eAAA,GAA8B,YAAY;AAoClE;IA/BC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,mBAAA,EAAsB,IAAI,CAAC,KAAK,CAAE,CAAA,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAA,EACjF,IAAI,CAAC,cAAc,KAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ,CAC3B,CACP,EACD,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CACE,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAQ,CAAA,EAC5B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC3B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAQ,CAAA,CACvB,CACc,CACnB,CACO,CACX,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfHeroSection","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-hero-section/af-hero-section.css?tag=af-hero-section&encapsulation=scoped","src/components/af-hero-section/af-hero-section.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.hero-section {\n  width: 100%;\n  padding-top: clamp(6rem, 12vh, 8rem);\n  padding-bottom: clamp(3rem, 8vh, 5rem);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 0;\n  position: relative;\n  z-index: 1;\n  overflow: hidden;\n}\n\n/* ==========================================================================\n   Theme Variants\n   Each theme sets background color and CSS custom properties for children.\n   ========================================================================== */\n\n/* WHITE THEME */\n.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(255, 255, 255, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n}\n\n/* INKWELL THEME (Dark) */\n.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-mist-green, #c6d5d1);\n  --af-typography-heading-secondary: var(--colour-brand-white, #ffffff);\n  --af-typography-body-dark: var(--colour-brand-white, #ffffff);\n  --af-typography-body-default: var(--colour-inkwell-100, #d0d6d8);\n  --af-typography-body-subtle: var(--colour-inkwell-200, #a1aeb1);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-icon: var(--colour-brand-white, #ffffff);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);\n  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);\n}\n\n/* MIST-GREEN THEME */\n.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-soft-clay, #b09670);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n}\n\n/* SOFT-CLAY THEME */\n.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n  \n  /* Typography tokens */\n  --af-typography-heading-primary: var(--colour-brand-inkwell, #14343b);\n  --af-typography-heading-secondary: var(--colour-brand-ivory-paper, #fff9ee);\n  --af-typography-body-dark: var(--colour-brand-inkwell, #14343b);\n  --af-typography-body-default: var(--colour-inkwell-400, #2b484f);\n  --af-typography-body-subtle: var(--colour-inkwell-350, #60767b);\n  \n  /* Button - Primary */\n  --af-button-primary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-primary-bg: var(--colour-brand-ice, #a6fffb);\n  --af-button-primary-bg-hover: var(--colour-ice-600, #95e6e2);\n  --af-button-primary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Secondary */\n  --af-button-secondary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-icon: var(--colour-brand-inkwell, #14343b);\n  --af-button-secondary-bg: transparent;\n  --af-button-secondary-bg-hover: rgba(0, 0, 0, 0.08);\n  --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);\n  \n  /* Button - Tertiary */\n  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);\n  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);\n}\n\n.hero-decoration {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  height: 0;\n  width: 0;\n  overflow: visible;\n}\n\n.hero-decoration ::slotted(*) {\n  position: absolute !important;\n  bottom: -440px;\n  right: -1200px;\n  width: 1250px;\n  height: 820px;\n  opacity: 0.5;\n}\n\n.hero-content {\n  max-width: 1000px;\n  margin: 0 auto;\n  position: relative;\n  z-index: 1;\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n  .hero-section {\n    padding: 3rem 1.5rem 2.5rem;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Hero section component for marketing pages.\n * Uses TypographyLockup internally to handle heading, description, and button layout.\n * Sets theme context for all child components via CSS custom properties.\n * \n * @slot heading - The main heading content (typically an af-heading)\n * @slot description - Description text below the heading (typically af-text)\n * @slot buttons - Call-to-action buttons (typically af-button-group or individual af-buttons)\n * @slot decoration - Optional decorative element (e.g., PaperclipDecoration)\n */\n@Component({\n  tag: 'af-hero-section',\n  styleUrl: 'af-hero-section.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfHeroSection {\n  /** Theme - sets background color and provides theme context to children */\n  @Prop() theme: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' = 'inkwell';\n  \n  /** Show decorative paperclip */\n  @Prop() withDecoration: boolean = false;\n  \n  /** Minimum height */\n  @Prop() minHeight: string = '60vh';\n\n  /** Heading size for the typography lockup (1-5, where 1 is largest) */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 1;\n\n  /** Text alignment for the typography lockup */\n  @Prop() textAlignment: 'left' | 'center' = 'center';\n\n  /** Button alignment - horizontal places buttons inline, vertical stacks them */\n  @Prop() buttonAlignment: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Maximum width for the copy section (in pixels) */\n  @Prop() maxWidth?: number;\n\n  render() {\n    return (\n      <Host>\n        <div class={`hero-section theme-${this.theme}`} style={{ minHeight: this.minHeight }}>\n          {this.withDecoration && (\n            <div class=\"hero-decoration\">\n              <slot name=\"decoration\"></slot>\n            </div>\n          )}\n          <af-container>\n            <div class=\"hero-content\">\n              <af-typography-lockup\n                headingSize={this.headingSize}\n                textAlignment={this.textAlignment}\n                buttonAlignment={this.buttonAlignment}\n                maxWidth={this.maxWidth}\n              >\n                <slot name=\"heading\"></slot>\n                <span slot=\"description\">\n                  <slot name=\"description\"></slot>\n                </span>\n                <span slot=\"buttons\">\n                  <slot name=\"buttons\"></slot>\n                </span>\n              </af-typography-lockup>\n            </div>\n          </af-container>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/af-icon-box.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AfIconBox extends Components.AfIconBox, HTMLElement {}
+export const AfIconBox: {
+    prototype: AfIconBox;
+    new (): AfIconBox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-icon-box.js

@@ -0,0 +1,9 @@
+import { A as AfIconBox$1, d as defineCustomElement$1 } from './p-DZ-qivXD.js';
+
+const AfIconBox = AfIconBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfIconBox, defineCustomElement };
+//# sourceMappingURL=af-icon-box.js.map
+
+//# sourceMappingURL=af-icon-box.js.map

package/dist/components/af-icon-box.js.map

@@ -0,0 +1 @@
+{"file":"af-icon-box.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/af-icon-button.js

@@ -1,4 +1,4 @@
-import { A as AfIconButton$1, d as defineCustomElement$1 } from './p-DqOwXTsH.js';
+import { A as AfIconButton$1, d as defineCustomElement$1 } from './p-JepBVz99.js';
 
 const AfIconButton = AfIconButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-icon-text.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AfIconText extends Components.AfIconText, HTMLElement {}
+export const AfIconText: {
+    prototype: AfIconText;
+    new (): AfIconText;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-icon-text.js

@@ -0,0 +1,78 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$4 } from './p-BXZ7aJQf.js';
+import { d as defineCustomElement$3 } from './p-DZ-qivXD.js';
+import { d as defineCustomElement$2 } from './p-BMp8QbY-.js';
+
+const afIconTextCss = ".sc-af-icon-text-h{display:block}.icon-text.sc-af-icon-text{display:flex;width:100%}.icon-text--vertical.sc-af-icon-text{flex-direction:column;gap:24px;align-items:flex-start}.icon-text--horizontal.sc-af-icon-text{flex-direction:row;gap:20px;align-items:flex-start}.icon-text__icon.sc-af-icon-text{flex-shrink:0}.icon-text__lockup.sc-af-icon-text{flex:1;min-width:0}@media (max-width: 768px){.icon-text--vertical.sc-af-icon-text{gap:20px}.icon-text--horizontal.sc-af-icon-text{gap:16px}}";
+
+const AfIconText$1 = /*@__PURE__*/ proxyCustomElement(class AfIconText extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /**
+         * Heading size for the typography lockup (1-5, where 1 is largest)
+         */
+        this.headingSize = 4;
+        /**
+         * Layout orientation
+         * - 'vertical': Icon above text (default, used in grid layouts)
+         * - 'horizontal': Icon beside text (used in compact layouts)
+         */
+        this.orientation = 'vertical';
+        /**
+         * Size of the icon box
+         */
+        this.iconSize = 'default';
+    }
+    render() {
+        const containerClasses = {
+            'icon-text': true,
+            [`icon-text--${this.orientation}`]: true,
+        };
+        return (h(Host, { key: '4ab83cfbaeadd4d5db898582966050b6bc193d6c' }, h("div", { key: 'ff16245f1344e9cb51e60f9615b126f31154c998', class: containerClasses }, h("af-icon-box", { key: 'dc83c0df2a209383d501dfba6ae0d633cc56dc1d', icon: this.icon, size: this.iconSize, class: "icon-text__icon" }), h("af-typography-lockup", { key: 'e0b1c5ed913b36c137de77e194e5241cfa3e6973', headingSize: this.headingSize, textAlignment: "left", buttonAlignment: "vertical", class: "icon-text__lockup" }, h("slot", { key: 'df7ddf9e2ea7045346db6380f52b74ff36bbad45' }), h("span", { key: '07dcdcaa69def9ba0a5c1964efdcf7778f4dc210', slot: "description" }, h("slot", { key: '2c609e55d2c5fd41ee6c7681f73ea2e0c84e8130', name: "description" })), h("span", { key: '27789b11658d17fd3695648e1798f6efdc3ac913', slot: "buttons" }, h("slot", { key: '3e9c4e2ff23ba9966add8f618d5b3c0ef0b8bc4e', name: "buttons" }))))));
+    }
+    static get style() { return afIconTextCss; }
+}, [262, "af-icon-text", {
+        "icon": [1],
+        "headingSize": [2, "heading-size"],
+        "orientation": [1],
+        "iconSize": [1, "icon-size"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-icon-text", "af-icon", "af-icon-box", "af-typography-lockup"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-icon-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfIconText$1);
+            }
+            break;
+        case "af-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "af-icon-box":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "af-typography-lockup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const AfIconText = AfIconText$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfIconText, defineCustomElement };
+//# sourceMappingURL=af-icon-text.js.map
+
+//# sourceMappingURL=af-icon-text.js.map

package/dist/components/af-icon-text.js.map

@@ -0,0 +1 @@
+{"file":"af-icon-text.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,yeAAye;;MC+BlfA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AANvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAYE;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAE1C;;;;AAIG;AACK,QAAA,IAAW,CAAA,WAAA,GAA8B,UAAU;AAE3D;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAkC,SAAS;AAmC5D;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,WAAW,EAAE,IAAI;AACjB,YAAA,CAAC,cAAc,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;SACzC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1B,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,iBAAiB,EACV,CAAA,EAEf,CAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAC,MAAM,EACpB,eAAe,EAAC,UAAU,EAC1B,KAAK,EAAC,mBAAmB,EAAA,EAEzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC3B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAClB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACvB,CACc,CACnB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfIconText","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-icon-text/af-icon-text.css?tag=af-icon-text&encapsulation=scoped","src/components/af-icon-text/af-icon-text.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.icon-text {\n  display: flex;\n  width: 100%;\n}\n\n/* Vertical orientation - icon above text */\n.icon-text--vertical {\n  flex-direction: column;\n  gap: 24px;\n  align-items: flex-start;\n}\n\n/* Horizontal orientation - icon beside text */\n.icon-text--horizontal {\n  flex-direction: row;\n  gap: 20px;\n  align-items: flex-start;\n}\n\n.icon-text__icon {\n  flex-shrink: 0;\n}\n\n.icon-text__lockup {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n  .icon-text--vertical {\n    gap: 20px;\n  }\n\n  .icon-text--horizontal {\n    gap: 16px;\n  }\n}\n\n","import { Component, h, Prop, Host } from '@stencil/core';\nimport type { IconName } from '@affinda/icons';\n\n/**\n * IconText molecule - combines an IconBox with a TypographyLockup for feature items.\n * \n * Composes:\n * - af-icon-box: Themed icon container\n * - af-typography-lockup: Heading, description, and button slots\n * \n * Inherits theme colors from parent Section via CSS custom properties.\n * \n * @slot - Heading text content (passed to TypographyLockup)\n * @slot description - Body/description text\n * @slot buttons - Action buttons (typically tertiary style)\n * \n * @example\n * ```html\n * <af-icon-text icon=\"settings\" heading-size=\"4\">\n *   Feature Heading\n *   <span slot=\"description\">Feature description text.</span>\n *   <af-button slot=\"buttons\" variant=\"tertiary\">Learn more</af-button>\n * </af-icon-text>\n * ```\n */\n@Component({\n  tag: 'af-icon-text',\n  styleUrl: 'af-icon-text.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfIconText {\n  /**\n   * The icon name to display in the IconBox\n   */\n  @Prop() icon!: IconName;\n\n  /**\n   * Heading size for the typography lockup (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 4;\n\n  /**\n   * Layout orientation\n   * - 'vertical': Icon above text (default, used in grid layouts)\n   * - 'horizontal': Icon beside text (used in compact layouts)\n   */\n  @Prop() orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Size of the icon box\n   */\n  @Prop() iconSize: 'small' | 'default' | 'large' = 'default';\n\n  render() {\n    const containerClasses = {\n      'icon-text': true,\n      [`icon-text--${this.orientation}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <af-icon-box \n            icon={this.icon} \n            size={this.iconSize}\n            class=\"icon-text__icon\"\n          ></af-icon-box>\n          \n          <af-typography-lockup\n            headingSize={this.headingSize}\n            textAlignment=\"left\"\n            buttonAlignment=\"vertical\"\n            class=\"icon-text__lockup\"\n          >\n            <slot></slot>\n            <span slot=\"description\">\n              <slot name=\"description\"></slot>\n            </span>\n            <span slot=\"buttons\">\n              <slot name=\"buttons\"></slot>\n            </span>\n          </af-typography-lockup>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/components/af-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AfIcon extends Components.AfIcon, HTMLElement {}
+export const AfIcon: {
+    prototype: AfIcon;
+    new (): AfIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-icon.js

@@ -0,0 +1,9 @@
+import { A as AfIcon$1, d as defineCustomElement$1 } from './p-BXZ7aJQf.js';
+
+const AfIcon = AfIcon$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfIcon, defineCustomElement };
+//# sourceMappingURL=af-icon.js.map
+
+//# sourceMappingURL=af-icon.js.map

package/dist/components/af-icon.js.map

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

package/dist/components/af-illustrated-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AfIllustratedCard extends Components.AfIllustratedCard, HTMLElement {}
+export const AfIllustratedCard: {
+    prototype: AfIllustratedCard;
+    new (): AfIllustratedCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-illustrated-card.js

@@ -0,0 +1,9 @@
+import { A as AfIllustratedCard$1, d as defineCustomElement$1 } from './p-CCAq3Zj6.js';
+
+const AfIllustratedCard = AfIllustratedCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfIllustratedCard, defineCustomElement };
+//# sourceMappingURL=af-illustrated-card.js.map
+
+//# sourceMappingURL=af-illustrated-card.js.map

package/dist/components/af-illustrated-card.js.map

@@ -0,0 +1 @@
+{"file":"af-illustrated-card.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/af-image.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AfImage extends Components.AfImage, HTMLElement {}
+export const AfImage: {
+    prototype: AfImage;
+    new (): AfImage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-image.js

@@ -0,0 +1,9 @@
+import { A as AfImage$1, d as defineCustomElement$1 } from './p-xDRMXxWJ.js';
+
+const AfImage = AfImage$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfImage, defineCustomElement };
+//# sourceMappingURL=af-image.js.map
+
+//# sourceMappingURL=af-image.js.map

package/dist/components/af-image.js.map

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

package/dist/components/af-in-page-banner.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface AfInPageBanner extends Components.AfInPageBanner, HTMLElement {}
+export const AfInPageBanner: {
+    prototype: AfInPageBanner;
+    new (): AfInPageBanner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/af-in-page-banner.js

@@ -0,0 +1,82 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
+import { d as defineCustomElement$2 } from './p-DBnL9UHx.js';
+
+const afInPageBannerCss = ".sc-af-in-page-banner-h{display:block;width:100%}.banner.sc-af-in-page-banner{position:relative;display:flex;align-items:center;gap:40px;padding-left:40px;padding-right:148px;padding-top:0;padding-bottom:0;border-radius:var(--radii-card-level-1, 32px);overflow:hidden;max-width:1280px;width:100%}.banner.theme-mist-green.sc-af-in-page-banner{background-color:var(--colour-brand-mist-green, #c6d5d1);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-inkwell.sc-af-in-page-banner{background-color:var(--colour-brand-inkwell, #14343b);--banner-heading-color:var(--colour-brand-mist-green, #c6d5d1);--banner-body-color:var(--colour-inkwell-100, #d0d6d8);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-white, #ffffff);--af-button-secondary-stroke:var(--colour-brand-white, #ffffff)}.banner.theme-soft-clay.sc-af-in-page-banner{background-color:var(--colour-softclay-400, #c0ab8d);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-450, #203e45);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner.theme-white-ivory.sc-af-in-page-banner{background-color:var(--colour-brand-ivory-paper, #fff9ee);--banner-heading-color:var(--colour-brand-inkwell, #14343b);--banner-body-color:var(--colour-inkwell-400, #2b484f);--af-button-primary-bg:var(--colour-brand-ice, #a6fffb);--af-button-primary-bg-hover:var(--colour-ice-600, #95e6e2);--af-button-primary-text:var(--colour-brand-inkwell, #14343b);--af-button-primary-stroke:var(--colour-brand-inkwell, #14343b);--af-button-secondary-text:var(--colour-brand-inkwell, #14343b);--af-button-secondary-stroke:var(--colour-brand-inkwell, #14343b)}.banner__wave-overlay.sc-af-in-page-banner{position:absolute;bottom:-17px;right:-156px;width:521px;height:323px;pointer-events:none;z-index:0}.banner__wave-svg.sc-af-in-page-banner{width:100%;height:100%}.banner.theme-mist-green.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:#d1ddda}.banner.theme-inkwell.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(255, 255, 255, 0.06)}.banner.theme-soft-clay.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.06)}.banner.theme-white-ivory.sc-af-in-page-banner .banner__wave-overlay.sc-af-in-page-banner{color:rgba(20, 52, 59, 0.04)}.banner__illustration.sc-af-in-page-banner{position:relative;z-index:1;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:360px;height:360px;max-width:360px;max-height:360px;aspect-ratio:1}.banner__illustration-img.sc-af-in-page-banner{width:100%;height:100%;object-fit:contain}.banner__illustration.sc-af-in-page-banner-s>*,.banner__illustration .sc-af-in-page-banner-s>*{width:100%;height:100%;object-fit:contain}.banner__content.sc-af-in-page-banner{position:relative;z-index:1;flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:40px;padding-top:var(--margins-margin-tb-tight, 48px);padding-bottom:var(--margins-margin-tb-tight, 48px);padding-right:0;padding-left:0}.banner__copy.sc-af-in-page-banner{display:flex;flex-direction:column;gap:16px;max-width:840px;width:100%;white-space:pre-wrap}.banner__heading.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-headingweight, 500);font-size:44px;line-height:1;letter-spacing:-0.88px;color:var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));margin:0;white-space:pre-wrap}.banner__description.sc-af-in-page-banner{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--typography-bodyweight, 400);font-size:18px;line-height:26px;color:var(--banner-body-color, var(--colour-inkwell-400, #2b484f));margin:0;white-space:pre-wrap}.banner__buttons.sc-af-in-page-banner{display:flex;flex-direction:row;gap:12px;align-items:flex-start}@media (max-width: 768px){.banner.sc-af-in-page-banner{flex-direction:column;align-items:stretch;padding:224px 0 0 0;border-radius:var(--radii-card-level-1-mobile, 24px);max-width:100%;min-height:auto}.banner__wave-overlay.sc-af-in-page-banner{display:none}.banner__illustration.sc-af-in-page-banner{position:absolute;top:12px;left:auto;right:0;transform:none;width:212px;height:212px;max-width:280px;max-height:280px}.banner__content.sc-af-in-page-banner{width:100%;min-height:320px;padding:16px 28px 48px 28px;gap:40px;flex:none}.banner__copy.sc-af-in-page-banner{max-width:100%}.banner__heading.sc-af-in-page-banner{font-size:32px;letter-spacing:-0.64px}.banner__buttons.sc-af-in-page-banner{flex-direction:column;align-items:stretch;gap:12px;width:100%}.banner__buttons.sc-af-in-page-banner{--af-button-width:100%}.banner__buttons.sc-af-in-page-banner af-button.sc-af-in-page-banner{display:block;width:100%}}@media (max-width: 480px){.banner.sc-af-in-page-banner{padding-top:200px}.banner__illustration.sc-af-in-page-banner{right:0;width:180px;height:180px}.banner__content.sc-af-in-page-banner{padding:16px 20px 36px 20px;min-height:280px}.banner__heading.sc-af-in-page-banner{font-size:28px;letter-spacing:-0.56px}}";
+
+const AfInPageBanner$1 = /*@__PURE__*/ proxyCustomElement(class AfInPageBanner extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        /** Theme - sets the banner background color and typography colors */
+        this.theme = 'mist-green';
+        /** Banner heading */
+        this.heading = '';
+        /** Banner description */
+        this.description = '';
+        /** Primary button text */
+        this.primaryButtonText = '';
+        /** Primary button URL */
+        this.primaryButtonUrl = '#';
+        /** Secondary button text (optional - if empty, button won't show) */
+        this.secondaryButtonText = '';
+        /** Secondary button URL */
+        this.secondaryButtonUrl = '#';
+        /**
+         * Illustration URL. For theme-matched illustrations, use getIllustrationUrlByScene()
+         * from @affinda/illustrations in your app code.
+         */
+        this.illustrationUrl = '';
+        /** Whether to show the decorative wave overlay */
+        this.showWaveDecoration = true;
+    }
+    /**
+     * Renders the decorative wave SVG overlay.
+     * Uses the Affinda brand "infinity loop" wave pattern.
+     * Fill color is controlled via CSS custom properties per theme.
+     */
+    renderWaveOverlay() {
+        return (h("div", { class: "banner__wave-overlay", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 521 323", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "banner__wave-svg" }, h("path", { d: "M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z", fill: "currentColor" }))));
+    }
+    render() {
+        return (h(Host, { key: '41403ba6ca0b60c416dd41d81f1eedbfe566f5c4' }, h("div", { key: '0c68549f2f1664d676fd969500702ccb8d4e43f5', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: '213397e65a87e0999f857af1201219ec1987c5b1', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: '972c0ba5f99a8cc22bb9bf04402ee6f7feabb6be', class: "banner__content" }, h("div", { key: '659301eefed48b4abdfaaafa2c4db3fe242703fc', class: "banner__copy" }, this.heading && (h("h2", { key: 'aa4e2b0acf38d149b302c573da7e8f5bf097b846', class: "banner__heading" }, this.heading)), this.description && (h("p", { key: 'e0bb0b75f31b1a3c5bb0c61e48521a3ee0085f6e', class: "banner__description" }, this.description))), (this.primaryButtonText || this.secondaryButtonText) && (h("div", { key: '8a029743425b837cc8275eea38a1313366add6ec', class: "banner__buttons" }, this.primaryButtonText && (h("af-button", { key: '9a237dc0b9c4165c7b96ba526aae791b8504941e', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: 'a9ab21d4efa1f68061b64f6e64c1da2d179eb0d2', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
+    }
+    static get style() { return afInPageBannerCss; }
+}, [262, "af-in-page-banner", {
+        "theme": [1],
+        "heading": [1],
+        "description": [1],
+        "primaryButtonText": [1, "primary-button-text"],
+        "primaryButtonUrl": [1, "primary-button-url"],
+        "secondaryButtonText": [1, "secondary-button-text"],
+        "secondaryButtonUrl": [1, "secondary-button-url"],
+        "illustrationUrl": [1, "illustration-url"],
+        "showWaveDecoration": [4, "show-wave-decoration"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["af-in-page-banner", "af-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "af-in-page-banner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AfInPageBanner$1);
+            }
+            break;
+        case "af-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const AfInPageBanner = AfInPageBanner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { AfInPageBanner, defineCustomElement };
+//# sourceMappingURL=af-in-page-banner.js.map
+
+//# sourceMappingURL=af-in-page-banner.js.map