@fiscozen/dialog 0.1.24 → 0.1.26

package/dist/dialog.js

@@ -0,0 +1,1556 @@
+import { watch as W, onMounted as T, onBeforeUnmount as q, defineComponent as G, ref as h, onUnmounted as ee, computed as H, withDirectives as te, createCommentVNode as M, createElementBlock as I, openBlock as E, createElementVNode as f, normalizeClass as _, renderSlot as m, vShow as oe, createBlock as O, mergeProps as ae, createSlots as le, withCtx as w, createVNode as ne, toDisplayString as B, unref as A, withModifiers as P, createTextVNode as K } from "vue";
+import { FzIconButton as re, FzButton as V } from "@fiscozen/button";
+new DOMRect(0, 0, window.innerWidth, window.innerHeight);
+function ie(e, t, o) {
+  if (!e)
+    throw new Error("A target component has to be provided.");
+  if (!t)
+    throw new Error("A callback has to be provided.");
+  const a = (l) => {
+    !e.value || l.target === e.value || l.composedPath().includes(e.value) || typeof t == "function" && t();
+  };
+  o && W(o, (l, n) => {
+    n && n.removeEventListener("click", a), l == null || l.addEventListener("click", a);
+  }), T(() => {
+    o || document.addEventListener("click", a);
+  }), q(() => {
+    var l;
+    if (o) {
+      (l = o.value) == null || l.removeEventListener("click", a);
+      return;
+    }
+    document.removeEventListener("click", a);
+  });
+}
+function se(e, t) {
+  if (!e || typeof e != "function")
+    throw new Error("A callback has to be provided.");
+  const o = (a) => {
+    e(a);
+  };
+  T(() => {
+    {
+      document.addEventListener("keyup", o);
+      return;
+    }
+  }), q(() => {
+    {
+      document.removeEventListener("keyup", o);
+      return;
+    }
+  });
+}
+const ue = {
+  blue: {
+    50: {
+      value: "#eff1ff",
+      type: "color"
+    },
+    100: {
+      value: "#dee2ff",
+      type: "color"
+    },
+    200: {
+      value: "#bdc5ff",
+      type: "color"
+    },
+    300: {
+      value: "#9ca8ff",
+      type: "color"
+    },
+    400: {
+      value: "#7b8bff",
+      type: "color"
+    },
+    500: {
+      value: "#5a6eff",
+      type: "color"
+    },
+    600: {
+      value: "#4858cc",
+      type: "color"
+    },
+    700: {
+      value: "#364299",
+      type: "color"
+    },
+    800: {
+      value: "#242c66",
+      type: "color"
+    },
+    900: {
+      value: "#1b214c",
+      type: "color"
+    }
+  },
+  purple: {
+    50: {
+      value: "#f8f4ff",
+      type: "color"
+    },
+    100: {
+      value: "#f0e9ff",
+      type: "color"
+    },
+    200: {
+      value: "#e1d3ff",
+      type: "color"
+    },
+    300: {
+      value: "#d2bdff",
+      type: "color"
+    },
+    400: {
+      value: "#c3a7ff",
+      type: "color"
+    },
+    500: {
+      value: "#b491ff",
+      type: "color"
+    },
+    600: {
+      value: "#9074cc",
+      type: "color"
+    },
+    700: {
+      value: "#6c5799",
+      type: "color"
+    },
+    800: {
+      value: "#483a66",
+      type: "color"
+    },
+    900: {
+      value: "#241d33",
+      type: "color"
+    }
+  },
+  orange: {
+    50: {
+      value: "#fff2ef",
+      type: "color"
+    },
+    100: {
+      value: "#ffe4de",
+      type: "color"
+    },
+    200: {
+      value: "#ffc9bd",
+      type: "color"
+    },
+    300: {
+      value: "#ffae9c",
+      type: "color"
+    },
+    400: {
+      value: "#ff937b",
+      type: "color"
+    },
+    500: {
+      value: "#ff785a",
+      type: "color"
+    },
+    600: {
+      value: "#cc6048",
+      type: "color"
+    },
+    700: {
+      value: "#994836",
+      type: "color"
+    },
+    800: {
+      value: "#663024",
+      type: "color"
+    },
+    900: {
+      value: "#331812",
+      type: "color"
+    }
+  },
+  pink: {
+    50: {
+      value: "#fff5f5",
+      type: "color"
+    },
+    100: {
+      value: "#ffe0e0",
+      type: "color"
+    },
+    200: {
+      value: "#ffcbcb",
+      type: "color"
+    },
+    300: {
+      value: "#ffc0c0",
+      type: "color"
+    },
+    400: {
+      value: "#ffabab",
+      type: "color"
+    },
+    500: {
+      value: "#ff9696",
+      type: "color"
+    },
+    600: {
+      value: "#cc7878",
+      type: "color"
+    },
+    700: {
+      value: "#995a5a",
+      type: "color"
+    },
+    800: {
+      value: "#663c3c",
+      type: "color"
+    },
+    900: {
+      value: "#331e1e",
+      type: "color"
+    }
+  },
+  yellow: {
+    50: {
+      value: "#fffbf4",
+      type: "color"
+    },
+    100: {
+      value: "#fff3de",
+      type: "color"
+    },
+    200: {
+      value: "#ffebc8",
+      type: "color"
+    },
+    300: {
+      value: "#ffe7bd",
+      type: "color"
+    },
+    400: {
+      value: "#ffdfa7",
+      type: "color"
+    },
+    500: {
+      value: "#ffd791",
+      type: "color"
+    },
+    600: {
+      value: "#ccac74",
+      type: "color"
+    },
+    700: {
+      value: "#998157",
+      type: "color"
+    },
+    800: {
+      value: "#806c49",
+      type: "color"
+    },
+    900: {
+      value: "#4c402b",
+      type: "color"
+    }
+  },
+  semantic: {
+    error: {
+      50: {
+        value: "#fef3f3",
+        type: "color"
+      },
+      100: {
+        value: "#f8baba",
+        type: "color"
+      },
+      200: {
+        value: "#f04242",
+        type: "color"
+      },
+      300: {
+        value: "#aa2f2f",
+        type: "color"
+      }
+    },
+    warning: {
+      50: {
+        value: "#fff8f3",
+        type: "color"
+      },
+      100: {
+        value: "#ffdabd",
+        type: "color"
+      },
+      200: {
+        value: "#ffae4f",
+        type: "color"
+      },
+      300: {
+        value: "#b47b38",
+        type: "color"
+      }
+    },
+    success: {
+      50: {
+        value: "#f2f8f6",
+        type: "color"
+      },
+      100: {
+        value: "#b5d8ce",
+        type: "color"
+      },
+      200: {
+        value: "#0fa88c",
+        type: "color"
+      },
+      300: {
+        value: "#0b7763",
+        type: "color"
+      }
+    },
+    info: {
+      50: {
+        value: "#f3f7ff",
+        type: "color"
+      },
+      100: {
+        value: "#b4c8e1",
+        type: "color"
+      },
+      200: {
+        value: "#4e9fff",
+        type: "color"
+      },
+      300: {
+        value: "#3770b4",
+        type: "color"
+      }
+    }
+  },
+  background: {
+    "white-smoke": {
+      value: "#f7f6f3",
+      type: "color"
+    },
+    seashell: {
+      value: "#f8ece7",
+      type: "color"
+    },
+    "pale-purple": {
+      value: "#f2e6ff",
+      type: "color"
+    },
+    "alice-blue": {
+      value: "#ecf2fc",
+      type: "color"
+    }
+  },
+  grey: {
+    100: {
+      value: "#e9edf0",
+      type: "color"
+    },
+    200: {
+      value: "#d1dde6",
+      type: "color"
+    },
+    300: {
+      value: "#9da9b2",
+      type: "color"
+    },
+    400: {
+      value: "#6e777e",
+      type: "color"
+    },
+    500: {
+      value: "#596167",
+      type: "color"
+    }
+  },
+  core: {
+    white: {
+      value: "#ffffff",
+      type: "color"
+    },
+    black: {
+      value: "#2c282f",
+      type: "color"
+    }
+  },
+  "font-sans": {
+    "sharp-grotesk": {
+      value: '"Sharp Grotesk", sans-serif',
+      type: "fontFamilies"
+    },
+    inter: {
+      value: '"Inter", sans-serif',
+      type: "fontFamilies"
+    }
+  },
+  font: {
+    light: {
+      value: "300",
+      type: "fontWeights"
+    },
+    normal: {
+      value: "400",
+      type: "fontWeights"
+    },
+    medium: {
+      value: "500",
+      type: "fontWeights"
+    }
+  },
+  spacing: {
+    0: {
+      value: "0px",
+      type: "spacing"
+    },
+    1: {
+      value: "1px",
+      type: "spacing"
+    },
+    2: {
+      value: "2px",
+      type: "spacing"
+    },
+    4: {
+      value: "4px",
+      type: "spacing"
+    },
+    6: {
+      value: "6px",
+      type: "spacing"
+    },
+    8: {
+      value: "8px",
+      type: "spacing"
+    },
+    10: {
+      value: "10px",
+      type: "spacing"
+    },
+    12: {
+      value: "12px",
+      type: "spacing"
+    },
+    14: {
+      value: "14px",
+      type: "spacing"
+    },
+    16: {
+      value: "16px",
+      type: "spacing"
+    },
+    20: {
+      value: "20px",
+      type: "spacing"
+    },
+    24: {
+      value: "24px",
+      type: "spacing"
+    },
+    28: {
+      value: "28px",
+      type: "spacing"
+    },
+    32: {
+      value: "32px",
+      type: "spacing"
+    },
+    36: {
+      value: "36px",
+      type: "spacing"
+    },
+    40: {
+      value: "40px",
+      type: "spacing"
+    },
+    44: {
+      value: "44px",
+      type: "spacing"
+    },
+    48: {
+      value: "48px",
+      type: "spacing"
+    },
+    56: {
+      value: "56px",
+      type: "spacing"
+    },
+    64: {
+      value: "64px",
+      type: "spacing"
+    },
+    80: {
+      value: "80px",
+      type: "spacing"
+    },
+    96: {
+      value: "96px",
+      type: "spacing"
+    },
+    112: {
+      value: "112px",
+      type: "spacing"
+    },
+    128: {
+      value: "128px",
+      type: "spacing"
+    },
+    144: {
+      value: "144px",
+      type: "spacing"
+    },
+    160: {
+      value: "160px",
+      type: "spacing"
+    },
+    176: {
+      value: "176px",
+      type: "spacing"
+    },
+    192: {
+      value: "192px",
+      type: "spacing"
+    },
+    208: {
+      value: "208px",
+      type: "spacing"
+    },
+    224: {
+      value: "224px",
+      type: "spacing"
+    },
+    240: {
+      value: "240px",
+      type: "spacing"
+    },
+    256: {
+      value: "256px",
+      type: "spacing"
+    },
+    288: {
+      value: "288px",
+      type: "spacing"
+    },
+    320: {
+      value: "320px",
+      type: "spacing"
+    },
+    384: {
+      value: "384px",
+      type: "spacing"
+    }
+  },
+  border: {
+    0: {
+      value: "0px",
+      type: "borderWidth"
+    },
+    1: {
+      value: "1px",
+      type: "borderWidth"
+    },
+    2: {
+      value: "2px",
+      type: "borderWidth"
+    },
+    4: {
+      value: "4px",
+      type: "borderWidth"
+    },
+    8: {
+      value: "8px",
+      type: "borderWidth"
+    }
+  },
+  rounded: {
+    none: {
+      value: "0px",
+      type: "borderRadius"
+    },
+    sm: {
+      value: "2px",
+      type: "borderRadius"
+    },
+    base: {
+      value: "4px",
+      type: "borderRadius"
+    },
+    md: {
+      value: "6px",
+      type: "borderRadius"
+    },
+    lg: {
+      value: "8px",
+      type: "borderRadius"
+    },
+    xl: {
+      value: "12px",
+      type: "borderRadius"
+    },
+    "2xl": {
+      value: "16px",
+      type: "borderRadius"
+    },
+    "3xl": {
+      value: "24px",
+      type: "borderRadius"
+    },
+    full: {
+      value: "9999px",
+      type: "borderRadius"
+    }
+  },
+  breakpoint: {
+    xs: {
+      value: "376px",
+      type: "sizing"
+    },
+    sm: {
+      value: "640px",
+      type: "sizing"
+    },
+    md: {
+      value: "768px",
+      type: "sizing"
+    },
+    lg: {
+      value: "1024px",
+      type: "sizing"
+    },
+    xl: {
+      value: "1280px",
+      type: "sizing"
+    },
+    "2xl": {
+      value: "1440px",
+      type: "sizing"
+    },
+    "3xl": {
+      value: "1536px",
+      type: "sizing"
+    }
+  },
+  shadow: {
+    none: {
+      value: {
+        color: "#000000",
+        type: "dropShadow",
+        x: "0",
+        y: "0",
+        blur: "0",
+        spread: "0"
+      },
+      type: "boxShadow"
+    },
+    sm: {
+      value: {
+        color: "#0000000d",
+        type: "dropShadow",
+        x: "0",
+        y: "1",
+        blur: "2",
+        spread: "0"
+      },
+      type: "boxShadow"
+    },
+    base: {
+      value: [
+        {
+          color: "#0000000f",
+          type: "dropShadow",
+          x: "0",
+          y: "1",
+          blur: "2",
+          spread: "0"
+        },
+        {
+          color: "#0000001a",
+          type: "dropShadow",
+          x: "0",
+          y: "1",
+          blur: "3",
+          spread: "0"
+        }
+      ],
+      type: "boxShadow"
+    },
+    md: {
+      value: [
+        {
+          color: "#0000000f",
+          type: "dropShadow",
+          x: "0",
+          y: "2",
+          blur: "4",
+          spread: "-1"
+        },
+        {
+          color: "#0000001a",
+          type: "dropShadow",
+          x: "0",
+          y: "4",
+          blur: "6",
+          spread: "-1"
+        }
+      ],
+      type: "boxShadow"
+    },
+    lg: {
+      value: [
+        {
+          color: "#0000000d",
+          type: "dropShadow",
+          x: "0",
+          y: "4",
+          blur: "6",
+          spread: "-2"
+        },
+        {
+          color: "#0000001a",
+          type: "dropShadow",
+          x: "0",
+          y: "10",
+          blur: "15",
+          spread: "-3"
+        }
+      ],
+      type: "boxShadow"
+    },
+    xl: {
+      value: [
+        {
+          color: "#0000000a",
+          type: "dropShadow",
+          x: "0",
+          y: "10",
+          blur: "10",
+          spread: "-5"
+        },
+        {
+          color: "#0000001a",
+          type: "dropShadow",
+          x: "0",
+          y: "20",
+          blur: "25",
+          spread: "-5"
+        }
+      ],
+      type: "boxShadow"
+    },
+    "2xl": {
+      value: {
+        color: "#00000040",
+        type: "dropShadow",
+        x: "0",
+        y: "25",
+        blur: "50",
+        spread: "-12"
+      },
+      type: "boxShadow"
+    },
+    inner: {
+      value: {
+        color: "#0000000f",
+        type: "innerShadow",
+        x: "0",
+        y: "2",
+        blur: "4",
+        spread: "0"
+      },
+      type: "boxShadow"
+    }
+  },
+  underline: {
+    value: "underline",
+    type: "textDecoration"
+  },
+  text: {
+    xs: {
+      value: "12px",
+      type: "fontSizes"
+    },
+    sm: {
+      value: "14px",
+      type: "fontSizes"
+    },
+    base: {
+      value: "16px",
+      type: "fontSizes"
+    },
+    lg: {
+      value: "18px",
+      type: "fontSizes"
+    },
+    xl: {
+      value: "20px",
+      type: "fontSizes"
+    },
+    "2xl": {
+      value: "24px",
+      type: "fontSizes"
+    },
+    "3xl": {
+      value: "30px",
+      type: "fontSizes"
+    },
+    "4xl": {
+      value: "36px",
+      type: "fontSizes"
+    },
+    "5xl": {
+      value: "48px",
+      type: "fontSizes"
+    },
+    "6xl": {
+      value: "60px",
+      type: "fontSizes"
+    },
+    "7xl": {
+      value: "72px",
+      type: "fontSizes"
+    },
+    "8xl": {
+      value: "96px",
+      type: "fontSizes"
+    },
+    "9xl": {
+      value: "128px",
+      type: "fontSizes"
+    }
+  },
+  leading: {
+    xs: {
+      value: "16px",
+      type: "lineHeights"
+    },
+    sm: {
+      value: "18px",
+      type: "lineHeights"
+    },
+    base: {
+      value: "20px",
+      type: "lineHeights"
+    },
+    lg: {
+      value: "24px",
+      type: "lineHeights"
+    },
+    xl: {
+      value: "28px",
+      type: "lineHeights"
+    },
+    "2xl": {
+      value: "32px",
+      type: "lineHeights"
+    },
+    "3xl": {
+      value: "36px",
+      type: "lineHeights"
+    },
+    "4xl": {
+      value: "40px",
+      type: "lineHeights"
+    },
+    "5xl": {
+      value: "48px",
+      type: "lineHeights"
+    },
+    "6xl": {
+      value: "60px",
+      type: "lineHeights"
+    },
+    "7xl": {
+      value: "72px",
+      type: "lineHeights"
+    },
+    "8xl": {
+      value: "96px",
+      type: "lineHeights"
+    },
+    "9xl": {
+      value: "128px",
+      type: "lineHeights"
+    }
+  }
+}, F = {
+  global: ue
+}, ce = [
+  "blue",
+  "purple",
+  "orange",
+  "pink",
+  "yellow",
+  "grey",
+  "core"
+], de = {
+  safeColorNames: ce
+}, pe = [
+  "error",
+  "warning",
+  "success",
+  "info"
+], fe = {
+  semanticColorNames: pe
+}, he = de.safeColorNames, ve = fe.semanticColorNames, g = {};
+he.forEach((e) => {
+  const t = F.global[e];
+  t && Object.keys(t).forEach((o) => {
+    var l;
+    const a = (l = t[o]) == null ? void 0 : l.value;
+    a && (g[e] || (g[e] = {}), g[e][o] = a);
+  });
+});
+const $ = F.global.semantic;
+$ && ve.forEach((e) => {
+  const t = $[e];
+  t && typeof t == "object" && Object.keys(t).forEach((o) => {
+    var l;
+    const a = (l = t[o]) == null ? void 0 : l.value;
+    if (a) {
+      const n = `semantic-${e}`;
+      g[n] || (g[n] = {}), g[n][o] = a;
+    }
+  });
+});
+Object.entries(F.global.breakpoint).reduce(
+  (e, [t, o]) => (e[t] = o.value, e),
+  {}
+);
+var y = window.CustomEvent;
+(!y || typeof y == "object") && (y = function(t, o) {
+  o = o || {};
+  var a = document.createEvent("CustomEvent");
+  return a.initCustomEvent(t, !!o.bubbles, !!o.cancelable, o.detail || null), a;
+}, y.prototype = window.Event.prototype);
+function X(e, t) {
+  var o = "on" + t.type.toLowerCase();
+  return typeof e[o] == "function" && e[o](t), e.dispatchEvent(t);
+}
+function ye(e) {
+  for (; e && e !== document.body; ) {
+    var t = window.getComputedStyle(e), o = function(a, l) {
+      return !(t[a] === void 0 || t[a] === l);
+    };
+    if (t.opacity < 1 || o("zIndex", "auto") || o("transform", "none") || o("mixBlendMode", "normal") || o("filter", "none") || o("perspective", "none") || t.isolation === "isolate" || t.position === "fixed" || t.webkitOverflowScrolling === "touch")
+      return !0;
+    e = e.parentElement;
+  }
+  return !1;
+}
+function S(e) {
+  for (; e; ) {
+    if (e.localName === "dialog")
+      return (
+        /** @type {HTMLDialogElement} */
+        e
+      );
+    e.parentElement ? e = e.parentElement : e.parentNode ? e = e.parentNode.host : e = null;
+  }
+  return null;
+}
+function Y(e) {
+  for (; e && e.shadowRoot && e.shadowRoot.activeElement; )
+    e = e.shadowRoot.activeElement;
+  e && e.blur && e !== document.body && e.blur();
+}
+function me(e, t) {
+  for (var o = 0; o < e.length; ++o)
+    if (e[o] === t)
+      return !0;
+  return !1;
+}
+function L(e) {
+  return !e || !e.hasAttribute("method") ? !1 : e.getAttribute("method").toLowerCase() === "dialog";
+}
+function Z(e) {
+  var t = ["button", "input", "keygen", "select", "textarea"], o = t.map(function(i) {
+    return i + ":not([disabled])";
+  });
+  o.push('[tabindex]:not([disabled]):not([tabindex=""])');
+  var a = e.querySelector(o.join(", "));
+  if (!a && "attachShadow" in Element.prototype)
+    for (var l = e.querySelectorAll("*"), n = 0; n < l.length && !(l[n].tagName && l[n].shadowRoot && (a = Z(l[n].shadowRoot), a)); n++)
+      ;
+  return a;
+}
+function j(e) {
+  return e.isConnected || document.body.contains(e);
+}
+function J(e) {
+  if (e.submitter)
+    return e.submitter;
+  var t = e.target;
+  if (!(t instanceof HTMLFormElement))
+    return null;
+  var o = r.formSubmitter;
+  if (!o) {
+    var a = e.target, l = "getRootNode" in a && a.getRootNode() || document;
+    o = l.activeElement;
+  }
+  return !o || o.form !== t ? null : o;
+}
+function ge(e) {
+  if (!e.defaultPrevented) {
+    var t = (
+      /** @type {!HTMLFormElement} */
+      e.target
+    ), o = r.imagemapUseValue, a = J(e);
+    o === null && a && (o = a.value);
+    var l = S(t);
+    if (l) {
+      var n = a && a.getAttribute("formmethod") || t.getAttribute("method");
+      n === "dialog" && (e.preventDefault(), o != null ? l.close(o) : l.close());
+    }
+  }
+}
+function Q(e) {
+  if (this.dialog_ = e, this.replacedStyleTop_ = !1, this.openAsModal_ = !1, e.hasAttribute("role") || e.setAttribute("role", "dialog"), e.show = this.show.bind(this), e.showModal = this.showModal.bind(this), e.close = this.close.bind(this), e.addEventListener("submit", ge, !1), "returnValue" in e || (e.returnValue = ""), "MutationObserver" in window) {
+    var t = new MutationObserver(this.maybeHideModal.bind(this));
+    t.observe(e, { attributes: !0, attributeFilter: ["open"] });
+  } else {
+    var o = !1, a = (function() {
+      o ? this.downgradeModal() : this.maybeHideModal(), o = !1;
+    }).bind(this), l, n = function(i) {
+      if (i.target === e) {
+        var c = "DOMNodeRemoved";
+        o |= i.type.substr(0, c.length) === c, window.clearTimeout(l), l = window.setTimeout(a, 0);
+      }
+    };
+    ["DOMAttrModified", "DOMNodeRemoved", "DOMNodeRemovedFromDocument"].forEach(function(i) {
+      e.addEventListener(i, n);
+    });
+  }
+  Object.defineProperty(e, "open", {
+    set: this.setOpen.bind(this),
+    get: e.hasAttribute.bind(e, "open")
+  }), this.backdrop_ = document.createElement("div"), this.backdrop_.className = "backdrop", this.backdrop_.addEventListener("mouseup", this.backdropMouseEvent_.bind(this)), this.backdrop_.addEventListener("mousedown", this.backdropMouseEvent_.bind(this)), this.backdrop_.addEventListener("click", this.backdropMouseEvent_.bind(this));
+}
+Q.prototype = /** @type {HTMLDialogElement.prototype} */
+{
+  get dialog() {
+    return this.dialog_;
+  },
+  /**
+   * Maybe remove this dialog from the modal top layer. This is called when
+   * a modal dialog may no longer be tenable, e.g., when the dialog is no
+   * longer open or is no longer part of the DOM.
+   */
+  maybeHideModal: function() {
+    this.dialog_.hasAttribute("open") && j(this.dialog_) || this.downgradeModal();
+  },
+  /**
+   * Remove this dialog from the modal top layer, leaving it as a non-modal.
+   */
+  downgradeModal: function() {
+    this.openAsModal_ && (this.openAsModal_ = !1, this.dialog_.style.zIndex = "", this.replacedStyleTop_ && (this.dialog_.style.top = "", this.replacedStyleTop_ = !1), this.backdrop_.parentNode && this.backdrop_.parentNode.removeChild(this.backdrop_), r.dm.removeDialog(this));
+  },
+  /**
+   * @param {boolean} value whether to open or close this dialog
+   */
+  setOpen: function(e) {
+    e ? this.dialog_.hasAttribute("open") || this.dialog_.setAttribute("open", "") : (this.dialog_.removeAttribute("open"), this.maybeHideModal());
+  },
+  /**
+   * Handles mouse events ('mouseup', 'mousedown', 'click') on the fake .backdrop element, redirecting them as if
+   * they were on the dialog itself.
+   *
+   * @param {!Event} e to redirect
+   */
+  backdropMouseEvent_: function(e) {
+    if (this.dialog_.hasAttribute("tabindex"))
+      this.dialog_.focus();
+    else {
+      var t = document.createElement("div");
+      this.dialog_.insertBefore(t, this.dialog_.firstChild), t.tabIndex = -1, t.focus(), this.dialog_.removeChild(t);
+    }
+    var o = document.createEvent("MouseEvents");
+    o.initMouseEvent(
+      e.type,
+      e.bubbles,
+      e.cancelable,
+      window,
+      e.detail,
+      e.screenX,
+      e.screenY,
+      e.clientX,
+      e.clientY,
+      e.ctrlKey,
+      e.altKey,
+      e.shiftKey,
+      e.metaKey,
+      e.button,
+      e.relatedTarget
+    ), this.dialog_.dispatchEvent(o), e.stopPropagation();
+  },
+  /**
+   * Focuses on the first focusable element within the dialog. This will always blur the current
+   * focus, even if nothing within the dialog is found.
+   */
+  focus_: function() {
+    var e = this.dialog_.querySelector("[autofocus]:not([disabled])");
+    !e && this.dialog_.tabIndex >= 0 && (e = this.dialog_), e || (e = Z(this.dialog_)), Y(document.activeElement), e && e.focus();
+  },
+  /**
+   * Sets the zIndex for the backdrop and dialog.
+   *
+   * @param {number} dialogZ
+   * @param {number} backdropZ
+   */
+  updateZIndex: function(e, t) {
+    if (e < t)
+      throw new Error("dialogZ should never be < backdropZ");
+    this.dialog_.style.zIndex = e, this.backdrop_.style.zIndex = t;
+  },
+  /**
+   * Shows the dialog. If the dialog is already open, this does nothing.
+   */
+  show: function() {
+    this.dialog_.open || (this.setOpen(!0), this.focus_());
+  },
+  /**
+   * Show this dialog modally.
+   */
+  showModal: function() {
+    if (this.dialog_.hasAttribute("open"))
+      throw new Error("Failed to execute 'showModal' on dialog: The element is already open, and therefore cannot be opened modally.");
+    if (!j(this.dialog_))
+      throw new Error("Failed to execute 'showModal' on dialog: The element is not in a Document.");
+    if (!r.dm.pushDialog(this))
+      throw new Error("Failed to execute 'showModal' on dialog: There are too many open modal dialogs.");
+    ye(this.dialog_.parentElement) && console.warn("A dialog is being shown inside a stacking context. This may cause it to be unusable. For more information, see this link: https://github.com/GoogleChrome/dialog-polyfill/#stacking-context"), this.setOpen(!0), this.openAsModal_ = !0, r.needsCentering(this.dialog_) ? (r.reposition(this.dialog_), this.replacedStyleTop_ = !0) : this.replacedStyleTop_ = !1, this.dialog_.parentNode.insertBefore(this.backdrop_, this.dialog_.nextSibling), this.focus_();
+  },
+  /**
+   * Closes this HTMLDialogElement. This is optional vs clearing the open
+   * attribute, however this fires a 'close' event.
+   *
+   * @param {string=} opt_returnValue to use as the returnValue
+   */
+  close: function(e) {
+    if (!this.dialog_.hasAttribute("open"))
+      throw new Error("Failed to execute 'close' on dialog: The element does not have an 'open' attribute, and therefore cannot be closed.");
+    this.setOpen(!1), e !== void 0 && (this.dialog_.returnValue = e);
+    var t = new y("close", {
+      bubbles: !1,
+      cancelable: !1
+    });
+    X(this.dialog_, t);
+  }
+};
+var r = {};
+r.reposition = function(e) {
+  var t = document.body.scrollTop || document.documentElement.scrollTop, o = t + (window.innerHeight - e.offsetHeight) / 2;
+  e.style.top = Math.max(t, o) + "px";
+};
+r.isInlinePositionSetByStylesheet = function(e) {
+  for (var t = 0; t < document.styleSheets.length; ++t) {
+    var o = document.styleSheets[t], a = null;
+    try {
+      a = o.cssRules;
+    } catch {
+    }
+    if (a)
+      for (var l = 0; l < a.length; ++l) {
+        var n = a[l], i = null;
+        try {
+          i = document.querySelectorAll(n.selectorText);
+        } catch {
+        }
+        if (!(!i || !me(i, e))) {
+          var c = n.style.getPropertyValue("top"), d = n.style.getPropertyValue("bottom");
+          if (c && c !== "auto" || d && d !== "auto")
+            return !0;
+        }
+      }
+  }
+  return !1;
+};
+r.needsCentering = function(e) {
+  var t = window.getComputedStyle(e);
+  return t.position !== "absolute" || e.style.top !== "auto" && e.style.top !== "" || e.style.bottom !== "auto" && e.style.bottom !== "" ? !1 : !r.isInlinePositionSetByStylesheet(e);
+};
+r.forceRegisterDialog = function(e) {
+  if ((window.HTMLDialogElement || e.showModal) && console.warn("This browser already supports <dialog>, the polyfill may not work correctly", e), e.localName !== "dialog")
+    throw new Error("Failed to register dialog: The element is not a dialog.");
+  new Q(
+    /** @type {!HTMLDialogElement} */
+    e
+  );
+};
+r.registerDialog = function(e) {
+  e.showModal || r.forceRegisterDialog(e);
+};
+r.DialogManager = function() {
+  this.pendingDialogStack = [];
+  var e = this.checkDOM_.bind(this);
+  this.overlay = document.createElement("div"), this.overlay.className = "_dialog_overlay", this.overlay.addEventListener("click", (function(t) {
+    this.forwardTab_ = void 0, t.stopPropagation(), e([]);
+  }).bind(this)), this.handleKey_ = this.handleKey_.bind(this), this.handleFocus_ = this.handleFocus_.bind(this), this.zIndexLow_ = 1e5, this.zIndexHigh_ = 100150, this.forwardTab_ = void 0, "MutationObserver" in window && (this.mo_ = new MutationObserver(function(t) {
+    var o = [];
+    t.forEach(function(a) {
+      for (var l = 0, n; n = a.removedNodes[l]; ++l) {
+        if (n instanceof Element)
+          n.localName === "dialog" && o.push(n);
+        else continue;
+        o = o.concat(n.querySelectorAll("dialog"));
+      }
+    }), o.length && e(o);
+  }));
+};
+r.DialogManager.prototype.blockDocument = function() {
+  document.documentElement.addEventListener("focus", this.handleFocus_, !0), document.addEventListener("keydown", this.handleKey_), this.mo_ && this.mo_.observe(document, { childList: !0, subtree: !0 });
+};
+r.DialogManager.prototype.unblockDocument = function() {
+  document.documentElement.removeEventListener("focus", this.handleFocus_, !0), document.removeEventListener("keydown", this.handleKey_), this.mo_ && this.mo_.disconnect();
+};
+r.DialogManager.prototype.updateStacking = function() {
+  for (var e = this.zIndexHigh_, t = 0, o; o = this.pendingDialogStack[t]; ++t)
+    o.updateZIndex(--e, --e), t === 0 && (this.overlay.style.zIndex = --e);
+  var a = this.pendingDialogStack[0];
+  if (a) {
+    var l = a.dialog.parentNode || document.body;
+    l.appendChild(this.overlay);
+  } else this.overlay.parentNode && this.overlay.parentNode.removeChild(this.overlay);
+};
+r.DialogManager.prototype.containedByTopDialog_ = function(e) {
+  for (; e = S(e); ) {
+    for (var t = 0, o; o = this.pendingDialogStack[t]; ++t)
+      if (o.dialog === e)
+        return t === 0;
+    e = e.parentElement;
+  }
+  return !1;
+};
+r.DialogManager.prototype.handleFocus_ = function(e) {
+  var t = e.composedPath ? e.composedPath()[0] : e.target;
+  if (!this.containedByTopDialog_(t) && document.activeElement !== document.documentElement && (e.preventDefault(), e.stopPropagation(), Y(
+    /** @type {Element} */
+    t
+  ), this.forwardTab_ !== void 0)) {
+    var o = this.pendingDialogStack[0], a = o.dialog, l = a.compareDocumentPosition(t);
+    return l & Node.DOCUMENT_POSITION_PRECEDING && (this.forwardTab_ ? o.focus_() : t !== document.documentElement && document.documentElement.focus()), !1;
+  }
+};
+r.DialogManager.prototype.handleKey_ = function(e) {
+  if (this.forwardTab_ = void 0, e.keyCode === 27) {
+    e.preventDefault(), e.stopPropagation();
+    var t = new y("cancel", {
+      bubbles: !1,
+      cancelable: !0
+    }), o = this.pendingDialogStack[0];
+    o && X(o.dialog, t) && o.dialog.close();
+  } else e.keyCode === 9 && (this.forwardTab_ = !e.shiftKey);
+};
+r.DialogManager.prototype.checkDOM_ = function(e) {
+  var t = this.pendingDialogStack.slice();
+  t.forEach(function(o) {
+    e.indexOf(o.dialog) !== -1 ? o.downgradeModal() : o.maybeHideModal();
+  });
+};
+r.DialogManager.prototype.pushDialog = function(e) {
+  var t = (this.zIndexHigh_ - this.zIndexLow_) / 2 - 1;
+  return this.pendingDialogStack.length >= t ? !1 : (this.pendingDialogStack.unshift(e) === 1 && this.blockDocument(), this.updateStacking(), !0);
+};
+r.DialogManager.prototype.removeDialog = function(e) {
+  var t = this.pendingDialogStack.indexOf(e);
+  t !== -1 && (this.pendingDialogStack.splice(t, 1), this.pendingDialogStack.length === 0 && this.unblockDocument(), this.updateStacking());
+};
+r.dm = new r.DialogManager();
+r.formSubmitter = null;
+r.imagemapUseValue = null;
+if (window.HTMLDialogElement === void 0) {
+  var U = document.createElement("form");
+  if (U.setAttribute("method", "dialog"), U.method !== "dialog") {
+    var v = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "method");
+    if (v) {
+      var be = v.get;
+      v.get = function() {
+        return L(this) ? "dialog" : be.call(this);
+      };
+      var xe = v.set;
+      v.set = function(e) {
+        return typeof e == "string" && e.toLowerCase() === "dialog" ? this.setAttribute("method", e) : xe.call(this, e);
+      }, Object.defineProperty(HTMLFormElement.prototype, "method", v);
+    }
+  }
+  document.addEventListener("click", function(e) {
+    if (r.formSubmitter = null, r.imagemapUseValue = null, !e.defaultPrevented) {
+      var t = (
+        /** @type {Element} */
+        e.target
+      );
+      if ("composedPath" in e) {
+        var o = e.composedPath();
+        t = o.shift() || t;
+      }
+      if (!(!t || !L(t.form))) {
+        var a = t.type === "submit" && ["button", "input"].indexOf(t.localName) > -1;
+        if (!a) {
+          if (!(t.localName === "input" && t.type === "image"))
+            return;
+          r.imagemapUseValue = e.offsetX + "," + e.offsetY;
+        }
+        var l = S(t);
+        l && (r.formSubmitter = t);
+      }
+    }
+  }, !1), document.addEventListener("submit", function(e) {
+    var t = e.target, o = S(t);
+    if (!o) {
+      var a = J(e), l = a && a.getAttribute("formmethod") || t.getAttribute("method");
+      l === "dialog" && e.preventDefault();
+    }
+  });
+  var we = HTMLFormElement.prototype.submit, Ee = function() {
+    if (!L(this))
+      return we.call(this);
+    var e = S(this);
+    e && e.close();
+  };
+  HTMLFormElement.prototype.submit = Ee;
+}
+const _e = { class: "flex items-center p-12 w-full border-b-1 border-grey-100 border-solid" }, Se = {
+  key: 0,
+  class: "flex flex-row p-12 border-t-1 border-grey-100 items-center border-solid"
+}, ke = "flex flex-col bg-core-white", De = "border-1 rounded border-grey-100 p-0 z-[42] top-0 bottom-0", Ce = /* @__PURE__ */ G({
+  __name: "FzDialog",
+  props: {
+    size: { default: "md" },
+    title: {},
+    confirmLabel: {},
+    cancelLabel: {},
+    text: {},
+    isDrawer: { type: Boolean },
+    closeOnBackdrop: { type: Boolean, default: !0 },
+    closeOnEscape: { type: Boolean, default: !0 },
+    bodyClasses: {},
+    shouldAlwaysRender: { type: Boolean }
+  },
+  emits: ["fzmodal:cancel"],
+  setup(e, { expose: t, emit: o }) {
+    const a = e, l = o, n = h(), i = h(), c = h(), d = h(!1), p = h(!1);
+    function b() {
+      var u;
+      (u = n.value) == null || u.style.setProperty("--innerHeight", `${window.innerHeight}px`);
+    }
+    function k() {
+      b(), r.registerDialog(n.value), n.value.show(), d.value = !0;
+    }
+    T(() => {
+      window.addEventListener("resize", b);
+    }), ee(() => {
+      window.removeEventListener("resize", b);
+    });
+    const z = () => {
+      a.shouldAlwaysRender ? k() : p.value = !0;
+    }, x = (u) => {
+      var N;
+      (N = n.value) == null || N.close(u);
+    };
+    function D() {
+      d.value = !1, a.shouldAlwaysRender || (p.value = !1);
+    }
+    W(n, (u) => {
+      u && p.value && k();
+    }), t({
+      show: z,
+      close: x,
+      visible: d
+    }), ie(
+      c,
+      () => {
+        a.closeOnBackdrop && (n.value.close(), l("fzmodal:cancel"));
+      },
+      i
+    ), se((u) => {
+      !d.value || u.key !== "Escape" || !a.closeOnEscape || (n.value.close(), l("fzmodal:cancel"));
+    });
+    const C = H(() => {
+      if (a.isDrawer)
+        return "m-0 fixed top-0 ml-auto max-h-screen";
+      switch (a.size) {
+        case "md":
+          return "xs:max-sm:m-0 xs:max-sm:max-h-screen xs:max-sm:h-dvh xs:max-sm:w-dvw xs:max-sm:max-w-screen-xl";
+        case "lg":
+          return "xs:max-md:m-0 xs:max-md:max-h-screen xs:max-md:h-dvh xs:max-md:w-dvw xs:max-md:max-w-screen-xl";
+        case "xl":
+          return "xs:max-xl:m-0 xs:max-xl:max-h-screen xs:max-xl:h-dvh xs:max-xl:w-dvw xs:max-xl:max-w-screen-xl";
+      }
+    }), R = H(() => {
+      if (a.isDrawer)
+        return "w-[480px] h-dvh";
+      switch (a.size) {
+        case "sm":
+          return "w-[320px] min-h-[200px] max-h-[432px]";
+        case "md":
+          return "w-dvw sm:w-[480px] min-h-[300px] sm:max-h-[600px] h-dvh sm:h-auto";
+        case "lg":
+          return "w-dvw md:w-[640px] min-h-[300px] md:max-h-[600px] h-dvh md:h-auto";
+        case "xl":
+          return "w-dvw xl:w-[960px] min-h-[400px] xl:max-h-[600px] h-dvh xl:h-auto";
+      }
+    });
+    return (u, N) => p.value || e.shouldAlwaysRender ? te((E(), I("div", {
+      key: 0,
+      ref_key: "backdrop",
+      ref: i,
+      class: "fz-dialog__backdrop w-screen h-screen fixed flex flex-col items-center justify-start sm:justify-center z-20"
+    }, [
+      f("dialog", {
+        ref_key: "dialog",
+        ref: n,
+        onClose: D,
+        class: _([De, C.value])
+      }, [
+        f("div", {
+          ref_key: "innerDialog",
+          ref: c,
+          class: _([ke, R.value])
+        }, [
+          f("div", _e, [
+            m(u.$slots, "header", {}, void 0, !0)
+          ]),
+          f("div", {
+            class: _(["grow p-12 overflow-auto", e.bodyClasses])
+          }, [
+            m(u.$slots, "body", {}, void 0, !0)
+          ], 2),
+          u.$slots.footer ? (E(), I("div", Se, [
+            m(u.$slots, "footer", {}, void 0, !0)
+          ])) : M("", !0)
+        ], 2)
+      ], 34)
+    ], 512)), [
+      [oe, d.value]
+    ]) : M("", !0);
+  }
+}), Me = (e, t) => {
+  const o = e.__vccOpts || e;
+  for (const [a, l] of t)
+    o[a] = l;
+  return o;
+}, ze = /* @__PURE__ */ Me(Ce, [["__scopeId", "data-v-ba12262d"]]), Ne = { class: "grow h-28 font-medium" }, Oe = {
+  method: "dialog",
+  class: "w-full h-full"
+}, Le = /* @__PURE__ */ G({
+  __name: "FzConfirmDialog",
+  props: {
+    size: { default: "md" },
+    title: {},
+    confirmLabel: {},
+    cancelLabel: {},
+    text: {},
+    isDrawer: { type: Boolean },
+    closeOnBackdrop: { type: Boolean },
+    closeOnEscape: { type: Boolean },
+    bodyClasses: {},
+    shouldAlwaysRender: { type: Boolean },
+    footerEnabled: { type: Boolean, default: !0 },
+    cancelButtonEnabled: { type: Boolean, default: !0 },
+    disableConfirm: { type: Boolean, default: !1 },
+    confirmButtonEnabled: { type: Boolean, default: !0 },
+    confirmButtonVariant: {},
+    doesConfirmButtonCloseDialog: { type: Boolean, default: !0 },
+    doesCancelButtonCloseDialog: { type: Boolean, default: !0 },
+    footerClasses: {}
+  },
+  emits: ["fzmodal:confirm", "fzmodal:cancel"],
+  setup(e, { expose: t, emit: o }) {
+    const a = e, l = o, n = h(), i = h(!1), c = ["flex flex-row items-center text-xl grow"], d = H(() => ({
+      "h-32": a.isDrawer,
+      "h-28": !a.isDrawer
+    })), p = [
+      "flex flex-row items-center h-32 grow justify-end"
+    ], b = {
+      "h-32": !a.isDrawer,
+      "h-40": a.isDrawer
+    }, k = () => {
+      var s;
+      (s = n.value) == null || s.show(), i.value = !0;
+    }, z = () => {
+      var s;
+      (s = n.value) == null || s.close(), i.value = !1;
+    }, x = () => {
+      var s;
+      a.doesCancelButtonCloseDialog && ((s = n.value) == null || s.close(), i.value = !1), l("fzmodal:cancel");
+    }, D = () => {
+      var s;
+      a.doesConfirmButtonCloseDialog && ((s = n.value) == null || s.close(), i.value = !1), l("fzmodal:confirm");
+    };
+    return t({
+      handleCancel: x,
+      handleConfirm: D,
+      visible: i,
+      show: k,
+      close: z
+    }), (s, C) => (E(), O(ze, ae(a, {
+      ref_key: "dialog",
+      ref: n,
+      "onFzmodal:cancel": C[0] || (C[0] = (R) => l("fzmodal:cancel"))
+    }), le({
+      header: w(() => [
+        m(s.$slots, "header", {}, () => [
+          f("div", {
+            class: _([c, d.value])
+          }, [
+            f("div", Ne, B(e.title), 1),
+            ne(A(re), {
+              onClick: x,
+              class: "ml-12",
+              iconName: "xmark-large",
+              size: "sm",
+              variant: "invisible"
+            })
+          ], 2)
+        ])
+      ]),
+      body: w(() => [
+        m(s.$slots, "body")
+      ]),
+      _: 2
+    }, [
+      e.footerEnabled ? {
+        name: "footer",
+        fn: w(() => [
+          m(s.$slots, "footer", {}, () => [
+            f("form", Oe, [
+              f("div", {
+                class: _([p, b, e.footerClasses])
+              }, [
+                e.cancelButtonEnabled ? (E(), O(A(V), {
+                  key: 0,
+                  variant: "invisible",
+                  onClick: P(x, ["prevent"]),
+                  value: "false"
+                }, {
+                  default: w(() => [
+                    K(B(e.cancelLabel), 1)
+                  ]),
+                  _: 1
+                })) : M("", !0),
+                e.confirmButtonEnabled ? (E(), O(A(V), {
+                  key: 1,
+                  class: "ml-12",
+                  onClick: P(D, ["prevent"]),
+                  disabled: e.disableConfirm,
+                  value: "true",
+                  variant: e.confirmButtonVariant
+                }, {
+                  default: w(() => [
+                    K(B(e.confirmLabel), 1)
+                  ]),
+                  _: 1
+                }, 8, ["disabled", "variant"])) : M("", !0)
+              ], 2)
+            ])
+          ])
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040));
+  }
+});
+export {
+  Le as FzConfirmDialog,
+  ze as FzDialog
+};