@kong/kongponents 9.48.4-pr.3023.cf9b01a.0 → 9.48.4

package/dist/kongponents.es238.js

@@ -1,17 +1,121 @@
-import u from "./kongponents.es349.js";
-import i from "./kongponents.es346.js";
-import m from "./kongponents.es350.js";
-import a from "./kongponents.es351.js";
-function y(r, n) {
-  if (r == null)
-    return {};
-  var o = u(a(r), function(t) {
-    return [t];
-  });
-  return n = i(n), m(r, o, function(t, f) {
-    return n(t, f[0]);
-  });
-}
+import { defineComponent as h, computed as d, createBlock as b, openBlock as s, resolveDynamicComponent as x, normalizeStyle as S, withCtx as N, createElementBlock as C } from "vue";
+import { KUI_ICON_SIZE_50 as u } from "./kongponents.es262.js";
+const k = ["aria-hidden"], p = '<path d="M11 16.5V8.35L8.4 10.95L7 9.5L12 4.5L17 9.5L15.6 10.95L13 8.35V16.5H11ZM6 20.5C5.45 20.5 4.97917 20.3042 4.5875 19.9125C4.19583 19.5208 4 19.05 4 18.5V15.5H6V18.5H18V15.5H20V18.5C20 19.05 19.8042 19.5208 19.4125 19.9125C19.0208 20.3042 18.55 20.5 18 20.5H6Z" fill="currentColor"/>', $ = /* @__PURE__ */ h({
+  __name: "UploadIcon",
+  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 = d(() => {
+      if (typeof e.size == "number" && e.size > 0)
+        return `${e.size}px`;
+      if (typeof e.size == "string") {
+        const a = String(e.size).replace(/px/gi, ""), t = Number(a);
+        if (t && !isNaN(t) && Number.isInteger(t) && t > 0)
+          return `${t}px`;
+      }
+      return u;
+    }), c = d(() => ({
+      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 = (a) => {
+      const t = {}, y = Math.random().toString(36).substring(2, 12);
+      return a.replace(/id="([^"]+)"/g, (o, n) => {
+        const l = `${y}-${n}`;
+        return t[n] = l, `id="${l}"`;
+      }).replace(/#([^\s^")]+)/g, (o, n) => t[n] ? `#${t[n]}` : o);
+    }, g = {
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;",
+      "&": "&amp;"
+    }, m = (a) => a.replace(/[<>"'&]/g, (t) => g[t]), v = `${e.title ? `<title data-testid="kui-icon-svg-title">${m(e.title)}</title>` : ""}${e.staticIds ? p : f(p)}`;
+    return (a, t) => (s(), b(x(r.as), {
+      "aria-hidden": r.decorative ? "true" : void 0,
+      class: "kui-icon upload-icon",
+      "data-testid": "kui-icon-wrapper-upload-icon",
+      style: S(c.value),
+      tabindex: r.decorative ? "-1" : void 0
+    }, {
+      default: N(() => [
+        (s(), C("svg", {
+          "aria-hidden": r.decorative ? "true" : void 0,
+          "data-testid": "kui-icon-svg-upload-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, k))
+      ]),
+      _: 1
+    }, 8, ["aria-hidden", "style", "tabindex"]));
+  }
+});
 export {
-  y as default
+  $ as default
 };

package/dist/kongponents.es24.js

@@ -1,6 +1,6 @@
 import { defineComponent as s, useSlots as m, computed as r, useId as u, createBlock as c, renderSlot as o, openBlock as f, mergeProps as h, unref as l, withCtx as a, createElementVNode as x, createTextVNode as p, toDisplayString as b } from "vue";
 import k from "./kongponents.es53.js";
-import { KUI_SPACE_20 as I } from "./kongponents.es172.js";
+import { KUI_SPACE_20 as I } from "./kongponents.es175.js";
 const v = ["id"], A = /* @__PURE__ */ s({
   inheritAttrs: !1,
   __name: "KTooltip",

package/dist/kongponents.es240.js

@@ -1,42 +1,54 @@
-import p from "./kongponents.es448.js";
-function f(t) {
-  if (typeof t == "function")
-    try {
-      t = t();
-    } catch {
-      t = "";
-    }
-  return Array.isArray(t) ? t = p(t) : t = String(t || ""), t;
-}
-var c = (
-  /** @class */
-  (function() {
-    function t(e) {
-      e === void 0 && (e = 0), this.items = /* @__PURE__ */ new Map(), this.ttl = e;
-    }
-    return t.prototype.serializeKey = function(e) {
-      return f(e);
-    }, t.prototype.get = function(e) {
-      var i = this.serializeKey(e);
-      return this.items.get(i);
-    }, t.prototype.set = function(e, i, s) {
-      var n = this.serializeKey(e), r = s || this.ttl, a = Date.now(), o = {
-        data: i,
-        createdAt: a,
-        expiresAt: r ? a + r : 1 / 0
-      };
-      this.dispatchExpire(r, o, n), this.items.set(n, o);
-    }, t.prototype.dispatchExpire = function(e, i, s) {
-      var n = this;
-      e && setTimeout(function() {
-        var r = Date.now(), a = r >= i.expiresAt;
-        a && n.delete(s);
-      }, e);
-    }, t.prototype.delete = function(e) {
-      this.items.delete(e);
-    }, t;
-  })()
-);
+import { defineComponent as c, computed as n, createElementBlock as m, openBlock as l, createElementVNode as a, normalizeClass as d, createBlock as r, createCommentVNode as u, unref as e, normalizeStyle as f, toDisplayString as p } from "vue";
+import z from "./kongponents.es263.js";
+import k from "./kongponents.es180.js";
+import v from "./kongponents.es201.js";
+import { KUI_ICON_SIZE_40 as o, KUI_COLOR_TEXT_INVERSE as i, KUI_COLOR_TEXT_PRIMARY as x } from "./kongponents.es175.js";
+import { normalizeSize as y } from "./kongponents.es187.js";
+const E = ["aria-current", "data-testid"], C = { class: "step-circle" }, $ = /* @__PURE__ */ c({
+  __name: "KStep",
+  props: {
+    label: {},
+    state: { default: "default" },
+    maxLabelWidth: {}
+  },
+  setup(t) {
+    const s = n(() => ({
+      maxWidth: y(t.maxLabelWidth)
+    }));
+    return (I, S) => (l(), m("li", {
+      "aria-current": t.state === "active" ? "step" : "false",
+      class: "step",
+      "data-testid": `step-${t.state}`
+    }, [
+      a("div", {
+        class: d(["step-container", `${t.state}`])
+      }, [
+        a("div", C, [
+          t.state === "completed" ? (l(), r(e(z), {
+            key: 0,
+            color: `var(--kui-color-text-inverse, ${e(i)})`,
+            size: e(o),
+            title: "Completed"
+          }, null, 8, ["color", "size"])) : t.state === "pending" ? (l(), r(e(v), {
+            key: 1,
+            color: `var(--kui-color-text-primary, ${e(x)})`,
+            size: e(o),
+            title: "Pending"
+          }, null, 8, ["color", "size"])) : t.state === "error" ? (l(), r(e(k), {
+            key: 2,
+            color: `var(--kui-color-text-inverse, ${e(i)})`,
+            size: e(o),
+            title: "Error"
+          }, null, 8, ["color", "size"])) : u("", !0)
+        ]),
+        a("span", {
+          class: "step-label",
+          style: f(s.value)
+        }, p(t.label), 5)
+      ], 2)
+    ], 8, E));
+  }
+});
 export {
-  c as default
+  $ as default
 };

package/dist/kongponents.es242.js

@@ -1,186 +1,42 @@
-import { defineComponent as O, mergeModels as j, useModel as P, ref as b, useId as J, computed as h, onMounted as K, watch as M, createElementBlock as c, openBlock as u, createBlock as I, createCommentVNode as g, unref as f, mergeProps as B, createElementVNode as r, createVNode as L, withDirectives as F, toDisplayString as k, normalizeClass as S, vModelText as A, Fragment as Q, Transition as X, withCtx as Z } from "vue";
-import { DatePicker as U } from "./kongponents.es360.js";
-import p from "./kongponents.es290.js";
-import _ from "./kongponents.es294.js";
-import G from "./kongponents.es197.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__ */ j({
-    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], 10), m = parseInt(t[1], 10), v = a.timeGranularity === "secondly" && t[2] ? parseInt(t[2], 10) : 0;
-      return { hours: l, minutes: m, seconds: v };
-    };
-    K(() => {
-      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(Q, { 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(X, {
-          mode: "out-in",
-          name: "kongponents-fade-transition"
-        }, {
-          default: Z(() => [
-            y.value && a.errorMessage ? (u(), c("div", ve, k(a.errorMessage), 1)) : g("", !0)
-          ]),
-          _: 1
-        })
-      ])) : g("", !0)
-    ]));
-  }
-});
+import p from "./kongponents.es448.js";
+function f(t) {
+  if (typeof t == "function")
+    try {
+      t = t();
+    } catch {
+      t = "";
+    }
+  return Array.isArray(t) ? t = p(t) : t = String(t || ""), t;
+}
+var c = (
+  /** @class */
+  (function() {
+    function t(e) {
+      e === void 0 && (e = 0), this.items = /* @__PURE__ */ new Map(), this.ttl = e;
+    }
+    return t.prototype.serializeKey = function(e) {
+      return f(e);
+    }, t.prototype.get = function(e) {
+      var i = this.serializeKey(e);
+      return this.items.get(i);
+    }, t.prototype.set = function(e, i, s) {
+      var n = this.serializeKey(e), r = s || this.ttl, a = Date.now(), o = {
+        data: i,
+        createdAt: a,
+        expiresAt: r ? a + r : 1 / 0
+      };
+      this.dispatchExpire(r, o, n), this.items.set(n, o);
+    }, t.prototype.dispatchExpire = function(e, i, s) {
+      var n = this;
+      e && setTimeout(function() {
+        var r = Date.now(), a = r >= i.expiresAt;
+        a && n.delete(s);
+      }, e);
+    }, t.prototype.delete = function(e) {
+      this.items.delete(e);
+    }, t;
+  })()
+);
 export {
-  he as default
+  c as default
 };

package/dist/{kongponents.es241.js → kongponents.es243.js}

@@ -1,6 +1,6 @@
 import { getCurrentInstance as $, ref as q, reactive as z, onMounted as J, onUnmounted as K, watch as N, isReadonly as Q, toRefs as X } from "vue";
 import D from "./kongponents.es449.js";
-import x from "./kongponents.es240.js";
+import x from "./kongponents.es242.js";
 var m = function() {
   return m = Object.assign || function(u) {
     for (var a, r = 1, i = arguments.length; r < i; r++) {

package/dist/kongponents.es244.js

@@ -1,25 +1,26 @@
-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
-  });
-}
+import { defineComponent as r, createElementBlock as n, openBlock as s, renderSlot as i, createVNode as e } from "vue";
+import t from "./kongponents.es58.js";
+const l = { class: "skeleton-loader" }, _ = /* @__PURE__ */ r({
+  __name: "SkeletonBase",
+  setup(a) {
+    return (o, d) => (s(), n("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 {
-  f as isClient,
-  u as isObject,
-  a as noop,
-  d as toArray,
-  s as tryOnScopeDispose,
-  l as watchImmediate
+  _ as default
 };

package/dist/kongponents.es246.js

@@ -1,4 +1,50 @@
-import f from "./kongponents.es191.js";
+import { defineComponent as h, useCssVars as k, computed as f, createElementBlock as t, openBlock as r, Fragment as s, renderList as c, createElementVNode as l, renderSlot as i, createVNode as n } from "vue";
+import d from "./kongponents.es58.js";
+import { KUI_SPACE_50 as C } from "./kongponents.es175.js";
+import { normalizeSize as p } from "./kongponents.es187.js";
+const _ = { class: "skeleton-card-wrapper" }, v = { class: "skeleton-card-header" }, w = { class: "skeleton-card-content" }, x = { class: "skeleton-card-footer" }, E = /* @__PURE__ */ h({
+  __name: "CardSkeleton",
+  props: {
+    cardCount: {},
+    maxWidth: {}
+  },
+  setup(o) {
+    k((e) => ({
+      v243e7eb5: u.value
+    }));
+    const u = f(() => o.maxWidth ? p(o.maxWidth) : o.cardCount === 1 ? "470px" : `calc((100% / 3) - ${C})`);
+    return (e, S) => (r(), t("div", _, [
+      (r(!0), t(s, null, c(o.cardCount, (m) => (r(), t("div", {
+        key: m,
+        class: "skeleton-card"
+      }, [
+        l("div", v, [
+          i(e.$slots, "card-header", {}, () => [
+            n(d, { width: "50" })
+          ], !0)
+        ]),
+        l("div", w, [
+          i(e.$slots, "card-content", {}, () => [
+            (r(), t(s, null, c(3, (a) => n(d, {
+              key: a,
+              width: "100"
+            })), 64)),
+            n(d, { width: "50" })
+          ], !0)
+        ]),
+        l("div", x, [
+          i(e.$slots, "card-footer", {}, () => [
+            (r(), t(s, null, c(2, (a) => n(d, {
+              key: a,
+              height: "2",
+              width: "5"
+            })), 64))
+          ], !0)
+        ])
+      ]))), 128))
+    ]));
+  }
+});
 export {
-  f as default
+  E as default
 };

package/dist/kongponents.es248.js

@@ -1,8 +1,36 @@
-import p from "./kongponents.es316.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 i, useCssVars as d, createElementBlock as t, openBlock as n, Fragment as a, renderList as c, renderSlot as m, createVNode as k } from "vue";
+import f from "./kongponents.es58.js";
+const p = { class: "skeleton-table-wrapper" }, b = /* @__PURE__ */ i({
+  __name: "TableSkeleton",
+  props: {
+    rows: {},
+    columns: {}
+  },
+  setup(s) {
+    d((e) => ({
+      v11294cba: e.columns
+    }));
+    const u = (e, r) => e === 1 && r === 1 || e !== 1 && r !== 1 ? "25" : "50";
+    return (e, r) => (n(), t("div", p, [
+      (n(!0), t(a, null, c(s.rows, (l) => (n(), t("div", {
+        key: l,
+        class: "skeleton-table-row"
+      }, [
+        m(e.$slots, "default", {}, () => [
+          (n(!0), t(a, null, c(s.columns, (o) => (n(), t("div", {
+            key: o,
+            class: "skeleton-cell-container"
+          }, [
+            k(f, {
+              class: "skeleton-cell",
+              width: u(o, l)
+            }, null, 8, ["width"])
+          ]))), 128))
+        ], !0)
+      ]))), 128))
+    ]));
+  }
+});
 export {
-  x as default
+  b as default
 };

package/dist/kongponents.es250.js

@@ -0,0 +1,25 @@
+import { defineComponent as s, createElementBlock as e, openBlock as t, Fragment as c, renderList as l, createElementVNode as m, createVNode as o } from "vue";
+import r from "./kongponents.es58.js";
+const a = { class: "skeleton-form-wrapper" }, f = /* @__PURE__ */ s({
+  __name: "FormSkeleton",
+  setup(i) {
+    return (d, p) => (t(), e("div", a, [
+      (t(), e(c, null, l(4, (n) => m("div", {
+        key: n,
+        class: "skeleton-form-row"
+      }, [
+        o(r, {
+          height: "2",
+          width: "10"
+        }),
+        o(r, {
+          height: "2",
+          width: "100"
+        })
+      ])), 64))
+    ]));
+  }
+});
+export {
+  f as default
+};