@affinda/wc 0.0.14 → 0.0.16

package/dist/components/af-footer.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-Dt4Fpr3O.js';
+import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
 
-const afFooterCss = ".sc-af-footer-h{display:block}.footer.sc-af-footer{background-color:var(--colour-brand-inkwell, #14343b);color:var(--colour-tints-mistGreen-200, #C6D5D1);padding:64px 0 0}.footer__container.sc-af-footer{max-width:1280px;margin:0 auto;padding:0 24px}.footer__top.sc-af-footer{display:grid;grid-template-columns:380px 1fr;gap:48px;padding-bottom:48px}.footer__brand.sc-af-footer{display:flex;flex-direction:column;gap:16px}.footer__brand-card.sc-af-footer{background-color:rgba(198, 213, 209, 0.08);border-radius:16px;padding:32px}.footer__logo.sc-af-footer{margin-bottom:24px}.footer__logo.sc-af-footer svg.sc-af-footer,.footer__logo.sc-af-footer img.sc-af-footer{height:32px;width:auto}.footer__social.sc-af-footer{display:flex;gap:12px}.footer__social-link.sc-af-footer{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(198, 213, 209, 0.3);border-radius:50%;color:var(--colour-tints-mistGreen-200, #C6D5D1);transition:all 0.2s ease}.footer__social-link.sc-af-footer:hover{background-color:rgba(198, 213, 209, 0.1);border-color:rgba(198, 213, 209, 0.5)}.footer__contact-card.sc-af-footer{background-color:rgba(198, 213, 209, 0.08);border-radius:16px;padding:24px 32px;display:flex;flex-direction:column;gap:20px}.footer__contact-item.sc-af-footer{display:flex;flex-direction:column;gap:4px}.footer__contact-label.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0}.footer__contact-value.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);margin:0}.footer__nav.sc-af-footer{display:flex;flex-direction:column;justify-content:space-between}.footer__nav-columns.sc-af-footer{display:grid;grid-template-columns:repeat(4, 1fr);gap:32px}.footer__nav-column.sc-af-footer{display:flex;flex-direction:column;gap:16px}.footer__nav-heading.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0;text-transform:none}.footer__nav-list.sc-af-footer{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.footer__nav-list.sc-af-footer li.sc-af-footer{margin:0}.footer__nav-list.sc-af-footer a.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);text-decoration:none;transition:color 0.2s ease;display:inline-flex;align-items:center;gap:6px}.footer__nav-list.sc-af-footer a.sc-af-footer:hover{color:var(--colour-tints-mistGreen-200, #C6D5D1)}.footer__external-icon.sc-af-footer{opacity:0.7;flex-shrink:0}.footer__status.sc-af-footer{display:flex;align-items:center;gap:8px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(198, 213, 209, 0.1)}.footer__status-dot.sc-af-footer{width:10px;height:10px;border-radius:50%;flex-shrink:0}.footer__status-dot--operational.sc-af-footer{background-color:#22c55e}.footer__status-dot--issue.sc-af-footer{background-color:#ef4444}.footer__status-text.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7)}.footer__status-link.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:var(--colour-tints-mistGreen-200, #C6D5D1);text-decoration:underline;text-underline-offset:2px;margin-left:8px}.footer__status-link.sc-af-footer:hover{text-decoration:none}.footer__bottom.sc-af-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding:24px 0;border-top:1px solid rgba(198, 213, 209, 0.1);background-color:rgba(198, 213, 209, 0.05);margin:0 -24px;padding-left:24px;padding-right:24px}.footer__copyright.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7);margin:0}.footer__legal.sc-af-footer{display:flex;gap:24px}.footer__legal.sc-af-footer a.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7);text-decoration:underline;text-underline-offset:2px}.footer__legal.sc-af-footer a.sc-af-footer:hover{color:var(--colour-tints-mistGreen-200, #C6D5D1);text-decoration:none}.footer__badges.sc-af-footer{display:flex;gap:16px;align-items:center}.footer__badge.sc-af-footer{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.footer__badge.sc-af-footer svg.sc-af-footer{width:100%;height:100%}@media (max-width: 1024px){.footer__top.sc-af-footer{grid-template-columns:1fr;gap:48px}.footer__brand.sc-af-footer{flex-direction:row;gap:16px}.footer__brand-card.sc-af-footer,.footer__contact-card.sc-af-footer{flex:1}}@media (max-width: 768px){.footer.sc-af-footer{padding:48px 0 0}.footer__top.sc-af-footer{gap:32px}.footer__brand.sc-af-footer{flex-direction:column}.footer__nav-columns.sc-af-footer{grid-template-columns:repeat(2, 1fr);gap:32px}.footer__bottom.sc-af-footer{flex-direction:column;align-items:flex-start;gap:16px}.footer__legal.sc-af-footer{flex-wrap:wrap;gap:16px}}@media (max-width: 480px){.footer__container.sc-af-footer{padding:0 16px}.footer__brand-card.sc-af-footer,.footer__contact-card.sc-af-footer{padding:24px}.footer__nav-columns.sc-af-footer{grid-template-columns:1fr;gap:24px}.footer__bottom.sc-af-footer{margin:0 -16px;padding-left:16px;padding-right:16px}.footer__badges.sc-af-footer{width:100%;justify-content:flex-start}}";
+const afFooterCss = ".sc-af-footer-h{display:block}.footer.sc-af-footer{background-color:var(--colour-brand-inkwell, #14343b);color:var(--colour-tints-mistGreen-200, #C6D5D1);padding:120px 0 0}.footer__container.sc-af-footer{max-width:1280px;margin:0 auto;padding:0 24px}.footer__top.sc-af-footer{display:grid;grid-template-columns:380px 1fr;gap:48px;padding-bottom:48px}.footer__brand.sc-af-footer{display:flex;flex-direction:column;gap:16px}.footer__brand-card.sc-af-footer{background-color:rgba(198, 213, 209, 0.08);border-radius:16px;padding:32px}.footer__logo.sc-af-footer{margin-bottom:24px}.footer__logo.sc-af-footer svg.sc-af-footer,.footer__logo.sc-af-footer img.sc-af-footer{height:32px;width:auto}.footer__social.sc-af-footer{display:flex;gap:12px}.footer__social-link.sc-af-footer{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid rgba(198, 213, 209, 0.3);border-radius:50%;color:var(--colour-tints-mistGreen-200, #C6D5D1);transition:all 0.2s ease}.footer__social-link.sc-af-footer:hover{background-color:rgba(198, 213, 209, 0.1);border-color:rgba(198, 213, 209, 0.5)}.footer__contact-card.sc-af-footer{background-color:rgba(198, 213, 209, 0.08);border-radius:16px;padding:24px 32px;display:flex;flex-direction:column;gap:20px}.footer__contact-item.sc-af-footer{display:flex;flex-direction:column;gap:4px}.footer__contact-label.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0}.footer__contact-value.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);margin:0}.footer__nav.sc-af-footer{display:flex;flex-direction:column;justify-content:space-between}.footer__nav-columns.sc-af-footer{display:grid;grid-template-columns:repeat(4, 1fr);gap:32px}.footer__nav-column.sc-af-footer{display:flex;flex-direction:column;gap:16px}.footer__nav-heading.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:600;color:var(--colour-tints-mistGreen-200, #C6D5D1);margin:0;text-transform:none}.footer__nav-list.sc-af-footer{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.footer__nav-list.sc-af-footer li.sc-af-footer{margin:0}.footer__nav-list.sc-af-footer a.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;font-weight:400;color:rgba(198, 213, 209, 0.7);text-decoration:none;transition:color 0.2s ease;display:inline-flex;align-items:center;gap:6px}.footer__nav-list.sc-af-footer a.sc-af-footer:hover{color:var(--colour-tints-mistGreen-200, #C6D5D1)}.footer__external-icon.sc-af-footer{opacity:0.7;flex-shrink:0}.footer__status.sc-af-footer{display:flex;align-items:center;gap:8px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(198, 213, 209, 0.1)}.footer__status-dot.sc-af-footer{width:10px;height:10px;border-radius:50%;flex-shrink:0}.footer__status-dot--operational.sc-af-footer{background-color:#22c55e}.footer__status-dot--issue.sc-af-footer{background-color:#ef4444}.footer__status-text.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7)}.footer__status-link.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:var(--colour-tints-mistGreen-200, #C6D5D1);text-decoration:underline;text-underline-offset:2px;margin-left:8px}.footer__status-link.sc-af-footer:hover{text-decoration:none}.footer__bottom.sc-af-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding:24px 0;border-top:1px solid rgba(198, 213, 209, 0.1);background-color:rgba(198, 213, 209, 0.05);margin:0 -24px;padding-left:24px;padding-right:24px}.footer__copyright.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7);margin:0}.footer__legal.sc-af-footer{display:flex;gap:24px}.footer__legal.sc-af-footer a.sc-af-footer{font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-size:14px;color:rgba(198, 213, 209, 0.7);text-decoration:underline;text-underline-offset:2px}.footer__legal.sc-af-footer a.sc-af-footer:hover{color:var(--colour-tints-mistGreen-200, #C6D5D1);text-decoration:none}.footer__badges.sc-af-footer{display:flex;gap:16px;align-items:center}.footer__badge.sc-af-footer{width:48px;height:48px;display:flex;align-items:center;justify-content:center}.footer__badge.sc-af-footer svg.sc-af-footer{width:100%;height:100%}@media (max-width: 1024px){.footer__top.sc-af-footer{grid-template-columns:1fr;gap:48px}.footer__brand.sc-af-footer{flex-direction:row;gap:16px}.footer__brand-card.sc-af-footer,.footer__contact-card.sc-af-footer{flex:1}}@media (max-width: 768px){.footer.sc-af-footer{padding:48px 0 0}.footer__top.sc-af-footer{gap:32px}.footer__brand.sc-af-footer{flex-direction:column}.footer__nav-columns.sc-af-footer{grid-template-columns:repeat(2, 1fr);gap:32px}.footer__bottom.sc-af-footer{flex-direction:column;align-items:flex-start;gap:16px}.footer__legal.sc-af-footer{flex-wrap:wrap;gap:16px}}@media (max-width: 480px){.footer__container.sc-af-footer{padding:0 16px}.footer__brand-card.sc-af-footer,.footer__contact-card.sc-af-footer{padding:24px}.footer__nav-columns.sc-af-footer{grid-template-columns:1fr;gap:24px}.footer__bottom.sc-af-footer{margin:0 -16px;padding-left:16px;padding-right:16px}.footer__badges.sc-af-footer{width:100%;justify-content:flex-start}}";
 
 const AfFooter$1 = /*@__PURE__*/ proxyCustomElement(class AfFooter extends H {
     constructor(registerHost) {
@@ -20,7 +20,7 @@ const AfFooter$1 = /*@__PURE__*/ proxyCustomElement(class AfFooter extends H {
         this.showStatus = true;
     }
     render() {
-        return (h(Host, { key: '37ff278a4e94d6a530143e49a7d2cd89bf4b2108' }, h("footer", { key: '1465dbc7c890329e248ee6f15b6082b63cc6d66f', class: "footer" }, h("div", { key: '5e1b29375b3f14c3ebe451e56f70d0726e9af0ae', class: "footer__container" }, h("div", { key: 'a36ec8ae9f0f211347b2ccdd47dbe45599eaf43c', class: "footer__top" }, h("div", { key: '3f749c08a7a0866748e5818156db2bf6c9fd2d8e', class: "footer__brand" }, h("div", { key: 'a71e240e851ec6348fa80eff89cb319f2126ae6f', class: "footer__brand-card" }, h("div", { key: '1e2b46f8bc10ad4be3b41a5545445ca421d93614', class: "footer__logo" }, h("slot", { key: '55a6b9f5181e3e19e91dc8bbf9d94283e2805d1b', name: "logo" })), h("div", { key: 'd0f58f0b8f8449b62f7fb9cb22dbf44d990c274c', class: "footer__social" }, h("slot", { key: '14995e1b89c281dcb618cc5044171dc5e770df78', name: "social" }))), h("div", { key: '9ee5c6a384a5915c7d25d5b7918737eb3aedd457', class: "footer__contact-card" }, h("slot", { key: '669c0f2dec223e8e964a117be3ed1f1b626284ea', name: "contact" }))), h("div", { key: 'e5c055d705f12e9f4389f6a5d342d594b20636b7', class: "footer__nav" }, h("div", { key: 'b8ba3f9e42996210094d6962888fd380645c83e0', class: "footer__nav-columns" }, h("slot", { key: 'be54e86e7a3dadcf9dd01006cbbca1124bcfb1df', name: "nav" })), this.showStatus && (h("div", { key: 'c949887c44f734c93c679a72aa07362fea9b939c', class: "footer__status" }, h("span", { key: '2d8e3df717e880ad71e8af9591699fee7b50e711', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: '743707f9b7750dc2312262028b2d6d0ca86f6e60', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: 'f667c9ecb73d4c17645afc24ad09c4b58fa0d265', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: '3935d821d1ccf1563de444e244802c500b7ba9db', class: "footer__bottom" }, this.copyrightText && (h("p", { key: '9bbf076b86d2d221a65f7f19e325a0f79fb42cd3', class: "footer__copyright" }, this.copyrightText)), h("div", { key: 'b671070b4274c1d0b8fdc21ad33b211ad8d37390', class: "footer__legal" }, h("slot", { key: '24338a5e5fea9b88352e47680ef18160f52e9ee2', name: "legal" })), h("div", { key: '772913b85cf9b1f2f93b649c01c11b71a27d64a4', class: "footer__badges" }, h("slot", { key: '9a40bc862ed3512ee94398da5ac0e754dbd33240', name: "badges" })))))));
+        return (h(Host, { key: '58d15bfa72370f9d72767081d7d821ce7e5cfcad' }, h("footer", { key: 'f53cc2cb44f334bc6709344d11663bbc8facbde4', class: "footer" }, h("div", { key: 'ad17b47d33fad7fea79fee647817ee8dceade8b8', class: "footer__container" }, h("div", { key: '24bf87ec90f567b260fdc3bd7f70c76fc72789bc', class: "footer__top" }, h("div", { key: '272bbb94a4d889579b9991c016165a7376559024', class: "footer__brand" }, h("div", { key: 'f1a892dab1d6ce935451978ae4584dfd0d50bca4', class: "footer__brand-card" }, h("div", { key: '15818798cdfd09873836e109472556a224a40f56', class: "footer__logo" }, h("slot", { key: 'd753c7044f3870ec66cf37da700cc2bf2aceda2c', name: "logo" })), h("div", { key: '2660af6bab2666242dfffe25dc81e050693d024e', class: "footer__social" }, h("slot", { key: '76dd64ed787aaa4698ca3687673b32899ed4a6a2', name: "social" }))), h("div", { key: '71c365eae2e2f2748cf42978179a1047d51dd391', class: "footer__contact-card" }, h("slot", { key: 'df48c5734759ac12a8ef398cf5002c793f02a309', name: "contact" }))), h("div", { key: 'b78002e34cc197ab9157697c48eeded05a3acdcd', class: "footer__nav" }, h("div", { key: '715717dd80882654ca91ccaf5474953b827f08a3', class: "footer__nav-columns" }, h("slot", { key: '062c88854fbd11d4c007e7daf166828db8db2131', name: "nav" })), this.showStatus && (h("div", { key: '39cd615cff666e79f0ed91ef90f6ad414f89addd', class: "footer__status" }, h("span", { key: '8396b890dc62b5f65c9ba5eaff2db72b83709a2a', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: '5266b10f2e2e8129425cd61acd0865cc6be38ec0', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: 'c4e999a03cbb89eaaaae079250c9eda8756ca8d6', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: '354acdb5d3442c876affc6e44c0e3541a27ff06f', class: "footer__bottom" }, this.copyrightText && (h("p", { key: '677a8291f263b026a01855422fc08ddd7fb69b89', class: "footer__copyright" }, this.copyrightText)), h("div", { key: '46b34f1634c53ff716c53ee575e1894c60b056e8', class: "footer__legal" }, h("slot", { key: 'f7ed01d5374e9c7d627ccf47413f62f7ab049ae7', name: "legal" })), h("div", { key: 'db6a6911e45c9c50e2c53d21e4aab25d3aa331f7', class: "footer__badges" }, h("slot", { key: '1fa6134c03aac63734592e4325663a1e91f92f02', name: "badges" })))))));
     }
     static get style() { return afFooterCss; }
 }, [262, "af-footer", {

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

@@ -1 +1 @@
-{"file":"af-footer.js","mappings":"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","names":["AfFooter","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-footer/af-footer.css?tag=af-footer&encapsulation=scoped","src/components/af-footer/af-footer.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.footer {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  padding: 64px 0 0;\n}\n\n.footer__container {\n  max-width: 1280px;\n  margin: 0 auto;\n  padding: 0 24px;\n}\n\n/* Top section layout */\n.footer__top {\n  display: grid;\n  grid-template-columns: 380px 1fr;\n  gap: 48px;\n  padding-bottom: 48px;\n}\n\n/* Brand column (left side) */\n.footer__brand {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.footer__brand-card {\n  background-color: rgba(198, 213, 209, 0.08);\n  border-radius: 16px;\n  padding: 32px;\n}\n\n.footer__logo {\n  margin-bottom: 24px;\n}\n\n.footer__logo svg,\n.footer__logo img {\n  height: 32px;\n  width: auto;\n}\n\n.footer__social {\n  display: flex;\n  gap: 12px;\n}\n\n.footer__social-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border: 1px solid rgba(198, 213, 209, 0.3);\n  border-radius: 50%;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  transition: all 0.2s ease;\n}\n\n.footer__social-link:hover {\n  background-color: rgba(198, 213, 209, 0.1);\n  border-color: rgba(198, 213, 209, 0.5);\n}\n\n.footer__contact-card {\n  background-color: rgba(198, 213, 209, 0.08);\n  border-radius: 16px;\n  padding: 24px 32px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.footer__contact-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.footer__contact-label {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  margin: 0;\n}\n\n.footer__contact-value {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 400;\n  color: rgba(198, 213, 209, 0.7);\n  margin: 0;\n}\n\n/* Navigation section (right side) */\n.footer__nav {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.footer__nav-columns {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 32px;\n}\n\n.footer__nav-column {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.footer__nav-heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  margin: 0;\n  text-transform: none;\n}\n\n.footer__nav-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.footer__nav-list li {\n  margin: 0;\n}\n\n.footer__nav-list a {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 400;\n  color: rgba(198, 213, 209, 0.7);\n  text-decoration: none;\n  transition: color 0.2s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.footer__nav-list a:hover {\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n}\n\n.footer__external-icon {\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n/* Status indicator */\n.footer__status {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 32px;\n  padding-top: 24px;\n  border-top: 1px solid rgba(198, 213, 209, 0.1);\n}\n\n.footer__status-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.footer__status-dot--operational {\n  background-color: #22c55e;\n}\n\n.footer__status-dot--issue {\n  background-color: #ef4444;\n}\n\n.footer__status-text {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: rgba(198, 213, 209, 0.7);\n}\n\n.footer__status-link {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  margin-left: 8px;\n}\n\n.footer__status-link:hover {\n  text-decoration: none;\n}\n\n/* Bottom section */\n.footer__bottom {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 24px;\n  padding: 24px 0;\n  border-top: 1px solid rgba(198, 213, 209, 0.1);\n  background-color: rgba(198, 213, 209, 0.05);\n  margin: 0 -24px;\n  padding-left: 24px;\n  padding-right: 24px;\n}\n\n.footer__copyright {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: rgba(198, 213, 209, 0.7);\n  margin: 0;\n}\n\n.footer__legal {\n  display: flex;\n  gap: 24px;\n}\n\n.footer__legal a {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: rgba(198, 213, 209, 0.7);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n.footer__legal a:hover {\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  text-decoration: none;\n}\n\n.footer__badges {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n}\n\n.footer__badge {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.footer__badge svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Responsive styles */\n@media (max-width: 1024px) {\n  .footer__top {\n    grid-template-columns: 1fr;\n    gap: 48px;\n  }\n\n  .footer__brand {\n    flex-direction: row;\n    gap: 16px;\n  }\n\n  .footer__brand-card,\n  .footer__contact-card {\n    flex: 1;\n  }\n}\n\n@media (max-width: 768px) {\n  .footer {\n    padding: 48px 0 0;\n  }\n\n  .footer__top {\n    gap: 32px;\n  }\n\n  .footer__brand {\n    flex-direction: column;\n  }\n\n  .footer__nav-columns {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 32px;\n  }\n\n  .footer__bottom {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 16px;\n  }\n\n  .footer__legal {\n    flex-wrap: wrap;\n    gap: 16px;\n  }\n}\n\n@media (max-width: 480px) {\n  .footer__container {\n    padding: 0 16px;\n  }\n\n  .footer__brand-card,\n  .footer__contact-card {\n    padding: 24px;\n  }\n\n  .footer__nav-columns {\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n\n  .footer__bottom {\n    margin: 0 -16px;\n    padding-left: 16px;\n    padding-right: 16px;\n  }\n\n  .footer__badges {\n    width: 100%;\n    justify-content: flex-start;\n  }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Footer component for marketing pages\n * Provides a flexible, slot-based layout for footer content\n * All content is passed via slots - no hardcoded links or content\n */\n@Component({\n  tag: 'af-footer',\n  styleUrl: 'af-footer.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFooter {\n  /** Copyright text (e.g., \"© 2025 Company Name. All rights reserved.\") */\n  @Prop() copyrightText: string = '';\n\n  /** Status message text */\n  @Prop() statusText: string = '';\n\n  /** Status page URL */\n  @Prop() statusUrl: string = '';\n\n  /** Whether systems are operational (shows green/red indicator) */\n  @Prop() systemsOperational: boolean = true;\n\n  /** Whether to show the status indicator */\n  @Prop() showStatus: boolean = true;\n\n  render() {\n    return (\n      <Host>\n        <footer class=\"footer\">\n          <div class=\"footer__container\">\n            {/* Top section */}\n            <div class=\"footer__top\">\n              {/* Left column - Brand area */}\n              <div class=\"footer__brand\">\n                <div class=\"footer__brand-card\">\n                  <div class=\"footer__logo\">\n                    <slot name=\"logo\"></slot>\n                  </div>\n                  <div class=\"footer__social\">\n                    <slot name=\"social\"></slot>\n                  </div>\n                </div>\n\n                <div class=\"footer__contact-card\">\n                  <slot name=\"contact\"></slot>\n                </div>\n              </div>\n\n              {/* Right section - Navigation columns */}\n              <div class=\"footer__nav\">\n                <div class=\"footer__nav-columns\">\n                  <slot name=\"nav\"></slot>\n                </div>\n\n                {/* Status indicator */}\n                {this.showStatus && (\n                  <div class=\"footer__status\">\n                    <span class={`footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}`}></span>\n                    <span class=\"footer__status-text\">\n                      {this.statusText}\n                    </span>\n                    {this.statusUrl && (\n                      <a href={this.statusUrl} target=\"_blank\" rel=\"noopener noreferrer\" class=\"footer__status-link\">\n                        Learn more\n                      </a>\n                    )}\n                  </div>\n                )}\n              </div>\n            </div>\n\n            {/* Bottom section */}\n            <div class=\"footer__bottom\">\n              {this.copyrightText && (\n                <p class=\"footer__copyright\">{this.copyrightText}</p>\n              )}\n              \n              <div class=\"footer__legal\">\n                <slot name=\"legal\"></slot>\n              </div>\n\n              <div class=\"footer__badges\">\n                <slot name=\"badges\"></slot>\n              </div>\n            </div>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"af-footer.js","mappings":"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","names":["AfFooter","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-footer/af-footer.css?tag=af-footer&encapsulation=scoped","src/components/af-footer/af-footer.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.footer {\n  background-color: var(--colour-brand-inkwell, #14343b);\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  padding: 120px 0 0; /* Extra padding at top for overlapping cards */\n}\n\n.footer__container {\n  max-width: 1280px;\n  margin: 0 auto;\n  padding: 0 24px;\n}\n\n/* Top section layout */\n.footer__top {\n  display: grid;\n  grid-template-columns: 380px 1fr;\n  gap: 48px;\n  padding-bottom: 48px;\n}\n\n/* Brand column (left side) */\n.footer__brand {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.footer__brand-card {\n  background-color: rgba(198, 213, 209, 0.08);\n  border-radius: 16px;\n  padding: 32px;\n}\n\n.footer__logo {\n  margin-bottom: 24px;\n}\n\n.footer__logo svg,\n.footer__logo img {\n  height: 32px;\n  width: auto;\n}\n\n.footer__social {\n  display: flex;\n  gap: 12px;\n}\n\n.footer__social-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  border: 1px solid rgba(198, 213, 209, 0.3);\n  border-radius: 50%;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  transition: all 0.2s ease;\n}\n\n.footer__social-link:hover {\n  background-color: rgba(198, 213, 209, 0.1);\n  border-color: rgba(198, 213, 209, 0.5);\n}\n\n.footer__contact-card {\n  background-color: rgba(198, 213, 209, 0.08);\n  border-radius: 16px;\n  padding: 24px 32px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.footer__contact-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.footer__contact-label {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  margin: 0;\n}\n\n.footer__contact-value {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 400;\n  color: rgba(198, 213, 209, 0.7);\n  margin: 0;\n}\n\n/* Navigation section (right side) */\n.footer__nav {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.footer__nav-columns {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 32px;\n}\n\n.footer__nav-column {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.footer__nav-heading {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  margin: 0;\n  text-transform: none;\n}\n\n.footer__nav-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.footer__nav-list li {\n  margin: 0;\n}\n\n.footer__nav-list a {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  font-weight: 400;\n  color: rgba(198, 213, 209, 0.7);\n  text-decoration: none;\n  transition: color 0.2s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.footer__nav-list a:hover {\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n}\n\n.footer__external-icon {\n  opacity: 0.7;\n  flex-shrink: 0;\n}\n\n/* Status indicator */\n.footer__status {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 32px;\n  padding-top: 24px;\n  border-top: 1px solid rgba(198, 213, 209, 0.1);\n}\n\n.footer__status-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.footer__status-dot--operational {\n  background-color: #22c55e;\n}\n\n.footer__status-dot--issue {\n  background-color: #ef4444;\n}\n\n.footer__status-text {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: rgba(198, 213, 209, 0.7);\n}\n\n.footer__status-link {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  margin-left: 8px;\n}\n\n.footer__status-link:hover {\n  text-decoration: none;\n}\n\n/* Bottom section */\n.footer__bottom {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  gap: 24px;\n  padding: 24px 0;\n  border-top: 1px solid rgba(198, 213, 209, 0.1);\n  background-color: rgba(198, 213, 209, 0.05);\n  margin: 0 -24px;\n  padding-left: 24px;\n  padding-right: 24px;\n}\n\n.footer__copyright {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: rgba(198, 213, 209, 0.7);\n  margin: 0;\n}\n\n.footer__legal {\n  display: flex;\n  gap: 24px;\n}\n\n.footer__legal a {\n  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n  font-size: 14px;\n  color: rgba(198, 213, 209, 0.7);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n.footer__legal a:hover {\n  color: var(--colour-tints-mistGreen-200, #C6D5D1);\n  text-decoration: none;\n}\n\n.footer__badges {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n}\n\n.footer__badge {\n  width: 48px;\n  height: 48px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.footer__badge svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Responsive styles */\n@media (max-width: 1024px) {\n  .footer__top {\n    grid-template-columns: 1fr;\n    gap: 48px;\n  }\n\n  .footer__brand {\n    flex-direction: row;\n    gap: 16px;\n  }\n\n  .footer__brand-card,\n  .footer__contact-card {\n    flex: 1;\n  }\n}\n\n@media (max-width: 768px) {\n  .footer {\n    padding: 48px 0 0;\n  }\n\n  .footer__top {\n    gap: 32px;\n  }\n\n  .footer__brand {\n    flex-direction: column;\n  }\n\n  .footer__nav-columns {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 32px;\n  }\n\n  .footer__bottom {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 16px;\n  }\n\n  .footer__legal {\n    flex-wrap: wrap;\n    gap: 16px;\n  }\n}\n\n@media (max-width: 480px) {\n  .footer__container {\n    padding: 0 16px;\n  }\n\n  .footer__brand-card,\n  .footer__contact-card {\n    padding: 24px;\n  }\n\n  .footer__nav-columns {\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n\n  .footer__bottom {\n    margin: 0 -16px;\n    padding-left: 16px;\n    padding-right: 16px;\n  }\n\n  .footer__badges {\n    width: 100%;\n    justify-content: flex-start;\n  }\n}\n\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Footer component for marketing pages\n * Provides a flexible, slot-based layout for footer content\n * All content is passed via slots - no hardcoded links or content\n */\n@Component({\n  tag: 'af-footer',\n  styleUrl: 'af-footer.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfFooter {\n  /** Copyright text (e.g., \"© 2025 Company Name. All rights reserved.\") */\n  @Prop() copyrightText: string = '';\n\n  /** Status message text */\n  @Prop() statusText: string = '';\n\n  /** Status page URL */\n  @Prop() statusUrl: string = '';\n\n  /** Whether systems are operational (shows green/red indicator) */\n  @Prop() systemsOperational: boolean = true;\n\n  /** Whether to show the status indicator */\n  @Prop() showStatus: boolean = true;\n\n  render() {\n    return (\n      <Host>\n        <footer class=\"footer\">\n          <div class=\"footer__container\">\n            {/* Top section */}\n            <div class=\"footer__top\">\n              {/* Left column - Brand area */}\n              <div class=\"footer__brand\">\n                <div class=\"footer__brand-card\">\n                  <div class=\"footer__logo\">\n                    <slot name=\"logo\"></slot>\n                  </div>\n                  <div class=\"footer__social\">\n                    <slot name=\"social\"></slot>\n                  </div>\n                </div>\n\n                <div class=\"footer__contact-card\">\n                  <slot name=\"contact\"></slot>\n                </div>\n              </div>\n\n              {/* Right section - Navigation columns */}\n              <div class=\"footer__nav\">\n                <div class=\"footer__nav-columns\">\n                  <slot name=\"nav\"></slot>\n                </div>\n\n                {/* Status indicator */}\n                {this.showStatus && (\n                  <div class=\"footer__status\">\n                    <span class={`footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}`}></span>\n                    <span class=\"footer__status-text\">\n                      {this.statusText}\n                    </span>\n                    {this.statusUrl && (\n                      <a href={this.statusUrl} target=\"_blank\" rel=\"noopener noreferrer\" class=\"footer__status-link\">\n                        Learn more\n                      </a>\n                    )}\n                  </div>\n                )}\n              </div>\n            </div>\n\n            {/* Bottom section */}\n            <div class=\"footer__bottom\">\n              {this.copyrightText && (\n                <p class=\"footer__copyright\">{this.copyrightText}</p>\n              )}\n              \n              <div class=\"footer__legal\">\n                <slot name=\"legal\"></slot>\n              </div>\n\n              <div class=\"footer__badges\">\n                <slot name=\"badges\"></slot>\n              </div>\n            </div>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

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

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

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

package/dist/components/af-heading.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/af-icon.js

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/af-image.js

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

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

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

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

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