@affinda/wc 0.0.9 → 0.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/affinda/af-hero-section.entry.esm.js.map +1 -1
- package/dist/affinda/af-section.entry.esm.js.map +1 -1
- package/dist/affinda/af-typography-lockup.entry.esm.js.map +1 -1
- package/dist/affinda/affinda.esm.js +1 -1
- package/dist/affinda/index.esm.js +1 -1
- package/dist/affinda/p-2c0d7eb7.entry.js +2 -0
- package/dist/affinda/{p-7c115698.entry.js.map → p-2c0d7eb7.entry.js.map} +1 -1
- package/dist/affinda/{p-d7ff9fd9.entry.js → p-cb10e4ca.entry.js} +2 -2
- package/dist/affinda/p-cb10e4ca.entry.js.map +1 -0
- package/dist/affinda/p-e69c34f1.entry.js +2 -0
- package/dist/affinda/{p-0e642987.entry.js.map → p-e69c34f1.entry.js.map} +1 -1
- package/dist/cjs/af-hero-section.cjs.entry.js +1 -1
- package/dist/cjs/af-hero-section.entry.cjs.js.map +1 -1
- package/dist/cjs/af-section.cjs.entry.js +1 -1
- package/dist/cjs/af-section.entry.cjs.js.map +1 -1
- package/dist/cjs/af-typography-lockup.cjs.entry.js +1 -1
- package/dist/cjs/af-typography-lockup.entry.cjs.js.map +1 -1
- package/dist/collection/components/af-hero-section/af-hero-section.css +3 -3
- package/dist/collection/components/af-section/af-section.css +21 -0
- package/dist/collection/components/af-typography-lockup/af-typography-lockup.js +1 -1
- package/dist/collection/components/af-typography-lockup/af-typography-lockup.js.map +1 -1
- package/dist/components/af-hero-section.js +1 -1
- package/dist/components/af-hero-section.js.map +1 -1
- package/dist/components/af-section.js +1 -1
- package/dist/components/af-section.js.map +1 -1
- package/dist/components/af-typography-lockup.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/{p-D4NomvK5.js → p-B_FOK5P6.js} +3 -3
- package/dist/components/p-B_FOK5P6.js.map +1 -0
- package/dist/esm/af-hero-section.entry.js +1 -1
- package/dist/esm/af-hero-section.entry.js.map +1 -1
- package/dist/esm/af-section.entry.js +1 -1
- package/dist/esm/af-section.entry.js.map +1 -1
- package/dist/esm/af-typography-lockup.entry.js +1 -1
- package/dist/esm/af-typography-lockup.entry.js.map +1 -1
- package/package.json +2 -1
- package/dist/affinda/p-0e642987.entry.js +0 -2
- package/dist/affinda/p-7c115698.entry.js +0 -2
- package/dist/affinda/p-d7ff9fd9.entry.js.map +0 -1
- package/dist/components/p-D4NomvK5.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-hero-section.entry.esm.js","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(
|
|
1
|
+
{"version":3,"file":"af-hero-section.entry.esm.js","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"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,8rCAA8rC;;MCW1sC,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,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;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-section.entry.esm.js","sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.section {\n width: 100%;\n position: relative;\n}\n\n/* Padding variants */\n.padding-tight {\n padding: 48px 0;\n}\n\n.padding-default {\n padding: 96px 0;\n}\n\n.padding-loose {\n padding: 120px 0 96px;\n}\n\n/* Background variants */\n.bg-white {\n background-color: var(--colour-background-white, #FFFFFF);\n}\n\n.bg-level1 {\n background-color: var(--colour-background-level-1, #E8EEED);\n}\n\n.bg-dark,\n.bg-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n .padding-tight {\n padding: 32px 0;\n }\n \n .padding-default {\n padding: 64px 0;\n }\n \n .padding-loose {\n padding: 80px 0 64px;\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds\n */\n@Component({\n tag: 'af-section',\n styleUrl: 'af-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSection {\n /** Padding variant */\n @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n \n /** Background color */\n @Prop() background: 'white' | 'level1' | 'dark' | 'inkwell' = 'white';\n \n /** Whether to include a Container wrapper */\n @Prop() container: boolean = true;\n\n render() {\n const content = <slot></slot>;\n \n return (\n <Host>\n <div class={`section padding-${this.padding} bg-${this.background}`}>\n {this.container ? (\n <af-container>{content}</af-container>\n ) : content}\n </div>\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,
|
|
1
|
+
{"version":3,"file":"af-section.entry.esm.js","sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.section {\n width: 100%;\n position: relative;\n}\n\n/* Padding variants */\n.padding-tight {\n padding: 48px 0;\n}\n\n.padding-default {\n padding: 96px 0;\n}\n\n.padding-loose {\n padding: 120px 0 96px;\n}\n\n/* Background variants */\n.bg-white {\n background-color: var(--colour-background-white, #FFFFFF);\n}\n\n.bg-level1 {\n background-color: var(--colour-background-level-1, #E8EEED);\n}\n\n.bg-dark,\n.bg-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --colour-typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);\n --colour-typography-body-default: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n/* Automatic contrast overrides for dark sections */\n.bg-dark af-heading::part(base),\n.bg-inkwell af-heading::part(base) {\n color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.bg-dark af-text::part(base),\n.bg-inkwell af-text::part(base) {\n color: var(--colour-brand-mist-green, #C6D5D1);\n opacity: 0.92;\n}\n\n.bg-dark af-typography-lockup::part(heading),\n.bg-inkwell af-typography-lockup::part(heading),\n.bg-dark af-typography-lockup::part(body),\n.bg-inkwell af-typography-lockup::part(body) {\n color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n .padding-tight {\n padding: 32px 0;\n }\n \n .padding-default {\n padding: 64px 0;\n }\n \n .padding-loose {\n padding: 80px 0 64px;\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds\n */\n@Component({\n tag: 'af-section',\n styleUrl: 'af-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSection {\n /** Padding variant */\n @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n \n /** Background color */\n @Prop() background: 'white' | 'level1' | 'dark' | 'inkwell' = 'white';\n \n /** Whether to include a Container wrapper */\n @Prop() container: boolean = true;\n\n render() {\n const content = <slot></slot>;\n \n return (\n <Host>\n <div class={`section padding-${this.padding} bg-${this.background}`}>\n {this.container ? (\n <af-container>{content}</af-container>\n ) : content}\n </div>\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,0hEAA0hE;;MCWliE,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAkC,SAAS;;AAGlD,QAAA,IAAU,CAAA,UAAA,GAA4C,OAAO;;AAG7D,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;QAE7B,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,OAAO,CAAO,IAAA,EAAA,IAAI,CAAC,UAAU,CAAA,CAAE,EAAA,EAChE,IAAI,CAAC,SAAS,IACb,CAAe,CAAA,cAAA,EAAA,IAAA,EAAA,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-typography-lockup.entry.esm.js","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 gap: 40px;\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 */\n.copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n}\n\n/* Heading styles */\n.heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n color: var(--typography-heading-primary, #14343B);\n line-height: 1;\n white-space: pre-wrap;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n font-size: 56px;\n letter-spacing: -1.12px;\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: 44px;\n letter-spacing: -0.88px;\n}\n\n.breakpoint-desktop.heading-3 .heading {\n font-size: 34px;\n letter-spacing: -0.68px;\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: 24px;\n letter-spacing: -0.48px;\n line-height: 1.2;\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.2;\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n font-size: 38px;\n letter-spacing: -0.76px;\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: 25px;\n letter-spacing: -0.5px;\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.1;\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: 18px;\n letter-spacing: -0.36px;\n line-height: 1.1;\n}\n\n/* Description/body text */\n.description {\n font-family: 'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;\n font-size: 18px;\n font-weight: 400;\n line-height: 26px;\n color: var(--typography-body-default, #2B484F);\n white-space: pre-wrap;\n}\n\n.description:empty {\n display: none;\n}\n\n/* Buttons section */\n.buttons {\n display: flex;\n gap: 12px;\n}\n\n.buttons:empty {\n display: none;\n}\n\n/* Button alignment - horizontal */\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: 16px;\n}\n\n.text-left.button-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\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 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 };\n\n const copyClasses = {\n 'copy': true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: 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\">\n <slot></slot>\n </div>\n <div class=\"description\">\n <slot name=\"description\"></slot>\n </div>\n </div>\n <div class=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,8jEAA8jE;;MCO/kE,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,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;SACrC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;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,
|
|
1
|
+
{"version":3,"file":"af-typography-lockup.entry.esm.js","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 gap: 40px;\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 */\n.copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n}\n\n/* Heading styles */\n.heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n color: var(--typography-heading-primary, #14343B);\n line-height: 1;\n white-space: pre-wrap;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n font-size: 56px;\n letter-spacing: -1.12px;\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: 44px;\n letter-spacing: -0.88px;\n}\n\n.breakpoint-desktop.heading-3 .heading {\n font-size: 34px;\n letter-spacing: -0.68px;\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: 24px;\n letter-spacing: -0.48px;\n line-height: 1.2;\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.2;\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n font-size: 38px;\n letter-spacing: -0.76px;\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: 25px;\n letter-spacing: -0.5px;\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.1;\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: 18px;\n letter-spacing: -0.36px;\n line-height: 1.1;\n}\n\n/* Description/body text */\n.description {\n font-family: 'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;\n font-size: 18px;\n font-weight: 400;\n line-height: 26px;\n color: var(--typography-body-default, #2B484F);\n white-space: pre-wrap;\n}\n\n.description:empty {\n display: none;\n}\n\n/* Buttons section */\n.buttons {\n display: flex;\n gap: 12px;\n}\n\n.buttons:empty {\n display: none;\n}\n\n/* Button alignment - horizontal */\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: 16px;\n}\n\n.text-left.button-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\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 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 };\n\n const copyClasses = {\n 'copy': true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: 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"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,8jEAA8jE;;MCO/kE,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,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;SACrC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;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;;;;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as a,g as e,b as t}from"./p-Agei6ZJQ.js";export{s as setNonce}from"./p-Agei6ZJQ.js";var i=()=>{const e=import.meta.url;const t={};if(e!==""){t.resourcesUrl=new URL(".",e).href}return a(t)};i().then((async a=>{await e();return t([["p-
|
|
1
|
+
import{p as a,g as e,b as t}from"./p-Agei6ZJQ.js";export{s as setNonce}from"./p-Agei6ZJQ.js";var i=()=>{const e=import.meta.url;const t={};if(e!==""){t.resourcesUrl=new URL(".",e).href}return a(t)};i().then((async a=>{await e();return t([["p-e69c34f1",[[262,"af-hero-section",{variant:[1],withDecoration:[4,"with-decoration"],minHeight:[1,"min-height"]}]]],["p-2c0d7eb7",[[262,"af-section",{padding:[1],background:[1],container:[4]}]]],["p-10288f13",[[257,"af-heading",{level:[1],align:[1],theme:[1]}],[257,"af-logo"],[257,"af-nav-item",{hierarchy:[1],variant:[1],href:[1],active:[4]}],[257,"af-navbar",{mobileMenuOpen:[32]}],[257,"af-text",{variant:[1],align:[1],as:[1],theme:[1]}]]],["p-39e917eb",[[257,"af-aspect-ratio",{ratio:[1]}]]],["p-45d0f3e3",[[257,"af-button",{variant:[1],size:[1],disabled:[4],href:[1],type:[1],darkBackground:[4,"dark-background"]}]]],["p-867c5141",[[257,"af-button-group",{direction:[1],gap:[1]}]]],["p-e2c40f4e",[[262,"af-card",{backgroundImage:[1,"background-image"],backgroundColor:[1,"background-color"],darkOverlay:[4,"dark-overlay"]}]]],["p-e56182e4",[[257,"af-client-carousel",{showHeadline:[4,"show-headline"],headlineText:[1,"headline-text"]}]]],["p-23aedaa4",[[257,"af-color-swatch",{color:[1],name:[1],size:[1]}]]],["p-56a15842",[[257,"af-icon-button",{variant:[1],size:[1],disabled:[4],href:[1],type:[1],ariaLabel:[1,"aria-label"]}]]],["p-13c30dd8",[[257,"af-logo-well"]]],["p-f6f2f1c4",[[262,"af-testimonial",{backgroundImage:[1,"background-image"],logoImage:[1,"logo-image"],quote:[1],attribution:[1],readMoreLink:[1,"read-more-link"]}]]],["p-0fb55acf",[[262,"af-testimonial-carousel",{currentIndex:[32],isAnimating:[32],testimonialCount:[32]}]]],["p-46edc753",[[258,"af-testimonial-stat",{value:[1],description:[1],accentBorder:[4,"accent-border"]}]]],["p-cb10e4ca",[[257,"af-typography-lockup",{headingSize:[2,"heading-size"],breakpoint:[1],textAlignment:[1,"text-alignment"],buttonAlignment:[1,"button-alignment"],maxWidth:[2,"max-width"]}]]],["p-430127fa",[[257,"af-container",{maxWidth:[1,"max-width"]}]]]],a)}));
|
|
2
2
|
//# sourceMappingURL=affinda.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{af_heading as AfHeading,af_logo as AfLogo,af_nav_item as AfNavItem,af_navbar as AfNavbar,af_text as AfText}from"./p-10288f13.entry.js";export{af_color_swatch as AfColorSwatch}from"./p-23aedaa4.entry.js";export{af_container as AfContainer}from"./p-430127fa.entry.js";export{af_aspect_ratio as AfAspectRatio}from"./p-39e917eb.entry.js";export{af_button as AfButton}from"./p-45d0f3e3.entry.js";export{af_icon_button as AfIconButton}from"./p-56a15842.entry.js";export{af_button_group as AfButtonGroup}from"./p-867c5141.entry.js";export{af_typography_lockup as AfTypographyLockup}from"./p-
|
|
1
|
+
export{af_heading as AfHeading,af_logo as AfLogo,af_nav_item as AfNavItem,af_navbar as AfNavbar,af_text as AfText}from"./p-10288f13.entry.js";export{af_color_swatch as AfColorSwatch}from"./p-23aedaa4.entry.js";export{af_container as AfContainer}from"./p-430127fa.entry.js";export{af_aspect_ratio as AfAspectRatio}from"./p-39e917eb.entry.js";export{af_button as AfButton}from"./p-45d0f3e3.entry.js";export{af_icon_button as AfIconButton}from"./p-56a15842.entry.js";export{af_button_group as AfButtonGroup}from"./p-867c5141.entry.js";export{af_typography_lockup as AfTypographyLockup}from"./p-cb10e4ca.entry.js";import"./p-Agei6ZJQ.js";
|
|
2
2
|
//# sourceMappingURL=index.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as a,h as c,H as s}from"./p-Agei6ZJQ.js";const o='.sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.bg-white.sc-af-section{background-color:var(--colour-background-white, #FFFFFF)}.bg-level1.sc-af-section{background-color:var(--colour-background-level-1, #E8EEED)}.bg-dark.sc-af-section,.bg-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B);--colour-typography-heading-primary:var(--colour-brand-mist-green, #C6D5D1);--colour-typography-body-default:var(--colour-brand-mist-green, #C6D5D1)}.bg-dark.sc-af-section af-heading.sc-af-section::part(base),.bg-dark.sc-af-section af-heading.sc-af-section [part~="base"],.bg-inkwell.sc-af-section af-heading.sc-af-section::part(base),.bg-inkwell.sc-af-section af-heading.sc-af-section [part~="base"]{color:var(--colour-brand-mist-green, #C6D5D1)}.bg-dark.sc-af-section af-text.sc-af-section::part(base),.bg-dark.sc-af-section af-text.sc-af-section [part~="base"],.bg-inkwell.sc-af-section af-text.sc-af-section::part(base),.bg-inkwell.sc-af-section af-text.sc-af-section [part~="base"]{color:var(--colour-brand-mist-green, #C6D5D1);opacity:0.92}.bg-dark.sc-af-section af-typography-lockup.sc-af-section::part(heading),.bg-dark.sc-af-section af-typography-lockup.sc-af-section [part~="heading"],.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section::part(heading),.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section [part~="heading"],.bg-dark.sc-af-section af-typography-lockup.sc-af-section::part(body),.bg-dark.sc-af-section af-typography-lockup.sc-af-section [part~="body"],.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section::part(body),.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section [part~="body"]{color:var(--colour-brand-mist-green, #C6D5D1)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}';const e=class{constructor(c){a(this,c);this.padding="default";this.background="white";this.container=true}render(){const a=c("slot",{key:"269517d1852d1e459db9dc2673b88b4d8042f61b"});return c(s,{key:"a080f296f2f7178db29e973cce05048847e66c83"},c("div",{key:"54bdca28715bdd18e38d85e2ed95a5699f793d3e",class:`section padding-${this.padding} bg-${this.background}`},this.container?c("af-container",null,a):a))}};e.style=o;export{e as af_section};
|
|
2
|
+
//# sourceMappingURL=p-2c0d7eb7.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","h","Host","afSectionCss","AfSection","constructor","hostRef","this","padding","background","container","render","content","key","class","style"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAe
|
|
1
|
+
{"version":3,"names":["registerInstance","h","Host","afSectionCss","AfSection","constructor","hostRef","this","padding","background","container","render","content","key","class","style"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAe,2gEAErB,MAAMC,EAAY,MACd,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GAEvBC,KAAKC,QAAU,UAEfD,KAAKE,WAAa,QAElBF,KAAKG,UAAY,IACrB,CACA,MAAAC,GACI,MAAMC,EAAUX,EAAE,OAAQ,CAAEY,IAAK,6CACjC,OAAQZ,EAAEC,EAAM,CAAEW,IAAK,4CAA8CZ,EAAE,MAAO,CAAEY,IAAK,2CAA4CC,MAAO,mBAAmBP,KAAKC,cAAcD,KAAKE,cAAgBF,KAAKG,UAAaT,EAAE,eAAgB,KAAMW,GAAYA,GAC7P,GAEJR,EAAUW,MAAQZ,SAETC","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as t,H as i}from"./p-Agei6ZJQ.js";const n=":host{display:block}.lockup{display:flex;flex-direction:column;gap:40px}.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;gap:16px;width:100%}.heading{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;color:var(--typography-heading-primary, #14343B);line-height:1;white-space:pre-wrap}.breakpoint-desktop.heading-1 .heading{font-size:56px;letter-spacing:-1.12px}.breakpoint-desktop.heading-2 .heading{font-size:44px;letter-spacing:-0.88px}.breakpoint-desktop.heading-3 .heading{font-size:34px;letter-spacing:-0.68px}.breakpoint-desktop.heading-4 .heading{font-size:24px;letter-spacing:-0.48px;line-height:1.2}.breakpoint-desktop.heading-5 .heading{font-size:20px;letter-spacing:-0.4px;line-height:1.2}.breakpoint-mobile.heading-1 .heading{font-size:38px;letter-spacing:-0.76px}.breakpoint-mobile.heading-2 .heading{font-size:32px;letter-spacing:-0.64px}.breakpoint-mobile.heading-3 .heading{font-size:25px;letter-spacing:-0.5px}.breakpoint-mobile.heading-4 .heading{font-size:20px;letter-spacing:-0.4px;line-height:1.1}.breakpoint-mobile.heading-5 .heading{font-size:18px;letter-spacing:-0.36px;line-height:1.1}.description{font-family:'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;font-size:18px;font-weight:400;line-height:26px;color:var(--typography-body-default, #2B484F);white-space:pre-wrap}.description:empty{display:none}.buttons{display:flex;gap: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:16px}.text-left.button-horizontal .copy{flex:1 0 0;max-width:950px}.text-left.button-horizontal .buttons{flex-shrink:0}.button-vertical .buttons{flex-direction:row;align-items:flex-start}.text-center.button-vertical .buttons{align-items:center}.text-center .copy{max-width:840px}::slotted(*){margin:0}";const a=class{constructor(t){e(this,t);this.headingSize=2;this.breakpoint="desktop";this.textAlignment="left";this.buttonAlignment="vertical"}render(){const e={lockup:true,[`text-${this.textAlignment}`]:true,[`button-${this.buttonAlignment}`]:true};const n={copy:true,[`heading-${this.headingSize}`]:true,[`breakpoint-${this.breakpoint}`]:true};const a=this.maxWidth?{maxWidth:`${this.maxWidth}px`}:{};return t(i,{key:"108f59f3983487b19e059fa0f9c9c33cfb9b47ba"},t("div",{key:"4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0",class:e},t("div",{key:"3a472b7ccfe7192ca9f2867e91b366469c030442",class:n,style:a},t("div",{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,h as t,H as i}from"./p-Agei6ZJQ.js";const n=":host{display:block}.lockup{display:flex;flex-direction:column;gap:40px}.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;gap:16px;width:100%}.heading{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:400;color:var(--typography-heading-primary, #14343B);line-height:1;white-space:pre-wrap}.breakpoint-desktop.heading-1 .heading{font-size:56px;letter-spacing:-1.12px}.breakpoint-desktop.heading-2 .heading{font-size:44px;letter-spacing:-0.88px}.breakpoint-desktop.heading-3 .heading{font-size:34px;letter-spacing:-0.68px}.breakpoint-desktop.heading-4 .heading{font-size:24px;letter-spacing:-0.48px;line-height:1.2}.breakpoint-desktop.heading-5 .heading{font-size:20px;letter-spacing:-0.4px;line-height:1.2}.breakpoint-mobile.heading-1 .heading{font-size:38px;letter-spacing:-0.76px}.breakpoint-mobile.heading-2 .heading{font-size:32px;letter-spacing:-0.64px}.breakpoint-mobile.heading-3 .heading{font-size:25px;letter-spacing:-0.5px}.breakpoint-mobile.heading-4 .heading{font-size:20px;letter-spacing:-0.4px;line-height:1.1}.breakpoint-mobile.heading-5 .heading{font-size:18px;letter-spacing:-0.36px;line-height:1.1}.description{font-family:'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;font-size:18px;font-weight:400;line-height:26px;color:var(--typography-body-default, #2B484F);white-space:pre-wrap}.description:empty{display:none}.buttons{display:flex;gap: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:16px}.text-left.button-horizontal .copy{flex:1 0 0;max-width:950px}.text-left.button-horizontal .buttons{flex-shrink:0}.button-vertical .buttons{flex-direction:row;align-items:flex-start}.text-center.button-vertical .buttons{align-items:center}.text-center .copy{max-width:840px}::slotted(*){margin:0}";const a=class{constructor(t){e(this,t);this.headingSize=2;this.breakpoint="desktop";this.textAlignment="left";this.buttonAlignment="vertical"}render(){const e={lockup:true,[`text-${this.textAlignment}`]:true,[`button-${this.buttonAlignment}`]:true};const n={copy:true,[`heading-${this.headingSize}`]:true,[`breakpoint-${this.breakpoint}`]:true};const a=this.maxWidth?{maxWidth:`${this.maxWidth}px`}:{};return t(i,{key:"108f59f3983487b19e059fa0f9c9c33cfb9b47ba"},t("div",{key:"4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0",class:e},t("div",{key:"3a472b7ccfe7192ca9f2867e91b366469c030442",class:n,style:a},t("div",{key:"8c7d108f085b2cbd27253965f4a9c627898d52a0",class:"heading",part:"heading"},t("slot",{key:"ab0da917969c74802ad29a2e9fc40e2be2087efb"})),t("div",{key:"d9103dc4580284fec67022b0e8511b9c7beb4cc8",class:"description",part:"body"},t("slot",{key:"266b6b74ce3277f89bc6d3d8531774f02dd9c6cd",name:"description"}))),t("div",{key:"a0e91aa0cfca5d40f76049312541bf230bb8c9ab",class:"buttons",part:"buttons"},t("slot",{key:"a3f390bd122655d461cb39687cf9acb3a08b8453",name:"buttons"}))))}};a.style=n;export{a as af_typography_lockup};
|
|
2
|
+
//# sourceMappingURL=p-cb10e4ca.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["registerInstance","h","Host","afTypographyLockupCss","AfTypographyLockup","constructor","hostRef","this","headingSize","breakpoint","textAlignment","buttonAlignment","render","containerClasses","lockup","copyClasses","copy","copyStyle","maxWidth","key","class","style","part","name"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAwB,+jEAE9B,MAAMC,EAAqB,MACvB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GAIvBC,KAAKC,YAAc,EAInBD,KAAKE,WAAa,UAIlBF,KAAKG,cAAgB,OAIrBH,KAAKI,gBAAkB,UAC3B,CACA,MAAAC,GACI,MAAMC,EAAmB,CACrBC,OAAU,KACV,CAAC,QAAQP,KAAKG,iBAAkB,KAChC,CAAC,UAAUH,KAAKI,mBAAoB,MAExC,MAAMI,EAAc,CAChBC,KAAQ,KACR,CAAC,WAAWT,KAAKC,eAAgB,KACjC,CAAC,cAAcD,KAAKE,cAAe,MAEvC,MAAMQ,EAAYV,KAAKW,SAAW,CAAEA,SAAU,GAAGX,KAAKW,cAAiB,CAAC,EACxE,OAAQjB,EAAEC,EAAM,CAAEiB,IAAK,4CAA8ClB,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAOP,GAAoBZ,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAOL,EAAaM,MAAOJ,GAAahB,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAO,UAAWE,KAAM,WAAarB,EAAE,OAAQ,CAAEkB,IAAK,8CAAgDlB,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAO,cAAeE,KAAM,QAAUrB,EAAE,OAAQ,CAAEkB,IAAK,2CAA4CI,KAAM,kBAAoBtB,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAO,UAAWE,KAAM,WAAarB,EAAE,OAAQ,CAAEkB,IAAK,2CAA4CI,KAAM,cACnwB,GAEJnB,EAAmBiB,MAAQlB,SAElBC","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as o,H as t}from"./p-Agei6ZJQ.js";const i=".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 a=class{constructor(o){e(this,o);this.variant="dark";this.withDecoration=false;this.minHeight="60vh"}render(){return o(t,{key:"85061979e5f4d2a766574cbc355e2f833160050b"},o("div",{key:"f0c1f36c7f5f241d5a3ce590a2eff5b5e9c6f3bc",class:`hero-section variant-${this.variant}`,style:{minHeight:this.minHeight}},this.withDecoration&&o("div",{key:"4a680dcbb970ea9c31fdcd1d4e16ec9b43e859b6",class:"hero-decoration"},o("slot",{key:"f8c629d60b6fbb0627e0720967bbc5bfeecbfecd",name:"decoration"})),o("af-container",{key:"07ed025ef1b11880896a0ca72916592f4b36dddf"},o("div",{key:"dbe586394c6e10ed672d12326e21832376661ed1",class:"hero-content"},o("slot",{key:"d3906e6fd0bdb1439df2c4e6b48e090472bcc2e5"})))))}};a.style=i;export{a as af_hero_section};
|
|
2
|
+
//# sourceMappingURL=p-e69c34f1.entry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","h","Host","afHeroSectionCss","AfHeroSection","constructor","hostRef","this","variant","withDecoration","minHeight","render","key","class","style","name"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAmB,
|
|
1
|
+
{"version":3,"names":["registerInstance","h","Host","afHeroSectionCss","AfHeroSection","constructor","hostRef","this","variant","withDecoration","minHeight","render","key","class","style","name"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAmB,+rCAEzB,MAAMC,EAAgB,MAClB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GAEvBC,KAAKC,QAAU,OAEfD,KAAKE,eAAiB,MAEtBF,KAAKG,UAAY,MACrB,CACA,MAAAC,GACI,OAAQV,EAAEC,EAAM,CAAEU,IAAK,4CAA8CX,EAAE,MAAO,CAAEW,IAAK,2CAA4CC,MAAO,wBAAwBN,KAAKC,UAAWM,MAAO,CAAEJ,UAAWH,KAAKG,YAAeH,KAAKE,gBAAmBR,EAAE,MAAO,CAAEW,IAAK,2CAA4CC,MAAO,mBAAqBZ,EAAE,OAAQ,CAAEW,IAAK,2CAA4CG,KAAM,gBAAmBd,EAAE,eAAgB,CAAEW,IAAK,4CAA8CX,EAAE,MAAO,CAAEW,IAAK,2CAA4CC,MAAO,gBAAkBZ,EAAE,OAAQ,CAAEW,IAAK,gDAC/kB,GAEJR,EAAcU,MAAQX,SAEbC","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-D_ItFcqt.js');
|
|
4
4
|
|
|
5
|
-
const afHeroSectionCss = ".sc-af-hero-section-h{display:block;width:100%}.hero-section.sc-af-hero-section{width:100%;padding-top:clamp(
|
|
5
|
+
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}}";
|
|
6
6
|
|
|
7
7
|
const AfHeroSection = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-hero-section.entry.cjs.js","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(
|
|
1
|
+
{"version":3,"file":"af-hero-section.entry.cjs.js","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,8rCAA8rC;;MCW1sC,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,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,KAClBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ,CAC3B,CACP,EACDA,OAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACEA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACO,CACX,CACD;;;;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-D_ItFcqt.js');
|
|
4
4
|
|
|
5
|
-
const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.bg-white.sc-af-section{background-color:var(--colour-background-white, #FFFFFF)}.bg-level1.sc-af-section{background-color:var(--colour-background-level-1, #E8EEED)}.bg-dark.sc-af-section,.bg-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";
|
|
5
|
+
const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.bg-white.sc-af-section{background-color:var(--colour-background-white, #FFFFFF)}.bg-level1.sc-af-section{background-color:var(--colour-background-level-1, #E8EEED)}.bg-dark.sc-af-section,.bg-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B);--colour-typography-heading-primary:var(--colour-brand-mist-green, #C6D5D1);--colour-typography-body-default:var(--colour-brand-mist-green, #C6D5D1)}.bg-dark.sc-af-section af-heading.sc-af-section::part(base),.bg-dark.sc-af-section af-heading.sc-af-section [part~=\"base\"],.bg-inkwell.sc-af-section af-heading.sc-af-section::part(base),.bg-inkwell.sc-af-section af-heading.sc-af-section [part~=\"base\"]{color:var(--colour-brand-mist-green, #C6D5D1)}.bg-dark.sc-af-section af-text.sc-af-section::part(base),.bg-dark.sc-af-section af-text.sc-af-section [part~=\"base\"],.bg-inkwell.sc-af-section af-text.sc-af-section::part(base),.bg-inkwell.sc-af-section af-text.sc-af-section [part~=\"base\"]{color:var(--colour-brand-mist-green, #C6D5D1);opacity:0.92}.bg-dark.sc-af-section af-typography-lockup.sc-af-section::part(heading),.bg-dark.sc-af-section af-typography-lockup.sc-af-section [part~=\"heading\"],.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section::part(heading),.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section [part~=\"heading\"],.bg-dark.sc-af-section af-typography-lockup.sc-af-section::part(body),.bg-dark.sc-af-section af-typography-lockup.sc-af-section [part~=\"body\"],.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section::part(body),.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section [part~=\"body\"]{color:var(--colour-brand-mist-green, #C6D5D1)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";
|
|
6
6
|
|
|
7
7
|
const AfSection = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-section.entry.cjs.js","sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.section {\n width: 100%;\n position: relative;\n}\n\n/* Padding variants */\n.padding-tight {\n padding: 48px 0;\n}\n\n.padding-default {\n padding: 96px 0;\n}\n\n.padding-loose {\n padding: 120px 0 96px;\n}\n\n/* Background variants */\n.bg-white {\n background-color: var(--colour-background-white, #FFFFFF);\n}\n\n.bg-level1 {\n background-color: var(--colour-background-level-1, #E8EEED);\n}\n\n.bg-dark,\n.bg-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n .padding-tight {\n padding: 32px 0;\n }\n \n .padding-default {\n padding: 64px 0;\n }\n \n .padding-loose {\n padding: 80px 0 64px;\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds\n */\n@Component({\n tag: 'af-section',\n styleUrl: 'af-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSection {\n /** Padding variant */\n @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n \n /** Background color */\n @Prop() background: 'white' | 'level1' | 'dark' | 'inkwell' = 'white';\n \n /** Whether to include a Container wrapper */\n @Prop() container: boolean = true;\n\n render() {\n const content = <slot></slot>;\n \n return (\n <Host>\n <div class={`section padding-${this.padding} bg-${this.background}`}>\n {this.container ? (\n <af-container>{content}</af-container>\n ) : content}\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,
|
|
1
|
+
{"version":3,"file":"af-section.entry.cjs.js","sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.section {\n width: 100%;\n position: relative;\n}\n\n/* Padding variants */\n.padding-tight {\n padding: 48px 0;\n}\n\n.padding-default {\n padding: 96px 0;\n}\n\n.padding-loose {\n padding: 120px 0 96px;\n}\n\n/* Background variants */\n.bg-white {\n background-color: var(--colour-background-white, #FFFFFF);\n}\n\n.bg-level1 {\n background-color: var(--colour-background-level-1, #E8EEED);\n}\n\n.bg-dark,\n.bg-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --colour-typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);\n --colour-typography-body-default: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n/* Automatic contrast overrides for dark sections */\n.bg-dark af-heading::part(base),\n.bg-inkwell af-heading::part(base) {\n color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.bg-dark af-text::part(base),\n.bg-inkwell af-text::part(base) {\n color: var(--colour-brand-mist-green, #C6D5D1);\n opacity: 0.92;\n}\n\n.bg-dark af-typography-lockup::part(heading),\n.bg-inkwell af-typography-lockup::part(heading),\n.bg-dark af-typography-lockup::part(body),\n.bg-inkwell af-typography-lockup::part(body) {\n color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n .padding-tight {\n padding: 32px 0;\n }\n \n .padding-default {\n padding: 64px 0;\n }\n \n .padding-loose {\n padding: 80px 0 64px;\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds\n */\n@Component({\n tag: 'af-section',\n styleUrl: 'af-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSection {\n /** Padding variant */\n @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n \n /** Background color */\n @Prop() background: 'white' | 'level1' | 'dark' | 'inkwell' = 'white';\n \n /** Whether to include a Container wrapper */\n @Prop() container: boolean = true;\n\n render() {\n const content = <slot></slot>;\n \n return (\n <Host>\n <div class={`section padding-${this.padding} bg-${this.background}`}>\n {this.container ? (\n <af-container>{content}</af-container>\n ) : content}\n </div>\n </Host>\n );\n }\n}\n\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,0hEAA0hE;;MCWliE,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAkC,SAAS;;AAGlD,QAAA,IAAU,CAAA,UAAA,GAA4C,OAAO;;AAG7D,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAGA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;QAE7B,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,OAAO,CAAO,IAAA,EAAA,IAAI,CAAC,UAAU,CAAA,CAAE,EAAA,EAChE,IAAI,CAAC,SAAS,IACbA,OAAe,CAAA,cAAA,EAAA,IAAA,EAAA,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;"}
|
|
@@ -36,7 +36,7 @@ const AfTypographyLockup = class {
|
|
|
36
36
|
[`breakpoint-${this.breakpoint}`]: true
|
|
37
37
|
};
|
|
38
38
|
const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
|
|
39
|
-
return (index.h(index.Host, { key: '108f59f3983487b19e059fa0f9c9c33cfb9b47ba' }, index.h("div", { key: '4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0', class: containerClasses }, index.h("div", { key: '3a472b7ccfe7192ca9f2867e91b366469c030442', class: copyClasses, style: copyStyle }, index.h("div", { key: '
|
|
39
|
+
return (index.h(index.Host, { key: '108f59f3983487b19e059fa0f9c9c33cfb9b47ba' }, index.h("div", { key: '4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0', class: containerClasses }, index.h("div", { key: '3a472b7ccfe7192ca9f2867e91b366469c030442', class: copyClasses, style: copyStyle }, index.h("div", { key: '8c7d108f085b2cbd27253965f4a9c627898d52a0', class: "heading", part: "heading" }, index.h("slot", { key: 'ab0da917969c74802ad29a2e9fc40e2be2087efb' })), index.h("div", { key: 'd9103dc4580284fec67022b0e8511b9c7beb4cc8', class: "description", part: "body" }, index.h("slot", { key: '266b6b74ce3277f89bc6d3d8531774f02dd9c6cd', name: "description" }))), index.h("div", { key: 'a0e91aa0cfca5d40f76049312541bf230bb8c9ab', class: "buttons", part: "buttons" }, index.h("slot", { key: 'a3f390bd122655d461cb39687cf9acb3a08b8453', name: "buttons" })))));
|
|
40
40
|
}
|
|
41
41
|
};
|
|
42
42
|
AfTypographyLockup.style = afTypographyLockupCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-typography-lockup.entry.cjs.js","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 gap: 40px;\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 */\n.copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n}\n\n/* Heading styles */\n.heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n color: var(--typography-heading-primary, #14343B);\n line-height: 1;\n white-space: pre-wrap;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n font-size: 56px;\n letter-spacing: -1.12px;\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: 44px;\n letter-spacing: -0.88px;\n}\n\n.breakpoint-desktop.heading-3 .heading {\n font-size: 34px;\n letter-spacing: -0.68px;\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: 24px;\n letter-spacing: -0.48px;\n line-height: 1.2;\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.2;\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n font-size: 38px;\n letter-spacing: -0.76px;\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: 25px;\n letter-spacing: -0.5px;\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.1;\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: 18px;\n letter-spacing: -0.36px;\n line-height: 1.1;\n}\n\n/* Description/body text */\n.description {\n font-family: 'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;\n font-size: 18px;\n font-weight: 400;\n line-height: 26px;\n color: var(--typography-body-default, #2B484F);\n white-space: pre-wrap;\n}\n\n.description:empty {\n display: none;\n}\n\n/* Buttons section */\n.buttons {\n display: flex;\n gap: 12px;\n}\n\n.buttons:empty {\n display: none;\n}\n\n/* Button alignment - horizontal */\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: 16px;\n}\n\n.text-left.button-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\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 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 };\n\n const copyClasses = {\n 'copy': true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: 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\">\n <slot></slot>\n </div>\n <div class=\"description\">\n <slot name=\"description\"></slot>\n </div>\n </div>\n <div class=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,8jEAA8jE;;MCO/kE,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,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;SACrC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,QAAQ,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAA,EAAA,CAAI,EAAE,GAAG,EAAE;AAEzE,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAA,EACvCA,
|
|
1
|
+
{"version":3,"file":"af-typography-lockup.entry.cjs.js","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 gap: 40px;\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 */\n.copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n}\n\n/* Heading styles */\n.heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n color: var(--typography-heading-primary, #14343B);\n line-height: 1;\n white-space: pre-wrap;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n font-size: 56px;\n letter-spacing: -1.12px;\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: 44px;\n letter-spacing: -0.88px;\n}\n\n.breakpoint-desktop.heading-3 .heading {\n font-size: 34px;\n letter-spacing: -0.68px;\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: 24px;\n letter-spacing: -0.48px;\n line-height: 1.2;\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.2;\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n font-size: 38px;\n letter-spacing: -0.76px;\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: 25px;\n letter-spacing: -0.5px;\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.1;\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: 18px;\n letter-spacing: -0.36px;\n line-height: 1.1;\n}\n\n/* Description/body text */\n.description {\n font-family: 'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;\n font-size: 18px;\n font-weight: 400;\n line-height: 26px;\n color: var(--typography-body-default, #2B484F);\n white-space: pre-wrap;\n}\n\n.description:empty {\n display: none;\n}\n\n/* Buttons section */\n.buttons {\n display: flex;\n gap: 12px;\n}\n\n.buttons:empty {\n display: none;\n}\n\n/* Button alignment - horizontal */\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: 16px;\n}\n\n.text-left.button-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\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 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 };\n\n const copyClasses = {\n 'copy': true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: 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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,8jEAA8jE;;MCO/kE,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,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;SACrC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,EAAE,QAAQ,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAA,EAAA,CAAI,EAAE,GAAG,EAAE;AAEzE,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,gBAAgB,EAAA,EAC1BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAA,EACvCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAA,EAClCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC5B,CACF,EACNA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,CACF,CACD;;;;;;;"}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
.hero-section {
|
|
7
7
|
width: 100%;
|
|
8
|
-
padding-top: clamp(
|
|
8
|
+
padding-top: clamp(6rem, 12vh, 8rem);
|
|
9
9
|
padding-bottom: clamp(3rem, 8vh, 5rem);
|
|
10
10
|
display: flex;
|
|
11
11
|
align-items: center;
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
|
|
46
46
|
.hero-decoration ::slotted(*) {
|
|
47
47
|
position: absolute !important;
|
|
48
|
-
bottom: -
|
|
49
|
-
right: -
|
|
48
|
+
bottom: -440px;
|
|
49
|
+
right: -1200px;
|
|
50
50
|
width: 1250px;
|
|
51
51
|
height: 820px;
|
|
52
52
|
opacity: 0.5;
|
|
@@ -33,6 +33,27 @@
|
|
|
33
33
|
.bg-dark,
|
|
34
34
|
.bg-inkwell {
|
|
35
35
|
background-color: var(--colour-brand-inkwell, #14343B);
|
|
36
|
+
--colour-typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);
|
|
37
|
+
--colour-typography-body-default: var(--colour-brand-mist-green, #C6D5D1);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Automatic contrast overrides for dark sections */
|
|
41
|
+
.bg-dark af-heading::part(base),
|
|
42
|
+
.bg-inkwell af-heading::part(base) {
|
|
43
|
+
color: var(--colour-brand-mist-green, #C6D5D1);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.bg-dark af-text::part(base),
|
|
47
|
+
.bg-inkwell af-text::part(base) {
|
|
48
|
+
color: var(--colour-brand-mist-green, #C6D5D1);
|
|
49
|
+
opacity: 0.92;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.bg-dark af-typography-lockup::part(heading),
|
|
53
|
+
.bg-inkwell af-typography-lockup::part(heading),
|
|
54
|
+
.bg-dark af-typography-lockup::part(body),
|
|
55
|
+
.bg-inkwell af-typography-lockup::part(body) {
|
|
56
|
+
color: var(--colour-brand-mist-green, #C6D5D1);
|
|
36
57
|
}
|
|
37
58
|
|
|
38
59
|
/* Mobile adjustments */
|
|
@@ -30,7 +30,7 @@ export class AfTypographyLockup {
|
|
|
30
30
|
[`breakpoint-${this.breakpoint}`]: true
|
|
31
31
|
};
|
|
32
32
|
const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
|
|
33
|
-
return (h(Host, { key: '108f59f3983487b19e059fa0f9c9c33cfb9b47ba' }, h("div", { key: '4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0', class: containerClasses }, h("div", { key: '3a472b7ccfe7192ca9f2867e91b366469c030442', class: copyClasses, style: copyStyle }, h("div", { key: '
|
|
33
|
+
return (h(Host, { key: '108f59f3983487b19e059fa0f9c9c33cfb9b47ba' }, h("div", { key: '4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0', class: containerClasses }, h("div", { key: '3a472b7ccfe7192ca9f2867e91b366469c030442', class: copyClasses, style: copyStyle }, h("div", { key: '8c7d108f085b2cbd27253965f4a9c627898d52a0', class: "heading", part: "heading" }, h("slot", { key: 'ab0da917969c74802ad29a2e9fc40e2be2087efb' })), h("div", { key: 'd9103dc4580284fec67022b0e8511b9c7beb4cc8', class: "description", part: "body" }, h("slot", { key: '266b6b74ce3277f89bc6d3d8531774f02dd9c6cd', name: "description" }))), h("div", { key: 'a0e91aa0cfca5d40f76049312541bf230bb8c9ab', class: "buttons", part: "buttons" }, h("slot", { key: 'a3f390bd122655d461cb39687cf9acb3a08b8453', name: "buttons" })))));
|
|
34
34
|
}
|
|
35
35
|
static get is() { return "af-typography-lockup"; }
|
|
36
36
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-typography-lockup.js","sourceRoot":"","sources":["../../../src/components/af-typography-lockup/af-typography-lockup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,kBAAkB;IAL/B;QAME;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;QAE3C;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;WAEG;QACK,kBAAa,GAAsB,MAAM,CAAC;QAElD;;WAEG;QACK,oBAAe,GAA8B,UAAU,CAAC;KAwCjE;IAjCC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,QAAQ,EAAE,IAAI;YACd,CAAC,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;YACpC,CAAC,UAAU,IAAI,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI;SACzC,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,MAAM,EAAE,IAAI;YACZ,CAAC,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;SACxC,CAAC;QAEF,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAE1E,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS;oBACvC,4DAAK,KAAK,EAAC,SAAS;
|
|
1
|
+
{"version":3,"file":"af-typography-lockup.js","sourceRoot":"","sources":["../../../src/components/af-typography-lockup/af-typography-lockup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,kBAAkB;IAL/B;QAME;;WAEG;QACK,gBAAW,GAAsB,CAAC,CAAC;QAE3C;;WAEG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;WAEG;QACK,kBAAa,GAAsB,MAAM,CAAC;QAElD;;WAEG;QACK,oBAAe,GAA8B,UAAU,CAAC;KAwCjE;IAjCC,MAAM;QACJ,MAAM,gBAAgB,GAAG;YACvB,QAAQ,EAAE,IAAI;YACd,CAAC,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI;YACpC,CAAC,UAAU,IAAI,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI;SACzC,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,MAAM,EAAE,IAAI;YACZ,CAAC,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;SACxC,CAAC;QAEF,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAE1E,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS;oBACvC,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;wBACjC,8DAAa,CACT;oBACN,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM;wBAClC,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF;gBACN,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;oBACjC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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 };\n\n const copyClasses = {\n 'copy': true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: 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"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-CZlTvZAm.js';
|
|
2
2
|
import { d as defineCustomElement$2 } from './p-BpXkQGDQ.js';
|
|
3
3
|
|
|
4
|
-
const afHeroSectionCss = ".sc-af-hero-section-h{display:block;width:100%}.hero-section.sc-af-hero-section{width:100%;padding-top:clamp(
|
|
4
|
+
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}}";
|
|
5
5
|
|
|
6
6
|
const AfHeroSection$1 = /*@__PURE__*/ proxyCustomElement(class AfHeroSection extends H {
|
|
7
7
|
constructor(registerHost) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"af-hero-section.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG
|
|
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}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, c as Host } from './p-CZlTvZAm.js';
|
|
2
2
|
import { d as defineCustomElement$2 } from './p-BpXkQGDQ.js';
|
|
3
3
|
|
|
4
|
-
const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.bg-white.sc-af-section{background-color:var(--colour-background-white, #FFFFFF)}.bg-level1.sc-af-section{background-color:var(--colour-background-level-1, #E8EEED)}.bg-dark.sc-af-section,.bg-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";
|
|
4
|
+
const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.bg-white.sc-af-section{background-color:var(--colour-background-white, #FFFFFF)}.bg-level1.sc-af-section{background-color:var(--colour-background-level-1, #E8EEED)}.bg-dark.sc-af-section,.bg-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B);--colour-typography-heading-primary:var(--colour-brand-mist-green, #C6D5D1);--colour-typography-body-default:var(--colour-brand-mist-green, #C6D5D1)}.bg-dark.sc-af-section af-heading.sc-af-section::part(base),.bg-dark.sc-af-section af-heading.sc-af-section [part~=\"base\"],.bg-inkwell.sc-af-section af-heading.sc-af-section::part(base),.bg-inkwell.sc-af-section af-heading.sc-af-section [part~=\"base\"]{color:var(--colour-brand-mist-green, #C6D5D1)}.bg-dark.sc-af-section af-text.sc-af-section::part(base),.bg-dark.sc-af-section af-text.sc-af-section [part~=\"base\"],.bg-inkwell.sc-af-section af-text.sc-af-section::part(base),.bg-inkwell.sc-af-section af-text.sc-af-section [part~=\"base\"]{color:var(--colour-brand-mist-green, #C6D5D1);opacity:0.92}.bg-dark.sc-af-section af-typography-lockup.sc-af-section::part(heading),.bg-dark.sc-af-section af-typography-lockup.sc-af-section [part~=\"heading\"],.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section::part(heading),.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section [part~=\"heading\"],.bg-dark.sc-af-section af-typography-lockup.sc-af-section::part(body),.bg-dark.sc-af-section af-typography-lockup.sc-af-section [part~=\"body\"],.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section::part(body),.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section [part~=\"body\"]{color:var(--colour-brand-mist-green, #C6D5D1)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";
|
|
5
5
|
|
|
6
6
|
const AfSection$1 = /*@__PURE__*/ proxyCustomElement(class AfSection extends H {
|
|
7
7
|
constructor(registerHost) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"af-section.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,
|
|
1
|
+
{"file":"af-section.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,0hEAA0hE;;MCWliEA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AANtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAkC,SAAS;;AAGlD,QAAA,IAAU,CAAA,UAAA,GAA4C,OAAO;;AAG7D,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;QAE7B,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,OAAO,CAAO,IAAA,EAAA,IAAI,CAAC,UAAU,CAAA,CAAE,EAAA,EAChE,IAAI,CAAC,SAAS,IACb,CAAe,CAAA,cAAA,EAAA,IAAA,EAAA,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["AfSection","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.section {\n width: 100%;\n position: relative;\n}\n\n/* Padding variants */\n.padding-tight {\n padding: 48px 0;\n}\n\n.padding-default {\n padding: 96px 0;\n}\n\n.padding-loose {\n padding: 120px 0 96px;\n}\n\n/* Background variants */\n.bg-white {\n background-color: var(--colour-background-white, #FFFFFF);\n}\n\n.bg-level1 {\n background-color: var(--colour-background-level-1, #E8EEED);\n}\n\n.bg-dark,\n.bg-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --colour-typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);\n --colour-typography-body-default: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n/* Automatic contrast overrides for dark sections */\n.bg-dark af-heading::part(base),\n.bg-inkwell af-heading::part(base) {\n color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.bg-dark af-text::part(base),\n.bg-inkwell af-text::part(base) {\n color: var(--colour-brand-mist-green, #C6D5D1);\n opacity: 0.92;\n}\n\n.bg-dark af-typography-lockup::part(heading),\n.bg-inkwell af-typography-lockup::part(heading),\n.bg-dark af-typography-lockup::part(body),\n.bg-inkwell af-typography-lockup::part(body) {\n color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n .padding-tight {\n padding: 32px 0;\n }\n \n .padding-default {\n padding: 64px 0;\n }\n \n .padding-loose {\n padding: 80px 0 64px;\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds\n */\n@Component({\n tag: 'af-section',\n styleUrl: 'af-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSection {\n /** Padding variant */\n @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n \n /** Background color */\n @Prop() background: 'white' | 'level1' | 'dark' | 'inkwell' = 'white';\n \n /** Whether to include a Container wrapper */\n @Prop() container: boolean = true;\n\n render() {\n const content = <slot></slot>;\n \n return (\n <Host>\n <div class={`section padding-${this.padding} bg-${this.background}`}>\n {this.container ? (\n <af-container>{content}</af-container>\n ) : content}\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { A as AfTypographyLockup$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { A as AfTypographyLockup$1, d as defineCustomElement$1 } from './p-B_FOK5P6.js';
|
|
2
2
|
|
|
3
3
|
const AfTypographyLockup = AfTypographyLockup$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
package/dist/components/index.js
CHANGED
|
@@ -10,7 +10,7 @@ export { A as AfLogo } from './p-sJI0-JlJ.js';
|
|
|
10
10
|
export { A as AfButton } from './p-CcNomA2o.js';
|
|
11
11
|
export { A as AfIconButton } from './p-tFlyM2Th.js';
|
|
12
12
|
export { A as AfButtonGroup } from './p-BeQlNDyY.js';
|
|
13
|
-
export { A as AfTypographyLockup } from './p-
|
|
13
|
+
export { A as AfTypographyLockup } from './p-B_FOK5P6.js';
|
|
14
14
|
//# sourceMappingURL=index.js.map
|
|
15
15
|
|
|
16
16
|
//# sourceMappingURL=index.js.map
|
|
@@ -38,7 +38,7 @@ const AfTypographyLockup = /*@__PURE__*/ proxyCustomElement(class AfTypographyLo
|
|
|
38
38
|
[`breakpoint-${this.breakpoint}`]: true
|
|
39
39
|
};
|
|
40
40
|
const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
|
|
41
|
-
return (h(Host, { key: '108f59f3983487b19e059fa0f9c9c33cfb9b47ba' }, h("div", { key: '4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0', class: containerClasses }, h("div", { key: '3a472b7ccfe7192ca9f2867e91b366469c030442', class: copyClasses, style: copyStyle }, h("div", { key: '
|
|
41
|
+
return (h(Host, { key: '108f59f3983487b19e059fa0f9c9c33cfb9b47ba' }, h("div", { key: '4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0', class: containerClasses }, h("div", { key: '3a472b7ccfe7192ca9f2867e91b366469c030442', class: copyClasses, style: copyStyle }, h("div", { key: '8c7d108f085b2cbd27253965f4a9c627898d52a0', class: "heading", part: "heading" }, h("slot", { key: 'ab0da917969c74802ad29a2e9fc40e2be2087efb' })), h("div", { key: 'd9103dc4580284fec67022b0e8511b9c7beb4cc8', class: "description", part: "body" }, h("slot", { key: '266b6b74ce3277f89bc6d3d8531774f02dd9c6cd', name: "description" }))), h("div", { key: 'a0e91aa0cfca5d40f76049312541bf230bb8c9ab', class: "buttons", part: "buttons" }, h("slot", { key: 'a3f390bd122655d461cb39687cf9acb3a08b8453', name: "buttons" })))));
|
|
42
42
|
}
|
|
43
43
|
static get style() { return afTypographyLockupCss; }
|
|
44
44
|
}, [257, "af-typography-lockup", {
|
|
@@ -63,6 +63,6 @@ function defineCustomElement() {
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
export { AfTypographyLockup as A, defineCustomElement as d };
|
|
66
|
-
//# sourceMappingURL=p-
|
|
66
|
+
//# sourceMappingURL=p-B_FOK5P6.js.map
|
|
67
67
|
|
|
68
|
-
//# sourceMappingURL=p-
|
|
68
|
+
//# sourceMappingURL=p-B_FOK5P6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-B_FOK5P6.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,8jEAA8jE;;MCO/kE,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;SACrC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;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 gap: 40px;\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 */\n.copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n}\n\n/* Heading styles */\n.heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n color: var(--typography-heading-primary, #14343B);\n line-height: 1;\n white-space: pre-wrap;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n font-size: 56px;\n letter-spacing: -1.12px;\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: 44px;\n letter-spacing: -0.88px;\n}\n\n.breakpoint-desktop.heading-3 .heading {\n font-size: 34px;\n letter-spacing: -0.68px;\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: 24px;\n letter-spacing: -0.48px;\n line-height: 1.2;\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.2;\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n font-size: 38px;\n letter-spacing: -0.76px;\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: 25px;\n letter-spacing: -0.5px;\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.1;\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: 18px;\n letter-spacing: -0.36px;\n line-height: 1.1;\n}\n\n/* Description/body text */\n.description {\n font-family: 'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;\n font-size: 18px;\n font-weight: 400;\n line-height: 26px;\n color: var(--typography-body-default, #2B484F);\n white-space: pre-wrap;\n}\n\n.description:empty {\n display: none;\n}\n\n/* Buttons section */\n.buttons {\n display: flex;\n gap: 12px;\n}\n\n.buttons:empty {\n display: none;\n}\n\n/* Button alignment - horizontal */\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: 16px;\n}\n\n.text-left.button-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\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 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 };\n\n const copyClasses = {\n 'copy': true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: 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}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-Agei6ZJQ.js';
|
|
2
2
|
|
|
3
|
-
const afHeroSectionCss = ".sc-af-hero-section-h{display:block;width:100%}.hero-section.sc-af-hero-section{width:100%;padding-top:clamp(
|
|
3
|
+
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}}";
|
|
4
4
|
|
|
5
5
|
const AfHeroSection = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-hero-section.entry.js","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(
|
|
1
|
+
{"version":3,"file":"af-hero-section.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,8rCAA8rC;;MCW1sC,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,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;;;;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host } from './index-Agei6ZJQ.js';
|
|
2
2
|
|
|
3
|
-
const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.bg-white.sc-af-section{background-color:var(--colour-background-white, #FFFFFF)}.bg-level1.sc-af-section{background-color:var(--colour-background-level-1, #E8EEED)}.bg-dark.sc-af-section,.bg-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";
|
|
3
|
+
const afSectionCss = ".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.bg-white.sc-af-section{background-color:var(--colour-background-white, #FFFFFF)}.bg-level1.sc-af-section{background-color:var(--colour-background-level-1, #E8EEED)}.bg-dark.sc-af-section,.bg-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B);--colour-typography-heading-primary:var(--colour-brand-mist-green, #C6D5D1);--colour-typography-body-default:var(--colour-brand-mist-green, #C6D5D1)}.bg-dark.sc-af-section af-heading.sc-af-section::part(base),.bg-dark.sc-af-section af-heading.sc-af-section [part~=\"base\"],.bg-inkwell.sc-af-section af-heading.sc-af-section::part(base),.bg-inkwell.sc-af-section af-heading.sc-af-section [part~=\"base\"]{color:var(--colour-brand-mist-green, #C6D5D1)}.bg-dark.sc-af-section af-text.sc-af-section::part(base),.bg-dark.sc-af-section af-text.sc-af-section [part~=\"base\"],.bg-inkwell.sc-af-section af-text.sc-af-section::part(base),.bg-inkwell.sc-af-section af-text.sc-af-section [part~=\"base\"]{color:var(--colour-brand-mist-green, #C6D5D1);opacity:0.92}.bg-dark.sc-af-section af-typography-lockup.sc-af-section::part(heading),.bg-dark.sc-af-section af-typography-lockup.sc-af-section [part~=\"heading\"],.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section::part(heading),.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section [part~=\"heading\"],.bg-dark.sc-af-section af-typography-lockup.sc-af-section::part(body),.bg-dark.sc-af-section af-typography-lockup.sc-af-section [part~=\"body\"],.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section::part(body),.bg-inkwell.sc-af-section af-typography-lockup.sc-af-section [part~=\"body\"]{color:var(--colour-brand-mist-green, #C6D5D1)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";
|
|
4
4
|
|
|
5
5
|
const AfSection = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-section.entry.js","sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.section {\n width: 100%;\n position: relative;\n}\n\n/* Padding variants */\n.padding-tight {\n padding: 48px 0;\n}\n\n.padding-default {\n padding: 96px 0;\n}\n\n.padding-loose {\n padding: 120px 0 96px;\n}\n\n/* Background variants */\n.bg-white {\n background-color: var(--colour-background-white, #FFFFFF);\n}\n\n.bg-level1 {\n background-color: var(--colour-background-level-1, #E8EEED);\n}\n\n.bg-dark,\n.bg-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n .padding-tight {\n padding: 32px 0;\n }\n \n .padding-default {\n padding: 64px 0;\n }\n \n .padding-loose {\n padding: 80px 0 64px;\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds\n */\n@Component({\n tag: 'af-section',\n styleUrl: 'af-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSection {\n /** Padding variant */\n @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n \n /** Background color */\n @Prop() background: 'white' | 'level1' | 'dark' | 'inkwell' = 'white';\n \n /** Whether to include a Container wrapper */\n @Prop() container: boolean = true;\n\n render() {\n const content = <slot></slot>;\n \n return (\n <Host>\n <div class={`section padding-${this.padding} bg-${this.background}`}>\n {this.container ? (\n <af-container>{content}</af-container>\n ) : content}\n </div>\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,
|
|
1
|
+
{"version":3,"file":"af-section.entry.js","sources":["src/components/af-section/af-section.css?tag=af-section&encapsulation=scoped","src/components/af-section/af-section.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n.section {\n width: 100%;\n position: relative;\n}\n\n/* Padding variants */\n.padding-tight {\n padding: 48px 0;\n}\n\n.padding-default {\n padding: 96px 0;\n}\n\n.padding-loose {\n padding: 120px 0 96px;\n}\n\n/* Background variants */\n.bg-white {\n background-color: var(--colour-background-white, #FFFFFF);\n}\n\n.bg-level1 {\n background-color: var(--colour-background-level-1, #E8EEED);\n}\n\n.bg-dark,\n.bg-inkwell {\n background-color: var(--colour-brand-inkwell, #14343B);\n --colour-typography-heading-primary: var(--colour-brand-mist-green, #C6D5D1);\n --colour-typography-body-default: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n/* Automatic contrast overrides for dark sections */\n.bg-dark af-heading::part(base),\n.bg-inkwell af-heading::part(base) {\n color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.bg-dark af-text::part(base),\n.bg-inkwell af-text::part(base) {\n color: var(--colour-brand-mist-green, #C6D5D1);\n opacity: 0.92;\n}\n\n.bg-dark af-typography-lockup::part(heading),\n.bg-inkwell af-typography-lockup::part(heading),\n.bg-dark af-typography-lockup::part(body),\n.bg-inkwell af-typography-lockup::part(body) {\n color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n/* Mobile adjustments */\n@media (max-width: 768px) {\n .padding-tight {\n padding: 32px 0;\n }\n \n .padding-default {\n padding: 64px 0;\n }\n \n .padding-loose {\n padding: 80px 0 64px;\n }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Section layout component for consistent spacing and backgrounds\n */\n@Component({\n tag: 'af-section',\n styleUrl: 'af-section.css',\n shadow: false,\n scoped: true,\n})\nexport class AfSection {\n /** Padding variant */\n @Prop() padding: 'tight' | 'default' | 'loose' = 'default';\n \n /** Background color */\n @Prop() background: 'white' | 'level1' | 'dark' | 'inkwell' = 'white';\n \n /** Whether to include a Container wrapper */\n @Prop() container: boolean = true;\n\n render() {\n const content = <slot></slot>;\n \n return (\n <Host>\n <div class={`section padding-${this.padding} bg-${this.background}`}>\n {this.container ? (\n <af-container>{content}</af-container>\n ) : content}\n </div>\n </Host>\n );\n }\n}\n\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,0hEAA0hE;;MCWliE,SAAS,GAAA,MAAA;AANtB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAQU,QAAA,IAAO,CAAA,OAAA,GAAkC,SAAS;;AAGlD,QAAA,IAAU,CAAA,UAAA,GAA4C,OAAO;;AAG7D,QAAA,IAAS,CAAA,SAAA,GAAY,IAAI;AAelC;IAbC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa;QAE7B,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,OAAO,CAAO,IAAA,EAAA,IAAI,CAAC,UAAU,CAAA,CAAE,EAAA,EAChE,IAAI,CAAC,SAAS,IACb,CAAe,CAAA,cAAA,EAAA,IAAA,EAAA,OAAO,CAAgB,IACpC,OAAO,CACP,CACD;;;;;;;"}
|
|
@@ -34,7 +34,7 @@ const AfTypographyLockup = class {
|
|
|
34
34
|
[`breakpoint-${this.breakpoint}`]: true
|
|
35
35
|
};
|
|
36
36
|
const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
|
|
37
|
-
return (h(Host, { key: '108f59f3983487b19e059fa0f9c9c33cfb9b47ba' }, h("div", { key: '4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0', class: containerClasses }, h("div", { key: '3a472b7ccfe7192ca9f2867e91b366469c030442', class: copyClasses, style: copyStyle }, h("div", { key: '
|
|
37
|
+
return (h(Host, { key: '108f59f3983487b19e059fa0f9c9c33cfb9b47ba' }, h("div", { key: '4dd1ece34095b91fcf9f41355a16eb4fb4b83ef0', class: containerClasses }, h("div", { key: '3a472b7ccfe7192ca9f2867e91b366469c030442', class: copyClasses, style: copyStyle }, h("div", { key: '8c7d108f085b2cbd27253965f4a9c627898d52a0', class: "heading", part: "heading" }, h("slot", { key: 'ab0da917969c74802ad29a2e9fc40e2be2087efb' })), h("div", { key: 'd9103dc4580284fec67022b0e8511b9c7beb4cc8', class: "description", part: "body" }, h("slot", { key: '266b6b74ce3277f89bc6d3d8531774f02dd9c6cd', name: "description" }))), h("div", { key: 'a0e91aa0cfca5d40f76049312541bf230bb8c9ab', class: "buttons", part: "buttons" }, h("slot", { key: 'a3f390bd122655d461cb39687cf9acb3a08b8453', name: "buttons" })))));
|
|
38
38
|
}
|
|
39
39
|
};
|
|
40
40
|
AfTypographyLockup.style = afTypographyLockupCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"af-typography-lockup.entry.js","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 gap: 40px;\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 */\n.copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n}\n\n/* Heading styles */\n.heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n color: var(--typography-heading-primary, #14343B);\n line-height: 1;\n white-space: pre-wrap;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n font-size: 56px;\n letter-spacing: -1.12px;\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: 44px;\n letter-spacing: -0.88px;\n}\n\n.breakpoint-desktop.heading-3 .heading {\n font-size: 34px;\n letter-spacing: -0.68px;\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: 24px;\n letter-spacing: -0.48px;\n line-height: 1.2;\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.2;\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n font-size: 38px;\n letter-spacing: -0.76px;\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: 25px;\n letter-spacing: -0.5px;\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.1;\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: 18px;\n letter-spacing: -0.36px;\n line-height: 1.1;\n}\n\n/* Description/body text */\n.description {\n font-family: 'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;\n font-size: 18px;\n font-weight: 400;\n line-height: 26px;\n color: var(--typography-body-default, #2B484F);\n white-space: pre-wrap;\n}\n\n.description:empty {\n display: none;\n}\n\n/* Buttons section */\n.buttons {\n display: flex;\n gap: 12px;\n}\n\n.buttons:empty {\n display: none;\n}\n\n/* Button alignment - horizontal */\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: 16px;\n}\n\n.text-left.button-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\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 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 };\n\n const copyClasses = {\n 'copy': true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: 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\">\n <slot></slot>\n </div>\n <div class=\"description\">\n <slot name=\"description\"></slot>\n </div>\n </div>\n <div class=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,8jEAA8jE;;MCO/kE,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,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;SACrC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;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,
|
|
1
|
+
{"version":3,"file":"af-typography-lockup.entry.js","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 gap: 40px;\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 */\n.copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n}\n\n/* Heading styles */\n.heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n color: var(--typography-heading-primary, #14343B);\n line-height: 1;\n white-space: pre-wrap;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n font-size: 56px;\n letter-spacing: -1.12px;\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: 44px;\n letter-spacing: -0.88px;\n}\n\n.breakpoint-desktop.heading-3 .heading {\n font-size: 34px;\n letter-spacing: -0.68px;\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: 24px;\n letter-spacing: -0.48px;\n line-height: 1.2;\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.2;\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n font-size: 38px;\n letter-spacing: -0.76px;\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: 25px;\n letter-spacing: -0.5px;\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.1;\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: 18px;\n letter-spacing: -0.36px;\n line-height: 1.1;\n}\n\n/* Description/body text */\n.description {\n font-family: 'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;\n font-size: 18px;\n font-weight: 400;\n line-height: 26px;\n color: var(--typography-body-default, #2B484F);\n white-space: pre-wrap;\n}\n\n.description:empty {\n display: none;\n}\n\n/* Buttons section */\n.buttons {\n display: flex;\n gap: 12px;\n}\n\n.buttons:empty {\n display: none;\n}\n\n/* Button alignment - horizontal */\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: 16px;\n}\n\n.text-left.button-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\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 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 };\n\n const copyClasses = {\n 'copy': true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: 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"],"names":[],"mappings":";;AAAA,MAAM,qBAAqB,GAAG,8jEAA8jE;;MCO/kE,kBAAkB,GAAA,MAAA;AAL/B,IAAA,WAAA,CAAA,OAAA,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;SACrC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;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;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@affinda/wc",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.11",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs.js",
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
],
|
|
15
15
|
"scripts": {
|
|
16
16
|
"build": "pnpm run clean && stencil build",
|
|
17
|
+
"dev": "stencil build --dev --watch",
|
|
17
18
|
"start": "stencil build --dev --watch --serve",
|
|
18
19
|
"test": "stencil test --spec",
|
|
19
20
|
"clean": "rm -rf dist loader www"
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,h as o,H as t}from"./p-Agei6ZJQ.js";const i=".sc-af-hero-section-h{display:block;width:100%}.hero-section.sc-af-hero-section{width:100%;padding-top:clamp(2.5rem, 8vh, 4.5rem);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:-40px;right:-500px;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 a=class{constructor(o){e(this,o);this.variant="dark";this.withDecoration=false;this.minHeight="60vh"}render(){return o(t,{key:"85061979e5f4d2a766574cbc355e2f833160050b"},o("div",{key:"f0c1f36c7f5f241d5a3ce590a2eff5b5e9c6f3bc",class:`hero-section variant-${this.variant}`,style:{minHeight:this.minHeight}},this.withDecoration&&o("div",{key:"4a680dcbb970ea9c31fdcd1d4e16ec9b43e859b6",class:"hero-decoration"},o("slot",{key:"f8c629d60b6fbb0627e0720967bbc5bfeecbfecd",name:"decoration"})),o("af-container",{key:"07ed025ef1b11880896a0ca72916592f4b36dddf"},o("div",{key:"dbe586394c6e10ed672d12326e21832376661ed1",class:"hero-content"},o("slot",{key:"d3906e6fd0bdb1439df2c4e6b48e090472bcc2e5"})))))}};a.style=i;export{a as af_hero_section};
|
|
2
|
-
//# sourceMappingURL=p-0e642987.entry.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as d,h as i,H as a}from"./p-Agei6ZJQ.js";const c=".sc-af-section-h{display:block;width:100%}.section.sc-af-section{width:100%;position:relative}.padding-tight.sc-af-section{padding:48px 0}.padding-default.sc-af-section{padding:96px 0}.padding-loose.sc-af-section{padding:120px 0 96px}.bg-white.sc-af-section{background-color:var(--colour-background-white, #FFFFFF)}.bg-level1.sc-af-section{background-color:var(--colour-background-level-1, #E8EEED)}.bg-dark.sc-af-section,.bg-inkwell.sc-af-section{background-color:var(--colour-brand-inkwell, #14343B)}@media (max-width: 768px){.padding-tight.sc-af-section{padding:32px 0}.padding-default.sc-af-section{padding:64px 0}.padding-loose.sc-af-section{padding:80px 0 64px}}";const s=class{constructor(i){d(this,i);this.padding="default";this.background="white";this.container=true}render(){const d=i("slot",{key:"269517d1852d1e459db9dc2673b88b4d8042f61b"});return i(a,{key:"a080f296f2f7178db29e973cce05048847e66c83"},i("div",{key:"54bdca28715bdd18e38d85e2ed95a5699f793d3e",class:`section padding-${this.padding} bg-${this.background}`},this.container?i("af-container",null,d):d))}};s.style=c;export{s as af_section};
|
|
2
|
-
//# sourceMappingURL=p-7c115698.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["registerInstance","h","Host","afTypographyLockupCss","AfTypographyLockup","constructor","hostRef","this","headingSize","breakpoint","textAlignment","buttonAlignment","render","containerClasses","lockup","copyClasses","copy","copyStyle","maxWidth","key","class","style","name"],"sources":["0"],"mappings":"YAAcA,OAAkBC,OAAQC,MAAY,kBAEpD,MAAMC,EAAwB,+jEAE9B,MAAMC,EAAqB,MACvB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GAIvBC,KAAKC,YAAc,EAInBD,KAAKE,WAAa,UAIlBF,KAAKG,cAAgB,OAIrBH,KAAKI,gBAAkB,UAC3B,CACA,MAAAC,GACI,MAAMC,EAAmB,CACrBC,OAAU,KACV,CAAC,QAAQP,KAAKG,iBAAkB,KAChC,CAAC,UAAUH,KAAKI,mBAAoB,MAExC,MAAMI,EAAc,CAChBC,KAAQ,KACR,CAAC,WAAWT,KAAKC,eAAgB,KACjC,CAAC,cAAcD,KAAKE,cAAe,MAEvC,MAAMQ,EAAYV,KAAKW,SAAW,CAAEA,SAAU,GAAGX,KAAKW,cAAiB,CAAC,EACxE,OAAQjB,EAAEC,EAAM,CAAEiB,IAAK,4CAA8ClB,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAOP,GAAoBZ,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAOL,EAAaM,MAAOJ,GAAahB,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAO,WAAanB,EAAE,OAAQ,CAAEkB,IAAK,8CAAgDlB,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAO,eAAiBnB,EAAE,OAAQ,CAAEkB,IAAK,2CAA4CG,KAAM,kBAAoBrB,EAAE,MAAO,CAAEkB,IAAK,2CAA4CC,MAAO,WAAanB,EAAE,OAAQ,CAAEkB,IAAK,2CAA4CG,KAAM,cACntB,GAEJlB,EAAmBiB,MAAQlB,SAElBC","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"p-D4NomvK5.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,8jEAA8jE;;MCO/kE,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;SACrC;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,CAAC,WAAW,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;AACrC,YAAA,CAAC,cAAc,IAAI,CAAC,UAAU,CAAE,CAAA,GAAG;SACpC;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,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAQ,CAC5B,CACF,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,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 gap: 40px;\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 */\n.copy {\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n}\n\n/* Heading styles */\n.heading {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: 400;\n color: var(--typography-heading-primary, #14343B);\n line-height: 1;\n white-space: pre-wrap;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n font-size: 56px;\n letter-spacing: -1.12px;\n}\n\n.breakpoint-desktop.heading-2 .heading {\n font-size: 44px;\n letter-spacing: -0.88px;\n}\n\n.breakpoint-desktop.heading-3 .heading {\n font-size: 34px;\n letter-spacing: -0.68px;\n}\n\n.breakpoint-desktop.heading-4 .heading {\n font-size: 24px;\n letter-spacing: -0.48px;\n line-height: 1.2;\n}\n\n.breakpoint-desktop.heading-5 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.2;\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n font-size: 38px;\n letter-spacing: -0.76px;\n}\n\n.breakpoint-mobile.heading-2 .heading {\n font-size: 32px;\n letter-spacing: -0.64px;\n}\n\n.breakpoint-mobile.heading-3 .heading {\n font-size: 25px;\n letter-spacing: -0.5px;\n}\n\n.breakpoint-mobile.heading-4 .heading {\n font-size: 20px;\n letter-spacing: -0.4px;\n line-height: 1.1;\n}\n\n.breakpoint-mobile.heading-5 .heading {\n font-size: 18px;\n letter-spacing: -0.36px;\n line-height: 1.1;\n}\n\n/* Description/body text */\n.description {\n font-family: 'Helvetica', var(--typography-primaryfont, 'NeuSans', sans-serif), sans-serif;\n font-size: 18px;\n font-weight: 400;\n line-height: 26px;\n color: var(--typography-body-default, #2B484F);\n white-space: pre-wrap;\n}\n\n.description:empty {\n display: none;\n}\n\n/* Buttons section */\n.buttons {\n display: flex;\n gap: 12px;\n}\n\n.buttons:empty {\n display: none;\n}\n\n/* Button alignment - horizontal */\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: 16px;\n}\n\n.text-left.button-horizontal .copy {\n flex: 1 0 0;\n max-width: 950px;\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 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 };\n\n const copyClasses = {\n 'copy': true,\n [`heading-${this.headingSize}`]: true,\n [`breakpoint-${this.breakpoint}`]: 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\">\n <slot></slot>\n </div>\n <div class=\"description\">\n <slot name=\"description\"></slot>\n </div>\n </div>\n <div class=\"buttons\">\n <slot name=\"buttons\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|