@affinda/wc 0.0.15 → 0.0.17

package/dist/collection/components/af-typography-lockup/af-typography-lockup.css

@@ -5,7 +5,41 @@
 .lockup {
   display: flex;
   flex-direction: column;
-  gap: 40px;
+}
+
+/* Lockup gap variations (between copy and buttons) - matches copy internal gap */
+/* Heading 1 desktop: 24px gap */
+.breakpoint-desktop.heading-1.lockup {
+  gap: var(--space-6, 24px);
+}
+
+/* Heading 1 mobile: 20px gap */
+.breakpoint-mobile.heading-1.lockup {
+  gap: var(--space-5, 20px);
+}
+
+/* Heading 2, 3 desktop: 16px gap */
+.breakpoint-desktop.heading-2.lockup,
+.breakpoint-desktop.heading-3.lockup {
+  gap: var(--space-4, 16px);
+}
+
+/* Heading 2 mobile: 16px gap */
+.breakpoint-mobile.heading-2.lockup {
+  gap: var(--space-4, 16px);
+}
+
+/* Heading 3 mobile, 4 desktop, 5 desktop: 12px gap */
+.breakpoint-mobile.heading-3.lockup,
+.breakpoint-desktop.heading-4.lockup,
+.breakpoint-desktop.heading-5.lockup {
+  gap: var(--space-3, 12px);
+}
+
+/* Heading 4 mobile, 5 mobile: 8px gap */
+.breakpoint-mobile.heading-4.lockup,
+.breakpoint-mobile.heading-5.lockup {
+  gap: var(--space-2, 8px);
 }
 
 /* Text alignment */
@@ -29,89 +63,125 @@
   text-align: center;
 }
 
-/* Copy section */
+/* Copy section - base styles */
 .copy {
   display: flex;
   flex-direction: column;
-  gap: 16px;
   width: 100%;
+  max-width: 840px;
+}
+
+/* Copy gap variations based on heading size and breakpoint */
+/* Heading 1 desktop: 24px gap */
+.breakpoint-desktop.heading-1 .copy {
+  gap: var(--space-6, 24px);
+}
+
+/* Heading 1 mobile: 20px gap */
+.breakpoint-mobile.heading-1 .copy {
+  gap: var(--space-5, 20px);
+}
+
+/* Heading 2, 3 desktop: 16px gap */
+.breakpoint-desktop.heading-2 .copy,
+.breakpoint-desktop.heading-3 .copy {
+  gap: var(--space-4, 16px);
+}
+
+/* Heading 2 mobile: 16px gap */
+.breakpoint-mobile.heading-2 .copy {
+  gap: var(--space-4, 16px);
+}
+
+/* Heading 3 mobile, 4 desktop, 5 desktop: 12px gap */
+.breakpoint-mobile.heading-3 .copy,
+.breakpoint-desktop.heading-4 .copy,
+.breakpoint-desktop.heading-5 .copy {
+  gap: var(--space-3, 12px);
+}
+
+/* Heading 4 mobile, 5 mobile: 8px gap */
+.breakpoint-mobile.heading-4 .copy,
+.breakpoint-mobile.heading-5 .copy {
+  gap: var(--space-2, 8px);
 }
 
 /* Heading styles */
 .heading {
-  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
-  font-weight: 400;
-  color: var(--typography-heading-primary, #14343B);
-  line-height: 1;
+  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));
+  line-height: var(--line-height-heading-tight, 1);
+  letter-spacing: var(--letter-spacing-heading, -0.02em);
   white-space: pre-wrap;
 }
 
 /* Desktop heading sizes */
 .breakpoint-desktop.heading-1 .heading {
-  font-size: 56px;
-  letter-spacing: -1.12px;
+  font-size: var(--font-size-heading-1-desktop, 56px);
 }
 
 .breakpoint-desktop.heading-2 .heading {
-  font-size: 44px;
-  letter-spacing: -0.88px;
+  font-size: var(--font-size-heading-2-desktop, 44px);
 }
 
 .breakpoint-desktop.heading-3 .heading {
-  font-size: 34px;
-  letter-spacing: -0.68px;
+  font-size: var(--font-size-heading-3-desktop, 34px);
 }
 
 .breakpoint-desktop.heading-4 .heading {
-  font-size: 24px;
-  letter-spacing: -0.48px;
-  line-height: 1.2;
+  font-size: var(--font-size-heading-4-desktop, 24px);
+  line-height: var(--line-height-heading-relaxed, 1.2);
 }
 
 .breakpoint-desktop.heading-5 .heading {
-  font-size: 20px;
-  letter-spacing: -0.4px;
-  line-height: 1.2;
+  font-size: var(--font-size-heading-5-desktop, 20px);
+  line-height: var(--line-height-heading-relaxed, 1.2);
 }
 
 /* Mobile heading sizes */
 .breakpoint-mobile.heading-1 .heading {
-  font-size: 38px;
-  letter-spacing: -0.76px;
+  font-size: var(--font-size-heading-1-mobile, 38px);
 }
 
 .breakpoint-mobile.heading-2 .heading {
-  font-size: 32px;
-  letter-spacing: -0.64px;
+  font-size: var(--font-size-heading-2-mobile, 32px);
 }
 
 .breakpoint-mobile.heading-3 .heading {
-  font-size: 25px;
-  letter-spacing: -0.5px;
+  font-size: var(--font-size-heading-3-mobile, 25px);
 }
 
 .breakpoint-mobile.heading-4 .heading {
-  font-size: 20px;
-  letter-spacing: -0.4px;
-  line-height: 1.1;
+  font-size: var(--font-size-heading-4-mobile, 20px);
+  line-height: var(--line-height-heading-normal, 1.1);
 }
 
 .breakpoint-mobile.heading-5 .heading {
-  font-size: 18px;
-  letter-spacing: -0.36px;
-  line-height: 1.1;
+  font-size: var(--font-size-heading-5-mobile, 18px);
+  line-height: var(--line-height-heading-normal, 1.1);
 }
 
-/* Description/body text */
+/* Description/body text - default (body/large) */
 .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);
+  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);
+  font-size: var(--font-size-body-large, 18px);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-body-large, 26px);
+  color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));
   white-space: pre-wrap;
 }
 
+/* Description text size variations - smaller for heading 3 mobile, 4, and 5 */
+.breakpoint-mobile.heading-3 .description,
+.breakpoint-desktop.heading-4 .description,
+.breakpoint-mobile.heading-4 .description,
+.breakpoint-desktop.heading-5 .description,
+.breakpoint-mobile.heading-5 .description {
+  font-size: var(--font-size-body-medium, 16px);
+  line-height: var(--line-height-body-medium, 24px);
+}
+
 .description:empty {
   display: none;
 }
@@ -119,14 +189,14 @@
 /* Buttons section */
 .buttons {
   display: flex;
-  gap: 12px;
+  gap: var(--space-3, 12px);
 }
 
 .buttons:empty {
   display: none;
 }
 
-/* Button alignment - horizontal */
+/* Button alignment - horizontal (desktop only) */
 .button-horizontal .buttons {
   flex-direction: row;
   align-items: center;
@@ -135,7 +205,7 @@
 .text-left.button-horizontal {
   flex-direction: row;
   align-items: center;
-  gap: 16px;
+  gap: var(--space-4, 16px);
 }
 
 .text-left.button-horizontal .copy {
@@ -143,6 +213,12 @@
   max-width: 950px;
 }
 
+/* Heading 3, 4 horizontal: different max-width */
+.text-left.button-horizontal.heading-3 .copy,
+.text-left.button-horizontal.heading-4 .copy {
+  max-width: 840px;
+}
+
 .text-left.button-horizontal .buttons {
   flex-shrink: 0;
 }
@@ -154,6 +230,16 @@
 }
 
 .text-center.button-vertical .buttons {
+  justify-content: center;
+}
+
+/* Mobile button stacking - buttons stack vertically on mobile */
+.breakpoint-mobile .buttons {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.breakpoint-mobile.text-center .buttons {
   align-items: center;
 }
 

package/dist/collection/components/af-typography-lockup/af-typography-lockup.js

@@ -22,15 +22,15 @@ export class AfTypographyLockup {
         const containerClasses = {
             'lockup': true,
             [`text-${this.textAlignment}`]: true,
-            [`button-${this.buttonAlignment}`]: true
-        };
-        const copyClasses = {
-            'copy': true,
+            [`button-${this.buttonAlignment}`]: true,
             [`heading-${this.headingSize}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
+        const copyClasses = {
+            'copy': true
+        };
         const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (h(Host, { key: 'c8bc936e14d143125926e4cc03a3344911d46360' }, h("div", { key: '4c51fcb278daba5e4b8287130a1e61021750af18', class: containerClasses }, h("div", { key: '6d563b91c8b548a72f898978569bceda44a26b14', class: copyClasses, style: copyStyle }, h("div", { key: '6eb8a67a451643770caae7e1967a4d9be94548ac', class: "heading", part: "heading" }, h("slot", { key: '3dc8bdd804b8ccca68ec3f85ada6fca1560f8905' })), h("div", { key: '4e2ad38d585d392419ae8e596b6af226a48cffb1', class: "description", part: "body" }, h("slot", { key: 'f53fa56abca48a11b876368d7586a6f90bce5014', name: "description" }))), h("div", { key: 'b51f1178a58b9b48ed9ec1a76afbe09e2c78fd82', class: "buttons", part: "buttons" }, h("slot", { key: 'fb4b207a762e066f11ee3e36b570ec1c52e721f0', name: "buttons" })))));
+        return (h(Host, { key: '62d24f768270ca80fea5f47bbb98fcd51d1ce19f' }, h("div", { key: '7e4ce0a3702cd933d4c2cf902a9de7aa608d7f45', class: containerClasses }, h("div", { key: '2139a714f4c654343246ea9acc3a4158633fbea5', class: copyClasses, style: copyStyle }, h("div", { key: 'c912d098ef8ff24579a1798a04e636f3127b4142', class: "heading", part: "heading" }, h("slot", { key: '836fdd1778b706d239387845daa52fec6b38c8b8' })), h("div", { key: '4d1c9207a166aa4e717b655f8471de25bfb67c7a', class: "description", part: "body" }, h("slot", { key: 'f3d2f3fb15547ce230f868d92e14f0156d8a86b4', name: "description" }))), h("div", { key: '4567953f1da984155af2dce9f8eeda69201fd80a', class: "buttons", part: "buttons" }, h("slot", { key: 'ba914f51d04808f52deb6eb9dcecb40f9516057c', name: "buttons" })))));
     }
     static get is() { return "af-typography-lockup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-typography-lockup/af-typography-lockup.js.map

@@ -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,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"]}
+{"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;YACxC,CAAC,WAAW,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;SACxC,CAAC;QAEF,MAAM,WAAW,GAAG;YAClB,MAAM,EAAE,IAAI;SACb,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      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const copyClasses = {\n      'copy': true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class={copyClasses} style={copyStyle}>\n            <div class=\"heading\" part=\"heading\">\n              <slot></slot>\n            </div>\n            <div class=\"description\" part=\"body\">\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div class=\"buttons\" part=\"buttons\">\n            <slot name=\"buttons\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-video-container/af-video-container.css

@@ -0,0 +1,102 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.video-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: var(--space-10, 40px);
+}
+
+/* ==========================================================================
+   Top/Bottom Slots
+   These inherit theme colors from their position in the split-section
+   ========================================================================== */
+
+.video-container__top,
+.video-container__bottom {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* Hide empty slots */
+.video-container__top:empty,
+.video-container__bottom:empty {
+  display: none;
+}
+
+/* ==========================================================================
+   Video Thumbnail Section
+   ========================================================================== */
+
+.video-container__video {
+  width: 100%;
+  max-width: 1024px;
+}
+
+.video-container__thumbnail-wrapper {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radii-video-crop, 16px);
+  overflow: hidden;
+  background-color: var(--colour-inkwell-400, #2b484f);
+}
+
+.video-container__thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  position: absolute;
+  inset: 0;
+}
+
+/* ==========================================================================
+   Play Button Overlay
+   ========================================================================== */
+
+.video-container__play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  border-radius: var(--radii-button, 9999px);
+  background-color: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));
+  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));
+}
+
+.video-container__play-button:hover {
+  background-color: var(--af-button-primary-bg-hover, var(--colour-ice-600, #95e6e2));
+}
+
+.video-container__play-button:focus-visible {
+  outline: 2px solid var(--colour-brand-ice, #a6fffb);
+  outline-offset: 2px;
+}
+
+/* ==========================================================================
+   Mobile Responsive Styles
+   ========================================================================== */
+
+@media (max-width: 768px) {
+  .video-container {
+    gap: var(--space-8, 32px);
+  }
+
+  /* Smaller play button on mobile */
+  .video-container__play-button {
+    padding: 12px;
+  }
+}

package/dist/collection/components/af-video-container/af-video-container.js

@@ -0,0 +1,142 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Video Container molecule component for showcasing video content.
+ *
+ * Uses slots for typography lockups above and below the video.
+ * When used inside af-split-section, the top slot inherits the top theme
+ * and the bottom slot inherits the bottom theme for correct colors.
+ *
+ * @example
+ * ```html
+ * <af-split-section top-theme="mist-green" bottom-theme="white">
+ *   <af-video-container video-thumbnail-url="/path/to/thumbnail.jpg">
+ *     <af-typography-lockup slot="top" text-alignment="center" heading-size="2">
+ *       <af-heading level="2">Watch our product demo</af-heading>
+ *       <af-text slot="description">See how Affinda transforms your workflow</af-text>
+ *       <af-button slot="buttons" variant="primary">Get Started</af-button>
+ *     </af-typography-lockup>
+ *   </af-video-container>
+ * </af-split-section>
+ * ```
+ *
+ * @slot top - Content above the video (typically af-typography-lockup). Inherits top theme.
+ * @slot bottom - Content below the video (typically af-typography-lockup). Inherits bottom theme.
+ */
+export class AfVideoContainer {
+    constructor() {
+        /** Video thumbnail image URL */
+        this.videoThumbnailUrl = '';
+        /** Video alt text for accessibility */
+        this.videoAlt = 'Video thumbnail';
+        /** Optional video URL for play button link */
+        this.videoUrl = '';
+        /**
+         * Handles play button click - emits event and optionally opens URL
+         */
+        this.handlePlayClick = () => {
+            const event = this.playClick.emit({ videoUrl: this.videoUrl });
+            // Only open URL if event wasn't prevented and URL exists
+            if (!event.defaultPrevented && this.videoUrl) {
+                window.open(this.videoUrl, '_blank');
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: 'b31355a1ccf3cc4f9655f9c78d16f70fb104a671' }, h("div", { key: 'ebd03ff2668174d400d3d09488030d38d1a25fe8', class: "video-container" }, h("div", { key: 'af32cf3f6fec012e95d35d4224daebdfd64917b5', class: "video-container__top" }, h("slot", { key: '0258f4b6a027b09ecefd4ff6c7f2a62db6075847', name: "top" })), h("div", { key: 'fb74dae0250cfdf22b8c5503cd993ac67894276e', class: "video-container__video" }, h("af-aspect-ratio", { key: '88445a4ae1125882d3dc8fffc83fb1f880857fae', ratio: "16:9" }, h("div", { key: 'd87f8d15036026b04330e23395f95ad8363d72a3', class: "video-container__thumbnail-wrapper" }, this.videoThumbnailUrl && (h("img", { key: 'e1327574236c73cc6c5b5a7a820c3905d2307047', src: this.videoThumbnailUrl, alt: this.videoAlt, class: "video-container__thumbnail", loading: "lazy" })), h("button", { key: 'c278f6944c5d69fec242a8291655985a20a7896f', class: "video-container__play-button", onClick: this.handlePlayClick, "aria-label": "Play video", type: "button" }, h("af-icon", { key: 'df9ca50c0938d8539c7a79fb6f5bceb6326ed96c', name: "play", size: 24 }))))), h("div", { key: '3e2ba7be65431315fd3996fdadfbc45acb1be76b', class: "video-container__bottom" }, h("slot", { key: '10d64457339942b3bde412a740a66bf9665e8033', name: "bottom" })))));
+    }
+    static get is() { return "af-video-container"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-video-container.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-video-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "videoThumbnailUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Video thumbnail image URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "video-thumbnail-url",
+                "defaultValue": "''"
+            },
+            "videoAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Video alt text for accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "video-alt",
+                "defaultValue": "'Video thumbnail'"
+            },
+            "videoUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional video URL for play button link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "video-url",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "playClick",
+                "name": "playClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the play button is clicked.\nUse this to handle video playback (e.g., open modal, embed player).\nIf videoUrl is set and no handler prevents default, opens URL in new tab."
+                },
+                "complexType": {
+                    "original": "{ videoUrl: string }",
+                    "resolved": "{ videoUrl: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=af-video-container.js.map

package/dist/collection/components/af-video-container/af-video-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-video-container.js","sourceRoot":"","sources":["../../../src/components/af-video-container/af-video-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAOH,MAAM,OAAO,gBAAgB;IAN7B;QAOE,gCAAgC;QACxB,sBAAiB,GAAW,EAAE,CAAC;QAEvC,uCAAuC;QAC/B,aAAQ,GAAW,iBAAiB,CAAC;QAE7C,8CAA8C;QACtC,aAAQ,GAAW,EAAE,CAAC;QAS9B;;WAEG;QACK,oBAAe,GAAG,GAAG,EAAE;YAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YAE/D,yDAAyD;YACzD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC7C,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC;KA4CH;IA1CC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,iBAAiB;gBAE1B,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACpB;gBAGN,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,wEAAiB,KAAK,EAAC,MAAM;wBAC3B,4DAAK,KAAK,EAAC,oCAAoC;4BAC5C,IAAI,CAAC,iBAAiB,IAAI,CACzB,4DACE,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,MAAM,GACd,CACH;4BAED,+DACE,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,eAAe,gBAClB,YAAY,EACvB,IAAI,EAAC,QAAQ;gCAEb,gEAAS,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,GAAY,CAClC,CACL,CACU,CACd;gBAGN,4DAAK,KAAK,EAAC,yBAAyB;oBAClC,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Video Container molecule component for showcasing video content.\n * \n * Uses slots for typography lockups above and below the video.\n * When used inside af-split-section, the top slot inherits the top theme\n * and the bottom slot inherits the bottom theme for correct colors.\n * \n * @example\n * ```html\n * <af-split-section top-theme=\"mist-green\" bottom-theme=\"white\">\n *   <af-video-container video-thumbnail-url=\"/path/to/thumbnail.jpg\">\n *     <af-typography-lockup slot=\"top\" text-alignment=\"center\" heading-size=\"2\">\n *       <af-heading level=\"2\">Watch our product demo</af-heading>\n *       <af-text slot=\"description\">See how Affinda transforms your workflow</af-text>\n *       <af-button slot=\"buttons\" variant=\"primary\">Get Started</af-button>\n *     </af-typography-lockup>\n *   </af-video-container>\n * </af-split-section>\n * ```\n * \n * @slot top - Content above the video (typically af-typography-lockup). Inherits top theme.\n * @slot bottom - Content below the video (typically af-typography-lockup). Inherits bottom theme.\n */\n@Component({\n  tag: 'af-video-container',\n  styleUrl: 'af-video-container.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfVideoContainer {\n  /** Video thumbnail image URL */\n  @Prop() videoThumbnailUrl: string = '';\n\n  /** Video alt text for accessibility */\n  @Prop() videoAlt: string = 'Video thumbnail';\n\n  /** Optional video URL for play button link */\n  @Prop() videoUrl: string = '';\n\n  /** \n   * Emitted when the play button is clicked.\n   * Use this to handle video playback (e.g., open modal, embed player).\n   * If videoUrl is set and no handler prevents default, opens URL in new tab.\n   */\n  @Event() playClick!: EventEmitter<{ videoUrl: string }>;\n\n  /**\n   * Handles play button click - emits event and optionally opens URL\n   */\n  private handlePlayClick = () => {\n    const event = this.playClick.emit({ videoUrl: this.videoUrl });\n    \n    // Only open URL if event wasn't prevented and URL exists\n    if (!event.defaultPrevented && this.videoUrl) {\n      window.open(this.videoUrl, '_blank');\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"video-container\">\n          {/* Top slot - for typography lockup above video (inherits top theme) */}\n          <div class=\"video-container__top\">\n            <slot name=\"top\"></slot>\n          </div>\n\n          {/* Video thumbnail section */}\n          <div class=\"video-container__video\">\n            <af-aspect-ratio ratio=\"16:9\">\n              <div class=\"video-container__thumbnail-wrapper\">\n                {this.videoThumbnailUrl && (\n                  <img \n                    src={this.videoThumbnailUrl} \n                    alt={this.videoAlt}\n                    class=\"video-container__thumbnail\"\n                    loading=\"lazy\"\n                  />\n                )}\n                {/* Play button overlay */}\n                <button \n                  class=\"video-container__play-button\"\n                  onClick={this.handlePlayClick}\n                  aria-label=\"Play video\"\n                  type=\"button\"\n                >\n                  <af-icon name=\"play\" size={24}></af-icon>\n                </button>\n              </div>\n            </af-aspect-ratio>\n          </div>\n\n          {/* Bottom slot - for typography lockup below video (inherits bottom theme) */}\n          <div class=\"video-container__bottom\">\n            <slot name=\"bottom\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components.js

@@ -10,4 +10,15 @@ export { AfButton } from './components/af-button/af-button';
 export { AfIconButton } from './components/af-icon-button/af-icon-button';
 export { AfButtonGroup } from './components/af-button-group/af-button-group';
 export { AfTypographyLockup } from './components/af-typography-lockup/af-typography-lockup';
+export { AfCheckbox } from './components/af-checkbox/af-checkbox';
+export { AfRadio } from './components/af-radio/af-radio';
+export { AfSwitch } from './components/af-switch/af-switch';
+export { AfFieldset } from './components/af-fieldset/af-fieldset';
+export { AfInput } from './components/af-input/af-input';
+export { AfTextarea } from './components/af-textarea/af-textarea';
+export { AfTag } from './components/af-tag/af-tag';
+export { AfTab } from './components/af-tab/af-tab';
+export { AfTabBar } from './components/af-tab-bar/af-tab-bar';
+export { AfFeatureCard } from './components/af-feature-card/af-feature-card';
+export { AfIllustratedCard } from './components/af-illustrated-card/af-illustrated-card';
 //# sourceMappingURL=components.js.map

package/dist/collection/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC","sourcesContent":["export { AfHeading } from './components/af-heading/af-heading';\nexport { AfText } from './components/af-text/af-text';\nexport { AfColorSwatch } from './components/af-color-swatch/af-color-swatch';\nexport { AfContainer } from './components/af-container/af-container';\nexport { AfAspectRatio } from './components/af-aspect-ratio/af-aspect-ratio';\nexport { AfNavItem } from './components/af-nav-item/af-nav-item';\nexport { AfNavbar } from './components/af-navbar/af-navbar';\nexport { AfLogo } from './components/af-logo/af-logo';\nexport { AfButton } from './components/af-button/af-button';\nexport { AfIconButton } from './components/af-icon-button/af-icon-button';\nexport { AfButtonGroup } from './components/af-button-group/af-button-group';\nexport { AfTypographyLockup } from './components/af-typography-lockup/af-typography-lockup';\n"]}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAC5F,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,sDAAsD,CAAC","sourcesContent":["export { AfHeading } from './components/af-heading/af-heading';\nexport { AfText } from './components/af-text/af-text';\nexport { AfColorSwatch } from './components/af-color-swatch/af-color-swatch';\nexport { AfContainer } from './components/af-container/af-container';\nexport { AfAspectRatio } from './components/af-aspect-ratio/af-aspect-ratio';\nexport { AfNavItem } from './components/af-nav-item/af-nav-item';\nexport { AfNavbar } from './components/af-navbar/af-navbar';\nexport { AfLogo } from './components/af-logo/af-logo';\nexport { AfButton } from './components/af-button/af-button';\nexport { AfIconButton } from './components/af-icon-button/af-icon-button';\nexport { AfButtonGroup } from './components/af-button-group/af-button-group';\nexport { AfTypographyLockup } from './components/af-typography-lockup/af-typography-lockup';\nexport { AfCheckbox } from './components/af-checkbox/af-checkbox';\nexport { AfRadio } from './components/af-radio/af-radio';\nexport { AfSwitch } from './components/af-switch/af-switch';\nexport { AfFieldset } from './components/af-fieldset/af-fieldset';\nexport { AfInput } from './components/af-input/af-input';\nexport { AfTextarea } from './components/af-textarea/af-textarea';\nexport { AfTag } from './components/af-tag/af-tag';\nexport { AfTab } from './components/af-tab/af-tab';\nexport { AfTabBar } from './components/af-tab-bar/af-tab-bar';\nexport { AfFeatureCard } from './components/af-feature-card/af-feature-card';\nexport { AfIllustratedCard } from './components/af-illustrated-card/af-illustrated-card';\n"]}

package/dist/components/af-aspect-ratio.js

@@ -1,4 +1,4 @@
-import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-PLXzXWgX.js';
+import { A as AfAspectRatio$1, d as defineCustomElement$1 } from './p-BHKA-yEm.js';
 
 const AfAspectRatio = AfAspectRatio$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { A as AfButtonGroup$1, d as defineCustomElement$1 } from './p-DBFWSHR9.js';
+import { A as AfButtonGroup$1, d as defineCustomElement$1 } from './p-ByHIHg3l.js';
 
 const AfButtonGroup = AfButtonGroup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-button.js

@@ -1,4 +1,4 @@
-import { A as AfButton$1, d as defineCustomElement$1 } from './p-BKGrl8ua.js';
+import { A as AfButton$1, d as defineCustomElement$1 } from './p-DBnL9UHx.js';
 
 const AfButton = AfButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/af-card.js

@@ -1,42 +1,4 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
-
-const afCardCss = ".sc-af-card-h{display:flex;flex-direction:column;width:100%;min-height:400px}.card.sc-af-card{background:var(--colour-background-level-1, #e8eeed);border-radius:var(--border-radius-card-level-1, 32px);overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:400px;height:100%;box-sizing:border-box}.card--with-image.sc-af-card{background:var(--colour-brand-inkwell, #14343b);min-height:480px}.card__background.sc-af-card{position:absolute;inset:0;pointer-events:none;z-index:0}.card__background-image.sc-af-card{width:100%;height:100%;object-fit:cover;object-position:center}.card__content.sc-af-card{position:relative;padding:40px;display:flex;flex-direction:column;gap:24px;flex:1;box-sizing:border-box;z-index:1}.card__content.sc-af-card-s>img,.card__content .sc-af-card-s>img{width:100%;height:auto;min-height:200px;margin-top:auto;object-fit:cover;object-position:top center}.card__content.sc-af-card-s>af-heading,.card__content .sc-af-card-s>af-heading{margin-bottom:0}.card__content.sc-af-card-s>af-text,.card__content .sc-af-card-s>af-text{line-height:1.44}.card__content--overlay.sc-af-card{backdrop-filter:blur(2px);background:linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);padding:32px;padding-top:200px;justify-content:flex-end;--colour-typography-heading-primary:#ffffff;--colour-typography-heading-secondary:#ffffff;--colour-typography-body-default:#ffffff;--colour-typography-body-dark:#ffffff;color:#ffffff}.card__content--overlay.sc-af-card *.sc-af-card{color:#ffffff !important}.card.sc-af-card:not(.card--with-image):not(.card--dark-overlay) af-heading.sc-af-card,.card.sc-af-card:not(.card--with-image):not(.card--dark-overlay) af-text.sc-af-card{--colour-typography-heading-primary:var(--colour-brand-inkwell, #14343B);--colour-typography-body-default:#2B484F}.card--custom-bg.sc-af-card:not(.card--dark-overlay) af-heading.sc-af-card,.card--custom-bg.sc-af-card:not(.card--dark-overlay) af-text.sc-af-card{--colour-typography-heading-primary:var(--colour-brand-inkwell, #14343B);--colour-typography-body-default:#2B484F}";
-
-const AfCard$1 = /*@__PURE__*/ proxyCustomElement(class AfCard extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * Whether to apply a dark gradient overlay (for cards with background images)
-         */
-        this.darkOverlay = false;
-    }
-    render() {
-        const hasBackgroundImage = !!this.backgroundImage;
-        const cardStyle = this.backgroundColor ? { backgroundColor: this.backgroundColor } : undefined;
-        return (h(Host, { key: '026a3f9e10d281558913cd6eb69db800da37deb4' }, h("div", { key: 'd6b43e724d5611e75ec096dad88c5373ef5c5adc', class: `card ${hasBackgroundImage ? 'card--with-image' : ''} ${this.darkOverlay ? 'card--dark-overlay' : ''} ${this.backgroundColor ? 'card--custom-bg' : ''}`, style: cardStyle }, hasBackgroundImage && (h("div", { key: 'f71753ba962411320c45f06c7c9a5c98b89883a9', class: "card__background" }, h("img", { key: '2d3b19e350ddf5a1efa1c1a9a343851e423cc275', src: this.backgroundImage, alt: "", class: "card__background-image" }))), h("div", { key: '459e00230ef7a470ee808d0d674412b18822d473', class: `card__content ${hasBackgroundImage ? 'card__content--overlay' : ''}` }, h("slot", { key: 'd2f4f261f0b2a766c912504d17f0caec96ae02c4' })))));
-    }
-    static get style() { return afCardCss; }
-}, [262, "af-card", {
-        "backgroundImage": [1, "background-image"],
-        "backgroundColor": [1, "background-color"],
-        "darkOverlay": [4, "dark-overlay"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-card"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-card":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfCard$1);
-            }
-            break;
-    } });
-}
+import { A as AfCard$1, d as defineCustomElement$1 } from './p-Dvi1lz3x.js';
 
 const AfCard = AfCard$1;
 const defineCustomElement = defineCustomElement$1;