@justeattakeaway/pie-modal 0.13.0 → 0.16.0

package/dist/index.js

@@ -1,13 +1,13 @@
-import { nothing as B, unsafeCSS as P, LitElement as E } from "lit";
-import { html as f, unsafeStatic as $ } from "lit/static-html.js";
-import { property as s, query as D } from "lit/decorators.js";
-import { property as T } from "lit/decorators/property.js";
-var A = Object.defineProperty, F = Object.getOwnPropertyDescriptor, R = (n, e, o, t) => {
-  for (var i = t > 1 ? void 0 : t ? F(e, o) : e, a = n.length - 1, r; a >= 0; a--)
-    (r = n[a]) && (i = (t ? r(e, o, i) : r(i)) || i);
-  return t && i && A(e, o, i), i;
+import { nothing as f, unsafeCSS as Xe, LitElement as Ge } from "lit";
+import { html as y, unsafeStatic as Je } from "lit/static-html.js";
+import { property as g, query as Ke } from "lit/decorators.js";
+import { property as Qe } from "lit/decorators/property.js";
+var et = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, it = (n, e, t, i) => {
+  for (var o = i > 1 ? void 0 : i ? tt(e, t) : e, s = n.length - 1, r; s >= 0; s--)
+    (r = n[s]) && (o = (i ? r(e, t, o) : r(o)) || o);
+  return i && o && et(e, t, o), o;
 };
-const I = (n) => {
+const ot = (n) => {
   class e extends n {
     constructor() {
       super(...arguments), this.dir = "ltr";
@@ -22,171 +22,956 @@ const I = (n) => {
      * will not be reactive and is only computed once
      */
     get isRTL() {
-      var t;
-      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((t = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : t.direction) === "rtl";
+      var i;
+      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((i = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : i.direction) === "rtl";
     }
   }
-  return R([
-    T({ type: String, reflect: !0 })
+  return it([
+    Qe({ type: String, reflect: !0 })
   ], e.prototype, "dir", 2), e;
-}, S = (n, e, o) => function(i, a) {
-  const r = `#${a}`;
-  Object.defineProperty(i, a, {
+}, ge = (n, e, t) => function(o, s) {
+  const r = `#${s}`;
+  Object.defineProperty(o, s, {
     get() {
       return this[r];
     },
-    set(p) {
-      const c = this[r];
-      e.includes(p) ? this[r] = p : (console.error(
-        `<${n}> Invalid value "${p}" provided for property "${a}".`,
+    set(d) {
+      const l = this[r];
+      e.includes(d) ? this[r] = d : (console.error(
+        `<${n}> Invalid value "${d}" provided for property "${s}".`,
         `Must be one of: ${e.join(" | ")}.`,
-        `Falling back to default value: "${o}"`
-      ), this[r] = o), this.requestUpdate(a, c);
+        `Falling back to default value: "${t}"`
+      ), this[r] = t), this.requestUpdate(s, l);
     }
   });
-}, j = (n) => function(o, t) {
-  const i = `#${t}`;
-  Object.defineProperty(o, t, {
+}, nt = (n) => function(t, i) {
+  const o = `#${i}`;
+  Object.defineProperty(t, i, {
     get() {
-      return this[i];
+      return this[o];
     },
-    set(a) {
-      const r = this[i];
-      (a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${t}"`), this[i] = a, this.requestUpdate(t, r);
+    set(s) {
+      const r = this[o];
+      (s == null || typeof s == "string" && s.trim() === "") && console.error(`<${n}> Missing required attribute "${i}"`), this[o] = s, this.requestUpdate(i, r);
     }
   });
 };
-function q(n) {
+function st(n) {
   if (Array.isArray(n)) {
-    for (var e = 0, o = Array(n.length); e < n.length; e++)
-      o[e] = n[e];
-    return o;
+    for (var e = 0, t = Array(n.length); e < n.length; e++)
+      t[e] = n[e];
+    return t;
   } else
     return Array.from(n);
 }
-var O = !1;
+var me = !1;
 if (typeof window < "u") {
-  var C = {
+  var we = {
     get passive() {
-      O = !0;
+      me = !0;
     }
   };
-  window.addEventListener("testPassive", null, C), window.removeEventListener("testPassive", null, C);
+  window.addEventListener("testPassive", null, we), window.removeEventListener("testPassive", null, we);
 }
-var y = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), u = [], w = !1, L = -1, v = void 0, m = void 0, g = void 0, M = function(e) {
-  return u.some(function(o) {
-    return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
+var X = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), E = [], G = !1, Ue = -1, T = void 0, S = void 0, R = void 0, He = function(e) {
+  return E.some(function(t) {
+    return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
   });
-}, _ = function(e) {
-  var o = e || window.event;
-  return M(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
-}, V = function(e) {
-  if (g === void 0) {
-    var o = !!e && e.reserveScrollBarGap === !0, t = window.innerWidth - document.documentElement.clientWidth;
-    if (o && t > 0) {
-      var i = parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"), 10);
-      g = document.body.style.paddingRight, document.body.style.paddingRight = i + t + "px";
+}, J = function(e) {
+  var t = e || window.event;
+  return He(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
+}, rt = function(e) {
+  if (R === void 0) {
+    var t = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
+    if (t && i > 0) {
+      var o = parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"), 10);
+      R = document.body.style.paddingRight, document.body.style.paddingRight = o + i + "px";
     }
   }
-  v === void 0 && (v = document.body.style.overflow, document.body.style.overflow = "hidden");
-}, N = function() {
-  g !== void 0 && (document.body.style.paddingRight = g, g = void 0), v !== void 0 && (document.body.style.overflow = v, v = void 0);
-}, H = function() {
+  T === void 0 && (T = document.body.style.overflow, document.body.style.overflow = "hidden");
+}, lt = function() {
+  R !== void 0 && (document.body.style.paddingRight = R, R = void 0), T !== void 0 && (document.body.style.overflow = T, T = void 0);
+}, at = function() {
   return window.requestAnimationFrame(function() {
-    if (m === void 0) {
-      m = {
+    if (S === void 0) {
+      S = {
         position: document.body.style.position,
         top: document.body.style.top,
         left: document.body.style.left
       };
-      var e = window, o = e.scrollY, t = e.scrollX, i = e.innerHeight;
-      document.body.style.position = "fixed", document.body.style.top = -o, document.body.style.left = -t, setTimeout(function() {
+      var e = window, t = e.scrollY, i = e.scrollX, o = e.innerHeight;
+      document.body.style.position = "fixed", document.body.style.top = -t, document.body.style.left = -i, setTimeout(function() {
         return window.requestAnimationFrame(function() {
-          var a = i - window.innerHeight;
-          a && o >= i && (document.body.style.top = -(o + a));
+          var s = o - window.innerHeight;
+          s && t >= o && (document.body.style.top = -(t + s));
         });
       }, 300);
     }
   });
-}, W = function() {
-  if (m !== void 0) {
-    var e = -parseInt(document.body.style.top, 10), o = -parseInt(document.body.style.left, 10);
-    document.body.style.position = m.position, document.body.style.top = m.top, document.body.style.left = m.left, window.scrollTo(o, e), m = void 0;
+}, dt = function() {
+  if (S !== void 0) {
+    var e = -parseInt(document.body.style.top, 10), t = -parseInt(document.body.style.left, 10);
+    document.body.style.position = S.position, document.body.style.top = S.top, document.body.style.left = S.left, window.scrollTo(t, e), S = void 0;
   }
-}, Y = function(e) {
+}, ct = function(e) {
   return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
-}, U = function(e, o) {
-  var t = e.targetTouches[0].clientY - L;
-  return M(e.target) ? !1 : o && o.scrollTop === 0 && t > 0 || Y(o) && t < 0 ? _(e) : (e.stopPropagation(), !0);
-}, X = function(e, o) {
+}, ht = function(e, t) {
+  var i = e.targetTouches[0].clientY - Ue;
+  return He(e.target) ? !1 : t && t.scrollTop === 0 && i > 0 || ct(t) && i < 0 ? J(e) : (e.stopPropagation(), !0);
+}, ut = function(e, t) {
   if (!e) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
   }
-  if (!u.some(function(i) {
-    return i.targetElement === e;
+  if (!E.some(function(o) {
+    return o.targetElement === e;
   })) {
-    var t = {
+    var i = {
       targetElement: e,
-      options: o || {}
+      options: t || {}
     };
-    u = [].concat(q(u), [t]), y ? H() : V(o), y && (e.ontouchstart = function(i) {
-      i.targetTouches.length === 1 && (L = i.targetTouches[0].clientY);
-    }, e.ontouchmove = function(i) {
-      i.targetTouches.length === 1 && U(i, e);
-    }, w || (document.addEventListener("touchmove", _, O ? { passive: !1 } : void 0), w = !0));
+    E = [].concat(st(E), [i]), X ? at() : rt(t), X && (e.ontouchstart = function(o) {
+      o.targetTouches.length === 1 && (Ue = o.targetTouches[0].clientY);
+    }, e.ontouchmove = function(o) {
+      o.targetTouches.length === 1 && ht(o, e);
+    }, G || (document.addEventListener("touchmove", J, me ? { passive: !1 } : void 0), G = !0));
   }
-}, G = function(e) {
+}, pt = function(e) {
   if (!e) {
     console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
     return;
   }
-  u = u.filter(function(o) {
-    return o.targetElement !== e;
-  }), y && (e.ontouchstart = null, e.ontouchmove = null, w && u.length === 0 && (document.removeEventListener("touchmove", _, O ? { passive: !1 } : void 0), w = !1)), y ? W() : N();
+  E = E.filter(function(t) {
+    return t.targetElement !== e;
+  }), X && (e.ontouchstart = null, e.ontouchmove = null, G && E.length === 0 && (document.removeEventListener("touchmove", J, me ? { passive: !1 } : void 0), G = !1)), X ? dt() : lt();
 };
-const J = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}@media (max-width: 767px){.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal::backdrop{background:rgba(0,0,0,.5)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}.c-modal .c-modal-header{--modal-header-padding: var(--dt-spacing-e);padding-inline:var(--modal-header-padding);padding-block:var(--modal-header-padding);align-items:center;display:flex}.c-modal[hasbackbutton] .c-modal-header{padding-block:var(--dt-spacing-c);padding-inline-start:var(--dt-spacing-c)}.c-modal[isdismissible] .c-modal-header{justify-content:space-between;padding-block:var(--dt-spacing-c);padding-inline-end:var(--dt-spacing-c)}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0}.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-c)}.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding: var(--dt-spacing-e);--modal-content-padding-block: var(--dt-spacing-a);--spinner-size: 48px;--spinner-border-width: 6px;--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;min-block-size:60px;font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline:var(--modal-content-padding);padding-block:var(--modal-content-padding-block);overflow-y:auto}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal .c-modal-content:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;opacity:0}.c-modal[isLoading] .c-modal-content:before{animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);opacity:1}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{opacity:0}.c-modal .c-modal-closeBtn{margin-inline-start:auto}
-`, Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], z = "pie-modal-close", b = "pie-modal-open", x = "pie-modal-back";
-var K = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, d = (n, e, o, t) => {
-  for (var i = t > 1 ? void 0 : t ? ee(e, o) : e, a = n.length - 1, r; a >= 0; a--)
-    (r = n[a]) && (i = (t ? r(e, o, i) : r(i)) || i);
-  return t && i && K(e, o, i), i;
+function $(n, e, t, i) {
+  var o = arguments.length, s = o < 3 ? e : i === null ? i = Object.getOwnPropertyDescriptor(e, t) : i, r;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function")
+    s = Reflect.decorate(n, e, t, i);
+  else
+    for (var d = n.length - 1; d >= 0; d--)
+      (r = n[d]) && (s = (o < 3 ? r(s) : o > 3 ? r(e, t, s) : r(e, t)) || s);
+  return o > 3 && s && Object.defineProperty(e, t, s), s;
+}
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Z = window, fe = Z.ShadowRoot && (Z.ShadyCSS === void 0 || Z.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, be = Symbol(), Ae = /* @__PURE__ */ new WeakMap();
+let De = class {
+  constructor(e, t, i) {
+    if (this._$cssResult$ = !0, i !== be)
+      throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = e, this.t = t;
+  }
+  get styleSheet() {
+    let e = this.o;
+    const t = this.t;
+    if (fe && e === void 0) {
+      const i = t !== void 0 && t.length === 1;
+      i && (e = Ae.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), i && Ae.set(t, e));
+    }
+    return e;
+  }
+  toString() {
+    return this.cssText;
+  }
+};
+const vt = (n) => new De(typeof n == "string" ? n : n + "", void 0, be), ye = (n, ...e) => {
+  const t = n.length === 1 ? n[0] : e.reduce((i, o, s) => i + ((r) => {
+    if (r._$cssResult$ === !0)
+      return r.cssText;
+    if (typeof r == "number")
+      return r;
+    throw Error("Value passed to 'css' function must be a 'css' function result: " + r + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+  })(o) + n[s + 1], n[0]);
+  return new De(t, n, be);
+}, gt = (n, e) => {
+  fe ? n.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet) : e.forEach((t) => {
+    const i = document.createElement("style"), o = Z.litNonce;
+    o !== void 0 && i.setAttribute("nonce", o), i.textContent = t.cssText, n.appendChild(i);
+  });
+}, Se = fe ? (n) => n : (n) => n instanceof CSSStyleSheet ? ((e) => {
+  let t = "";
+  for (const i of e.cssRules)
+    t += i.cssText;
+  return vt(t);
+})(n) : n;
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var oe;
+const K = window, xe = K.trustedTypes, mt = xe ? xe.emptyScript : "", Ee = K.reactiveElementPolyfillSupport, ue = { toAttribute(n, e) {
+  switch (e) {
+    case Boolean:
+      n = n ? mt : null;
+      break;
+    case Object:
+    case Array:
+      n = n == null ? n : JSON.stringify(n);
+  }
+  return n;
+}, fromAttribute(n, e) {
+  let t = n;
+  switch (e) {
+    case Boolean:
+      t = n !== null;
+      break;
+    case Number:
+      t = n === null ? null : Number(n);
+      break;
+    case Object:
+    case Array:
+      try {
+        t = JSON.parse(n);
+      } catch {
+        t = null;
+      }
+  }
+  return t;
+} }, Ne = (n, e) => e !== n && (e == e || n == n), ne = { attribute: !0, type: String, converter: ue, reflect: !1, hasChanged: Ne }, pe = "finalized";
+let z = class extends HTMLElement {
+  constructor() {
+    super(), this._$Ei = /* @__PURE__ */ new Map(), this.isUpdatePending = !1, this.hasUpdated = !1, this._$El = null, this.u();
+  }
+  static addInitializer(e) {
+    var t;
+    this.finalize(), ((t = this.h) !== null && t !== void 0 ? t : this.h = []).push(e);
+  }
+  static get observedAttributes() {
+    this.finalize();
+    const e = [];
+    return this.elementProperties.forEach((t, i) => {
+      const o = this._$Ep(i, t);
+      o !== void 0 && (this._$Ev.set(o, i), e.push(o));
+    }), e;
+  }
+  static createProperty(e, t = ne) {
+    if (t.state && (t.attribute = !1), this.finalize(), this.elementProperties.set(e, t), !t.noAccessor && !this.prototype.hasOwnProperty(e)) {
+      const i = typeof e == "symbol" ? Symbol() : "__" + e, o = this.getPropertyDescriptor(e, i, t);
+      o !== void 0 && Object.defineProperty(this.prototype, e, o);
+    }
+  }
+  static getPropertyDescriptor(e, t, i) {
+    return { get() {
+      return this[t];
+    }, set(o) {
+      const s = this[e];
+      this[t] = o, this.requestUpdate(e, s, i);
+    }, configurable: !0, enumerable: !0 };
+  }
+  static getPropertyOptions(e) {
+    return this.elementProperties.get(e) || ne;
+  }
+  static finalize() {
+    if (this.hasOwnProperty(pe))
+      return !1;
+    this[pe] = !0;
+    const e = Object.getPrototypeOf(this);
+    if (e.finalize(), e.h !== void 0 && (this.h = [...e.h]), this.elementProperties = new Map(e.elementProperties), this._$Ev = /* @__PURE__ */ new Map(), this.hasOwnProperty("properties")) {
+      const t = this.properties, i = [...Object.getOwnPropertyNames(t), ...Object.getOwnPropertySymbols(t)];
+      for (const o of i)
+        this.createProperty(o, t[o]);
+    }
+    return this.elementStyles = this.finalizeStyles(this.styles), !0;
+  }
+  static finalizeStyles(e) {
+    const t = [];
+    if (Array.isArray(e)) {
+      const i = new Set(e.flat(1 / 0).reverse());
+      for (const o of i)
+        t.unshift(Se(o));
+    } else
+      e !== void 0 && t.push(Se(e));
+    return t;
+  }
+  static _$Ep(e, t) {
+    const i = t.attribute;
+    return i === !1 ? void 0 : typeof i == "string" ? i : typeof e == "string" ? e.toLowerCase() : void 0;
+  }
+  u() {
+    var e;
+    this._$E_ = new Promise((t) => this.enableUpdating = t), this._$AL = /* @__PURE__ */ new Map(), this._$Eg(), this.requestUpdate(), (e = this.constructor.h) === null || e === void 0 || e.forEach((t) => t(this));
+  }
+  addController(e) {
+    var t, i;
+    ((t = this._$ES) !== null && t !== void 0 ? t : this._$ES = []).push(e), this.renderRoot !== void 0 && this.isConnected && ((i = e.hostConnected) === null || i === void 0 || i.call(e));
+  }
+  removeController(e) {
+    var t;
+    (t = this._$ES) === null || t === void 0 || t.splice(this._$ES.indexOf(e) >>> 0, 1);
+  }
+  _$Eg() {
+    this.constructor.elementProperties.forEach((e, t) => {
+      this.hasOwnProperty(t) && (this._$Ei.set(t, this[t]), delete this[t]);
+    });
+  }
+  createRenderRoot() {
+    var e;
+    const t = (e = this.shadowRoot) !== null && e !== void 0 ? e : this.attachShadow(this.constructor.shadowRootOptions);
+    return gt(t, this.constructor.elementStyles), t;
+  }
+  connectedCallback() {
+    var e;
+    this.renderRoot === void 0 && (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (e = this._$ES) === null || e === void 0 || e.forEach((t) => {
+      var i;
+      return (i = t.hostConnected) === null || i === void 0 ? void 0 : i.call(t);
+    });
+  }
+  enableUpdating(e) {
+  }
+  disconnectedCallback() {
+    var e;
+    (e = this._$ES) === null || e === void 0 || e.forEach((t) => {
+      var i;
+      return (i = t.hostDisconnected) === null || i === void 0 ? void 0 : i.call(t);
+    });
+  }
+  attributeChangedCallback(e, t, i) {
+    this._$AK(e, i);
+  }
+  _$EO(e, t, i = ne) {
+    var o;
+    const s = this.constructor._$Ep(e, i);
+    if (s !== void 0 && i.reflect === !0) {
+      const r = (((o = i.converter) === null || o === void 0 ? void 0 : o.toAttribute) !== void 0 ? i.converter : ue).toAttribute(t, i.type);
+      this._$El = e, r == null ? this.removeAttribute(s) : this.setAttribute(s, r), this._$El = null;
+    }
+  }
+  _$AK(e, t) {
+    var i;
+    const o = this.constructor, s = o._$Ev.get(e);
+    if (s !== void 0 && this._$El !== s) {
+      const r = o.getPropertyOptions(s), d = typeof r.converter == "function" ? { fromAttribute: r.converter } : ((i = r.converter) === null || i === void 0 ? void 0 : i.fromAttribute) !== void 0 ? r.converter : ue;
+      this._$El = s, this[s] = d.fromAttribute(t, r.type), this._$El = null;
+    }
+  }
+  requestUpdate(e, t, i) {
+    let o = !0;
+    e !== void 0 && (((i = i || this.constructor.getPropertyOptions(e)).hasChanged || Ne)(this[e], t) ? (this._$AL.has(e) || this._$AL.set(e, t), i.reflect === !0 && this._$El !== e && (this._$EC === void 0 && (this._$EC = /* @__PURE__ */ new Map()), this._$EC.set(e, i))) : o = !1), !this.isUpdatePending && o && (this._$E_ = this._$Ej());
+  }
+  async _$Ej() {
+    this.isUpdatePending = !0;
+    try {
+      await this._$E_;
+    } catch (t) {
+      Promise.reject(t);
+    }
+    const e = this.scheduleUpdate();
+    return e != null && await e, !this.isUpdatePending;
+  }
+  scheduleUpdate() {
+    return this.performUpdate();
+  }
+  performUpdate() {
+    var e;
+    if (!this.isUpdatePending)
+      return;
+    this.hasUpdated, this._$Ei && (this._$Ei.forEach((o, s) => this[s] = o), this._$Ei = void 0);
+    let t = !1;
+    const i = this._$AL;
+    try {
+      t = this.shouldUpdate(i), t ? (this.willUpdate(i), (e = this._$ES) === null || e === void 0 || e.forEach((o) => {
+        var s;
+        return (s = o.hostUpdate) === null || s === void 0 ? void 0 : s.call(o);
+      }), this.update(i)) : this._$Ek();
+    } catch (o) {
+      throw t = !1, this._$Ek(), o;
+    }
+    t && this._$AE(i);
+  }
+  willUpdate(e) {
+  }
+  _$AE(e) {
+    var t;
+    (t = this._$ES) === null || t === void 0 || t.forEach((i) => {
+      var o;
+      return (o = i.hostUpdated) === null || o === void 0 ? void 0 : o.call(i);
+    }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
+  }
+  _$Ek() {
+    this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
+  }
+  get updateComplete() {
+    return this.getUpdateComplete();
+  }
+  getUpdateComplete() {
+    return this._$E_;
+  }
+  shouldUpdate(e) {
+    return !0;
+  }
+  update(e) {
+    this._$EC !== void 0 && (this._$EC.forEach((t, i) => this._$EO(i, this[i], t)), this._$EC = void 0), this._$Ek();
+  }
+  updated(e) {
+  }
+  firstUpdated(e) {
+  }
+};
+z[pe] = !0, z.elementProperties = /* @__PURE__ */ new Map(), z.elementStyles = [], z.shadowRootOptions = { mode: "open" }, Ee == null || Ee({ ReactiveElement: z }), ((oe = K.reactiveElementVersions) !== null && oe !== void 0 ? oe : K.reactiveElementVersions = []).push("1.6.2");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var se;
+const Q = window, O = Q.trustedTypes, Ce = O ? O.createPolicy("lit-html", { createHTML: (n) => n }) : void 0, ve = "$lit$", _ = `lit$${(Math.random() + "").slice(9)}$`, je = "?" + _, ft = `<${je}>`, k = document, U = () => k.createComment(""), H = (n) => n === null || typeof n != "object" && typeof n != "function", Fe = Array.isArray, bt = (n) => Fe(n) || typeof (n == null ? void 0 : n[Symbol.iterator]) == "function", re = `[ 	
+\f\r]`, B = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ke = /-->/g, ze = />/g, A = RegExp(`>|${re}(?:([^\\s"'>=/]+)(${re}*=${re}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Oe = /'/g, Pe = /"/g, Ve = /^(?:script|style|textarea|title)$/i, yt = (n) => (e, ...t) => ({ _$litType$: n, strings: e, values: t }), $e = yt(1), P = Symbol.for("lit-noChange"), u = Symbol.for("lit-nothing"), Me = /* @__PURE__ */ new WeakMap(), x = k.createTreeWalker(k, 129, null, !1), $t = (n, e) => {
+  const t = n.length - 1, i = [];
+  let o, s = e === 2 ? "<svg>" : "", r = B;
+  for (let l = 0; l < t; l++) {
+    const a = n[l];
+    let b, c, h = -1, m = 0;
+    for (; m < a.length && (r.lastIndex = m, c = r.exec(a), c !== null); )
+      m = r.lastIndex, r === B ? c[1] === "!--" ? r = ke : c[1] !== void 0 ? r = ze : c[2] !== void 0 ? (Ve.test(c[2]) && (o = RegExp("</" + c[2], "g")), r = A) : c[3] !== void 0 && (r = A) : r === A ? c[0] === ">" ? (r = o ?? B, h = -1) : c[1] === void 0 ? h = -2 : (h = r.lastIndex - c[2].length, b = c[1], r = c[3] === void 0 ? A : c[3] === '"' ? Pe : Oe) : r === Pe || r === Oe ? r = A : r === ke || r === ze ? r = B : (r = A, o = void 0);
+    const w = r === A && n[l + 1].startsWith("/>") ? " " : "";
+    s += r === B ? a + ft : h >= 0 ? (i.push(b), a.slice(0, h) + ve + a.slice(h) + _ + w) : a + _ + (h === -2 ? (i.push(void 0), l) : w);
+  }
+  const d = s + (n[t] || "<?>") + (e === 2 ? "</svg>" : "");
+  if (!Array.isArray(n) || !n.hasOwnProperty("raw"))
+    throw Error("invalid template strings array");
+  return [Ce !== void 0 ? Ce.createHTML(d) : d, i];
+};
+class D {
+  constructor({ strings: e, _$litType$: t }, i) {
+    let o;
+    this.parts = [];
+    let s = 0, r = 0;
+    const d = e.length - 1, l = this.parts, [a, b] = $t(e, t);
+    if (this.el = D.createElement(a, i), x.currentNode = this.el.content, t === 2) {
+      const c = this.el.content, h = c.firstChild;
+      h.remove(), c.append(...h.childNodes);
+    }
+    for (; (o = x.nextNode()) !== null && l.length < d; ) {
+      if (o.nodeType === 1) {
+        if (o.hasAttributes()) {
+          const c = [];
+          for (const h of o.getAttributeNames())
+            if (h.endsWith(ve) || h.startsWith(_)) {
+              const m = b[r++];
+              if (c.push(h), m !== void 0) {
+                const w = o.getAttribute(m.toLowerCase() + ve).split(_), q = /([.?@])?(.*)/.exec(m);
+                l.push({ type: 1, index: s, name: q[2], strings: w, ctor: q[1] === "." ? wt : q[1] === "?" ? St : q[1] === "@" ? xt : ie });
+              } else
+                l.push({ type: 6, index: s });
+            }
+          for (const h of c)
+            o.removeAttribute(h);
+        }
+        if (Ve.test(o.tagName)) {
+          const c = o.textContent.split(_), h = c.length - 1;
+          if (h > 0) {
+            o.textContent = O ? O.emptyScript : "";
+            for (let m = 0; m < h; m++)
+              o.append(c[m], U()), x.nextNode(), l.push({ type: 2, index: ++s });
+            o.append(c[h], U());
+          }
+        }
+      } else if (o.nodeType === 8)
+        if (o.data === je)
+          l.push({ type: 2, index: s });
+        else {
+          let c = -1;
+          for (; (c = o.data.indexOf(_, c + 1)) !== -1; )
+            l.push({ type: 7, index: s }), c += _.length - 1;
+        }
+      s++;
+    }
+  }
+  static createElement(e, t) {
+    const i = k.createElement("template");
+    return i.innerHTML = e, i;
+  }
+}
+function M(n, e, t = n, i) {
+  var o, s, r, d;
+  if (e === P)
+    return e;
+  let l = i !== void 0 ? (o = t._$Co) === null || o === void 0 ? void 0 : o[i] : t._$Cl;
+  const a = H(e) ? void 0 : e._$litDirective$;
+  return (l == null ? void 0 : l.constructor) !== a && ((s = l == null ? void 0 : l._$AO) === null || s === void 0 || s.call(l, !1), a === void 0 ? l = void 0 : (l = new a(n), l._$AT(n, t, i)), i !== void 0 ? ((r = (d = t)._$Co) !== null && r !== void 0 ? r : d._$Co = [])[i] = l : t._$Cl = l), l !== void 0 && (e = M(n, l._$AS(n, e.values), l, i)), e;
+}
+class _t {
+  constructor(e, t) {
+    this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
+  }
+  get parentNode() {
+    return this._$AM.parentNode;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  u(e) {
+    var t;
+    const { el: { content: i }, parts: o } = this._$AD, s = ((t = e == null ? void 0 : e.creationScope) !== null && t !== void 0 ? t : k).importNode(i, !0);
+    x.currentNode = s;
+    let r = x.nextNode(), d = 0, l = 0, a = o[0];
+    for (; a !== void 0; ) {
+      if (d === a.index) {
+        let b;
+        a.type === 2 ? b = new N(r, r.nextSibling, this, e) : a.type === 1 ? b = new a.ctor(r, a.name, a.strings, this, e) : a.type === 6 && (b = new Et(r, this, e)), this._$AV.push(b), a = o[++l];
+      }
+      d !== (a == null ? void 0 : a.index) && (r = x.nextNode(), d++);
+    }
+    return x.currentNode = k, s;
+  }
+  v(e) {
+    let t = 0;
+    for (const i of this._$AV)
+      i !== void 0 && (i.strings !== void 0 ? (i._$AI(e, i, t), t += i.strings.length - 2) : i._$AI(e[t])), t++;
+  }
+}
+class N {
+  constructor(e, t, i, o) {
+    var s;
+    this.type = 2, this._$AH = u, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = i, this.options = o, this._$Cp = (s = o == null ? void 0 : o.isConnected) === null || s === void 0 || s;
+  }
+  get _$AU() {
+    var e, t;
+    return (t = (e = this._$AM) === null || e === void 0 ? void 0 : e._$AU) !== null && t !== void 0 ? t : this._$Cp;
+  }
+  get parentNode() {
+    let e = this._$AA.parentNode;
+    const t = this._$AM;
+    return t !== void 0 && (e == null ? void 0 : e.nodeType) === 11 && (e = t.parentNode), e;
+  }
+  get startNode() {
+    return this._$AA;
+  }
+  get endNode() {
+    return this._$AB;
+  }
+  _$AI(e, t = this) {
+    e = M(this, e, t), H(e) ? e === u || e == null || e === "" ? (this._$AH !== u && this._$AR(), this._$AH = u) : e !== this._$AH && e !== P && this._(e) : e._$litType$ !== void 0 ? this.g(e) : e.nodeType !== void 0 ? this.$(e) : bt(e) ? this.T(e) : this._(e);
+  }
+  k(e) {
+    return this._$AA.parentNode.insertBefore(e, this._$AB);
+  }
+  $(e) {
+    this._$AH !== e && (this._$AR(), this._$AH = this.k(e));
+  }
+  _(e) {
+    this._$AH !== u && H(this._$AH) ? this._$AA.nextSibling.data = e : this.$(k.createTextNode(e)), this._$AH = e;
+  }
+  g(e) {
+    var t;
+    const { values: i, _$litType$: o } = e, s = typeof o == "number" ? this._$AC(e) : (o.el === void 0 && (o.el = D.createElement(o.h, this.options)), o);
+    if (((t = this._$AH) === null || t === void 0 ? void 0 : t._$AD) === s)
+      this._$AH.v(i);
+    else {
+      const r = new _t(s, this), d = r.u(this.options);
+      r.v(i), this.$(d), this._$AH = r;
+    }
+  }
+  _$AC(e) {
+    let t = Me.get(e.strings);
+    return t === void 0 && Me.set(e.strings, t = new D(e)), t;
+  }
+  T(e) {
+    Fe(this._$AH) || (this._$AH = [], this._$AR());
+    const t = this._$AH;
+    let i, o = 0;
+    for (const s of e)
+      o === t.length ? t.push(i = new N(this.k(U()), this.k(U()), this, this.options)) : i = t[o], i._$AI(s), o++;
+    o < t.length && (this._$AR(i && i._$AB.nextSibling, o), t.length = o);
+  }
+  _$AR(e = this._$AA.nextSibling, t) {
+    var i;
+    for ((i = this._$AP) === null || i === void 0 || i.call(this, !1, !0, t); e && e !== this._$AB; ) {
+      const o = e.nextSibling;
+      e.remove(), e = o;
+    }
+  }
+  setConnected(e) {
+    var t;
+    this._$AM === void 0 && (this._$Cp = e, (t = this._$AP) === null || t === void 0 || t.call(this, e));
+  }
+}
+class ie {
+  constructor(e, t, i, o, s) {
+    this.type = 1, this._$AH = u, this._$AN = void 0, this.element = e, this.name = t, this._$AM = o, this.options = s, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = u;
+  }
+  get tagName() {
+    return this.element.tagName;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(e, t = this, i, o) {
+    const s = this.strings;
+    let r = !1;
+    if (s === void 0)
+      e = M(this, e, t, 0), r = !H(e) || e !== this._$AH && e !== P, r && (this._$AH = e);
+    else {
+      const d = e;
+      let l, a;
+      for (e = s[0], l = 0; l < s.length - 1; l++)
+        a = M(this, d[i + l], t, l), a === P && (a = this._$AH[l]), r || (r = !H(a) || a !== this._$AH[l]), a === u ? e = u : e !== u && (e += (a ?? "") + s[l + 1]), this._$AH[l] = a;
+    }
+    r && !o && this.j(e);
+  }
+  j(e) {
+    e === u ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+  }
+}
+class wt extends ie {
+  constructor() {
+    super(...arguments), this.type = 3;
+  }
+  j(e) {
+    this.element[this.name] = e === u ? void 0 : e;
+  }
+}
+const At = O ? O.emptyScript : "";
+class St extends ie {
+  constructor() {
+    super(...arguments), this.type = 4;
+  }
+  j(e) {
+    e && e !== u ? this.element.setAttribute(this.name, At) : this.element.removeAttribute(this.name);
+  }
+}
+class xt extends ie {
+  constructor(e, t, i, o, s) {
+    super(e, t, i, o, s), this.type = 5;
+  }
+  _$AI(e, t = this) {
+    var i;
+    if ((e = (i = M(this, e, t, 0)) !== null && i !== void 0 ? i : u) === P)
+      return;
+    const o = this._$AH, s = e === u && o !== u || e.capture !== o.capture || e.once !== o.once || e.passive !== o.passive, r = e !== u && (o === u || s);
+    s && this.element.removeEventListener(this.name, this, o), r && this.element.addEventListener(this.name, this, e), this._$AH = e;
+  }
+  handleEvent(e) {
+    var t, i;
+    typeof this._$AH == "function" ? this._$AH.call((i = (t = this.options) === null || t === void 0 ? void 0 : t.host) !== null && i !== void 0 ? i : this.element, e) : this._$AH.handleEvent(e);
+  }
+}
+class Et {
+  constructor(e, t, i) {
+    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = i;
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AI(e) {
+    M(this, e);
+  }
+}
+const Le = Q.litHtmlPolyfillSupport;
+Le == null || Le(D, N), ((se = Q.litHtmlVersions) !== null && se !== void 0 ? se : Q.litHtmlVersions = []).push("2.7.4");
+const Ct = (n, e, t) => {
+  var i, o;
+  const s = (i = t == null ? void 0 : t.renderBefore) !== null && i !== void 0 ? i : e;
+  let r = s._$litPart$;
+  if (r === void 0) {
+    const d = (o = t == null ? void 0 : t.renderBefore) !== null && o !== void 0 ? o : null;
+    s._$litPart$ = r = new N(e.insertBefore(U(), d), d, void 0, t ?? {});
+  }
+  return r._$AI(n), r;
 };
-const k = "pie-modal";
-class l extends I(E) {
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var le, ae;
+class C extends z {
   constructor() {
-    super(), this.headingLevel = "h2", this.isDismissible = !1, this.hasBackButton = !1, this.isFullWidthBelowMid = !1, this.isOpen = !1, this.isLoading = !1, this.size = "medium", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
+    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+  }
+  createRenderRoot() {
+    var e, t;
+    const i = super.createRenderRoot();
+    return (e = (t = this.renderOptions).renderBefore) !== null && e !== void 0 || (t.renderBefore = i.firstChild), i;
+  }
+  update(e) {
+    const t = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Ct(t, this.renderRoot, this.renderOptions);
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), (e = this._$Do) === null || e === void 0 || e.setConnected(!0);
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), (e = this._$Do) === null || e === void 0 || e.setConnected(!1);
+  }
+  render() {
+    return P;
+  }
+}
+C.finalized = !0, C._$litElement$ = !0, (le = globalThis.litElementHydrateSupport) === null || le === void 0 || le.call(globalThis, { LitElement: C });
+const Ie = globalThis.litElementPolyfillSupport;
+Ie == null || Ie({ LitElement: C });
+((ae = globalThis.litElementVersions) !== null && ae !== void 0 ? ae : globalThis.litElementVersions = []).push("3.3.2");
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const kt = (n, e) => e.kind === "method" && e.descriptor && !("value" in e.descriptor) ? { ...e, finisher(t) {
+  t.createProperty(e.key, n);
+} } : { kind: "field", key: Symbol(), placement: "own", descriptor: {}, originalKey: e.key, initializer() {
+  typeof e.initializer == "function" && (this[e.key] = e.initializer.call(this));
+}, finisher(t) {
+  t.createProperty(e.key, n);
+} }, zt = (n, e, t) => {
+  e.constructor.createProperty(t, n);
+};
+function I(n) {
+  return (e, t) => t !== void 0 ? zt(n, e, t) : kt(n, e);
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Ot = ({ finisher: n, descriptor: e }) => (t, i) => {
+  var o;
+  if (i === void 0) {
+    const s = (o = t.originalKey) !== null && o !== void 0 ? o : t.key, r = e != null ? { kind: "method", placement: "prototype", key: s, descriptor: e(t.key) } : { ...t, key: s };
+    return n != null && (r.finisher = function(d) {
+      n(d, s);
+    }), r;
+  }
+  {
+    const s = t.constructor;
+    e !== void 0 && Object.defineProperty(t, i, e(i)), n == null || n(s, i);
+  }
+};
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function _e(n, e) {
+  return Ot({ descriptor: (t) => {
+    const i = { get() {
+      var o, s;
+      return (s = (o = this.renderRoot) === null || o === void 0 ? void 0 : o.querySelector(n)) !== null && s !== void 0 ? s : null;
+    }, enumerable: !0, configurable: !0 };
+    if (e) {
+      const o = typeof t == "symbol" ? Symbol() : "__" + t;
+      i.get = function() {
+        var s, r;
+        return this[o] === void 0 && (this[o] = (r = (s = this.renderRoot) === null || s === void 0 ? void 0 : s.querySelector(n)) !== null && r !== void 0 ? r : null), this[o];
+      };
+    }
+    return i;
+  } });
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+var de;
+((de = window.HTMLSlotElement) === null || de === void 0 ? void 0 : de.prototype.assignedElements) != null;
+const ee = {
+  xs: 16,
+  s: 20,
+  m: 24,
+  l: 28,
+  xl: 32,
+  xxl: 40
+}, We = Object.keys(ee), qe = "xs", Ye = 8, te = 32;
+function Pt(n, e, t) {
+  const i = parseInt(n, 10), o = i % t === 0;
+  return i >= e && o;
+}
+const Ze = {
+  large: (n) => Pt(n, te, Ye),
+  regular: (n) => We.includes(n)
+};
+function Mt(n) {
+  const e = Ze.large(n);
+  return { isValid: e, size: e ? n : te };
+}
+function Lt(n) {
+  const e = Ze.regular(n), t = e ? ee[n] : ee[qe];
+  return { isValid: e, size: t };
+}
+const L = (n, e, t, i) => {
+  const o = n.endsWith("Large") || n.endsWith("-large");
+  let s, r;
+  if (t) {
+    if ({ isValid: s, size: r } = o ? Mt(t) : Lt(t), !s) {
+      const d = o ? `Invalid prop "size" value supplied to "${i}". The prop value should be a number equal or greater than ${te} and multiple of ${Ye}.` : `Invalid prop "size" value supplied to "${i}". The prop value should be one of the following values: ${We.join(", ")}.`;
+      console.error(d);
+    }
+  } else
+    r = o ? te : ee[qe];
+  return {
+    class: [n, e].filter(Boolean).join(" "),
+    width: r,
+    height: r
+  };
+}, Be = "icon-close";
+class j extends C {
+  constructor() {
+    super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--close";
+  }
+  connectedCallback() {
+    var e, t, i;
+    if (super.connectedCallback(), ((e = this._svg) === null || e === void 0 ? void 0 : e.getAttribute("width")) === null) {
+      const o = L("c-pieIcon c-pieIcon--close", "", null, "IconClose");
+      (t = this._svg) === null || t === void 0 || t.setAttribute("width", o.width), (i = this._svg) === null || i === void 0 || i.setAttribute("height", o.height);
+    }
+  }
+  updated(e) {
+    var t, i;
+    let o;
+    e.has("size") && (o = L("c-pieIcon c-pieIcon--close", "", this.size, "IconClose"), (t = this._svg) === null || t === void 0 || t.setAttribute("width", o.width), (i = this._svg) === null || i === void 0 || i.setAttribute("height", o.height));
+  }
+  render() {
+    return $e`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--close"><path d="M11.868 3.205 8 7.072 4.133 3.205l-.928.927L7.073 8l-3.868 3.867.928.928L8 8.927l3.868 3.868.927-.928L8.928 8l3.867-3.868-.927-.927Z"></path></svg>`;
+  }
+}
+j.styles = ye`
+        :host-context(pie-icon-button) svg,
+        :host-context(pie-button) svg {
+            display: block;
+            width: var(--btn-icon-size);
+            height: var(--btn-icon-size);
+        }
+    `;
+$([
+  I({ type: String, reflect: !0 })
+], j.prototype, "size", void 0);
+$([
+  I({ type: String, reflect: !0 })
+], j.prototype, "class", void 0);
+$([
+  _e("svg")
+], j.prototype, "_svg", void 0);
+customElements.get(Be) === void 0 && customElements.define(Be, j);
+const Te = "icon-chevron-left";
+class F extends C {
+  constructor() {
+    super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronLeft";
+  }
+  connectedCallback() {
+    var e, t, i;
+    if (super.connectedCallback(), ((e = this._svg) === null || e === void 0 ? void 0 : e.getAttribute("width")) === null) {
+      const o = L("c-pieIcon c-pieIcon--chevronLeft", "", null, "IconChevronLeft");
+      (t = this._svg) === null || t === void 0 || t.setAttribute("width", o.width), (i = this._svg) === null || i === void 0 || i.setAttribute("height", o.height);
+    }
+  }
+  updated(e) {
+    var t, i;
+    let o;
+    e.has("size") && (o = L("c-pieIcon c-pieIcon--chevronLeft", "", this.size, "IconChevronLeft"), (t = this._svg) === null || t === void 0 || t.setAttribute("width", o.width), (i = this._svg) === null || i === void 0 || i.setAttribute("height", o.height));
+  }
+  render() {
+    return $e`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--chevronLeft"><path d="M10.96 2.82 5.605 8l5.399 5.197-.875.963-5.565-5.364a1.164 1.164 0 0 1 0-1.671l5.495-5.25.901.945Z"></path></svg>`;
+  }
+}
+F.styles = ye`
+        :host-context(pie-icon-button) svg,
+        :host-context(pie-button) svg {
+            display: block;
+            width: var(--btn-icon-size);
+            height: var(--btn-icon-size);
+        }
+    `;
+$([
+  I({ type: String, reflect: !0 })
+], F.prototype, "size", void 0);
+$([
+  I({ type: String, reflect: !0 })
+], F.prototype, "class", void 0);
+$([
+  _e("svg")
+], F.prototype, "_svg", void 0);
+customElements.get(Te) === void 0 && customElements.define(Te, F);
+const Re = "icon-chevron-right";
+class V extends C {
+  constructor() {
+    super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronRight";
+  }
+  connectedCallback() {
+    var e, t, i;
+    if (super.connectedCallback(), ((e = this._svg) === null || e === void 0 ? void 0 : e.getAttribute("width")) === null) {
+      const o = L("c-pieIcon c-pieIcon--chevronRight", "", null, "IconChevronRight");
+      (t = this._svg) === null || t === void 0 || t.setAttribute("width", o.width), (i = this._svg) === null || i === void 0 || i.setAttribute("height", o.height);
+    }
+  }
+  updated(e) {
+    var t, i;
+    let o;
+    e.has("size") && (o = L("c-pieIcon c-pieIcon--chevronRight", "", this.size, "IconChevronRight"), (t = this._svg) === null || t === void 0 || t.setAttribute("width", o.width), (i = this._svg) === null || i === void 0 || i.setAttribute("height", o.height));
+  }
+  render() {
+    return $e`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--chevronRight"><path d="M5.044 13.18 10.399 8 5 2.82l.875-.962 5.539 5.346a1.164 1.164 0 0 1 0 1.636l-5.469 5.285-.901-.945Z"></path></svg>`;
+  }
+}
+V.styles = ye`
+        :host-context(pie-icon-button) svg,
+        :host-context(pie-button) svg {
+            display: block;
+            width: var(--btn-icon-size);
+            height: var(--btn-icon-size);
+        }
+    `;
+$([
+  I({ type: String, reflect: !0 })
+], V.prototype, "size", void 0);
+$([
+  I({ type: String, reflect: !0 })
+], V.prototype, "class", void 0);
+$([
+  _e("svg")
+], V.prototype, "_svg", void 0);
+customElements.get(Re) === void 0 && customElements.define(Re, V);
+const It = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 768px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}@media (max-width: 767px){.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j)}@media (max-width: 767px){.c-modal[position=top][isfullwidthbelowmid]{margin-block-start:var(--dt-spacing-none)}}.c-modal::backdrop{background:rgba(0,0,0,.5)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{padding-inline:var(--dt-spacing-d);padding-block:14px;display:grid;grid-template-areas:"back heading close" ". heading .";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:center}@media (min-width: 768px){.c-modal .c-modal-header{padding-inline:var(--dt-spacing-e);padding-block:20px}}.c-modal[hasbackbutton] .c-modal-header{padding-block:var(--dt-spacing-b);padding-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-header{padding-block:var(--dt-spacing-c);padding-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-header{padding-block:var(--dt-spacing-b);padding-inline-end:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-header{padding-block:var(--dt-spacing-c);padding-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading}.c-modal[hasbackbutton] .c-modal-heading{padding-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{padding-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{padding-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{padding-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back}.c-modal .c-modal-closeBtn{grid-area:close}.c-modal[isfooterpinned] .c-modal-content,.c-modal .c-modal-scrollContainer{overflow-y:auto}.c-modal .c-modal-scrollContainer{--bg-scroll-start: linear-gradient(var(--dt-color-container-default) 30%, rgba(255, 255, 255, 0));--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-top: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));--bg-scroll-bottom: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-start: 100% 40px;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-top: 100% 16px;--bg-size-scroll-bottom: 100% 16px;background:var(--bg-scroll-start),var(--bg-scroll-end),var(--bg-scroll-top),var(--bg-scroll-bottom);background-repeat:no-repeat;background-color:var(--dt-color-container-default);background-size:var(--bg-size-scroll-start),var(--bg-size-scroll-end),var(--bg-size-scroll-top),var(--bg-size-scroll-bottom);background-attachment:local,local,scroll,scroll}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding: var(--dt-spacing-e);--modal-content-padding-block: var(--dt-spacing-a);--spinner-size: 48px;--spinner-border-width: 6px;--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;min-block-size:var(--dt-spacing-j);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline:var(--modal-content-padding);padding-block:var(--modal-content-padding-block)}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal .c-modal-content:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;opacity:0}.c-modal[isLoading] .c-modal-content:before{animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);opacity:1}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{opacity:0}
+`, Bt = ["h1", "h2", "h3", "h4", "h5", "h6"], Tt = ["small", "medium", "large"], Rt = ["top", "center"], ce = "pie-modal-close", Y = "pie-modal-open", he = "pie-modal-back";
+var Ut = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, v = (n, e, t, i) => {
+  for (var o = i > 1 ? void 0 : i ? Ht(e, t) : e, s = n.length - 1, r; s >= 0; s--)
+    (r = n[s]) && (o = (i ? r(e, t, o) : r(o)) || o);
+  return i && o && Ut(e, t, o), o;
+};
+const W = "pie-modal";
+class p extends ot(Ge) {
+  constructor() {
+    super(), this.headingLevel = "h2", this.hasBackButton = !1, this.hasStackedActions = !1, this.isDismissible = !1, this.isFooterPinned = !0, this.isFullWidthBelowMid = !1, this.isLoading = !1, this.isOpen = !1, this.position = "center", this.size = "medium", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
       this.isDismissible || e.preventDefault();
     }, this._handleDialogLightDismiss = (e) => {
-      var c;
+      var l;
       if (!this.isDismissible)
         return;
-      const o = (c = this._dialog) == null ? void 0 : c.getBoundingClientRect(), {
-        top: t = 0,
-        bottom: i = 0,
-        left: a = 0,
+      const t = (l = this._dialog) == null ? void 0 : l.getBoundingClientRect(), {
+        top: i = 0,
+        bottom: o = 0,
+        left: s = 0,
         right: r = 0
-      } = o || {};
-      if (t === 0 && i === 0 && a === 0 && r === 0)
+      } = t || {};
+      if (i === 0 && o === 0 && s === 0 && r === 0)
         return;
-      (e.clientY < t || e.clientY > i || e.clientX < a || e.clientX > r) && (this.isOpen = !1);
+      (e.clientY < i || e.clientY > o || e.clientX < s || e.clientX > r) && (this.isOpen = !1);
     }, this._dispatchModalCustomEvent = (e) => {
-      const o = new CustomEvent(e, {
+      const t = new CustomEvent(e, {
         bubbles: !0,
         composed: !0
       });
-      this.dispatchEvent(o);
+      this.dispatchEvent(t);
     }, this.addEventListener("click", (e) => this._handleDialogLightDismiss(e));
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener(b, this._handleModalOpened.bind(this)), document.addEventListener(z, this._handleModalClosed.bind(this)), document.addEventListener(x, this._handleModalClosed.bind(this));
+    super.connectedCallback(), document.addEventListener(Y, this._handleModalOpened.bind(this)), document.addEventListener(ce, this._handleModalClosed.bind(this)), document.addEventListener(he, this._handleModalClosed.bind(this));
   }
   disconnectedCallback() {
-    document.removeEventListener(b, this._handleModalOpened.bind(this)), document.removeEventListener(z, this._handleModalClosed.bind(this)), document.removeEventListener(x, this._handleModalClosed.bind(this)), super.disconnectedCallback();
+    document.removeEventListener(Y, this._handleModalOpened.bind(this)), document.removeEventListener(ce, this._handleModalClosed.bind(this)), document.removeEventListener(he, this._handleModalClosed.bind(this)), super.disconnectedCallback();
   }
   firstUpdated(e) {
-    var o, t;
-    (o = this._dialog) == null || o.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i)), this._handleModalOpenStateOnFirstRender(e), (t = this._dialog) == null || t.addEventListener("close", () => {
+    var t, i;
+    (t = this._dialog) == null || t.addEventListener("cancel", (o) => this._handleDialogCancelEvent(o)), this._handleModalOpenStateOnFirstRender(e), (i = this._dialog) == null || i.addEventListener("close", () => {
       this.isOpen = !1;
     });
   }
@@ -197,33 +982,33 @@ class l extends I(E) {
    * Opens the dialog element and disables page scrolling
    */
   _handleModalOpened() {
-    var e, o, t;
-    X(this), !((e = this._dialog) != null && e.hasAttribute("open") || !((o = this._dialog) != null && o.isConnected)) && ((t = this._dialog) == null || t.showModal());
+    var e, t, i;
+    ut(this), !((e = this._dialog) != null && e.hasAttribute("open") || !((t = this._dialog) != null && t.isConnected)) && ((i = this._dialog) == null || i.showModal());
   }
   /**
    * Closes the dialog element and re-enables page scrolling
    */
   _handleModalClosed() {
     var e;
-    G(this), (e = this._dialog) == null || e.close(), this._returnFocus();
+    pt(this), (e = this._dialog) == null || e.close(), this._returnFocus();
   }
   // Handles the value of the isOpen property on first render of the component
   _handleModalOpenStateOnFirstRender(e) {
-    e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(b);
+    e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(Y);
   }
   // Handles changes to the modal isOpen property by dispatching any appropriate events
   _handleModalOpenStateChanged(e) {
-    const o = e.get("isOpen");
-    o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(x)) : this._dispatchModalCustomEvent(z) : this._dispatchModalCustomEvent(b));
+    const t = e.get("isOpen");
+    t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(he)) : this._dispatchModalCustomEvent(ce) : this._dispatchModalCustomEvent(Y));
   }
   /**
    * Return focus to the specified element, providing the selector is valid
    * and the chosen element can be found.
    */
   _returnFocus() {
-    var o, t;
-    const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
-    e && ((t = document.querySelector(e)) == null || t.focus());
+    var t, i;
+    const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
+    e && ((i = document.querySelector(e)) == null || i.focus());
   }
   /**
    * Template for the close button element. Called within the
@@ -232,15 +1017,18 @@ class l extends I(E) {
    * @private
    */
   renderCloseButton() {
-    return f`
+    var e;
+    return y`
             <pie-icon-button
                 @click="${() => {
       this.isOpen = !1;
     }}"
                 variant="ghost-secondary"
                 class="c-modal-closeBtn"
-                data-test-id="modal-close-button"><icon-close /></pie-icon-button>
-        `;
+                aria-label="${((e = this.aria) == null ? void 0 : e.close) || f}"
+                data-test-id="modal-close-button">
+                <icon-close></icon-close>
+            </pie-icon-button>`;
   }
   /**
    * Template for the back button element. Called within the
@@ -249,112 +1037,194 @@ class l extends I(E) {
    * @private
    */
   renderBackButton() {
-    return f`
+    var e;
+    return y`
             <pie-icon-button
                 @click="${() => {
       this._backButtonClicked = !0, this.isOpen = !1;
     }}"
                 variant="ghost-secondary"
                 class="c-modal-backBtn"
+                aria-label="${((e = this.aria) == null ? void 0 : e.back) || f}"
                 data-test-id="modal-back-button">
-                ${this.isRTL ? f`<icon-chevron-right />` : f`<icon-chevron-left />`}
+                ${this.isRTL ? y`<icon-chevron-right></icon-chevron-right>` : y`<icon-chevron-left></icon-chevron-left>`}
             </pie-icon-button>
         `;
   }
+  /**
+   * Render leadingAction button depending on prop availability.
+   *
+   * 1. If the prop `leadingAction` is not provided, the button is not rendered.
+   * 2. If the prop `leadingAction` is provided but any of the optional properties
+   * are not provided, they fall back to their default values.
+   *
+   * @private
+   */
+  renderLeadingAction() {
+    const { text: e, variant: t = "primary", ariaLabel: i } = this.leadingAction;
+    return e ? y`
+            <pie-button
+                variant="${t}"
+                aria-label="${i || f}"
+                type="submit"
+                ?isFullWidth="${this.hasStackedActions}"
+                @click="${() => {
+      var o;
+      return (o = this._dialog) == null ? void 0 : o.close("leading");
+    }}"
+                data-test-id="modal-leading-action">
+                ${e}
+            </pie-button>
+        ` : f;
+  }
+  /**
+   * Render supportingAction button depending on prop availability.
+   *
+   * 1. If the prop `supportingAction` is not provided, the button is not rendered.
+   * 2. If the prop `supportingAction` is provided but any of the optional properties
+   * are not provided, they fall back to their default values.
+   * 3. If `supportingAction` is provided but not `leadingAction`, log a warning and do
+   * not render `supportingAction`.
+   *
+   * @private
+   */
+  renderSupportingAction() {
+    const { text: e, variant: t = "ghost", ariaLabel: i } = this.supportingAction;
+    return e ? this.leadingAction ? y`
+            <pie-button
+                variant="${t}"
+                aria-label="${i || f}"
+                type="reset"
+                ?isFullWidth="${this.hasStackedActions}"
+                @click="${() => {
+      var o;
+      return (o = this._dialog) == null ? void 0 : o.close("supporting");
+    }}"
+                data-test-id="modal-supporting-action">
+                ${e}
+            </pie-button>
+        ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), f) : f;
+  }
+  /**
+   * Renders the modal inner content and footer of the modal.
+   * @private
+   */
+  renderModalContentAndFooter() {
+    return y`
+        <article class="c-modal-content c-modal-content--scrollable">
+            <div class="c-modal-contentInner">
+                <slot></slot>
+            </div>
+        </article>
+        <footer class="c-modal-footer">
+            ${this.leadingAction ? this.renderLeadingAction() : f}
+            ${this.supportingAction ? this.renderSupportingAction() : f}
+        </footer>`;
+  }
   render() {
     const {
-      hasBackButton: e,
+      aria: e,
+      hasBackButton: t,
+      hasStackedActions: i,
       heading: o,
-      headingLevel: t = "h2",
-      isDismissible: i,
-      isFullWidthBelowMid: a,
-      isLoading: r,
-      size: p
-    } = this, c = $(t);
-    return f`
+      headingLevel: s = "h2",
+      isDismissible: r,
+      isFooterPinned: d,
+      isFullWidthBelowMid: l,
+      isLoading: a,
+      leadingAction: b,
+      position: c,
+      size: h,
+      supportingAction: m
+    } = this, w = Je(s);
+    return y`
         <dialog
             id="dialog"
             class="c-modal"
-            size="${p}"
-            ?hasBackButton=${e}
-            ?isDismissible=${i}
-            ?isFullWidthBelowMid=${a}
-            ?isLoading=${r}
+            size="${h}"
+            position="${c}"
+            ?hasActions=${b || m}
+            ?hasBackButton=${t}
+            ?hasStackedActions=${i}
+            ?isDismissible=${r}
+            ?isFooterPinned=${d}
+            ?isFullWidthBelowMid=${l}
+            ?isLoading=${a}
+            aria-busy="${a ? "true" : "false"}"
+            aria-label="${a && (e == null ? void 0 : e.loading) || f}"
             data-test-id="pie-modal">
             <header class="c-modal-header">
-                ${e ? this.renderBackButton() : B}
-                <${c} class="c-modal-heading">
+                ${t ? this.renderBackButton() : f}
+                <${w} class="c-modal-heading">
                     ${o}
-                </${c}>
-                ${i ? this.renderCloseButton() : B}
+                </${w}>
+                ${r ? this.renderCloseButton() : f}
             </header>
-            <article class="c-modal-content c-modal-content--scrollable">
-                <div class="c-modal-contentInner">
-                    <slot></slot>
-                </div>
-            </article>
-            <footer class="c-modal-footer">
-                <pie-button
-                    variant="primary"
-                    type="submit"
-                    @click="${() => {
-      var h;
-      return (h = this._dialog) == null ? void 0 : h.close("leading");
-    }}"
-                    data-test-id="modal-leading-action">
-                    Confirm
-                </pie-button>
-                <pie-button
-                    variant="ghost"
-                    type="reset"
-                    @click="${() => {
-      var h;
-      return (h = this._dialog) == null ? void 0 : h.close("supporting");
-    }}"
-                    data-test-id="modal-supporting-action">
-                    Cancel
-                </pie-button>
-            </footer>
+            ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
+    d ? this.renderModalContentAndFooter() : y`
+                        <div class="c-modal-scrollContainer">
+                            ${this.renderModalContentAndFooter()}
+                        </div>
+                        `}
         </dialog>`;
   }
 }
-l.styles = P(J);
-d([
-  s({ type: String }),
-  j(k)
-], l.prototype, "heading", 2);
-d([
-  s(),
-  S(k, Q, "h2")
-], l.prototype, "headingLevel", 2);
-d([
-  s({ type: Boolean, reflect: !0 })
-], l.prototype, "isDismissible", 2);
-d([
-  s({ type: Boolean })
-], l.prototype, "hasBackButton", 2);
-d([
-  s({ type: Boolean })
-], l.prototype, "isFullWidthBelowMid", 2);
-d([
-  s({ type: Boolean })
-], l.prototype, "isOpen", 2);
-d([
-  s({ type: Boolean, reflect: !0 })
-], l.prototype, "isLoading", 2);
-d([
-  s()
-], l.prototype, "returnFocusAfterCloseSelector", 2);
-d([
-  s(),
-  S(k, Z, "medium")
-], l.prototype, "size", 2);
-d([
-  D("dialog")
-], l.prototype, "_dialog", 2);
-customElements.define(k, l);
+p.styles = Xe(It);
+v([
+  g({ type: Object })
+], p.prototype, "aria", 2);
+v([
+  g({ type: String }),
+  nt(W)
+], p.prototype, "heading", 2);
+v([
+  g(),
+  ge(W, Bt, "h2")
+], p.prototype, "headingLevel", 2);
+v([
+  g({ type: Boolean })
+], p.prototype, "hasBackButton", 2);
+v([
+  g({ type: Boolean })
+], p.prototype, "hasStackedActions", 2);
+v([
+  g({ type: Boolean, reflect: !0 })
+], p.prototype, "isDismissible", 2);
+v([
+  g({ type: Boolean })
+], p.prototype, "isFooterPinned", 2);
+v([
+  g({ type: Boolean })
+], p.prototype, "isFullWidthBelowMid", 2);
+v([
+  g({ type: Boolean, reflect: !0 })
+], p.prototype, "isLoading", 2);
+v([
+  g({ type: Boolean })
+], p.prototype, "isOpen", 2);
+v([
+  g({ type: Object })
+], p.prototype, "leadingAction", 2);
+v([
+  g(),
+  ge(W, Rt, "center")
+], p.prototype, "position", 2);
+v([
+  g()
+], p.prototype, "returnFocusAfterCloseSelector", 2);
+v([
+  g(),
+  ge(W, Tt, "medium")
+], p.prototype, "size", 2);
+v([
+  g({ type: Object })
+], p.prototype, "supportingAction", 2);
+v([
+  Ke("dialog")
+], p.prototype, "_dialog", 2);
+customElements.define(W, p);
 export {
-  l as PieModal,
-  Q as headingLevels,
-  Z as sizes
+  p as PieModal,
+  Bt as headingLevels,
+  Tt as sizes
 };