@proximus/lavender-carousel 2.0.0-alpha.21 → 2.0.0-alpha.211

package/dist/index.es.js

@@ -1,431 +1,429 @@
-var O = (r) => {
-  throw TypeError(r);
+import { AttributeBreakpointHandlerDelegate as e, PxElement as t, WithExtraAttributes as n, accessibilityAttributes as r, backgroundColorValues as i, booleanPropertyToAttributeSetter as a, checkName as o, createTemplate as s, gapValues as c, iconSizeValuesKC as l, log as u, propertyToAttributeSetter as d, renderTemplate as f } from "@proximus/lavender-common";
+//#region src/carousel.css?inline
+var p = ":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<=48rem){.carousel{gap:var(--px-carousel-gap-default--mobile,var(--px-carousel-gap-default))}}@media screen and (width>=48.0625rem) 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<=48rem){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}", m = "::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<=48rem){: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>=48.0625rem) 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}}", h = ":host{--host-gap--mobile:var(--px-spacing-none-mobile);--host-gap--tablet:var(--px-spacing-none-tablet);--host-gap--laptop:var(--px-spacing-none-desktop);--host-gap--desktop:var(--px-spacing-none-desktop);--overflow-x-all:visible;--overflow-x-all-mobile:initial;--overflow-x-all-tablet:initial;--overflow-x-all-laptop:initial;--overflow-x-all-desktop:initial;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{--flex-direction--mobile-value:row;--flex-direction--tablet-value:row;--flex-direction--laptop-value:row;--flex-direction--desktop-value:row;--flex-gap--mobile-value:var(--px-spacing-none-mobile);--flex-gap--tablet-value:var(--px-spacing-none-tablet);--flex-gap--laptop-value:var(--px-spacing-none-desktop);--flex-gap--desktop-value:var(--px-spacing-none-desktop);--flex-align-items--mobile-value:stretch;--flex-align-items--tablet-value:stretch;--flex-align-items--laptop-value:stretch;--flex-align-items--desktop-value:stretch;--flex-justify-content--mobile-value:flex-start;--flex-justify-content--tablet-value:flex-start;--flex-justify-content--laptop-value:flex-start;--flex-justify-content--desktop-value:flex-start;--flex-wrap--mobile-value:nowrap;--flex-wrap--tablet-value:nowrap;--flex-wrap--laptop-value:nowrap;--flex-wrap--desktop-value:nowrap;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))}}:host(px-vstack) .flex-container{--flex-direction--mobile-value:column!important;--flex-direction--tablet-value:column!important;--flex-direction--laptop-value:column!important;--flex-direction--desktop-value:column!important}:host(px-hstack) .flex-container{--flex-direction--mobile-value:row!important;--flex-direction--tablet-value:row!important;--flex-direction--laptop-value:row!important;--flex-direction--desktop-value:row!important}", g = new CSSStyleSheet();
+g.replaceSync(h);
+var _ = document.createElement("template");
+_.innerHTML = "<div class=\"flex-container\"><slot></slot></div>";
+var v = [
+	"",
+	"default",
+	"row",
+	"row-reverse",
+	"column",
+	"column-reverse"
+], y = [
+	"",
+	"default",
+	"stretch",
+	"flex-start",
+	"start",
+	"flex-end",
+	"end",
+	"center",
+	"baseline"
+], b = [
+	"",
+	"default",
+	"flex-start",
+	"start",
+	"flex-end",
+	"end",
+	"center",
+	"space-between",
+	"space-around",
+	"space-evenly"
+], x = [
+	"",
+	"default",
+	"nowrap",
+	"wrap",
+	"wrap-reverse"
+], S = [
+	"",
+	"visible",
+	"hidden",
+	"scroll",
+	"auto"
+], C = class t extends n {
+	constructor() {
+		super(g), this.overflowXAttributeDelegate = new e(this, "overflow-x", (e) => e, "--overflow-x"), this.shadowRoot.firstChild || this.shadowRoot.appendChild(document.importNode(_.content, !0));
+	}
+	connectedCallback() {}
+	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, c);
+				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, b);
+				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, y);
+				break;
+			case "wrap":
+			case "wrap--mobile":
+			case "wrap--tablet":
+			case "wrap--laptop":
+			case "wrap--desktop":
+				this.updateFlexProperties(e, t, n, x);
+				break;
+			case "direction":
+			case "direction--mobile":
+			case "direction--tablet":
+			case "direction--laptop":
+			case "direction--desktop":
+				this.updateFlexProperties(e, t, n, v);
+				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, S);
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	updateOverflowX(e, t, n, r) {
+		o(r, n) ? this.overflowXAttributeDelegate.attributeChangedCallback(e, t, n) : u(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
+	}
+	updateFlexProperties(e, n, r, i) {
+		r !== null && !this.checkName(i, r) && u(`"${r}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
+		let a = e.indexOf("--");
+		if (a === -1) for (let n of t.breakpoints) this.getAttribute(`${e}--${n}`) || this.updateStyle(e, n, r, i);
+		else {
+			let t = e.slice(0, a), n = e.slice(a + 2);
+			this.updateStyle(t, n, r || this.getAttribute(t), i);
+		}
+	}
+	updateStyle(e, t, n, r) {
+		let i = `--flex-${e}--${t}-value`, a = e === "gap";
+		if (!n) this.$el.style.removeProperty(i), a && this.style.removeProperty(`--host-gap--${t}`);
+		else if (a && r && r.includes(n)) {
+			let e = `var(--px-spacing-${n}-${t === "laptop" ? "desktop" : t})`;
+			this.$el.style.setProperty(i, e), this.style.setProperty(`--host-gap--${t}`, e);
+		} else this.$el.style.setProperty(i, n);
+	}
+	static {
+		this.breakpoints = [
+			"mobile",
+			"tablet",
+			"laptop",
+			"desktop"
+		];
+	}
+	get direction() {
+		return this.getAttribute("direction") ?? "row";
+	}
+	set direction(e) {
+		d(this, "direction", e);
+	}
+	get directionMobile() {
+		return this.getAttribute("direction--mobile");
+	}
+	set directionMobile(e) {
+		d(this, "direction--mobile", e);
+	}
+	get directionTablet() {
+		return this.getAttribute("direction--tablet");
+	}
+	set directionTablet(e) {
+		d(this, "direction--tablet", e);
+	}
+	get directionLaptop() {
+		return this.getAttribute("direction--laptop");
+	}
+	set directionLaptop(e) {
+		d(this, "direction--laptop", e);
+	}
+	get directionDesktop() {
+		return this.getAttribute("direction--desktop");
+	}
+	set directionDesktop(e) {
+		d(this, "direction--desktop", e);
+	}
+	get gap() {
+		return this.getAttribute("gap") ?? "none";
+	}
+	set gap(e) {
+		d(this, "gap", e);
+	}
+	get gapMobile() {
+		return this.getAttribute("gap--mobile");
+	}
+	set gapMobile(e) {
+		d(this, "gap--mobile", e);
+	}
+	get gapTablet() {
+		return this.getAttribute("gap--tablet");
+	}
+	set gapTablet(e) {
+		d(this, "gap--tablet", e);
+	}
+	get gapLaptop() {
+		return this.getAttribute("gap--laptop");
+	}
+	set gapLaptop(e) {
+		d(this, "gap--laptop", e);
+	}
+	get gapDesktop() {
+		return this.getAttribute("gap--desktop");
+	}
+	set gapDesktop(e) {
+		d(this, "gap--desktop", e);
+	}
+	get justifyContent() {
+		return this.getAttribute("justify-content") ?? "flex-start";
+	}
+	set justifyContent(e) {
+		d(this, "justify-content", e);
+	}
+	get justifyContentMobile() {
+		return this.getAttribute("justify-content--mobile");
+	}
+	set justifyContentMobile(e) {
+		d(this, "justify-content--mobile", e);
+	}
+	get justifyContentTablet() {
+		return this.getAttribute("justify-content--tablet");
+	}
+	set justifyContentTablet(e) {
+		d(this, "justify-content--tablet", e);
+	}
+	get justifyContentLaptop() {
+		return this.getAttribute("justify-content--laptop");
+	}
+	set justifyContentLaptop(e) {
+		d(this, "justify-content--laptop", e);
+	}
+	get justifyContentDesktop() {
+		return this.getAttribute("justify-content--desktop");
+	}
+	set justifyContentDesktop(e) {
+		d(this, "justify-content--desktop", e);
+	}
+	get alignItems() {
+		return this.getAttribute("align-items") ?? "stretch";
+	}
+	set alignItems(e) {
+		d(this, "align-items", e);
+	}
+	get alignItemsMobile() {
+		return this.getAttribute("align-items--mobile");
+	}
+	set alignItemsMobile(e) {
+		d(this, "align-items--mobile", e);
+	}
+	get alignItemsTablet() {
+		return this.getAttribute("align-items--tablet");
+	}
+	set alignItemsTablet(e) {
+		d(this, "align-items--tablet", e);
+	}
+	get alignItemsLaptop() {
+		return this.getAttribute("align-items--laptop");
+	}
+	set alignItemsLaptop(e) {
+		d(this, "align-items--laptop", e);
+	}
+	get alignItemsDesktop() {
+		return this.getAttribute("align-items--desktop");
+	}
+	set alignItemsDesktop(e) {
+		d(this, "align-items--desktop", e);
+	}
+	get wrap() {
+		return this.getAttribute("wrap") ?? "nowrap";
+	}
+	set wrap(e) {
+		d(this, "wrap", e);
+	}
+	get wrapMobile() {
+		return this.getAttribute("wrap--mobile");
+	}
+	set wrapMobile(e) {
+		d(this, "wrap--mobile", e);
+	}
+	get wrapTablet() {
+		return this.getAttribute("wrap--tablet");
+	}
+	set wrapTablet(e) {
+		d(this, "wrap--tablet", e);
+	}
+	get wrapLaptop() {
+		return this.getAttribute("wrap--laptop");
+	}
+	set wrapLaptop(e) {
+		d(this, "wrap--laptop", e);
+	}
+	get wrapDesktop() {
+		return this.getAttribute("wrap--desktop");
+	}
+	set wrapDesktop(e) {
+		d(this, "wrap--desktop", e);
+	}
+	get overflowX() {
+		return this.getAttribute("overflow-x") ?? "visible";
+	}
+	set overflowX(e) {
+		d(this, "overflow-x", e);
+	}
+	get overflowXMobile() {
+		return this.getAttribute("overflow-x--mobile");
+	}
+	set overflowXMobile(e) {
+		d(this, "overflow-x--mobile", e);
+	}
+	get overflowXTablet() {
+		return this.getAttribute("overflow-x--tablet");
+	}
+	set overflowXTablet(e) {
+		d(this, "overflow-x--tablet", e);
+	}
+	get overflowXLaptop() {
+		return this.getAttribute("overflow-x--laptop");
+	}
+	set overflowXLaptop(e) {
+		d(this, "overflow-x--laptop", e);
+	}
+	get overflowXDesktop() {
+		return this.getAttribute("overflow-x--desktop");
+	}
+	set overflowXDesktop(e) {
+		d(this, "overflow-x--desktop", e);
+	}
+	get $el() {
+		return this.shadowRoot.firstElementChild;
+	}
 };
-var N = (r, t, e) => t.has(r) || O("Cannot " + e);
-var d = (r, t, e) => (N(r, t, "read from private field"), e ? e.call(r) : t.get(r)), k = (r, t, e) => t.has(r) ? O("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), j = (r, t, e, i) => (N(r, t, "write to private field"), i ? i.call(r, e) : t.set(r, e), e);
-import { WithExtraAttributes as I, AttributeBreakpointHandlerDelegate as B, gapValues as G, checkName as st, log as x, backgroundColorValues as ot, PxElement as at, transferAccessibilityAttributes as nt, iconSizeValuesKC as lt, cssTokenBreakpoints as ct } from "@proximus/lavender-common";
-const dt = ":host{display:block}:host *{box-sizing:border-box}.carousel{overflow:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;gap:var(--px-spacing-default-desktop)}@media only screen and (max-width: 768px){.carousel{gap:var(--px-spacing-default-mobile)}}#appleseed-container{margin-inline:var(--px-spacing-s-mobile)}@media only screen and (max-width: 768px){#button-icons{display:none}}.carousel::-webkit-scrollbar{display:none}", pt = "::slotted(*){border-radius:var(--px-radius-main);height:100%}.carousel-item{height:100%}:host{scroll-snap-align:start;align-items:center;justify-content:center;flex:1 0 var( --px-carousel-min-width-desktop, var(--px-carousel-min-width-all-desktop) );border-radius:var(--px-radius-main);background:#fff;overflow:hidden}@media screen and (max-width: 768px){: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: 768px) and (max-width: 1024px){:host{flex:1 0 var( --px-carousel-min-width-tablet, var(--px-carousel-min-width-all-tablet) )!important}}", ut = ':host{display:block}: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 only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.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([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 only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.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([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 only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.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([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))}}', Z = new CSSStyleSheet();
-Z.replaceSync(ut);
-const ht = [
-  "",
-  "default",
-  "row",
-  "row-reverse",
-  "column",
-  "column-reverse"
-], bt = [
-  "",
-  "default",
-  "stretch",
-  "flex-start",
-  "flex-end",
-  "center",
-  "baseline"
-], gt = [
-  "",
-  "default",
-  "flex-start",
-  "flex-end",
-  "center",
-  "space-between",
-  "space-around",
-  "space-evenly"
-], vt = ["", "default", "nowrap", "wrap", "wrap-reverse"], ft = ["", "visible", "hidden", "scroll", "auto"];
-class R extends I {
-  constructor() {
-    super(Z), this.overflowXAttributeDelegate = new B(
-      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, G);
-        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,
-          gt
-        );
-        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, bt);
-        break;
-      case "wrap":
-      case "wrap--mobile":
-      case "wrap--tablet":
-      case "wrap--laptop":
-      case "wrap--desktop":
-        this.updateFlexProperties(t, e, i, vt);
-        break;
-      case "direction":
-      case "direction--mobile":
-      case "direction--tablet":
-      case "direction--laptop":
-      case "direction--desktop":
-        this.updateFlexProperties(t, e, i, ht);
-        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, ft);
-        break;
-      default:
-        super.attributeChangedCallback(t, e, i);
-        break;
-    }
-  }
-  updateOverflowX(t, e, i, s) {
-    if (!st(s, i)) {
-      x(
-        `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
-      );
-      return;
-    }
-    this.overflowXAttributeDelegate.attributeChangedCallback(
-      t,
-      e,
-      i
-    );
-  }
-  updateFlexProperties(t, e, i, s) {
-    this.checkName(s, i) || x(
-      `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
-    );
-    const n = t.indexOf("--") > -1, l = n ? t.split("--")[0] : t, a = [];
-    if (!n)
-      this.getAttribute(l + "--mobile") || a.push("mobile"), this.getAttribute(l + "--tablet") || a.push("tablet"), this.getAttribute(l + "--laptop") || a.push("laptop"), this.getAttribute(l + "--desktop") || a.push("desktop"), a.forEach((c) => {
-        this.updateStyle(l, c, e, s), this.updateStyle(l, c, i, s);
-      });
-    else {
-      const c = t.split("--")[1];
-      this.updateStyle(l, c, e, s), this.updateStyle(l, c, i, s);
-    }
-  }
-  updateStyle(t, e, i, s) {
-    i && (t === "gap" && s && s.includes(i) ? this.$el.style.setProperty(
-      `--flex-${t}--${e}-value`,
-      `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", R);
-class xt extends R {
-  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", xt);
-class mt extends R {
-  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", mt);
-class kt 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", kt);
-const yt = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", _ = new CSSStyleSheet();
-_.replaceSync(yt);
-class wt extends I {
-  constructor() {
-    super(_), this.template = (t) => `
+customElements.get("px-stack") || customElements.define("px-stack", C);
+var w = (e) => e === "direction" || e.startsWith("direction--"), T = class extends C {
+	get direction() {
+		return "column";
+	}
+	set direction(e) {
+		d(this, "direction", e);
+	}
+	attributeChangedCallback(e, t, n) {
+		w(e) || super.attributeChangedCallback(e, t, n);
+	}
+};
+customElements.get("px-vstack") || customElements.define("px-vstack", T);
+var ee = class extends C {
+	get direction() {
+		return "row";
+	}
+	set direction(e) {
+		d(this, "direction", e);
+	}
+	attributeChangedCallback(e, t, n) {
+		w(e) || super.attributeChangedCallback(e, t, n);
+	}
+};
+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}", E = new CSSStyleSheet();
+E.replaceSync(ne);
+var re = class extends n {
+	constructor() {
+		super(E), this.template = () => `
     <px-container border-radius="none" padding="none">
       <px-vstack>
         <px-container id="header-container" border-radius="none">
@@ -462,15 +460,6 @@ class wt extends I {
             <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"
@@ -527,220 +516,218 @@ class wt extends I {
         </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",
-            ot.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", wt);
-const At = ".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 only screen and (min-width: 768px){.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 only screen and (min-width: 1025px){.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)}}", U = new CSSStyleSheet();
-U.replaceSync(At);
-const $t = ["", "default", "small"], St = [
-  "",
-  "default",
-  "secondary",
-  "naked"
-], A = class A extends at {
-  constructor() {
-    super(U), this.template = () => "<slot></slot>";
-    const t = document.createElement(A.nativeName);
-    t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "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");
-    }
-    nt(this, this.$el, !1);
-  }
-  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($t, 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}`)) : x(
-      `${e} is not a valid size value for ${this.tagName.toLowerCase()}`
-    );
-  }
-  updateVariant(t, e) {
-    this.checkName(St, 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}`)) : x(
-      `${e} is not a valid variant value for ${this.tagName.toLowerCase()}`
-    );
-  }
-  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");
-  }
+  `, f(this.shadowRoot, this.template());
+	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"background-image",
+			"gap",
+			"background-color",
+			"padding-vertical",
+			"padding-horizontal"
+		];
+	}
+	get $wideImage() {
+		return this.shadowRoot.querySelector("#image-box");
+	}
+	get $bodyVStackContainer() {
+		return this.shadowRoot.querySelector("#header-vstack-container");
+	}
+	get $bodyContainer() {
+		return this.shadowRoot.querySelector("#body-container");
+	}
+	get $contactContainer() {
+		return this.shadowRoot.querySelector("#contact-container");
+	}
+	get $footerContainer() {
+		return this.shadowRoot.querySelector("#footer-container");
+	}
+	get $headerContainer() {
+		return this.shadowRoot.querySelector("#header-container");
+	}
+	get $imageContainer() {
+		return this.shadowRoot.querySelector("#image-container");
+	}
+	get backgroundImage() {
+		return this.getAttribute("background-image");
+	}
+	get $main() {
+		return this.shadowRoot.querySelector("#main");
+	}
+	get backgroundColor() {
+		return this.getAttribute("background-color") || "none";
+	}
+	get paddingVertical() {
+		return this.getAttribute("padding-vertical");
+	}
+	get paddingHorizontal() {
+		return this.getAttribute("padding-horizontal");
+	}
+	set paddingVertical(e) {
+		this.setAttribute("padding-vertical", `${e}`);
+	}
+	set paddingHorizontal(e) {
+		this.setAttribute("padding-horizontal", `${e}`);
+	}
+	get gap() {
+		return this.getAttribute("gap");
+	}
+	connectedCallback() {
+		this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "background-image":
+				this.$imageContainer.setAttribute("background-image", n);
+				break;
+			case "gap":
+				this.$bodyVStackContainer.setAttribute("gap", n);
+				break;
+			case "background-color":
+				this.$bodyContainer.setAttribute("background-color", i.indexOf(n) > 0 ? n : "none");
+				break;
+			case "padding-vertical":
+				this.handlePaddingVerticalChange(n);
+				break;
+			case "padding-horizontal":
+				this.handlePaddingHorizontalChange(n);
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	handlePaddingVerticalChange(e) {
+		this.$bodyContainer.paddingTop = e, this.$bodyContainer.paddingBottom = e;
+	}
+	handlePaddingHorizontalChange(e) {
+		this.$headerContainer.paddingLeft = e, this.$headerContainer.paddingRight = e, this.$bodyContainer.paddingLeft = e, this.$bodyContainer.paddingRight = e, this.$contactContainer.paddingLeft = e, this.$contactContainer.paddingRight = e, this.$footerContainer.paddingLeft = e, this.$footerContainer.paddingRight = e, this.$imageContainer.paddingLeft = e, this.$imageContainer.paddingRight = e;
+	}
+};
+customElements.get("px-page") === void 0 && customElements.define("px-page", re);
+//#endregion
+//#region ../ButtonIcon/src/buttonicon.css?inline
+var ie = ":host{display:inline-block}.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)}}", D = new CSSStyleSheet();
+D.replaceSync(ie);
+var O = [
+	"",
+	"default",
+	"small"
+], k = [
+	"",
+	"default",
+	"secondary",
+	"naked"
+], A = class e extends t {
+	static {
+		this.template = s("<button class=\"btn-icon\"><slot></slot></button>");
+	}
+	static {
+		this.nativeName = "button";
+	}
+	constructor() {
+		super(D), f(this.shadowRoot, e.template);
+	}
+	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(O, 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}`)) : u(`"${t}" is not a valid size value for ${this.tagName.toLowerCase()}. Allowed values are: "${O.join("\", \"")}".`);
+	}
+	updateVariant(e, t) {
+		this.checkName(k, 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}`)) : u(`"${t}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${k.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);
+	}
 };
-A.nativeName = "button";
-let E = A;
-customElements.get("px-button-icon") || customElements.define("px-button-icon", E);
-class Ct 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-button-icon") || customElements.define("px-button-icon", A);
+//#endregion
+//#region ../Icon/common/src/IconSet.ts
+var j = 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:
@@ -750,445 +737,377 @@ class Ct 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", Ct);
-const zt = [
-  "Brand",
-  "Accent",
-  "Neutral",
-  "Dimmed",
-  "PurposeSuccess",
-  "PurposeWarning",
-  "PurposeError",
-  "PurposeUnlimited",
-  "PurposePromo",
-  "StateHover",
-  "StateActive",
-  "StateDisabled"
-], jt = ["Inherit", ...zt].map(
-  (r) => r.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)
-), Lt = ":host{display:inline-flex;flex-direction:column;justify-content:center}svg{font-size:var(--px-size-icon-s);line-height:var(--px-font-line-height-xs);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)}", K = new CSSStyleSheet();
-K.replaceSync(Lt);
-const Tt = [
-  "name",
-  "size",
-  "color",
-  "aria-label",
-  "inverted",
-  "from",
-  "disabled"
-];
-var h, p, $;
-class Et extends I {
-  constructor(...e) {
-    var i;
-    super(...e, K);
-    k(this, h);
-    k(this, p);
-    k(this, $, () => `<svg aria-hidden="true">
-      <use xlink:href=""></use>
-    </svg>`);
-    this.shadowRoot.innerHTML = d(this, $).call(this), j(this, p, (i = this.attachInternals) == null ? void 0 : i.call(this)), d(this, p) && (d(this, p).role = "img");
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, ...Tt];
-  }
-  attributeChangedCallback(e, i, s) {
-    if (i !== s)
-      switch (e) {
-        case "name":
-          this.updateName(i, s);
-          break;
-        case "size":
-          this.updateAttribute(e, i, s, lt);
-          break;
-        case "color":
-          this.updateAttribute(e, i, s, jt);
-          break;
-        case "disabled":
-          this.color = "state-disabled";
-          break;
-        case "aria-label":
-          if (!d(this, p))
-            return;
-          s ? (d(this, p).ariaHidden = "false", this.ariaHidden = "false") : (d(this, p).ariaHidden = "true", this.ariaHidden = "true");
-          break;
-      }
-  }
-  connectedCallback() {
-    this.role = "img", this.name && this.$el.firstElementChild.setAttribute(
-      "xlink:href",
-      `#icon-${this.name}`
-    );
-    const e = document.querySelectorAll("px-icon-set");
-    e || console.log("<px-icon-set> component not found");
-    for (const i of e) {
-      if (!i.getAttribute("name") || !i.getAttribute("src")) {
-        console.error("Icon name or src not found");
-        continue;
-      }
-      i.getAttribute("name") === this.from && i.getAttribute("type") !== "font" && (j(this, h, i.getAttribute("src")), this.$el.firstElementChild.setAttribute(
-        "xlink:href",
-        `${d(this, h)}#icon-${this.name}`
-      ));
-    }
-    !this.ariaLabel && d(this, p) && (d(this, p).ariaHidden = "true", this.ariaHidden = "true");
-  }
-  updateAttribute(e, i, s, n) {
-    i !== null && i !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${i}`) : this.$el.classList.toggle(i)), s !== null && s !== "" && (e === "size" ? this.$el.classList.toggle(`${e}-${s}`) : this.$el.classList.toggle(s)), this.checkName(n, s) || x(
-      `${s} is not an allowed ${e} value for ${this.tagName.toLowerCase()}`
-    );
-  }
-  updateName(e, i) {
-    d(this, h) && this.$el.firstElementChild.setAttribute(
-      "xlink:href",
-      `${d(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(), p = new WeakMap(), $ = new WeakMap();
-customElements.get("px-icon") || customElements.define("px-icon", Et);
-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 only screen and (max-width: 47.938em){.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)}", J = new CSSStyleSheet();
-J.replaceSync(It);
-class Rt extends HTMLElement {
-  constructor() {
-    super(), this.template = (t, e) => `<div class="container">
-      ${Array.from(
-      { length: Math.min(t, 5) },
-      (i, s) => `<div id="seed-${s}" ${e === s ? "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", j);
+var M = [
+	"Inherit",
+	"Brand",
+	"Accent",
+	"Neutral",
+	"Dimmed",
+	"PurposeSuccess",
+	"PurposeWarning",
+	"PurposeError",
+	"PurposeUnlimited",
+	"PurposePromo",
+	"StateHover",
+	"StateActive",
+	"StateDisabled"
+].map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase().slice(1)), ae = ":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)}", N = new CSSStyleSheet();
+N.replaceSync(ae);
+var oe = class e extends n {
+	static {
+		this.template = s("<svg aria-hidden=\"true\"><use></use></svg>");
+	}
+	#e = null;
+	#t;
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"name",
+			"size",
+			"color",
+			"aria-label",
+			"inverted",
+			"from",
+			"disabled"
+		];
+	}
+	constructor(...t) {
+		super(...t, N), f(this.shadowRoot, e.template), 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, l);
+				break;
+			case "color":
+				this.updateAttribute(e, t, n, M);
+				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) !t.getAttribute("name") || !t.getAttribute("src") ? console.error("Icon name or src not found") : 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) || u(`${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) {
+		d(this, "name", e);
+	}
+	get size() {
+		return this.getAttribute("size");
+	}
+	set size(e) {
+		d(this, "size", e);
+	}
+	get color() {
+		return this.getAttribute("color");
+	}
+	set color(e) {
+		d(this, "color", e);
+	}
+	get arialabel() {
+		return this.getAttribute("aria-label");
+	}
+	set arialabel(e) {
+		d(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) {
+		d(this, "from", e);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		a(this, "disabled", e);
+	}
+};
+customElements.get("px-icon") || customElements.define("px-icon", oe);
+//#endregion
+//#region src/appleseed.css?inline
+var se = ":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)}", P = new CSSStyleSheet();
+P.replaceSync(se);
+var F = 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 = [J], 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", Rt);
-function y(r) {
-  var t = typeof r;
-  return r != null && (t == "object" || t == "function");
-}
-var Mt = typeof global == "object" && global && global.Object === Object && global, Ht = typeof self == "object" && self && self.Object === Object && self, Q = Mt || Ht || Function("return this")(), L = function() {
-  return Q.Date.now();
-}, Pt = /\s/;
-function Dt(r) {
-  for (var t = r.length; t-- && Pt.test(r.charAt(t)); )
-    ;
-  return t;
-}
-var qt = /^\s+/;
-function Ot(r) {
-  return r && r.slice(0, Dt(r) + 1).replace(qt, "");
+          </div>`).join("")}
+    </div>`, this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [P], 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", F);
+//#endregion
+//#region ../../../node_modules/lodash-es/isObject.js
+function I(e) {
+	var t = typeof e;
+	return e != null && (t == "object" || t == "function");
 }
-var w = Q.Symbol, Y = Object.prototype, Nt = Y.hasOwnProperty, Wt = Y.toString, f = w ? w.toStringTag : void 0;
-function Xt(r) {
-  var t = Nt.call(r, f), e = r[f];
-  try {
-    r[f] = void 0;
-    var i = !0;
-  } catch {
-  }
-  var s = Wt.call(r);
-  return i && (t ? r[f] = e : delete r[f]), s;
+//#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, L = ce || le || Function("return this")(), R = function() {
+	return L.Date.now();
+}, z = /\s/;
+function B(e) {
+	for (var t = e.length; t-- && z.test(e.charAt(t)););
+	return t;
 }
-var Ft = Object.prototype, Bt = Ft.toString;
-function Gt(r) {
-  return Bt.call(r);
+//#endregion
+//#region ../../../node_modules/lodash-es/_baseTrim.js
+var V = /^\s+/;
+function H(e) {
+	return e && e.slice(0, B(e) + 1).replace(V, "");
 }
-var Zt = "[object Null]", _t = "[object Undefined]", W = w ? w.toStringTag : void 0;
-function Ut(r) {
-  return r == null ? r === void 0 ? _t : Zt : W && W in Object(r) ? Xt(r) : Gt(r);
+//#endregion
+//#region ../../../node_modules/lodash-es/_Symbol.js
+var U = L.Symbol, W = Object.prototype, ue = W.hasOwnProperty, de = W.toString, G = U ? U.toStringTag : void 0;
+function fe(e) {
+	var t = ue.call(e, G), n = e[G];
+	try {
+		e[G] = void 0;
+		var r = !0;
+	} catch {}
+	var i = de.call(e);
+	return r && (t ? e[G] = n : delete e[G]), i;
 }
-function Kt(r) {
-  return r != null && typeof r == "object";
+//#endregion
+//#region ../../../node_modules/lodash-es/_objectToString.js
+var pe = Object.prototype.toString;
+function me(e) {
+	return pe.call(e);
 }
-var Jt = "[object Symbol]";
-function Qt(r) {
-  return typeof r == "symbol" || Kt(r) && Ut(r) == Jt;
+//#endregion
+//#region ../../../node_modules/lodash-es/_baseGetTag.js
+var he = "[object Null]", ge = "[object Undefined]", K = U ? U.toStringTag : void 0;
+function _e(e) {
+	return e == null ? e === void 0 ? ge : he : K && K in Object(e) ? fe(e) : me(e);
 }
-var X = NaN, Yt = /^[-+]0x[0-9a-f]+$/i, Vt = /^0b[01]+$/i, te = /^0o[0-7]+$/i, ee = parseInt;
-function F(r) {
-  if (typeof r == "number")
-    return r;
-  if (Qt(r))
-    return X;
-  if (y(r)) {
-    var t = typeof r.valueOf == "function" ? r.valueOf() : r;
-    r = y(t) ? t + "" : t;
-  }
-  if (typeof r != "string")
-    return r === 0 ? r : +r;
-  r = Ot(r);
-  var e = Vt.test(r);
-  return e || te.test(r) ? ee(r.slice(2), e ? 2 : 8) : Yt.test(r) ? X : +r;
+//#endregion
+//#region ../../../node_modules/lodash-es/isObjectLike.js
+function ve(e) {
+	return typeof e == "object" && !!e;
 }
-var ie = "Expected a function", re = Math.max, se = Math.min;
-function oe(r, t, e) {
-  var i, s, n, l, a, c, b = 0, H = !1, g = !1, S = !0;
-  if (typeof r != "function")
-    throw new TypeError(ie);
-  t = F(t) || 0, y(e) && (H = !!e.leading, g = "maxWait" in e, n = g ? re(F(e.maxWait) || 0, t) : n, S = "trailing" in e ? !!e.trailing : S);
-  function C(o) {
-    var u = i, v = s;
-    return i = s = void 0, b = o, l = r.apply(v, u), l;
-  }
-  function tt(o) {
-    return b = o, a = setTimeout(m, t), H ? C(o) : l;
-  }
-  function et(o) {
-    var u = o - c, v = o - b, q = t - u;
-    return g ? se(q, n - v) : q;
-  }
-  function P(o) {
-    var u = o - c, v = o - b;
-    return c === void 0 || u >= t || u < 0 || g && v >= n;
-  }
-  function m() {
-    var o = L();
-    if (P(o))
-      return D(o);
-    a = setTimeout(m, et(o));
-  }
-  function D(o) {
-    return a = void 0, S && i ? C(o) : (i = s = void 0, l);
-  }
-  function it() {
-    a !== void 0 && clearTimeout(a), b = 0, i = c = s = a = void 0;
-  }
-  function rt() {
-    return a === void 0 ? l : D(L());
-  }
-  function z() {
-    var o = L(), u = P(o);
-    if (i = arguments, s = this, c = o, u) {
-      if (a === void 0)
-        return tt(c);
-      if (g)
-        return clearTimeout(a), a = setTimeout(m, t), C(c);
-    }
-    return a === void 0 && (a = setTimeout(m, t)), l;
-  }
-  return z.cancel = it, z.flush = rt, z;
+//#endregion
+//#region ../../../node_modules/lodash-es/isSymbol.js
+var ye = "[object Symbol]";
+function be(e) {
+	return typeof e == "symbol" || ve(e) && _e(e) == ye;
 }
-var ae = "Expected a function";
-function ne(r, t, e) {
-  var i = !0, s = !0;
-  if (typeof r != "function")
-    throw new TypeError(ae);
-  return y(e) && (i = "leading" in e ? !!e.leading : i, s = "trailing" in e ? !!e.trailing : s), oe(r, t, {
-    leading: i,
-    maxWait: t,
-    trailing: s
-  });
+//#endregion
+//#region ../../../node_modules/lodash-es/toNumber.js
+var q = NaN, xe = /^[-+]0x[0-9a-f]+$/i, Se = /^0b[01]+$/i, Ce = /^0o[0-7]+$/i, we = parseInt;
+function J(e) {
+	if (typeof e == "number") return e;
+	if (be(e)) return q;
+	if (I(e)) {
+		var t = typeof e.valueOf == "function" ? e.valueOf() : e;
+		e = I(t) ? t + "" : t;
+	}
+	if (typeof e != "string") return e === 0 ? e : +e;
+	e = H(e);
+	var n = Se.test(e);
+	return n || Ce.test(e) ? we(e.slice(2), n ? 2 : 8) : xe.test(e) ? q : +e;
 }
-const M = new CSSStyleSheet();
-M.replaceSync(dt);
-const le = (r, t, e) => `:host([${r}${e ? `--${e}` : ""}='${t}']) .carousel`, ce = "px-spacing", T = (r) => (t, e) => `calc(((100%  - ${Math.max(parseInt(t), 2)}  * ( var(--px-spacing-${r}-${e}))) / ${t}) - ( 64px / ${Math.max(parseInt(t), 2)}))`;
-class de extends HTMLElement {
-  constructor() {
-    super(), this.visibleItemsAttributeDelegate = new B(
-      this,
-      "visible-items",
-      T("s"),
-      "--px-carousel-min-width"
-    ), 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 t = this.$carousel.scrollLeft, e = this.$carousel.scrollWidth, i = this.$carousel.clientWidth;
-      let s = 0;
-      window.innerWidth < 768 ? s = Math.round(
-        t / (e - i) * (this.itemNumbers - 1)
-      ) : Math.ceil(t + i) + 10 >= e ? s = this.itemNumbers - 1 : s = Math.floor(t / this.$firstItem.offsetWidth + 1) - 1;
-      let n = s;
-      this.itemNumbers > 5 && (s > 2 && s < this.itemNumbers - 2 ? n = 2 : s === this.itemNumbers - 2 ? n = 3 : s === this.itemNumbers - 1 && (n = 4)), this.$appleseed.setAttribute("active", `${n}`), this.handleNextPrevious();
-    }, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [
-      M,
-      ct(
-        "gap",
-        le,
-        G,
-        ce
-      )
-    ];
-  }
-  static get observedAttributes() {
-    return ["visible-items"];
-  }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i)
-      switch (t) {
-        case "gap":
-        case "gap--mobile":
-        case "gap--tablet":
-        case "gap--desktop":
-          this.visibleItemsAttributeDelegate.attributeValue = T(i);
-          break;
-        default:
-          this.visibleItemsAttributeDelegate.attributeChangedCallback(
-            t,
-            e,
-            i
-          );
-      }
-  }
-  connectedCallback() {
-    this.visibleItemsAttributeDelegate.init("1"), this.visibleItemsAttributeDelegate.attributeValue = T(
-      this.getAttribute("gap") || "s"
-    ), requestAnimationFrame(() => {
-      this.handleAppleSeedDisplay();
-    }), this.$appleseed.setAttribute("amount", `${this.itemNumbers}`), this.$carousel.addEventListener("scroll", ne(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 t = this.$carousel.scrollLeft, e = this.$carousel.scrollWidth, i = this.$carousel.clientWidth;
-    t === 0 ? this.$previous.setAttribute("disabled", "") : this.$previous.removeAttribute("disabled"), t + i >= e ? 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/debounce.js
+var Te = "Expected a function", Ee = Math.max, De = Math.min;
+function Oe(e, t, n) {
+	var r, i, a, o, s, c, l = 0, u = !1, d = !1, f = !0;
+	if (typeof e != "function") throw TypeError(Te);
+	t = J(t) || 0, I(n) && (u = !!n.leading, d = "maxWait" in n, a = d ? Ee(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 ? De(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 = R();
+		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(R());
+	}
+	function x() {
+		var e = R(), 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;
 }
-customElements.get("px-carousel") || customElements.define("px-carousel", de);
-const V = new CSSStyleSheet();
-V.replaceSync(pt);
-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 = [M, V];
-  }
+//#endregion
+//#region ../../../node_modules/lodash-es/throttle.js
+var ke = "Expected a function";
+function Ae(e, t, n) {
+	var r = !0, i = !0;
+	if (typeof e != "function") throw TypeError(ke);
+	return I(n) && (r = "leading" in n ? !!n.leading : r, i = "trailing" in n ? !!n.trailing : i), Oe(e, t, {
+		leading: r,
+		maxWait: t,
+		trailing: i
+	});
 }
-customElements.get("px-carousel-item") || customElements.define("px-carousel-item", pe);
-export {
-  Rt as AppleSeed,
-  de as Carousel,
-  pe as CarouselItem
+//#endregion
+//#region src/Carousel.ts
+var Y = new CSSStyleSheet();
+Y.replaceSync(p);
+var X = "px-carousel-item-connected", Z = class e extends HTMLElement {
+	static {
+		this.template = s("<px-vstack gap=\"default\"><div class=\"carousel\"><slot></slot></div><px-hstack\n      id=\"appleseed-container\"\n      justify-content=\"space-between\"\n      justify-content--mobile=\"center\"\n    ><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>");
+	}
+	constructor() {
+		super(), 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" }), f(this.shadowRoot, e.template), this.shadowRoot.adoptedStyleSheets = [Y];
+	}
+	connectedCallback() {
+		this.addEventListener(X, () => {
+			this.#e();
+		}), this.#e(), this.$carousel.addEventListener("scroll", Ae(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", Z);
+var Q = new CSSStyleSheet();
+Q.replaceSync(m);
+var $ = class e extends HTMLElement {
+	static {
+		this.template = s("<div class=\"carousel-item\"><slot></slot></div>");
+	}
+	constructor() {
+		super(), this.attachShadow({ mode: "open" }), f(this.shadowRoot, e.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 { F as AppleSeed, X as CAROUSEL_ITEM_CONNECTED_EVENT, Z as Carousel, $ as CarouselItem };