@kong/kongponents 9.52.7 → 9.52.8

package/dist/kongponents.es251.js

@@ -1,186 +1,25 @@
-import { defineComponent as O, useModel as P, ref as b, useId as j, computed as h, onMounted as J, watch as M, openBlock as u, createElementBlock as c, createBlock as I, unref as f, mergeProps as B, createElementVNode as r, toDisplayString as k, createCommentVNode as g, withDirectives as F, normalizeClass as S, vModelText as A, Fragment as K, createVNode as L, Transition as Q, withCtx as X, mergeModels as Z } from "vue";
-import { DatePicker as U } from "./kongponents.es366.js";
-import p from "./kongponents.es309.js";
-import _ from "./kongponents.es313.js";
-import G from "./kongponents.es219.js";
-const ee = { class: "calendar-wrapper" }, te = {
-  key: 2,
-  class: "time-wrapper"
-}, ae = { class: "time-inputs-container" }, ne = { class: "time-input-column" }, le = ["for"], se = { key: 0 }, ie = { key: 1 }, ue = ["id", "step"], re = { class: "time-input-column" }, oe = ["for"], de = { key: 0 }, me = ["id", "step"], ve = {
-  key: 0,
-  class: "help-text"
-}, he = /* @__PURE__ */ O({
-  __name: "CalendarWrapper",
-  props: /* @__PURE__ */ Z({
-    isRange: { type: Boolean },
-    kDatePickerMode: {},
-    maxDate: { default: () => {
-    } },
-    minDate: { default: () => {
-    } },
-    errorMessage: { default: () => {
-    } },
-    timeGranularity: { default: "minutely" }
-  }, {
-    modelValue: { required: !0 },
-    modelModifiers: {},
-    error: { type: Boolean, default: !1 },
-    errorModifiers: {}
-  }),
-  emits: ["update:modelValue", "update:error"],
-  setup(a, { expose: Y }) {
-    const s = (n, t) => t === "secondly" ? G(n, "HH:mm:ss") : G(n, "HH:mm"), e = P(a, "modelValue"), y = P(a, "error"), i = b(s(/* @__PURE__ */ new Date(), a.timeGranularity)), o = b(s(/* @__PURE__ */ new Date(), a.timeGranularity)), d = b({
-      start: s(/* @__PURE__ */ new Date(), a.timeGranularity),
-      end: s(/* @__PURE__ */ new Date(), a.timeGranularity)
-    }), D = j(), $ = h(() => a.isRange && e.value && "start" in e.value && e.value.start instanceof Date ? { year: e.value.start.getFullYear(), month: e.value.start.getMonth() + 1 } : e.value instanceof Date ? { year: e.value.getFullYear(), month: e.value.getMonth() + 1 } : a.maxDate && p(a.maxDate, _()) ? { year: a.maxDate.getFullYear(), month: a.maxDate.getMonth() + 1 } : { year: (/* @__PURE__ */ new Date()).getFullYear(), month: (/* @__PURE__ */ new Date()).getMonth() + 1 }), x = h(() => ({
-      borderless: !0,
-      color: "blue",
-      dragAttribute: W,
-      expanded: !0,
-      initialPage: $.value,
-      maxDate: a.maxDate,
-      minDate: a.minDate,
-      mode: "date",
-      modelConfig: N,
-      selectAttribute: q,
-      transparent: !0,
-      trimWeeks: !0
-    })), R = h(() => ["time", "dateTime", "relativeDateTime"].includes(a.kDatePickerMode)), H = h(() => {
-      switch (a.timeGranularity) {
-        case "minutely":
-          return 60;
-        case "secondly":
-          return 1;
-        default:
-          return 60;
-      }
-    }), V = (n, t) => n > t, C = () => {
-      if (e.value && R.value)
-        if (a.isRange && e.value.start && e.value.end) {
-          const n = e.value;
-          i.value = s(n.start, a.timeGranularity), o.value = s(n.end, a.timeGranularity);
-        } else e.value instanceof Date ? i.value = s(e.value, a.timeGranularity) : i.value = s(/* @__PURE__ */ new Date(), a.timeGranularity);
-    }, w = (n) => {
-      const t = n.split(":"), l = parseInt(t[0] ?? "0", 10), m = parseInt(t[1] ?? "0", 10), v = a.timeGranularity === "secondly" && t[2] ? parseInt(t[2], 10) : 0;
-      return { hours: l, minutes: m, seconds: v };
-    };
-    J(() => {
-      C(), d.value.start = i.value, d.value.end = o.value;
-    });
-    const N = { type: "number" }, W = {
-      key: "select-drag",
-      highlight: {
-        start: { contentClass: "vcal-day-drag-start" },
-        base: { contentClass: "vcal-day-drag-base" },
-        end: { contentClass: "vcal-day-drag-end" }
-      }
-    }, q = {
-      key: "select-calendar",
-      highlight: {
-        start: { contentClass: "vcal-day-start" },
-        base: { contentClass: "vcal-day-base" },
-        end: { contentClass: "vcal-day-end" }
-      }
-    };
-    M(() => i.value, (n) => {
-      if (n) {
-        if (e.value && a.isRange && "start" in e.value && e.value.start instanceof Date && "end" in e.value && e.value.end instanceof Date) {
-          const t = /* @__PURE__ */ new Date(), { hours: l, minutes: m, seconds: v } = w(n);
-          t.setHours(l, m, v, 0), e.value.start.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0), y.value = V(e.value.start, e.value.end);
-        } else if (e.value instanceof Date) {
-          const t = /* @__PURE__ */ new Date(), { hours: l, minutes: m, seconds: v } = w(n);
-          t.setHours(l, m, v, 0), e.value.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0);
-        }
-      }
-    }), M(() => o.value, (n) => {
-      if (n && e.value && a.isRange && "end" in e.value && e.value.end instanceof Date && "start" in e.value && e.value.start instanceof Date) {
-        const t = /* @__PURE__ */ new Date(), { hours: l, minutes: m, seconds: v } = w(n);
-        t.setHours(l, m, v, 0), e.value.end.setHours(t.getHours(), t.getMinutes(), t.getSeconds(), 0), y.value = V(e.value.start, e.value.end);
-      }
-    }), M(() => e.value, () => {
-      e.value && a.isRange && "start" in e.value && e.value.start instanceof Date && "end" in e.value && e.value.end instanceof Date ? (i.value = s(e.value.start, a.timeGranularity), o.value = s(e.value.end, a.timeGranularity), y.value = V(e.value.start, e.value.end)) : e.value instanceof Date && (i.value = s(e.value, a.timeGranularity));
-    }, { immediate: !0, deep: !0 }), M(() => a.timeGranularity, () => {
-      e.value && a.isRange && "start" in e.value && e.value.start instanceof Date ? d.value.start = s(e.value.start, a.timeGranularity) : e.value instanceof Date && (d.value.start = s(e.value, a.timeGranularity)), e.value && a.isRange && "end" in e.value && e.value.end instanceof Date && (d.value.end = s(e.value.end, a.timeGranularity));
-    });
-    const T = (n) => {
-      const t = e.value;
-      return a.isRange && t && n in t && t[n] instanceof Date;
-    }, z = () => {
-      i.value = d.value.start, o.value = d.value.end;
-    }, E = (n) => {
-      try {
-        return G(n, "EEE MMM d yyyy");
-      } catch (t) {
-        console.warn("Error formatting date:", t);
-      }
-    };
-    return Y({
-      resetTime: z,
-      initTimeInputs: C
-    }), (n, t) => (u(), c("div", ee, [
-      a.isRange ? (u(), I(f(U), B({ key: 0 }, x.value, {
-        modelValue: e.value,
-        "onUpdate:modelValue": t[0] || (t[0] = (l) => e.value = l),
-        modelModifiers: { range: !0 }
-      }), null, 16, ["modelValue"])) : (u(), I(f(U), B({ key: 1 }, x.value, {
-        modelValue: e.value,
-        "onUpdate:modelValue": t[1] || (t[1] = (l) => e.value = l)
-      }), null, 16, ["modelValue"])),
-      R.value ? (u(), c("div", te, [
-        r("div", ae, [
-          r("div", ne, [
-            r("label", {
-              class: "time-input-label",
-              for: `time-input-start-${f(D)}`
-            }, [
-              T("start") ? (u(), c("span", se, k(E(e.value.start)), 1)) : e.value && e.value instanceof Date ? (u(), c("span", ie, k(E(e.value)), 1)) : g("", !0)
-            ], 8, le),
-            F(r("input", {
-              id: `time-input-start-${f(D)}`,
-              "onUpdate:modelValue": t[2] || (t[2] = (l) => i.value = l),
-              class: S(["time-input-start", { "input-error": y.value }]),
-              "data-testid": "time-input-start",
-              step: H.value,
-              type: "time"
-            }, null, 10, ue), [
-              [A, i.value]
-            ])
-          ]),
-          a.isRange ? (u(), c(K, { key: 0 }, [
-            t[4] || (t[4] = r("div", { class: "time-input-separator" }, " - ", -1)),
-            r("div", re, [
-              r("label", {
-                class: "time-input-label",
-                for: `time-input-end-${f(D)}`
-              }, [
-                T("end") ? (u(), c("span", de, k(f(G)(e.value.end, "EEE MMM d yyyy")), 1)) : g("", !0)
-              ], 8, oe),
-              F(r("input", {
-                id: `time-input-end-${f(D)}`,
-                "onUpdate:modelValue": t[3] || (t[3] = (l) => o.value = l),
-                class: S(["time-input-end", { "input-error": y.value }]),
-                "data-testid": "time-input-end",
-                step: H.value,
-                type: "time"
-              }, null, 10, me), [
-                [A, o.value]
-              ])
-            ])
-          ], 64)) : g("", !0)
-        ]),
-        L(Q, {
-          mode: "out-in",
-          name: "kongponents-fade-transition"
-        }, {
-          default: X(() => [
-            y.value && a.errorMessage ? (u(), c("div", ve, k(a.errorMessage), 1)) : g("", !0)
-          ]),
-          _: 1
-        })
-      ])) : g("", !0)
-    ]));
-  }
-});
+import { watch as n, getCurrentScope as r, onScopeDispose as i } from "vue";
+function s(t, e) {
+  return r() ? (i(t, e), !0) : !1;
+}
+const f = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const c = Object.prototype.toString, u = (t) => c.call(t) === "[object Object]", a = () => {
+};
+function d(t) {
+  return Array.isArray(t) ? t : [t];
+}
+function l(t, e, o) {
+  return n(t, e, {
+    ...o,
+    immediate: !0
+  });
+}
 export {
-  he as default
+  f as isClient,
+  u as isObject,
+  a as noop,
+  d as toArray,
+  s as tryOnScopeDispose,
+  l as watchImmediate
 };

package/dist/kongponents.es252.js

@@ -0,0 +1,4 @@
+import f from "./kongponents.es209.js";
+export {
+  f as default
+};

package/dist/kongponents.es253.js

@@ -1,8 +1,244 @@
-import p from "./kongponents.es318.js";
-var a = /[\\^$.*+?()[\]{}|]/g, r = RegExp(a.source);
-function x(e) {
-  return e = p(e), e && r.test(e) ? e.replace(a, "\\$&") : e;
-}
+import { defineComponent as Z, useCssVars as _, useAttrs as ee, ref as x, useTemplateRef as E, computed as r, onMounted as te, resolveComponent as le, openBlock as C, createBlock as w, unref as F, withCtx as m, createElementVNode as P, createVNode as S, createTextVNode as q, renderSlot as ae, createElementBlock as oe, createCommentVNode as ie, toDisplayString as ne, mergeProps as re, withModifiers as ue, nextTick as se } from "vue";
+import { KUI_SPACE_30 as ce } from "./kongponents.es178.js";
+import de from "./kongponents.es56.js";
+import fe from "./kongponents.es49.js";
+import I from "./kongponents.es60.js";
+import ve from "./kongponents.es54.js";
+import me from "./kongponents.es399.js";
+const pe = {
+  class: "filter-content",
+  "data-testid": "filter-pill-content"
+}, be = { class: "default-layout" }, ye = {
+  key: 0,
+  class: "operator"
+}, Ve = { class: "value" }, he = { class: "footer" }, qe = /* @__PURE__ */ Z({
+  inheritAttrs: !1,
+  __name: "FilterPill",
+  props: {
+    filter: {},
+    initOpen: { type: Boolean, default: !1 },
+    selection: { default: () => {
+    } },
+    custom: { type: Boolean, default: !1 }
+  },
+  emits: ["apply", "close", "open", "clear"],
+  setup(t, { emit: M }) {
+    _((l) => ({
+      v5984a737: D.value
+    }));
+    const N = ee(), p = M, b = x(!1), k = E("filterPopper"), f = x(), u = x(), s = x(), c = x(), T = E("inputField"), v = r(() => t.custom ? "custom" : t.filter.options && !t.filter.multiple ? "select" : t.filter.options && t.filter.multiple ? "multiselect" : "input"), L = r(() => {
+      switch (v.value) {
+        case "input":
+          return !u.value || u.value === "";
+        case "select":
+          return !s.value;
+        case "multiselect":
+          return !c.value || c.value.length === 0;
+        case "custom":
+        default:
+          return !1;
+      }
+    }), g = r(() => t.filter.operators && t.filter.operators.length ? t.filter.operators : ["eq"]), D = r(() => g.value.some((l) => l === "lte" || l === "gte") ? "205px" : "120px"), R = r(() => {
+      var o, a, V, h, i, n, K, O;
+      let l, e;
+      switch (v.value) {
+        case "input":
+          l = u.value, e = u.value;
+          break;
+        case "select":
+          l = s.value, e = ((V = (a = (o = t.filter) == null ? void 0 : o.options) == null ? void 0 : a.find(({ value: d }) => d === s.value)) == null ? void 0 : V.label) ?? ((h = s.value) == null ? void 0 : h.toString());
+          break;
+        case "multiselect":
+          l = c.value, e = (O = (K = (n = (i = c.value) == null ? void 0 : i.map((d) => {
+            var U;
+            return (U = t.filter.options) == null ? void 0 : U.find(({ value: Y }) => Y === d);
+          })) == null ? void 0 : n.filter((d) => d !== void 0)) == null ? void 0 : K.map(({ label: d }) => d)) == null ? void 0 : O.join(", ");
+          break;
+      }
+      if (!(f.value === void 0 || l === void 0 || e === void 0))
+        return {
+          operator: f.value,
+          value: l,
+          text: e
+        };
+    }), G = r(() => {
+      var l;
+      switch ((l = t.selection) == null ? void 0 : l.operator) {
+        case "eq":
+          return " = ";
+        case "neq":
+          return " ≠ ";
+        case "lt":
+          return " < ";
+        case "lte":
+          return " ≤ ";
+        case "gt":
+          return " > ";
+        case "gte":
+          return " ≥ ";
+        case "contains":
+        case "exists":
+        default:
+          return ": ";
+      }
+    }), A = r(() => {
+      const l = {
+        eq: "Equals",
+        neq: "Not equals",
+        contains: "Contains",
+        exists: "Exists",
+        lt: "Less than",
+        lte: "Less than or equal to",
+        gt: "Greater than",
+        gte: "Greater than or equal to"
+      };
+      return g.value.map((e) => ({
+        label: l[e],
+        value: e
+      }));
+    }), W = r(() => {
+      var l;
+      return ((l = A.value.find(({ value: e }) => e === f.value)) == null ? void 0 : l.label) ?? "";
+    }), $ = () => {
+      var l, e;
+      v.value === "input" && ((e = (l = T.value) == null ? void 0 : l.input) == null || e.focus());
+    }, j = () => {
+      var l, e, o, a, V, h;
+      f.value = ((l = t.selection) == null ? void 0 : l.operator) ?? ((e = g.value) == null ? void 0 : e[0]), u.value = typeof ((o = t.selection) == null ? void 0 : o.value) == "string" ? t.selection.value : void 0, s.value = (V = (a = t.filter.options) == null ? void 0 : a.find(({ value: i }) => {
+        var n;
+        return i === ((n = t.selection) == null ? void 0 : n.value);
+      })) == null ? void 0 : V.value, c.value = (h = t.filter.options) == null ? void 0 : h.filter(({ value: i }) => {
+        var n;
+        if (Array.isArray((n = t.selection) == null ? void 0 : n.value))
+          return t.selection.value.includes(`${i}`);
+      }).map(({ value: i }) => i);
+    }, B = async () => {
+      j(), k.value && (k.value.showPopover(), b.value = !0, await se(), $()), p("open");
+    }, y = () => {
+      k.value && (k.value.hidePopover(), b.value = !1), p("close");
+    };
+    te(() => {
+      t.initOpen && B();
+    });
+    const z = () => {
+      b.value && y();
+    }, H = () => {
+      v.value === "custom" ? p("apply", void 0) : p("apply", R.value), y();
+    }, J = () => {
+      y();
+    }, Q = () => {
+      y(), p("clear");
+    }, X = () => {
+      b.value ? y() : B();
+    };
+    return (l, e) => {
+      const o = le("KButton");
+      return C(), w(de, {
+        ref: "filterPopper",
+        "max-width": t.filter.maxWidth ?? "400px",
+        offset: F(ce),
+        placement: t.filter.placement ?? "bottom-start",
+        width: "auto",
+        onClose: z
+      }, {
+        default: m(() => {
+          var a;
+          return [
+            S(me, re({
+              "content-label": (a = t.selection) == null ? void 0 : a.text,
+              "data-testid": "filter-pill",
+              delimiter: G.value,
+              label: t.filter.label,
+              "pill-focus": b.value
+            }, F(N), {
+              onClear: Q,
+              onClick: e[0] || (e[0] = ue(() => {
+              }, ["prevent", "stop"])),
+              onTrigger: X
+            }), null, 16, ["content-label", "delimiter", "label", "pill-focus"])
+          ];
+        }),
+        title: m(() => [
+          q(ne(t.filter.label), 1)
+        ]),
+        content: m(() => [
+          P("div", pe, [
+            ae(l.$slots, "default", {}, () => [
+              P("div", be, [
+                g.value.length > 1 ? (C(), oe("div", ye, [
+                  S(I, {
+                    modelValue: f.value,
+                    "onUpdate:modelValue": e[1] || (e[1] = (a) => f.value = a),
+                    items: A.value,
+                    "kpop-attributes": {
+                      popoverClasses: "force-operator-width"
+                    },
+                    label: "Operator",
+                    title: W.value
+                  }, null, 8, ["modelValue", "items", "title"])
+                ])) : ie("", !0),
+                P("div", Ve, [
+                  v.value === "select" ? (C(), w(I, {
+                    key: 0,
+                    modelValue: s.value,
+                    "onUpdate:modelValue": e[2] || (e[2] = (a) => s.value = a),
+                    "data-testid": "filter-pill-select",
+                    items: t.filter.options,
+                    label: "Value",
+                    placeholder: "Select a value"
+                  }, null, 8, ["modelValue", "items"])) : v.value === "multiselect" ? (C(), w(ve, {
+                    key: 1,
+                    modelValue: c.value,
+                    "onUpdate:modelValue": e[3] || (e[3] = (a) => c.value = a),
+                    "data-testid": "filter-pill-multiselect",
+                    items: t.filter.options,
+                    label: "Value",
+                    placeholder: "Select values"
+                  }, null, 8, ["modelValue", "items"])) : (C(), w(fe, {
+                    key: 2,
+                    ref: "inputField",
+                    modelValue: u.value,
+                    "onUpdate:modelValue": e[4] || (e[4] = (a) => u.value = a),
+                    modelModifiers: { trim: !0 },
+                    "data-testid": "filter-pill-input",
+                    label: "Value",
+                    placeholder: "Enter a value"
+                  }, null, 8, ["modelValue"]))
+                ])
+              ])
+            ], !0)
+          ])
+        ]),
+        footer: m(() => [
+          P("div", he, [
+            S(o, {
+              appearance: "secondary",
+              "data-testid": "filter-pill-cancel",
+              onClick: J
+            }, {
+              default: m(() => [...e[5] || (e[5] = [
+                q(" Cancel ", -1)
+              ])]),
+              _: 1
+            }),
+            S(o, {
+              appearance: "primary",
+              "data-testid": "filter-pill-apply",
+              disabled: L.value,
+              onClick: H
+            }, {
+              default: m(() => [...e[6] || (e[6] = [
+                q(" Apply ", -1)
+              ])]),
+              _: 1
+            }, 8, ["disabled"])
+          ])
+        ]),
+        _: 3
+      }, 8, ["max-width", "offset", "placement"]);
+    };
+  }
+});
 export {
-  x as default
+  qe as default
 };

package/dist/kongponents.es255.js

@@ -1,4 +1,59 @@
-const I = "24px";
+import { defineComponent as m, computed as d, openBlock as l, createElementBlock as i, createElementVNode as a, normalizeClass as u, createBlock as r, unref as t, toDisplayString as s, createCommentVNode as f, normalizeStyle as b } from "vue";
+import p from "./kongponents.es271.js";
+import k from "./kongponents.es192.js";
+import z from "./kongponents.es203.js";
+import { KUI_ICON_SIZE_40 as o, KUI_COLOR_TEXT_INVERSE as c, KUI_COLOR_TEXT_PRIMARY as v } from "./kongponents.es178.js";
+import { normalizeSize as y } from "./kongponents.es175.js";
+const h = ["aria-current", "data-testid"], x = { class: "step-circle" }, E = {
+  key: 3,
+  class: "step-number"
+}, C = ["title"], K = /* @__PURE__ */ m({
+  __name: "KStep",
+  props: {
+    label: {},
+    state: { default: "default" },
+    maxLabelWidth: {},
+    stepNumber: {}
+  },
+  setup(e) {
+    const n = d(() => ({
+      maxWidth: y(e.maxLabelWidth)
+    }));
+    return (I, N) => (l(), i("li", {
+      "aria-current": e.state === "active" ? "step" : "false",
+      class: "step",
+      "data-testid": `step-${e.state}`
+    }, [
+      a("div", {
+        class: u(["step-container", `${e.state}`])
+      }, [
+        a("div", x, [
+          e.state === "completed" ? (l(), r(t(p), {
+            key: 0,
+            color: `var(--kui-color-text-inverse, ${t(c)})`,
+            size: t(o),
+            title: "Completed"
+          }, null, 8, ["color", "size"])) : e.state === "pending" ? (l(), r(t(z), {
+            key: 1,
+            color: `var(--kui-color-text-primary, ${t(v)})`,
+            size: t(o),
+            title: "Pending"
+          }, null, 8, ["color", "size"])) : e.state === "error" ? (l(), r(t(k), {
+            key: 2,
+            color: `var(--kui-color-text-inverse, ${t(c)})`,
+            size: t(o),
+            title: "Error"
+          }, null, 8, ["color", "size"])) : e.stepNumber ? (l(), i("span", E, s(e.stepNumber), 1)) : f("", !0)
+        ]),
+        a("span", {
+          class: "step-label",
+          style: b(n.value),
+          title: e.label
+        }, s(e.label), 13, C)
+      ], 2)
+    ], 8, h));
+  }
+});
 export {
-  I as KUI_ICON_SIZE_50
+  K as default
 };

package/dist/kongponents.es257.js

@@ -1,121 +1,26 @@
-import { defineComponent as h, computed as s, openBlock as d, createBlock as b, resolveDynamicComponent as S, normalizeStyle as x, withCtx as C, createElementBlock as H } from "vue";
-import { KUI_ICON_SIZE_50 as u } from "./kongponents.es255.js";
-const N = ["aria-hidden"], c = '<path d="M8 18H16V16H8V18ZM8 14H16V12H8V14ZM6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H14L20 8V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 9V4H6V20H18V9H13Z" fill="currentColor"/>', I = /* @__PURE__ */ h({
-  __name: "ServiceDocumentIcon",
-  props: {
-    /** The accessibility text provided to screen readers */
-    title: {
-      type: String,
-      required: !1,
-      default: ""
-    },
-    /** The icon color. Defaults to `currentColor` which inherits text color from the parent element */
-    color: {
-      type: String,
-      required: !1,
-      default: "currentColor"
-    },
-    /** The CSS display property for the icon. Defaults to `block` */
-    display: {
-      type: String,
-      required: !1,
-      default: "block"
-    },
-    /** Whether the icon is just eye-candy or is meaningful to the page (should screen-readers ignore the icon?) */
-    decorative: {
-      type: Boolean,
-      required: !1,
-      default: !1
-    },
-    /** The icon size */
-    size: {
-      type: [Number, String],
-      required: !1,
-      default: u,
-      // if setting to the imported const fails, just pass a number of 24 as the default.
-      validator: (r) => {
-        if (typeof r == "number" && r > 0)
-          return !0;
-        if (typeof r == "string") {
-          const e = String(r).replace(/px/gi, ""), i = Number(e);
-          if (i && !isNaN(i) && Number.isInteger(i) && i > 0)
-            return !0;
-        }
-        return !1;
-      }
-    },
-    /** The HTML tag to utilize for the icon's wrapper element. Defaults to `span` */
-    as: {
-      type: String,
-      required: !1,
-      default: "span"
-    },
-    /**
-     * A boolean to disable prefixing any internal SVG ids with a unique string which is done to resolve the potential for multiple SVG instances on the same page and the SVG utilizing the same ids and references internally (e.g. in the `<defs>` tag).
-     * Typically only set to `true` during snapshot testing.
-     * Defaults to `false`.
-     */
-    staticIds: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(r) {
-    const e = r, i = s(() => {
-      if (typeof e.size == "number" && e.size > 0)
-        return `${e.size}px`;
-      if (typeof e.size == "string") {
-        const n = String(e.size).replace(/px/gi, ""), t = Number(n);
-        if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
-          return `${t}px`;
-      }
-      return u;
-    }), p = s(() => ({
-      boxSizing: "border-box",
-      color: e.color,
-      display: e.display,
-      flexShrink: "0",
-      height: i.value,
-      lineHeight: "0",
-      width: i.value,
-      pointerEvents: e.decorative ? "none" : void 0
-    })), f = (n) => {
-      const t = {}, y = Math.random().toString(36).substring(2, 12);
-      return n.replace(/id="([^"]+)"/g, (o, a) => {
-        const l = `${y}-${a}`;
-        return t[a] = l, `id="${l}"`;
-      }).replace(/#([^\s^")]+)/g, (o, a) => t[a] ? `#${t[a]}` : o);
-    }, g = {
-      "<": "&lt;",
-      ">": "&gt;",
-      '"': "&quot;",
-      "'": "&#39;",
-      "&": "&amp;"
-    }, m = (n) => n.replace(/[<>"'&]/g, (t) => g[t]), v = `${e.title ? `<title data-testid="kui-icon-svg-title">${m(e.title)}</title>` : ""}${e.staticIds ? c : f(c)}`;
-    return (n, t) => (d(), b(S(r.as), {
-      "aria-hidden": r.decorative ? "true" : void 0,
-      class: "kui-icon service-document-icon",
-      "data-testid": "kui-icon-wrapper-service-document-icon",
-      style: x(p.value),
-      tabindex: r.decorative ? "-1" : void 0
-    }, {
-      default: C(() => [
-        (d(), H("svg", {
-          "aria-hidden": r.decorative ? "true" : void 0,
-          "data-testid": "kui-icon-svg-service-document-icon",
-          fill: "none",
-          height: "100%",
-          role: "img",
-          viewBox: "0 0 24 24",
-          width: "100%",
-          xmlns: "http://www.w3.org/2000/svg",
-          innerHTML: v
-        }, null, 8, N))
-      ]),
-      _: 1
-    }, 8, ["aria-hidden", "style", "tabindex"]));
+import { defineComponent as r, openBlock as n, createElementBlock as s, renderSlot as i, createVNode as e } from "vue";
+import t from "./kongponents.es61.js";
+const l = { class: "skeleton-loader" }, _ = /* @__PURE__ */ r({
+  __name: "SkeletonBase",
+  setup(a) {
+    return (o, d) => (n(), s("div", l, [
+      i(o.$slots, "default", {}, () => [
+        e(t, {
+          height: "1",
+          width: "100"
+        }),
+        e(t, {
+          height: "1",
+          width: "100"
+        }),
+        e(t, {
+          height: "1",
+          width: "100"
+        })
+      ], !0)
+    ]));
   }
 });
 export {
-  I as default
+  _ as default
 };