@proximus/lavender-common 2.0.0-alpha.165 → 2.0.0-alpha.169

package/dist/index.es.js

@@ -1,1040 +1,773 @@
-var S = (i) => {
-  throw TypeError(i);
-};
-var $ = (i, t, s) => t.has(i) || S("Cannot " + s);
-var a = (i, t, s) => ($(i, t, "read from private field"), s ? s.call(i) : t.get(i)), d = (i, t, s) => t.has(i) ? S("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), p = (i, t, s, e) => ($(i, t, "write to private field"), e ? e.call(i, s) : t.set(i, s), s);
-const M = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([word-break-all]){word-break:break-all}@media screen and (max-width: 47.938rem){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}:host([word-break-all--mobile]){word-break:break-all!important}@media screen and (min-width: 48rem) and (max-width: 64rem){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}:host([word-break-all--tablet]){word-break:break-all!important}@media screen and (min-width: 64.0625rem){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 64.0625rem){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}:host([word-break-all--laptop]){word-break:break-all!important}@media screen and (min-width: 90.0625rem){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}:host([word-break-all--desktop]){word-break:break-all!important}}", x = { DEV: !0, VITE_COMPONENT_DEBUG: "true" };
-function N(i) {
-  const t = document.createElement(i), s = Object.getPrototypeOf(t);
-  return Object.getOwnPropertyNames(s);
-}
-function D(i) {
-  const t = document.createElement(i), s = Object.getPrototypeOf(t);
-  return Object.getOwnPropertyNames(s).map(
-    (e) => e.toLowerCase()
-  );
+//#region src/common.css?inline
+var e = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted([shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:host([word-break-all]){word-break:break-all}@media screen and (width<=47.938rem){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted([shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--mobile]){word-break:break-all!important}@media screen and (width>=48rem) and (width<=64rem){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted([shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--tablet]){word-break:break-all!important}@media screen and (width>=64.0625rem){:host([shown--sr--laptop]),::slotted([shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}:host([word-break-all--laptop]){word-break:break-all!important}@media screen and (width>=90.0625rem){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}:host([word-break-all--desktop]){word-break:break-all!important}}";
+//#endregion
+//#region src/common.ts
+function t(e) {
+	let t = document.createElement(e), n = Object.getPrototypeOf(t);
+	return Object.getOwnPropertyNames(n);
 }
-const j = new CSSStyleSheet();
-j.replaceSync(M);
-const c = typeof import.meta < "u" && typeof x < "u" ? x : void 0, T = (c == null ? void 0 : c.VITE_COMPONENT_DEBUG) === "true" || (c == null ? void 0 : c.DEV) === !0;
-typeof window < "u" && (window.isComponentDebug = w);
-function w() {
-  return T;
+function n(e) {
+	let t = document.createElement(e), n = Object.getPrototypeOf(t);
+	return Object.getOwnPropertyNames(n).map((e) => e.toLowerCase());
 }
-function E(i) {
-  w() && console.error(i);
-}
-var g, n, f, h, u, k, C;
-class U {
-  constructor(t, s, e) {
-    d(this, k);
-    d(this, g);
-    d(this, n);
-    d(this, f);
-    d(this, h);
-    d(this, u);
-    p(this, h, !1), p(this, u, () => {
-      this.setInteractiveState("hover");
-    }), this.clearInteractiveState = () => {
-      this.setInteractiveState(null);
-    }, p(this, g, t), p(this, n, s), p(this, f, e);
-  }
-  connect() {
-    a(this, h) || (a(this, n).addEventListener(
-      "pointerenter",
-      a(this, u)
-    ), a(this, n).addEventListener(
-      "pointerleave",
-      this.clearInteractiveState
-    ), a(this, n).addEventListener(
-      "focusin",
-      a(this, u)
-    ), a(this, n).addEventListener(
-      "focusout",
-      this.clearInteractiveState
-    ), p(this, h, !0));
-  }
-  disconnect() {
-    a(this, h) && (a(this, n).removeEventListener(
-      "pointerenter",
-      a(this, u)
-    ), a(this, n).removeEventListener(
-      "pointerleave",
-      this.clearInteractiveState
-    ), a(this, n).removeEventListener(
-      "focusin",
-      a(this, u)
-    ), a(this, n).removeEventListener(
-      "focusout",
-      this.clearInteractiveState
-    ), p(this, h, !1));
-  }
-  setInteractiveState(t) {
-    const s = a(this, k, C);
-    if (!a(this, f).call(this)) {
-      s.forEach((e) => e.removeAttribute("interactive-state"));
-      return;
-    }
-    s.forEach((e) => {
-      t ? e.setAttribute("interactive-state", t) : e.removeAttribute("interactive-state");
-    });
-  }
+var r = new CSSStyleSheet();
+r.replaceSync(e);
+var i = {
+	BASE_URL: "/",
+	DEV: !0,
+	MODE: "production",
+	PROD: !1,
+	SSR: !1,
+	VITE_COMPONENT_DEBUG: "true"
+}, a = i?.VITE_COMPONENT_DEBUG === "true" || i?.DEV === !0;
+typeof window < "u" && (window.isComponentDebug = o);
+function o() {
+	return a;
 }
-g = new WeakMap(), n = new WeakMap(), f = new WeakMap(), h = new WeakMap(), u = new WeakMap(), k = new WeakSet(), C = function() {
-  return Array.from(a(this, g).querySelectorAll("*")).filter(
-    O
-  );
-};
-function O(i) {
-  var s;
-  if (i.hasAttribute("interactive-state"))
-    return !0;
-  const t = customElements.get(
-    i.localName
-  );
-  return ((s = t == null ? void 0 : t.observedAttributes) == null ? void 0 : s.includes("interactive-state")) ?? !1;
-}
-typeof window < "u" && (window.isComponentDebug = w);
-class y extends HTMLElement {
-  static get observedAttributes() {
-    return [
-      "grow",
-      "grow--mobile",
-      "grow--tablet",
-      "grow--laptop",
-      "grow--desktop",
-      "shrink",
-      "shrink--mobile",
-      "shrink--tablet",
-      "shrink--laptop",
-      "shrink--desktop",
-      "basis",
-      "basis--mobile",
-      "basis--tablet",
-      "basis--laptop",
-      "basis--desktop",
-      "align-self",
-      "align-self--mobile",
-      "align-self--tablet",
-      "align-self--laptop",
-      "align-self--desktop",
-      "justify-self",
-      "justify-self--mobile",
-      "justify-self--tablet",
-      "justify-self--laptop",
-      "justify-self--desktop",
-      "hidden",
-      "hidden--mobile",
-      "hidden--tablet",
-      "hidden--laptop",
-      "hidden--desktop",
-      "shown--sr",
-      "shown--sr--mobile",
-      "shown--sr--tablet",
-      "shown--sr--laptop",
-      "shown--sr--desktop",
-      "col-span",
-      "col-span--mobile",
-      "col-span--tablet",
-      "col-span--laptop",
-      "col-span--desktop",
-      "order",
-      "order--mobile",
-      "order--tablet",
-      "order--laptop",
-      "order--desktop",
-      "sticky-top",
-      "sticky-bottom",
-      "word-break-all",
-      "word-break-all--mobile",
-      "word-break-all--tablet",
-      "word-break-all--laptop",
-      "word-break-all--desktop"
-    ];
-  }
-  constructor(...t) {
-    super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
-      j,
-      ...t
-    ];
-  }
-  attributeChangedCallback(t, s, e) {
-    var o;
-    if (y.observedAttributes.indexOf(t) !== -1)
-      switch (t) {
-        case "grow":
-        case "grow--mobile":
-        case "grow--tablet":
-        case "grow--laptop":
-        case "grow--desktop":
-        case "shrink":
-        case "shrink--mobile":
-        case "shrink--tablet":
-        case "shrink--laptop":
-        case "shrink--desktop":
-        case "basis":
-        case "basis--mobile":
-        case "basis--tablet":
-        case "basis--laptop":
-        case "basis--desktop":
-          this.style.setProperty(`--${t}-value`, e);
-          break;
-        case "align-self":
-        case "align-self--mobile":
-        case "align-self--tablet":
-        case "align-self--laptop":
-        case "align-self--desktop":
-          this.updateProperties(
-            t,
-            s,
-            e,
-            ((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid" ? I : _
-          );
-          break;
-        case "justify-self":
-        case "justify-self--mobile":
-        case "justify-self--tablet":
-        case "justify-self--laptop":
-        case "justify-self--desktop":
-          this.updateProperties(
-            t,
-            s,
-            e,
-            P
-          );
-          break;
-        case "col-span":
-        case "col-span--mobile":
-        case "col-span--tablet":
-        case "col-span--laptop":
-        case "col-span--desktop":
-          this.updateProperties(t, s, e, G);
-          break;
-        case "order":
-        case "order--mobile":
-        case "order--tablet":
-        case "order--laptop":
-        case "order--desktop":
-          this.updateProperties(t, s, e, q);
-          break;
-      }
-  }
-  updateProperties(t, s, e, o) {
-    o && (this.checkName(o, e) || E(
-      `"${e}" is not an allowed ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
-    ));
-    const l = t.indexOf("--") > -1, b = l ? t.split("--")[0] : t;
-    if (!l)
-      this.style.setProperty(
-        `--${b}-value`,
-        s
-      ), this.style.setProperty(
-        `--${b}-value`,
-        e
-      );
-    else {
-      const m = t.split("--")[1];
-      this.style.setProperty(
-        `--${b}--${m}-value`,
-        s
-      ), this.style.setProperty(
-        `--${b}--${m}-value`,
-        e
-      );
-    }
-  }
-  updateStyle(t, s, e) {
-    e !== null && e !== "" && e !== "default" && this.style.setProperty(
-      `--${t}--${s}-value`,
-      e
-    );
-  }
-  checkName(t, s) {
-    return t.includes(s);
-  }
-  get $el() {
-    return this;
-  }
-  get $parentElementName() {
-    var t;
-    return (t = this.parentElement) == null ? void 0 : t.tagName.toLowerCase();
-  }
-  get isInsideGridOrStack() {
-    let t = this.parentElement;
-    for (; t; ) {
-      if (t.localName === "px-grid" || t.localName === "px-stack" && (t == null ? void 0 : t.getAttribute("direction")) === "row")
-        return !0;
-      if (window.getComputedStyle(t).display === "contents") {
-        t = t.parentElement;
-        continue;
-      }
-      break;
-    }
-    return !1;
-  }
-  get grow() {
-    return this.getAttribute("grow");
-  }
-  set grow(t) {
-    this.setAttribute("grow", t);
-  }
-  get growMobile() {
-    return this.getAttribute("grow--mobile");
-  }
-  set growMobile(t) {
-    this.setAttribute("grow--mobile", t);
-  }
-  get growTablet() {
-    return this.getAttribute("grow--tablet");
-  }
-  set growTablet(t) {
-    this.setAttribute("grow--tablet", t);
-  }
-  get growLaptop() {
-    return this.getAttribute("grow--laptop");
-  }
-  set growLaptop(t) {
-    this.setAttribute("grow--laptop", t);
-  }
-  get growDesktop() {
-    return this.getAttribute("grow--desktop");
-  }
-  set growDesktop(t) {
-    this.setAttribute("grow--desktop", t);
-  }
-  get shrink() {
-    return this.getAttribute("shrink");
-  }
-  set shrink(t) {
-    this.setAttribute("shrink", t);
-  }
-  get shrinkMobile() {
-    return this.getAttribute("shrink--mobile");
-  }
-  set shrinkMobile(t) {
-    this.setAttribute("shrink--mobile", t);
-  }
-  get shrinkTablet() {
-    return this.getAttribute("shrink--tablet");
-  }
-  set shrinkTablet(t) {
-    this.setAttribute("shrink--tablet", t);
-  }
-  get shrinkLaptop() {
-    return this.getAttribute("shrink--laptop");
-  }
-  set shrinkLaptop(t) {
-    this.setAttribute("shrink--laptop", t);
-  }
-  get shrinkDesktop() {
-    return this.getAttribute("shrink--desktop");
-  }
-  set shrinkDesktop(t) {
-    this.setAttribute("shrink--desktop", t);
-  }
-  get basis() {
-    return this.getAttribute("basis");
-  }
-  set basis(t) {
-    this.setAttribute("basis", t);
-  }
-  get basisMobile() {
-    return this.getAttribute("basis--mobile");
-  }
-  set basisMobile(t) {
-    this.setAttribute("basis--mobile", t);
-  }
-  get basisTablet() {
-    return this.getAttribute("basis--tablet");
-  }
-  set basisTablet(t) {
-    this.setAttribute("basis--tablet", t);
-  }
-  get basisLaptop() {
-    return this.getAttribute("basis--laptop");
-  }
-  set basisLaptop(t) {
-    this.setAttribute("basis--laptop", t);
-  }
-  get basisDesktop() {
-    return this.getAttribute("basis--desktop");
-  }
-  set basisDesktop(t) {
-    this.setAttribute("basis--desktop", t);
-  }
-  get alignSelf() {
-    return this.getAttribute("align-self");
-  }
-  set alignSelf(t) {
-    this.setAttribute("align-self", t);
-  }
-  get alignSelfMobile() {
-    return this.getAttribute("align-self--mobile");
-  }
-  set alignSelfMobile(t) {
-    this.setAttribute("align-self--mobile", t);
-  }
-  get alignSelfTablet() {
-    return this.getAttribute("align-self--tablet");
-  }
-  set alignSelfTablet(t) {
-    this.setAttribute("align-self--tablet", t);
-  }
-  get alignSelfLaptop() {
-    return this.getAttribute("align-self--laptop");
-  }
-  set alignSelfLaptop(t) {
-    this.setAttribute("align-self--laptop", t);
-  }
-  get alignSelfDesktop() {
-    return this.getAttribute("align-self--desktop");
-  }
-  set alignSelfDesktop(t) {
-    this.setAttribute("align-self--desktop", t);
-  }
-  get justifySelf() {
-    return this.getAttribute("justify-self");
-  }
-  set justifySelf(t) {
-    this.setAttribute("justify-self", t);
-  }
-  get justifySelfMobile() {
-    return this.getAttribute("justify-self--mobile");
-  }
-  set justifySelfMobile(t) {
-    this.setAttribute("justify-self--mobile", t);
-  }
-  get justifySelfTablet() {
-    return this.getAttribute("justify-self--tablet");
-  }
-  set justifySelfTablet(t) {
-    this.setAttribute("justify-self--tablet", t);
-  }
-  get justifySelfLaptop() {
-    return this.getAttribute("justify-self--laptop");
-  }
-  set justifySelfLaptop(t) {
-    this.setAttribute("justify-self--laptop", t);
-  }
-  get justifySelfDesktop() {
-    return this.getAttribute("justify-self--desktop");
-  }
-  set justifySelfDesktop(t) {
-    this.setAttribute("justify-self--desktop", t);
-  }
-  get hiddenMobile() {
-    return this.getAttribute("hidden--mobile");
-  }
-  set hiddenMobile(t) {
-    this.setAttribute("hidden--mobile", t);
-  }
-  get hiddenTablet() {
-    return this.getAttribute("hidden--tablet");
-  }
-  set hiddenTablet(t) {
-    this.setAttribute("hidden--tablet", t);
-  }
-  get hiddenLaptop() {
-    return this.getAttribute("hidden--laptop");
-  }
-  set hiddenLaptop(t) {
-    this.setAttribute("hidden--laptop", t);
-  }
-  get hiddenDesktop() {
-    return this.getAttribute("hidden--desktop");
-  }
-  set hiddenDesktop(t) {
-    this.setAttribute("hidden--desktop", t);
-  }
-  get colSpan() {
-    return this.getAttribute("col-span");
-  }
-  set colSpan(t) {
-    this.setAttribute("col-span", t);
-  }
-  get colSpanMobile() {
-    return this.getAttribute("col-span--mobile");
-  }
-  set colSpanMobile(t) {
-    this.setAttribute("col-span--mobile", t);
-  }
-  get colSpanTablet() {
-    return this.getAttribute("col-span--tablet");
-  }
-  set colSpanTablet(t) {
-    this.setAttribute("col-span--tablet", t);
-  }
-  get colSpanLaptop() {
-    return this.getAttribute("col-span--laptop");
-  }
-  set colSpanLaptop(t) {
-    this.setAttribute("col-span--laptop", t);
-  }
-  get colSpanDesktop() {
-    return this.getAttribute("col-span--desktop");
-  }
-  set colSpanDesktop(t) {
-    this.setAttribute("col-span--desktop", t);
-  }
-  get order() {
-    return this.getAttribute("order");
-  }
-  set order(t) {
-    this.setAttribute("order", t);
-  }
-  get orderMobile() {
-    return this.getAttribute("order--mobile");
-  }
-  set orderMobile(t) {
-    this.setAttribute("order--mobile", t);
-  }
-  get orderTablet() {
-    return this.getAttribute("order--tablet");
-  }
-  set orderTablet(t) {
-    this.setAttribute("order--tablet", t);
-  }
-  get orderLaptop() {
-    return this.getAttribute("order--laptop");
-  }
-  set orderLaptop(t) {
-    this.setAttribute("order--laptop", t);
-  }
-  get orderDesktop() {
-    return this.getAttribute("order--desktop");
-  }
-  set orderDesktop(t) {
-    this.setAttribute("order--desktop", t);
-  }
+function s(e) {
+	o() && console.error(e);
 }
-const A = class A extends y {
-  // nativeName: string;
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      ...D(this.nativeName)
-    ];
-  }
-  attributeChangedCallback(t, s, e) {
-    super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
-  }
-  get ctor() {
-    return Object.getPrototypeOf(this).constructor;
-  }
-  constructor(...t) {
-    super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = N(
-      this.ctor.nativeName
-    )), this.enhanceWithNativeProperties();
-  }
-  enhanceWithNativeProperties() {
-    var t;
-    for (const s of this.ctor.supportedPropertyNames)
-      if (!(s === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(s)))
-        try {
-          Object.defineProperty(this, s, {
-            get() {
-              return this.$el[s];
-            },
-            set(e) {
-              this.$el[s] !== e && (this.$el[s] = e);
-            }
-          });
-        } catch (e) {
-          console.warn(`Could not create property ${s} for`, this.$el, e);
-        }
-  }
-  get $el() {
-    return this.shadowRoot.querySelector(this.ctor.nativeName);
-  }
-  _updateAttribute(t, s) {
-    s ? this.setAttribute(t, s) : this.removeAttribute(t);
-  }
-  _updateBooleanAttribute(t, s) {
-    s ? this.setAttribute(t, "") : this.removeAttribute(t);
-  }
+var c = class {
+	#e;
+	#t;
+	#n;
+	#r;
+	constructor(e, t, n) {
+		this.#r = !1, this.#i = () => {
+			this.setInteractiveState("hover");
+		}, this.clearInteractiveState = () => {
+			this.setInteractiveState(null);
+		}, this.#e = e, this.#t = t, this.#n = n;
+	}
+	#i;
+	connect() {
+		this.#r ||= (this.#t.addEventListener("pointerenter", this.#i), this.#t.addEventListener("pointerleave", this.clearInteractiveState), this.#t.addEventListener("focusin", this.#i), this.#t.addEventListener("focusout", this.clearInteractiveState), !0);
+	}
+	disconnect() {
+		this.#r &&= (this.#t.removeEventListener("pointerenter", this.#i), this.#t.removeEventListener("pointerleave", this.clearInteractiveState), this.#t.removeEventListener("focusin", this.#i), this.#t.removeEventListener("focusout", this.clearInteractiveState), !1);
+	}
+	setInteractiveState(e) {
+		let t = this.#a;
+		if (!this.#n()) {
+			t.forEach((e) => e.removeAttribute("interactive-state"));
+			return;
+		}
+		t.forEach((t) => {
+			e ? t.setAttribute("interactive-state", e) : t.removeAttribute("interactive-state");
+		});
+	}
+	get #a() {
+		return Array.from(this.#e.querySelectorAll("*")).filter(l);
+	}
 };
-A.accessorExclusions = [];
-let v = A;
-class V extends v {
-  connectedCallback() {
-    this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
-  }
+function l(e) {
+	return e.hasAttribute("interactive-state") ? !0 : customElements.get(e.localName)?.observedAttributes?.includes("interactive-state") ?? !1;
 }
-const W = ["", "default", "none", "l"], _ = [
-  "",
-  "default",
-  "auto",
-  "flex-start",
-  "start",
-  "flex-end",
-  "end",
-  "center",
-  "baseline",
-  "stretch"
-], I = [
-  "",
-  "default",
-  "start",
-  "end",
-  "center",
-  "stretch"
+typeof window < "u" && (window.isComponentDebug = o);
+var u = class e extends HTMLElement {
+	static get observedAttributes() {
+		return /* @__PURE__ */ "grow.grow--mobile.grow--tablet.grow--laptop.grow--desktop.shrink.shrink--mobile.shrink--tablet.shrink--laptop.shrink--desktop.basis.basis--mobile.basis--tablet.basis--laptop.basis--desktop.align-self.align-self--mobile.align-self--tablet.align-self--laptop.align-self--desktop.justify-self.justify-self--mobile.justify-self--tablet.justify-self--laptop.justify-self--desktop.hidden.hidden--mobile.hidden--tablet.hidden--laptop.hidden--desktop.shown--sr.shown--sr--mobile.shown--sr--tablet.shown--sr--laptop.shown--sr--desktop.col-span.col-span--mobile.col-span--tablet.col-span--laptop.col-span--desktop.order.order--mobile.order--tablet.order--laptop.order--desktop.sticky-top.sticky-bottom.word-break-all.word-break-all--mobile.word-break-all--tablet.word-break-all--laptop.word-break-all--desktop".split(".");
+	}
+	constructor(...e) {
+		super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [r, ...e];
+	}
+	attributeChangedCallback(t, n, r) {
+		if (e.observedAttributes.indexOf(t) !== -1) switch (t) {
+			case "grow":
+			case "grow--mobile":
+			case "grow--tablet":
+			case "grow--laptop":
+			case "grow--desktop":
+			case "shrink":
+			case "shrink--mobile":
+			case "shrink--tablet":
+			case "shrink--laptop":
+			case "shrink--desktop":
+			case "basis":
+			case "basis--mobile":
+			case "basis--tablet":
+			case "basis--laptop":
+			case "basis--desktop":
+				this.style.setProperty(`--${t}-value`, r);
+				break;
+			case "align-self":
+			case "align-self--mobile":
+			case "align-self--tablet":
+			case "align-self--laptop":
+			case "align-self--desktop":
+				this.updateProperties(t, n, r, this.parentElement?.localName === "px-grid" ? h : m);
+				break;
+			case "justify-self":
+			case "justify-self--mobile":
+			case "justify-self--tablet":
+			case "justify-self--laptop":
+			case "justify-self--desktop":
+				this.updateProperties(t, n, r, g);
+				break;
+			case "col-span":
+			case "col-span--mobile":
+			case "col-span--tablet":
+			case "col-span--laptop":
+			case "col-span--desktop":
+				this.updateProperties(t, n, r, _);
+				break;
+			case "order":
+			case "order--mobile":
+			case "order--tablet":
+			case "order--laptop":
+			case "order--desktop": this.updateProperties(t, n, r, v);
+		}
+	}
+	updateProperties(e, t, n, r) {
+		r && (this.checkName(r, n) || s(`"${n}" is not an allowed ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`));
+		let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e;
+		if (!i) this.style.setProperty(`--${a}-value`, t), this.style.setProperty(`--${a}-value`, n);
+		else {
+			let r = e.split("--")[1];
+			this.style.setProperty(`--${a}--${r}-value`, t), this.style.setProperty(`--${a}--${r}-value`, n);
+		}
+	}
+	updateStyle(e, t, n) {
+		n !== null && n !== "" && n !== "default" && this.style.setProperty(`--${e}--${t}-value`, n);
+	}
+	checkName(e, t) {
+		return e.includes(t);
+	}
+	get $el() {
+		return this;
+	}
+	get $parentElementName() {
+		return this.parentElement?.tagName.toLowerCase();
+	}
+	get isInsideGridOrStack() {
+		let e = this.parentElement;
+		for (; e;) {
+			if (e.localName === "px-grid" || e.localName === "px-stack" && e?.getAttribute("direction") === "row") return !0;
+			if (window.getComputedStyle(e).display === "contents") {
+				e = e.parentElement;
+				continue;
+			}
+			break;
+		}
+		return !1;
+	}
+	get grow() {
+		return this.getAttribute("grow");
+	}
+	set grow(e) {
+		G(this, "grow", e);
+	}
+	get growMobile() {
+		return this.getAttribute("grow--mobile");
+	}
+	set growMobile(e) {
+		G(this, "grow--mobile", e);
+	}
+	get growTablet() {
+		return this.getAttribute("grow--tablet");
+	}
+	set growTablet(e) {
+		G(this, "grow--tablet", e);
+	}
+	get growLaptop() {
+		return this.getAttribute("grow--laptop");
+	}
+	set growLaptop(e) {
+		G(this, "grow--laptop", e);
+	}
+	get growDesktop() {
+		return this.getAttribute("grow--desktop");
+	}
+	set growDesktop(e) {
+		G(this, "grow--desktop", e);
+	}
+	get shrink() {
+		return this.getAttribute("shrink");
+	}
+	set shrink(e) {
+		G(this, "shrink", e);
+	}
+	get shrinkMobile() {
+		return this.getAttribute("shrink--mobile");
+	}
+	set shrinkMobile(e) {
+		G(this, "shrink--mobile", e);
+	}
+	get shrinkTablet() {
+		return this.getAttribute("shrink--tablet");
+	}
+	set shrinkTablet(e) {
+		G(this, "shrink--tablet", e);
+	}
+	get shrinkLaptop() {
+		return this.getAttribute("shrink--laptop");
+	}
+	set shrinkLaptop(e) {
+		G(this, "shrink--laptop", e);
+	}
+	get shrinkDesktop() {
+		return this.getAttribute("shrink--desktop");
+	}
+	set shrinkDesktop(e) {
+		G(this, "shrink--desktop", e);
+	}
+	get basis() {
+		return this.getAttribute("basis");
+	}
+	set basis(e) {
+		G(this, "basis", e);
+	}
+	get basisMobile() {
+		return this.getAttribute("basis--mobile");
+	}
+	set basisMobile(e) {
+		G(this, "basis--mobile", e);
+	}
+	get basisTablet() {
+		return this.getAttribute("basis--tablet");
+	}
+	set basisTablet(e) {
+		G(this, "basis--tablet", e);
+	}
+	get basisLaptop() {
+		return this.getAttribute("basis--laptop");
+	}
+	set basisLaptop(e) {
+		G(this, "basis--laptop", e);
+	}
+	get basisDesktop() {
+		return this.getAttribute("basis--desktop");
+	}
+	set basisDesktop(e) {
+		G(this, "basis--desktop", e);
+	}
+	get alignSelf() {
+		return this.getAttribute("align-self");
+	}
+	set alignSelf(e) {
+		G(this, "align-self", e);
+	}
+	get alignSelfMobile() {
+		return this.getAttribute("align-self--mobile");
+	}
+	set alignSelfMobile(e) {
+		G(this, "align-self--mobile", e);
+	}
+	get alignSelfTablet() {
+		return this.getAttribute("align-self--tablet");
+	}
+	set alignSelfTablet(e) {
+		G(this, "align-self--tablet", e);
+	}
+	get alignSelfLaptop() {
+		return this.getAttribute("align-self--laptop");
+	}
+	set alignSelfLaptop(e) {
+		G(this, "align-self--laptop", e);
+	}
+	get alignSelfDesktop() {
+		return this.getAttribute("align-self--desktop");
+	}
+	set alignSelfDesktop(e) {
+		G(this, "align-self--desktop", e);
+	}
+	get justifySelf() {
+		return this.getAttribute("justify-self");
+	}
+	set justifySelf(e) {
+		G(this, "justify-self", e);
+	}
+	get justifySelfMobile() {
+		return this.getAttribute("justify-self--mobile");
+	}
+	set justifySelfMobile(e) {
+		G(this, "justify-self--mobile", e);
+	}
+	get justifySelfTablet() {
+		return this.getAttribute("justify-self--tablet");
+	}
+	set justifySelfTablet(e) {
+		G(this, "justify-self--tablet", e);
+	}
+	get justifySelfLaptop() {
+		return this.getAttribute("justify-self--laptop");
+	}
+	set justifySelfLaptop(e) {
+		G(this, "justify-self--laptop", e);
+	}
+	get justifySelfDesktop() {
+		return this.getAttribute("justify-self--desktop");
+	}
+	set justifySelfDesktop(e) {
+		G(this, "justify-self--desktop", e);
+	}
+	get hiddenMobile() {
+		return this.hasAttribute("hidden--mobile");
+	}
+	set hiddenMobile(e) {
+		K(this, "hidden--mobile", e);
+	}
+	get hiddenTablet() {
+		return this.hasAttribute("hidden--tablet");
+	}
+	set hiddenTablet(e) {
+		K(this, "hidden--tablet", e);
+	}
+	get hiddenLaptop() {
+		return this.hasAttribute("hidden--laptop");
+	}
+	set hiddenLaptop(e) {
+		K(this, "hidden--laptop", e);
+	}
+	get hiddenDesktop() {
+		return this.hasAttribute("hidden--desktop");
+	}
+	set hiddenDesktop(e) {
+		K(this, "hidden--desktop", e);
+	}
+	get colSpan() {
+		return this.getAttribute("col-span");
+	}
+	set colSpan(e) {
+		G(this, "col-span", e);
+	}
+	get colSpanMobile() {
+		return this.getAttribute("col-span--mobile");
+	}
+	set colSpanMobile(e) {
+		G(this, "col-span--mobile", e);
+	}
+	get colSpanTablet() {
+		return this.getAttribute("col-span--tablet");
+	}
+	set colSpanTablet(e) {
+		G(this, "col-span--tablet", e);
+	}
+	get colSpanLaptop() {
+		return this.getAttribute("col-span--laptop");
+	}
+	set colSpanLaptop(e) {
+		G(this, "col-span--laptop", e);
+	}
+	get colSpanDesktop() {
+		return this.getAttribute("col-span--desktop");
+	}
+	set colSpanDesktop(e) {
+		G(this, "col-span--desktop", e);
+	}
+	get order() {
+		return this.getAttribute("order");
+	}
+	set order(e) {
+		G(this, "order", e);
+	}
+	get orderMobile() {
+		return this.getAttribute("order--mobile");
+	}
+	set orderMobile(e) {
+		G(this, "order--mobile", e);
+	}
+	get orderTablet() {
+		return this.getAttribute("order--tablet");
+	}
+	set orderTablet(e) {
+		G(this, "order--tablet", e);
+	}
+	get orderLaptop() {
+		return this.getAttribute("order--laptop");
+	}
+	set orderLaptop(e) {
+		G(this, "order--laptop", e);
+	}
+	get orderDesktop() {
+		return this.getAttribute("order--desktop");
+	}
+	set orderDesktop(e) {
+		G(this, "order--desktop", e);
+	}
+}, d = class extends u {
+	static {
+		this.accessorExclusions = [];
+	}
+	static get observedAttributes() {
+		return [...super.observedAttributes, ...n(this.nativeName)];
+	}
+	attributeChangedCallback(e, t, n) {
+		super.attributeChangedCallback(e, t, n), n === null ? this.$el.toggleAttribute(e) : this.$el.setAttribute(e, n);
+	}
+	get ctor() {
+		return Object.getPrototypeOf(this).constructor;
+	}
+	constructor(...e) {
+		super(...e), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = t(this.ctor.nativeName)), this.enhanceWithNativeProperties();
+	}
+	enhanceWithNativeProperties() {
+		for (let e of this.ctor.supportedPropertyNames) if (!(e === "constructor" || (this.ctor?.accessorExclusions ?? []).includes(e))) try {
+			Object.defineProperty(this, e, {
+				get() {
+					return this.$el[e];
+				},
+				set(t) {
+					this.$el[e] !== t && (this.$el[e] = t);
+				}
+			});
+		} catch (t) {
+			console.warn(`Could not create property ${e} for`, this.$el, t);
+		}
+	}
+	get $el() {
+		return this.shadowRoot.querySelector(this.ctor.nativeName);
+	}
+	_updateAttribute(e, t) {
+		G(this, e, t);
+	}
+	_updateBooleanAttribute(e, t) {
+		K(this, e, t);
+	}
+}, f = class extends d {
+	connectedCallback() {
+		this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
+	}
+}, p = [
+	"",
+	"default",
+	"none",
+	"l"
+], m = [
+	"",
+	"default",
+	"auto",
+	"flex-start",
+	"start",
+	"flex-end",
+	"end",
+	"center",
+	"baseline",
+	"stretch"
+], h = [
+	"",
+	"default",
+	"start",
+	"end",
+	"center",
+	"stretch"
+], g = [
+	"",
+	"default",
+	"start",
+	"end",
+	"center",
+	"stretch"
+], _ = [
+	"",
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"10",
+	"11",
+	"12"
+], v = [
+	"",
+	"-1",
+	"0",
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"10",
+	"11",
+	"12"
+], y = [
+	"",
+	"default",
+	"auto",
+	"start",
+	"end",
+	"center",
+	"stretch"
+], b = [
+	"",
+	"default",
+	"inherit",
+	"body-l",
+	"body-m",
+	"body-s",
+	"body-xs",
+	"heading-5xl",
+	"heading-4xl",
+	"heading-3xl",
+	"heading-2xl",
+	"heading-xl",
+	"heading-l",
+	"heading-m",
+	"heading-s"
+], x = [
+	"",
+	"default",
+	"inherit",
+	"brand",
+	"neutral",
+	"dimmed",
+	"purpose-success",
+	"purpose-warning",
+	"purpose-error",
+	"purpose-unlimited",
+	"purpose-promo",
+	"state-hover",
+	"state-active",
+	"state-disabled"
+], S = [
+	"",
+	"default",
+	"inherit",
+	"body",
+	"title",
+	"title-large",
+	"subtitle"
+], C = [
+	"Xs",
+	"S",
+	"M",
+	"L",
+	"Xl"
+], w = [
+	"",
+	"default",
+	...C.map((e) => e.toLowerCase())
+], T = [
+	"",
+	"default",
+	"left",
+	"center",
+	"right"
+], E = [
+	"",
+	"none",
+	"3xs",
+	"2xs",
+	"xs",
+	"s",
+	"m",
+	"l",
+	"xl"
+], D = [
+	"",
+	"none",
+	"s",
+	"m",
+	"l"
+], O = [
+	"",
+	"none",
+	"main",
+	"pill"
+], k = [
+	"none",
+	"main",
+	"brand",
+	"state-hover",
+	"state-active",
+	"neutral",
+	"purpose-success",
+	"purpose-warning",
+	"purpose-error",
+	"purpose-unlimited"
+], A = [
+	"",
+	"all",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"block",
+	"inline"
+], j = /* @__PURE__ */ ".none.surface-light.surface-default.surface-strong.surface-stronger.surface-dark.surface-brand.surface-brand-light.container-primary.container-secondary.container-light.container-default.container-strong.state-hover.state-hover-bordered.state-active.state-disabled.purpose-success.purpose-warning.purpose-error.purpose-unlimited.purpose-promo.purpose-info.purpose-eco.purpose-notification.footer-sitemap".split("."), M = [
+	"",
+	"cover",
+	"contain",
+	"default"
+], N = [
+	"",
+	"none",
+	"s",
+	"m",
+	"l",
+	"xl"
 ], P = [
-  "",
-  "default",
-  "start",
-  "end",
-  "center",
-  "stretch"
-], G = [
-  "",
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  "10",
-  "11",
-  "12"
-], q = [
-  "",
-  "-1",
-  "0",
-  "1",
-  "2",
-  "3",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  "10",
-  "11",
-  "12"
-], H = [
-  "",
-  "default",
-  "auto",
-  "start",
-  "end",
-  "center",
-  "stretch"
-], X = [
-  "",
-  "default",
-  "inherit",
-  "body-l",
-  "body-m",
-  "body-s",
-  "body-xs",
-  "heading-5xl",
-  "heading-4xl",
-  "heading-3xl",
-  "heading-2xl",
-  "heading-xl",
-  "heading-l",
-  "heading-m",
-  "heading-s"
-], F = [
-  "",
-  "default",
-  "inherit",
-  "brand",
-  "neutral",
-  "dimmed",
-  "purpose-success",
-  "purpose-warning",
-  "purpose-error",
-  "purpose-unlimited",
-  "purpose-promo",
-  "state-hover",
-  "state-active",
-  "state-disabled"
-], J = [
-  "",
-  "default",
-  "inherit",
-  "body",
-  "title",
-  "title-large",
-  "subtitle"
-], B = ["Xs", "S", "M", "L", "Xl"], K = [
-  "",
-  "default",
-  ...B.map((i) => i.toLowerCase())
-], Q = ["", "default", "left", "center", "right"], Y = [
-  "",
-  "none",
-  "3xs",
-  "2xs",
-  "xs",
-  "s",
-  "m",
-  "l",
-  "xl"
-], Z = ["", "none", "s", "m", "l"], tt = ["", "none", "main", "pill"], et = [
-  "none",
-  "main",
-  "brand",
-  "state-hover",
-  "state-active",
-  "neutral",
-  "purpose-success",
-  "purpose-warning",
-  "purpose-error",
-  "purpose-unlimited"
-], st = [
-  "",
-  "all",
-  "top",
-  "right",
-  "bottom",
-  "left",
-  "block",
-  "inline"
-], it = [
-  "",
-  "none",
-  "surface-light",
-  "surface-default",
-  "surface-strong",
-  "surface-stronger",
-  "surface-dark",
-  "surface-brand",
-  "surface-brand-light",
-  "container-primary",
-  "container-secondary",
-  "container-light",
-  "container-default",
-  "container-strong",
-  "state-hover",
-  "state-hover-bordered",
-  "state-active",
-  "state-disabled",
-  "purpose-success",
-  "purpose-warning",
-  "purpose-error",
-  "purpose-unlimited",
-  "purpose-promo",
-  "purpose-info",
-  "purpose-eco",
-  "purpose-notification",
-  "footer-sitemap"
-], ot = ["", "cover", "contain", "default"], rt = ["", "none", "s", "m", "l", "xl"], at = [
-  "",
-  "default",
-  "title-4xl",
-  "title-3xl",
-  "title-2xl",
-  "title-xl",
-  "title-l",
-  "title-m",
-  "title-s",
-  "subtitle"
-], lt = [
-  "",
-  "purple-top-red",
-  "purple-top-magenta",
-  "purple-top-orange",
-  "purple-top-blue",
-  "purple-top-turquoise",
-  "purple-top-green",
-  "purple-right-red",
-  "purple-right-magenta",
-  "purple-right-orange",
-  "purple-right-blue",
-  "purple-right-turquoise",
-  "purple-right-green",
-  "purple-top-right-red",
-  "purple-top-right-magenta",
-  "purple-top-right-orange",
-  "purple-top-right-blue",
-  "purple-top-right-turquoise",
-  "purple-top-right-green",
-  "purple-bottom-right-red",
-  "purple-bottom-right-magenta",
-  "purple-bottom-right-orange",
-  "purple-bottom-right-blue",
-  "purple-bottom-right-turquoise",
-  "purple-bottom-right-green",
-  "color-top-red",
-  "color-top-magenta",
-  "color-top-orange",
-  "color-top-blue",
-  "color-top-turquoise",
-  "color-top-green",
-  "color-right-red",
-  "color-right-magenta",
-  "color-right-orange",
-  "color-right-blue",
-  "color-right-turquoise",
-  "color-right-green",
-  "color-top-right-red",
-  "color-top-right-magenta",
-  "color-top-right-orange",
-  "color-top-right-blue",
-  "color-top-right-turquoise",
-  "color-top-right-green",
-  "color-bottom-right-red",
-  "color-bottom-right-magenta",
-  "color-bottom-right-orange",
-  "color-bottom-right-blue",
-  "color-bottom-right-turquoise",
-  "color-bottom-right-green"
-], nt = [
-  "none",
-  "2xs",
-  "xs",
-  "s",
-  "default",
-  "l",
-  "heading-to-subtitle",
-  "heading-to-content",
-  "page-layout-between-sections"
-], pt = [
-  "",
-  "all",
-  "top",
-  "right",
-  "bottom",
-  "left"
-], ht = [
-  "",
-  "default",
-  "xs",
-  "s",
-  "m",
-  "l",
-  "xl"
+	"",
+	"default",
+	"title-4xl",
+	"title-3xl",
+	"title-2xl",
+	"title-xl",
+	"title-l",
+	"title-m",
+	"title-s",
+	"subtitle"
+], F = /* @__PURE__ */ ".purple-top-red.purple-top-magenta.purple-top-orange.purple-top-blue.purple-top-turquoise.purple-top-green.purple-right-red.purple-right-magenta.purple-right-orange.purple-right-blue.purple-right-turquoise.purple-right-green.purple-top-right-red.purple-top-right-magenta.purple-top-right-orange.purple-top-right-blue.purple-top-right-turquoise.purple-top-right-green.purple-bottom-right-red.purple-bottom-right-magenta.purple-bottom-right-orange.purple-bottom-right-blue.purple-bottom-right-turquoise.purple-bottom-right-green.color-top-red.color-top-magenta.color-top-orange.color-top-blue.color-top-turquoise.color-top-green.color-right-red.color-right-magenta.color-right-orange.color-right-blue.color-right-turquoise.color-right-green.color-top-right-red.color-top-right-magenta.color-top-right-orange.color-top-right-blue.color-top-right-turquoise.color-top-right-green.color-bottom-right-red.color-bottom-right-magenta.color-bottom-right-orange.color-bottom-right-blue.color-bottom-right-turquoise.color-bottom-right-green".split("."), I = [
+	"none",
+	"2xs",
+	"xs",
+	"s",
+	"default",
+	"l",
+	"heading-to-subtitle",
+	"heading-to-content",
+	"page-layout-between-sections"
+], L = [
+	"",
+	"all",
+	"top",
+	"right",
+	"bottom",
+	"left"
+], R = [
+	"",
+	"default",
+	"xs",
+	"s",
+	"m",
+	"l",
+	"xl"
 ];
-function ut(i) {
-  const t = document.createElement("style");
-  t.innerHTML = i, document.head.appendChild(t);
+function z(e) {
+	let t = document.createElement("style");
+	t.innerHTML = e, document.head.appendChild(t);
 }
-function bt(i) {
-  return typeof i == "string" && (i === "false" || i === "0" || i === "null") || typeof i == "boolean" && !i;
+function B(e) {
+	return typeof e == "string" && (e === "false" || e === "0" || e === "null") || typeof e == "boolean" && !e;
 }
-function dt() {
-  return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
+function V() {
+	return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
 }
-function ct(i, t) {
-  return i.includes(t);
+function H(e, t) {
+	return t !== null && e.includes(t);
 }
-const z = [
-  "aria-label",
-  "aria-labelledby",
-  "aria-describedby",
-  "aria-controls",
-  "aria-expanded",
-  "aria-haspopup",
-  "aria-pressed",
-  "aria-selected",
-  "aria-required",
-  "aria-disabled",
-  "aria-live",
-  "aria-atomic",
-  "aria-relevant",
-  "aria-orientation",
-  "aria-valuenow",
-  "aria-valuetext",
-  "aria-valuemin",
-  "aria-valuemax",
-  "aria-details",
-  "aria-modal",
-  "aria-autocomplete",
-  "aria-activedescendant",
-  "aria-colcount",
-  "aria-colindex",
-  "aria-colspan",
-  "aria-rowcount",
-  "aria-rowindex",
-  "aria-rowspan",
-  "aria-keyshortcuts",
-  "aria-placeholder",
-  "aria-invalid",
-  "aria-busy",
-  "aria-owns"
-];
-function gt(i, t, s = !1) {
-  var e;
-  if (z.forEach((o) => {
-    i.getAttribute(o) && (t.setAttribute(o, i.getAttribute(o)), i.removeAttribute(o));
-  }), s && !i.getAttribute("aria-labelledby")) {
-    const o = `px-${((e = t.localName) == null ? void 0 : e.toLowerCase()) ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
-    t.setAttribute("id", o), i.setAttribute("aria-labelledby", o);
-  }
+var U = /* @__PURE__ */ "aria-label.aria-labelledby.aria-describedby.aria-controls.aria-expanded.aria-haspopup.aria-pressed.aria-selected.aria-required.aria-disabled.aria-live.aria-atomic.aria-relevant.aria-orientation.aria-valuenow.aria-valuetext.aria-valuemin.aria-valuemax.aria-details.aria-modal.aria-autocomplete.aria-activedescendant.aria-colcount.aria-colindex.aria-colspan.aria-rowcount.aria-rowindex.aria-rowspan.aria-keyshortcuts.aria-placeholder.aria-invalid.aria-busy.aria-owns".split(".");
+function W(e, t, n = !1) {
+	if (U.forEach((n) => {
+		e.getAttribute(n) && (t.setAttribute(n, e.getAttribute(n)), e.removeAttribute(n));
+	}), n && !e.getAttribute("aria-labelledby")) {
+		let n = `px-${t.localName?.toLowerCase() ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
+		t.setAttribute("id", n), e.setAttribute("aria-labelledby", n);
+	}
+}
+function G(e, t, n) {
+	if (n == null || n === "") {
+		e.removeAttribute(t);
+		return;
+	}
+	e.setAttribute(t, n.toString());
 }
-function ft(i, t, s, e = "", o, l = i) {
-  const b = new CSSStyleSheet(), m = s.reduce(
-    (L, r) => L + `
-  ${t(l, r)} {
-    ${i}: var(--${e}-${r}-desktop);
-    ${o ? `${o}:var(--${e}-${r}-desktop)` : ""}
+function K(e, t, n) {
+	if (!n) {
+		e.removeAttribute(t);
+		return;
+	}
+	e.setAttribute(t, "");
+}
+//#endregion
+//#region src/breakpoints.ts
+function q(e, t, n, r = "", i, a = e) {
+	let o = new CSSStyleSheet(), s = n.reduce((n, o) => n + `
+  ${t(a, o)} {
+    ${e}: var(--${r}-${o}-desktop);
+    ${i ? `${i}:var(--${r}-${o}-desktop)` : ""}
   }
   /* Mobile only - max 767px */
   @media only screen and (max-width: 47.938rem) {
-    ${t(l, r)} {
-      ${i}: var(--${e}-${r}-mobile);
-      ${o ? `${o}: var(--${e}-${r}-mobile)` : ""}
+    ${t(a, o)} {
+      ${e}: var(--${r}-${o}-mobile);
+      ${i ? `${i}: var(--${r}-${o}-mobile)` : ""}
     }
   }
-  ${t(l, r, "mobile")} {
+  ${t(a, o, "mobile")} {
  /* Mobile only - max 767px */
   @media only screen and (max-width: 47.938rem) {
-      ${i}: var(--${e}-${r}-mobile) !important;
-      ${o ? `${o}: var(--${e}-${r}-mobile)` : ""}
+      ${e}: var(--${r}-${o}-mobile) !important;
+      ${i ? `${i}: var(--${r}-${o}-mobile)` : ""}
     }
   }
-  ${t(l, r, "tablet")} {
+  ${t(a, o, "tablet")} {
   /* Tablet - min 768px max 1024px */
   @media only screen and (min-width: 48rem) and (max-width: 64rem) {
-      ${i}: var(--${e}-${r}-desktop) !important;
-      ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
+      ${e}: var(--${r}-${o}-desktop) !important;
+      ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
     }
   }
-  ${t(l, r, "laptop")} {
+  ${t(a, o, "laptop")} {
   /* Laptop - 1025px*/
   @media only screen and (min-width: 64.0625rem) {
-      ${i}: var(--${e}-${r}-desktop) !important;
-      ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
+      ${e}: var(--${r}-${o}-desktop) !important;
+      ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
     }
   }
-  ${t(l, r, "desktop")} {
+  ${t(a, o, "desktop")} {
   /* Desktop - 1025px*/
   @media only screen and (min-width: 64.0625rem) {
-      ${i}: var(--${e}-${r}-desktop) !important;
-      ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
+      ${e}: var(--${r}-${o}-desktop) !important;
+      ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
     }
-  }`,
-    ""
-  );
-  return b.replaceSync(m), b;
-}
-class mt {
-  constructor(t, s, e, o) {
-    this.component = t, this.attributeName = s, this.cssVariable = o, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = e, Object.defineProperty(
-      this.component,
-      this.toCamelCase(this.attributeName),
-      {
-        get: () => this.component.getAttribute(this.attributeName),
-        set: (l) => {
-          this.component.setAttribute(this.attributeName, l);
-        }
-      }
-    );
-  }
-  toCamelCase(t) {
-    return t.replace(/[-_]+(.)?/g, (s, e) => e ? e.toUpperCase() : "");
-  }
-  init(t) {
-    this.setCSSProperty(this.attributeName, t), this.setCSSProperties();
-  }
-  attributeChangedCallback(t, s, e) {
-    if (s !== e)
-      switch (!0) {
-        case t === this.attributeName:
-        case t === `${this.attributeName}--mobile`:
-        case t === `${this.attributeName}--tablet`:
-        case t === `${this.attributeName}--laptop`:
-        case t === `${this.attributeName}--desktop`:
-          this.setCSSProperty(t, e);
-          break;
-        default:
-          return;
-      }
-  }
-  setCSSProperty(t, s, e = !0) {
-    const [, o = ""] = t.split("--");
-    this.component.style.setProperty(
-      `${this.cssVariable}${e ? "-all" : ""}${o ? `-${o}` : ""}`,
-      `${this._attributeValue(s, o)}`
-    );
-  }
-  setCSSProperties() {
-    const t = this.component.getAttribute(this.attributeName);
-    t && (this.setCSSProperty(this.attributeName, t), this.setCSSProperty(this.attributeNameMobile, t), this.setCSSProperty(this.attributeNameTablet, t), this.setCSSProperty(this.attributeNameLaptop, t), this.setCSSProperty(this.attributeNameDesktop, t));
-    const s = this.component.getAttribute(
-      this.attributeNameMobile
-    );
-    s && this.setCSSProperty(
-      this.attributeNameMobile,
-      s,
-      !1
-    );
-    const e = this.component.getAttribute(
-      this.attributeNameTablet
-    );
-    e && this.setCSSProperty(
-      this.attributeNameTablet,
-      e,
-      !1
-    );
-    const o = this.component.getAttribute(
-      this.attributeNameLaptop
-    );
-    o && this.setCSSProperty(
-      this.attributeNameLaptop,
-      o,
-      !1
-    );
-    const l = this.component.getAttribute(
-      this.attributeNameDesktop
-    );
-    l && this.setCSSProperty(
-      this.attributeNameDesktop,
-      l,
-      !1
-    );
-  }
-  set attributeValue(t) {
-    this._attributeValue = t, this.setCSSProperties();
-  }
+  }`, "");
+	return o.replaceSync(s), o;
 }
-export {
-  mt as AttributeBreakpointHandlerDelegate,
-  v as PxElement,
-  V as VerticallyExtendedElement,
-  y as WithExtraAttributes,
-  U as WrappedInteractiveStateController,
-  z as accessibilityAttributes,
-  ut as addGlobalStylesheet,
-  ht as assetContainerImgWidthValues,
-  it as backgroundColorValues,
-  ot as backgroundSizeValues,
-  et as borderColorValues,
-  tt as borderRadiusValues,
-  st as borderSideValues,
-  Z as borderValues,
-  rt as boxShadowValues,
-  ct as checkName,
-  F as colorValues,
-  I as cssGridAlignSelfValues,
-  G as cssGridColSpanValues,
-  P as cssGridJustifySelfValues,
-  q as cssGridOrderValues,
-  H as cssGridPlaceSelfValues,
-  ft as cssTokenBreakpoints,
-  _ as flexboxAlignSelfValues,
-  X as fontsizeValues,
-  J as fontweightValues,
-  nt as gapValues,
-  D as getSupportedAttributeNames,
-  N as getSupportedPropertyNames,
-  dt as getViewportFormat,
-  lt as gradientValues,
-  W as gridGapValues,
-  at as headingValues,
-  B as iconSizeValues,
-  K as iconSizeValuesKC,
-  w as isComponentDebug,
-  bt as isFalsy,
-  E as log,
-  pt as noBorderRadiusValues,
-  Y as paddingValues,
-  Q as textalignValues,
-  gt as transferAccessibilityAttributes
+var J = class {
+	constructor(e, t, n, r) {
+		this.component = e, this.attributeName = t, this.cssVariable = r, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = n, Object.defineProperty(this.component, this.toCamelCase(this.attributeName), {
+			get: () => this.component.getAttribute(this.attributeName),
+			set: (e) => {
+				this.component.setAttribute(this.attributeName, e);
+			}
+		});
+	}
+	toCamelCase(e) {
+		return e.replace(/[-_]+(.)?/g, (e, t) => t ? t.toUpperCase() : "");
+	}
+	init(e) {
+		this.setCSSProperty(this.attributeName, e), this.setCSSProperties();
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (!0) {
+			case e === this.attributeName:
+			case e === `${this.attributeName}--mobile`:
+			case e === `${this.attributeName}--tablet`:
+			case e === `${this.attributeName}--laptop`:
+			case e === `${this.attributeName}--desktop`:
+				this.setCSSProperty(e, n);
+				break;
+			default: return;
+		}
+	}
+	setCSSProperty(e, t, n = !0) {
+		let [, r = ""] = e.split("--");
+		this.component.style.setProperty(`${this.cssVariable}${n ? "-all" : ""}${r ? `-${r}` : ""}`, `${this._attributeValue(t, r)}`);
+	}
+	setCSSProperties() {
+		let e = this.component.getAttribute(this.attributeName);
+		e && (this.setCSSProperty(this.attributeName, e), this.setCSSProperty(this.attributeNameMobile, e), this.setCSSProperty(this.attributeNameTablet, e), this.setCSSProperty(this.attributeNameLaptop, e), this.setCSSProperty(this.attributeNameDesktop, e));
+		let t = this.component.getAttribute(this.attributeNameMobile);
+		t && this.setCSSProperty(this.attributeNameMobile, t, !1);
+		let n = this.component.getAttribute(this.attributeNameTablet);
+		n && this.setCSSProperty(this.attributeNameTablet, n, !1);
+		let r = this.component.getAttribute(this.attributeNameLaptop);
+		r && this.setCSSProperty(this.attributeNameLaptop, r, !1);
+		let i = this.component.getAttribute(this.attributeNameDesktop);
+		i && this.setCSSProperty(this.attributeNameDesktop, i, !1);
+	}
+	set attributeValue(e) {
+		this._attributeValue = e, this.setCSSProperties();
+	}
 };
+//#endregion
+export { J as AttributeBreakpointHandlerDelegate, d as PxElement, f as VerticallyExtendedElement, u as WithExtraAttributes, c as WrappedInteractiveStateController, U as accessibilityAttributes, z as addGlobalStylesheet, R as assetContainerImgWidthValues, j as backgroundColorValues, M as backgroundSizeValues, K as booleanPropertyToAttributeSetter, k as borderColorValues, O as borderRadiusValues, A as borderSideValues, D as borderValues, N as boxShadowValues, H as checkName, x as colorValues, h as cssGridAlignSelfValues, _ as cssGridColSpanValues, g as cssGridJustifySelfValues, v as cssGridOrderValues, y as cssGridPlaceSelfValues, q as cssTokenBreakpoints, m as flexboxAlignSelfValues, b as fontsizeValues, S as fontweightValues, I as gapValues, n as getSupportedAttributeNames, t as getSupportedPropertyNames, V as getViewportFormat, F as gradientValues, p as gridGapValues, P as headingValues, C as iconSizeValues, w as iconSizeValuesKC, o as isComponentDebug, B as isFalsy, s as log, L as noBorderRadiusValues, E as paddingValues, G as propertyToAttributeSetter, T as textalignValues, W as transferAccessibilityAttributes };