@3squared/forge-ui-3 0.6.0 → 0.6.1

package/dist/esm/forge-ui-3.js

@@ -1,14 +1,14 @@
 import fe from "primevue/message";
-import { defineComponent as $, openBlock as s, createBlock as w, normalizeProps as Q, guardReactiveProps as ee, withCtx as b, createElementVNode as m, normalizeClass as B, unref as u, createCommentVNode as F, createVNode as v, renderSlot as x, ref as M, createElementBlock as p, Fragment as D, mergeProps as S, onMounted as oe, watch as ge, computed as k, isRef as j, createTextVNode as P, toDisplayString as h, withDirectives as L, vShow as Y, mergeModels as q, useModel as R, createSlots as te, renderList as H, withKeys as J, useAttrs as de, withModifiers as G, normalizeStyle as he } from "vue";
+import { defineComponent as F, openBlock as s, createBlock as w, normalizeProps as Q, guardReactiveProps as ee, withCtx as b, createElementVNode as m, normalizeClass as _, unref as u, createCommentVNode as B, createVNode as v, renderSlot as k, ref as M, createElementBlock as p, Fragment as A, mergeProps as S, onMounted as oe, watch as ge, computed as x, isRef as j, createTextVNode as P, toDisplayString as h, withDirectives as L, vShow as Y, mergeModels as q, useModel as R, createSlots as te, renderList as H, withKeys as J, useAttrs as de, withModifiers as G, normalizeStyle as he } from "vue";
 import { Icon as C } from "@iconify/vue";
 import E from "primevue/button";
 import we from "primevue/toast";
-import ke from "primevue/checkbox";
+import xe from "primevue/checkbox";
 import { useField as W } from "vee-validate";
-import xe from "primevue/progressspinner";
-import _e from "primevue/dialog";
+import ke from "primevue/progressspinner";
+import $e from "primevue/dialog";
 import ne from "primevue/inputtext";
-import { vOnClickOutside as $e } from "@vueuse/components";
+import { vOnClickOutside as _e } from "@vueuse/components";
 import Fe from "primevue/menubar";
 import Be from "vue-multiselect";
 import Se from "primevue/calendar";
@@ -540,6 +540,7 @@ const Ue = {
 }, Xe = {
   // More PT options can be found in the ForgeTable file.
   dataTable: {
+    datatable: "position-relative",
     table: (e) => ({
       class: [
         "table position-relative",
@@ -567,9 +568,6 @@ const Ue = {
     }),
     loadingOverlay: () => ({
       class: "table-overlay table-spinner"
-    }),
-    loadingIcon: () => ({
-      class: "spinner-border border-0"
     })
   },
   paginator: {
@@ -817,7 +815,7 @@ const Ue = {
       };
     }
   }
-}, il = {
+}, sl = {
   ...Qe,
   ...Ue,
   ...ot,
@@ -847,7 +845,7 @@ const Ue = {
   directives: {
     ...tt
   }
-}, ae = /* @__PURE__ */ $({
+}, ae = /* @__PURE__ */ F({
   __name: "ForgeAlert",
   props: {
     severity: { default: "primary" },
@@ -868,28 +866,28 @@ const Ue = {
       return s(), w(l, Q(ee({ ...n.$attrs, ...t })), {
         messageicon: b(() => [
           m("div", {
-            class: B(t.icon ? "me-2 pe-1" : "")
+            class: _(t.icon ? "me-2 pe-1" : "")
           }, [
             t.icon ? (s(), w(u(C), {
               key: 0,
               "data-cy": "message-icon",
               icon: t.icon,
-              class: B(`text-${t.severity}`),
+              class: _(`text-${t.severity}`),
               height: 35
-            }, null, 8, ["icon", "class"])) : F("", !0)
+            }, null, 8, ["icon", "class"])) : B("", !0)
           ], 2)
         ]),
         closeicon: b(() => [
           v(u(C), { icon: "bi:x" })
         ]),
         default: b(() => [
-          x(n.$slots, "default")
+          k(n.$slots, "default")
         ]),
         _: 3
       }, 16);
     };
   }
-}), rl = /* @__PURE__ */ $({
+}), il = /* @__PURE__ */ F({
   __name: "ForgeActionButton",
   props: {
     action: {},
@@ -909,7 +907,7 @@ const Ue = {
     };
     return (l, o) => {
       const i = E;
-      return s(), p(D, null, [
+      return s(), p(A, null, [
         v(i, S({ ...n, ...l.$attrs }, {
           loading: t.value,
           disabled: t.value || n.disabled,
@@ -919,7 +917,7 @@ const Ue = {
       ], 64);
     };
   }
-}), rt = /* @__PURE__ */ m("div", null, null, -1), dt = ["for"], me = /* @__PURE__ */ $({
+}), rt = /* @__PURE__ */ m("div", null, null, -1), dt = ["for"], me = /* @__PURE__ */ F({
   __name: "ForgeCheckbox",
   props: {
     label: { default: "" },
@@ -958,15 +956,15 @@ const Ue = {
     }), ge(() => a.value, (y) => {
       i(y);
     });
-    const g = k(() => d.value.length > 0);
+    const g = x(() => d.value.length > 0);
     return (y, c) => {
-      const _ = ke;
-      return s(), p(D, null, [
+      const $ = xe;
+      return s(), p(A, null, [
         m("div", S({
           class: "d-flex",
           "data-cy": "checkbox-container"
         }, { ...y.$attrs }), [
-          v(_, S({
+          v($, S({
             id: a.name
           }, { ...a }, {
             modelValue: u(l),
@@ -981,10 +979,10 @@ const Ue = {
           }, 16, ["id", "modelValue", "input-class"]),
           m("label", {
             for: a.name,
-            class: B(`${a.disabled ? "opacity-50" : "cursor-pointer"}`),
+            class: _(`${a.disabled ? "opacity-50" : "cursor-pointer"}`),
             onClick: r
           }, [
-            x(y.$slots, "default", {}, () => [
+            k(y.$slots, "default", {}, () => [
               P(h(a.label), 1)
             ])
           ], 10, dt)
@@ -998,7 +996,7 @@ const Ue = {
       ], 64);
     };
   }
-}), ut = { class: "forge-loader" }, pe = /* @__PURE__ */ $({
+}), ut = { class: "forge-loader" }, pe = /* @__PURE__ */ F({
   __name: "ForgeLoader",
   props: {
     severity: { default: "primary" }
@@ -1006,16 +1004,16 @@ const Ue = {
   setup(e) {
     const t = e;
     return (n, a) => {
-      const l = xe;
+      const l = ke;
       return s(), p("div", ut, [
         v(l, {
           "animation-duration": ".75",
-          class: B(`text-${t.severity === void 0 ? "primary" : t.severity}`)
+          class: _(`text-${t.severity === void 0 ? "primary" : t.severity}`)
         }, null, 8, ["class"])
       ]);
     };
   }
-}), ct = ["href", "target"], dl = /* @__PURE__ */ $({
+}), ct = ["href", "target"], rl = /* @__PURE__ */ F({
   __name: "ForgeLink",
   props: {
     url: {},
@@ -1033,7 +1031,7 @@ const Ue = {
     iconName: {}
   },
   setup(e) {
-    const t = k(() => ({
+    const t = x(() => ({
       [`link-${e.severity}`]: e.severity,
       [`link-underline-${e.underlineSeverity}`]: e.underlineSeverity,
       [`link-opacity-${e.opacity}`]: e.opacity,
@@ -1042,7 +1040,7 @@ const Ue = {
       [`link-underline-opacity-${e.underlineHoverOpacity ?? e.hoverOpacity}-hover`]: e.underlineHoverOpacity || e.hoverOpacity,
       [`link-offset-${e.underlineOffset}`]: e.underlineOffset,
       "icon-link icon-link-hover": e.animateIconOnHover
-    })), n = k(() => ({
+    })), n = x(() => ({
       "order-2": e.positionIconEnd,
       "me-1": !e.positionIconEnd && !e.animateIconOnHover,
       "ms-1": e.positionIconEnd && !e.animateIconOnHover,
@@ -1051,17 +1049,17 @@ const Ue = {
     }));
     return (a, l) => (s(), p("a", {
       id: "link",
-      class: B(["cursor-pointer d-flex", t.value]),
+      class: _(["cursor-pointer d-flex", t.value]),
       href: a.url,
       target: a.target
     }, [
-      x(a.$slots, "default", {}, () => [
+      k(a.$slots, "default", {}, () => [
         a.iconName ? (s(), w(u(C), {
           key: 0,
           id: "link-icon",
           icon: a.iconName,
-          class: B(["bi my-auto", n.value])
-        }, null, 8, ["icon", "class"])) : F("", !0),
+          class: _(["bi my-auto", n.value])
+        }, null, 8, ["icon", "class"])) : B("", !0),
         P(" " + h(a.label), 1)
       ])
     ], 10, ct));
@@ -1081,7 +1079,7 @@ function mt(e) {
 const pt = { key: 0 }, yt = {
   class: "d-flex w-100",
   "data-cy": "footer"
-}, ul = /* @__PURE__ */ $({
+}, dl = /* @__PURE__ */ F({
   __name: "ForgeModal",
   props: /* @__PURE__ */ q({
     cancelText: { default: "Cancel" },
@@ -1147,7 +1145,7 @@ const pt = { key: 0 }, yt = {
         }
         l.value = !1;
       }
-    }, g = k(() => ({
+    }, g = x(() => ({
       root: [
         "modal modal-dialog modal-content h-auto m-0",
         {
@@ -1156,7 +1154,7 @@ const pt = { key: 0 }, yt = {
       ]
     }));
     return (y, c) => {
-      const _ = E, V = _e;
+      const $ = E, V = $e;
       return s(), w(V, S(a, {
         onMaximize: d,
         onUnmaximize: i,
@@ -1191,34 +1189,34 @@ const pt = { key: 0 }, yt = {
             }, {
               default: b(() => [
                 m("p", {
-                  class: B(o.value.message.length > 0 ? "my-auto" : "mb-0")
+                  class: _(o.value.message.length > 0 ? "my-auto" : "mb-0")
                 }, h(o.value.header), 3),
                 o.value.message.length > 0 ? (s(), p("ul", pt, [
-                  (s(!0), p(D, null, H(o.value.message, (N) => (s(), p("li", { key: N }, h(N), 1))), 128))
-                ])) : F("", !0)
+                  (s(!0), p(A, null, H(o.value.message, (N) => (s(), p("li", { key: N }, h(N), 1))), 128))
+                ])) : B("", !0)
               ]),
               _: 1
-            })) : F("", !0),
-            x(y.$slots, I, Q(ee(z || {}))),
-            l.value ? x(y.$slots, "loader", { key: 1 }, () => [
+            })) : B("", !0),
+            k(y.$slots, I, Q(ee(z || {}))),
+            l.value ? k(y.$slots, "loader", { key: 1 }, () => [
               v(pe, { "data-cy": "loader" })
-            ]) : F("", !0)
+            ]) : B("", !0)
           ])
         })),
         y.showFooter ? {
           name: "footer",
           fn: b(() => [
             m("div", yt, [
-              v(_, {
+              v($, {
                 label: y.cancelText,
-                class: B(a.cancelClass),
+                class: _(a.cancelClass),
                 outlined: "",
                 onClick: f,
                 id: "cancel-button"
               }, null, 8, ["label", "class"]),
-              v(_, {
+              v($, {
                 label: y.submitText,
-                class: B([a.submitClass, "ms-auto"]),
+                class: _([a.submitClass, "ms-auto"]),
                 onClick: r,
                 id: "submit-button"
               }, null, 8, ["label", "class"])
@@ -1229,7 +1227,7 @@ const pt = { key: 0 }, yt = {
       ]), 1040, ["pt"]);
     };
   }
-}), vt = ["id"], bt = { key: 0 }, ft = { key: 0 }, gt = { class: "d-flex justify-content-between align-items-center position-relative" }, ht = { key: 1 }, wt = { "data-cy": "readonly-value" }, kt = /* @__PURE__ */ $({
+}), vt = ["id"], bt = { key: 0 }, ft = { key: 0 }, gt = { class: "d-flex justify-content-between align-items-center position-relative" }, ht = { key: 1 }, wt = { "data-cy": "readonly-value" }, xt = /* @__PURE__ */ F({
   __name: "ForgeInlineEditor",
   props: /* @__PURE__ */ q({
     name: { default: "" },
@@ -1246,8 +1244,8 @@ const pt = { key: 0 }, yt = {
   emits: ["update:modelValue"],
   setup(e) {
     const t = e, n = R(e, "modelValue"), a = M(!1), l = M(), o = () => {
-      var _;
-      a.value = !a.value, (_ = l.value) == null || _.focus();
+      var $;
+      a.value = !a.value, ($ = l.value) == null || $.focus();
     }, i = async () => {
       if (c.value)
         return !1;
@@ -1267,21 +1265,21 @@ const pt = { key: 0 }, yt = {
     oe(() => {
       y.value = n.value;
     });
-    const c = k(() => g.value.length > 0);
-    return (_, V) => {
+    const c = x(() => g.value.length > 0);
+    return ($, V) => {
       const T = ne, I = E;
       return s(), p("div", {
         id: t.name
       }, [
-        _.readonly ? (s(), p("div", ht, [
-          x(_.$slots, "default", {}, () => [
+        $.readonly ? (s(), p("div", ht, [
+          k($.$slots, "default", {}, () => [
             m("span", wt, h(u(y)), 1)
           ])
         ])) : (s(), p("div", bt, [
           a.value ? (s(), p("div", ft, [
             L((s(), p("div", gt, [
-              x(_.$slots, "editor", {
-                class: B({ "is-invalid": c.value }),
+              k($.$slots, "editor", {
+                class: _({ "is-invalid": c.value }),
                 editFinished: i,
                 cancel: d,
                 val: u(y)
@@ -1293,7 +1291,7 @@ const pt = { key: 0 }, yt = {
                   modelValue: u(y),
                   "onUpdate:modelValue": V[0] || (V[0] = (z) => j(y) ? y.value = z : null),
                   modelModifiers: { trim: !0 },
-                  class: B({ "is-invalid": c.value }),
+                  class: _({ "is-invalid": c.value }),
                   onKeydown: [
                     J(i, ["enter"]),
                     J(d, ["esc"])
@@ -1308,7 +1306,7 @@ const pt = { key: 0 }, yt = {
                 "data-cy": "clear-icon"
               })
             ])), [
-              [u($e), i]
+              [u(_e), i]
             ])
           ])) : (s(), p("div", {
             key: 1,
@@ -1316,9 +1314,9 @@ const pt = { key: 0 }, yt = {
             onClick: o,
             onFocus: o
           }, [
-            x(_.$slots, "default", {}, () => [
+            k($.$slots, "default", {}, () => [
               m("div", {
-                class: B(["pe-2 cursor-pointer", { "text-invalid": c.value }]),
+                class: _(["pe-2 cursor-pointer", { "text-invalid": c.value }]),
                 "data-cy": "value"
               }, h(u(y) ? u(y) : "Click to edit"), 3)
             ]),
@@ -1329,7 +1327,7 @@ const pt = { key: 0 }, yt = {
               default: b(() => [
                 v(u(C), {
                   icon: "bi:pencil",
-                  class: B(c.value ? "text-invalid" : "text-muted"),
+                  class: _(c.value ? "text-invalid" : "text-muted"),
                   "data-cy": "edit-icon",
                   onKeydown: J(o, ["enter"])
                 }, null, 8, ["class"])
@@ -1347,7 +1345,7 @@ const pt = { key: 0 }, yt = {
       ], 8, vt);
     };
   }
-}), xt = ["href"], cl = /* @__PURE__ */ $({
+}), kt = ["href"], ul = /* @__PURE__ */ F({
   __name: "ForgeNavbar",
   props: {
     severity: { default: "light" },
@@ -1364,7 +1362,7 @@ const pt = { key: 0 }, yt = {
     unstyled: { type: Boolean }
   },
   setup(e) {
-    const t = e, n = k(() => ({
+    const t = e, n = x(() => ({
       root: () => ({
         class: [
           "navbar container-fluid navbar-expand-lg",
@@ -1403,16 +1401,16 @@ const pt = { key: 0 }, yt = {
             class: "navbar-brand ms-3",
             "data-cy": "logo"
           }, [
-            x(a.$slots, "logo", {}, () => [
+            k(a.$slots, "logo", {}, () => [
               P(" Logo ")
             ])
-          ], 8, xt)
+          ], 8, kt)
         ]),
         menubuttonicon: b(() => [
-          x(a.$slots, "menubuttonicon", {}, () => [
+          k(a.$slots, "menubuttonicon", {}, () => [
             v(u(C), {
               icon: "bi:list",
-              class: B(t.severity === "light" ? "text-black" : "text-white"),
+              class: _(t.severity === "light" ? "text-black" : "text-white"),
               height: "24",
               "data-cy": "burger-icon"
             }, null, 8, ["class"])
@@ -1423,13 +1421,13 @@ const pt = { key: 0 }, yt = {
         H(a.$slots, (i, d) => ({
           name: d,
           fn: b((f) => [
-            x(a.$slots, d, Q(ee(f)))
+            k(a.$slots, d, Q(ee(f)))
           ])
         }))
       ]), 1040, ["pt"]);
     };
   }
-}), _t = /* @__PURE__ */ m("div", { class: "ps-1" }, "Select all", -1), $t = ["data-cy"], Ft = { class: "ps-1 w-100" }, Bt = { class: "multiselect__tag d-inline-flex" }, St = { class: "my-auto" }, Ct = /* @__PURE__ */ $({
+}), $t = /* @__PURE__ */ m("div", { class: "ps-1" }, "Select all", -1), _t = ["data-cy"], Ft = { class: "ps-1 w-100" }, Bt = { class: "multiselect__tag d-inline-flex" }, St = { class: "my-auto" }, Ct = /* @__PURE__ */ F({
   __name: "ForgeMultiSelect",
   props: {
     severity: { default: "primary" },
@@ -1442,13 +1440,13 @@ const pt = { key: 0 }, yt = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const n = e, a = (U, O) => {
+    const n = e, a = (D, O) => {
       const Z = {
         ...O,
         $isDisabled: O.$isDisabled ?? !1
       };
-      U(Z);
-    }, l = de(), o = t, { errors: i, value: d, errorMessage: f } = W(() => n.name, n.rules), r = M(!1), g = k(() => ({
+      D(Z);
+    }, l = de(), o = t, { errors: i, value: d, errorMessage: f } = W(() => n.name, n.rules), r = M(!1), g = x(() => ({
       multiple: !0,
       label: "label",
       trackBy: "id",
@@ -1461,26 +1459,26 @@ const pt = { key: 0 }, yt = {
       searchable: !!(l.searchable === null || l.searchable) && l.modelValue.length === l.options.length,
       async: !1,
       ...l
-    })), y = k(() => `forge-multiselect-${n.severity}`), c = k(() => `multiselect__option ${r.value ? " multiselect__option--highlight" : ""} ${_.value ? " multiselect__option--selected" : ""}`), _ = k(() => g.value && !(g.value.multiple || !n.showSelectAll || g.value.async) ? !1 : l.modelValue.length === l.options.length), V = k(() => i.value.length > 0), T = k(() => !!((l.allowEmpty == null || l.allowEmpty) && n.showClearSelection && (g.value.multiple ? l.modelValue.length > 0 : l.modelValue))), I = () => r.value = !0, z = () => r.value = !1, N = () => {
+    })), y = x(() => `forge-multiselect-${n.severity}`), c = x(() => `multiselect__option ${r.value ? " multiselect__option--highlight" : ""} ${$.value ? " multiselect__option--selected" : ""}`), $ = x(() => g.value && !(g.value.multiple || !n.showSelectAll || g.value.async) ? !1 : l.modelValue.length === l.options.length), V = x(() => i.value.length > 0), T = x(() => !!((l.allowEmpty == null || l.allowEmpty) && n.showClearSelection && (g.value.multiple ? l.modelValue.length > 0 : l.modelValue))), I = () => r.value = !0, z = () => r.value = !1, N = () => {
       d.value = g.value.multiple ? [] : null, o("update:modelValue", d.value);
-    }, le = (U) => {
-      o("update:modelValue", n.selectValue ? U.map((O) => O[n.selectValue]) : U);
-    }, ve = (U) => l.modelValue !== null ? l.modelValue.some((O) => g.value.selectValue ? U[n.selectValue] === O : U.id === O.id && U.label === O.label) : !1, be = () => {
-      _.value ? N() : (d.value = [...l.options], o("update:modelValue", [...l.options]));
+    }, le = (D) => {
+      o("update:modelValue", n.selectValue ? D.map((O) => O[n.selectValue]) : D);
+    }, ve = (D) => l.modelValue !== null ? l.modelValue.some((O) => g.value.selectValue ? D[n.selectValue] === O : D.id === O.id && D.label === O.label) : !1, be = () => {
+      $.value ? N() : (d.value = [...l.options], o("update:modelValue", [...l.options]));
     };
-    return (U, O) => {
+    return (D, O) => {
       const Z = me;
-      return s(), p(D, null, [
+      return s(), p(A, null, [
         v(u(Be), S(g.value, {
           class: [y.value, V.value ? "is-invalid" : ""],
           "data-cy": "multiselect",
           "onUpdate:modelValue": [
             le,
-            O[1] || (O[1] = (A) => j(d) ? d.value = A : null)
+            O[1] || (O[1] = (U) => j(d) ? d.value = U : null)
           ],
           modelValue: u(d)
         }), te({
-          caret: b(({ toggle: A }) => [
+          caret: b(({ toggle: U }) => [
             T.value ? (s(), w(u(C), {
               key: 0,
               icon: "bi:x",
@@ -1489,31 +1487,31 @@ const pt = { key: 0 }, yt = {
               "data-cy": "clear",
               height: "18px",
               width: "18px"
-            })) : F("", !0),
+            })) : B("", !0),
             v(u(C), {
               icon: "bi:chevron-down",
-              onClick: A,
+              onClick: U,
               class: "multiselect__select"
             }, null, 8, ["onClick"])
           ]),
-          tag: b(({ option: A, remove: K }) => [
+          tag: b(({ option: U, remove: K }) => [
             m("div", Bt, [
-              m("div", St, h(A.label), 1),
+              m("div", St, h(U.label), 1),
               v(u(C), {
                 icon: "bi:x",
                 class: "my-auto multiselect__tag-icon",
-                onMousedown: G((za) => a(K, A), ["prevent", "stop"]),
+                onMousedown: G((Ia) => a(K, U), ["prevent", "stop"]),
                 height: "18px",
                 width: "18px"
               }, null, 8, ["onMousedown"])
             ])
           ]),
           default: b(() => [
-            (s(!0), p(D, null, H(U.$slots, (A, K) => x(U.$slots, K, { slot: K })), 256))
+            (s(!0), p(A, null, H(D.$slots, (U, K) => k(D.$slots, K, { slot: K })), 256))
           ]),
           _: 2
         }, [
-          g.value.multiple && U.showSelectAll && !g.value.async ? {
+          g.value.multiple && D.showSelectAll && !g.value.async ? {
             name: "beforeList",
             fn: b(() => [
               m("li", {
@@ -1524,11 +1522,11 @@ const pt = { key: 0 }, yt = {
                 "data-cy": "toggle-all"
               }, [
                 m("span", {
-                  class: B(`${c.value}`)
+                  class: _(`${c.value}`)
                 }, [
-                  v(Z, { value: _.value }, {
+                  v(Z, { value: $.value }, {
                     default: b(() => [
-                      _t
+                      $t
                     ]),
                     _: 1
                   }, 8, ["value"])
@@ -1539,20 +1537,20 @@ const pt = { key: 0 }, yt = {
           } : void 0,
           g.value.multiple ? {
             name: "option",
-            fn: b(({ option: A }) => [
+            fn: b(({ option: U }) => [
               m("div", {
-                "data-cy": A.label
+                "data-cy": U.label
               }, [
                 (s(), w(Z, {
-                  value: ve(A),
-                  key: A
+                  value: ve(U),
+                  key: U
                 }, {
                   default: b(() => [
-                    m("div", Ft, h(A[g.value.label]), 1)
+                    m("div", Ft, h(U[g.value.label]), 1)
                   ]),
                   _: 2
                 }, 1032, ["value"]))
-              ], 8, $t)
+              ], 8, _t)
             ]),
             key: "1"
           } : void 0
@@ -1576,7 +1574,7 @@ const pt = { key: 0 }, yt = {
 }, Pt = { class: "d-inline-block" }, It = {
   key: 1,
   class: "p-2 item d-flex justify-content-between align-items-center"
-}, ml = /* @__PURE__ */ $({
+}, cl = /* @__PURE__ */ F({
   __name: "ForgeMultiSelectPreview",
   props: {
     title: { default: "Selected Items" },
@@ -1587,7 +1585,7 @@ const pt = { key: 0 }, yt = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const n = e, a = de(), l = t, o = k(() => `${a.modelValue.length} selected`), i = k(() => a.modelValue.length), d = (r) => {
+    const n = e, a = de(), l = t, o = x(() => `${a.modelValue.length} selected`), i = x(() => a.modelValue.length), d = (r) => {
       l("update:modelValue", r);
     }, f = (r) => {
       d(a.modelValue.filter((g) => g.id !== r));
@@ -1595,11 +1593,11 @@ const pt = { key: 0 }, yt = {
     return (r, g) => {
       const y = E;
       return s(), p("div", {
-        class: B(r.orientation === "column" ? "row" : ""),
+        class: _(r.orientation === "column" ? "row" : ""),
         "data-cy": "multiselect-preview"
       }, [
         m("div", {
-          class: B(r.orientation === "row" ? "col-12 mb-1" : "col"),
+          class: _(r.orientation === "row" ? "col-12 mb-1" : "col"),
           "data-cy": "multiselect-container"
         }, [
           v(Ct, {
@@ -1615,17 +1613,17 @@ const pt = { key: 0 }, yt = {
               P(h(""))
             ]),
             selection: b(() => [
-              r.$attrs.modelValue.length > 0 ? (s(), p("span", Vt, h(i.value) + " items selected", 1)) : F("", !0)
+              r.$attrs.modelValue.length > 0 ? (s(), p("span", Vt, h(i.value) + " items selected", 1)) : B("", !0)
             ]),
             default: b(() => [
-              (s(!0), p(D, null, H(r.$slots, (c, _) => x(r.$slots, _, { slot: _ })), 256))
+              (s(!0), p(A, null, H(r.$slots, (c, $) => k(r.$slots, $, { slot: $ })), 256))
             ]),
             _: 3
           }, 8, ["modelValue", "limit-text", "options"]),
-          x(r.$slots, "after-multi-select")
+          k(r.$slots, "after-multi-select")
         ], 2),
         m("div", {
-          class: B(r.orientation === "row" ? "col-12" : "col"),
+          class: _(r.orientation === "row" ? "col-12" : "col"),
           "data-cy": "options-preview"
         }, [
           m("div", {
@@ -1633,19 +1631,19 @@ const pt = { key: 0 }, yt = {
             class: "overflow-auto"
           }, [
             m("div", Tt, [
-              r.title ? (s(), p("div", Mt, h(r.title), 1)) : F("", !0),
-              (s(!0), p(D, null, H(r.$attrs.modelValue, (c) => (s(), p("div", {
+              r.title ? (s(), p("div", Mt, h(r.title), 1)) : B("", !0),
+              (s(!0), p(A, null, H(r.$attrs.modelValue, (c) => (s(), p("div", {
                 key: c.id,
                 class: "p-2 item d-flex justify-content-between align-items-center"
               }, [
-                x(r.$slots, "list-item", { item: c }, () => [
+                k(r.$slots, "list-item", { item: c }, () => [
                   m("span", Pt, h(c.shortLabel ? c.shortLabel : c.label), 1)
                 ]),
                 r.canRemoveItemFromPreview ? (s(), w(y, {
                   key: 0,
                   link: "",
                   class: "m-0 p-0 d-flex align-items-center",
-                  onClick: (_) => f(c.id)
+                  onClick: ($) => f(c.id)
                 }, {
                   default: b(() => [
                     v(u(C), {
@@ -1655,9 +1653,9 @@ const pt = { key: 0 }, yt = {
                     }, null, 8, ["data-cy"])
                   ]),
                   _: 2
-                }, 1032, ["onClick"])) : F("", !0)
+                }, 1032, ["onClick"])) : B("", !0)
               ]))), 128)),
-              r.$attrs.modelValue.length === 0 ? (s(), p("div", It, "No Items Selected.")) : F("", !0)
+              r.$attrs.modelValue.length === 0 ? (s(), p("div", It, "No Items Selected.")) : B("", !0)
             ])
           ], 4)
         ], 2)
@@ -1670,7 +1668,7 @@ const pt = { key: 0 }, yt = {
 }, Dt = {
   "data-cy": "slot",
   class: "d-flex align-items-center"
-}, pl = /* @__PURE__ */ $({
+}, ml = /* @__PURE__ */ F({
   __name: "ForgePageHeader",
   props: {
     title: {}
@@ -1680,11 +1678,11 @@ const pt = { key: 0 }, yt = {
     return (n, a) => (s(), p("div", zt, [
       m("h3", Ot, h(t.title), 1),
       m("div", Dt, [
-        x(n.$slots, "default")
+        k(n.$slots, "default")
       ])
     ]));
   }
-}), Ut = { "data-cy": "before-slot" }, At = { class: "position-relative" }, Nt = { "data-cy": "after-slot" }, Et = /* @__PURE__ */ $({
+}), Ut = { "data-cy": "before-slot" }, At = { class: "position-relative" }, Nt = { "data-cy": "after-slot" }, Et = /* @__PURE__ */ F({
   __name: "ForgeDatepicker",
   props: /* @__PURE__ */ q({
     severity: { default: "primary" },
@@ -1758,7 +1756,7 @@ const pt = { key: 0 }, yt = {
   setup(e) {
     const t = e, n = R(e, "modelValue"), a = () => {
       n.value = null;
-    }, l = k(() => ({
+    }, l = x(() => ({
       day: ({ context: o }) => ({
         class: [
           `text-center date-${t.severity === void 0 ? "primary" : t.severity}`,
@@ -1851,9 +1849,9 @@ const pt = { key: 0 }, yt = {
     }));
     return (o, i) => {
       const d = Se;
-      return s(), p(D, null, [
+      return s(), p(A, null, [
         m("span", Ut, [
-          x(o.$slots, "before")
+          k(o.$slots, "before")
         ]),
         m("div", At, [
           v(d, S({ ...t, ...o.$attrs }, {
@@ -1872,30 +1870,30 @@ const pt = { key: 0 }, yt = {
             "data-cy": "icon",
             icon: "bi:x",
             onClick: a,
-            class: B(["position-absolute end-0 top-50 bottom-50 my-auto text-muted cursor-pointer", t.showIcon ? "datepicker-close-icon" : "me-2"])
+            class: _(["position-absolute end-0 top-50 bottom-50 my-auto text-muted cursor-pointer", t.showIcon ? "datepicker-close-icon" : "me-2"])
           }, null, 8, ["class"]), [
             [Y, t.modelValue]
           ])
         ]),
         m("span", Nt, [
-          x(o.$slots, "after")
+          k(o.$slots, "after")
         ])
       ], 64);
     };
   }
-}), yl = /* @__PURE__ */ $({
+}), pl = /* @__PURE__ */ F({
   __name: "ForgeRemainingCharacters",
   props: {
     maxCount: { default: 300 },
     currentCount: {}
   },
   setup(e) {
-    const t = e, n = k(() => t.maxCount - t.currentCount);
+    const t = e, n = x(() => t.maxCount - t.currentCount);
     return (a, l) => (s(), p("div", {
-      class: B(n.value < 0 ? "text-danger" : "")
+      class: _(n.value < 0 ? "text-danger" : "")
     }, "Remaining characters: " + h(n.value), 3));
   }
-}), Rt = /* @__PURE__ */ m("hr", null, null, -1), Lt = { class: "d-flex justify-content-between" }, vl = /* @__PURE__ */ $({
+}), Rt = /* @__PURE__ */ m("hr", null, null, -1), Lt = { class: "d-flex justify-content-between" }, yl = /* @__PURE__ */ F({
   __name: "ForgeForm",
   props: {
     onSubmit: {},
@@ -1927,10 +1925,10 @@ const pt = { key: 0 }, yt = {
         class: "position-relative shadow-sm border p-4 bg-white",
         onSubmit: G(l, ["prevent"])
       }), [
-        o.hideTitle ? F("", !0) : (s(), p(D, { key: 0 }, [
-          x(o.$slots, "title", {}, () => [
+        o.hideTitle ? B("", !0) : (s(), p(A, { key: 0 }, [
+          k(o.$slots, "title", {}, () => [
             m("h3", {
-              class: B(o.titleClass),
+              class: _(o.titleClass),
               "data-cy": "form-title"
             }, h(o.title), 3)
           ]),
@@ -1942,18 +1940,18 @@ const pt = { key: 0 }, yt = {
           "data-cy": "error"
         }, {
           default: b(() => [
-            x(o.$slots, "error", {
+            k(o.$slots, "error", {
               error: a.value.message
             }, () => [
               P(h(a.value.message), 1)
             ])
           ]),
           _: 3
-        })) : F("", !0),
-        x(o.$slots, "default"),
+        })) : B("", !0),
+        k(o.$slots, "default"),
         m("div", Lt, [
-          x(o.$slots, "cancel", {}, () => [
-            o.hideCancel ? F("", !0) : (s(), w(d, {
+          k(o.$slots, "cancel", {}, () => [
+            o.hideCancel ? B("", !0) : (s(), w(d, {
               key: 0,
               "data-cy": "cancel-btn",
               type: "reset",
@@ -1967,7 +1965,7 @@ const pt = { key: 0 }, yt = {
               _: 1
             }))
           ]),
-          x(o.$slots, "submit", { submit: l }, () => [
+          k(o.$slots, "submit", { submit: l }, () => [
             v(d, {
               "data-cy": "submit-btn",
               type: "submit",
@@ -1984,11 +1982,11 @@ const pt = { key: 0 }, yt = {
         n.value ? (s(), w(pe, {
           key: 2,
           "data-cy": "loading-spinner"
-        })) : F("", !0)
+        })) : B("", !0)
       ], 16);
     };
   }
-}), Ht = { class: "d-flex flex-column" }, jt = ["for"], bl = /* @__PURE__ */ $({
+}), Ht = { class: "d-flex flex-column" }, jt = ["for"], vl = /* @__PURE__ */ F({
   __name: "ForgeFormField",
   props: {
     name: {},
@@ -1999,14 +1997,14 @@ const pt = { key: 0 }, yt = {
     placeholder: { default: "" }
   },
   setup(e) {
-    const t = e, { errors: n, value: a, errorMessage: l } = W(() => t.name, t.rules), o = k(() => n.value.length > 0);
+    const t = e, { errors: n, value: a, errorMessage: l } = W(() => t.name, t.rules), o = x(() => n.value.length > 0);
     return (i, d) => {
       const f = Ve, r = Ce, g = ne;
       return s(), p("div", Ht, [
         t.type !== "checkbox" ? (s(), p("label", {
           key: 0,
           for: t.name
-        }, h(t.label), 9, jt)) : F("", !0),
+        }, h(t.label), 9, jt)) : B("", !0),
         t.type === "checkbox" ? (s(), w(me, S({
           key: 1,
           id: t.name,
@@ -2042,18 +2040,18 @@ const pt = { key: 0 }, yt = {
           modelValue: u(a),
           "onUpdate:modelValue": d[3] || (d[3] = (y) => j(a) ? a.value = y : null),
           class: { "is-invalid": o.value }
-        }, i.$attrs), null, 16, ["id", "placeholder", "modelValue", "class"])) : F("", !0),
+        }, i.$attrs), null, 16, ["id", "placeholder", "modelValue", "class"])) : B("", !0),
         t.type !== "checkbox" ? L((s(), p("small", {
           key: 6,
           "data-cy": "error",
           class: "invalid-feedback"
         }, h(u(l)), 513)), [
           [Y, o.value]
-        ]) : F("", !0)
+        ]) : B("", !0)
       ]);
     };
   }
-}), fl = /* @__PURE__ */ $({
+}), bl = /* @__PURE__ */ F({
   __name: "ForgeChips",
   props: {
     chipSeverity: { default: "primary" },
@@ -2083,7 +2081,7 @@ const pt = { key: 0 }, yt = {
   setup(e) {
     const t = e, { errors: n, value: a, errorMessage: l } = W(() => t.name, t.rules);
     a.value = t.modelValue;
-    const o = k(() => n.value.length > 0), i = k(() => ({
+    const o = x(() => n.value.length > 0), i = x(() => ({
       inputtoken: "list-unstyled",
       input: "border-0",
       container: ({ props: d }) => ({
@@ -2116,7 +2114,7 @@ const pt = { key: 0 }, yt = {
     }));
     return (d, f) => {
       const r = Te;
-      return s(), p(D, null, [
+      return s(), p(A, null, [
         v(r, S({ ...t, ...d.$attrs }, {
           pt: i.value,
           "model-value": u(a),
@@ -2142,7 +2140,7 @@ const pt = { key: 0 }, yt = {
       ], 64);
     };
   }
-}), Yt = /* @__PURE__ */ $({
+}), Yt = /* @__PURE__ */ F({
   __name: "ForgeProgressBar",
   props: {
     severity: { default: "primary" },
@@ -2157,7 +2155,7 @@ const pt = { key: 0 }, yt = {
     unstyled: { type: Boolean }
   },
   setup(e) {
-    const t = e, n = k(() => t.striped ? "progress-bar-striped" : null), a = k(() => t.animate ? "progress-bar-animated" : null), l = k(() => {
+    const t = e, n = x(() => t.striped ? "progress-bar-striped" : null), a = x(() => t.animate ? "progress-bar-animated" : null), l = x(() => {
       switch (t.severity) {
         case "brand":
           return "bg-brand";
@@ -2176,7 +2174,7 @@ const pt = { key: 0 }, yt = {
         default:
           return "bg-primary";
       }
-    }), o = k(() => ({
+    }), o = x(() => ({
       root: {
         style: t.pixelWidth ? `width: ${t.pixelWidth}px` : ""
       },
@@ -2188,13 +2186,13 @@ const pt = { key: 0 }, yt = {
       const f = Me;
       return s(), w(f, S({ ...i.$attrs, ...t }, { pt: o.value }), {
         default: b(() => [
-          x(i.$slots, "default")
+          k(i.$slots, "default")
         ]),
         _: 3
       }, 16, ["pt"]);
     };
   }
-}), qt = { class: "value text-white w-100 text-center" }, gl = /* @__PURE__ */ $({
+}), qt = { class: "value text-white w-100 text-center" }, fl = /* @__PURE__ */ F({
   __name: "ForgeStatWidget",
   props: {
     size: { default: "md" },
@@ -2206,14 +2204,14 @@ const pt = { key: 0 }, yt = {
       class: `d-flex shadow m-2 align-items-center widget--${t.size} bg-${t.severity}`
     }), [
       m("span", qt, [
-        x(n.$slots, "default")
+        k(n.$slots, "default")
       ])
     ], 16));
   }
 }), Gt = {
   class: "d-flex flex-column align-items-center",
   "data-cy": "stepper"
-}, Kt = { class: "d-flex align-items-center justify-content-center w-100" }, hl = /* @__PURE__ */ $({
+}, Kt = { class: "d-flex align-items-center justify-content-center w-100" }, gl = /* @__PURE__ */ F({
   __name: "ForgeStepper",
   props: {
     currentStep: { default: 0 },
@@ -2240,10 +2238,10 @@ const pt = { key: 0 }, yt = {
           l.value++;
         while (a.model[l.value].disabled);
       n("update:currentStep", l.value);
-    }, d = k(() => {
+    }, d = x(() => {
       const r = a.model.findIndex((g) => !g.disabled);
       return !(r < l.value && r > -1);
-    }), f = k(() => ({
+    }), f = x(() => ({
       menuitem: (r) => ({
         class: [{
           "cursor-pointer": !r.context.disabled
@@ -2280,7 +2278,7 @@ const pt = { key: 0 }, yt = {
       })
     }));
     return (r, g) => {
-      const y = E, c = Ie, _ = Pe;
+      const y = E, c = Ie, $ = Pe;
       return s(), p("div", Gt, [
         m("div", Kt, [
           v(y, {
@@ -2306,12 +2304,12 @@ const pt = { key: 0 }, yt = {
             readonly: !1
           }, null, 8, ["active-step", "model", "pt"])
         ]),
-        v(_),
-        (s(!0), p(D, null, H(a.model, (V, T) => (s(), p("div", {
+        v($),
+        (s(!0), p(A, null, H(a.model, (V, T) => (s(), p("div", {
           key: T,
           class: "w-100"
         }, [
-          T === l.value ? x(r.$slots, V.key ?? V.label, {
+          T === l.value ? k(r.$slots, V.key ?? V.label, {
             key: 0,
             nextStep: i,
             previousStep: o
@@ -2331,12 +2329,12 @@ const pt = { key: 0 }, yt = {
               ]),
               _: 2
             }, 1024)
-          ]) : F("", !0)
+          ]) : B("", !0)
         ]))), 128))
       ]);
     };
   }
-}), Wt = { class: "p-4 text-wrap w-100" }, Zt = { class: "p-4 text-wrap w-100" }, wl = /* @__PURE__ */ $({
+}), Wt = { class: "p-4 text-wrap w-100" }, Zt = { class: "p-4 text-wrap w-100" }, hl = /* @__PURE__ */ F({
   __name: "ForgeTile",
   props: {
     severity: { default: "primary" },
@@ -2344,19 +2342,19 @@ const pt = { key: 0 }, yt = {
     clickable: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, n = k(() => `${t.severity === void 0 ? "tile-primary" : `tile-${t.severity}`} ${t.barPosition === "none" ? "border-0" : `tile-bar-${t.barPosition}`}`), a = k(() => `${t.severity === void 0 ? "tile-primary border-primary" : `tile-${t.severity} border-${t.severity}`} ${t.barPosition === "none" ? "" : `tile-bar-${t.barPosition}`}`);
+    const t = e, n = x(() => `${t.severity === void 0 ? "tile-primary" : `tile-${t.severity}`} ${t.barPosition === "none" ? "border-0" : `tile-bar-${t.barPosition}`}`), a = x(() => `${t.severity === void 0 ? "tile-primary border-primary" : `tile-${t.severity} border-${t.severity}`} ${t.barPosition === "none" ? "" : `tile-bar-${t.barPosition}`}`);
     return (l, o) => {
       const i = E;
       return t.clickable ? (s(), w(i, {
         key: 0,
-        class: B(["d-flex w-100 p-0 text-body", n.value]),
+        class: _(["d-flex w-100 p-0 text-body", n.value]),
         severity: t.severity,
         unstyled: "",
         "data-cy": "button-tile"
       }, {
         default: b(() => [
           m("div", Wt, [
-            x(l.$slots, "default", {}, () => [
+            k(l.$slots, "default", {}, () => [
               P("Tile Content")
             ])
           ])
@@ -2364,11 +2362,11 @@ const pt = { key: 0 }, yt = {
         _: 3
       }, 8, ["severity", "class"])) : (s(), p("div", {
         key: 1,
-        class: B(["d-flex w-100", a.value]),
+        class: _(["d-flex w-100", a.value]),
         "data-cy": "tile"
       }, [
         m("div", Zt, [
-          x(l.$slots, "default", {}, () => [
+          k(l.$slots, "default", {}, () => [
             P("Tile Content")
           ])
         ])
@@ -2385,7 +2383,7 @@ const Jt = {
 }, Xt = { class: "ms-2" }, Qt = { key: 0 }, ea = /* @__PURE__ */ m("span", { class: "mx-2" }, "|", -1), ta = {
   class: "w-auto",
   "data-cy": "total"
-}, aa = /* @__PURE__ */ $({
+}, aa = /* @__PURE__ */ F({
   __name: "ForgePaginationHeader",
   props: {
     total: {},
@@ -2396,7 +2394,7 @@ const Jt = {
   setup(e, { emit: t }) {
     const n = t, a = e, l = (i) => {
       n("update:perPage", i.value);
-    }, o = k(() => {
+    }, o = x(() => {
       const i = Math.ceil(a.total / a.perPage);
       return `${i} ${X(i, "page")}`;
     });
@@ -2412,13 +2410,10 @@ const Jt = {
       a.total ? (s(), p("div", Qt, [
         ea,
         m("span", ta, h(a.total) + " " + h(u(X)(a.total, "result")) + " across " + h(o.value), 1)
-      ])) : F("", !0)
+      ])) : B("", !0)
     ]));
   }
-}), la = { "data-cy": "above-table-slot" }, oa = { class: "d-flex" }, na = { class: "d-flex align-items-end mb-2" }, sa = { key: 0 }, ia = { class: "ms-auto" }, ra = {
-  class: "d-flex",
-  "data-cy": "legacy-page-size"
-}, da = /* @__PURE__ */ m("span", { class: "me-2 my-auto text-nowrap" }, "Page Size:", -1), ua = { "data-cy": "legacy-total" }, kl = /* @__PURE__ */ $({
+}), la = { class: "position-relative" }, oa = { "data-cy": "above-table-slot" }, na = { class: "d-flex" }, sa = { class: "d-flex align-items-end mb-2" }, ia = { key: 0 }, ra = { class: "ms-auto" }, da = /* @__PURE__ */ m("span", { class: "me-2 my-auto text-nowrap" }, "Page Size:", -1), wl = /* @__PURE__ */ F({
   __name: "ForgeTable",
   props: {
     value: {},
@@ -2505,12 +2500,12 @@ const Jt = {
       f(a.filters);
     }, f = (c) => {
       n("update:filters", c);
-    }, r = k(() => {
+    }, r = x(() => {
       const c = Math.ceil((a.total ?? a.value.length) / o.value);
       return `${c} ${X(c, "page")}`;
     }), g = () => {
       i.value.exportCSV();
-    }, y = k(() => ({
+    }, y = x(() => ({
       thead: () => ({
         class: [
           {
@@ -2518,11 +2513,24 @@ const Jt = {
           }
         ],
         style: "position: "
+      }),
+      loadingIcon: () => ({
+        class: [
+          "spinner-border border-0",
+          {
+            "text-brand": a.severity === "brand",
+            "text-primary": a.severity === "primary",
+            "text-success": a.severity === "success",
+            "text-warning": a.severity === "warning",
+            "text-danger": a.severity === "danger",
+            "text-info": a.severity === "info"
+          }
+        ]
       })
     }));
-    return (c, _) => (s(), p(D, null, [
-      m("span", la, [
-        x(c.$slots, "above-table")
+    return (c, $) => (s(), p("div", la, [
+      m("span", oa, [
+        k(c.$slots, "above-table")
       ]),
       v(u(ze), S({
         class: ["w-100", `${a.severity ? `forge-table-${a.severity}` : ""}`]
@@ -2537,91 +2545,101 @@ const Jt = {
         "data-cy": "table"
       }), te({
         header: b(() => [
-          m("div", oa, [
+          m("div", {
+            class: _(a.loading ? "opacity-50" : "")
+          }, [
             m("div", na, [
-              c.paginator && !c.legacyPaginationFooter ? (s(), p("span", sa, [
-                v(aa, {
-                  total: c.total ?? c.value.length,
-                  "page-sizes": l.value,
-                  "per-page": o.value,
-                  "onUpdate:perPage": _[0] || (_[0] = (V) => o.value = V)
-                }, null, 8, ["total", "page-sizes", "per-page"])
-              ])) : F("", !0)
-            ]),
-            m("div", ia, [
-              c.showClearButton ? (s(), w(u(E), {
-                key: 0,
-                outlined: "",
-                class: B(c.showExporterButton ? "me-2" : ""),
-                onClick: d,
-                "data-cy": "clear-all"
-              }, {
-                default: b(() => [
-                  v(u(C), {
-                    icon: "bi:funnel-fill",
-                    width: "24",
-                    height: "24"
-                  }),
-                  P(" Clear ")
-                ]),
-                _: 1
-              }, 8, ["class"])) : F("", !0),
-              c.showExporterButton ? (s(), w(u(E), {
-                key: 1,
-                outlined: "",
-                onClick: g,
-                "data-cy": "exporter"
-              }, {
-                default: b(() => [
-                  v(u(C), {
-                    icon: "typcn:export",
-                    width: "24",
-                    height: "24"
-                  }),
-                  P(" Export ")
-                ]),
-                _: 1
-              })) : F("", !0)
+              m("div", sa, [
+                c.paginator && !c.legacyPaginationFooter ? (s(), p("span", ia, [
+                  v(aa, {
+                    total: c.total ?? c.value.length,
+                    "page-sizes": l.value,
+                    "per-page": o.value,
+                    "onUpdate:perPage": $[0] || ($[0] = (V) => o.value = V)
+                  }, null, 8, ["total", "page-sizes", "per-page"])
+                ])) : B("", !0)
+              ]),
+              m("div", ra, [
+                c.showClearButton ? (s(), w(u(E), {
+                  key: 0,
+                  outlined: "",
+                  class: _(c.showExporterButton ? "me-2" : ""),
+                  onClick: d,
+                  "data-cy": "clear-all"
+                }, {
+                  default: b(() => [
+                    v(u(C), {
+                      icon: "bi:funnel-fill",
+                      width: "24",
+                      height: "24"
+                    }),
+                    P(" Clear ")
+                  ]),
+                  _: 1
+                }, 8, ["class"])) : B("", !0),
+                c.showExporterButton ? (s(), w(u(E), {
+                  key: 1,
+                  outlined: "",
+                  onClick: g,
+                  "data-cy": "exporter"
+                }, {
+                  default: b(() => [
+                    v(u(C), {
+                      icon: "typcn:export",
+                      width: "24",
+                      height: "24"
+                    }),
+                    P(" Export ")
+                  ]),
+                  _: 1
+                })) : B("", !0)
+              ])
             ])
-          ])
+          ], 2)
         ]),
         default: b(() => [
-          x(c.$slots, "default")
+          k(c.$slots, "default")
         ]),
         _: 2
       }, [
         H(c.$slots, (V, T) => ({
           name: T,
           fn: b((I) => [
-            x(c.$slots, T, Q(ee(I || {})))
+            k(c.$slots, T, Q(ee(I || {})))
           ])
         })),
         c.legacyPaginationFooter ? {
           name: "paginatorstart",
           fn: b(() => [
-            m("span", ra, [
+            m("span", {
+              class: _(["d-flex", a.loading ? "opacity-50" : ""]),
+              "data-cy": "legacy-page-size"
+            }, [
               da,
               v(u(se), {
                 options: l.value,
                 modelValue: o.value,
-                "onUpdate:modelValue": _[1] || (_[1] = (V) => o.value = V),
+                "onUpdate:modelValue": $[1] || ($[1] = (V) => o.value = V),
                 class: "ms-2"
               }, null, 8, ["options", "modelValue"])
-            ])
+            ], 2)
           ]),
           key: "0"
         } : void 0,
         c.legacyPaginationFooter ? {
           name: "paginatorend",
           fn: b(() => [
-            m("span", ua, h(c.total ?? c.value.length) + " " + h(u(X)(c.total ?? c.value.length, "result")) + " across " + h(r.value), 1)
+            m("span", {
+              "data-cy": "legacy-total",
+              class: _(a.loading ? "opacity-50" : "")
+            }, h(c.total ?? c.value.length) + " " + h(u(X)(c.total ?? c.value.length, "result")) + " across " + h(r.value), 3)
           ]),
           key: "1"
         } : void 0
       ]), 1040, ["class", "rows", "total-records", "filter-display", "pt"])
-    ], 64));
+    ]));
   }
-}), xl = /* @__PURE__ */ $({
+}), xl = /* @__PURE__ */ F({
   __name: "ForgeFilterHeader",
   props: {
     dataType: {},
@@ -2659,7 +2677,7 @@ function ye(e, t, n, a) {
     })) : t[i].status = "Duplicate";
   }), t;
 }
-async function ca(e, t) {
+async function ua(e, t) {
   if (e === "Uploaded" && t !== null)
     try {
       await new ce(t).delete();
@@ -2682,13 +2700,13 @@ function ie(e, t = !0, n = 1) {
   while (Math.round(Math.abs(e) * i) / i >= a && o < l.length - 1);
   return e.toFixed(n) + " " + l[o];
 }
-function ma(e) {
+function ca(e) {
   return ["image/gif", "image/png", "image/jpeg", "image/svg"].includes(e);
 }
-function pa(e) {
+function ma(e) {
   return URL.createObjectURL(e);
 }
-const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disabled", "multiple"], ba = /* @__PURE__ */ $({
+const pa = { class: "d-flex justify-content-between" }, ya = ["accept", "disabled", "multiple"], va = /* @__PURE__ */ F({
   __name: "UploadButton",
   props: /* @__PURE__ */ q({
     acceptedFileTypes: {},
@@ -2700,11 +2718,11 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = R(e, "modelValue"), n = k(() => e.maxFileInput <= t.value.length), a = (l) => {
+    const t = R(e, "modelValue"), n = x(() => e.maxFileInput <= t.value.length), a = (l) => {
       t.value = ye(l, t.value, e.acceptedFileTypes, e.maxFileInput);
     };
-    return (l, o) => (s(), p("div", ya, [
-      x(l.$slots, "message"),
+    return (l, o) => (s(), p("div", pa, [
+      k(l.$slots, "message"),
       m("div", null, [
         m("input", {
           id: "file-input",
@@ -2714,13 +2732,13 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
           disabled: n.value,
           multiple: l.maxFileInput > 1,
           onInput: o[0] || (o[0] = (i) => a([...i.target.files]))
-        }, null, 40, va),
+        }, null, 40, ya),
         m("label", {
-          class: B([{ disabled: n.value }, "btn btn-primary"]),
+          class: _([{ disabled: n.value }, "btn btn-primary"]),
           id: "file-input-button",
           for: "file-input"
         }, [
-          x(l.$slots, "button-content", {}, () => [
+          k(l.$slots, "button-content", {}, () => [
             v(u(C), {
               icon: "bi:upload",
               class: "me-2",
@@ -2735,17 +2753,17 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
         class: "ms-auto",
         key: l.acceptedFileTypes.length,
         id: "accepted-file-types"
-      }, "Accepted File Types: " + h(l.acceptedFileTypes.map((i) => i.split("/").pop()).join(", ")), 1)) : F("", !0)
+      }, "Accepted File Types: " + h(l.acceptedFileTypes.map((i) => i.split("/").pop()).join(", ")), 1)) : B("", !0)
     ]));
   }
-}), fa = {
+}), ba = {
   key: 0,
   class: "py-4 px-3",
   id: "placeholder-message"
-}, ga = {
+}, fa = {
   key: 1,
   class: "d-flex flex-column"
-}, ha = /* @__PURE__ */ $({
+}, ga = /* @__PURE__ */ F({
   __name: "DragDropArea",
   props: /* @__PURE__ */ q({
     maxFileInput: {},
@@ -2757,17 +2775,17 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = R(e, "modelValue"), n = M(!1), a = k(() => e.maxFileInput <= t.value.length), l = (o) => {
+    const t = R(e, "modelValue"), n = M(!1), a = x(() => e.maxFileInput <= t.value.length), l = (o) => {
       n.value = !1, o.dataTransfer.files.length > e.maxFileInput || a.value ? o.preventDefault() : t.value = ye([...o.dataTransfer.files], t.value, e.acceptedFileTypes, e.maxFileSize);
     };
     return (o, i) => (s(), p("div", {
       id: "drag-drop-area",
-      class: B(`${n.value ? "border-2 border-primary bg-body-tertiary" : ""} mt-3 file-container border-dashed border-2`),
+      class: _(`${n.value ? "border-2 border-primary bg-body-tertiary" : ""} mt-3 file-container border-dashed border-2`),
       onDragleave: i[0] || (i[0] = G((d) => n.value = !1, ["prevent"])),
       onDragover: i[1] || (i[1] = G((d) => n.value = !0, ["prevent"])),
       onDrop: G(l, ["prevent"])
     }, [
-      t.value.length === 0 ? (s(), p("div", fa, [
+      t.value.length === 0 ? (s(), p("div", ba, [
         v(u(C), {
           icon: "bi:upload",
           class: "me-2",
@@ -2775,12 +2793,12 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
           width: "20px"
         }),
         P(" Drag and drop files here ")
-      ])) : (s(), p("div", ga, [
-        x(o.$slots, "default")
+      ])) : (s(), p("div", fa, [
+        k(o.$slots, "default")
       ]))
     ], 34));
   }
-}), wa = { class: "d-flex align-items-center me-2" }, ka = /* @__PURE__ */ $({
+}), ha = { class: "d-flex align-items-center me-2" }, wa = /* @__PURE__ */ F({
   __name: "UploadStatus",
   props: {
     fileSize: {},
@@ -2789,7 +2807,7 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
     uploadStatus: {}
   },
   setup(e) {
-    const t = k(() => e.uploadStatus === "Failed" || e.uploadStatus === "InvalidFileType" || e.uploadStatus === "InvalidFileSize" ? "danger" : "warning"), n = k(() => {
+    const t = x(() => e.uploadStatus === "Failed" || e.uploadStatus === "InvalidFileType" || e.uploadStatus === "InvalidFileSize" ? "danger" : "warning"), n = x(() => {
       switch (e.uploadStatus) {
         case "InvalidFileType":
           return "Upload Failed: File type is not accepted.";
@@ -2805,7 +2823,7 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
           return "Upload Failed: Connection error, please try again.";
       }
     });
-    return (a, l) => (s(), p("div", wa, [
+    return (a, l) => (s(), p("div", ha, [
       a.uploadStatus === "Uploading" ? (s(), w(Yt, {
         key: 0,
         pixelWidth: 200,
@@ -2816,7 +2834,7 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
           P(h((a.bytesUploaded / a.fileSize * 100).toFixed(0)) + "%", 1)
         ]),
         _: 1
-      })) : F("", !0),
+      })) : B("", !0),
       a.uploadStatus !== "Uploading" && a.uploadStatus !== "Not Uploaded" && a.uploadStatus !== "Uploaded" && a.uploadStatus !== "Preparing" ? (s(), w(ae, {
         key: 1,
         id: "upload-status-alert",
@@ -2827,19 +2845,19 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
           P(h(n.value), 1)
         ]),
         _: 1
-      }, 8, ["severity"])) : F("", !0)
+      }, 8, ["severity"])) : B("", !0)
     ]));
   }
-}), xa = ["data-cy"], _a = { class: "ms-3 d-flex flex-column" }, $a = {
+}), xa = ["data-cy"], ka = { class: "ms-3 d-flex flex-column" }, $a = {
   key: 1,
   id: "file-name"
-}, Fa = {
+}, _a = {
   class: "text-black-50",
   id: "file-type"
-}, Ba = {
+}, Fa = {
   class: "text-black-50",
   id: "file-size"
-}, Sa = { class: "ms-auto my-auto d-flex" }, Ca = /* @__PURE__ */ $({
+}, Ba = { class: "ms-auto my-auto d-flex" }, Sa = /* @__PURE__ */ F({
   __name: "FileInfo",
   props: /* @__PURE__ */ q({
     editableFileName: { type: Boolean },
@@ -2858,9 +2876,9 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
   }),
   emits: /* @__PURE__ */ q(["deleted"], ["update:file", "update:blobFileName", "update:uploadStatus"]),
   setup(e, { emit: t }) {
-    const n = R(e, "file"), a = R(e, "blobFileName"), l = R(e, "uploadStatus"), o = t, i = M(n.value.name), d = M(""), f = M(0), r = M(), g = k(() => e.acceptedFileTypes.includes(n.value.type)), y = k(() => n.value.size <= e.maxFileSize), c = () => {
+    const n = R(e, "file"), a = R(e, "blobFileName"), l = R(e, "uploadStatus"), o = t, i = M(n.value.name), d = M(""), f = M(0), r = M(), g = x(() => e.acceptedFileTypes.includes(n.value.type)), y = x(() => n.value.size <= e.maxFileSize), c = () => {
       n.value = new File([n.value], i.value, { type: n.value.type, lastModified: (/* @__PURE__ */ new Date()).valueOf() });
-    }, _ = async () => {
+    }, $ = async () => {
       if (!g.value || !y.value) {
         l.value = g.value ? "InvalidFileSize" : "InvalidFileType";
         return;
@@ -2887,10 +2905,10 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
         l.value = "Failed";
       }
     }, V = async () => {
-      await ca(l.value, d.value), o("deleted", n.value);
+      await ua(l.value, d.value), o("deleted", n.value);
     };
     return oe(() => {
-      e.autoUploadToBlob && _();
+      e.autoUploadToBlob && $();
     }), (T, I) => {
       const z = E;
       return s(), p("div", {
@@ -2898,11 +2916,11 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
         "data-cy": `file-info-${n.value.name}`
       }, [
         m("div", null, [
-          u(ma)(n.value.type) ? (s(), w(u(De), {
+          u(ca)(n.value.type) ? (s(), w(u(De), {
             key: 0,
             id: "thumbnail-image",
             "image-class": "image-file-thumbnail border",
-            src: u(pa)(n.value),
+            src: u(ma)(n.value),
             alt: n.value.name,
             width: "75px",
             preview: ""
@@ -2914,9 +2932,9 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
             width: "75px"
           }))
         ]),
-        m("div", _a, [
+        m("div", ka, [
           m("div", null, [
-            T.editableFileName ? (s(), w(kt, {
+            T.editableFileName ? (s(), w(xt, {
               key: 0,
               id: "edit-file-name",
               modelValue: i.value,
@@ -2926,11 +2944,11 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
               "complete-action": c
             }, null, 8, ["modelValue", "rules", "name"])) : (s(), p("span", $a, h(n.value.name), 1))
           ]),
-          m("span", Fa, "File type: " + h(n.value.type.split("/").pop()), 1),
-          m("span", Ba, "File size: " + h(u(ie)(n.value.size)), 1)
+          m("span", _a, "File type: " + h(n.value.type.split("/").pop()), 1),
+          m("span", Fa, "File size: " + h(u(ie)(n.value.size)), 1)
         ]),
-        m("div", Sa, [
-          (s(), w(ka, {
+        m("div", Ba, [
+          (s(), w(wa, {
             key: l.value,
             "file-size": n.value.size,
             "upload-status": l.value,
@@ -2940,7 +2958,7 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
           l.value === "Not Uploaded" || l.value === "Failed" || l.value === "Duplicate" || l.value === "Aborted" ? (s(), w(z, {
             key: 0,
             link: "",
-            onClick: _
+            onClick: $
           }, {
             default: b(() => [
               v(u(C), {
@@ -2948,7 +2966,7 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
               }, null, 8, ["icon"])
             ]),
             _: 1
-          })) : F("", !0),
+          })) : B("", !0),
           l.value === "Uploading" ? (s(), w(z, {
             key: 1,
             link: "",
@@ -2973,17 +2991,17 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
       ], 8, xa);
     };
   }
-}), Va = { class: "d-flex justify-content-end mt-1" }, Ta = { id: "max-file-size" }, Ma = /* @__PURE__ */ $({
+}), Ca = { class: "d-flex justify-content-end mt-1" }, Va = { id: "max-file-size" }, Ta = /* @__PURE__ */ F({
   __name: "MaxFileSize",
   props: {
     maxFileSize: {}
   },
   setup(e) {
-    return (t, n) => (s(), p("div", Va, [
-      m("div", Ta, "Max file size: " + h(u(ie)(t.maxFileSize)), 1)
+    return (t, n) => (s(), p("div", Ca, [
+      m("div", Va, "Max file size: " + h(u(ie)(t.maxFileSize)), 1)
     ]));
   }
-}), Pa = { "data-cy": "file-uploader" }, Ia = { key: 0 }, _l = /* @__PURE__ */ $({
+}), Ma = { "data-cy": "file-uploader" }, Pa = { key: 0 }, kl = /* @__PURE__ */ F({
   __name: "ForgeFileUploader",
   props: /* @__PURE__ */ q({
     acceptedFileTypes: {},
@@ -3003,13 +3021,13 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
     const t = R(e, "modelValue"), n = e, a = (l) => {
       t.value = t.value.filter((o) => o.file != l);
     };
-    return (l, o) => (s(), p("div", Pa, [
-      v(ba, S(n, {
+    return (l, o) => (s(), p("div", Ma, [
+      v(va, S(n, {
         modelValue: t.value,
         "onUpdate:modelValue": o[0] || (o[0] = (i) => t.value = i)
       }), null, 16, ["modelValue"]),
-      l.showDragDropArea ? (s(), p("div", Ia, [
-        v(ha, {
+      l.showDragDropArea ? (s(), p("div", Pa, [
+        v(ga, {
           "max-file-input": n.maxFileInput,
           "max-file-size": n.maxFileSize,
           "accepted-file-types": n.acceptedFileTypes,
@@ -3017,8 +3035,8 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
           "onUpdate:modelValue": o[1] || (o[1] = (i) => t.value = i)
         }, {
           default: b(() => [
-            (s(!0), p(D, null, H(t.value, ({ file: i }, d) => (s(), p("span", null, [
-              (s(), w(Ca, S({
+            (s(!0), p(A, null, H(t.value, ({ file: i }, d) => (s(), p("span", null, [
+              (s(), w(Sa, S({
                 key: i.name,
                 class: d === t.value.length - 1 || t.value.length == 1 ? "" : "border-bottom",
                 file: t.value[d].file,
@@ -3033,36 +3051,36 @@ const ya = { class: "d-flex justify-content-between" }, va = ["accept", "disable
           ]),
           _: 1
         }, 8, ["max-file-input", "max-file-size", "accepted-file-types", "modelValue"]),
-        v(Ma, {
+        v(Ta, {
           "max-file-size": n.maxFileSize
         }, null, 8, ["max-file-size"])
-      ])) : F("", !0)
+      ])) : B("", !0)
     ]));
   }
 });
 export {
-  il as Bootstrap_PT,
-  rl as ForgeActionButton,
+  sl as Bootstrap_PT,
+  il as ForgeActionButton,
   ae as ForgeAlert,
   me as ForgeCheckbox,
-  fl as ForgeChips,
+  bl as ForgeChips,
   Et as ForgeDatepicker,
-  _l as ForgeFileUploader,
+  kl as ForgeFileUploader,
   xl as ForgeFilterHeader,
-  vl as ForgeForm,
-  bl as ForgeFormField,
-  kt as ForgeInlineEditor,
-  dl as ForgeLink,
+  yl as ForgeForm,
+  vl as ForgeFormField,
+  xt as ForgeInlineEditor,
+  rl as ForgeLink,
   pe as ForgeLoader,
-  ul as ForgeModal,
+  dl as ForgeModal,
   Ct as ForgeMultiSelect,
-  ml as ForgeMultiSelectPreview,
-  cl as ForgeNavbar,
-  pl as ForgePageHeader,
+  cl as ForgeMultiSelectPreview,
+  ul as ForgeNavbar,
+  ml as ForgePageHeader,
   Yt as ForgeProgressBar,
-  yl as ForgeRemainingCharacters,
-  gl as ForgeStatWidget,
-  hl as ForgeStepper,
-  kl as ForgeTable,
-  wl as ForgeTile
+  pl as ForgeRemainingCharacters,
+  fl as ForgeStatWidget,
+  gl as ForgeStepper,
+  wl as ForgeTable,
+  hl as ForgeTile
 };