@affinda/wc 0.0.16 → 0.0.18

package/dist/collection/components/af-hero-section/af-hero-section.css

@@ -1,175 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-.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 Variants
-   Each theme sets background color and CSS custom properties for children.
-   ========================================================================== */
-
-/* WHITE THEME */
-.theme-white {
-  background-color: var(--colour-brand-white, #FFFFFF);
-  
-  /* Typography tokens */
-  --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);
-  
-  /* Button - Primary */
-  --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);
-  
-  /* Button - Secondary */
-  --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);
-  
-  /* Button - Tertiary */
-  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
-  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
-}
-
-/* INKWELL THEME (Dark) */
-.theme-inkwell {
-  background-color: var(--colour-brand-inkwell, #14343B);
-  
-  /* Typography tokens */
-  --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);
-  
-  /* Button - Primary */
-  --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);
-  
-  /* Button - Secondary */
-  --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);
-  
-  /* Button - Tertiary */
-  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);
-  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);
-}
-
-/* MIST-GREEN THEME */
-.theme-mist-green {
-  background-color: var(--colour-brand-mist-green, #C6D5D1);
-  
-  /* Typography tokens */
-  --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);
-  
-  /* Button - Primary */
-  --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);
-  
-  /* Button - Secondary */
-  --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);
-  
-  /* Button - Tertiary */
-  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
-  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
-}
-
-/* SOFT-CLAY THEME */
-.theme-soft-clay {
-  background-color: var(--colour-softclay-400, #c0ab8d);
-  
-  /* Typography tokens */
-  --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);
-  
-  /* Button - Primary */
-  --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);
-  
-  /* Button - Secondary */
-  --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);
-  
-  /* Button - Tertiary */
-  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
-  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
-}
-
-.hero-decoration {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-  height: 0;
-  width: 0;
-  overflow: visible;
-}
-
-.hero-decoration ::slotted(*) {
-  position: absolute !important;
-  bottom: -440px;
-  right: -1200px;
-  width: 1250px;
-  height: 820px;
-  opacity: 0.5;
-}
-
-.hero-content {
-  max-width: 1000px;
-  margin: 0 auto;
-  position: relative;
-  z-index: 1;
-}
-
-/* Mobile adjustments */
-@media (max-width: 768px) {
-  .hero-section {
-    padding: 3rem 1.5rem 2.5rem;
-  }
-}

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

@@ -1,186 +0,0 @@
-import { h, Host } from "@stencil/core";
-/**
- * Hero section component for marketing pages.
- * Uses TypographyLockup internally to handle heading, description, and button layout.
- * Sets theme context for all child components via CSS custom properties.
- *
- * @slot heading - The main heading content (typically an af-heading)
- * @slot description - Description text below the heading (typically af-text)
- * @slot buttons - Call-to-action buttons (typically af-button-group or individual af-buttons)
- * @slot decoration - Optional decorative element (e.g., PaperclipDecoration)
- */
-export class AfHeroSection {
-    constructor() {
-        /** 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: '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 is() { return "af-hero-section"; }
-    static get encapsulation() { return "scoped"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["af-hero-section.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["af-hero-section.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "theme": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'white' | 'inkwell' | 'mist-green' | 'soft-clay'",
-                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Theme - sets background color and provides theme context to children"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "theme",
-                "defaultValue": "'inkwell'"
-            },
-            "withDecoration": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show decorative paperclip"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "with-decoration",
-                "defaultValue": "false"
-            },
-            "minHeight": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Minimum height"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min-height",
-                "defaultValue": "'60vh'"
-            },
-            "headingSize": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "1 | 2 | 3 | 4 | 5",
-                    "resolved": "1 | 2 | 3 | 4 | 5",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Heading size for the typography lockup (1-5, where 1 is largest)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "heading-size",
-                "defaultValue": "1"
-            },
-            "textAlignment": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'left' | 'center'",
-                    "resolved": "\"center\" | \"left\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Text alignment for the typography lockup"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "text-alignment",
-                "defaultValue": "'center'"
-            },
-            "buttonAlignment": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'horizontal' | 'vertical'",
-                    "resolved": "\"horizontal\" | \"vertical\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Button alignment - horizontal places buttons inline, vertical stacks them"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "button-alignment",
-                "defaultValue": "'horizontal'"
-            },
-            "maxWidth": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Maximum width for the copy section (in pixels)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-width"
-            }
-        };
-    }
-}
-//# sourceMappingURL=af-hero-section.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"af-hero-section.js","sourceRoot":"","sources":["../../../src/components/af-hero-section/af-hero-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;GASG;AAOH,MAAM,OAAO,aAAa;IAN1B;QAOE,2EAA2E;QACnE,UAAK,GAAqD,SAAS,CAAC;QAE5E,gCAAgC;QACxB,mBAAc,GAAY,KAAK,CAAC;QAExC,qBAAqB;QACb,cAAS,GAAW,MAAM,CAAC;QAEnC,uEAAuE;QAC/D,gBAAW,GAAsB,CAAC,CAAC;QAE3C,+CAA+C;QACvC,kBAAa,GAAsB,QAAQ,CAAC;QAEpD,gFAAgF;QACxE,oBAAe,GAA8B,YAAY,CAAC;KAoCnE;IA/BC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE;gBACjF,IAAI,CAAC,cAAc,IAAI,CACtB,4DAAK,KAAK,EAAC,iBAAiB;oBAC1B,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACP;gBACD;oBACE,4DAAK,KAAK,EAAC,cAAc;wBACvB,6EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ;4BAEvB,6DAAM,IAAI,EAAC,SAAS,GAAQ;4BAC5B,6DAAM,IAAI,EAAC,aAAa;gCACtB,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC3B;4BACP,6DAAM,IAAI,EAAC,SAAS;gCAClB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACvB,CACc,CACnB,CACO,CACX,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -1,69 +0,0 @@
-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}.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) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /** 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: '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", {
-        "theme": [1],
-        "withDecoration": [4, "with-decoration"],
-        "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", "af-typography-lockup"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-hero-section":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfHeroSection$1);
-            }
-            break;
-        case "af-container":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "af-typography-lockup":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const AfHeroSection = AfHeroSection$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { AfHeroSection, defineCustomElement };
-//# sourceMappingURL=af-hero-section.js.map
-
-//# sourceMappingURL=af-hero-section.js.map

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

@@ -1 +0,0 @@
-{"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/p-BMp8QbY-.js

@@ -1,68 +0,0 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
-
-const afTypographyLockupCss = ":host{display:block}.lockup{display:flex;flex-direction:column}.breakpoint-desktop.heading-1.lockup{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1.lockup{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2.lockup,.breakpoint-desktop.heading-3.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3.lockup,.breakpoint-desktop.heading-4.lockup,.breakpoint-desktop.heading-5.lockup{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4.lockup,.breakpoint-mobile.heading-5.lockup{gap:var(--space-2, 8px)}.text-left{align-items:flex-start}.text-center{align-items:center}.text-left .copy,.text-left .heading,.text-left .description{text-align:left}.text-center .copy,.text-center .heading,.text-center .description{text-align:center}.copy{display:flex;flex-direction:column;width:100%;max-width:840px}.breakpoint-desktop.heading-1 .copy{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1 .copy{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2 .copy,.breakpoint-desktop.heading-3 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3 .copy,.breakpoint-desktop.heading-4 .copy,.breakpoint-desktop.heading-5 .copy{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4 .copy,.breakpoint-mobile.heading-5 .copy{gap:var(--space-2, 8px)}.heading{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);color:var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));line-height:var(--line-height-heading-tight, 1);letter-spacing:var(--letter-spacing-heading, -0.02em);white-space:pre-wrap}.breakpoint-desktop.heading-1 .heading{font-size:var(--font-size-heading-1-desktop, 56px)}.breakpoint-desktop.heading-2 .heading{font-size:var(--font-size-heading-2-desktop, 44px)}.breakpoint-desktop.heading-3 .heading{font-size:var(--font-size-heading-3-desktop, 34px)}.breakpoint-desktop.heading-4 .heading{font-size:var(--font-size-heading-4-desktop, 24px);line-height:var(--line-height-heading-relaxed, 1.2)}.breakpoint-desktop.heading-5 .heading{font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2)}.breakpoint-mobile.heading-1 .heading{font-size:var(--font-size-heading-1-mobile, 38px)}.breakpoint-mobile.heading-2 .heading{font-size:var(--font-size-heading-2-mobile, 32px)}.breakpoint-mobile.heading-3 .heading{font-size:var(--font-size-heading-3-mobile, 25px)}.breakpoint-mobile.heading-4 .heading{font-size:var(--font-size-heading-4-mobile, 20px);line-height:var(--line-height-heading-normal, 1.1)}.breakpoint-mobile.heading-5 .heading{font-size:var(--font-size-heading-5-mobile, 18px);line-height:var(--line-height-heading-normal, 1.1)}.description{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:var(--font-size-body-large, 18px);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-body-large, 26px);color:var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));white-space:pre-wrap}.breakpoint-mobile.heading-3 .description,.breakpoint-desktop.heading-4 .description,.breakpoint-mobile.heading-4 .description,.breakpoint-desktop.heading-5 .description,.breakpoint-mobile.heading-5 .description{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.description:empty{display:none}.buttons{display:flex;gap:var(--space-3, 12px)}.buttons:empty{display:none}.button-horizontal .buttons{flex-direction:row;align-items:center}.text-left.button-horizontal{flex-direction:row;align-items:center;gap:var(--space-4, 16px)}.text-left.button-horizontal .copy{flex:1 0 0;max-width:950px}.text-left.button-horizontal.heading-3 .copy,.text-left.button-horizontal.heading-4 .copy{max-width:840px}.text-left.button-horizontal .buttons{flex-shrink:0}.button-vertical .buttons{flex-direction:row;align-items:flex-start}.text-center.button-vertical .buttons{justify-content:center}.breakpoint-mobile .buttons{flex-direction:column;align-items:stretch}.breakpoint-mobile.text-center .buttons{align-items:center}.text-center .copy{max-width:840px}::slotted(*){margin:0}";
-
-const AfTypographyLockup = /*@__PURE__*/ proxyCustomElement(class AfTypographyLockup extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * The heading size (1-5, where 1 is largest)
-         */
-        this.headingSize = 2;
-        /**
-         * The breakpoint for responsive typography
-         */
-        this.breakpoint = 'desktop';
-        /**
-         * Text alignment
-         */
-        this.textAlignment = 'left';
-        /**
-         * Button alignment (horizontal or vertical stacking)
-         */
-        this.buttonAlignment = 'vertical';
-    }
-    render() {
-        const containerClasses = {
-            'lockup': true,
-            [`text-${this.textAlignment}`]: true,
-            [`button-${this.buttonAlignment}`]: true,
-            [`heading-${this.headingSize}`]: true,
-            [`breakpoint-${this.breakpoint}`]: true
-        };
-        const copyClasses = {
-            'copy': true
-        };
-        const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (h(Host, { key: '62d24f768270ca80fea5f47bbb98fcd51d1ce19f' }, h("div", { key: '7e4ce0a3702cd933d4c2cf902a9de7aa608d7f45', class: containerClasses }, h("div", { key: '2139a714f4c654343246ea9acc3a4158633fbea5', class: copyClasses, style: copyStyle }, h("div", { key: 'c912d098ef8ff24579a1798a04e636f3127b4142', class: "heading", part: "heading" }, h("slot", { key: '836fdd1778b706d239387845daa52fec6b38c8b8' })), h("div", { key: '4d1c9207a166aa4e717b655f8471de25bfb67c7a', class: "description", part: "body" }, h("slot", { key: 'f3d2f3fb15547ce230f868d92e14f0156d8a86b4', name: "description" }))), h("div", { key: '4567953f1da984155af2dce9f8eeda69201fd80a', class: "buttons", part: "buttons" }, h("slot", { key: 'ba914f51d04808f52deb6eb9dcecb40f9516057c', name: "buttons" })))));
-    }
-    static get style() { return afTypographyLockupCss; }
-}, [257, "af-typography-lockup", {
-        "headingSize": [2, "heading-size"],
-        "breakpoint": [1],
-        "textAlignment": [1, "text-alignment"],
-        "buttonAlignment": [1, "button-alignment"],
-        "maxWidth": [2, "max-width"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-typography-lockup"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-typography-lockup":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfTypographyLockup);
-            }
-            break;
-    } });
-}
-
-export { AfTypographyLockup as A, defineCustomElement as d };
-//# sourceMappingURL=p-BMp8QbY-.js.map
-
-//# sourceMappingURL=p-BMp8QbY-.js.map

package/dist/components/p-BMp8QbY-.js.map

@@ -1 +0,0 @@
-{"file":"p-BMp8QbY-.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,yoIAAyoI;;MCO1pI,kBAAkB,iBAAAA,kBAAA,CAAA,MAAA,kBAAA,SAAAC,CAAA,CAAA;AAL/B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAME;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAsB,CAAC;AAE1C;;AAEG;AACK,QAAA,IAAU,CAAA,UAAA,GAAyB,SAAS;AAEpD;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAsB,MAAM;AAEjD;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAA8B,UAAU;AAwChE;IAjCC,MAAM,GAAA;AACJ,QAAA,MAAM,gBAAgB,GAAG;AACvB,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAE,CAAA,GAAG,IAAI;AACpC,YAAA,CAAC,UAAU,IAAI,CAAC,eAAe,CAAE,CAAA,GAAG,IAAI;AACxC,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE;SACT;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,QAAQ,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAA,EAAA,CAAI,EAAE,GAAG,EAAE;AAEzE,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,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAA,EACvC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC5B,CACF,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-typography-lockup/af-typography-lockup.css?tag=af-typography-lockup&encapsulation=shadow","src/components/af-typography-lockup/af-typography-lockup.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.lockup {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Lockup gap variations (between copy and buttons) - matches copy internal gap */\n/* Heading 1 desktop: 24px gap */\n.breakpoint-desktop.heading-1.lockup {\n  gap: var(--space-6, 24px);\n}\n\n/* Heading 1 mobile: 20px gap */\n.breakpoint-mobile.heading-1.lockup {\n  gap: var(--space-5, 20px);\n}\n\n/* Heading 2, 3 desktop: 16px gap */\n.breakpoint-desktop.heading-2.lockup,\n.breakpoint-desktop.heading-3.lockup {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 2 mobile: 16px gap */\n.breakpoint-mobile.heading-2.lockup {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 3 mobile, 4 desktop, 5 desktop: 12px gap */\n.breakpoint-mobile.heading-3.lockup,\n.breakpoint-desktop.heading-4.lockup,\n.breakpoint-desktop.heading-5.lockup {\n  gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile: 8px gap */\n.breakpoint-mobile.heading-4.lockup,\n.breakpoint-mobile.heading-5.lockup {\n  gap: var(--space-2, 8px);\n}\n\n/* Text alignment */\n.text-left {\n  align-items: flex-start;\n}\n\n.text-center {\n  align-items: center;\n}\n\n.text-left .copy,\n.text-left .heading,\n.text-left .description {\n  text-align: left;\n}\n\n.text-center .copy,\n.text-center .heading,\n.text-center .description {\n  text-align: center;\n}\n\n/* Copy section - base styles */\n.copy {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 840px;\n}\n\n/* Copy gap variations based on heading size and breakpoint */\n/* Heading 1 desktop: 24px gap */\n.breakpoint-desktop.heading-1 .copy {\n  gap: var(--space-6, 24px);\n}\n\n/* Heading 1 mobile: 20px gap */\n.breakpoint-mobile.heading-1 .copy {\n  gap: var(--space-5, 20px);\n}\n\n/* Heading 2, 3 desktop: 16px gap */\n.breakpoint-desktop.heading-2 .copy,\n.breakpoint-desktop.heading-3 .copy {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 2 mobile: 16px gap */\n.breakpoint-mobile.heading-2 .copy {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 3 mobile, 4 desktop, 5 desktop: 12px gap */\n.breakpoint-mobile.heading-3 .copy,\n.breakpoint-desktop.heading-4 .copy,\n.breakpoint-desktop.heading-5 .copy {\n  gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile: 8px gap */\n.breakpoint-mobile.heading-4 .copy,\n.breakpoint-mobile.heading-5 .copy {\n  gap: var(--space-2, 8px);\n}\n\n/* Heading styles */\n.heading {\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n  line-height: var(--line-height-heading-tight, 1);\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n  white-space: pre-wrap;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n  font-size: var(--font-size-heading-1-desktop, 56px);\n}\n\n.breakpoint-desktop.heading-2 .heading {\n  font-size: var(--font-size-heading-2-desktop, 44px);\n}\n\n.breakpoint-desktop.heading-3 .heading {\n  font-size: var(--font-size-heading-3-desktop, 34px);\n}\n\n.breakpoint-desktop.heading-4 .heading {\n  font-size: var(--font-size-heading-4-desktop, 24px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n.breakpoint-desktop.heading-5 .heading {\n  font-size: var(--font-size-heading-5-desktop, 20px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n  font-size: var(--font-size-heading-1-mobile, 38px);\n}\n\n.breakpoint-mobile.heading-2 .heading {\n  font-size: var(--font-size-heading-2-mobile, 32px);\n}\n\n.breakpoint-mobile.heading-3 .heading {\n  font-size: var(--font-size-heading-3-mobile, 25px);\n}\n\n.breakpoint-mobile.heading-4 .heading {\n  font-size: var(--font-size-heading-4-mobile, 20px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n.breakpoint-mobile.heading-5 .heading {\n  font-size: var(--font-size-heading-5-mobile, 18px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n/* Description/body text - default (body/large) */\n.description {\n  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n  font-size: var(--font-size-body-large, 18px);\n  font-weight: var(--font-weight-regular, 400);\n  line-height: var(--line-height-body-large, 26px);\n  color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n  white-space: pre-wrap;\n}\n\n/* Description text size variations - smaller for heading 3 mobile, 4, and 5 */\n.breakpoint-mobile.heading-3 .description,\n.breakpoint-desktop.heading-4 .description,\n.breakpoint-mobile.heading-4 .description,\n.breakpoint-desktop.heading-5 .description,\n.breakpoint-mobile.heading-5 .description {\n  font-size: var(--font-size-body-medium, 16px);\n  line-height: var(--line-height-body-medium, 24px);\n}\n\n.description:empty {\n  display: none;\n}\n\n/* Buttons section */\n.buttons {\n  display: flex;\n  gap: var(--space-3, 12px);\n}\n\n.buttons:empty {\n  display: none;\n}\n\n/* Button alignment - horizontal (desktop only) */\n.button-horizontal .buttons {\n  flex-direction: row;\n  align-items: center;\n}\n\n.text-left.button-horizontal {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-4, 16px);\n}\n\n.text-left.button-horizontal .copy {\n  flex: 1 0 0;\n  max-width: 950px;\n}\n\n/* Heading 3, 4 horizontal: different max-width */\n.text-left.button-horizontal.heading-3 .copy,\n.text-left.button-horizontal.heading-4 .copy {\n  max-width: 840px;\n}\n\n.text-left.button-horizontal .buttons {\n  flex-shrink: 0;\n}\n\n/* Button alignment - vertical */\n.button-vertical .buttons {\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.text-center.button-vertical .buttons {\n  justify-content: center;\n}\n\n/* Mobile button stacking - buttons stack vertically on mobile */\n.breakpoint-mobile .buttons {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.breakpoint-mobile.text-center .buttons {\n  align-items: center;\n}\n\n/* Max width constraints for centered layouts */\n.text-center .copy {\n  max-width: 840px;\n}\n\n/* Slot content styling */\n::slotted(*) {\n  margin: 0;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  /**\n   * The heading size (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n  /**\n   * The breakpoint for responsive typography\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Text alignment\n   */\n  @Prop() textAlignment: 'left' | 'center' = 'left';\n\n  /**\n   * Button alignment (horizontal or vertical stacking)\n   */\n  @Prop() buttonAlignment: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Maximum width for the copy section (in pixels)\n   */\n  @Prop() maxWidth?: number;\n\n  render() {\n    const containerClasses = {\n      'lockup': true,\n      [`text-${this.textAlignment}`]: true,\n      [`button-${this.buttonAlignment}`]: true,\n      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const copyClasses = {\n      'copy': true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class={copyClasses} style={copyStyle}>\n            <div class=\"heading\" part=\"heading\">\n              <slot></slot>\n            </div>\n            <div class=\"description\" part=\"body\">\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div class=\"buttons\" part=\"buttons\">\n            <slot name=\"buttons\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BRN73McC.js

@@ -1,59 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-CxngDK-N.js';
-
-const afHeadingCss = ":host{display:block}.heading{margin:0;padding:0;font-family:var(--typography-headingfont, 'NeuSans', Arial, sans-serif);font-weight:var(--font-weight-regular, 400);color:var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));letter-spacing:var(--letter-spacing-heading, -0.02em)}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.level-xl{font-size:var(--font-size-heading-xl-mobile, 50px);line-height:var(--line-height-heading-tight, 1)}@media (min-width: 768px){.level-xl{font-size:var(--font-size-heading-xl-desktop, 80px)}}.level-1{font-size:var(--font-size-heading-1-mobile, 38px);line-height:var(--line-height-heading-tight, 1)}@media (min-width: 768px){.level-1{font-size:var(--font-size-heading-1-desktop, 56px)}}.level-2{font-size:var(--font-size-heading-2-mobile, 32px);line-height:var(--line-height-heading-tight, 1)}@media (min-width: 768px){.level-2{font-size:var(--font-size-heading-2-desktop, 44px)}}.level-3{font-size:var(--font-size-heading-3-mobile, 25px);line-height:var(--line-height-heading-tight, 1)}@media (min-width: 768px){.level-3{font-size:var(--font-size-heading-3-desktop, 34px)}}.level-4{font-size:var(--font-size-heading-4-mobile, 20px);line-height:var(--line-height-heading-normal, 1.1)}@media (min-width: 768px){.level-4{font-size:var(--font-size-heading-4-desktop, 24px);line-height:var(--line-height-heading-relaxed, 1.2)}}.level-5{font-size:var(--font-size-heading-5-mobile, 18px);line-height:var(--line-height-heading-normal, 1.1)}@media (min-width: 768px){.level-5{font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2)}}";
-
-const AfHeading = /*@__PURE__*/ proxyCustomElement(class AfHeading extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /** Heading level */
-        this.level = '1';
-        /** Visual alignment */
-        this.align = 'left';
-    }
-    getHeadingTag() {
-        // Map display levels to semantic HTML tags
-        const tagMap = {
-            'xl': 'h1',
-            '1': 'h1',
-            '2': 'h2',
-            '3': 'h3',
-            '4': 'h4',
-            '5': 'h5'
-        };
-        return tagMap[this.level] || 'h1';
-    }
-    render() {
-        const Tag = this.getHeadingTag();
-        return (h(Tag, { key: '05bfc95960c7546b642fde77e0cc4018817c4241', class: {
-                'heading': true,
-                [`level-${this.level}`]: true,
-                [`align-${this.align}`]: true
-            }, part: "base" }, h("slot", { key: '9ebf0b011f26063a1835dfe157d0d485a30a5a0b' })));
-    }
-    static get style() { return afHeadingCss; }
-}, [257, "af-heading", {
-        "level": [1],
-        "align": [1]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-heading"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-heading":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfHeading);
-            }
-            break;
-    } });
-}
-
-export { AfHeading as A, defineCustomElement as d };
-//# sourceMappingURL=p-BRN73McC.js.map
-
-//# sourceMappingURL=p-BRN73McC.js.map