@everchron/ec-shards 8.11.1 → 8.11.2

package/dist/ec-shards.js

@@ -3618,1599 +3618,348 @@ function zo(e, s, t, a, n, i) {
   ], 10, Bo);
 }
 const Os = /* @__PURE__ */ _(Co, [["render", zo], ["__scopeId", "data-v-3fdbdfeb"]]);
-const Io = {
-  name: "ecs-button-context",
-  emits: ["click"],
-  components: {
-    EcsIcon: M,
-    EcsFocusRing: L
-  },
-  props: {
-    /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-    icon: {
-      type: String,
-      default: null
-    },
-    /** Turns the button into a loading state. */
-    loading: {
-      type: Boolean,
-      default: !1
-    },
-    /** Context buttons can be used to set a specific text or annotation color on the selection. Pass any color value (HEX, RGBA). */
-    selectedColor: {
-      type: String,
-      default: null
-    },
-    /** Aria-label is needed for iconOnly buttons to improve accessibility for screenreaders. */
-    ariaLabel: {
-      type: String
-    }
-  },
-  computed: {
-    iconType() {
-      return this.loading ? "loading" : (this.icon && this.icon, this.icon);
-    },
-    iconOnly() {
-      return this.icon && !this.$slots.default;
-    },
-    selectedColorBackground() {
-      if (this.selectedColor)
-        return `background-color:${this.selectedColor};`;
-    },
-    selectedColorText() {
-      if (this.selectedColor)
-        return `color:${this.selectedColor};`;
-    }
-  },
-  mounted() {
-    this.iconOnly && (!this.ariaLabel || this.ariaLabel.trim());
-  }
-}, Eo = ["aria-label", "aria-busy"];
-function $o(e, s, t, a, n, i) {
-  const r = p("ecs-icon"), c = p("ecs-focus-ring");
-  return o(), l("button", {
-    class: v(["ecs-context-button", [t.loading ? "loading" : "", i.iconOnly ? "ecs-context-button-icon-only" : ""]]),
-    "aria-label": t.ariaLabel,
-    "aria-busy": t.loading || null,
-    style: B(i.selectedColorText),
-    onClick: s[0] || (s[0] = (d) => e.$emit("click", d))
-  }, [
-    t.icon || t.loading ? (o(), y(r, {
-      key: 0,
-      type: i.iconType,
-      size: "20"
-    }, null, 8, ["type"])) : u("", !0),
-    t.selectedColor ? (o(), l("div", {
-      key: 1,
-      class: "ecs-context-button-color",
-      style: B(i.selectedColorBackground)
-    }, null, 4)) : u("", !0),
-    m(e.$slots, "default", {}, void 0, !0),
-    b(c)
-  ], 14, Eo);
+function ut(e) {
+  "@babel/helpers - typeof";
+  return ut = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(s) {
+    return typeof s;
+  } : function(s) {
+    return s && typeof Symbol == "function" && s.constructor === Symbol && s !== Symbol.prototype ? "symbol" : typeof s;
+  }, ut(e);
 }
-const yy = /* @__PURE__ */ _(Io, [["render", $o], ["__scopeId", "data-v-bbc83578"]]);
-const Po = {
-  name: "ecs-context-button-group"
-}, To = { class: "ecs-context-button-group" };
-function Mo(e, s, t, a, n, i) {
-  return o(), l("div", To, [
-    m(e.$slots, "default", {}, void 0, !0)
-  ]);
+var Io = /^\s+/, Eo = /\s+$/;
+function S(e, s) {
+  if (e = e || "", s = s || {}, e instanceof S)
+    return e;
+  if (!(this instanceof S))
+    return new S(e, s);
+  var t = $o(e);
+  this._originalInput = e, this._r = t.r, this._g = t.g, this._b = t.b, this._a = t.a, this._roundA = Math.round(100 * this._a) / 100, this._format = s.format || t.format, this._gradientType = s.gradientType, this._r < 1 && (this._r = Math.round(this._r)), this._g < 1 && (this._g = Math.round(this._g)), this._b < 1 && (this._b = Math.round(this._b)), this._ok = t.ok;
 }
-const by = /* @__PURE__ */ _(Po, [["render", Mo], ["__scopeId", "data-v-94a53b69"]]);
-const Lo = {
-  name: "ecs-button-dialog",
-  emits: ["click"],
-  components: {
-    EcsIcon: M,
-    EcsFocusRing: L
+S.prototype = {
+  isDark: function() {
+    return this.getBrightness() < 128;
   },
-  props: {
-    /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-    icon: {
-      type: String,
-      default: null
-    },
-    /** Defines the type and function of the button. If not set, the button will be neutral (used for Cancel actions). */
-    type: {
-      type: String,
-      validator: (e) => ["danger", "confirm", "cancel"].includes(e),
-      default: "cancel"
-    },
-    /** Turns the button into a loading state. */
-    loading: Boolean
+  isLight: function() {
+    return !this.isDark();
   },
-  computed: {
-    typeClass() {
-      return this.type && this.type !== "" ? `ecs-dialog-footer-button-${this.type}` : this.type;
-    },
-    iconType() {
-      return this.loading ? "loading" : this.icon;
-    }
-  }
-}, Oo = ["aria-busy"];
-function Ao(e, s, t, a, n, i) {
-  const r = p("ecs-icon"), c = p("ecs-focus-ring");
-  return o(), l("button", {
-    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
-    class: v([[i.typeClass, t.loading ? "loading" : ""], "ecs-dialog-footer-button"]),
-    "aria-busy": t.loading || null
-  }, [
-    t.icon || t.loading ? (o(), y(r, {
-      key: 0,
-      type: i.iconType
-    }, null, 8, ["type"])) : u("", !0),
-    m(e.$slots, "default", {}, void 0, !0),
-    b(c, {
-      radius: 12,
-      danger: t.type == "danger"
-    }, null, 8, ["danger"])
-  ], 10, Oo);
-}
-const ky = /* @__PURE__ */ _(Lo, [["render", Ao], ["__scopeId", "data-v-fe031b71"]]);
-const No = {
-  name: "ecs-button-more",
-  emits: ["click"],
-  components: {
-    EcsIcon: M,
-    EcsFocusRing: L
+  isValid: function() {
+    return this._ok;
   },
-  props: {
-    /** Displays the button slightly highlighted. Should be used when the state the button triggers is currently visible. */
-    active: Boolean,
-    /** Defines the type of the button: `dropdown` shows a simple dropdown button, `ellipsis` shows a tiny (...) button, and `expand` is supposed to be used at the end of expandable lists and tables. */
-    type: {
-      type: String,
-      validator: (e) => ["dropdown", "dropdown-round", "ellipsis", "expand"].includes(e),
-      default: "dropdown"
-    },
-    /** Provide a meaningful label for the button to improve accessibility for screenreaders. */
-    ariaLabel: {
-      type: String
-    },
-    /** Disables the button and prevent pointer events. */
-    disabled: {
-      type: Boolean
-    }
+  getOriginalInput: function() {
+    return this._originalInput;
   },
-  computed: {
-    typeClass() {
-      return this.type && this.type !== "" ? `ecs-button-more-${this.type}` : this.type;
-    }
+  getFormat: function() {
+    return this._format;
   },
-  mounted() {
-    this.$slots.default === void 0 && (!this.ariaLabel || this.ariaLabel.trim());
-  }
-}, Do = ["aria-label", "aria-disabled", "aria-expanded", "aria-haspopup", "disabled"];
-function Fo(e, s, t, a, n, i) {
-  const r = p("ecs-icon"), c = p("ecs-focus-ring");
-  return o(), l("button", {
-    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
-    "aria-label": t.ariaLabel,
-    "aria-disabled": t.disabled || null,
-    "aria-expanded": t.active || null,
-    "aria-haspopup": t.type == "dropdown" || null,
-    disabled: t.disabled || null,
-    class: v([
-      t.active ? "active" : "",
-      i.typeClass
-    ])
-  }, [
-    t.type == "ellipsis" ? (o(), y(r, {
-      key: 0,
-      type: "more",
-      size: "20",
-      color: "#FFF"
-    })) : u("", !0),
-    t.type == "dropdown" || t.type == "dropdown-round" ? (o(), y(r, {
-      key: 1,
-      type: "chevron-down",
-      size: "12",
-      color: "var(--color-gray-9)"
-    })) : u("", !0),
-    t.type === "expand" ? m(e.$slots, "default", { key: 2 }, void 0, !0) : u("", !0),
-    b(c)
-  ], 10, Do);
-}
-const As = /* @__PURE__ */ _(No, [["render", Fo], ["__scopeId", "data-v-faa154dd"]]);
-const Ro = {
-  name: "ecs-button-table",
-  emits: ["click", "mouseover", "mouseleave"],
-  components: {
-    EcsIcon: M,
-    EcsFocusRing: L
+  getAlpha: function() {
+    return this._a;
   },
-  props: {
-    /** Displays the button in an active state. */
-    active: Boolean,
-    /** Show the button without a background color. */
-    subtle: {
-      type: Boolean,
-      default: !1
-    },
-    /** Button is visually toned down (text and icon are more gray than black). */
-    pale: {
-      type: Boolean,
-      default: !1
-    },
-    /** Sets the size of the button. */
-    size: {
-      type: String,
-      validator: (e) => ["md", "sml", null].includes(e),
-      default: "md"
-    },
-    /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-    icon: {
-      type: String
-    },
-    /** Text text inside the button. */
-    label: {
-      type: [String, Number]
-    },
-    /** Turns the button into disabled state, which disables all interactions and hover effects. */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /** If set, a small arrow will show up on the right side of the button, to indicate an collapse/expand state. The direction of the button is determined by the `active` prop. */
-    chevron: {
-      type: Boolean,
-      default: !1
-    },
-    /** If set, the button will not show any effects that would indicate that you could interact with the button. This is usefull when the button is only used to show a specific count/label instead of triggering any actions. */
-    unreactive: {
-      type: Boolean,
-      default: !1
-    },
-    /** Turns the button into a loading state, which makes it appear disabled and replaces the default icon (if set) with a spinner. */
-    loading: {
-      type: Boolean,
-      default: !1
-    }
+  getBrightness: function() {
+    var s = this.toRgb();
+    return (s.r * 299 + s.g * 587 + s.b * 114) / 1e3;
   },
-  computed: {
-    hasLabel() {
-      return this.label && this.label !== "" || this.label != null ? "has-label" : this.label;
-    },
-    sizeClass() {
-      return this.size && this.size !== "" ? `ecs-button-table-${this.size}` : this.size;
-    },
-    iconSize() {
-      return this.size == "sml" ? "16" : "20";
-    },
-    iconType() {
-      return this.loading ? "loading" : this.icon;
-    },
-    ariaDisabled() {
-      return this.disabled || this.unreactive ? !0 : null;
-    }
-  }
-}, Vo = ["disabled", "aria-disabled", "aria-expanded", "aria-busy"], Ho = {
-  key: 1,
-  class: "button-label"
-};
-function qo(e, s, t, a, n, i) {
-  const r = p("ecs-icon"), c = p("ecs-focus-ring");
-  return o(), l("button", {
-    class: v(["ecs-button-table", [
-      t.active ? "active" : "",
-      i.hasLabel,
-      t.subtle ? "subtle" : "",
-      t.pale ? "pale" : "",
-      t.unreactive ? "unreactive" : "",
-      t.loading ? "loading" : "",
-      i.sizeClass
-    ]]),
-    disabled: t.disabled || null,
-    "aria-disabled": i.ariaDisabled,
-    "aria-expanded": t.active || null,
-    "aria-busy": t.loading || null,
-    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
-    onMouseover: s[1] || (s[1] = (d) => e.$emit("mouseover", d)),
-    onMouseleave: s[2] || (s[2] = (d) => e.$emit("mouseleave", d))
-  }, [
-    t.icon || t.loading ? (o(), y(r, {
-      key: 0,
-      type: i.iconType,
-      size: i.iconSize
-    }, null, 8, ["type", "size"])) : u("", !0),
-    t.label != null ? (o(), l("div", Ho, x(t.label), 1)) : u("", !0),
-    t.chevron ? (o(), l("div", {
-      key: 2,
-      class: v(["chevron", t.active ? "expand" : ""])
-    }, null, 2)) : u("", !0),
-    b(c)
-  ], 42, Vo);
-}
-const Ns = /* @__PURE__ */ _(Ro, [["render", qo], ["__scopeId", "data-v-f5a891fe"]]);
-const Wo = {
-  name: "ecs-toolbar-button-group"
-}, jo = { class: "ecs-toolbar-button-group" };
-function Go(e, s, t, a, n, i) {
-  return o(), l("div", jo, [
-    m(e.$slots, "default", {}, void 0, !0)
-  ]);
-}
-const Ht = /* @__PURE__ */ _(Wo, [["render", Go], ["__scopeId", "data-v-743ca90b"]]);
-const Uo = {
-  name: "ecs-toolbar-icon-button",
-  emits: ["click"],
-  components: { EcsIcon: M, EcsFocusRing: L },
-  props: {
-    /** The icon type of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). Note that only icons prefixed with `toolbar-` should be used here. */
-    icon: {
-      type: String,
-      required: !0
-    },
-    /** Renders a small secondary icon in the bottom left of the button. Should only used under special conditions, eg. to reflect a specifc state that can not be handled by the `active` prop. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-    subIcon: {
-      type: String
-    },
-    /** When set, the icon is spinning. Should really only be used when the `icon` is set to `toolbar-refresh`. */
-    refresh: {
-      type: Boolean,
-      default: !1
-    },
-    /** Indicates that the button is activated. */
-    active: {
-      type: Boolean,
-      default: !1
-    },
-    /** Show the button in loading state. */
-    loading: {
-      type: Boolean,
-      default: !1
-    },
-    /** Adds a small blue badge to the upper right of the button. */
-    hasBadge: {
-      type: Boolean,
-      default: !1
-    },
-    /** Sets the aria-label attribute to improve accessibility. */
-    ariaLabel: {
-      type: String
-      //required: true
-    }
+  getLuminance: function() {
+    var s = this.toRgb(), t, a, n, i, r, c;
+    return t = s.r / 255, a = s.g / 255, n = s.b / 255, t <= 0.03928 ? i = t / 12.92 : i = Math.pow((t + 0.055) / 1.055, 2.4), a <= 0.03928 ? r = a / 12.92 : r = Math.pow((a + 0.055) / 1.055, 2.4), n <= 0.03928 ? c = n / 12.92 : c = Math.pow((n + 0.055) / 1.055, 2.4), 0.2126 * i + 0.7152 * r + 0.0722 * c;
   },
-  computed: {
-    ariaBusy() {
-      return this.refresh || this.loading ? !0 : null;
-    }
-  }
-}, Ko = ["aria-busy", "aria-label"], Yo = {
-  key: 0,
-  class: "badge"
-}, Xo = { class: "sub-icon" };
-function Zo(e, s, t, a, n, i) {
-  const r = p("ecs-icon"), c = p("ecs-focus-ring");
-  return o(), l("button", {
-    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
-    "aria-busy": i.ariaBusy,
-    "aria-label": t.ariaLabel,
-    class: v(["ecs-toolbar-icon-button", [
-      t.refresh ? "refreshing" : "",
-      t.active ? "active" : "",
-      t.loading ? "loading" : ""
-    ]])
-  }, [
-    b(r, { type: t.icon }, null, 8, ["type"]),
-    t.hasBadge ? (o(), l("span", Yo)) : u("", !0),
-    f("div", Xo, [
-      t.subIcon ? (o(), y(r, {
-        key: 0,
-        type: t.subIcon,
-        size: "14"
-      }, null, 8, ["type"])) : u("", !0)
-    ]),
-    b(c)
-  ], 10, Ko);
-}
-const xy = /* @__PURE__ */ _(Uo, [["render", Zo], ["__scopeId", "data-v-098e1030"]]);
-const Jo = {
-  name: "ecs-card",
-  emits: ["click"],
-  props: {
-    /** Unique ID */
-    id: {
-      type: [String, Number],
-      default: null
-    },
-    /** Indicates that this card is currently selected (most likely via a checkbox that is contained in the card). */
-    selected: {
-      type: Boolean,
-      default: !1
-    },
-    /** Indicates that this card is currently expanded. Adds a bit of spacing and a stronger shadow. */
-    expanded: {
-      type: Boolean,
-      default: !1
-    },
-    /** Determines if the card should have a :hover state. This usually applies when the card is clickable, or expandable. */
-    hover: {
-      type: Boolean,
-      default: !1
-    },
-    /** Shows a full-height progress bar in the background of the card. Should only be used for single row cards. Pass the current percentage value as `Number`. */
-    progress: {
-      type: Number,
-      default: null
-    },
-    /** Turns the whole card into a disabled state. This also blocks all interactions on card content. */
-    disabled: {
-      type: Boolean,
-      default: !1
-    }
+  setAlpha: function(s) {
+    return this._a = As(s), this._roundA = Math.round(100 * this._a) / 100, this;
   },
-  computed: {
-    itemId() {
-      return `item-${this.id}`;
-    }
-  }
-}, Qo = ["id"], er = { class: "ecs-card-inner" }, tr = { class: "ecs-card-background" };
-function sr(e, s, t, a, n, i) {
-  return o(), l("div", {
-    onClick: s[0] || (s[0] = (r) => e.$emit("click", r)),
-    class: v(["ecs-card", [
-      t.selected ? "ecs-card-selected" : "",
-      t.expanded ? "ecs-card-expanded" : "",
-      t.hover ? "ecs-card-hover" : "",
-      t.disabled ? "ecs-card-disabled" : ""
-    ]]),
-    id: i.itemId
-  }, [
-    f("div", er, [
-      m(e.$slots, "default", {}, void 0, !0)
-    ]),
-    f("div", tr, [
-      t.progress ? (o(), l("div", {
-        key: 0,
-        class: "progress",
-        style: B({ width: t.progress + "%" })
-      }, null, 4)) : u("", !0)
-    ])
-  ], 10, Qo);
-}
-const wy = /* @__PURE__ */ _(Jo, [["render", sr], ["__scopeId", "data-v-8d449816"]]);
-const ir = {
-  name: "ecs-citation-line",
-  emits: ["change", "blur", "focus"],
-  components: { EcsFlexRow: Me },
-  props: {
-    /** The citation range text. */
-    cite: {
-      type: String,
-      required: !0
-    },
-    /** Unique citation ID */
-    id: {
-      type: [String, Number],
-      required: !0
-    },
-    /** Determines the visual state of the citation line. */
-    state: {
-      type: String,
-      validator: (e) => ["default", "error", "warning", "edited", "skipped"].includes(e),
-      default: "default"
-    },
-    /** Makes the content of the citation line editable. */
-    editable: {
-      type: Boolean,
-      default: !0
-    }
+  toHsv: function() {
+    var s = ls(this._r, this._g, this._b);
+    return {
+      h: s.h * 360,
+      s: s.s,
+      v: s.v,
+      a: this._a
+    };
   },
-  data() {
+  toHsvString: function() {
+    var s = ls(this._r, this._g, this._b), t = Math.round(s.h * 360), a = Math.round(s.s * 100), n = Math.round(s.v * 100);
+    return this._a == 1 ? "hsv(" + t + ", " + a + "%, " + n + "%)" : "hsva(" + t + ", " + a + "%, " + n + "%, " + this._roundA + ")";
+  },
+  toHsl: function() {
+    var s = rs(this._r, this._g, this._b);
     return {
-      citeValue: this.cite
+      h: s.h * 360,
+      s: s.s,
+      l: s.l,
+      a: this._a
     };
   },
-  mounted() {
-    this.$refs.editable.innerText = this.citeValue;
+  toHslString: function() {
+    var s = rs(this._r, this._g, this._b), t = Math.round(s.h * 360), a = Math.round(s.s * 100), n = Math.round(s.l * 100);
+    return this._a == 1 ? "hsl(" + t + ", " + a + "%, " + n + "%)" : "hsla(" + t + ", " + a + "%, " + n + "%, " + this._roundA + ")";
   },
-  methods: {
-    onInput(e) {
-      this.citeValue = e.target.innerText, this.$emit("change", this.citeValue, this.id);
-    }
-  }
-}, nr = ["contenteditable"];
-function ar(e, s, t, a, n, i) {
-  const r = p("ecs-flex-row");
-  return o(), y(r, { class: "ecs-citation-line" }, {
-    default: w(() => [
-      f("div", {
-        class: v(["ecs-citation-line-cite", [t.state, t.editable ? "editable" : ""]]),
-        ref: "editable",
-        onKeyup: s[0] || (s[0] = (...c) => i.onInput && i.onInput(...c)),
-        onBlur: s[1] || (s[1] = (c) => e.$emit("blur", c)),
-        onFocus: s[2] || (s[2] = (c) => e.$emit("focus", c)),
-        onKeydown: s[3] || (s[3] = U(G(() => {
-        }, ["prevent"]), ["enter"])),
-        contenteditable: t.editable
-      }, null, 42, nr),
-      e.$slots.actions ? (o(), y(r, {
-        key: 0,
-        justify: "end",
-        class: "ecs-citation-line-actions"
-      }, {
-        default: w(() => [
-          m(e.$slots, "actions", {}, void 0, !0)
-        ]),
-        _: 3
-      })) : u("", !0)
-    ]),
-    _: 3
-  });
-}
-const Sy = /* @__PURE__ */ _(ir, [["render", ar], ["__scopeId", "data-v-cfd8e718"]]);
-var qt = {};
-Object.defineProperty(qt, "__esModule", {
-  value: !0
-});
-var or = qt.clickOutSide = {
-  mounted: function(s, t, a) {
-    s.clickOutsideEvent = function(n) {
-      s == n.target || s.contains(n.target) || t.value(n, s);
-    }, document.addEventListener("click", s.clickOutsideEvent);
+  toHex: function(s) {
+    return cs(this._r, this._g, this._b, s);
   },
-  unmounted: function(s) {
-    document.removeEventListener("click", s.clickOutsideEvent);
-  }
-}, rr = qt.default = or;
-const lr = {
-  name: "ecs-context-menu",
-  emits: ["option-clicked", "menu-closed"],
-  components: { EcsIcon: M, EcsFocusRing: L, EcsButton: Se },
-  directives: {
-    clickOutSide: rr
+  toHexString: function(s) {
+    return "#" + this.toHex(s);
   },
-  props: {
-    /** Unique String that acts as the id for the menu. */
-    elementId: {
-      type: String,
-      required: !0
-    },
-    /** Array of menu options to show. Component will use the `name` parameter as the label. Array needs to contain objects with the following structure:
-    ```{
-      name: 'Duplicate',
-      slug: 'duplicate',
-      icon: 'evidence',
-      disabled: false,
-      type: '',
-      nested: { ... }
-    }``` */
-    options: {
-      type: Array,
-      required: !0
-    },
-    /** If passed, an icon will appear. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-    icon: {
-      type: String
-    }
+  toHex8: function(s) {
+    return Lo(this._r, this._g, this._b, this._a, s);
   },
-  data() {
+  toHex8String: function(s) {
+    return "#" + this.toHex8(s);
+  },
+  toRgb: function() {
     return {
-      item: null,
-      menuWidth: null,
-      menuHeight: null,
-      opened: !1,
-      left: 0,
-      top: 0
+      r: Math.round(this._r),
+      g: Math.round(this._g),
+      b: Math.round(this._b),
+      a: this._a
     };
   },
-  computed: {
-    postionStyles() {
-      return { left: this.left + "px", top: this.top + "px" };
-    }
+  toRgbString: function() {
+    return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
   },
-  methods: {
-    showMenu(e, s) {
-      this.item = s;
-      let t = document.getElementById(this.elementId);
-      t && ((!this.menuWidth || !this.menuHeight) && (t.style.visibility = "hidden", t.style.display = "block", this.menuWidth = t.offsetWidth, this.menuHeight = t.offsetHeight, t.removeAttribute("style")), this.menuWidth + e.pageX >= window.innerWidth ? this.left = e.pageX - this.menuWidth + 2 : this.left = e.pageX - 2, this.menuHeight + e.pageY >= window.innerHeight ? this.top = e.pageY - this.menuHeight + 2 : this.top = e.pageY - 2, this.opened = !0, this.$emit("menu-opened", this.item), this.$nextTick(() => {
-        this.$refs.menu.focus();
-      }));
-    },
-    hideContextMenu() {
-      document.getElementById(this.elementId) && (this.opened = !1, this.$emit("menu-closed"));
-    },
-    onClickOutside() {
-      this.hideContextMenu();
-    },
-    optionClicked(e) {
-      this.hideContextMenu(), this.$emit("option-clicked", {
-        item: this.item,
-        option: e
-      });
-    },
-    onEscKeyRelease(e) {
-      e.keyCode === 27 && this.hideContextMenu();
-    },
-    // Focus the first menu item when the context menu opens
-    focusFirst() {
-      this.$refs.menu.children[0].focus();
-    },
-    // Focus the last menu item when the user presses the up arrow key on the first menu item
-    focusLast() {
-      const e = this.$refs.menu.children;
-      e[e.length - 1].focus();
-    },
-    // Focus the previous menu item when the user presses the up arrow key
-    focusPrevious(e) {
-      const s = this.$refs.menu.children, t = Array.prototype.indexOf.call(s, e.target);
-      if (t > 0) {
-        let a = t - 1;
-        for (; a >= 0 && s[a].getAttribute("tabindex") === "-1"; )
-          a--;
-        a >= 0 ? s[a].focus() : this.focusLast();
-      } else
-        this.focusLast();
-    },
-    focusNext(e) {
-      const s = this.$refs.menu.children;
-      let t = Array.prototype.indexOf.call(s, e.target);
-      for (; t < s.length - 1; )
-        if (t++, s[t].getAttribute("tabindex") !== "-1") {
-          s[t].focus();
-          return;
-        }
-      this.focusFirst();
-    }
+  toPercentageRgb: function() {
+    return {
+      r: Math.round(H(this._r, 255) * 100) + "%",
+      g: Math.round(H(this._g, 255) * 100) + "%",
+      b: Math.round(H(this._b, 255) * 100) + "%",
+      a: this._a
+    };
   },
-  mounted() {
-    document.body.addEventListener("keyup", this.onEscKeyRelease), this.$refs.menu.addEventListener("keydown", (e) => {
-      e.keyCode === 9 && (e.preventDefault(), this.focusFirst());
-    });
+  toPercentageRgbString: function() {
+    return this._a == 1 ? "rgb(" + Math.round(H(this._r, 255) * 100) + "%, " + Math.round(H(this._g, 255) * 100) + "%, " + Math.round(H(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(H(this._r, 255) * 100) + "%, " + Math.round(H(this._g, 255) * 100) + "%, " + Math.round(H(this._b, 255) * 100) + "%, " + this._roundA + ")";
   },
-  beforeUnmount() {
-    document.removeEventListener("keyup", this.onEscKeyRelease);
-  }
-}, cr = ["id"], dr = ["onClick", "role", "tabindex", "aria-disabled"], ur = { key: 1 };
-function fr(e, s, t, a, n, i) {
-  const r = p("ecs-icon"), c = p("ecs-button"), d = p("ecs-focus-ring"), g = oi("click-out-side");
-  return Ge((o(), l("div", {
-    class: v(["ecs-context-menu", n.opened ? " opened" : ""]),
-    id: t.elementId,
-    style: B([i.postionStyles])
-  }, [
-    f("ul", {
-      role: "menu",
-      "aria-orientation": "vertical",
-      tabindex: "0",
-      onKeydown: [
-        s[0] || (s[0] = U(G((...h) => i.focusPrevious && i.focusPrevious(...h), ["prevent"]), ["up"])),
-        s[1] || (s[1] = U(G((...h) => i.focusNext && i.focusNext(...h), ["prevent"]), ["down"]))
-      ],
-      ref: "menu",
-      id: "my-menu"
-    }, [
-      (o(!0), l(Z, null, ge(t.options, (h, k) => (o(), l("li", {
-        key: k,
-        onClick: G((z) => i.optionClicked(h), ["stop"]),
-        role: h.type === "divider" ? "separator" : "menuitem",
-        tabindex: h.type === "divider" || h.disabled ? "-1" : "0",
-        "aria-disabled": h.disabled || null,
-        class: v([
-          h.type === "divider" ? "ecs-context-menu-divider" : "ecs-context-menu-item",
-          h.type === "danger" ? "danger" : "",
-          h.disabled ? "disabled" : ""
-        ])
-      }, [
-        h.icon ? (o(), y(r, {
-          key: 0,
-          type: h.icon,
-          size: "20"
-        }, null, 8, ["type"])) : u("", !0),
-        h.type != "divider" ? (o(), l("span", ur, x(h.name), 1)) : u("", !0),
-        h.nested ? (o(), y(c, {
-          key: 2,
-          onClick: G((z) => i.optionClicked(h.nested), ["stop"]),
-          icon: h.nested.icon,
-          title: h.nested.name,
-          "aria-label": h.nested.name,
-          disabled: h.nested.disabled || null,
-          type: "secondary",
-          "icon-only": "",
-          size: "sml"
-        }, null, 8, ["onClick", "icon", "title", "aria-label", "disabled"])) : u("", !0),
-        b(d, {
-          danger: h.type == "danger"
-        }, null, 8, ["danger"])
-      ], 10, dr))), 128))
-    ], 544)
-  ], 14, cr)), [
-    [g, i.onClickOutside]
-  ]);
-}
-const Cy = /* @__PURE__ */ _(lr, [["render", fr], ["__scopeId", "data-v-7a99d0e5"]]);
-const pr = {
-  name: "ecs-collapse",
-  emits: ["toggled", "remove"],
-  components: { EcsButton: Se, EcsFocusRing: L, EcsFlexRow: Me },
-  props: {
-    /** Unique ID, is required to handle persist states. */
-    id: {
-      type: String,
-      required: !0
-    },
-    /** The headline of the collapse control. */
-    title: {
-      type: String,
-      required: !0
-    },
-    /** Determines the padding of the headline and content sections. */
-    indent: {
-      type: String,
-      validator: (e) => ["sml", "md", null].includes(e),
-      default: null
-    },
-    /** Determines the padding of the headline section alone. */
-    headlineIndent: {
-      type: String,
-      validator: (e) => ["sml", "md", null].includes(e),
-      default: null
-    },
-    /** Displays a border above the headline section. */
-    borderTop: {
-      type: Boolean
-    },
-    /** Displays a border below the content section. */
-    borderBottom: {
-      type: Boolean
-    },
-    /** Makes the headline to render in font-weight bold. */
-    headlineBold: {
-      type: Boolean
-    },
-    /** Determines the initial state of the control. If set to `true`, the collapse is expanded on mount. */
-    visible: {
-      type: Boolean
-    },
-    /** If set, a small (-) remove button is rendered in the headline section. */
-    removable: {
-      type: Boolean
-    },
-    /** Sets the tooltip title of the remove button. */
-    removableTooltip: {
-      type: String
-    },
-    /** Saves the state of the collapse control in localstorage and reads the state on next mount, to automatically set it to expanded or collapsed. */
-    persist: {
-      type: Boolean,
-      default: !0
-    },
-    /** Sets the top and bottom padding of the content section. */
-    contentPadding: {
-      type: String,
-      validator: (e) => ["none", "sml", "md"].includes(e),
-      default: "md"
-    },
-    /** Sets the count of the collapse control in parenthese next to the headline. */
-    count: {
-      type: Number
+  toName: function() {
+    return this._a === 0 ? "transparent" : this._a < 1 ? !1 : Go[cs(this._r, this._g, this._b, !0)] || !1;
+  },
+  toFilter: function(s) {
+    var t = "#" + ds(this._r, this._g, this._b, this._a), a = t, n = this._gradientType ? "GradientType = 1, " : "";
+    if (s) {
+      var i = S(s);
+      a = "#" + ds(i._r, i._g, i._b, i._a);
     }
+    return "progid:DXImageTransform.Microsoft.gradient(" + n + "startColorstr=" + t + ",endColorstr=" + a + ")";
   },
-  data() {
-    return {
-      isVisible: this.visible
-    };
+  toString: function(s) {
+    var t = !!s;
+    s = s || this._format;
+    var a = !1, n = this._a < 1 && this._a >= 0, i = !t && n && (s === "hex" || s === "hex6" || s === "hex3" || s === "hex4" || s === "hex8" || s === "name");
+    return i ? s === "name" && this._a === 0 ? this.toName() : this.toRgbString() : (s === "rgb" && (a = this.toRgbString()), s === "prgb" && (a = this.toPercentageRgbString()), (s === "hex" || s === "hex6") && (a = this.toHexString()), s === "hex3" && (a = this.toHexString(!0)), s === "hex4" && (a = this.toHex8String(!0)), s === "hex8" && (a = this.toHex8String()), s === "name" && (a = this.toName()), s === "hsl" && (a = this.toHslString()), s === "hsv" && (a = this.toHsvString()), a || this.toHexString());
   },
-  computed: {
-    indentation() {
-      return this.indent && this.indent !== "" ? `ecs-collapsable-indent-${this.indent}` : this.indent;
-    },
-    headlineIndentation() {
-      return this.headlineIndent && this.headlineIndent !== "" ? `ecs-collapsable-headline-indent-${this.headlineIndent}` : this.headlineIndent;
-    },
-    removeButtonIndentation() {
-      return this.headlineIndent && this.headlineIndent !== "" ? `remove-button-indent-${this.headlineIndent}` : this.indent && this.indent !== "" ? `remove-button-indent-${this.indent}` : this.headlineIndent;
-    },
-    contentPaddingClass() {
-      return `ecs-collapsable-content-padding-${this.contentPadding}`;
-    }
+  clone: function() {
+    return S(this.toString());
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.persist && (localStorage.getItem(`collapse-${this.id}`) === null ? (this.isVisible = this.visible, localStorage.setItem(`collapse-${this.id}`, this.isVisible)) : this.isVisible = localStorage.getItem(`collapse-${this.id}`) == "true");
-    });
+  _applyModification: function(s, t) {
+    var a = s.apply(null, [this].concat([].slice.call(t)));
+    return this._r = a._r, this._g = a._g, this._b = a._b, this.setAlpha(a._a), this;
   },
-  methods: {
-    toggleCollapse() {
-      this.isVisible = !this.isVisible, this.persist && localStorage.setItem(`collapse-${this.id}`, this.isVisible), this.$emit("toggled", this.id, this.isVisible);
-    }
+  lighten: function() {
+    return this._applyModification(Do, arguments);
   },
-  watch: {
-    visible() {
-      this.isVisible = this.visible;
-    }
-  }
-}, gr = { class: "wrap" }, mr = ["aria-expanded", "aria-controls"], hr = {
-  key: 0,
-  class: "ecs-collapsable-headline-count"
-}, vr = {
-  key: 0,
-  class: "ecs-collapsable-headline-controls"
-}, _r = ["id", "aria-hidden"];
-function yr(e, s, t, a, n, i) {
-  const r = p("ecs-button"), c = p("ecs-flex-row"), d = p("ecs-focus-ring");
-  return o(), l("div", {
-    class: v(["ecs-collapsable", [
-      t.borderTop ? "ecs-collapsable-border-top" : "",
-      t.borderBottom ? "ecs-collapsable-border-bottom" : "",
-      i.indentation,
-      i.headlineIndentation
-    ]])
-  }, [
-    f("div", gr, [
-      t.removable ? (o(), y(r, {
-        key: 0,
-        onClick: s[0] || (s[0] = (g) => e.$emit("remove", t.id)),
-        type: "secondary",
-        "icon-only": "",
-        icon: "minus",
-        size: "sml",
-        class: v(["remove-button", i.removeButtonIndentation]),
-        title: t.removableTooltip,
-        "aria-label": t.removableTooltip
-      }, null, 8, ["class", "title", "aria-label"])) : u("", !0),
-      f("h3", {
-        onClick: s[1] || (s[1] = (...g) => i.toggleCollapse && i.toggleCollapse(...g)),
-        onKeydown: s[2] || (s[2] = U(G((...g) => i.toggleCollapse && i.toggleCollapse(...g), ["prevent"]), ["space"])),
-        role: "button",
-        class: v(["ecs-collapsable-headline", [t.headlineBold ? "ecs-headline-section-bold" : "ecs-headline-section", n.isVisible ? "" : "collapsed"]]),
-        tabindex: "0",
-        "aria-expanded": n.isVisible ? "true" : "false",
-        "aria-controls": `collapse-${this.id}`
-      }, [
-        b(c, { gap: 4 }, {
-          default: w(() => [
-            D(x(t.title) + " ", 1),
-            t.count ? (o(), l("span", hr, "(" + x(t.count) + ")", 1)) : u("", !0)
-          ]),
-          _: 1
-        }),
-        b(d, {
-          inset: 0,
-          radius: 0
-        }),
-        e.$slots.controls ? (o(), l("div", vr, [
-          m(e.$slots, "controls", {}, void 0, !0)
-        ])) : u("", !0)
-      ], 42, mr)
-    ]),
-    f("div", {
-      class: v([n.isVisible ? "collapse-show" : "collapse-hide", "collapse"]),
-      id: `collapse-${this.id}`,
-      "aria-hidden": n.isVisible ? "false" : "true"
-    }, [
-      f("div", {
-        class: v(["ecs-collapsable-content", i.contentPaddingClass])
-      }, [
-        m(e.$slots, "default", {}, void 0, !0)
-      ], 2)
-    ], 10, _r)
-  ], 2);
-}
-const By = /* @__PURE__ */ _(pr, [["render", yr], ["__scopeId", "data-v-4bf981c8"]]);
-const br = {
-  name: "ecs-collection-control",
-  emits: ["toggled", "collectionTooltip"],
-  components: { EcsIcon: M, EcsFocusRing: L },
-  mixins: [de],
-  props: {
-    /** Icon representing the type of selection. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
-    icon: {
-      type: String
-    },
-    /** The size of the collection control. */
-    size: {
-      type: String,
-      validator: (e) => ["md", "lg"].includes(e),
-      default: "lg"
-    },
-    /** If set to true, the control will appear expanded by default. */
-    visible: {
-      type: Boolean,
-      default: !1
-    },
-    /** The label that describes the type of selected objects. E.g. "Users: " */
-    label: {
-      type: String
-    },
-    /** Option to disable the outer borders of the control. */
-    noBorder: {
-      type: Boolean,
-      default: !1
-    },
-    /** Array of the currently selected objects. Must contain `name` and `value` for each object. */
-    collection: {
-      type: Array,
-      required: !0
-    },
-    /** Optional maximum height of the object list in pixels. If the list exceeds the maximum height, a scrollbar appears. */
-    maxHeight: {
-      type: Number,
-      default: null
-    },
-    /** Makes the control non-interactive and removes all checkboxes from the list items. */
-    nonInteractive: {
-      type: Boolean,
-      default: !1
-    }
+  brighten: function() {
+    return this._applyModification(Fo, arguments);
   },
-  data() {
-    return {
-      isVisible: this.visible,
-      expandId: ""
-    };
+  darken: function() {
+    return this._applyModification(Ro, arguments);
   },
-  computed: {
-    iconSize() {
-      return this.size === "md" ? "24px" : "30px";
-    },
-    fullTooltip() {
-      return this.collection.filter((s) => s.value).map((s) => s.name).join(", ");
-    },
-    listMaxHeight() {
-      return this.maxHeight ? `max-height: ${this.maxHeight}px` : null;
-    }
+  desaturate: function() {
+    return this._applyModification(Oo, arguments);
   },
-  methods: {
-    toggleCollapse() {
-      this.nonInteractive || (this.isVisible = !this.isVisible), this.$emit("toggled", this.id, this.isVisible);
-    },
-    toggleTooltip() {
-      this.$emit("collectionTooltip", this.fullTooltip);
-    }
+  saturate: function() {
+    return this._applyModification(Ao, arguments);
   },
-  watch: {
-    visible() {
-      this.isVisible = this.visible;
-    }
+  greyscale: function() {
+    return this._applyModification(No, arguments);
   },
-  created() {
-    this.expandId = this.generateUniqueId();
+  spin: function() {
+    return this._applyModification(Vo, arguments);
+  },
+  _applyCombination: function(s, t) {
+    return s.apply(null, [this].concat([].slice.call(t)));
+  },
+  analogous: function() {
+    return this._applyCombination(Wo, arguments);
+  },
+  complement: function() {
+    return this._applyCombination(Ho, arguments);
+  },
+  monochromatic: function() {
+    return this._applyCombination(jo, arguments);
+  },
+  splitcomplement: function() {
+    return this._applyCombination(qo, arguments);
+  },
+  // Disabled until https://github.com/bgrins/TinyColor/issues/254
+  // polyad: function (number) {
+  //   return this._applyCombination(polyad, [number]);
+  // },
+  triad: function() {
+    return this._applyCombination(us, [3]);
+  },
+  tetrad: function() {
+    return this._applyCombination(us, [4]);
   }
-}, kr = ["tabindex", "role", "aria-expanded", "aria-controls"], xr = {
-  key: 1,
-  class: "description"
-}, wr = ["title"], Sr = { key: 0 }, Cr = ["id", "aria-hidden"];
-function Br(e, s, t, a, n, i) {
-  const r = p("ecs-focus-ring"), c = p("ecs-icon");
-  return o(), l("div", {
-    class: v(["ecs-collection-control", [
-      t.noBorder ? "" : "bordered",
-      n.isVisible || t.nonInteractive ? "" : "collapsed",
-      t.size
-    ]])
-  }, [
-    f("div", {
-      onClick: s[2] || (s[2] = (...d) => i.toggleCollapse && i.toggleCollapse(...d)),
-      onKeydown: [
-        s[3] || (s[3] = U(G((...d) => i.toggleCollapse && i.toggleCollapse(...d), ["prevent"]), ["enter"])),
-        s[4] || (s[4] = U(G((...d) => i.toggleCollapse && i.toggleCollapse(...d), ["prevent"]), ["space"]))
-      ],
-      class: v(["ecs-collection-control-header", [
-        n.isVisible || t.nonInteractive ? "" : "collapsed",
-        t.nonInteractive ? "" : "interactive"
-      ]]),
-      tabindex: t.nonInteractive ? "-1" : "0",
-      role: t.nonInteractive ? !1 : "button",
-      "aria-expanded": t.nonInteractive ? "false" : n.isVisible ? "true" : "false",
-      "aria-controls": t.nonInteractive ? !1 : n.expandId
-    }, [
-      b(r),
-      t.icon ? (o(), y(c, {
-        key: 0,
-        type: t.icon,
-        color: "#858E9E",
-        size: i.iconSize
-      }, null, 8, ["type", "size"])) : u("", !0),
-      t.label ? (o(), l("div", xr, x(t.label), 1)) : u("", !0),
-      f("div", {
-        class: "collection",
-        onMouseover: s[0] || (s[0] = (...d) => i.toggleTooltip && i.toggleTooltip(...d)),
-        onMouseleave: s[1] || (s[1] = (...d) => i.toggleTooltip && i.toggleTooltip(...d)),
-        title: i.fullTooltip
-      }, [
-        (o(!0), l(Z, null, ge(t.collection, (d) => (o(), l("span", {
-          key: d.name
-        }, [
-          d.value ? (o(), l("span", Sr, x(d.name), 1)) : u("", !0)
-        ]))), 128))
-      ], 40, wr)
-    ], 42, kr),
-    f("div", {
-      class: v([n.isVisible || t.nonInteractive ? "collapse-show" : "collapse-hide", "collapse"]),
-      id: t.nonInteractive ? !1 : n.expandId,
-      "aria-hidden": n.isVisible ? "false" : "true"
-    }, [
-      f("div", {
-        class: "ecs-collection-control-list scrollbar scrollbar-sml",
-        style: B(i.listMaxHeight)
-      }, [
-        m(e.$slots, "default")
-      ], 4)
-    ], 10, Cr)
-  ], 2);
-}
-const zy = /* @__PURE__ */ _(br, [["render", Br], ["__scopeId", "data-v-5e5716bc"]]);
-const zr = {
-  name: "ecs-skeleton-loader",
-  props: {
-    /** Determines the type of skeleton shape: `single` replicates a single line of text, `multi` a multi line text, and `rect` a generic rectangle shape. */
-    type: {
-      type: String,
-      validator: (e) => ["single", "multi", "rect", "circle"].includes(e),
-      default: "single"
-    },
-    /** Only used together with the `multi` type. Determines the amount of text lines. */
-    count: {
-      type: Number,
-      default: 3
-    },
-    /** Sets the width of the `single` type in percentage. Sets the width of the `rect` type in pixels. */
-    width: {
-      type: Number,
-      default: 20
-    },
-    /** Sets the height of the `rect` and `circle` type in pixels. */
-    height: {
-      type: Number,
-      default: 20
-    },
-    /** Aligns the height and size of the single & multi types with our common line-height type scales. */
-    lineHeight: {
-      type: Number,
-      validator: (e) => [1, 2, 3, 4, 5, 6].includes(e),
-      default: 2
-    }
-  },
-  computed: {
-    rectClass() {
-      return this.type && this.type !== "" ? `skeleton-${this.type}` : this.type;
-    }
+};
+S.fromRatio = function(e, s) {
+  if (ut(e) == "object") {
+    var t = {};
+    for (var a in e)
+      e.hasOwnProperty(a) && (a === "a" ? t[a] = e[a] : t[a] = Ze(e[a]));
+    e = t;
   }
-}, Ir = (e) => (ve("data-v-75354c78"), e = e(), _e(), e), Er = {
-  key: 1,
-  class: "ecs-skeleton skeletons"
-}, $r = /* @__PURE__ */ Ir(() => /* @__PURE__ */ f("div", { class: "skeleton skeleton-single" }, null, -1)), Pr = [
-  $r
-];
-function Tr(e, s, t, a, n, i) {
-  return t.type === "rect" || t.type === "circle" ? (o(), l("div", {
-    key: 0,
-    class: v(["ecs-skeleton skeleton", i.rectClass]),
-    style: B({ width: t.width + "px", height: t.height + "px" })
-  }, null, 6)) : t.type === "multi" ? (o(), l("div", Er, [
-    (o(!0), l(Z, null, ge(parseInt(t.count), (r) => (o(), l("div", {
-      key: r,
-      class: v(["skeleton-wrap", "skeleton-line-height-" + t.lineHeight])
-    }, Pr, 2))), 128))
-  ])) : (o(), l("div", {
-    key: 2,
-    class: v(["ecs-skeleton skeleton-wrap", "skeleton-line-height-" + t.lineHeight])
-  }, [
-    f("div", {
-      class: "skeleton skeleton-single",
-      style: B({ width: t.width + "%" })
-    }, null, 4)
-  ], 2));
+  return S(e, s);
+};
+function $o(e) {
+  var s = {
+    r: 0,
+    g: 0,
+    b: 0
+  }, t = 1, a = null, n = null, i = null, r = !1, c = !1;
+  return typeof e == "string" && (e = Xo(e)), ut(e) == "object" && (Ie(e.r) && Ie(e.g) && Ie(e.b) ? (s = Po(e.r, e.g, e.b), r = !0, c = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : Ie(e.h) && Ie(e.s) && Ie(e.v) ? (a = Ze(e.s), n = Ze(e.v), s = Mo(e.h, a, n), r = !0, c = "hsv") : Ie(e.h) && Ie(e.s) && Ie(e.l) && (a = Ze(e.s), i = Ze(e.l), s = To(e.h, a, i), r = !0, c = "hsl"), e.hasOwnProperty("a") && (t = e.a)), t = As(t), {
+    ok: r,
+    format: e.format || c,
+    r: Math.min(255, Math.max(s.r, 0)),
+    g: Math.min(255, Math.max(s.g, 0)),
+    b: Math.min(255, Math.max(s.b, 0)),
+    a: t
+  };
 }
-const Ce = /* @__PURE__ */ _(zr, [["render", Tr], ["__scopeId", "data-v-75354c78"]]);
-const Mr = {
-  name: "ecs-formatted",
-  components: { EcsSkeletonLoader: Ce },
-  mixins: [de],
-  props: {
-    /** Sets the general font size of the formatted text component to small. */
-    small: {
-      type: Boolean,
-      default: !1
-    },
-    /** Turns the formatted text component into a skeleton loader. */
-    loading: {
-      type: Boolean,
-      default: !1
-    },
-    /** Used to customize the line count of the skeleton loader. */
-    skeletonCount: {
-      type: Number,
-      default: 4
+function Po(e, s, t) {
+  return {
+    r: H(e, 255) * 255,
+    g: H(s, 255) * 255,
+    b: H(t, 255) * 255
+  };
+}
+function rs(e, s, t) {
+  e = H(e, 255), s = H(s, 255), t = H(t, 255);
+  var a = Math.max(e, s, t), n = Math.min(e, s, t), i, r, c = (a + n) / 2;
+  if (a == n)
+    i = r = 0;
+  else {
+    var d = a - n;
+    switch (r = c > 0.5 ? d / (2 - a - n) : d / (a + n), a) {
+      case e:
+        i = (s - t) / d + (s < t ? 6 : 0);
+        break;
+      case s:
+        i = (t - e) / d + 2;
+        break;
+      case t:
+        i = (e - s) / d + 4;
+        break;
     }
-  },
-  created() {
-    this.formattedId = this.generateUniqueId();
-  },
-  mounted() {
-    this.$el.querySelectorAll(`#${this.formattedId} a`).forEach((s) => {
-      const t = s.getAttribute("href");
-      s.setAttribute("title", `Open ${t}`);
-    });
+    i /= 6;
   }
-}, Lr = ["id"];
-function Or(e, s, t, a, n, i) {
-  const r = p("ecs-skeleton-loader");
-  return o(), l("div", {
-    class: v(["ecs-formatted", [t.small ? "ecs-formatted-sml" : ""]]),
-    id: e.formattedId
-  }, [
-    t.loading ? (o(), y(r, {
-      key: 1,
-      type: "multi",
-      "line-height": t.small ? 1 : 2,
-      count: t.skeletonCount
-    }, null, 8, ["line-height", "count"])) : m(e.$slots, "default", {
-      key: 0,
-      ref: "slot"
-    })
-  ], 10, Lr);
+  return {
+    h: i,
+    s: r,
+    l: c
+  };
 }
-const Ds = /* @__PURE__ */ _(Mr, [["render", Or]]);
-const Ar = {
-  name: "ecs-comment",
-  emits: ["edit", "delete"],
-  components: { EcsAvatar: Mi, EcsButton: Se, EcsFormatted: Ds, EcsSkeletonLoader: Ce },
-  props: {
-    /** Name of the user that is the comment author. */
-    userName: {
-      type: String,
-      required: !0
-    },
-    /** Avatar image of the user that is the comment author. */
-    userImage: {
-      type: String,
-      default: null
-    },
-    /** Determines if controls to edit or delete the comment should be available. */
-    canEdit: {
-      type: Boolean,
-      default: !1
-    },
-    /** Shows the whole comment in skeleton loading state. */
-    loading: {
-      type: Boolean,
-      default: !1
+function To(e, s, t) {
+  var a, n, i;
+  e = H(e, 360), s = H(s, 100), t = H(t, 100);
+  function r(g, h, k) {
+    return k < 0 && (k += 1), k > 1 && (k -= 1), k < 1 / 6 ? g + (h - g) * 6 * k : k < 1 / 2 ? h : k < 2 / 3 ? g + (h - g) * (2 / 3 - k) * 6 : g;
+  }
+  if (s === 0)
+    a = n = i = t;
+  else {
+    var c = t < 0.5 ? t * (1 + s) : t + s - t * s, d = 2 * t - c;
+    a = r(d, c, e + 1 / 3), n = r(d, c, e), i = r(d, c, e - 1 / 3);
+  }
+  return {
+    r: a * 255,
+    g: n * 255,
+    b: i * 255
+  };
+}
+function ls(e, s, t) {
+  e = H(e, 255), s = H(s, 255), t = H(t, 255);
+  var a = Math.max(e, s, t), n = Math.min(e, s, t), i, r, c = a, d = a - n;
+  if (r = a === 0 ? 0 : d / a, a == n)
+    i = 0;
+  else {
+    switch (a) {
+      case e:
+        i = (s - t) / d + (s < t ? 6 : 0);
+        break;
+      case s:
+        i = (t - e) / d + 2;
+        break;
+      case t:
+        i = (e - s) / d + 4;
+        break;
     }
+    i /= 6;
   }
-}, Nr = ["aria-busy"], Dr = { class: "ecs-comment-header" }, Fr = { class: "ecs-comment-autor" }, Rr = {
-  key: 2,
-  class: "ecs-comment-meta"
-}, Vr = { class: "ecs-comment-meta-name" }, Hr = { class: "ecs-comment-meta-time" }, qr = {
-  key: 3,
-  class: "ecs-comment-meta loading"
-}, Wr = {
-  key: 0,
-  class: "ecs-comment-actions"
-}, jr = {
-  key: 2,
-  class: "ecs-comment-edit"
+  return {
+    h: i,
+    s: r,
+    v: c
+  };
+}
+function Mo(e, s, t) {
+  e = H(e, 360) * 6, s = H(s, 100), t = H(t, 100);
+  var a = Math.floor(e), n = e - a, i = t * (1 - s), r = t * (1 - n * s), c = t * (1 - (1 - n) * s), d = a % 6, g = [t, r, i, i, c, t][d], h = [c, t, t, r, i, i][d], k = [i, i, c, t, t, r][d];
+  return {
+    r: g * 255,
+    g: h * 255,
+    b: k * 255
+  };
+}
+function cs(e, s, t, a) {
+  var n = [pe(Math.round(e).toString(16)), pe(Math.round(s).toString(16)), pe(Math.round(t).toString(16))];
+  return a && n[0].charAt(0) == n[0].charAt(1) && n[1].charAt(0) == n[1].charAt(1) && n[2].charAt(0) == n[2].charAt(1) ? n[0].charAt(0) + n[1].charAt(0) + n[2].charAt(0) : n.join("");
+}
+function Lo(e, s, t, a, n) {
+  var i = [pe(Math.round(e).toString(16)), pe(Math.round(s).toString(16)), pe(Math.round(t).toString(16)), pe(Ns(a))];
+  return n && i[0].charAt(0) == i[0].charAt(1) && i[1].charAt(0) == i[1].charAt(1) && i[2].charAt(0) == i[2].charAt(1) && i[3].charAt(0) == i[3].charAt(1) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) + i[3].charAt(0) : i.join("");
+}
+function ds(e, s, t, a) {
+  var n = [pe(Ns(a)), pe(Math.round(e).toString(16)), pe(Math.round(s).toString(16)), pe(Math.round(t).toString(16))];
+  return n.join("");
+}
+S.equals = function(e, s) {
+  return !e || !s ? !1 : S(e).toRgbString() == S(s).toRgbString();
 };
-function Gr(e, s, t, a, n, i) {
-  const r = p("ecs-skeleton-loader"), c = p("ecs-avatar"), d = p("ecs-button"), g = p("ecs-formatted");
-  return o(), l("div", {
-    class: "ecs-comment",
-    role: "comment",
-    "aria-busy": t.loading || null
-  }, [
-    f("div", Dr, [
-      f("div", Fr, [
-        t.loading ? (o(), y(r, {
-          key: 0,
-          type: "circle",
-          width: 32,
-          height: 32
-        })) : (o(), y(c, {
-          key: 1,
-          name: t.userName,
-          image: t.userImage,
-          size: 32,
-          rounded: ""
-        }, null, 8, ["name", "image"])),
-        t.loading ? (o(), l("div", qr, [
-          b(r, {
-            type: "single",
-            "line-height": 3,
-            width: 50
-          }),
-          b(r, {
-            type: "single",
-            "line-height": 2,
-            width: 60
-          })
-        ])) : (o(), l("div", Rr, [
-          f("span", Vr, x(t.userName), 1),
-          f("span", Hr, [
-            m(e.$slots, "commentdate", {}, void 0, !0)
-          ])
-        ]))
-      ]),
-      t.canEdit ? (o(), l("div", Wr, [
-        b(d, {
-          onClick: s[0] || (s[0] = (h) => e.$emit("edit", h)),
-          type: "secondary",
-          size: "sml",
-          icon: "edit",
-          "icon-only": "",
-          title: "Edit Comment"
-        }),
-        b(d, {
-          onClick: s[1] || (s[1] = (h) => e.$emit("delete", h)),
-          type: "danger",
-          size: "sml",
-          icon: "delete",
-          "icon-only": "",
-          title: "Delete Comment"
-        })
-      ])) : u("", !0)
-    ]),
-    !e.$slots.editform && !t.loading ? (o(), y(g, {
-      key: 0,
-      class: "ecs-comment-body"
-    }, {
-      default: w(() => [
-        m(e.$slots, "default", {}, void 0, !0)
-      ]),
-      _: 3
-    })) : t.loading ? (o(), y(r, {
-      key: 1,
-      type: "multi",
-      count: 2,
-      class: "ecs-comment-body"
-    })) : (o(), l("div", jr, [
-      m(e.$slots, "editform", {}, void 0, !0)
-    ]))
-  ], 8, Nr);
+S.random = function() {
+  return S.fromRatio({
+    r: Math.random(),
+    g: Math.random(),
+    b: Math.random()
+  });
+};
+function Oo(e, s) {
+  s = s === 0 ? 0 : s || 10;
+  var t = S(e).toHsl();
+  return t.s -= s / 100, t.s = mt(t.s), S(t);
 }
-const Iy = /* @__PURE__ */ _(Ar, [["render", Gr], ["__scopeId", "data-v-cf696f66"]]);
-const Ur = {}, Kr = { class: "ecs-comment-list" };
-function Yr(e, s) {
-  return o(), l("div", Kr, [
-    m(e.$slots, "default")
-  ]);
+function Ao(e, s) {
+  s = s === 0 ? 0 : s || 10;
+  var t = S(e).toHsl();
+  return t.s += s / 100, t.s = mt(t.s), S(t);
 }
-const Ey = /* @__PURE__ */ _(Ur, [["render", Yr]]);
-function ut(e) {
-  "@babel/helpers - typeof";
-  return ut = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(s) {
-    return typeof s;
-  } : function(s) {
-    return s && typeof Symbol == "function" && s.constructor === Symbol && s !== Symbol.prototype ? "symbol" : typeof s;
-  }, ut(e);
+function No(e) {
+  return S(e).desaturate(100);
 }
-var Xr = /^\s+/, Zr = /\s+$/;
-function S(e, s) {
-  if (e = e || "", s = s || {}, e instanceof S)
-    return e;
-  if (!(this instanceof S))
-    return new S(e, s);
-  var t = Jr(e);
-  this._originalInput = e, this._r = t.r, this._g = t.g, this._b = t.b, this._a = t.a, this._roundA = Math.round(100 * this._a) / 100, this._format = s.format || t.format, this._gradientType = s.gradientType, this._r < 1 && (this._r = Math.round(this._r)), this._g < 1 && (this._g = Math.round(this._g)), this._b < 1 && (this._b = Math.round(this._b)), this._ok = t.ok;
+function Do(e, s) {
+  s = s === 0 ? 0 : s || 10;
+  var t = S(e).toHsl();
+  return t.l += s / 100, t.l = mt(t.l), S(t);
 }
-S.prototype = {
-  isDark: function() {
-    return this.getBrightness() < 128;
-  },
-  isLight: function() {
-    return !this.isDark();
-  },
-  isValid: function() {
-    return this._ok;
-  },
-  getOriginalInput: function() {
-    return this._originalInput;
-  },
-  getFormat: function() {
-    return this._format;
-  },
-  getAlpha: function() {
-    return this._a;
-  },
-  getBrightness: function() {
-    var s = this.toRgb();
-    return (s.r * 299 + s.g * 587 + s.b * 114) / 1e3;
-  },
-  getLuminance: function() {
-    var s = this.toRgb(), t, a, n, i, r, c;
-    return t = s.r / 255, a = s.g / 255, n = s.b / 255, t <= 0.03928 ? i = t / 12.92 : i = Math.pow((t + 0.055) / 1.055, 2.4), a <= 0.03928 ? r = a / 12.92 : r = Math.pow((a + 0.055) / 1.055, 2.4), n <= 0.03928 ? c = n / 12.92 : c = Math.pow((n + 0.055) / 1.055, 2.4), 0.2126 * i + 0.7152 * r + 0.0722 * c;
-  },
-  setAlpha: function(s) {
-    return this._a = Fs(s), this._roundA = Math.round(100 * this._a) / 100, this;
-  },
-  toHsv: function() {
-    var s = ls(this._r, this._g, this._b);
-    return {
-      h: s.h * 360,
-      s: s.s,
-      v: s.v,
-      a: this._a
-    };
-  },
-  toHsvString: function() {
-    var s = ls(this._r, this._g, this._b), t = Math.round(s.h * 360), a = Math.round(s.s * 100), n = Math.round(s.v * 100);
-    return this._a == 1 ? "hsv(" + t + ", " + a + "%, " + n + "%)" : "hsva(" + t + ", " + a + "%, " + n + "%, " + this._roundA + ")";
-  },
-  toHsl: function() {
-    var s = rs(this._r, this._g, this._b);
-    return {
-      h: s.h * 360,
-      s: s.s,
-      l: s.l,
-      a: this._a
-    };
-  },
-  toHslString: function() {
-    var s = rs(this._r, this._g, this._b), t = Math.round(s.h * 360), a = Math.round(s.s * 100), n = Math.round(s.l * 100);
-    return this._a == 1 ? "hsl(" + t + ", " + a + "%, " + n + "%)" : "hsla(" + t + ", " + a + "%, " + n + "%, " + this._roundA + ")";
-  },
-  toHex: function(s) {
-    return cs(this._r, this._g, this._b, s);
-  },
-  toHexString: function(s) {
-    return "#" + this.toHex(s);
-  },
-  toHex8: function(s) {
-    return sl(this._r, this._g, this._b, this._a, s);
-  },
-  toHex8String: function(s) {
-    return "#" + this.toHex8(s);
-  },
-  toRgb: function() {
-    return {
-      r: Math.round(this._r),
-      g: Math.round(this._g),
-      b: Math.round(this._b),
-      a: this._a
-    };
-  },
-  toRgbString: function() {
-    return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
-  },
-  toPercentageRgb: function() {
-    return {
-      r: Math.round(H(this._r, 255) * 100) + "%",
-      g: Math.round(H(this._g, 255) * 100) + "%",
-      b: Math.round(H(this._b, 255) * 100) + "%",
-      a: this._a
-    };
-  },
-  toPercentageRgbString: function() {
-    return this._a == 1 ? "rgb(" + Math.round(H(this._r, 255) * 100) + "%, " + Math.round(H(this._g, 255) * 100) + "%, " + Math.round(H(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(H(this._r, 255) * 100) + "%, " + Math.round(H(this._g, 255) * 100) + "%, " + Math.round(H(this._b, 255) * 100) + "%, " + this._roundA + ")";
-  },
-  toName: function() {
-    return this._a === 0 ? "transparent" : this._a < 1 ? !1 : gl[cs(this._r, this._g, this._b, !0)] || !1;
-  },
-  toFilter: function(s) {
-    var t = "#" + ds(this._r, this._g, this._b, this._a), a = t, n = this._gradientType ? "GradientType = 1, " : "";
-    if (s) {
-      var i = S(s);
-      a = "#" + ds(i._r, i._g, i._b, i._a);
-    }
-    return "progid:DXImageTransform.Microsoft.gradient(" + n + "startColorstr=" + t + ",endColorstr=" + a + ")";
-  },
-  toString: function(s) {
-    var t = !!s;
-    s = s || this._format;
-    var a = !1, n = this._a < 1 && this._a >= 0, i = !t && n && (s === "hex" || s === "hex6" || s === "hex3" || s === "hex4" || s === "hex8" || s === "name");
-    return i ? s === "name" && this._a === 0 ? this.toName() : this.toRgbString() : (s === "rgb" && (a = this.toRgbString()), s === "prgb" && (a = this.toPercentageRgbString()), (s === "hex" || s === "hex6") && (a = this.toHexString()), s === "hex3" && (a = this.toHexString(!0)), s === "hex4" && (a = this.toHex8String(!0)), s === "hex8" && (a = this.toHex8String()), s === "name" && (a = this.toName()), s === "hsl" && (a = this.toHslString()), s === "hsv" && (a = this.toHsvString()), a || this.toHexString());
-  },
-  clone: function() {
-    return S(this.toString());
-  },
-  _applyModification: function(s, t) {
-    var a = s.apply(null, [this].concat([].slice.call(t)));
-    return this._r = a._r, this._g = a._g, this._b = a._b, this.setAlpha(a._a), this;
-  },
-  lighten: function() {
-    return this._applyModification(ol, arguments);
-  },
-  brighten: function() {
-    return this._applyModification(rl, arguments);
-  },
-  darken: function() {
-    return this._applyModification(ll, arguments);
-  },
-  desaturate: function() {
-    return this._applyModification(il, arguments);
-  },
-  saturate: function() {
-    return this._applyModification(nl, arguments);
-  },
-  greyscale: function() {
-    return this._applyModification(al, arguments);
-  },
-  spin: function() {
-    return this._applyModification(cl, arguments);
-  },
-  _applyCombination: function(s, t) {
-    return s.apply(null, [this].concat([].slice.call(t)));
-  },
-  analogous: function() {
-    return this._applyCombination(fl, arguments);
-  },
-  complement: function() {
-    return this._applyCombination(dl, arguments);
-  },
-  monochromatic: function() {
-    return this._applyCombination(pl, arguments);
-  },
-  splitcomplement: function() {
-    return this._applyCombination(ul, arguments);
-  },
-  // Disabled until https://github.com/bgrins/TinyColor/issues/254
-  // polyad: function (number) {
-  //   return this._applyCombination(polyad, [number]);
-  // },
-  triad: function() {
-    return this._applyCombination(us, [3]);
-  },
-  tetrad: function() {
-    return this._applyCombination(us, [4]);
-  }
-};
-S.fromRatio = function(e, s) {
-  if (ut(e) == "object") {
-    var t = {};
-    for (var a in e)
-      e.hasOwnProperty(a) && (a === "a" ? t[a] = e[a] : t[a] = Ze(e[a]));
-    e = t;
-  }
-  return S(e, s);
-};
-function Jr(e) {
-  var s = {
-    r: 0,
-    g: 0,
-    b: 0
-  }, t = 1, a = null, n = null, i = null, r = !1, c = !1;
-  return typeof e == "string" && (e = _l(e)), ut(e) == "object" && (Ie(e.r) && Ie(e.g) && Ie(e.b) ? (s = Qr(e.r, e.g, e.b), r = !0, c = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : Ie(e.h) && Ie(e.s) && Ie(e.v) ? (a = Ze(e.s), n = Ze(e.v), s = tl(e.h, a, n), r = !0, c = "hsv") : Ie(e.h) && Ie(e.s) && Ie(e.l) && (a = Ze(e.s), i = Ze(e.l), s = el(e.h, a, i), r = !0, c = "hsl"), e.hasOwnProperty("a") && (t = e.a)), t = Fs(t), {
-    ok: r,
-    format: e.format || c,
-    r: Math.min(255, Math.max(s.r, 0)),
-    g: Math.min(255, Math.max(s.g, 0)),
-    b: Math.min(255, Math.max(s.b, 0)),
-    a: t
-  };
+function Fo(e, s) {
+  s = s === 0 ? 0 : s || 10;
+  var t = S(e).toRgb();
+  return t.r = Math.max(0, Math.min(255, t.r - Math.round(255 * -(s / 100)))), t.g = Math.max(0, Math.min(255, t.g - Math.round(255 * -(s / 100)))), t.b = Math.max(0, Math.min(255, t.b - Math.round(255 * -(s / 100)))), S(t);
 }
-function Qr(e, s, t) {
-  return {
-    r: H(e, 255) * 255,
-    g: H(s, 255) * 255,
-    b: H(t, 255) * 255
-  };
+function Ro(e, s) {
+  s = s === 0 ? 0 : s || 10;
+  var t = S(e).toHsl();
+  return t.l -= s / 100, t.l = mt(t.l), S(t);
 }
-function rs(e, s, t) {
-  e = H(e, 255), s = H(s, 255), t = H(t, 255);
-  var a = Math.max(e, s, t), n = Math.min(e, s, t), i, r, c = (a + n) / 2;
-  if (a == n)
-    i = r = 0;
-  else {
-    var d = a - n;
-    switch (r = c > 0.5 ? d / (2 - a - n) : d / (a + n), a) {
-      case e:
-        i = (s - t) / d + (s < t ? 6 : 0);
-        break;
-      case s:
-        i = (t - e) / d + 2;
-        break;
-      case t:
-        i = (e - s) / d + 4;
-        break;
-    }
-    i /= 6;
-  }
-  return {
-    h: i,
-    s: r,
-    l: c
-  };
-}
-function el(e, s, t) {
-  var a, n, i;
-  e = H(e, 360), s = H(s, 100), t = H(t, 100);
-  function r(g, h, k) {
-    return k < 0 && (k += 1), k > 1 && (k -= 1), k < 1 / 6 ? g + (h - g) * 6 * k : k < 1 / 2 ? h : k < 2 / 3 ? g + (h - g) * (2 / 3 - k) * 6 : g;
-  }
-  if (s === 0)
-    a = n = i = t;
-  else {
-    var c = t < 0.5 ? t * (1 + s) : t + s - t * s, d = 2 * t - c;
-    a = r(d, c, e + 1 / 3), n = r(d, c, e), i = r(d, c, e - 1 / 3);
-  }
-  return {
-    r: a * 255,
-    g: n * 255,
-    b: i * 255
-  };
-}
-function ls(e, s, t) {
-  e = H(e, 255), s = H(s, 255), t = H(t, 255);
-  var a = Math.max(e, s, t), n = Math.min(e, s, t), i, r, c = a, d = a - n;
-  if (r = a === 0 ? 0 : d / a, a == n)
-    i = 0;
-  else {
-    switch (a) {
-      case e:
-        i = (s - t) / d + (s < t ? 6 : 0);
-        break;
-      case s:
-        i = (t - e) / d + 2;
-        break;
-      case t:
-        i = (e - s) / d + 4;
-        break;
-    }
-    i /= 6;
-  }
-  return {
-    h: i,
-    s: r,
-    v: c
-  };
-}
-function tl(e, s, t) {
-  e = H(e, 360) * 6, s = H(s, 100), t = H(t, 100);
-  var a = Math.floor(e), n = e - a, i = t * (1 - s), r = t * (1 - n * s), c = t * (1 - (1 - n) * s), d = a % 6, g = [t, r, i, i, c, t][d], h = [c, t, t, r, i, i][d], k = [i, i, c, t, t, r][d];
-  return {
-    r: g * 255,
-    g: h * 255,
-    b: k * 255
-  };
-}
-function cs(e, s, t, a) {
-  var n = [pe(Math.round(e).toString(16)), pe(Math.round(s).toString(16)), pe(Math.round(t).toString(16))];
-  return a && n[0].charAt(0) == n[0].charAt(1) && n[1].charAt(0) == n[1].charAt(1) && n[2].charAt(0) == n[2].charAt(1) ? n[0].charAt(0) + n[1].charAt(0) + n[2].charAt(0) : n.join("");
-}
-function sl(e, s, t, a, n) {
-  var i = [pe(Math.round(e).toString(16)), pe(Math.round(s).toString(16)), pe(Math.round(t).toString(16)), pe(Rs(a))];
-  return n && i[0].charAt(0) == i[0].charAt(1) && i[1].charAt(0) == i[1].charAt(1) && i[2].charAt(0) == i[2].charAt(1) && i[3].charAt(0) == i[3].charAt(1) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) + i[3].charAt(0) : i.join("");
-}
-function ds(e, s, t, a) {
-  var n = [pe(Rs(a)), pe(Math.round(e).toString(16)), pe(Math.round(s).toString(16)), pe(Math.round(t).toString(16))];
-  return n.join("");
-}
-S.equals = function(e, s) {
-  return !e || !s ? !1 : S(e).toRgbString() == S(s).toRgbString();
-};
-S.random = function() {
-  return S.fromRatio({
-    r: Math.random(),
-    g: Math.random(),
-    b: Math.random()
-  });
-};
-function il(e, s) {
-  s = s === 0 ? 0 : s || 10;
-  var t = S(e).toHsl();
-  return t.s -= s / 100, t.s = mt(t.s), S(t);
-}
-function nl(e, s) {
-  s = s === 0 ? 0 : s || 10;
-  var t = S(e).toHsl();
-  return t.s += s / 100, t.s = mt(t.s), S(t);
-}
-function al(e) {
-  return S(e).desaturate(100);
-}
-function ol(e, s) {
-  s = s === 0 ? 0 : s || 10;
-  var t = S(e).toHsl();
-  return t.l += s / 100, t.l = mt(t.l), S(t);
-}
-function rl(e, s) {
-  s = s === 0 ? 0 : s || 10;
-  var t = S(e).toRgb();
-  return t.r = Math.max(0, Math.min(255, t.r - Math.round(255 * -(s / 100)))), t.g = Math.max(0, Math.min(255, t.g - Math.round(255 * -(s / 100)))), t.b = Math.max(0, Math.min(255, t.b - Math.round(255 * -(s / 100)))), S(t);
-}
-function ll(e, s) {
-  s = s === 0 ? 0 : s || 10;
-  var t = S(e).toHsl();
-  return t.l -= s / 100, t.l = mt(t.l), S(t);
-}
-function cl(e, s) {
+function Vo(e, s) {
   var t = S(e).toHsl(), a = (t.h + s) % 360;
   return t.h = a < 0 ? 360 + a : a, S(t);
 }
-function dl(e) {
+function Ho(e) {
   var s = S(e).toHsl();
   return s.h = (s.h + 180) % 360, S(s);
 }
@@ -5225,7 +3974,7 @@ function us(e, s) {
     }));
   return a;
 }
-function ul(e) {
+function qo(e) {
   var s = S(e).toHsl(), t = s.h;
   return [S(e), S({
     h: (t + 72) % 360,
@@ -5237,14 +3986,14 @@ function ul(e) {
     l: s.l
   })];
 }
-function fl(e, s, t) {
+function Wo(e, s, t) {
   s = s || 6, t = t || 30;
   var a = S(e).toHsl(), n = 360 / t, i = [S(e)];
   for (a.h = (a.h - (n * s >> 1) + 720) % 360; --s; )
     a.h = (a.h + n) % 360, i.push(S(a));
   return i;
 }
-function pl(e, s) {
+function jo(e, s) {
   s = s || 6;
   for (var t = S(e).toHsv(), a = t.h, n = t.s, i = t.v, r = [], c = 1 / s; s--; )
     r.push(S({
@@ -5270,7 +4019,7 @@ S.readability = function(e, s) {
 };
 S.isReadable = function(e, s, t) {
   var a = S.readability(e, s), n, i;
-  switch (i = !1, n = yl(t), n.level + n.size) {
+  switch (i = !1, n = Zo(t), n.level + n.size) {
     case "AAsmall":
     case "AAAlarge":
       i = a >= 4.5;
@@ -5444,19 +4193,19 @@ var $t = S.names = {
   whitesmoke: "f5f5f5",
   yellow: "ff0",
   yellowgreen: "9acd32"
-}, gl = S.hexNames = ml($t);
-function ml(e) {
+}, Go = S.hexNames = Uo($t);
+function Uo(e) {
   var s = {};
   for (var t in e)
     e.hasOwnProperty(t) && (s[e[t]] = t);
   return s;
 }
-function Fs(e) {
+function As(e) {
   return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
 }
 function H(e, s) {
-  hl(e) && (e = "100%");
-  var t = vl(e);
+  Ko(e) && (e = "100%");
+  var t = Yo(e);
   return e = Math.min(s, Math.max(0, parseFloat(e))), t && (e = parseInt(e * s, 10) / 100), Math.abs(e - s) < 1e-6 ? 1 : e % s / parseFloat(s);
 }
 function mt(e) {
@@ -5465,10 +4214,10 @@ function mt(e) {
 function se(e) {
   return parseInt(e, 16);
 }
-function hl(e) {
+function Ko(e) {
   return typeof e == "string" && e.indexOf(".") != -1 && parseFloat(e) === 1;
 }
-function vl(e) {
+function Yo(e) {
   return typeof e == "string" && e.indexOf("%") != -1;
 }
 function pe(e) {
@@ -5477,7 +4226,7 @@ function pe(e) {
 function Ze(e) {
   return e <= 1 && (e = e * 100 + "%"), e;
 }
-function Rs(e) {
+function Ns(e) {
   return Math.round(parseFloat(e) * 255).toString(16);
 }
 function fs(e) {
@@ -5502,8 +4251,8 @@ var fe = function() {
 function Ie(e) {
   return !!fe.CSS_UNIT.exec(e);
 }
-function _l(e) {
-  e = e.replace(Xr, "").replace(Zr, "").toLowerCase();
+function Xo(e) {
+  e = e.replace(Io, "").replace(Eo, "").toLowerCase();
   var s = !1;
   if ($t[e])
     e = $t[e], s = !0;
@@ -5567,7 +4316,7 @@ function _l(e) {
     format: s ? "name" : "hex"
   } : !1;
 }
-function yl(e) {
+function Zo(e) {
   var s, t;
   return e = e || {
     level: "AA",
@@ -5577,6 +4326,1264 @@ function yl(e) {
     size: t
   };
 }
+const Jo = {
+  name: "ecs-button-context",
+  emits: ["click"],
+  components: {
+    EcsIcon: M,
+    EcsFocusRing: L
+  },
+  props: {
+    /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+    icon: {
+      type: String,
+      default: null
+    },
+    /** Turns the button into a loading state. */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /** Context buttons can be used to set a specific text or annotation color on the selection. Pass any color value (HEX, RGBA). */
+    selectedColor: {
+      type: String,
+      default: null
+    },
+    /** Aria-label is needed for iconOnly buttons to improve accessibility for screenreaders. */
+    ariaLabel: {
+      type: String
+    }
+  },
+  computed: {
+    iconType() {
+      return this.loading ? "loading" : (this.icon && this.icon, this.icon);
+    },
+    iconOnly() {
+      return this.icon && !this.$slots.default;
+    },
+    colorIsDark() {
+      return this.selectedColor && this.selectedColor !== "" ? S(this.selectedColor).isDark() : null;
+    },
+    selectedColorBackground() {
+      if (this.selectedColor && this.selectedColor !== "")
+        return `background-color:${this.selectedColor};`;
+    },
+    selectedColorText() {
+      if (this.selectedColor && this.selectedColor !== "")
+        return this.colorIsDark ? {
+          color: S(this.selectedColor).lighten(65).toRgbString()
+        } : {
+          color: S(this.selectedColor).lighten(10).toRgbString()
+        };
+    }
+  },
+  mounted() {
+    this.iconOnly && (!this.ariaLabel || this.ariaLabel.trim());
+  }
+}, Qo = ["aria-label", "aria-busy"];
+function er(e, s, t, a, n, i) {
+  const r = p("ecs-icon"), c = p("ecs-focus-ring");
+  return o(), l("button", {
+    class: v(["ecs-context-button", [t.loading ? "loading" : "", i.iconOnly ? "ecs-context-button-icon-only" : ""]]),
+    "aria-label": t.ariaLabel,
+    "aria-busy": t.loading || null,
+    style: B(i.selectedColorText),
+    onClick: s[0] || (s[0] = (d) => e.$emit("click", d))
+  }, [
+    t.icon || t.loading ? (o(), y(r, {
+      key: 0,
+      type: i.iconType,
+      size: "20"
+    }, null, 8, ["type"])) : u("", !0),
+    t.selectedColor ? (o(), l("div", {
+      key: 1,
+      class: "ecs-context-button-color",
+      style: B(i.selectedColorBackground)
+    }, null, 4)) : u("", !0),
+    m(e.$slots, "default", {}, void 0, !0),
+    b(c)
+  ], 14, Qo);
+}
+const yy = /* @__PURE__ */ _(Jo, [["render", er], ["__scopeId", "data-v-3a382207"]]);
+const tr = {
+  name: "ecs-context-button-group"
+}, sr = { class: "ecs-context-button-group" };
+function ir(e, s, t, a, n, i) {
+  return o(), l("div", sr, [
+    m(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const by = /* @__PURE__ */ _(tr, [["render", ir], ["__scopeId", "data-v-94a53b69"]]);
+const nr = {
+  name: "ecs-button-dialog",
+  emits: ["click"],
+  components: {
+    EcsIcon: M,
+    EcsFocusRing: L
+  },
+  props: {
+    /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+    icon: {
+      type: String,
+      default: null
+    },
+    /** Defines the type and function of the button. If not set, the button will be neutral (used for Cancel actions). */
+    type: {
+      type: String,
+      validator: (e) => ["danger", "confirm", "cancel"].includes(e),
+      default: "cancel"
+    },
+    /** Turns the button into a loading state. */
+    loading: Boolean
+  },
+  computed: {
+    typeClass() {
+      return this.type && this.type !== "" ? `ecs-dialog-footer-button-${this.type}` : this.type;
+    },
+    iconType() {
+      return this.loading ? "loading" : this.icon;
+    }
+  }
+}, ar = ["aria-busy"];
+function or(e, s, t, a, n, i) {
+  const r = p("ecs-icon"), c = p("ecs-focus-ring");
+  return o(), l("button", {
+    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
+    class: v([[i.typeClass, t.loading ? "loading" : ""], "ecs-dialog-footer-button"]),
+    "aria-busy": t.loading || null
+  }, [
+    t.icon || t.loading ? (o(), y(r, {
+      key: 0,
+      type: i.iconType
+    }, null, 8, ["type"])) : u("", !0),
+    m(e.$slots, "default", {}, void 0, !0),
+    b(c, {
+      radius: 12,
+      danger: t.type == "danger"
+    }, null, 8, ["danger"])
+  ], 10, ar);
+}
+const ky = /* @__PURE__ */ _(nr, [["render", or], ["__scopeId", "data-v-fe031b71"]]);
+const rr = {
+  name: "ecs-button-more",
+  emits: ["click"],
+  components: {
+    EcsIcon: M,
+    EcsFocusRing: L
+  },
+  props: {
+    /** Displays the button slightly highlighted. Should be used when the state the button triggers is currently visible. */
+    active: Boolean,
+    /** Defines the type of the button: `dropdown` shows a simple dropdown button, `ellipsis` shows a tiny (...) button, and `expand` is supposed to be used at the end of expandable lists and tables. */
+    type: {
+      type: String,
+      validator: (e) => ["dropdown", "dropdown-round", "ellipsis", "expand"].includes(e),
+      default: "dropdown"
+    },
+    /** Provide a meaningful label for the button to improve accessibility for screenreaders. */
+    ariaLabel: {
+      type: String
+    },
+    /** Disables the button and prevent pointer events. */
+    disabled: {
+      type: Boolean
+    }
+  },
+  computed: {
+    typeClass() {
+      return this.type && this.type !== "" ? `ecs-button-more-${this.type}` : this.type;
+    }
+  },
+  mounted() {
+    this.$slots.default === void 0 && (!this.ariaLabel || this.ariaLabel.trim());
+  }
+}, lr = ["aria-label", "aria-disabled", "aria-expanded", "aria-haspopup", "disabled"];
+function cr(e, s, t, a, n, i) {
+  const r = p("ecs-icon"), c = p("ecs-focus-ring");
+  return o(), l("button", {
+    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
+    "aria-label": t.ariaLabel,
+    "aria-disabled": t.disabled || null,
+    "aria-expanded": t.active || null,
+    "aria-haspopup": t.type == "dropdown" || null,
+    disabled: t.disabled || null,
+    class: v([
+      t.active ? "active" : "",
+      i.typeClass
+    ])
+  }, [
+    t.type == "ellipsis" ? (o(), y(r, {
+      key: 0,
+      type: "more",
+      size: "20",
+      color: "#FFF"
+    })) : u("", !0),
+    t.type == "dropdown" || t.type == "dropdown-round" ? (o(), y(r, {
+      key: 1,
+      type: "chevron-down",
+      size: "12",
+      color: "var(--color-gray-9)"
+    })) : u("", !0),
+    t.type === "expand" ? m(e.$slots, "default", { key: 2 }, void 0, !0) : u("", !0),
+    b(c)
+  ], 10, lr);
+}
+const Ds = /* @__PURE__ */ _(rr, [["render", cr], ["__scopeId", "data-v-faa154dd"]]);
+const dr = {
+  name: "ecs-button-table",
+  emits: ["click", "mouseover", "mouseleave"],
+  components: {
+    EcsIcon: M,
+    EcsFocusRing: L
+  },
+  props: {
+    /** Displays the button in an active state. */
+    active: Boolean,
+    /** Show the button without a background color. */
+    subtle: {
+      type: Boolean,
+      default: !1
+    },
+    /** Button is visually toned down (text and icon are more gray than black). */
+    pale: {
+      type: Boolean,
+      default: !1
+    },
+    /** Sets the size of the button. */
+    size: {
+      type: String,
+      validator: (e) => ["md", "sml", null].includes(e),
+      default: "md"
+    },
+    /** If set, an icon will be added to the left of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+    icon: {
+      type: String
+    },
+    /** Text text inside the button. */
+    label: {
+      type: [String, Number]
+    },
+    /** Turns the button into disabled state, which disables all interactions and hover effects. */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /** If set, a small arrow will show up on the right side of the button, to indicate an collapse/expand state. The direction of the button is determined by the `active` prop. */
+    chevron: {
+      type: Boolean,
+      default: !1
+    },
+    /** If set, the button will not show any effects that would indicate that you could interact with the button. This is usefull when the button is only used to show a specific count/label instead of triggering any actions. */
+    unreactive: {
+      type: Boolean,
+      default: !1
+    },
+    /** Turns the button into a loading state, which makes it appear disabled and replaces the default icon (if set) with a spinner. */
+    loading: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    hasLabel() {
+      return this.label && this.label !== "" || this.label != null ? "has-label" : this.label;
+    },
+    sizeClass() {
+      return this.size && this.size !== "" ? `ecs-button-table-${this.size}` : this.size;
+    },
+    iconSize() {
+      return this.size == "sml" ? "16" : "20";
+    },
+    iconType() {
+      return this.loading ? "loading" : this.icon;
+    },
+    ariaDisabled() {
+      return this.disabled || this.unreactive ? !0 : null;
+    }
+  }
+}, ur = ["disabled", "aria-disabled", "aria-expanded", "aria-busy"], fr = {
+  key: 1,
+  class: "button-label"
+};
+function pr(e, s, t, a, n, i) {
+  const r = p("ecs-icon"), c = p("ecs-focus-ring");
+  return o(), l("button", {
+    class: v(["ecs-button-table", [
+      t.active ? "active" : "",
+      i.hasLabel,
+      t.subtle ? "subtle" : "",
+      t.pale ? "pale" : "",
+      t.unreactive ? "unreactive" : "",
+      t.loading ? "loading" : "",
+      i.sizeClass
+    ]]),
+    disabled: t.disabled || null,
+    "aria-disabled": i.ariaDisabled,
+    "aria-expanded": t.active || null,
+    "aria-busy": t.loading || null,
+    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
+    onMouseover: s[1] || (s[1] = (d) => e.$emit("mouseover", d)),
+    onMouseleave: s[2] || (s[2] = (d) => e.$emit("mouseleave", d))
+  }, [
+    t.icon || t.loading ? (o(), y(r, {
+      key: 0,
+      type: i.iconType,
+      size: i.iconSize
+    }, null, 8, ["type", "size"])) : u("", !0),
+    t.label != null ? (o(), l("div", fr, x(t.label), 1)) : u("", !0),
+    t.chevron ? (o(), l("div", {
+      key: 2,
+      class: v(["chevron", t.active ? "expand" : ""])
+    }, null, 2)) : u("", !0),
+    b(c)
+  ], 42, ur);
+}
+const Fs = /* @__PURE__ */ _(dr, [["render", pr], ["__scopeId", "data-v-f5a891fe"]]);
+const gr = {
+  name: "ecs-toolbar-button-group"
+}, mr = { class: "ecs-toolbar-button-group" };
+function hr(e, s, t, a, n, i) {
+  return o(), l("div", mr, [
+    m(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const Ht = /* @__PURE__ */ _(gr, [["render", hr], ["__scopeId", "data-v-743ca90b"]]);
+const vr = {
+  name: "ecs-toolbar-icon-button",
+  emits: ["click"],
+  components: { EcsIcon: M, EcsFocusRing: L },
+  props: {
+    /** The icon type of the button. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). Note that only icons prefixed with `toolbar-` should be used here. */
+    icon: {
+      type: String,
+      required: !0
+    },
+    /** Renders a small secondary icon in the bottom left of the button. Should only used under special conditions, eg. to reflect a specifc state that can not be handled by the `active` prop. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+    subIcon: {
+      type: String
+    },
+    /** When set, the icon is spinning. Should really only be used when the `icon` is set to `toolbar-refresh`. */
+    refresh: {
+      type: Boolean,
+      default: !1
+    },
+    /** Indicates that the button is activated. */
+    active: {
+      type: Boolean,
+      default: !1
+    },
+    /** Show the button in loading state. */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /** Adds a small blue badge to the upper right of the button. */
+    hasBadge: {
+      type: Boolean,
+      default: !1
+    },
+    /** Sets the aria-label attribute to improve accessibility. */
+    ariaLabel: {
+      type: String
+      //required: true
+    }
+  },
+  computed: {
+    ariaBusy() {
+      return this.refresh || this.loading ? !0 : null;
+    }
+  }
+}, _r = ["aria-busy", "aria-label"], yr = {
+  key: 0,
+  class: "badge"
+}, br = { class: "sub-icon" };
+function kr(e, s, t, a, n, i) {
+  const r = p("ecs-icon"), c = p("ecs-focus-ring");
+  return o(), l("button", {
+    onClick: s[0] || (s[0] = (d) => e.$emit("click", d)),
+    "aria-busy": i.ariaBusy,
+    "aria-label": t.ariaLabel,
+    class: v(["ecs-toolbar-icon-button", [
+      t.refresh ? "refreshing" : "",
+      t.active ? "active" : "",
+      t.loading ? "loading" : ""
+    ]])
+  }, [
+    b(r, { type: t.icon }, null, 8, ["type"]),
+    t.hasBadge ? (o(), l("span", yr)) : u("", !0),
+    f("div", br, [
+      t.subIcon ? (o(), y(r, {
+        key: 0,
+        type: t.subIcon,
+        size: "14"
+      }, null, 8, ["type"])) : u("", !0)
+    ]),
+    b(c)
+  ], 10, _r);
+}
+const xy = /* @__PURE__ */ _(vr, [["render", kr], ["__scopeId", "data-v-098e1030"]]);
+const xr = {
+  name: "ecs-card",
+  emits: ["click"],
+  props: {
+    /** Unique ID */
+    id: {
+      type: [String, Number],
+      default: null
+    },
+    /** Indicates that this card is currently selected (most likely via a checkbox that is contained in the card). */
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    /** Indicates that this card is currently expanded. Adds a bit of spacing and a stronger shadow. */
+    expanded: {
+      type: Boolean,
+      default: !1
+    },
+    /** Determines if the card should have a :hover state. This usually applies when the card is clickable, or expandable. */
+    hover: {
+      type: Boolean,
+      default: !1
+    },
+    /** Shows a full-height progress bar in the background of the card. Should only be used for single row cards. Pass the current percentage value as `Number`. */
+    progress: {
+      type: Number,
+      default: null
+    },
+    /** Turns the whole card into a disabled state. This also blocks all interactions on card content. */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    itemId() {
+      return `item-${this.id}`;
+    }
+  }
+}, wr = ["id"], Sr = { class: "ecs-card-inner" }, Cr = { class: "ecs-card-background" };
+function Br(e, s, t, a, n, i) {
+  return o(), l("div", {
+    onClick: s[0] || (s[0] = (r) => e.$emit("click", r)),
+    class: v(["ecs-card", [
+      t.selected ? "ecs-card-selected" : "",
+      t.expanded ? "ecs-card-expanded" : "",
+      t.hover ? "ecs-card-hover" : "",
+      t.disabled ? "ecs-card-disabled" : ""
+    ]]),
+    id: i.itemId
+  }, [
+    f("div", Sr, [
+      m(e.$slots, "default", {}, void 0, !0)
+    ]),
+    f("div", Cr, [
+      t.progress ? (o(), l("div", {
+        key: 0,
+        class: "progress",
+        style: B({ width: t.progress + "%" })
+      }, null, 4)) : u("", !0)
+    ])
+  ], 10, wr);
+}
+const wy = /* @__PURE__ */ _(xr, [["render", Br], ["__scopeId", "data-v-8d449816"]]);
+const zr = {
+  name: "ecs-citation-line",
+  emits: ["change", "blur", "focus"],
+  components: { EcsFlexRow: Me },
+  props: {
+    /** The citation range text. */
+    cite: {
+      type: String,
+      required: !0
+    },
+    /** Unique citation ID */
+    id: {
+      type: [String, Number],
+      required: !0
+    },
+    /** Determines the visual state of the citation line. */
+    state: {
+      type: String,
+      validator: (e) => ["default", "error", "warning", "edited", "skipped"].includes(e),
+      default: "default"
+    },
+    /** Makes the content of the citation line editable. */
+    editable: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  data() {
+    return {
+      citeValue: this.cite
+    };
+  },
+  mounted() {
+    this.$refs.editable.innerText = this.citeValue;
+  },
+  methods: {
+    onInput(e) {
+      this.citeValue = e.target.innerText, this.$emit("change", this.citeValue, this.id);
+    }
+  }
+}, Ir = ["contenteditable"];
+function Er(e, s, t, a, n, i) {
+  const r = p("ecs-flex-row");
+  return o(), y(r, { class: "ecs-citation-line" }, {
+    default: w(() => [
+      f("div", {
+        class: v(["ecs-citation-line-cite", [t.state, t.editable ? "editable" : ""]]),
+        ref: "editable",
+        onKeyup: s[0] || (s[0] = (...c) => i.onInput && i.onInput(...c)),
+        onBlur: s[1] || (s[1] = (c) => e.$emit("blur", c)),
+        onFocus: s[2] || (s[2] = (c) => e.$emit("focus", c)),
+        onKeydown: s[3] || (s[3] = U(G(() => {
+        }, ["prevent"]), ["enter"])),
+        contenteditable: t.editable
+      }, null, 42, Ir),
+      e.$slots.actions ? (o(), y(r, {
+        key: 0,
+        justify: "end",
+        class: "ecs-citation-line-actions"
+      }, {
+        default: w(() => [
+          m(e.$slots, "actions", {}, void 0, !0)
+        ]),
+        _: 3
+      })) : u("", !0)
+    ]),
+    _: 3
+  });
+}
+const Sy = /* @__PURE__ */ _(zr, [["render", Er], ["__scopeId", "data-v-cfd8e718"]]);
+var qt = {};
+Object.defineProperty(qt, "__esModule", {
+  value: !0
+});
+var $r = qt.clickOutSide = {
+  mounted: function(s, t, a) {
+    s.clickOutsideEvent = function(n) {
+      s == n.target || s.contains(n.target) || t.value(n, s);
+    }, document.addEventListener("click", s.clickOutsideEvent);
+  },
+  unmounted: function(s) {
+    document.removeEventListener("click", s.clickOutsideEvent);
+  }
+}, Pr = qt.default = $r;
+const Tr = {
+  name: "ecs-context-menu",
+  emits: ["option-clicked", "menu-closed"],
+  components: { EcsIcon: M, EcsFocusRing: L, EcsButton: Se },
+  directives: {
+    clickOutSide: Pr
+  },
+  props: {
+    /** Unique String that acts as the id for the menu. */
+    elementId: {
+      type: String,
+      required: !0
+    },
+    /** Array of menu options to show. Component will use the `name` parameter as the label. Array needs to contain objects with the following structure:
+    ```{
+      name: 'Duplicate',
+      slug: 'duplicate',
+      icon: 'evidence',
+      disabled: false,
+      type: '',
+      nested: { ... }
+    }``` */
+    options: {
+      type: Array,
+      required: !0
+    },
+    /** If passed, an icon will appear. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+    icon: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      item: null,
+      menuWidth: null,
+      menuHeight: null,
+      opened: !1,
+      left: 0,
+      top: 0
+    };
+  },
+  computed: {
+    postionStyles() {
+      return { left: this.left + "px", top: this.top + "px" };
+    }
+  },
+  methods: {
+    showMenu(e, s) {
+      this.item = s;
+      let t = document.getElementById(this.elementId);
+      t && ((!this.menuWidth || !this.menuHeight) && (t.style.visibility = "hidden", t.style.display = "block", this.menuWidth = t.offsetWidth, this.menuHeight = t.offsetHeight, t.removeAttribute("style")), this.menuWidth + e.pageX >= window.innerWidth ? this.left = e.pageX - this.menuWidth + 2 : this.left = e.pageX - 2, this.menuHeight + e.pageY >= window.innerHeight ? this.top = e.pageY - this.menuHeight + 2 : this.top = e.pageY - 2, this.opened = !0, this.$emit("menu-opened", this.item), this.$nextTick(() => {
+        this.$refs.menu.focus();
+      }));
+    },
+    hideContextMenu() {
+      document.getElementById(this.elementId) && (this.opened = !1, this.$emit("menu-closed"));
+    },
+    onClickOutside() {
+      this.hideContextMenu();
+    },
+    optionClicked(e) {
+      this.hideContextMenu(), this.$emit("option-clicked", {
+        item: this.item,
+        option: e
+      });
+    },
+    onEscKeyRelease(e) {
+      e.keyCode === 27 && this.hideContextMenu();
+    },
+    // Focus the first menu item when the context menu opens
+    focusFirst() {
+      this.$refs.menu.children[0].focus();
+    },
+    // Focus the last menu item when the user presses the up arrow key on the first menu item
+    focusLast() {
+      const e = this.$refs.menu.children;
+      e[e.length - 1].focus();
+    },
+    // Focus the previous menu item when the user presses the up arrow key
+    focusPrevious(e) {
+      const s = this.$refs.menu.children, t = Array.prototype.indexOf.call(s, e.target);
+      if (t > 0) {
+        let a = t - 1;
+        for (; a >= 0 && s[a].getAttribute("tabindex") === "-1"; )
+          a--;
+        a >= 0 ? s[a].focus() : this.focusLast();
+      } else
+        this.focusLast();
+    },
+    focusNext(e) {
+      const s = this.$refs.menu.children;
+      let t = Array.prototype.indexOf.call(s, e.target);
+      for (; t < s.length - 1; )
+        if (t++, s[t].getAttribute("tabindex") !== "-1") {
+          s[t].focus();
+          return;
+        }
+      this.focusFirst();
+    }
+  },
+  mounted() {
+    document.body.addEventListener("keyup", this.onEscKeyRelease), this.$refs.menu.addEventListener("keydown", (e) => {
+      e.keyCode === 9 && (e.preventDefault(), this.focusFirst());
+    });
+  },
+  beforeUnmount() {
+    document.removeEventListener("keyup", this.onEscKeyRelease);
+  }
+}, Mr = ["id"], Lr = ["onClick", "role", "tabindex", "aria-disabled"], Or = { key: 1 };
+function Ar(e, s, t, a, n, i) {
+  const r = p("ecs-icon"), c = p("ecs-button"), d = p("ecs-focus-ring"), g = oi("click-out-side");
+  return Ge((o(), l("div", {
+    class: v(["ecs-context-menu", n.opened ? " opened" : ""]),
+    id: t.elementId,
+    style: B([i.postionStyles])
+  }, [
+    f("ul", {
+      role: "menu",
+      "aria-orientation": "vertical",
+      tabindex: "0",
+      onKeydown: [
+        s[0] || (s[0] = U(G((...h) => i.focusPrevious && i.focusPrevious(...h), ["prevent"]), ["up"])),
+        s[1] || (s[1] = U(G((...h) => i.focusNext && i.focusNext(...h), ["prevent"]), ["down"]))
+      ],
+      ref: "menu",
+      id: "my-menu"
+    }, [
+      (o(!0), l(Z, null, ge(t.options, (h, k) => (o(), l("li", {
+        key: k,
+        onClick: G((z) => i.optionClicked(h), ["stop"]),
+        role: h.type === "divider" ? "separator" : "menuitem",
+        tabindex: h.type === "divider" || h.disabled ? "-1" : "0",
+        "aria-disabled": h.disabled || null,
+        class: v([
+          h.type === "divider" ? "ecs-context-menu-divider" : "ecs-context-menu-item",
+          h.type === "danger" ? "danger" : "",
+          h.disabled ? "disabled" : ""
+        ])
+      }, [
+        h.icon ? (o(), y(r, {
+          key: 0,
+          type: h.icon,
+          size: "20"
+        }, null, 8, ["type"])) : u("", !0),
+        h.type != "divider" ? (o(), l("span", Or, x(h.name), 1)) : u("", !0),
+        h.nested ? (o(), y(c, {
+          key: 2,
+          onClick: G((z) => i.optionClicked(h.nested), ["stop"]),
+          icon: h.nested.icon,
+          title: h.nested.name,
+          "aria-label": h.nested.name,
+          disabled: h.nested.disabled || null,
+          type: "secondary",
+          "icon-only": "",
+          size: "sml"
+        }, null, 8, ["onClick", "icon", "title", "aria-label", "disabled"])) : u("", !0),
+        b(d, {
+          danger: h.type == "danger"
+        }, null, 8, ["danger"])
+      ], 10, Lr))), 128))
+    ], 544)
+  ], 14, Mr)), [
+    [g, i.onClickOutside]
+  ]);
+}
+const Cy = /* @__PURE__ */ _(Tr, [["render", Ar], ["__scopeId", "data-v-7a99d0e5"]]);
+const Nr = {
+  name: "ecs-collapse",
+  emits: ["toggled", "remove"],
+  components: { EcsButton: Se, EcsFocusRing: L, EcsFlexRow: Me },
+  props: {
+    /** Unique ID, is required to handle persist states. */
+    id: {
+      type: String,
+      required: !0
+    },
+    /** The headline of the collapse control. */
+    title: {
+      type: String,
+      required: !0
+    },
+    /** Determines the padding of the headline and content sections. */
+    indent: {
+      type: String,
+      validator: (e) => ["sml", "md", null].includes(e),
+      default: null
+    },
+    /** Determines the padding of the headline section alone. */
+    headlineIndent: {
+      type: String,
+      validator: (e) => ["sml", "md", null].includes(e),
+      default: null
+    },
+    /** Displays a border above the headline section. */
+    borderTop: {
+      type: Boolean
+    },
+    /** Displays a border below the content section. */
+    borderBottom: {
+      type: Boolean
+    },
+    /** Makes the headline to render in font-weight bold. */
+    headlineBold: {
+      type: Boolean
+    },
+    /** Determines the initial state of the control. If set to `true`, the collapse is expanded on mount. */
+    visible: {
+      type: Boolean
+    },
+    /** If set, a small (-) remove button is rendered in the headline section. */
+    removable: {
+      type: Boolean
+    },
+    /** Sets the tooltip title of the remove button. */
+    removableTooltip: {
+      type: String
+    },
+    /** Saves the state of the collapse control in localstorage and reads the state on next mount, to automatically set it to expanded or collapsed. */
+    persist: {
+      type: Boolean,
+      default: !0
+    },
+    /** Sets the top and bottom padding of the content section. */
+    contentPadding: {
+      type: String,
+      validator: (e) => ["none", "sml", "md"].includes(e),
+      default: "md"
+    },
+    /** Sets the count of the collapse control in parenthese next to the headline. */
+    count: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      isVisible: this.visible
+    };
+  },
+  computed: {
+    indentation() {
+      return this.indent && this.indent !== "" ? `ecs-collapsable-indent-${this.indent}` : this.indent;
+    },
+    headlineIndentation() {
+      return this.headlineIndent && this.headlineIndent !== "" ? `ecs-collapsable-headline-indent-${this.headlineIndent}` : this.headlineIndent;
+    },
+    removeButtonIndentation() {
+      return this.headlineIndent && this.headlineIndent !== "" ? `remove-button-indent-${this.headlineIndent}` : this.indent && this.indent !== "" ? `remove-button-indent-${this.indent}` : this.headlineIndent;
+    },
+    contentPaddingClass() {
+      return `ecs-collapsable-content-padding-${this.contentPadding}`;
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.persist && (localStorage.getItem(`collapse-${this.id}`) === null ? (this.isVisible = this.visible, localStorage.setItem(`collapse-${this.id}`, this.isVisible)) : this.isVisible = localStorage.getItem(`collapse-${this.id}`) == "true");
+    });
+  },
+  methods: {
+    toggleCollapse() {
+      this.isVisible = !this.isVisible, this.persist && localStorage.setItem(`collapse-${this.id}`, this.isVisible), this.$emit("toggled", this.id, this.isVisible);
+    }
+  },
+  watch: {
+    visible() {
+      this.isVisible = this.visible;
+    }
+  }
+}, Dr = { class: "wrap" }, Fr = ["aria-expanded", "aria-controls"], Rr = {
+  key: 0,
+  class: "ecs-collapsable-headline-count"
+}, Vr = {
+  key: 0,
+  class: "ecs-collapsable-headline-controls"
+}, Hr = ["id", "aria-hidden"];
+function qr(e, s, t, a, n, i) {
+  const r = p("ecs-button"), c = p("ecs-flex-row"), d = p("ecs-focus-ring");
+  return o(), l("div", {
+    class: v(["ecs-collapsable", [
+      t.borderTop ? "ecs-collapsable-border-top" : "",
+      t.borderBottom ? "ecs-collapsable-border-bottom" : "",
+      i.indentation,
+      i.headlineIndentation
+    ]])
+  }, [
+    f("div", Dr, [
+      t.removable ? (o(), y(r, {
+        key: 0,
+        onClick: s[0] || (s[0] = (g) => e.$emit("remove", t.id)),
+        type: "secondary",
+        "icon-only": "",
+        icon: "minus",
+        size: "sml",
+        class: v(["remove-button", i.removeButtonIndentation]),
+        title: t.removableTooltip,
+        "aria-label": t.removableTooltip
+      }, null, 8, ["class", "title", "aria-label"])) : u("", !0),
+      f("h3", {
+        onClick: s[1] || (s[1] = (...g) => i.toggleCollapse && i.toggleCollapse(...g)),
+        onKeydown: s[2] || (s[2] = U(G((...g) => i.toggleCollapse && i.toggleCollapse(...g), ["prevent"]), ["space"])),
+        role: "button",
+        class: v(["ecs-collapsable-headline", [t.headlineBold ? "ecs-headline-section-bold" : "ecs-headline-section", n.isVisible ? "" : "collapsed"]]),
+        tabindex: "0",
+        "aria-expanded": n.isVisible ? "true" : "false",
+        "aria-controls": `collapse-${this.id}`
+      }, [
+        b(c, { gap: 4 }, {
+          default: w(() => [
+            D(x(t.title) + " ", 1),
+            t.count ? (o(), l("span", Rr, "(" + x(t.count) + ")", 1)) : u("", !0)
+          ]),
+          _: 1
+        }),
+        b(d, {
+          inset: 0,
+          radius: 0
+        }),
+        e.$slots.controls ? (o(), l("div", Vr, [
+          m(e.$slots, "controls", {}, void 0, !0)
+        ])) : u("", !0)
+      ], 42, Fr)
+    ]),
+    f("div", {
+      class: v([n.isVisible ? "collapse-show" : "collapse-hide", "collapse"]),
+      id: `collapse-${this.id}`,
+      "aria-hidden": n.isVisible ? "false" : "true"
+    }, [
+      f("div", {
+        class: v(["ecs-collapsable-content", i.contentPaddingClass])
+      }, [
+        m(e.$slots, "default", {}, void 0, !0)
+      ], 2)
+    ], 10, Hr)
+  ], 2);
+}
+const By = /* @__PURE__ */ _(Nr, [["render", qr], ["__scopeId", "data-v-4bf981c8"]]);
+const Wr = {
+  name: "ecs-collection-control",
+  emits: ["toggled", "collectionTooltip"],
+  components: { EcsIcon: M, EcsFocusRing: L },
+  mixins: [de],
+  props: {
+    /** Icon representing the type of selection. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
+    icon: {
+      type: String
+    },
+    /** The size of the collection control. */
+    size: {
+      type: String,
+      validator: (e) => ["md", "lg"].includes(e),
+      default: "lg"
+    },
+    /** If set to true, the control will appear expanded by default. */
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    /** The label that describes the type of selected objects. E.g. "Users: " */
+    label: {
+      type: String
+    },
+    /** Option to disable the outer borders of the control. */
+    noBorder: {
+      type: Boolean,
+      default: !1
+    },
+    /** Array of the currently selected objects. Must contain `name` and `value` for each object. */
+    collection: {
+      type: Array,
+      required: !0
+    },
+    /** Optional maximum height of the object list in pixels. If the list exceeds the maximum height, a scrollbar appears. */
+    maxHeight: {
+      type: Number,
+      default: null
+    },
+    /** Makes the control non-interactive and removes all checkboxes from the list items. */
+    nonInteractive: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data() {
+    return {
+      isVisible: this.visible,
+      expandId: ""
+    };
+  },
+  computed: {
+    iconSize() {
+      return this.size === "md" ? "24px" : "30px";
+    },
+    fullTooltip() {
+      return this.collection.filter((s) => s.value).map((s) => s.name).join(", ");
+    },
+    listMaxHeight() {
+      return this.maxHeight ? `max-height: ${this.maxHeight}px` : null;
+    }
+  },
+  methods: {
+    toggleCollapse() {
+      this.nonInteractive || (this.isVisible = !this.isVisible), this.$emit("toggled", this.id, this.isVisible);
+    },
+    toggleTooltip() {
+      this.$emit("collectionTooltip", this.fullTooltip);
+    }
+  },
+  watch: {
+    visible() {
+      this.isVisible = this.visible;
+    }
+  },
+  created() {
+    this.expandId = this.generateUniqueId();
+  }
+}, jr = ["tabindex", "role", "aria-expanded", "aria-controls"], Gr = {
+  key: 1,
+  class: "description"
+}, Ur = ["title"], Kr = { key: 0 }, Yr = ["id", "aria-hidden"];
+function Xr(e, s, t, a, n, i) {
+  const r = p("ecs-focus-ring"), c = p("ecs-icon");
+  return o(), l("div", {
+    class: v(["ecs-collection-control", [
+      t.noBorder ? "" : "bordered",
+      n.isVisible || t.nonInteractive ? "" : "collapsed",
+      t.size
+    ]])
+  }, [
+    f("div", {
+      onClick: s[2] || (s[2] = (...d) => i.toggleCollapse && i.toggleCollapse(...d)),
+      onKeydown: [
+        s[3] || (s[3] = U(G((...d) => i.toggleCollapse && i.toggleCollapse(...d), ["prevent"]), ["enter"])),
+        s[4] || (s[4] = U(G((...d) => i.toggleCollapse && i.toggleCollapse(...d), ["prevent"]), ["space"]))
+      ],
+      class: v(["ecs-collection-control-header", [
+        n.isVisible || t.nonInteractive ? "" : "collapsed",
+        t.nonInteractive ? "" : "interactive"
+      ]]),
+      tabindex: t.nonInteractive ? "-1" : "0",
+      role: t.nonInteractive ? !1 : "button",
+      "aria-expanded": t.nonInteractive ? "false" : n.isVisible ? "true" : "false",
+      "aria-controls": t.nonInteractive ? !1 : n.expandId
+    }, [
+      b(r),
+      t.icon ? (o(), y(c, {
+        key: 0,
+        type: t.icon,
+        color: "#858E9E",
+        size: i.iconSize
+      }, null, 8, ["type", "size"])) : u("", !0),
+      t.label ? (o(), l("div", Gr, x(t.label), 1)) : u("", !0),
+      f("div", {
+        class: "collection",
+        onMouseover: s[0] || (s[0] = (...d) => i.toggleTooltip && i.toggleTooltip(...d)),
+        onMouseleave: s[1] || (s[1] = (...d) => i.toggleTooltip && i.toggleTooltip(...d)),
+        title: i.fullTooltip
+      }, [
+        (o(!0), l(Z, null, ge(t.collection, (d) => (o(), l("span", {
+          key: d.name
+        }, [
+          d.value ? (o(), l("span", Kr, x(d.name), 1)) : u("", !0)
+        ]))), 128))
+      ], 40, Ur)
+    ], 42, jr),
+    f("div", {
+      class: v([n.isVisible || t.nonInteractive ? "collapse-show" : "collapse-hide", "collapse"]),
+      id: t.nonInteractive ? !1 : n.expandId,
+      "aria-hidden": n.isVisible ? "false" : "true"
+    }, [
+      f("div", {
+        class: "ecs-collection-control-list scrollbar scrollbar-sml",
+        style: B(i.listMaxHeight)
+      }, [
+        m(e.$slots, "default")
+      ], 4)
+    ], 10, Yr)
+  ], 2);
+}
+const zy = /* @__PURE__ */ _(Wr, [["render", Xr], ["__scopeId", "data-v-5e5716bc"]]);
+const Zr = {
+  name: "ecs-skeleton-loader",
+  props: {
+    /** Determines the type of skeleton shape: `single` replicates a single line of text, `multi` a multi line text, and `rect` a generic rectangle shape. */
+    type: {
+      type: String,
+      validator: (e) => ["single", "multi", "rect", "circle"].includes(e),
+      default: "single"
+    },
+    /** Only used together with the `multi` type. Determines the amount of text lines. */
+    count: {
+      type: Number,
+      default: 3
+    },
+    /** Sets the width of the `single` type in percentage. Sets the width of the `rect` type in pixels. */
+    width: {
+      type: Number,
+      default: 20
+    },
+    /** Sets the height of the `rect` and `circle` type in pixels. */
+    height: {
+      type: Number,
+      default: 20
+    },
+    /** Aligns the height and size of the single & multi types with our common line-height type scales. */
+    lineHeight: {
+      type: Number,
+      validator: (e) => [1, 2, 3, 4, 5, 6].includes(e),
+      default: 2
+    }
+  },
+  computed: {
+    rectClass() {
+      return this.type && this.type !== "" ? `skeleton-${this.type}` : this.type;
+    }
+  }
+}, Jr = (e) => (ve("data-v-75354c78"), e = e(), _e(), e), Qr = {
+  key: 1,
+  class: "ecs-skeleton skeletons"
+}, el = /* @__PURE__ */ Jr(() => /* @__PURE__ */ f("div", { class: "skeleton skeleton-single" }, null, -1)), tl = [
+  el
+];
+function sl(e, s, t, a, n, i) {
+  return t.type === "rect" || t.type === "circle" ? (o(), l("div", {
+    key: 0,
+    class: v(["ecs-skeleton skeleton", i.rectClass]),
+    style: B({ width: t.width + "px", height: t.height + "px" })
+  }, null, 6)) : t.type === "multi" ? (o(), l("div", Qr, [
+    (o(!0), l(Z, null, ge(parseInt(t.count), (r) => (o(), l("div", {
+      key: r,
+      class: v(["skeleton-wrap", "skeleton-line-height-" + t.lineHeight])
+    }, tl, 2))), 128))
+  ])) : (o(), l("div", {
+    key: 2,
+    class: v(["ecs-skeleton skeleton-wrap", "skeleton-line-height-" + t.lineHeight])
+  }, [
+    f("div", {
+      class: "skeleton skeleton-single",
+      style: B({ width: t.width + "%" })
+    }, null, 4)
+  ], 2));
+}
+const Ce = /* @__PURE__ */ _(Zr, [["render", sl], ["__scopeId", "data-v-75354c78"]]);
+const il = {
+  name: "ecs-formatted",
+  components: { EcsSkeletonLoader: Ce },
+  mixins: [de],
+  props: {
+    /** Sets the general font size of the formatted text component to small. */
+    small: {
+      type: Boolean,
+      default: !1
+    },
+    /** Turns the formatted text component into a skeleton loader. */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /** Used to customize the line count of the skeleton loader. */
+    skeletonCount: {
+      type: Number,
+      default: 4
+    }
+  },
+  created() {
+    this.formattedId = this.generateUniqueId();
+  },
+  mounted() {
+    this.$el.querySelectorAll(`#${this.formattedId} a`).forEach((s) => {
+      const t = s.getAttribute("href");
+      s.setAttribute("title", `Open ${t}`);
+    });
+  }
+}, nl = ["id"];
+function al(e, s, t, a, n, i) {
+  const r = p("ecs-skeleton-loader");
+  return o(), l("div", {
+    class: v(["ecs-formatted", [t.small ? "ecs-formatted-sml" : ""]]),
+    id: e.formattedId
+  }, [
+    t.loading ? (o(), y(r, {
+      key: 1,
+      type: "multi",
+      "line-height": t.small ? 1 : 2,
+      count: t.skeletonCount
+    }, null, 8, ["line-height", "count"])) : m(e.$slots, "default", {
+      key: 0,
+      ref: "slot"
+    })
+  ], 10, nl);
+}
+const Rs = /* @__PURE__ */ _(il, [["render", al]]);
+const ol = {
+  name: "ecs-comment",
+  emits: ["edit", "delete"],
+  components: { EcsAvatar: Mi, EcsButton: Se, EcsFormatted: Rs, EcsSkeletonLoader: Ce },
+  props: {
+    /** Name of the user that is the comment author. */
+    userName: {
+      type: String,
+      required: !0
+    },
+    /** Avatar image of the user that is the comment author. */
+    userImage: {
+      type: String,
+      default: null
+    },
+    /** Determines if controls to edit or delete the comment should be available. */
+    canEdit: {
+      type: Boolean,
+      default: !1
+    },
+    /** Shows the whole comment in skeleton loading state. */
+    loading: {
+      type: Boolean,
+      default: !1
+    }
+  }
+}, rl = ["aria-busy"], ll = { class: "ecs-comment-header" }, cl = { class: "ecs-comment-autor" }, dl = {
+  key: 2,
+  class: "ecs-comment-meta"
+}, ul = { class: "ecs-comment-meta-name" }, fl = { class: "ecs-comment-meta-time" }, pl = {
+  key: 3,
+  class: "ecs-comment-meta loading"
+}, gl = {
+  key: 0,
+  class: "ecs-comment-actions"
+}, ml = {
+  key: 2,
+  class: "ecs-comment-edit"
+};
+function hl(e, s, t, a, n, i) {
+  const r = p("ecs-skeleton-loader"), c = p("ecs-avatar"), d = p("ecs-button"), g = p("ecs-formatted");
+  return o(), l("div", {
+    class: "ecs-comment",
+    role: "comment",
+    "aria-busy": t.loading || null
+  }, [
+    f("div", ll, [
+      f("div", cl, [
+        t.loading ? (o(), y(r, {
+          key: 0,
+          type: "circle",
+          width: 32,
+          height: 32
+        })) : (o(), y(c, {
+          key: 1,
+          name: t.userName,
+          image: t.userImage,
+          size: 32,
+          rounded: ""
+        }, null, 8, ["name", "image"])),
+        t.loading ? (o(), l("div", pl, [
+          b(r, {
+            type: "single",
+            "line-height": 3,
+            width: 50
+          }),
+          b(r, {
+            type: "single",
+            "line-height": 2,
+            width: 60
+          })
+        ])) : (o(), l("div", dl, [
+          f("span", ul, x(t.userName), 1),
+          f("span", fl, [
+            m(e.$slots, "commentdate", {}, void 0, !0)
+          ])
+        ]))
+      ]),
+      t.canEdit ? (o(), l("div", gl, [
+        b(d, {
+          onClick: s[0] || (s[0] = (h) => e.$emit("edit", h)),
+          type: "secondary",
+          size: "sml",
+          icon: "edit",
+          "icon-only": "",
+          title: "Edit Comment"
+        }),
+        b(d, {
+          onClick: s[1] || (s[1] = (h) => e.$emit("delete", h)),
+          type: "danger",
+          size: "sml",
+          icon: "delete",
+          "icon-only": "",
+          title: "Delete Comment"
+        })
+      ])) : u("", !0)
+    ]),
+    !e.$slots.editform && !t.loading ? (o(), y(g, {
+      key: 0,
+      class: "ecs-comment-body"
+    }, {
+      default: w(() => [
+        m(e.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    })) : t.loading ? (o(), y(r, {
+      key: 1,
+      type: "multi",
+      count: 2,
+      class: "ecs-comment-body"
+    })) : (o(), l("div", ml, [
+      m(e.$slots, "editform", {}, void 0, !0)
+    ]))
+  ], 8, rl);
+}
+const Iy = /* @__PURE__ */ _(ol, [["render", hl], ["__scopeId", "data-v-cf696f66"]]);
+const vl = {}, _l = { class: "ecs-comment-list" };
+function yl(e, s) {
+  return o(), l("div", _l, [
+    m(e.$slots, "default")
+  ]);
+}
+const Ey = /* @__PURE__ */ _(vl, [["render", yl]]);
 function wt(e = {}, s = 0) {
   const t = e && e.a;
   let a;
@@ -6415,7 +6422,7 @@ function xd(e, s, t, a, n, i) {
 const $y = /* @__PURE__ */ _(kd, [["render", xd], ["__scopeId", "data-v-d6450b05"]]);
 const wd = {
   name: "ecs-data-card",
-  components: { EcsIcon: M, EcsSkeletonLoader: Ce, EcsButtonTable: Ns, EcsButton: Se, EcsFocusRing: L },
+  components: { EcsIcon: M, EcsSkeletonLoader: Ce, EcsButtonTable: Fs, EcsButton: Se, EcsFocusRing: L },
   mixins: [de],
   props: {
     /** If passed, an icon will be displayed in the data card. The icon prop must match a specific icons name. The list of available icon names can be found [here](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). */
@@ -7479,7 +7486,7 @@ const Dy = /* @__PURE__ */ _(zu, [["render", Eu]]);
 const $u = {
   name: "ecs-data-list-item",
   emits: ["toggled"],
-  components: { EcsButtonMore: As, EcsSkeletonLoader: Ce },
+  components: { EcsButtonMore: Ds, EcsSkeletonLoader: Ce },
   mixins: [de],
   props: {
     /** The label that shows up to the left of the list item. Usually describes the content to the left, e.g.: "Type", "Profiles", etc. */
@@ -8476,7 +8483,7 @@ const Ef = {
   components: {
     EcsIcon: M,
     EcsSticker: Re,
-    EcsButtonMore: As,
+    EcsButtonMore: Ds,
     EcsFocusRing: L
   },
   props: {
@@ -8587,7 +8594,7 @@ function Lf(e, s, t, a, n, i) {
 const Gy = /* @__PURE__ */ _(Ef, [["render", Lf], ["__scopeId", "data-v-00b5ab33"]]);
 const Of = {
   name: "ecs-excerpt-snippet",
-  components: { EcsIcon: M, EcsSkeletonLoader: Ce, EcsFormatted: Ds },
+  components: { EcsIcon: M, EcsSkeletonLoader: Ce, EcsFormatted: Rs },
   props: {
     /** Determines how the content of the excerpt should be rendered. */
     type: {
@@ -8780,7 +8787,7 @@ const Kf = {
     EcsIcon: M,
     EcsFileIcon: Ls,
     EcsSticker: Re,
-    EcsButtonTable: Ns,
+    EcsButtonTable: Fs,
     EcsFocusRing: L
   },
   mixins: [de],
@@ -14122,8 +14129,8 @@ export {
   by as EcsButtonContextGroup,
   ky as EcsButtonDialog,
   _y as EcsButtonGroup,
-  As as EcsButtonMore,
-  Ns as EcsButtonTable,
+  Ds as EcsButtonMore,
+  Fs as EcsButtonTable,
   gt as EcsButtonToolbar,
   Ht as EcsButtonToolbarGroup,
   xy as EcsButtonToolbarIcon,
@@ -14170,7 +14177,7 @@ export {
   $p as EcsFormGroup,
   Qy as EcsFormHeadline,
   eb as EcsFormSet,
-  Ds as EcsFormatted,
+  Rs as EcsFormatted,
   M as EcsIcon,
   tb as EcsIndexToolbar,
   sb as EcsInfoTooltip,