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

package/dist/index.es.js

@@ -1,438 +1,416 @@
-var W = (s) => {
-  throw TypeError(s);
+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 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) => `
+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 = () => `
     <px-container border-radius="none" padding="none">
       <px-vstack>
         <px-container id="header-container" border-radius="none">
@@ -469,15 +447,6 @@ class Ct extends M {
             <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"
@@ -534,220 +503,217 @@ class Ct extends M {
         </px-container>
       </px-vstack>
     </px-container>
-  `, 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");
-  }
+  `, 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;
+	}
 };
-$.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 = `
+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);
+	}
+};
+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 = `
 @font-face {
   font-family: 'lavender';
   src:
@@ -757,425 +723,375 @@ class jt extends HTMLElement {
   font-display: block;
 }
       `, document.head.appendChild(e);
-    }
-  }
-  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"}">
+		}
+	}
+	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"}">
             <div></div>
-          </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");
-}
-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;
+          </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");
 }
-var qt = /^\s+/;
-function Dt(s) {
-  return s && s.slice(0, Nt(s) + 1).replace(qt, "");
+//#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 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/_baseTrim.js
+var L = /^\s+/;
+function R(e) {
+	return e && e.slice(0, I(e) + 1).replace(L, "");
 }
-var _t = Object.prototype, Gt = _t.toString;
-function Zt(s) {
-  return Gt.call(s);
+//#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 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/_objectToString.js
+var ue = Object.prototype.toString;
+function de(e) {
+	return ue.call(e);
 }
-function Jt(s) {
-  return s != null && typeof s == "object";
+//#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 Qt = "[object Symbol]";
-function Yt(s) {
-  return typeof s == "symbol" || Jt(s) && Kt(s) == Qt;
+//#endregion
+//#region ../../../node_modules/lodash-es/isObjectLike.js
+function he(e) {
+	return typeof e == "object" && !!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/isSymbol.js
+var ge = "[object Symbol]";
+function _e(e) {
+	return typeof e == "symbol" || he(e) && me(e) == ge;
 }
-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/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 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 ../../../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;
 }
-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;
-  }
+//#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
+	});
 }
-k = new WeakSet(), H = function() {
-  this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), requestAnimationFrame(() => {
-    this.handleAppleSeedDisplay();
-  });
+//#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;
+	}
 };
-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") || 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-item") || customElements.define("px-carousel-item", $);
+//#endregion
+export { j as AppleSeed, X as CAROUSEL_ITEM_CONNECTED_EVENT, Z as Carousel, $ as CarouselItem };