@proximus/lavender-carousel 1.4.14-beta.3 → 1.4.14

package/dist/index.es.js

@@ -1,416 +1,438 @@
-import { AttributeBreakpointHandlerDelegate as e, PxElement as t, WithExtraAttributes as n, accessibilityAttributes as r, backgroundColorValues as i, booleanPropertyToAttributeSetter as a, checkName as o, gapValues as s, iconSizeValuesKC as c, log as l, propertyToAttributeSetter as u } from "@proximus/lavender-common";
-//#region src/carousel.css?inline
-var d = ":host{display:block}:host *{box-sizing:border-box}:host{--px-carousel-visible-items:1;--px-carousel-gap-default:var(--px-spacing-default-desktop)}:host([visible-items=\"1\"]){--px-carousel-visible-items:1}:host([visible-items=\"2\"]){--px-carousel-visible-items:2}:host([visible-items=\"3\"]){--px-carousel-visible-items:3}:host([visible-items=\"4\"]){--px-carousel-visible-items:4}:host([visible-items=\"5\"]){--px-carousel-visible-items:5}:host([visible-items=\"6\"]){--px-carousel-visible-items:6}:host([visible-items=\"7\"]){--px-carousel-visible-items:7}:host([visible-items=\"8\"]){--px-carousel-visible-items:8}:host([visible-items=\"9\"]){--px-carousel-visible-items:9}:host([visible-items--mobile=\"1\"]){--px-carousel-visible-items--mobile:1}:host([visible-items--mobile=\"2\"]){--px-carousel-visible-items--mobile:2}:host([visible-items--mobile=\"3\"]){--px-carousel-visible-items--mobile:3}:host([visible-items--mobile=\"4\"]){--px-carousel-visible-items--mobile:4}:host([visible-items--mobile=\"5\"]){--px-carousel-visible-items--mobile:5}:host([visible-items--mobile=\"6\"]){--px-carousel-visible-items--mobile:6}:host([visible-items--mobile=\"7\"]){--px-carousel-visible-items--mobile:7}:host([visible-items--mobile=\"8\"]){--px-carousel-visible-items--mobile:8}:host([visible-items--mobile=\"9\"]){--px-carousel-visible-items--mobile:9}:host([visible-items--tablet=\"1\"]){--px-carousel-visible-items--tablet:1}:host([visible-items--tablet=\"2\"]){--px-carousel-visible-items--tablet:2}:host([visible-items--tablet=\"3\"]){--px-carousel-visible-items--tablet:3}:host([visible-items--tablet=\"4\"]){--px-carousel-visible-items--tablet:4}:host([visible-items--tablet=\"5\"]){--px-carousel-visible-items--tablet:5}:host([visible-items--tablet=\"6\"]){--px-carousel-visible-items--tablet:6}:host([visible-items--tablet=\"7\"]){--px-carousel-visible-items--tablet:7}:host([visible-items--tablet=\"8\"]){--px-carousel-visible-items--tablet:8}:host([visible-items--tablet=\"9\"]){--px-carousel-visible-items--tablet:9}:host([visible-items--laptop=\"1\"]){--px-carousel-visible-items--laptop:1}:host([visible-items--laptop=\"2\"]){--px-carousel-visible-items--laptop:2}:host([visible-items--laptop=\"3\"]){--px-carousel-visible-items--laptop:3}:host([visible-items--laptop=\"4\"]){--px-carousel-visible-items--laptop:4}:host([visible-items--laptop=\"5\"]){--px-carousel-visible-items--laptop:5}:host([visible-items--laptop=\"6\"]){--px-carousel-visible-items--laptop:6}:host([visible-items--laptop=\"7\"]){--px-carousel-visible-items--laptop:7}:host([visible-items--laptop=\"8\"]){--px-carousel-visible-items--laptop:8}:host([visible-items--laptop=\"9\"]){--px-carousel-visible-items--laptop:9}:host([visible-items--desktop=\"1\"]){--px-carousel-visible-items--desktop:1}:host([visible-items--desktop=\"2\"]){--px-carousel-visible-items--desktop:2}:host([visible-items--desktop=\"3\"]){--px-carousel-visible-items--desktop:3}:host([visible-items--desktop=\"4\"]){--px-carousel-visible-items--desktop:4}:host([visible-items--desktop=\"5\"]){--px-carousel-visible-items--desktop:5}:host([visible-items--desktop=\"6\"]){--px-carousel-visible-items--desktop:6}:host([visible-items--desktop=\"7\"]){--px-carousel-visible-items--desktop:7}:host([visible-items--desktop=\"8\"]){--px-carousel-visible-items--desktop:8}:host([visible-items--desktop=\"9\"]){--px-carousel-visible-items--desktop:9}:host([gap=default]){--px-carousel-gap-default:var(--px-spacing-default-desktop)}:host([gap=s]){--px-carousel-gap-default:var(--px-spacing-s-desktop)}:host([gap=xs]){--px-carousel-gap-default:var(--px-spacing-xs-desktop)}:host([gap=\"2xs\"]){--px-carousel-gap-default:var(--px-spacing-2xs-desktop)}:host([gap=l]){--px-carousel-gap-default:var(--px-spacing-l-desktop)}:host([gap=none]){--px-carousel-gap-default:0}:host([gap--mobile=default]){--px-carousel-gap-default--mobile:var(--px-spacing-default-mobile)}:host([gap--mobile=s]){--px-carousel-gap-default--mobile:var(--px-spacing-s-mobile)}:host([gap--mobile=xs]){--px-carousel-gap-default--mobile:var(--px-spacing-xs-mobile)}:host([gap--mobile=\"2xs\"]){--px-carousel-gap-default--mobile:var(--px-spacing-2xs-mobile)}:host([gap--mobile=l]){--px-carousel-gap-default--mobile:var(--px-spacing-l-mobile)}:host([gap--mobile=none]){--px-carousel-gap-default--mobile:0}:host([gap--tablet=default]){--px-carousel-gap-default--tablet:var(--px-spacing-default-tablet)}:host([gap--tablet=s]){--px-carousel-gap-default--tablet:var(--px-spacing-s-tablet)}:host([gap--tablet=xs]){--px-carousel-gap-default--tablet:var(--px-spacing-xs-tablet)}:host([gap--tablet=\"2xs\"]){--px-carousel-gap-default--tablet:var(--px-spacing-2xs-tablet)}:host([gap--tablet=l]){--px-carousel-gap-default--tablet:var(--px-spacing-l-tablet)}:host([gap--tablet=none]){--px-carousel-gap-default--tablet:0}:host([gap--laptop=default]){--px-carousel-gap-default--laptop:var(--px-spacing-default-laptop)}:host([gap--laptop=s]){--px-carousel-gap-default--laptop:var(--px-spacing-s-laptop)}:host([gap--laptop=xs]){--px-carousel-gap-default--laptop:var(--px-spacing-xs-laptop)}:host([gap--laptop=\"2xs\"]){--px-carousel-gap-default--laptop:var(--px-spacing-2xs-laptop)}:host([gap--laptop=l]){--px-carousel-gap-default--laptop:var(--px-spacing-l-laptop)}:host([gap--laptop=none]){--px-carousel-gap-default--laptop:0}:host([gap--desktop=default]){--px-carousel-gap-default--desktop:var(--px-spacing-default-desktop)}:host([gap--desktop=s]){--px-carousel-gap-default--desktop:var(--px-spacing-s-desktop)}:host([gap--desktop=xs]){--px-carousel-gap-default--desktop:var(--px-spacing-xs-desktop)}:host([gap--desktop=\"2xs\"]){--px-carousel-gap-default--desktop:var(--px-spacing-2xs-desktop)}:host([gap--desktop=l]){--px-carousel-gap-default--desktop:var(--px-spacing-l-desktop)}:host([gap--desktop=none]){--px-carousel-gap-default--desktop:0}.carousel{scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-carousel-gap-default--desktop,var(--px-carousel-gap-default));display:flex;overflow:auto hidden}@media screen and (width<=47.938rem){.carousel{gap:var(--px-carousel-gap-default--mobile,var(--px-carousel-gap-default))}}@media screen and (width>=48rem) and (width<=64rem){.carousel{gap:var(--px-carousel-gap-default--tablet,var(--px-carousel-gap-default))}}@media screen and (width>=64.0625rem) and (width<=90rem){.carousel{gap:var(--px-carousel-gap-default--laptop,var(--px-carousel-gap-default))}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media screen and (width<=47.938rem){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}", f = "::slotted(*){border-radius:var(--px-radius-main);height:100%}.carousel-item{height:100%}:host{scroll-snap-align:start;border-radius:var(--px-radius-main);--visible-items:var(--px-carousel-visible-items--desktop,var(--px-carousel-visible-items,1));--spacing:var(--px-carousel-gap-default--desktop,var(--px-carousel-gap-default,var(--px-spacing-s-desktop)));min-width:calc((100% - max(var(--visible-items), 2) * var(--spacing)) / var(--visible-items) - 64px / max(var(--visible-items), 2));background:#fff;justify-content:center;align-items:center;overflow:hidden}@media screen and (width<=47.938rem){:host{--visible-items:var(--px-carousel-visible-items--mobile,var(--px-carousel-visible-items,1));--spacing:var(--px-carousel-gap-default--mobile,var(--px-carousel-gap-default,var(--px-spacing-s-mobile)))}}@media screen and (width>=48rem) and (width<=64rem){:host{--visible-items:var(--px-carousel-visible-items--tablet,var(--px-carousel-visible-items,1));--spacing:var(--px-carousel-gap-default--tablet,var(--px-carousel-gap-default,var(--px-spacing-s-desktop)))}}@media screen and (width>=64.0625rem) and (width<=90rem){:host{--visible-items:var(--px-carousel-visible-items--laptop,var(--px-carousel-visible-items,1));--spacing:var(--px-carousel-gap-default--laptop,var(--px-carousel-gap-default,var(--px-spacing-s-desktop)))}}@media screen and (width<=48rem){:host{scroll-snap-align:center;flex:1 0 var(--px-carousel-min-width-mobile,var(--px-carousel-min-width-all-mobile))!important}}@media screen and (width>=48rem) and (width<=64rem){:host{flex:1 0 var(--px-carousel-min-width-tablet,var(--px-carousel-min-width-all-tablet))!important}}", p = ":host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);width:100%;height:100%;overflow-x:var(--overflow-x-all);display:flex}@media screen and (width<=47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=48rem){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (width>=48rem) and (width<=64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet,var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (width>=64.0625rem){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media screen and (width>=64.0625rem) and (width<=90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop,var(--overflow-x-all))}}@media screen and (width>=90.0625rem){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop,var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x=auto]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x=auto]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}", m = new CSSStyleSheet();
-m.replaceSync(p);
-var h = [
-	"",
-	"default",
-	"row",
-	"row-reverse",
-	"column",
-	"column-reverse"
-], g = [
-	"",
-	"default",
-	"stretch",
-	"flex-start",
-	"start",
-	"flex-end",
-	"end",
-	"center",
-	"baseline"
-], _ = [
-	"",
-	"default",
-	"flex-start",
-	"start",
-	"flex-end",
-	"end",
-	"center",
-	"space-between",
-	"space-around",
-	"space-evenly"
-], v = [
-	"",
-	"default",
-	"nowrap",
-	"wrap",
-	"wrap-reverse"
-], y = [
-	"",
-	"visible",
-	"hidden",
-	"scroll",
-	"auto"
-], b = class extends n {
-	constructor() {
-		super(m), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.template = "<div class=\"flex-container\">\n      <slot></slot>\n  </div>", this.shadowRoot.innerHTML = this.template;
-	}
-	connectedCallback() {
-		this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap"), this.hasAttribute("overflow-x") || this.overflowXAttributeDelegate.init("visible");
-	}
-	static get observedAttributes() {
-		return [
-			...super.observedAttributes,
-			"direction",
-			"direction--mobile",
-			"direction--tablet",
-			"direction--laptop",
-			"direction--desktop",
-			"gap",
-			"gap--mobile",
-			"gap--tablet",
-			"gap--laptop",
-			"gap--desktop",
-			"justify-content",
-			"justify-content--mobile",
-			"justify-content--tablet",
-			"justify-content--laptop",
-			"justify-content--desktop",
-			"align-items",
-			"align-items--mobile",
-			"align-items--tablet",
-			"align-items--laptop",
-			"align-items--desktop",
-			"wrap",
-			"wrap--mobile",
-			"wrap--tablet",
-			"wrap--laptop",
-			"wrap--desktop",
-			"overflow-x",
-			"overflow-x--mobile",
-			"overflow-x--tablet",
-			"overflow-x--laptop",
-			"overflow-x--desktop"
-		];
-	}
-	attributeChangedCallback(e, t, n) {
-		switch (e) {
-			case "gap":
-			case "gap--mobile":
-			case "gap--tablet":
-			case "gap--laptop":
-			case "gap--desktop":
-				this.updateFlexProperties(e, t, n, s);
-				break;
-			case "justify-content":
-			case "justify-content--mobile":
-			case "justify-content--tablet":
-			case "justify-content--laptop":
-			case "justify-content--desktop":
-				this.updateFlexProperties(e, t, n, _);
-				break;
-			case "align-items":
-			case "align-items--mobile":
-			case "align-items--tablet":
-			case "align-items--laptop":
-			case "align-items--desktop":
-				this.updateFlexProperties(e, t, n, g);
-				break;
-			case "wrap":
-			case "wrap--mobile":
-			case "wrap--tablet":
-			case "wrap--laptop":
-			case "wrap--desktop":
-				this.updateFlexProperties(e, t, n, v);
-				break;
-			case "direction":
-			case "direction--mobile":
-			case "direction--tablet":
-			case "direction--laptop":
-			case "direction--desktop":
-				this.updateFlexProperties(e, t, n, h);
-				break;
-			case "overflow-x":
-			case "overflow-x--mobile":
-			case "overflow-x--tablet":
-			case "overflow-x--laptop":
-			case "overflow-x--desktop":
-				this.updateOverflowX(e, t, n, y);
-				break;
-			default: super.attributeChangedCallback(e, t, n);
-		}
-	}
-	updateOverflowX(e, t, n, r) {
-		if (!o(r, n)) {
-			l(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
-			return;
-		}
-		this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n);
-	}
-	updateFlexProperties(e, t, n, r) {
-		this.checkName(r, n) || l(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
-		let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e, o = [];
-		if (!i) this.getAttribute(a + "--mobile") || o.push("mobile"), this.getAttribute(a + "--tablet") || o.push("tablet"), this.getAttribute(a + "--laptop") || o.push("laptop"), this.getAttribute(a + "--desktop") || o.push("desktop"), o.forEach((e) => {
-			this.updateStyle(a, e, t, r), this.updateStyle(a, e, n, r);
-		});
-		else {
-			let i = e.split("--")[1];
-			this.updateStyle(a, i, t, r), this.updateStyle(a, i, n, r);
-		}
-	}
-	updateStyle(e, t, n, r) {
-		n && (e === "gap" && r && r.includes(n) ? (this.$el.style.setProperty(`--flex-${e}--${t}-value`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`), this.style.setProperty(`--host-gap--${t}`, `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`)) : this.$el.style.setProperty(`--flex-${e}--${t}-value`, n));
-	}
-	get direction() {
-		return this.getAttribute("direction");
-	}
-	set direction(e) {
-		u(this, "direction", e);
-	}
-	get directionMobile() {
-		return this.getAttribute("direction--mobile");
-	}
-	set directionMobile(e) {
-		u(this, "direction--mobile", e);
-	}
-	get directionTablet() {
-		return this.getAttribute("direction--tablet");
-	}
-	set directionTablet(e) {
-		u(this, "direction--tablet", e);
-	}
-	get directionLaptop() {
-		return this.getAttribute("direction--laptop");
-	}
-	set directionLaptop(e) {
-		u(this, "direction--laptop", e);
-	}
-	get directionDesktop() {
-		return this.getAttribute("direction--desktop");
-	}
-	set directionDesktop(e) {
-		u(this, "direction--desktop", e);
-	}
-	get gap() {
-		return this.getAttribute("gap");
-	}
-	set gap(e) {
-		u(this, "gap", e);
-	}
-	get gapMobile() {
-		return this.getAttribute("gap--mobile");
-	}
-	set gapMobile(e) {
-		u(this, "gap--mobile", e);
-	}
-	get gapTablet() {
-		return this.getAttribute("gap--tablet");
-	}
-	set gapTablet(e) {
-		u(this, "gap--tablet", e);
-	}
-	get gapLaptop() {
-		return this.getAttribute("gap--laptop");
-	}
-	set gapLaptop(e) {
-		u(this, "gap--laptop", e);
-	}
-	get gapDesktop() {
-		return this.getAttribute("gap--desktop");
-	}
-	set gapDesktop(e) {
-		u(this, "gap--desktop", e);
-	}
-	get justifyContent() {
-		return this.getAttribute("justify-content");
-	}
-	set justifyContent(e) {
-		u(this, "justify-content", e);
-	}
-	get justifyContentMobile() {
-		return this.getAttribute("justify-content--mobile");
-	}
-	set justifyContentMobile(e) {
-		u(this, "justify-content--mobile", e);
-	}
-	get justifyContentTablet() {
-		return this.getAttribute("justify-content--tablet");
-	}
-	set justifyContentTablet(e) {
-		u(this, "justify-content--tablet", e);
-	}
-	get justifyContentLaptop() {
-		return this.getAttribute("justify-content--laptop");
-	}
-	set justifyContentLaptop(e) {
-		u(this, "justify-content--laptop", e);
-	}
-	get justifyContentDesktop() {
-		return this.getAttribute("justify-content--desktop");
-	}
-	set justifyContentDesktop(e) {
-		u(this, "justify-content--desktop", e);
-	}
-	get alignItems() {
-		return this.getAttribute("align-items");
-	}
-	set alignItems(e) {
-		u(this, "align-items", e);
-	}
-	get alignItemsMobile() {
-		return this.getAttribute("align-items--mobile");
-	}
-	set alignItemsMobile(e) {
-		u(this, "align-items--mobile", e);
-	}
-	get alignItemsTablet() {
-		return this.getAttribute("align-items--tablet");
-	}
-	set alignItemsTablet(e) {
-		u(this, "align-items--tablet", e);
-	}
-	get alignItemsLaptop() {
-		return this.getAttribute("align-items--laptop");
-	}
-	set alignItemsLaptop(e) {
-		u(this, "align-items--laptop", e);
-	}
-	get alignItemsDesktop() {
-		return this.getAttribute("align-items--desktop");
-	}
-	set alignItemsDesktop(e) {
-		u(this, "align-items--desktop", e);
-	}
-	get wrap() {
-		return this.getAttribute("wrap");
-	}
-	set wrap(e) {
-		u(this, "wrap", e);
-	}
-	get wrapMobile() {
-		return this.getAttribute("wrap--mobile");
-	}
-	set wrapMobile(e) {
-		u(this, "wrap--mobile", e);
-	}
-	get wrapTablet() {
-		return this.getAttribute("wrap--tablet");
-	}
-	set wrapTablet(e) {
-		u(this, "wrap--tablet", e);
-	}
-	get wrapLaptop() {
-		return this.getAttribute("wrap--laptop");
-	}
-	set wrapLaptop(e) {
-		u(this, "wrap--laptop", e);
-	}
-	get wrapDesktop() {
-		return this.getAttribute("wrap--desktop");
-	}
-	set wrapDesktop(e) {
-		u(this, "wrap--desktop", e);
-	}
-	get overflowX() {
-		return this.getAttribute("overflow-x");
-	}
-	set overflowX(e) {
-		u(this, "overflow-x", e);
-	}
-	get overflowXMobile() {
-		return this.getAttribute("overflow-x--mobile");
-	}
-	set overflowXMobile(e) {
-		u(this, "overflow-x--mobile", e);
-	}
-	get overflowXTablet() {
-		return this.getAttribute("overflow-x--tablet");
-	}
-	set overflowXTablet(e) {
-		u(this, "overflow-x--tablet", e);
-	}
-	get overflowXLaptop() {
-		return this.getAttribute("overflow-x--laptop");
-	}
-	set overflowXLaptop(e) {
-		u(this, "overflow-x--laptop", e);
-	}
-	get overflowXDesktop() {
-		return this.getAttribute("overflow-x--desktop");
-	}
-	set overflowXDesktop(e) {
-		u(this, "overflow-x--desktop", e);
-	}
-	get $el() {
-		return this.shadowRoot.querySelector(".flex-container");
-	}
+var W = (s) => {
+  throw TypeError(s);
 };
-customElements.get("px-stack") || customElements.define("px-stack", b);
-var x = class extends b {
-	constructor() {
-		super();
-	}
-	connectedCallback() {
-		super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
-	}
-};
-customElements.get("px-vstack") || customElements.define("px-vstack", x);
-var ee = class extends b {
-	constructor() {
-		super();
-	}
-	connectedCallback() {
-		super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
-	}
-};
-customElements.get("px-hstack") || customElements.define("px-hstack", ee);
-//#endregion
-//#region ../Layout/src/Spacer.ts
-var te = class extends HTMLElement {
-	constructor() {
-		super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
-	}
-	static get observedAttributes() {
-		return ["grow", "nogap"];
-	}
-	attributeChangedCallback(e, t, n) {
-		e === "grow" && (this.growValue = n || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
-	}
-	connectedCallback() {
-		this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && this.parentElement && (this.resizeObserver = new ResizeObserver(() => {
-			this.handleSizeChange();
-		}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
-	}
-	disconnectedCallback() {
-		this.resizeObserver?.disconnect(), this.recheckHandle &&= (cancelAnimationFrame(this.recheckHandle), void 0);
-	}
-	get grow() {
-		return this.getAttribute("grow");
-	}
-	set grow(e) {
-		this.setAttribute("grow", `${e}`);
-	}
-	scheduleRecheck() {
-		this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
-			this.recheckHandle = void 0, this.recalculateVisibility();
-		});
-	}
-	recalculateVisibility() {
-		this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
-	}
-	handleSizeChange() {
-		let e = this.getBoundingClientRect(), t = e.width === 0 && !this.isVertical || e.height === 0 && this.isVertical;
-		this.isZeroSized !== t && (this.isZeroSized = t, this.updateParticipation());
-	}
-	updateParticipation() {
-		this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
-	}
-	get nogap() {
-		return this.hasAttribute("nogap");
-	}
-	set nogap(e) {
-		e ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
-	}
-};
-customElements.get("px-spacer") || customElements.define("px-spacer", te);
-//#endregion
-//#region ../Layout/src/Page.css?inline
-var ne = ":host{box-sizing:border-box;display:block}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", S = new CSSStyleSheet();
-S.replaceSync(ne);
-var re = class extends n {
-	constructor() {
-		super(S), this.template = () => `
+var L = (s, t, e) => t.has(s) || W("Cannot " + e);
+var p = (s, t, e) => (L(s, t, "read from private field"), e ? e.call(s) : t.get(s)), x = (s, t, e) => t.has(s) ? W("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(s) : t.set(s, e), E = (s, t, e, i) => (L(s, t, "write to private field"), i ? i.call(s, e) : t.set(s, e), e), T = (s, t, e) => (L(s, t, "access private method"), e);
+import { WithExtraAttributes as M, AttributeBreakpointHandlerDelegate as nt, gapValues as lt, checkName as ct, log as f, backgroundColorValues as pt, PxElement as dt, accessibilityAttributes as ut, iconSizeValuesKC as ht } from "@proximus/lavender-common";
+const bt = ':host{display:block;--px-carousel-visible-items: 1;--px-carousel-gap-default: var(--px-spacing-default-desktop)}:host *{box-sizing:border-box}:host([visible-items="1"]){--px-carousel-visible-items: 1}:host([visible-items="2"]){--px-carousel-visible-items: 2}:host([visible-items="3"]){--px-carousel-visible-items: 3}:host([visible-items="4"]){--px-carousel-visible-items: 4}:host([visible-items="5"]){--px-carousel-visible-items: 5}:host([visible-items="6"]){--px-carousel-visible-items: 6}:host([visible-items="7"]){--px-carousel-visible-items: 7}:host([visible-items="8"]){--px-carousel-visible-items: 8}:host([visible-items="9"]){--px-carousel-visible-items: 9}:host([visible-items--mobile="1"]){--px-carousel-visible-items--mobile: 1}:host([visible-items--mobile="2"]){--px-carousel-visible-items--mobile: 2}:host([visible-items--mobile="3"]){--px-carousel-visible-items--mobile: 3}:host([visible-items--mobile="4"]){--px-carousel-visible-items--mobile: 4}:host([visible-items--mobile="5"]){--px-carousel-visible-items--mobile: 5}:host([visible-items--mobile="6"]){--px-carousel-visible-items--mobile: 6}:host([visible-items--mobile="7"]){--px-carousel-visible-items--mobile: 7}:host([visible-items--mobile="8"]){--px-carousel-visible-items--mobile: 8}:host([visible-items--mobile="9"]){--px-carousel-visible-items--mobile: 9}:host([visible-items--tablet="1"]){--px-carousel-visible-items--tablet: 1}:host([visible-items--tablet="2"]){--px-carousel-visible-items--tablet: 2}:host([visible-items--tablet="3"]){--px-carousel-visible-items--tablet: 3}:host([visible-items--tablet="4"]){--px-carousel-visible-items--tablet: 4}:host([visible-items--tablet="5"]){--px-carousel-visible-items--tablet: 5}:host([visible-items--tablet="6"]){--px-carousel-visible-items--tablet: 6}:host([visible-items--tablet="7"]){--px-carousel-visible-items--tablet: 7}:host([visible-items--tablet="8"]){--px-carousel-visible-items--tablet: 8}:host([visible-items--tablet="9"]){--px-carousel-visible-items--tablet: 9}:host([visible-items--laptop="1"]){--px-carousel-visible-items--laptop: 1}:host([visible-items--laptop="2"]){--px-carousel-visible-items--laptop: 2}:host([visible-items--laptop="3"]){--px-carousel-visible-items--laptop: 3}:host([visible-items--laptop="4"]){--px-carousel-visible-items--laptop: 4}:host([visible-items--laptop="5"]){--px-carousel-visible-items--laptop: 5}:host([visible-items--laptop="6"]){--px-carousel-visible-items--laptop: 6}:host([visible-items--laptop="7"]){--px-carousel-visible-items--laptop: 7}:host([visible-items--laptop="8"]){--px-carousel-visible-items--laptop: 8}:host([visible-items--laptop="9"]){--px-carousel-visible-items--laptop: 9}:host([visible-items--desktop="1"]){--px-carousel-visible-items--desktop: 1}:host([visible-items--desktop="2"]){--px-carousel-visible-items--desktop: 2}:host([visible-items--desktop="3"]){--px-carousel-visible-items--desktop: 3}:host([visible-items--desktop="4"]){--px-carousel-visible-items--desktop: 4}:host([visible-items--desktop="5"]){--px-carousel-visible-items--desktop: 5}:host([visible-items--desktop="6"]){--px-carousel-visible-items--desktop: 6}:host([visible-items--desktop="7"]){--px-carousel-visible-items--desktop: 7}:host([visible-items--desktop="8"]){--px-carousel-visible-items--desktop: 8}:host([visible-items--desktop="9"]){--px-carousel-visible-items--desktop: 9}:host([gap="default"]){--px-carousel-gap-default: var(--px-spacing-default-desktop)}:host([gap="s"]){--px-carousel-gap-default: var(--px-spacing-s-desktop)}:host([gap="xs"]){--px-carousel-gap-default: var(--px-spacing-xs-desktop)}:host([gap="2xs"]){--px-carousel-gap-default: var(--px-spacing-2xs-desktop)}:host([gap="l"]){--px-carousel-gap-default: var(--px-spacing-l-desktop)}:host([gap="none"]){--px-carousel-gap-default: 0}:host([gap--mobile="default"]){--px-carousel-gap-default--mobile: var(--px-spacing-default-mobile)}:host([gap--mobile="s"]){--px-carousel-gap-default--mobile: var(--px-spacing-s-mobile)}:host([gap--mobile="xs"]){--px-carousel-gap-default--mobile: var(--px-spacing-xs-mobile)}:host([gap--mobile="2xs"]){--px-carousel-gap-default--mobile: var(--px-spacing-2xs-mobile)}:host([gap--mobile="l"]){--px-carousel-gap-default--mobile: var(--px-spacing-l-mobile)}:host([gap--mobile="none"]){--px-carousel-gap-default--mobile: 0}:host([gap--tablet="default"]){--px-carousel-gap-default--tablet: var(--px-spacing-default-tablet)}:host([gap--tablet="s"]){--px-carousel-gap-default--tablet: var(--px-spacing-s-tablet)}:host([gap--tablet="xs"]){--px-carousel-gap-default--tablet: var(--px-spacing-xs-tablet)}:host([gap--tablet="2xs"]){--px-carousel-gap-default--tablet: var(--px-spacing-2xs-tablet)}:host([gap--tablet="l"]){--px-carousel-gap-default--tablet: var(--px-spacing-l-tablet)}:host([gap--tablet="none"]){--px-carousel-gap-default--tablet: 0}:host([gap--laptop="default"]){--px-carousel-gap-default--laptop: var(--px-spacing-default-laptop)}:host([gap--laptop="s"]){--px-carousel-gap-default--laptop: var(--px-spacing-s-laptop)}:host([gap--laptop="xs"]){--px-carousel-gap-default--laptop: var(--px-spacing-xs-laptop)}:host([gap--laptop="2xs"]){--px-carousel-gap-default--laptop: var(--px-spacing-2xs-laptop)}:host([gap--laptop="l"]){--px-carousel-gap-default--laptop: var(--px-spacing-l-laptop)}:host([gap--laptop="none"]){--px-carousel-gap-default--laptop: 0}:host([gap--desktop="default"]){--px-carousel-gap-default--desktop: var(--px-spacing-default-desktop)}:host([gap--desktop="s"]){--px-carousel-gap-default--desktop: var(--px-spacing-s-desktop)}:host([gap--desktop="xs"]){--px-carousel-gap-default--desktop: var(--px-spacing-xs-desktop)}:host([gap--desktop="2xs"]){--px-carousel-gap-default--desktop: var(--px-spacing-2xs-desktop)}:host([gap--desktop="l"]){--px-carousel-gap-default--desktop: var(--px-spacing-l-desktop)}:host([gap--desktop="none"]){--px-carousel-gap-default--desktop: 0}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-carousel-gap-default--desktop, var(--px-carousel-gap-default))}@media screen and (max-width: 47.938rem){.carousel{gap:var(--px-carousel-gap-default--mobile, var(--px-carousel-gap-default))}}@media screen and (min-width: 48rem) and (max-width: 64rem){.carousel{gap:var(--px-carousel-gap-default--tablet, var(--px-carousel-gap-default))}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.carousel{gap:var(--px-carousel-gap-default--laptop, var(--px-carousel-gap-default))}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media screen and (max-width: 47.938rem){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}', gt = "::slotted(*){border-radius:var(--px-radius-main);height:100%}.carousel-item{height:100%}:host{scroll-snap-align:start;align-items:center;justify-content:center;border-radius:var(--px-radius-main);background:#fff;overflow:hidden;--visible-items: var( --px-carousel-visible-items--desktop, var(--px-carousel-visible-items, 1) );--spacing: var( --px-carousel-gap-default--desktop, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)) );min-width:calc((100% - max(var(--visible-items),2) * var(--spacing)) / var(--visible-items) - 64px / max(var(--visible-items),2))}@media screen and (max-width: 47.938rem){:host{--visible-items: var( --px-carousel-visible-items--mobile, var(--px-carousel-visible-items, 1) );--spacing: var( --px-carousel-gap-default--mobile, var(--px-carousel-gap-default, var(--px-spacing-s-mobile)) )}}@media screen and (min-width: 48rem) and (max-width: 64rem){:host{--visible-items: var( --px-carousel-visible-items--tablet, var(--px-carousel-visible-items, 1) );--spacing: var( --px-carousel-gap-default--tablet, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)) )}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){:host{--visible-items: var( --px-carousel-visible-items--laptop, var(--px-carousel-visible-items, 1) );--spacing: var( --px-carousel-gap-default--laptop, var(--px-carousel-gap-default, var(--px-spacing-s-desktop)) )}}@media screen and (max-width: 48rem){:host{scroll-snap-align:center;flex:1 0 var( --px-carousel-min-width-mobile, var(--px-carousel-min-width-all-mobile) )!important}}@media screen and (min-width: 48rem) and (max-width: 64rem){:host{flex:1 0 var( --px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet) )!important}}", vt = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media screen and (max-width: 47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 48rem){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media screen and (min-width: 48rem) and (max-width: 64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 64.0625rem){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media screen and (min-width: 90.0625rem){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', B = new CSSStyleSheet();
+B.replaceSync(vt);
+const xt = [
+  "",
+  "default",
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse"
+], mt = [
+  "",
+  "default",
+  "stretch",
+  "flex-start",
+  "start",
+  "flex-end",
+  "end",
+  "center",
+  "baseline"
+], ft = [
+  "",
+  "default",
+  "flex-start",
+  "start",
+  "flex-end",
+  "end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly"
+], kt = ["", "default", "nowrap", "wrap", "wrap-reverse"], wt = ["", "visible", "hidden", "scroll", "auto"];
+class P extends M {
+  constructor() {
+    super(B), this.overflowXAttributeDelegate = new nt(
+      this,
+      "overflow-x",
+      (t) => t,
+      "--overflow-x"
+    ), this.template = `<div class="flex-container">
+      <slot></slot>
+  </div>`, this.shadowRoot.innerHTML = this.template;
+  }
+  connectedCallback() {
+    this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap"), this.hasAttribute("overflow-x") || this.overflowXAttributeDelegate.init("visible");
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "direction",
+      "direction--mobile",
+      "direction--tablet",
+      "direction--laptop",
+      "direction--desktop",
+      "gap",
+      "gap--mobile",
+      "gap--tablet",
+      "gap--laptop",
+      "gap--desktop",
+      "justify-content",
+      "justify-content--mobile",
+      "justify-content--tablet",
+      "justify-content--laptop",
+      "justify-content--desktop",
+      "align-items",
+      "align-items--mobile",
+      "align-items--tablet",
+      "align-items--laptop",
+      "align-items--desktop",
+      "wrap",
+      "wrap--mobile",
+      "wrap--tablet",
+      "wrap--laptop",
+      "wrap--desktop",
+      "overflow-x",
+      "overflow-x--mobile",
+      "overflow-x--tablet",
+      "overflow-x--laptop",
+      "overflow-x--desktop"
+    ];
+  }
+  attributeChangedCallback(t, e, i) {
+    switch (t) {
+      case "gap":
+      case "gap--mobile":
+      case "gap--tablet":
+      case "gap--laptop":
+      case "gap--desktop":
+        this.updateFlexProperties(t, e, i, lt);
+        break;
+      case "justify-content":
+      case "justify-content--mobile":
+      case "justify-content--tablet":
+      case "justify-content--laptop":
+      case "justify-content--desktop":
+        this.updateFlexProperties(
+          t,
+          e,
+          i,
+          ft
+        );
+        break;
+      case "align-items":
+      case "align-items--mobile":
+      case "align-items--tablet":
+      case "align-items--laptop":
+      case "align-items--desktop":
+        this.updateFlexProperties(t, e, i, mt);
+        break;
+      case "wrap":
+      case "wrap--mobile":
+      case "wrap--tablet":
+      case "wrap--laptop":
+      case "wrap--desktop":
+        this.updateFlexProperties(t, e, i, kt);
+        break;
+      case "direction":
+      case "direction--mobile":
+      case "direction--tablet":
+      case "direction--laptop":
+      case "direction--desktop":
+        this.updateFlexProperties(t, e, i, xt);
+        break;
+      case "overflow-x":
+      case "overflow-x--mobile":
+      case "overflow-x--tablet":
+      case "overflow-x--laptop":
+      case "overflow-x--desktop":
+        this.updateOverflowX(t, e, i, wt);
+        break;
+      default:
+        super.attributeChangedCallback(t, e, i);
+        break;
+    }
+  }
+  updateOverflowX(t, e, i, a) {
+    if (!ct(a, i)) {
+      f(
+        `"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${a.join('", "')}".`
+      );
+      return;
+    }
+    this.overflowXAttributeDelegate.attributeChangedCallback(
+      t,
+      e,
+      i
+    );
+  }
+  updateFlexProperties(t, e, i, a) {
+    this.checkName(a, i) || f(
+      `"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${a.join('", "')}".`
+    );
+    const r = t.indexOf("--") > -1, o = r ? t.split("--")[0] : t, l = [];
+    if (!r)
+      this.getAttribute(o + "--mobile") || l.push("mobile"), this.getAttribute(o + "--tablet") || l.push("tablet"), this.getAttribute(o + "--laptop") || l.push("laptop"), this.getAttribute(o + "--desktop") || l.push("desktop"), l.forEach((c) => {
+        this.updateStyle(o, c, e, a), this.updateStyle(o, c, i, a);
+      });
+    else {
+      const c = t.split("--")[1];
+      this.updateStyle(o, c, e, a), this.updateStyle(o, c, i, a);
+    }
+  }
+  updateStyle(t, e, i, a) {
+    i && (t === "gap" && a && a.includes(i) ? (this.$el.style.setProperty(
+      `--flex-${t}--${e}-value`,
+      `var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
+    ), this.style.setProperty(
+      `--host-gap--${e}`,
+      `var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
+    )) : this.$el.style.setProperty(
+      `--flex-${t}--${e}-value`,
+      i
+    ));
+  }
+  get direction() {
+    return this.getAttribute("direction");
+  }
+  set direction(t) {
+    this.setAttribute("direction", t);
+  }
+  get directionMobile() {
+    return this.getAttribute("direction--mobile");
+  }
+  set directionMobile(t) {
+    this.setAttribute("direction--mobile", t);
+  }
+  get directionTablet() {
+    return this.getAttribute("direction--tablet");
+  }
+  set directionTablet(t) {
+    this.setAttribute("direction--tablet", t);
+  }
+  get directionLaptop() {
+    return this.getAttribute("direction--laptop");
+  }
+  set directionLaptop(t) {
+    this.setAttribute("direction--laptop", t);
+  }
+  get directionDesktop() {
+    return this.getAttribute("direction--desktop");
+  }
+  set directionDesktop(t) {
+    this.setAttribute("direction--desktop", t);
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  set gap(t) {
+    this.setAttribute("gap", t);
+  }
+  get gapMobile() {
+    return this.getAttribute("gap--mobile");
+  }
+  set gapMobile(t) {
+    this.setAttribute("gap--mobile", t);
+  }
+  get gapTablet() {
+    return this.getAttribute("gap--tablet");
+  }
+  set gapTablet(t) {
+    this.setAttribute("gap--tablet", t);
+  }
+  get gapLaptop() {
+    return this.getAttribute("gap--laptop");
+  }
+  set gapLaptop(t) {
+    this.setAttribute("gap--laptop", t);
+  }
+  get gapDesktop() {
+    return this.getAttribute("gap--desktop");
+  }
+  set gapDesktop(t) {
+    this.setAttribute("gap--desktop", t);
+  }
+  get justifyContent() {
+    return this.getAttribute("justify-content");
+  }
+  set justifyContent(t) {
+    this.setAttribute("justify-content", t);
+  }
+  get justifyContentMobile() {
+    return this.getAttribute("justify-content--mobile");
+  }
+  set justifyContentMobile(t) {
+    this.setAttribute("justify-content--mobile", t);
+  }
+  get justifyContentTablet() {
+    return this.getAttribute("justify-content--tablet");
+  }
+  set justifyContentTablet(t) {
+    this.setAttribute("justify-content--tablet", t);
+  }
+  get justifyContentLaptop() {
+    return this.getAttribute("justify-content--laptop");
+  }
+  set justifyContentLaptop(t) {
+    this.setAttribute("justify-content--laptop", t);
+  }
+  get justifyContentDesktop() {
+    return this.getAttribute("justify-content--desktop");
+  }
+  set justifyContentDesktop(t) {
+    this.setAttribute("justify-content--desktop", t);
+  }
+  get alignItems() {
+    return this.getAttribute("align-items");
+  }
+  set alignItems(t) {
+    this.setAttribute("align-items", t);
+  }
+  get alignItemsMobile() {
+    return this.getAttribute("align-items--mobile");
+  }
+  set alignItemsMobile(t) {
+    this.setAttribute("align-items--mobile", t);
+  }
+  get alignItemsTablet() {
+    return this.getAttribute("align-items--tablet");
+  }
+  set alignItemsTablet(t) {
+    this.setAttribute("align-items--tablet", t);
+  }
+  get alignItemsLaptop() {
+    return this.getAttribute("align-items--laptop");
+  }
+  set alignItemsLaptop(t) {
+    this.setAttribute("align-items--laptop", t);
+  }
+  get alignItemsDesktop() {
+    return this.getAttribute("align-items--desktop");
+  }
+  set alignItemsDesktop(t) {
+    this.setAttribute("align-items--desktop", t);
+  }
+  get wrap() {
+    return this.getAttribute("wrap");
+  }
+  set wrap(t) {
+    this.setAttribute("wrap", t);
+  }
+  get wrapMobile() {
+    return this.getAttribute("wrap--mobile");
+  }
+  set wrapMobile(t) {
+    this.setAttribute("wrap--mobile", t);
+  }
+  get wrapTablet() {
+    return this.getAttribute("wrap--tablet");
+  }
+  set wrapTablet(t) {
+    this.setAttribute("wrap--tablet", t);
+  }
+  get wrapLaptop() {
+    return this.getAttribute("wrap--laptop");
+  }
+  set wrapLaptop(t) {
+    this.setAttribute("wrap--laptop", t);
+  }
+  get wrapDesktop() {
+    return this.getAttribute("wrap--desktop");
+  }
+  set wrapDesktop(t) {
+    this.setAttribute("wrap--desktop", t);
+  }
+  get overflowX() {
+    return this.getAttribute("overflow-x");
+  }
+  set overflowX(t) {
+    this.setAttribute("overflow-x", t);
+  }
+  get overflowXMobile() {
+    return this.getAttribute("overflow-x--mobile");
+  }
+  set overflowXMobile(t) {
+    this.setAttribute("overflow-x--mobile", t);
+  }
+  get overflowXTablet() {
+    return this.getAttribute("overflow-x--tablet");
+  }
+  set overflowXTablet(t) {
+    this.setAttribute("overflow-x--tablet", t);
+  }
+  get overflowXLaptop() {
+    return this.getAttribute("overflow-x--laptop");
+  }
+  set overflowXLaptop(t) {
+    this.setAttribute("overflow-x--laptop", t);
+  }
+  get overflowXDesktop() {
+    return this.getAttribute("overflow-x--desktop");
+  }
+  set overflowXDesktop(t) {
+    this.setAttribute("overflow-x--desktop", t);
+  }
+  get $el() {
+    return this.shadowRoot.querySelector(".flex-container");
+  }
+}
+customElements.get("px-stack") || customElements.define("px-stack", P);
+class yt extends P {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
+  }
+}
+customElements.get("px-vstack") || customElements.define("px-vstack", yt);
+class At extends P {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
+  }
+}
+customElements.get("px-hstack") || customElements.define("px-hstack", At);
+class $t extends HTMLElement {
+  constructor() {
+    super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
+  }
+  static get observedAttributes() {
+    return ["grow", "nogap"];
+  }
+  attributeChangedCallback(t, e, i) {
+    t === "grow" && (this.growValue = i || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
+  }
+  connectedCallback() {
+    this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && (this.resizeObserver = new ResizeObserver(() => {
+      this.handleSizeChange();
+    }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.resizeObserver) == null || t.disconnect(), this.recheckHandle && (cancelAnimationFrame(this.recheckHandle), this.recheckHandle = void 0);
+  }
+  get grow() {
+    return this.getAttribute("grow");
+  }
+  set grow(t) {
+    this.setAttribute("grow", t);
+  }
+  scheduleRecheck() {
+    this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
+      this.recheckHandle = void 0, this.recalculateVisibility();
+    });
+  }
+  recalculateVisibility() {
+    this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
+  }
+  handleSizeChange() {
+    const t = this.getBoundingClientRect(), e = t.width === 0 && !this.isVertical || t.height === 0 && this.isVertical;
+    this.isZeroSized !== e && (this.isZeroSized = e, this.updateParticipation());
+  }
+  updateParticipation() {
+    this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
+  }
+  get nogap() {
+    return this.hasAttribute("nogap");
+  }
+  set nogap(t) {
+    t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
+  }
+}
+customElements.get("px-spacer") || customElements.define("px-spacer", $t);
+const St = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", U = new CSSStyleSheet();
+U.replaceSync(St);
+class Ct extends M {
+  constructor() {
+    super(U), this.template = (t) => `
     <px-container border-radius="none" padding="none">
       <px-vstack>
         <px-container id="header-container" border-radius="none">
@@ -447,6 +469,15 @@ var re = class extends n {
             <px-spacer></px-spacer>
           </px-hstack>
         </px-container>
+        ${t ? ` <px-hstack>
+        <px-spacer></px-spacer>
+        <px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
+          <px-vstack gap="s">
+            <slot name="image-sticky-container"></slot>
+          </px-vstack>
+        </px-container>
+        <px-spacer></px-spacer>
+      </px-hstack>` : ""}
         <px-container
           id="body-container"
           id="main"
@@ -503,217 +534,220 @@ var re = class extends n {
         </px-container>
       </px-vstack>
     </px-container>
-  `, this.shadowRoot.innerHTML = this.template();
-	}
-	static get observedAttributes() {
-		return [
-			...super.observedAttributes,
-			"background-image",
-			"gap",
-			"background-color",
-			"padding-vertical",
-			"padding-horizontal"
-		];
-	}
-	get $wideImage() {
-		return this.shadowRoot.querySelector("#image-box");
-	}
-	get $bodyVStackContainer() {
-		return this.shadowRoot.querySelector("#header-vstack-container");
-	}
-	get $bodyContainer() {
-		return this.shadowRoot.querySelector("#body-container");
-	}
-	get $contactContainer() {
-		return this.shadowRoot.querySelector("#contact-container");
-	}
-	get $footerContainer() {
-		return this.shadowRoot.querySelector("#footer-container");
-	}
-	get $headerContainer() {
-		return this.shadowRoot.querySelector("#header-container");
-	}
-	get $imageContainer() {
-		return this.shadowRoot.querySelector("#image-container");
-	}
-	get backgroundImage() {
-		return this.getAttribute("background-image");
-	}
-	get $main() {
-		return this.shadowRoot.querySelector("#main");
-	}
-	get backgroundColor() {
-		return this.getAttribute("background-color") || "none";
-	}
-	get paddingVertical() {
-		return this.getAttribute("padding-vertical");
-	}
-	get paddingHorizontal() {
-		return this.getAttribute("padding-horizontal");
-	}
-	set paddingVertical(e) {
-		this.setAttribute("padding-vertical", `${e}`);
-	}
-	set paddingHorizontal(e) {
-		this.setAttribute("padding-horizontal", `${e}`);
-	}
-	get gap() {
-		return this.getAttribute("gap");
-	}
-	connectedCallback() {
-		this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
-	}
-	attributeChangedCallback(e, t, n) {
-		if (t !== n) switch (e) {
-			case "background-image":
-				this.$imageContainer.setAttribute("background-image", n);
-				break;
-			case "gap":
-				this.$bodyVStackContainer.setAttribute("gap", n);
-				break;
-			case "background-color":
-				this.$bodyContainer.setAttribute("background-color", i.indexOf(n) > 0 ? n : "none");
-				break;
-			case "padding-vertical":
-				this.handlePaddingVerticalChange(n);
-				break;
-			case "padding-horizontal":
-				this.handlePaddingHorizontalChange(n);
-				break;
-			default: super.attributeChangedCallback(e, t, n);
-		}
-	}
-	handlePaddingVerticalChange(e) {
-		this.$bodyContainer.paddingTop = e, this.$bodyContainer.paddingBottom = e;
-	}
-	handlePaddingHorizontalChange(e) {
-		this.$headerContainer.paddingLeft = e, this.$headerContainer.paddingRight = e, this.$bodyContainer.paddingLeft = e, this.$bodyContainer.paddingRight = e, this.$contactContainer.paddingLeft = e, this.$contactContainer.paddingRight = e, this.$footerContainer.paddingLeft = e, this.$footerContainer.paddingRight = e, this.$imageContainer.paddingLeft = e, this.$imageContainer.paddingRight = e;
-	}
-};
-customElements.get("px-page") === void 0 && customElements.define("px-page", re);
-//#endregion
-//#region ../ButtonIcon/src/buttonicon.css?inline
-var ie = ".btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon{font-size:var(--px-font-size-base);width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;cursor:pointer;--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent;justify-content:center;align-items:center;display:inline-flex}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{color:var(--px-color-icon-brand-default);background-color:#0000;width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:#0000}:host([inverted]) .btn-icon.btn-icon--variant-naked{color:var(--px-color-icon-brand-inverted);background-color:#0000}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media screen and (width>=48rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media screen and (width>=64.0625rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}", C = new CSSStyleSheet();
-C.replaceSync(ie);
-var w = [
-	"",
-	"default",
-	"small"
-], T = [
-	"",
-	"default",
-	"secondary",
-	"naked"
-], E = class e extends t {
-	static {
-		this.nativeName = "button";
-	}
-	constructor() {
-		super(C), this.template = () => "<slot></slot>";
-		let t = document.createElement(e.nativeName);
-		t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
-	}
-	static get observedAttributes() {
-		return [
-			...super.observedAttributes,
-			...r,
-			"inverted",
-			"loading",
-			"size",
-			"variant",
-			"aria-expanded"
-		];
-	}
-	connectedCallback() {
-		let e = this.querySelector("px-icon");
-		if (e) {
-			let t = e.getAttribute("size"), n = e.getAttribute("color");
-			e.addEventListener("click", () => {
-				this.$el.focus();
-			}), t || e.setAttribute("size", "s"), this.size === "small" && e.setAttribute("size", "xs"), n || e.setAttribute("color", "inherit");
-		}
-	}
-	attributeChangedCallback(e, t, n) {
-		if (t !== n) switch (e) {
-			case "loading":
-				this.updateLoading();
-				break;
-			case "size":
-				this.updateSize(t, n);
-				break;
-			case "variant":
-				this.updateVariant(t, n);
-				break;
-			case "aria-expanded":
-				n && (this.$el.setAttribute("aria-expanded", n), this.removeAttribute("aria-expanded"));
-				break;
-			default: super.attributeChangedCallback(e, t, n);
-		}
-	}
-	_toggleClass(e, t) {
-		e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(e), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(t);
-	}
-	updateLoading() {
-		this.$el.classList.toggle("btn-icon--state-loading");
-	}
-	updateSize(e, t) {
-		this.checkName(w, t) ? (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`)) : l(`"${t}" is not a valid size value for ${this.tagName.toLowerCase()}. Allowed values are: "${w.join("\", \"")}".`);
-	}
-	updateVariant(e, t) {
-		this.checkName(T, t) ? (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`)) : l(`"${t}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${T.join("\", \"")}".`);
-	}
-	get inverted() {
-		return this.hasAttribute("inverted");
-	}
-	set inverted(e) {
-		this._updateBooleanAttribute("inverted", e);
-	}
-	get loading() {
-		return this.hasAttribute("loading");
-	}
-	set loading(e) {
-		this._updateBooleanAttribute("loading", e);
-	}
-	get size() {
-		return this.getAttribute("size");
-	}
-	set size(e) {
-		this._updateAttribute("size", e);
-	}
-	get variant() {
-		return this.getAttribute("variant");
-	}
-	set variant(e) {
-		this._updateAttribute("variant", e);
-	}
-	get ariaExpanded() {
-		return this.getAttribute("aria-expanded");
-	}
-	set ariaExpanded(e) {
-		this._updateAttribute("aria-expanded", e);
-	}
+  `, this.shadowRoot.innerHTML = this.template(!!this.$imageStickySlot);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "background-image",
+      "gap",
+      "background-color",
+      "padding-vertical",
+      "padding-horizontal"
+    ];
+  }
+  get $wideImage() {
+    return this.shadowRoot.querySelector("#image-box");
+  }
+  get $bodyVStackContainer() {
+    return this.shadowRoot.querySelector("#header-vstack-container");
+  }
+  get $bodyContainer() {
+    return this.shadowRoot.querySelector("#body-container");
+  }
+  get $contactContainer() {
+    return this.shadowRoot.querySelector("#contact-container");
+  }
+  get $footerContainer() {
+    return this.shadowRoot.querySelector("#footer-container");
+  }
+  get $headerContainer() {
+    return this.shadowRoot.querySelector("#header-container");
+  }
+  get $imageContainer() {
+    return this.shadowRoot.querySelector("#image-container");
+  }
+  get backgroundImage() {
+    return this.getAttribute("background-image");
+  }
+  get $imageStickySlot() {
+    return this.querySelector('*[slot="image-sticky-container"]');
+  }
+  get $main() {
+    return this.shadowRoot.querySelector("#main");
+  }
+  get backgroundColor() {
+    return this.getAttribute("background-color") || "none";
+  }
+  get paddingVertical() {
+    return this.getAttribute("padding-vertical");
+  }
+  get paddingHorizontal() {
+    return this.getAttribute("padding-horizontal");
+  }
+  set paddingVertical(t) {
+    this.setAttribute("padding-vertical", t);
+  }
+  set paddingHorizontal(t) {
+    this.setAttribute("padding-horizontal", t);
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  connectedCallback() {
+    this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      switch (t) {
+        case "background-image":
+          this.$imageContainer.setAttribute("background-image", i);
+          break;
+        case "gap":
+          this.$bodyVStackContainer.setAttribute("gap", i);
+          break;
+        case "background-color":
+          this.$bodyContainer.setAttribute(
+            "background-color",
+            pt.indexOf(i) > 0 ? i : "none"
+          );
+          break;
+        case "padding-vertical":
+          this.handlePaddingVerticalChange(i);
+          break;
+        case "padding-horizontal":
+          this.handlePaddingHorizontalChange(i);
+          break;
+        default:
+          super.attributeChangedCallback(t, e, i);
+      }
+  }
+  handlePaddingVerticalChange(t) {
+    this.$headerContainer.setAttribute("padding-top", t), this.$footerContainer.setAttribute("padding-bottom", t);
+  }
+  handlePaddingHorizontalChange(t) {
+    this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
+  }
+}
+customElements.get("px-page") === void 0 && customElements.define("px-page", Ct);
+const zt = ".btn-icon{font-size:var(--px-font-size-base);display:inline-flex;width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-default);width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon.btn-icon--variant-naked{background-color:transparent;color:var(--px-color-icon-brand-inverted)}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media screen and (min-width: 48rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media screen and (min-width: 64.0625rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}", K = new CSSStyleSheet();
+K.replaceSync(zt);
+const X = ["", "default", "small"], F = [
+  "",
+  "default",
+  "secondary",
+  "naked"
+], $ = class $ extends dt {
+  constructor() {
+    super(K), this.template = () => "<slot></slot>";
+    const t = document.createElement($.nativeName);
+    t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      ...ut,
+      "inverted",
+      "loading",
+      "size",
+      "variant",
+      "aria-expanded"
+    ];
+  }
+  connectedCallback() {
+    const t = this.querySelector("px-icon");
+    if (t) {
+      const e = t.getAttribute("size"), i = t.getAttribute("color");
+      t.addEventListener("click", () => {
+        this.$el.focus();
+      }), e || t.setAttribute("size", "s"), this.size === "small" && t.setAttribute("size", "xs"), i || t.setAttribute("color", "inherit");
+    }
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      switch (t) {
+        case "loading":
+          this.updateLoading();
+          break;
+        case "size":
+          this.updateSize(e, i);
+          break;
+        case "variant":
+          this.updateVariant(e, i);
+          break;
+        case "aria-expanded":
+          i && (this.$el.setAttribute("aria-expanded", i), this.removeAttribute("aria-expanded"));
+          break;
+        default:
+          super.attributeChangedCallback(t, e, i);
+          break;
+      }
+  }
+  _toggleClass(t, e) {
+    t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(t), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(e);
+  }
+  updateLoading() {
+    this.$el.classList.toggle("btn-icon--state-loading");
+  }
+  updateSize(t, e) {
+    this.checkName(X, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`)) : f(
+      `"${e}" is not a valid size value for ${this.tagName.toLowerCase()}. Allowed values are: "${X.join('", "')}".`
+    );
+  }
+  updateVariant(t, e) {
+    this.checkName(F, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`)) : f(
+      `"${e}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${F.join('", "')}".`
+    );
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(t) {
+    this.setAttribute("inverted", t);
+  }
+  get loading() {
+    return this.getAttribute("loading");
+  }
+  set loading(t) {
+    this.setAttribute("loading", t);
+  }
+  get size() {
+    return this.getAttribute("size");
+  }
+  set size(t) {
+    this.setAttribute("size", t);
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(t) {
+    this.setAttribute("variant", t);
+  }
+  get ariaExpanded() {
+    return this.getAttribute("aria-expanded");
+  }
+  set ariaExpanded(t) {
+    t ? this.setAttribute("aria-expanded", t) : this.removeAttribute("aria-expanded");
+  }
 };
-customElements.get("px-button-icon") || customElements.define("px-button-icon", E);
-//#endregion
-//#region ../Icon/common/src/IconSet.ts
-var ae = class extends HTMLElement {
-	constructor() {
-		super();
-	}
-	static get observedAttributes() {
-		return [
-			"name",
-			"src",
-			"type",
-			"format"
-		];
-	}
-	connectedCallback() {
-		if (document.querySelectorAll(`px-icon-set[name="${this.getAttribute("name")}"]`).length > 1 && (console.warn("Only one <px-icon-set> component is allowed, self removing"), this.remove()), this.getAttribute("type") === "font") {
-			let e = document.createElement("style");
-			e.setAttribute("type", "text/css");
-			let t = this.getAttribute("name");
-			t && e.setAttribute("data-name", t), e.textContent = `
+$.nativeName = "button";
+let I = $;
+customElements.get("px-button-icon") || customElements.define("px-button-icon", I);
+class jt extends HTMLElement {
+  constructor() {
+    super();
+  }
+  static get observedAttributes() {
+    return ["name", "src", "type", "format"];
+  }
+  connectedCallback() {
+    if (document.querySelectorAll(
+      `px-icon-set[name="${this.getAttribute("name")}"]`
+    ).length > 1 && (console.warn(
+      "Only one <px-icon-set> component is allowed, self removing"
+    ), this.remove()), this.getAttribute("type") === "font") {
+      const e = document.createElement("style");
+      e.setAttribute("type", "text/css"), e.setAttribute("data-name", this.getAttribute("name")), e.textContent = `
 @font-face {
   font-family: 'lavender';
   src:
@@ -723,375 +757,425 @@ var ae = class extends HTMLElement {
   font-display: block;
 }
       `, document.head.appendChild(e);
-		}
-	}
-	disconnectedCallback() {
-		let e = document.querySelector(`style[data-name="${this.getAttribute("name")}"]`);
-		e && e.remove();
-	}
-};
-customElements.get("px-icon-set") || customElements.define("px-icon-set", ae);
-var oe = [
-	"Inherit",
-	"Brand",
-	"Accent",
-	"Neutral",
-	"Dimmed",
-	"PurposeSuccess",
-	"PurposeWarning",
-	"PurposeError",
-	"PurposeUnlimited",
-	"PurposePromo",
-	"StateHover",
-	"StateActive",
-	"StateDisabled"
-].map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)), se = ":host{flex-direction:column;justify-content:center;display:inline-flex}svg{font-size:var(--px-size-icon-s);width:1em;height:1em;color:var(--px-color-icon-accent-default);line-height:1}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", D = new CSSStyleSheet();
-D.replaceSync(se);
-var O = class extends n {
-	#e = null;
-	#t;
-	#n = () => "<svg aria-hidden=\"true\">\n      <use></use>\n    </svg>";
-	static get observedAttributes() {
-		return [
-			...super.observedAttributes,
-			"name",
-			"size",
-			"color",
-			"aria-label",
-			"inverted",
-			"from",
-			"disabled"
-		];
-	}
-	constructor(...e) {
-		super(...e, D), this.shadowRoot.innerHTML = this.#n(), this.#t = this.attachInternals?.(), this.#t && (this.#t.role = "img");
-	}
-	attributeChangedCallback(e, t, n) {
-		if (t !== n) switch (e) {
-			case "name":
-				this.updateName(t, n);
-				break;
-			case "size":
-				this.updateAttribute(e, t, n, c);
-				break;
-			case "color":
-				this.updateAttribute(e, t, n, oe);
-				break;
-			case "disabled":
-				this.color = "state-disabled";
-				break;
-			case "aria-label":
-				if (!this.#t) return;
-				n ? (this.#t.ariaHidden = "false", this.ariaHidden = "false") : (this.#t.ariaHidden = "true", this.ariaHidden = "true");
-		}
-	}
-	connectedCallback() {
-		this.role = "img";
-		let e = document.querySelectorAll("px-icon-set");
-		e || console.log("<px-icon-set> component not found");
-		for (let t of e) {
-			if (!t.getAttribute("name") || !t.getAttribute("src")) {
-				console.error("Icon name or src not found");
-				continue;
-			}
-			t.getAttribute("name") === this.from && t.getAttribute("type") !== "font" && (this.#e = t.getAttribute("src"), this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${this.name}`));
-		}
-		!this.ariaLabel && this.#t && (this.#t.ariaHidden = "true", this.ariaHidden = "true"), this.parentElement?.localName === "px-a" && this.slot !== "before" && this.slot !== "after" && (this.color || this.setAttribute("color", "inherit"));
-	}
-	updateAttribute(e, t, n, r) {
-		t !== null && t !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${t}`) : this.$el.classList.toggle(t)), n !== null && n !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${n}`) : this.$el.classList.toggle(n)), this.checkName(r, n) || l(`${n} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`);
-	}
-	updateName(e, t) {
-		this.#e && this.$el.firstElementChild?.setAttribute("href", `${this.#e}#icon-${t}`);
-	}
-	get $el() {
-		return this.shadowRoot.querySelector("svg");
-	}
-	get name() {
-		return this.getAttribute("name");
-	}
-	set name(e) {
-		u(this, "name", e);
-	}
-	get size() {
-		return this.getAttribute("size");
-	}
-	set size(e) {
-		u(this, "size", e);
-	}
-	get color() {
-		return this.getAttribute("color");
-	}
-	set color(e) {
-		u(this, "color", e);
-	}
-	get arialabel() {
-		return this.getAttribute("aria-label");
-	}
-	set arialabel(e) {
-		u(this, "aria-label", e);
-	}
-	get inverted() {
-		return this.hasAttribute("inverted");
-	}
-	set inverted(e) {
-		a(this, "inverted", e);
-	}
-	get from() {
-		return this.getAttribute("from");
-	}
-	set from(e) {
-		u(this, "from", e);
-	}
-	get disabled() {
-		return this.hasAttribute("disabled");
-	}
-	set disabled(e) {
-		a(this, "disabled", e);
-	}
-};
-customElements.get("px-icon") || customElements.define("px-icon", O);
-//#endregion
-//#region src/appleseed.css?inline
-var k = ":host{--px-appleseed-size-l:14px;--px-appleseed-size-m:10px;--px-appleseed-size-s:6px;--px-appleseed-size-xs:4px}.container{display:flex}:is(.container:has(#seed-0.appleseed-6-plus[active]),.container:has(#seed-1.appleseed-6-plus[active])) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}:is(.container:has(#seed-0.appleseed-6-plus[active]),.container:has(#seed-1.appleseed-6-plus[active])) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}:is(.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2),.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4))>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}:is(.container:has(#seed-2.appleseed-6-plus[active]) :first-child,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5))>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :first-child>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :first-child>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);justify-content:center;align-items:center;display:flex}@media screen and (width<=47.938rem){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}:is(.appleseed-6-plus,.appleseed-6-minus)>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}:is(.appleseed-6-plus,.appleseed-6-minus)[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}", A = new CSSStyleSheet();
-A.replaceSync(k);
-var j = class extends HTMLElement {
-	constructor() {
-		super(), this.template = (e, t) => `<div class="container">
-      ${Array.from({ length: Math.min(e, 5) }, (n, r) => `<div id="seed-${r}" ${t === r ? "active" : ""} class="appleseed ${e > 5 ? "appleseed-6-plus" : "appleseed-6-minus"}">
+    }
+  }
+  disconnectedCallback() {
+    const t = document.querySelector(
+      `style[data-name="${this.getAttribute("name")}"]`
+    );
+    t && t.remove();
+  }
+}
+customElements.get("px-icon-set") || customElements.define("px-icon-set", jt);
+const Lt = [
+  "Brand",
+  "Accent",
+  "Neutral",
+  "Dimmed",
+  "PurposeSuccess",
+  "PurposeWarning",
+  "PurposeError",
+  "PurposeUnlimited",
+  "PurposePromo",
+  "StateHover",
+  "StateActive",
+  "StateDisabled"
+], Et = ["Inherit", ...Lt].map(
+  (s) => s.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
+), Tt = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:1;width:1em;height:1em;color:var(--px-color-icon-accent-default)}.inherit{color:inherit}.brand{color:var(--px-color-icon-brand-default)}.accent{color:var(--px-color-icon-accent-default)}.neutral{color:var(--px-color-icon-neutral-default)}.dimmed{color:var(--px-color-icon-dimmed-default)}.purpose-success{color:var(--px-color-icon-purpose-success-default)}.purpose-warning{color:var(--px-color-icon-purpose-warning-default)}.purpose-error{color:var(--px-color-icon-purpose-error-default)}.purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-default)}.purpose-promo{color:var(--px-color-icon-purpose-promo-default)}.state-hover:hover{color:var(--px-color-icon-state-hover-default)}.state-active:active{color:var(--px-color-icon-state-active-default)}.state-disabled{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) svg{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .brand{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .accent{color:var(--px-color-icon-accent-inverted)}:host([inverted]) .neutral{color:var(--px-color-icon-neutral-inverted)}:host([inverted]) .dimmed{color:var(--px-color-icon-dimmed-inverted)}:host([inverted]) .purpose-success{color:var(--px-color-icon-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-color-icon-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-color-icon-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-color-icon-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-color-icon-purpose-promo-inverted)}:host([inverted]) .state-hover:hover{color:var(--px-color-icon-state-hover-inverted)}:host([inverted]) .state-active:active{color:var(--px-color-icon-state-active-inverted)}:host([inverted]) .state-disabled{color:var(--px-color-icon-state-disabled-inverted)}.size-xs{font-size:var(--px-size-icon-xs)}.size-s{font-size:var(--px-size-icon-s)}.size-m{font-size:var(--px-size-icon-m)}.size-l{font-size:var(--px-size-icon-l)}.size-xl{font-size:var(--px-size-icon-xl)}", J = new CSSStyleSheet();
+J.replaceSync(Tt);
+var h, d, S;
+class Rt extends M {
+  constructor(...e) {
+    var i;
+    super(...e, J);
+    x(this, h);
+    x(this, d);
+    x(this, S, () => `<svg aria-hidden="true">
+      <use></use>
+    </svg>`);
+    this.shadowRoot.innerHTML = p(this, S).call(this), E(this, d, (i = this.attachInternals) == null ? void 0 : i.call(this)), p(this, d) && (p(this, d).role = "img");
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "name",
+      "size",
+      "color",
+      "aria-label",
+      "inverted",
+      "from",
+      "disabled"
+    ];
+  }
+  attributeChangedCallback(e, i, a) {
+    if (i !== a)
+      switch (e) {
+        case "name":
+          this.updateName(i, a);
+          break;
+        case "size":
+          this.updateAttribute(e, i, a, ht);
+          break;
+        case "color":
+          this.updateAttribute(e, i, a, Et);
+          break;
+        case "disabled":
+          this.color = "state-disabled";
+          break;
+        case "aria-label":
+          if (!p(this, d))
+            return;
+          a ? (p(this, d).ariaHidden = "false", this.ariaHidden = "false") : (p(this, d).ariaHidden = "true", this.ariaHidden = "true");
+          break;
+      }
+  }
+  connectedCallback() {
+    var i;
+    this.role = "img";
+    const e = document.querySelectorAll("px-icon-set");
+    e || console.log("<px-icon-set> component not found");
+    for (const a of e) {
+      if (!a.getAttribute("name") || !a.getAttribute("src")) {
+        console.error("Icon name or src not found");
+        continue;
+      }
+      a.getAttribute("name") === this.from && a.getAttribute("type") !== "font" && (E(this, h, a.getAttribute("src")), this.$el.firstElementChild.setAttribute(
+        "href",
+        `${p(this, h)}#icon-${this.name}`
+      ));
+    }
+    !this.ariaLabel && p(this, d) && (p(this, d).ariaHidden = "true", this.ariaHidden = "true"), ((i = this.parentElement) == null ? void 0 : i.localName) === "px-a" && this.slot !== "before" && this.slot !== "after" && (this.color || this.setAttribute("color", "inherit"));
+  }
+  updateAttribute(e, i, a, r) {
+    i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), a !== null && a !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${a}`) : this.$el.classList.toggle(a)), this.checkName(r, a) || f(
+      `${a} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
+    );
+  }
+  updateName(e, i) {
+    p(this, h) && this.$el.firstElementChild.setAttribute(
+      "href",
+      `${p(this, h)}#icon-${i}`
+    );
+  }
+  get $el() {
+    return this.shadowRoot.querySelector("svg");
+  }
+  get name() {
+    return this.getAttribute("name");
+  }
+  set name(e) {
+    this.setAttribute("name", e);
+  }
+  get size() {
+    return this.getAttribute("size");
+  }
+  set size(e) {
+    this.setAttribute("size", e);
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(e) {
+    this.setAttribute("color", e);
+  }
+  get arialabel() {
+    return this.getAttribute("aria-label");
+  }
+  set arialabel(e) {
+    this.setAttribute("aria-label", e);
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(e) {
+    this.setAttribute("inverted", e);
+  }
+  get from() {
+    return this.getAttribute("from");
+  }
+  set from(e) {
+    this.setAttribute("from", e);
+  }
+  get disabled() {
+    return this.getAttribute("disabled");
+  }
+  set disabled(e) {
+    this.setAttribute("disabled", e);
+  }
+}
+h = new WeakMap(), d = new WeakMap(), S = new WeakMap();
+customElements.get("px-icon") || customElements.define("px-icon", Rt);
+const It = ":host{--px-appleseed-size-l: 14px;--px-appleseed-size-m: 10px;--px-appleseed-size-s: 6px;--px-appleseed-size-xs: 4px}.container{display:flex}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(4)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-0.appleseed-6-plus[active]) :nth-child(5)>div,.container:has(#seed-1.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(2)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(4)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(1)>div,.container:has(#seed-2.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.container:has(#seed-3.appleseed-6-plus[active]) :nth-child(5)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(1)>div{width:var(--px-appleseed-size-xs);height:var(--px-appleseed-size-xs)}.container:has(#seed-4.appleseed-6-plus[active]) :nth-child(2)>div{width:var(--px-appleseed-size-s);height:var(--px-appleseed-size-s)}.appleseed{width:var(--px-size-icon-m);height:var(--px-size-icon-m);display:flex;justify-content:center;align-items:center}@media screen and (max-width: 47.938rem){.appleseed{width:var(--px-size-icon-s);height:var(--px-size-icon-s)}}.appleseed-6-plus>div,.appleseed-6-minus>div{box-shadow:inset 0 0 0 var(--px-size-border-s) var(--px-color-border-brand-default);border-radius:var(--px-radius-main);height:var(--px-appleseed-size-m);width:var(--px-appleseed-size-m)}.appleseed-6-plus[active]>div,.appleseed-6-minus[active]>div{width:var(--px-appleseed-size-l);height:var(--px-appleseed-size-l);background-color:var(--px-color-icon-brand-default)}", Q = new CSSStyleSheet();
+Q.replaceSync(It);
+class Ht extends HTMLElement {
+  constructor() {
+    super(), this.template = (t, e) => `<div class="container">
+      ${Array.from(
+      { length: Math.min(t, 5) },
+      (i, a) => `<div id="seed-${a}" ${e === a ? "active" : ""} class="appleseed ${t > 5 ? "appleseed-6-plus" : "appleseed-6-minus"}">
             <div></div>
-          </div>`).join("")}
-    </div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [A], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
-	}
-	static get observedAttributes() {
-		return ["amount", "active"];
-	}
-	attributeChangedCallback(e, t, n) {
-		if (t !== n) switch (e) {
-			case "amount":
-				this.shadowRoot.innerHTML = this.template(parseInt(n) || 0, this.active);
-				break;
-			case "active": this.handleActive(t, n);
-		}
-	}
-	handleActive(e, t) {
-		e !== null && t !== void 0 && (this.$active?.removeAttribute("active"), this.shadowRoot.querySelector(`#seed-${t}`)?.setAttribute("active", ""));
-	}
-	get $active() {
-		return this.shadowRoot.querySelector("[active]");
-	}
-	get amount() {
-		return parseInt(this.getAttribute("amount") ?? "0") || 0;
-	}
-	get active() {
-		return parseInt(this.getAttribute("active") ?? "0") || 0;
-	}
-};
-customElements.get("px-appleseed") || customElements.define("px-appleseed", j);
-//#endregion
-//#region ../../../node_modules/lodash-es/isObject.js
-function M(e) {
-	var t = typeof e;
-	return e != null && (t == "object" || t == "function");
+          </div>`
+    ).join("")}
+    </div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [Q], this.shadowRoot.innerHTML = this.template(this.amount, this.active);
+  }
+  static get observedAttributes() {
+    return ["amount", "active"];
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i)
+      switch (t) {
+        case "amount":
+          this.shadowRoot.innerHTML = this.template(
+            parseInt(i) || 0,
+            this.active
+          );
+          break;
+        case "active":
+          this.handleActive(e, i);
+          break;
+      }
+  }
+  handleActive(t, e) {
+    var i;
+    t === null || e === void 0 || (this.$active.removeAttribute("active"), (i = this.shadowRoot.querySelector(`#seed-${e}`)) == null || i.setAttribute("active", ""));
+  }
+  get $active() {
+    return this.shadowRoot.querySelector("[active]");
+  }
+  get amount() {
+    return parseInt(this.getAttribute("amount")) || 0;
+  }
+  get active() {
+    return parseInt(this.getAttribute("active")) || 0;
+  }
+}
+customElements.get("px-appleseed") || customElements.define("px-appleseed", Ht);
+function y(s) {
+  var t = typeof s;
+  return s != null && (t == "object" || t == "function");
 }
-//#endregion
-//#region ../../../node_modules/lodash-es/_freeGlobal.js
-var ce = typeof global == "object" && global && global.Object === Object && global, le = typeof self == "object" && self && self.Object === Object && self, N = ce || le || Function("return this")(), P = function() {
-	return N.Date.now();
-}, F = /\s/;
-function I(e) {
-	for (var t = e.length; t-- && F.test(e.charAt(t)););
-	return t;
+var Mt = typeof global == "object" && global && global.Object === Object && global, Pt = typeof self == "object" && self && self.Object === Object && self, Y = Mt || Pt || Function("return this")(), R = function() {
+  return Y.Date.now();
+}, Ot = /\s/;
+function Nt(s) {
+  for (var t = s.length; t-- && Ot.test(s.charAt(t)); )
+    ;
+  return t;
 }
-//#endregion
-//#region ../../../node_modules/lodash-es/_baseTrim.js
-var L = /^\s+/;
-function R(e) {
-	return e && e.slice(0, I(e) + 1).replace(L, "");
+var qt = /^\s+/;
+function Dt(s) {
+  return s && s.slice(0, Nt(s) + 1).replace(qt, "");
 }
-//#endregion
-//#region ../../../node_modules/lodash-es/_Symbol.js
-var z = N.Symbol, B = Object.prototype, V = B.hasOwnProperty, H = B.toString, U = z ? z.toStringTag : void 0;
-function W(e) {
-	var t = V.call(e, U), n = e[U];
-	try {
-		e[U] = void 0;
-		var r = !0;
-	} catch {}
-	var i = H.call(e);
-	return r && (t ? e[U] = n : delete e[U]), i;
+var A = Y.Symbol, V = Object.prototype, Wt = V.hasOwnProperty, Xt = V.toString, m = A ? A.toStringTag : void 0;
+function Ft(s) {
+  var t = Wt.call(s, m), e = s[m];
+  try {
+    s[m] = void 0;
+    var i = !0;
+  } catch {
+  }
+  var a = Xt.call(s);
+  return i && (t ? s[m] = e : delete s[m]), a;
 }
-//#endregion
-//#region ../../../node_modules/lodash-es/_objectToString.js
-var ue = Object.prototype.toString;
-function de(e) {
-	return ue.call(e);
+var _t = Object.prototype, Gt = _t.toString;
+function Zt(s) {
+  return Gt.call(s);
 }
-//#endregion
-//#region ../../../node_modules/lodash-es/_baseGetTag.js
-var fe = "[object Null]", pe = "[object Undefined]", G = z ? z.toStringTag : void 0;
-function me(e) {
-	return e == null ? e === void 0 ? pe : fe : G && G in Object(e) ? W(e) : de(e);
+var Bt = "[object Null]", Ut = "[object Undefined]", _ = A ? A.toStringTag : void 0;
+function Kt(s) {
+  return s == null ? s === void 0 ? Ut : Bt : _ && _ in Object(s) ? Ft(s) : Zt(s);
 }
-//#endregion
-//#region ../../../node_modules/lodash-es/isObjectLike.js
-function he(e) {
-	return typeof e == "object" && !!e;
+function Jt(s) {
+  return s != null && typeof s == "object";
 }
-//#endregion
-//#region ../../../node_modules/lodash-es/isSymbol.js
-var ge = "[object Symbol]";
-function _e(e) {
-	return typeof e == "symbol" || he(e) && me(e) == ge;
+var Qt = "[object Symbol]";
+function Yt(s) {
+  return typeof s == "symbol" || Jt(s) && Kt(s) == Qt;
 }
-//#endregion
-//#region ../../../node_modules/lodash-es/toNumber.js
-var K = NaN, ve = /^[-+]0x[0-9a-f]+$/i, ye = /^0b[01]+$/i, be = /^0o[0-7]+$/i, q = parseInt;
-function J(e) {
-	if (typeof e == "number") return e;
-	if (_e(e)) return K;
-	if (M(e)) {
-		var t = typeof e.valueOf == "function" ? e.valueOf() : e;
-		e = M(t) ? t + "" : t;
-	}
-	if (typeof e != "string") return e === 0 ? e : +e;
-	e = R(e);
-	var n = ye.test(e);
-	return n || be.test(e) ? q(e.slice(2), n ? 2 : 8) : ve.test(e) ? K : +e;
+var G = NaN, Vt = /^[-+]0x[0-9a-f]+$/i, te = /^0b[01]+$/i, ee = /^0o[0-7]+$/i, ie = parseInt;
+function Z(s) {
+  if (typeof s == "number")
+    return s;
+  if (Yt(s))
+    return G;
+  if (y(s)) {
+    var t = typeof s.valueOf == "function" ? s.valueOf() : s;
+    s = y(t) ? t + "" : t;
+  }
+  if (typeof s != "string")
+    return s === 0 ? s : +s;
+  s = Dt(s);
+  var e = te.test(s);
+  return e || ee.test(s) ? ie(s.slice(2), e ? 2 : 8) : Vt.test(s) ? G : +s;
 }
-//#endregion
-//#region ../../../node_modules/lodash-es/debounce.js
-var xe = "Expected a function", Se = Math.max, Ce = Math.min;
-function we(e, t, n) {
-	var r, i, a, o, s, c, l = 0, u = !1, d = !1, f = !0;
-	if (typeof e != "function") throw TypeError(xe);
-	t = J(t) || 0, M(n) && (u = !!n.leading, d = "maxWait" in n, a = d ? Se(J(n.maxWait) || 0, t) : a, f = "trailing" in n ? !!n.trailing : f);
-	function p(t) {
-		var n = r, a = i;
-		return r = i = void 0, l = t, o = e.apply(a, n), o;
-	}
-	function m(e) {
-		return l = e, s = setTimeout(_, t), u ? p(e) : o;
-	}
-	function h(e) {
-		var n = e - c, r = e - l, i = t - n;
-		return d ? Ce(i, a - r) : i;
-	}
-	function g(e) {
-		var n = e - c, r = e - l;
-		return c === void 0 || n >= t || n < 0 || d && r >= a;
-	}
-	function _() {
-		var e = P();
-		if (g(e)) return v(e);
-		s = setTimeout(_, h(e));
-	}
-	function v(e) {
-		return s = void 0, f && r ? p(e) : (r = i = void 0, o);
-	}
-	function y() {
-		s !== void 0 && clearTimeout(s), l = 0, r = c = i = s = void 0;
-	}
-	function b() {
-		return s === void 0 ? o : v(P());
-	}
-	function x() {
-		var e = P(), n = g(e);
-		if (r = arguments, i = this, c = e, n) {
-			if (s === void 0) return m(c);
-			if (d) return clearTimeout(s), s = setTimeout(_, t), p(c);
-		}
-		return s === void 0 && (s = setTimeout(_, t)), o;
-	}
-	return x.cancel = y, x.flush = b, x;
+var se = "Expected a function", ae = Math.max, oe = Math.min;
+function re(s, t, e) {
+  var i, a, r, o, l, c, b = 0, O = !1, g = !1, C = !0;
+  if (typeof s != "function")
+    throw new TypeError(se);
+  t = Z(t) || 0, y(e) && (O = !!e.leading, g = "maxWait" in e, r = g ? ae(Z(e.maxWait) || 0, t) : r, C = "trailing" in e ? !!e.trailing : C);
+  function z(n) {
+    var u = i, v = a;
+    return i = a = void 0, b = n, o = s.apply(v, u), o;
+  }
+  function st(n) {
+    return b = n, l = setTimeout(w, t), O ? z(n) : o;
+  }
+  function at(n) {
+    var u = n - c, v = n - b, D = t - u;
+    return g ? oe(D, r - v) : D;
+  }
+  function N(n) {
+    var u = n - c, v = n - b;
+    return c === void 0 || u >= t || u < 0 || g && v >= r;
+  }
+  function w() {
+    var n = R();
+    if (N(n))
+      return q(n);
+    l = setTimeout(w, at(n));
+  }
+  function q(n) {
+    return l = void 0, C && i ? z(n) : (i = a = void 0, o);
+  }
+  function ot() {
+    l !== void 0 && clearTimeout(l), b = 0, i = c = a = l = void 0;
+  }
+  function rt() {
+    return l === void 0 ? o : q(R());
+  }
+  function j() {
+    var n = R(), u = N(n);
+    if (i = arguments, a = this, c = n, u) {
+      if (l === void 0)
+        return st(c);
+      if (g)
+        return clearTimeout(l), l = setTimeout(w, t), z(c);
+    }
+    return l === void 0 && (l = setTimeout(w, t)), o;
+  }
+  return j.cancel = ot, j.flush = rt, j;
 }
-//#endregion
-//#region ../../../node_modules/lodash-es/throttle.js
-var Te = "Expected a function";
-function Ee(e, t, n) {
-	var r = !0, i = !0;
-	if (typeof e != "function") throw TypeError(Te);
-	return M(n) && (r = "leading" in n ? !!n.leading : r, i = "trailing" in n ? !!n.trailing : i), we(e, t, {
-		leading: r,
-		maxWait: t,
-		trailing: i
-	});
+var ne = "Expected a function";
+function le(s, t, e) {
+  var i = !0, a = !0;
+  if (typeof s != "function")
+    throw new TypeError(ne);
+  return y(e) && (i = "leading" in e ? !!e.leading : i, a = "trailing" in e ? !!e.trailing : a), re(s, t, {
+    leading: i,
+    maxWait: t,
+    trailing: a
+  });
 }
-//#endregion
-//#region src/Carousel.ts
-var Y = new CSSStyleSheet();
-Y.replaceSync(d);
-var X = "px-carousel-item-connected", Z = class extends HTMLElement {
-	constructor() {
-		super(), this.template = "<px-vstack gap=\"default\">\n    <div class=\"carousel\">\n      <slot></slot>\n    </div>\n    <px-hstack\n      id=\"appleseed-container\"\n      justify-content=\"space-between\"\n      justify-content--mobile=\"center\"\n    >\n      <px-appleseed active=\"0\"></px-appleseed>\n      <px-hstack id=\"button-icons\" gap=\"default\">\n        <px-button-icon disabled id=\"previous\" aria-hidden=\"true\">\n          <px-icon name=\"chevron_left\" from=\"lavender\"></px-icon>\n        </px-button-icon>\n        <px-button-icon id=\"next\" aria-hidden=\"true\">\n          <px-icon name=\"chevron_right\" from=\"lavender\"></px-icon>\n        </px-button-icon>\n      </px-hstack>\n    </px-hstack>\n  </px-vstack>", this.onScroll = () => {
-			let e = this.$carousel.scrollLeft, t = this.$carousel.scrollWidth, n = this.$carousel.clientWidth, r = 0;
-			r = window.innerWidth < 768 ? Math.round(e / (t - n) * (this.itemNumbers - 1)) : Math.ceil(e + n) + 10 >= t ? this.itemNumbers - 1 : Math.floor(e / this.$firstItem.offsetWidth + 1) - 1;
-			let i = r;
-			this.itemNumbers > 5 && (r > 2 && r < this.itemNumbers - 2 ? i = 2 : r === this.itemNumbers - 2 ? i = 3 : r === this.itemNumbers - 1 && (i = 4)), this.$appleseed.setAttribute("active", `${i}`), this.handleNextPrevious();
-		}, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Y];
-	}
-	connectedCallback() {
-		this.addEventListener(X, () => {
-			this.#e();
-		}), this.#e(), this.$carousel.addEventListener("scroll", Ee(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
-			this.$carousel.scrollLeft -= this.$carousel.clientWidth;
-		}), this.$next.addEventListener("click", () => {
-			this.$carousel.scrollLeft += this.$carousel.clientWidth;
-		}), window.addEventListener("resize", () => {
-			this.handleAppleSeedDisplay();
-		});
-	}
-	#e() {
-		this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), requestAnimationFrame(() => {
-			this.handleAppleSeedDisplay();
-		});
-	}
-	handleNextPrevious() {
-		let e = this.$carousel.scrollLeft, t = this.$carousel.scrollWidth, n = this.$carousel.clientWidth;
-		e === 0 ? this.$previous.setAttribute("disabled", "") : this.$previous.removeAttribute("disabled"), e + n >= t ? this.$next.setAttribute("disabled", "") : this.$next.removeAttribute("disabled");
-	}
-	handleAppleSeedDisplay() {
-		this.isScrolling() ? this.$appleseedContainer.style.display = "block" : this.$appleseedContainer.style.display = "none";
-	}
-	isScrolling() {
-		return this.$carousel.scrollWidth - this.$carousel.clientWidth > 10;
-	}
-	get $appleseedContainer() {
-		return this.shadowRoot.querySelector("#appleseed-container");
-	}
-	get $appleseed() {
-		return this.$appleseedContainer.querySelector("px-appleseed");
-	}
-	get $carousel() {
-		return this.shadowRoot.querySelector(".carousel");
-	}
-	get $previous() {
-		return this.shadowRoot.querySelector("#previous");
-	}
-	get $next() {
-		return this.shadowRoot.querySelector("#next");
-	}
-	get $firstItem() {
-		return this.querySelector("px-carousel-item");
-	}
-	get itemNumbers() {
-		return this.querySelectorAll("px-carousel-item").length;
-	}
+const tt = new CSSStyleSheet();
+tt.replaceSync(bt);
+const et = "px-carousel-item-connected";
+var k, H;
+class ce extends HTMLElement {
+  constructor() {
+    super();
+    x(this, k);
+    this.template = `<px-vstack gap="default">
+    <div class="carousel">
+      <slot></slot>
+    </div>
+    <px-hstack
+      id="appleseed-container"
+      justify-content="space-between"
+      justify-content--mobile="center"
+    >
+      <px-appleseed active="0"></px-appleseed>
+      <px-hstack id="button-icons" gap="default">
+        <px-button-icon disabled id="previous" aria-hidden="true">
+          <px-icon name="chevron_left" from="lavender"></px-icon>
+        </px-button-icon>
+        <px-button-icon id="next" aria-hidden="true">
+          <px-icon name="chevron_right" from="lavender"></px-icon>
+        </px-button-icon>
+      </px-hstack>
+    </px-hstack>
+  </px-vstack>`, this.onScroll = () => {
+      const e = this.$carousel.scrollLeft, i = this.$carousel.scrollWidth, a = this.$carousel.clientWidth;
+      let r = 0;
+      window.innerWidth < 768 ? r = Math.round(
+        e / (i - a) * (this.itemNumbers - 1)
+      ) : Math.ceil(e + a) + 10 >= i ? r = this.itemNumbers - 1 : r = Math.floor(e / this.$firstItem.offsetWidth + 1) - 1;
+      let o = r;
+      this.itemNumbers > 5 && (r > 2 && r < this.itemNumbers - 2 ? o = 2 : r === this.itemNumbers - 2 ? o = 3 : r === this.itemNumbers - 1 && (o = 4)), this.$appleseed.setAttribute("active", `${o}`), this.handleNextPrevious();
+    }, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [tt];
+  }
+  connectedCallback() {
+    this.addEventListener(et, () => {
+      T(this, k, H).call(this);
+    }), T(this, k, H).call(this), this.$carousel.addEventListener("scroll", le(this.onScroll, 500)), this.$previous.addEventListener("click", () => {
+      this.$carousel.scrollLeft -= this.$carousel.clientWidth;
+    }), this.$next.addEventListener("click", () => {
+      this.$carousel.scrollLeft += this.$carousel.clientWidth;
+    }), window.addEventListener("resize", () => {
+      this.handleAppleSeedDisplay();
+    });
+  }
+  handleNextPrevious() {
+    const e = this.$carousel.scrollLeft, i = this.$carousel.scrollWidth, a = this.$carousel.clientWidth;
+    e === 0 ? this.$previous.setAttribute("disabled", "") : this.$previous.removeAttribute("disabled"), e + a >= i ? this.$next.setAttribute("disabled", "") : this.$next.removeAttribute("disabled");
+  }
+  handleAppleSeedDisplay() {
+    this.isScrolling() ? this.$appleseedContainer.style.display = "block" : this.$appleseedContainer.style.display = "none";
+  }
+  isScrolling() {
+    return this.$carousel.scrollWidth - this.$carousel.clientWidth > 10;
+  }
+  get $appleseedContainer() {
+    return this.shadowRoot.querySelector("#appleseed-container");
+  }
+  get $appleseed() {
+    return this.$appleseedContainer.querySelector("px-appleseed");
+  }
+  get $carousel() {
+    return this.shadowRoot.querySelector(".carousel");
+  }
+  get $previous() {
+    return this.shadowRoot.querySelector("#previous");
+  }
+  get $next() {
+    return this.shadowRoot.querySelector("#next");
+  }
+  get $firstItem() {
+    return this.querySelector("px-carousel-item");
+  }
+  get itemNumbers() {
+    return this.querySelectorAll("px-carousel-item").length;
+  }
+}
+k = new WeakSet(), H = function() {
+  this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), requestAnimationFrame(() => {
+    this.handleAppleSeedDisplay();
+  });
 };
-customElements.get("px-carousel") || customElements.define("px-carousel", Z);
-var Q = new CSSStyleSheet();
-Q.replaceSync(f);
-var $ = class extends HTMLElement {
-	constructor() {
-		super(), this.template = "\n  <div class=\"carousel-item\">\n    <slot></slot>\n  </div>", this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [Q];
-	}
-	connectedCallback() {
-		this.dispatchEvent(new CustomEvent(X, {
-			bubbles: !0,
-			composed: !0
-		}));
-	}
+customElements.get("px-carousel") || customElements.define("px-carousel", ce);
+const it = new CSSStyleSheet();
+it.replaceSync(gt);
+class pe extends HTMLElement {
+  constructor() {
+    super(), this.template = `
+  <div class="carousel-item">
+    <slot></slot>
+  </div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [it];
+  }
+  connectedCallback() {
+    this.dispatchEvent(
+      new CustomEvent(et, {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+}
+customElements.get("px-carousel-item") || customElements.define("px-carousel-item", pe);
+export {
+  Ht as AppleSeed,
+  et as CAROUSEL_ITEM_CONNECTED_EVENT,
+  ce as Carousel,
+  pe as CarouselItem
 };
-customElements.get("px-carousel-item") || customElements.define("px-carousel-item", $);
-//#endregion
-export { j as AppleSeed, X as CAROUSEL_ITEM_CONNECTED_EVENT, Z as Carousel, $ as CarouselItem };