@3squared/forge-ui-3 0.14.0 → 0.16.0

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

@@ -1,5 +1,5 @@
 import be from "primevue/message";
-import { defineComponent as F, openBlock as i, createBlock as w, normalizeProps as Q, guardReactiveProps as ee, withCtx as g, createElementVNode as c, normalizeClass as B, unref as m, createCommentVNode as S, createVNode as f, renderSlot as $, ref as I, createElementBlock as v, Fragment as L, mergeProps as _, mergeModels as E, useModel as A, computed as x, createTextVNode as O, toDisplayString as h, withDirectives as j, vShow as H, createSlots as te, renderList as Y, onMounted as ne, isRef as se, withKeys as J, useAttrs as fe, withModifiers as q, normalizeStyle as ge, watch as de } from "vue";
+import { defineComponent as F, openBlock as i, createBlock as w, normalizeProps as Q, guardReactiveProps as ee, withCtx as g, createElementVNode as c, normalizeClass as B, unref as m, createCommentVNode as S, createVNode as f, renderSlot as $, ref as I, createElementBlock as v, Fragment as L, mergeProps as _, mergeModels as E, useModel as A, computed as k, createTextVNode as O, toDisplayString as h, withDirectives as j, vShow as H, createSlots as te, renderList as Y, onMounted as ne, isRef as se, withKeys as J, useAttrs as fe, withModifiers as q, normalizeStyle as ge, watch as de } from "vue";
 import { Icon as V } from "@iconify/vue";
 import R from "primevue/button";
 import he from "primevue/toast";
@@ -12,14 +12,14 @@ import { vOnClickOutside as $e } from "@vueuse/components";
 import Be from "primevue/menubar";
 import Fe from "vue-multiselect";
 import _e from "primevue/calendar";
-import ae from "primevue/dropdown";
+import le from "primevue/dropdown";
 import Se from "primevue/inputmask";
 import Ve from "primevue/textarea";
 import ue from "primevue/inputnumber";
 import Ce from "primevue/chips";
 import Te from "primevue/progressbar";
-import Me from "primevue/divider";
-import Pe from "primevue/steps";
+import Pe from "primevue/divider";
+import Me from "primevue/steps";
 import Ie from "primevue/datatable";
 import ze from "primevue/multiselect";
 import { BlockBlobClient as ce } from "@azure/storage-blob";
@@ -33,47 +33,54 @@ const De = {
         {
           "btn-brand": e.severity === "brand" && !e.outlined && !e.link && !e.text,
           "btn-outline-brand": e.severity === "brand" && e.outlined,
-          "text-brand fw-bold btn-text-brand": e.severity === "brand" && e.text
+          "text-brand fw-bold btn-text-brand": e.severity === "brand" && e.text,
+          "link-brand text-decoration-underline link-underline-brand": e.severity === "brand" && e.link
         },
         // Primary
         {
           "btn-primary": (e.severity === null || e.severity === "primary") && !e.outlined && !e.link && !e.text,
           "btn-outline-primary": (e.severity === null || e.severity === "primary") && e.outlined,
-          "text-primary fw-bold btn-text-primary": (e.severity === null || e.severity === "primary") && e.text
+          "text-primary fw-bold btn-text-primary": (e.severity === null || e.severity === "primary") && e.text,
+          "link-primary text-decoration-underline link-underline-primary": (e.severity === null || e.severity === "primary") && e.link
         },
         // Secondary
         {
           "btn-secondary": e.severity === "secondary" && !e.outlined && !e.link && !e.text,
           "btn-outline-secondary": e.severity === "secondary" && e.outlined,
-          "text-secondary fw-bold btn-text-secondary": e.severity === "secondary" && e.text
+          "text-secondary fw-bold btn-text-secondary": e.severity === "secondary" && e.text,
+          "link-secondary text-decoration-underline link-underline-secondary": e.severity === "secondary" && e.link
         },
         // Success
         {
           "btn-success text-white": e.severity === "success" && !e.outlined && !e.link && !e.text,
           "btn-outline-success": e.severity === "success" && e.outlined,
-          "text-success fw-bold btn-text-success": e.severity === "success" && e.text
+          "text-success fw-bold btn-text-success": e.severity === "success" && e.text,
+          "link-success text-decoration-underline link-underline-success": e.severity === "success" && e.link
         },
         // Warning
         {
           "btn-warning text-white": e.severity === "warning" && !e.outlined && !e.link && !e.text,
           "btn-outline-warning": e.severity === "warning" && e.outlined,
-          "text-warning fw-bold btn-text-warning": e.severity === "warning" && e.text
+          "text-warning fw-bold btn-text-warning": e.severity === "warning" && e.text,
+          "link-warning text-decoration-underline link-underline-warning": e.severity === "warning" && e.link
         },
         // Danger
         {
           "btn-danger text-white": e.severity === "danger" && !e.outlined && !e.link && !e.text,
           "btn-outline-danger": e.severity === "danger" && e.outlined,
-          "text-danger fw-bold btn-text-danger": e.severity === "danger" && e.text
+          "text-danger fw-bold btn-text-danger": e.severity === "danger" && e.text,
+          "link-danger text-decoration-underline link-underline-danger": e.severity === "danger" && e.link
         },
         // Info
         {
           "btn-info text-white": e.severity === "info" && !e.outlined && !e.link && !e.text,
           "btn-outline-info": e.severity === "info" && e.outlined,
-          "text-info fw-bold btn-text-info": e.severity === "info" && e.text
+          "text-info fw-bold btn-text-info": e.severity === "info" && e.text,
+          "link-info text-decoration-underline link-underline-info": e.severity === "info" && e.link
         },
         // Misc
         {
-          "btn-link": e.link,
+          "p-0 border-0": e.link,
           shadow: e.raised,
           "rounded-pill": e.rounded,
           "btn-lg": e.size == "large",
@@ -136,12 +143,11 @@ const De = {
         }
       ]
     }),
-    trigger: (e) => ({
+    trigger: ({ state: e }) => ({
       class: [
-        "my-auto",
+        "my-auto ms-2",
         {
-          "ms-auto": !e.props.showClear,
-          "ms-2": e.props.showClear
+          "rotate-180": e.overlayVisible
         }
       ]
     }),
@@ -198,13 +204,13 @@ const De = {
   column: {
     sortBadge: "ms-2 my-auto cursor-pointer",
     headerCell: (e) => {
-      var t, a, o, l;
+      var t, l, o, a;
       return {
         class: [
           {
             "cursor-move": e.props.reorderableColumns,
-            "position-sticky": ((t = e.column) == null ? void 0 : t.context.frozen) !== void 0 || ((a = e.column) == null ? void 0 : a.context.frozen) || ((o = e.column) == null ? void 0 : o.context.frozen) === "",
-            "overflow-hidden position-relative bg-clip-padding": (l = e.column) == null ? void 0 : l.context.resizable
+            "position-sticky": ((t = e.column) == null ? void 0 : t.context.frozen) !== void 0 || ((l = e.column) == null ? void 0 : l.context.frozen) || ((o = e.column) == null ? void 0 : o.context.frozen) === "",
+            "overflow-hidden position-relative bg-clip-padding": (a = e.column) == null ? void 0 : a.context.resizable
           }
         ]
       };
@@ -236,9 +242,12 @@ const De = {
         }
       ]
     }),
-    headerFilterClearButton: () => ({
+    headerFilterClearButton: ({ props: e }) => (console.log(), {
       class: [
-        "btn"
+        "btn",
+        {
+          "d-none": e.filters[e.field].value === null
+        }
       ]
     }),
     filterOverlay: {
@@ -293,13 +302,13 @@ const De = {
 }, Ee = {
   inputtext: {
     root: (e) => {
-      var t, a;
+      var t, l;
       return {
         class: [
           "form-control",
           {
             "form-control-lg": ((t = e.props.size) == null ? void 0 : t.toLowerCase()) == "large",
-            "form-control-sm": ((a = e.props.size) == null ? void 0 : a.toLowerCase()) == "small"
+            "form-control-sm": ((l = e.props.size) == null ? void 0 : l.toLowerCase()) == "small"
           }
         ]
       };
@@ -549,7 +558,7 @@ const De = {
     list: "list-unstyled mb-0",
     item: "dropdown-item d-flex cursor-pointer",
     header: "d-flex",
-    labelContainer: "w-100",
+    labelContainer: "w-100 me-2",
     label: "w-100",
     filterContainer: "d-flex w-100",
     filterIcon: "d-none",
@@ -730,7 +739,7 @@ const De = {
       ]
     })
   }
-}, at = {
+}, lt = {
   tooltip: {
     root: ({ context: e }) => ({
       class: [
@@ -752,7 +761,7 @@ const De = {
       class: ["tooltip-inner"]
     }
   }
-}, lt = {
+}, at = {
   selectbutton: {
     root: () => ({
       class: ["btn-group"]
@@ -812,7 +821,7 @@ const De = {
     button: "preview-button",
     mask: "position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center mask",
     preview: "preview",
-    toolbar: "position-absolute top-0 end-0 d-flex p-3",
+    toolbar: "position-absolute top-0 end-0 d-flex p-3 z-3",
     rotaterightbutton: "btn text-white",
     rotateleftbutton: "btn text-white",
     zoomoutbutton: "btn text-white",
@@ -843,21 +852,21 @@ const De = {
       class: ["ps-1"]
     }),
     icon: ({ props: e }) => {
-      var t, a, o, l;
+      var t, l, o, a;
       return {
         class: [
           "toast-icon",
           {
             "text-primary": ((t = e.message) == null ? void 0 : t.severity) === "info",
-            "text-success": ((a = e.message) == null ? void 0 : a.severity) === "success",
+            "text-success": ((l = e.message) == null ? void 0 : l.severity) === "success",
             "text-danger": ((o = e.message) == null ? void 0 : o.severity) === "error",
-            "text-warning": ((l = e.message) == null ? void 0 : l.severity) === "warn"
+            "text-warning": ((a = e.message) == null ? void 0 : a.severity) === "warn"
           }
         ]
       };
     }
   }
-}, vl = {
+}, ca = {
   ...et,
   ...De,
   ...nt,
@@ -878,16 +887,16 @@ const De = {
   ...Ye,
   ...Xe,
   ...ot,
-  ...lt,
+  ...at,
   ...Ke,
   ...Qe,
   ...We,
   ...rt,
   ...je,
   directives: {
-    ...at
+    ...lt
   }
-}, le = /* @__PURE__ */ F({
+}, ae = /* @__PURE__ */ F({
   __name: "ForgeAlert",
   props: {
     severity: { default: "primary" },
@@ -903,9 +912,9 @@ const De = {
   },
   setup(e) {
     const t = e;
-    return (a, o) => {
-      const l = be;
-      return i(), w(l, Q(ee({ ...a.$attrs, ...t })), {
+    return (l, o) => {
+      const a = be;
+      return i(), w(a, Q(ee({ ...l.$attrs, ...t })), {
         messageicon: g(() => [
           c("div", {
             class: B(t.icon ? "me-2 pe-1" : "")
@@ -923,13 +932,13 @@ const De = {
           f(m(V), { icon: "bi:x" })
         ]),
         default: g(() => [
-          $(a.$slots, "default")
+          $(l.$slots, "default")
         ]),
         _: 3
       }, 16);
     };
   }
-}), bl = /* @__PURE__ */ F({
+}), ma = /* @__PURE__ */ F({
   __name: "ForgeActionButton",
   props: {
     action: {},
@@ -938,21 +947,21 @@ const De = {
     params: { default: Array }
   },
   setup(e) {
-    const t = I(!1), a = e, o = async () => {
+    const t = I(!1), l = e, o = async () => {
       t.value = !0;
       try {
-        await a.action.apply(this, a.params);
-      } catch (l) {
-        await a.errorAction.apply(this, a.errorParams ? [...a.errorParams, l] : [l]);
+        await l.action.apply(this, l.params);
+      } catch (a) {
+        await l.errorAction.apply(this, l.errorParams ? [...l.errorParams, a] : [a]);
       }
       t.value = !1;
     };
-    return (l, n) => {
-      const u = R;
+    return (a, n) => {
+      const d = R;
       return i(), v(L, null, [
-        f(u, _({ ...a, ...l.$attrs }, {
+        f(d, _({ ...l, ...a.$attrs }, {
           loading: t.value,
-          disabled: t.value || a.disabled,
+          disabled: t.value || l.disabled,
           onClick: o
         }), null, 16, ["loading", "disabled"]),
         f(m(he))
@@ -989,33 +998,33 @@ const De = {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, a = A(e, "modelValue"), {
+    const t = e, l = A(e, "modelValue"), {
       handleChange: o,
-      errors: l,
+      errors: a,
       errorMessage: n
     } = K(() => t.name ?? "", void 0, {
       type: "checkbox",
-      checkedValue: a.value
-    }), u = x(() => l.value.length > 0);
-    return (r, d) => {
+      checkedValue: l.value
+    }), d = k(() => a.value.length > 0);
+    return (r, u) => {
       const p = we;
       return i(), v("div", dt, [
         c("div", _({
           class: "d-flex cursor-pointer",
           "data-cy": "checkbox-container",
-          onClick: d[2] || (d[2] = (y) => m(o)(a.value))
+          onClick: u[2] || (u[2] = (y) => m(o)(l.value))
         }, { ...r.$attrs }), [
           f(p, _({ ...t }, {
             binary: "",
-            modelValue: a.value,
-            "onUpdate:modelValue": d[0] || (d[0] = (y) => a.value = y),
+            modelValue: l.value,
+            "onUpdate:modelValue": u[0] || (u[0] = (y) => l.value = y),
             "input-id": t.name,
-            "input-class": { "is-invalid": u.value }
+            "input-class": { "is-invalid": d.value }
           }), null, 16, ["modelValue", "input-id", "input-class"]),
           c("label", {
             for: t.name,
-            onClick: d[1] || (d[1] = (y) => m(o)(a.value)),
-            class: B([`${t.disabled ? "opacity-50" : "cursor-pointer"} ${u.value ? "text-danger-dark" : ""}`, "w-100 my-auto"])
+            onClick: u[1] || (u[1] = (y) => m(o)(l.value)),
+            class: B([`${t.disabled ? "opacity-50" : "cursor-pointer"} ${d.value ? "text-danger-dark" : ""}`, "w-100 my-auto"])
           }, [
             $(r.$slots, "default", {}, () => [
               O(h(t.label), 1)
@@ -1026,7 +1035,7 @@ const De = {
           "data-cy": "error",
           class: "text-invalid"
         }, h(m(n)), 513), [
-          [H, u.value]
+          [H, d.value]
         ])
       ]);
     };
@@ -1038,17 +1047,17 @@ const De = {
   },
   setup(e) {
     const t = e;
-    return (a, o) => {
-      const l = xe;
+    return (l, o) => {
+      const a = xe;
       return i(), v("div", mt, [
-        f(l, {
+        f(a, {
           "animation-duration": ".75",
           class: B(`text-${t.severity === void 0 ? "primary" : t.severity}`)
         }, null, 8, ["class"])
       ]);
     };
   }
-}), pt = ["href", "target"], fl = /* @__PURE__ */ F({
+}), pt = ["href", "target"], pa = /* @__PURE__ */ F({
   __name: "ForgeLink",
   props: {
     url: {},
@@ -1066,7 +1075,7 @@ const De = {
     iconName: {}
   },
   setup(e) {
-    const t = x(() => ({
+    const t = k(() => ({
       [`link-${e.severity}`]: e.severity,
       [`link-underline-${e.underlineSeverity}`]: e.underlineSeverity,
       [`link-opacity-${e.opacity}`]: e.opacity,
@@ -1075,14 +1084,14 @@ const De = {
       [`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
-    })), a = x(() => ({
+    })), l = k(() => ({
       "order-2": e.positionIconEnd,
       "me-1": !e.positionIconEnd && !e.animateIconOnHover,
       "ms-1": e.positionIconEnd && !e.animateIconOnHover,
       "ms-0": e.positionIconEnd && e.animateIconOnHover,
       "me-0": e.animateIconOnHover
     }));
-    return (o, l) => (i(), v("a", {
+    return (o, a) => (i(), v("a", {
       id: "link",
       class: B(["cursor-pointer d-flex", t.value]),
       href: o.url,
@@ -1093,7 +1102,7 @@ const De = {
           key: 0,
           id: "link-icon",
           icon: o.iconName,
-          class: B(["bi my-auto", a.value])
+          class: B(["bi my-auto", l.value])
         }, null, 8, ["icon", "class"])) : S("", !0),
         O(" " + h(o.label), 1)
       ])
@@ -1106,21 +1115,21 @@ function yt(e) {
     errorDetails: []
   };
   if (e.exception && (t.errorMessage = e.exception), e.message && (Array.isArray(e.message) ? t.errorDetails = e.message : t.errorMessage = e.message), e.response) {
-    const a = JSON.parse(e.response);
-    a.errors && (t.errorDetails = Object.values(a.errors).flat()), a.message && (t.errorDetails = a.message);
+    const l = JSON.parse(e.response);
+    l.errors && (t.errorDetails = Object.values(l.errors).flat()), l.message && (t.errorDetails = l.message);
   }
   return t.errorMessage === "" && t.errorDetails.length === 0 && (t.errorMessage = e), t;
 }
-function gl(e, t) {
-  return e.map((a) => ({ id: a, label: t ? t(a) : `${a}` }));
+function ya(e, t) {
+  return e.map((l) => ({ id: l, label: t ? t(l) : `${l}` }));
 }
-function hl(e, t, a) {
-  return { id: e, label: t ?? e.toString(), shortLabel: a };
+function va(e, t, l) {
+  return { id: e, label: t ?? e.toString(), shortLabel: l };
 }
 const vt = { key: 0 }, bt = {
   class: "d-flex w-100",
   "data-cy": "footer"
-}, wl = /* @__PURE__ */ F({
+}, ba = /* @__PURE__ */ F({
   __name: "ForgeModal",
   props: /* @__PURE__ */ E({
     cancelText: { default: "Cancel" },
@@ -1166,34 +1175,34 @@ const vt = { key: 0 }, bt = {
   }),
   emits: ["update:visible"],
   setup(e) {
-    const t = A(e, "visible"), a = I(!1), o = e, l = I(!1), n = I({
+    const t = A(e, "visible"), l = I(!1), o = e, a = I(!1), n = I({
       hasError: !1,
       header: "",
       message: []
-    }), u = () => {
-      a.value = !1;
+    }), d = () => {
+      l.value = !1;
     }, r = () => {
-      a.value = !0;
-    }, d = () => {
+      l.value = !0;
+    }, u = () => {
       t.value = !1;
     }, p = async () => {
       if (o.onConfirm) {
-        l.value = !0, n.value.hasError = !1;
+        a.value = !0, n.value.hasError = !1;
         try {
           const s = await o.onConfirm();
-          (s || s == null) && d();
+          (s || s == null) && u();
         } catch (s) {
           n.value.hasError = !0;
           const T = yt(s);
           n.value.header = T.errorMessage, n.value.message = T.errorDetails;
         }
-        l.value = !1;
+        a.value = !1;
       }
-    }, y = x(() => ({
+    }, y = k(() => ({
       root: [
         "modal modal-dialog modal-content h-auto m-0",
         {
-          "mw-100 vh-100 vw-100 top-0 start-0": a.value,
+          "mw-100 vh-100 vw-100 top-0 start-0": l.value,
           "modal-sm": o.size === "sm",
           "modal-lg": o.size === "lg",
           "modal-xl": o.size === "xl"
@@ -1201,10 +1210,10 @@ const vt = { key: 0 }, bt = {
       ]
     }));
     return (s, T) => {
-      const C = R, M = ke;
-      return i(), w(M, _(o, {
+      const C = R, P = ke;
+      return i(), w(P, _(o, {
         onMaximize: r,
-        onUnmaximize: u,
+        onUnmaximize: d,
         pt: y.value
       }), te({
         closeicon: g(() => [
@@ -1213,23 +1222,23 @@ const vt = { key: 0 }, bt = {
             icon: "bi:x-lg",
             width: "18",
             height: "18",
-            onClick: d
+            onClick: u
           })
         ]),
         maximizeicon: g(() => [
           f(m(V), {
             "data-cy": "maximisable-icon",
-            icon: a.value ? "bi:arrows-angle-contract" : "bi:arrows-angle-expand",
+            icon: l.value ? "bi:arrows-angle-contract" : "bi:arrows-angle-expand",
             width: "16",
             height: "16"
           }, null, 8, ["icon"])
         ]),
         _: 2
       }, [
-        Y(s.$slots, (P, z) => ({
+        Y(s.$slots, (M, z) => ({
           name: z,
           fn: g((b) => [
-            n.value.hasError ? (i(), w(le, {
+            n.value.hasError ? (i(), w(ae, {
               key: 0,
               severity: "danger",
               "data-cy": "error"
@@ -1239,13 +1248,13 @@ const vt = { key: 0 }, bt = {
                   class: B(n.value.message.length > 0 ? "my-auto" : "mb-0")
                 }, h(n.value.header), 3),
                 n.value.message.length > 0 ? (i(), v("ul", vt, [
-                  (i(!0), v(L, null, Y(n.value.message, (k) => (i(), v("li", { key: k }, h(k), 1))), 128))
+                  (i(!0), v(L, null, Y(n.value.message, (x) => (i(), v("li", { key: x }, h(x), 1))), 128))
                 ])) : S("", !0)
               ]),
               _: 1
             })) : S("", !0),
             $(s.$slots, z, Q(ee(b || {}))),
-            l.value ? $(s.$slots, "loader", { key: 1 }, () => [
+            a.value ? $(s.$slots, "loader", { key: 1 }, () => [
               f(me, { "data-cy": "loader" })
             ]) : S("", !0)
           ])
@@ -1258,7 +1267,7 @@ const vt = { key: 0 }, bt = {
                 label: s.cancelText,
                 class: B(o.cancelClass),
                 outlined: "",
-                onClick: d,
+                onClick: u,
                 id: "cancel-button",
                 type: o.cancelButtonType
               }, null, 8, ["label", "class", "type"]),
@@ -1291,13 +1300,13 @@ const vt = { key: 0 }, bt = {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, a = A(e, "modelValue"), o = I(!1), l = I(), n = () => {
+    const t = e, l = A(e, "modelValue"), o = I(!1), a = I(), n = () => {
       var C;
-      o.value = !o.value, (C = l.value) == null || C.focus();
-    }, u = async () => {
+      o.value = !o.value, (C = a.value) == null || C.focus();
+    }, d = async () => {
       if (T.value)
         return !1;
-      if (a.value = s.value, t.completeAction)
+      if (l.value = s.value, t.completeAction)
         try {
           await t.completeAction.apply(this, t.params), o.value = !o.value;
         } catch {
@@ -1307,17 +1316,17 @@ const vt = { key: 0 }, bt = {
         o.value = !o.value;
     }, r = () => {
       o.value = !o.value;
-    }, d = () => {
+    }, u = () => {
       s.value = null;
     }, { errorMessage: p, errors: y, value: s } = K(() => t.name, void 0, {
-      initialValue: a.value
+      initialValue: l.value
     });
     ne(() => {
-      s.value = a.value;
+      s.value = l.value;
     });
-    const T = x(() => y.value.length > 0);
-    return (C, M) => {
-      const P = ie, z = R;
+    const T = k(() => y.value.length > 0);
+    return (C, P) => {
+      const M = ie, z = R;
       return i(), v("div", {
         id: t.name
       }, [
@@ -1330,20 +1339,20 @@ const vt = { key: 0 }, bt = {
             j((i(), v("div", wt, [
               $(C.$slots, "editor", {
                 class: B({ "is-invalid": T.value }),
-                editFinished: u,
+                editFinished: d,
                 cancel: r,
                 val: m(s)
               }, () => [
-                f(P, {
+                f(M, {
                   "data-cy": "input",
                   ref_key: "input",
-                  ref: l,
+                  ref: a,
                   modelValue: m(s),
-                  "onUpdate:modelValue": M[0] || (M[0] = (b) => se(s) ? s.value = b : null),
+                  "onUpdate:modelValue": P[0] || (P[0] = (b) => se(s) ? s.value = b : null),
                   modelModifiers: { trim: !0 },
                   class: B({ "is-invalid": T.value }),
                   onKeydown: [
-                    J(u, ["enter"]),
+                    J(d, ["enter"]),
                     J(r, ["esc"])
                   ]
                 }, null, 8, ["modelValue", "class"])
@@ -1351,12 +1360,12 @@ const vt = { key: 0 }, bt = {
               f(m(V), {
                 icon: "bi:x-circle",
                 class: "mx-2 cursor-pointer",
-                onClick: d,
-                onKeydown: J(d, ["enter"]),
+                onClick: u,
+                onKeydown: J(u, ["enter"]),
                 "data-cy": "clear-icon"
               })
             ])), [
-              [m($e), u]
+              [m($e), d]
             ])
           ])) : (i(), v("div", {
             key: 1,
@@ -1395,7 +1404,7 @@ const vt = { key: 0 }, bt = {
       ], 8, ft);
     };
   }
-}), Bt = ["href"], xl = /* @__PURE__ */ F({
+}), Bt = ["href"], fa = /* @__PURE__ */ F({
   __name: "ForgeNavbar",
   props: {
     severity: { default: "light" },
@@ -1412,7 +1421,7 @@ const vt = { key: 0 }, bt = {
     unstyled: { type: Boolean }
   },
   setup(e) {
-    const t = e, a = x(() => ({
+    const t = e, l = k(() => ({
       root: () => ({
         class: [
           "navbar container-fluid navbar-expand-lg",
@@ -1439,10 +1448,10 @@ const vt = { key: 0 }, bt = {
         ]
       })
     }));
-    return (o, l) => {
+    return (o, a) => {
       const n = Be;
       return i(), w(n, _({ ...t, ...o.$attrs }, {
-        pt: a.value,
+        pt: l.value,
         "data-cy": "navbar"
       }), te({
         start: g(() => [
@@ -1452,7 +1461,7 @@ const vt = { key: 0 }, bt = {
             "data-cy": "logo"
           }, [
             $(o.$slots, "logo", {}, () => [
-              O(" Logo ")
+              a[0] || (a[0] = O(" Logo "))
             ])
           ], 8, Bt)
         ]),
@@ -1468,16 +1477,16 @@ const vt = { key: 0 }, bt = {
         ]),
         _: 2
       }, [
-        Y(o.$slots, (u, r) => ({
+        Y(o.$slots, (d, r) => ({
           name: r,
-          fn: g((d) => [
-            $(o.$slots, r, Q(ee(d)))
+          fn: g((u) => [
+            $(o.$slots, r, Q(ee(u)))
           ])
         }))
       ]), 1040, ["pt"]);
     };
   }
-}), Ft = { class: "multiselect__caret" }, _t = ["checked"], St = /* @__PURE__ */ c("div", { class: "my-auto ms-1" }, "Toggle all", -1), Vt = ["data-cy"], Ct = ["checked"], Tt = { class: "my-auto ms-1" }, Mt = { class: "multiselect__tag d-inline-flex" }, Pt = { class: "my-auto" }, pe = /* @__PURE__ */ F({
+}), Ft = { class: "multiselect__caret" }, _t = ["checked"], St = ["data-cy"], Vt = ["checked"], Ct = { class: "my-auto ms-1" }, Tt = { class: "multiselect__tag d-inline-flex" }, Pt = { class: "my-auto" }, pe = /* @__PURE__ */ F({
   __name: "ForgeMultiSelect",
   props: {
     severity: { default: "primary" },
@@ -1489,37 +1498,37 @@ const vt = { key: 0 }, bt = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const a = e, o = (N, D) => {
+    const l = e, o = (N, D) => {
       const U = {
         ...D,
         $isDisabled: D.$isDisabled ?? !1
       };
       N(U);
-    }, l = fe(), n = t, { errors: u, value: r, errorMessage: d } = K(() => a.name, void 0, {
-      initialValue: l.modelValue
-    }), p = I(!1), y = x(() => ({
+    }, a = fe(), n = t, { errors: d, value: r, errorMessage: u } = K(() => l.name, void 0, {
+      initialValue: a.modelValue
+    }), p = I(!1), y = k(() => ({
       multiple: !0,
       label: "label",
       trackBy: "id",
       showPointer: !p.value,
-      placeholder: l.searchable === null || l.searchable ? "Search" : "Select",
+      placeholder: a.searchable === null || a.searchable ? "Search" : "Select",
       allowEmpty: !0,
       selectValue: "",
-      closeOnSelect: !!(l.multiple === null || l.multiple),
-      clearOnSelect: !!(l.multiple === null || l.multiple),
-      searchable: !!(l.searchable === null || l.searchable) && l.modelValue.length === l.options.length,
+      closeOnSelect: !!(a.multiple === null || a.multiple),
+      clearOnSelect: !!(a.multiple === null || a.multiple),
+      searchable: !!(a.searchable === null || a.searchable) && a.modelValue.length === a.options.length,
       async: !1,
-      ...l
-    })), s = x(() => `forge-multiselect-${a.severity}`), T = x(() => `multiselect__option ${p.value ? " multiselect__option--highlight" : ""} ${C.value ? " multiselect__option--selected" : ""}`), C = x(() => y.value && !(y.value.multiple || !a.showSelectAll || y.value.async) ? !1 : l.modelValue.length === l.options.length), M = x(() => u.value.length > 0), P = x(() => !!((l.allowEmpty == null || l.allowEmpty) && a.showClearSelection && (y.value.multiple ? l.modelValue.length > 0 : l.modelValue))), z = () => p.value = !0, b = () => p.value = !1, k = () => {
+      ...a
+    })), s = k(() => `forge-multiselect-${l.severity}`), T = k(() => `multiselect__option ${p.value ? " multiselect__option--highlight" : ""} ${C.value ? " multiselect__option--selected" : ""}`), C = k(() => y.value && !(y.value.multiple || !l.showSelectAll || y.value.async) ? !1 : a.modelValue.length === a.options.length), P = k(() => d.value.length > 0), M = k(() => !!((a.allowEmpty == null || a.allowEmpty) && l.showClearSelection && (y.value.multiple ? a.modelValue.length > 0 : a.modelValue))), z = () => p.value = !0, b = () => p.value = !1, x = () => {
       r.value = y.value.multiple ? [] : null, n("update:modelValue", r.value);
     }, G = (N) => {
-      n("update:modelValue", a.selectValue ? N.map((D) => D[a.selectValue]) : N);
-    }, Z = (N) => l.modelValue !== null ? l.modelValue.some((D) => y.value.selectValue ? N[a.selectValue] === D : N.id === D.id && N.label === D.label) : !1, oe = () => {
-      C.value ? k() : (r.value = [...l.options], n("update:modelValue", [...l.options]));
+      n("update:modelValue", l.selectValue ? N.map((D) => D[l.selectValue]) : N);
+    }, Z = (N) => a.modelValue !== null ? a.modelValue.some((D) => y.value.selectValue ? N[l.selectValue] === D : N.id === D.id && N.label === D.label) : !1, oe = () => {
+      C.value ? x() : (r.value = [...a.options], n("update:modelValue", [...a.options]));
     };
     return (N, D) => (i(), v(L, null, [
       f(m(Fe), _(y.value, {
-        class: [s.value, M.value ? "is-invalid" : ""],
+        class: [s.value, P.value ? "is-invalid" : ""],
         "data-cy": "multiselect",
         "onUpdate:modelValue": [
           G,
@@ -1529,11 +1538,11 @@ const vt = { key: 0 }, bt = {
       }), te({
         caret: g(({ toggle: U }) => [
           c("div", Ft, [
-            P.value ? (i(), w(m(V), {
+            M.value ? (i(), w(m(V), {
               key: 0,
               icon: "bi:x",
               class: "my-auto text-black multiselect__clear",
-              onMousedown: D[0] || (D[0] = q((W) => k(), ["prevent", "stop"])),
+              onMousedown: D[0] || (D[0] = q((W) => x(), ["prevent", "stop"])),
               "data-cy": "clear",
               height: "18px",
               width: "18px"
@@ -1546,12 +1555,12 @@ const vt = { key: 0 }, bt = {
           ])
         ]),
         tag: g(({ option: U, remove: W }) => [
-          c("div", Mt, [
+          c("div", Tt, [
             c("div", Pt, h(U.label), 1),
             f(m(V), {
               icon: "bi:x",
               class: "my-auto multiselect__tag-icon",
-              onMousedown: q((Ra) => o(W, U), ["prevent", "stop"]),
+              onMousedown: q((Al) => o(W, U), ["prevent", "stop"]),
               height: "18px",
               width: "18px"
             }, null, 8, ["onMousedown"])
@@ -1581,7 +1590,7 @@ const vt = { key: 0 }, bt = {
                   type: "checkbox",
                   class: "form-check-input px-2 py-2 rounded ms-2 cursor-pointer"
                 }, null, 8, _t),
-                St
+                D[2] || (D[2] = c("div", { class: "my-auto ms-1" }, "Toggle all", -1))
               ], 2)
             ], 32)
           ]),
@@ -1599,9 +1608,9 @@ const vt = { key: 0 }, bt = {
                 name: "selected",
                 type: "checkbox",
                 class: "form-check-input px-2 py-2 rounded ms-2 cursor-pointer"
-              }, null, 8, Ct),
-              c("div", Tt, h(U[y.value.label]), 1)
-            ], 8, Vt)
+              }, null, 8, Vt),
+              c("div", Ct, h(U[y.value.label]), 1)
+            ], 8, St)
           ]),
           key: "1"
         } : void 0
@@ -1609,22 +1618,22 @@ const vt = { key: 0 }, bt = {
       j(c("small", {
         "data-cy": "error",
         class: "invalid-feedback"
-      }, h(m(d)), 513), [
-        [H, M.value]
+      }, h(m(u)), 513), [
+        [H, P.value]
       ])
     ], 64));
   }
-}), It = {
+}), Mt = {
   key: 0,
   class: "pl-1"
-}, zt = { class: "border alternating-item-list" }, Ot = {
+}, It = { class: "border alternating-item-list" }, zt = {
   key: 0,
   class: "p-2 border-top border-bottom",
   "data-cy": "title"
-}, Dt = { class: "d-inline-block" }, Ut = {
+}, Ot = { class: "d-inline-block" }, Dt = {
   key: 1,
   class: "p-2 item d-flex justify-content-between align-items-center"
-}, kl = /* @__PURE__ */ F({
+}, ga = /* @__PURE__ */ F({
   __name: "ForgeMultiSelectPreview",
   props: /* @__PURE__ */ E({
     title: { default: "Selected Items" },
@@ -1639,60 +1648,60 @@ const vt = { key: 0 }, bt = {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, a = A(e, "modelValue"), o = (l) => {
-      a.value = a.value.filter((n) => n.id !== l);
+    const t = e, l = A(e, "modelValue"), o = (a) => {
+      l.value = l.value.filter((n) => n.id !== a);
     };
-    return (l, n) => {
-      const u = R;
+    return (a, n) => {
+      const d = R;
       return i(), v("div", {
-        class: B(l.orientation === "column" ? "row" : ""),
+        class: B(a.orientation === "column" ? "row" : ""),
         "data-cy": "multiselect-preview"
       }, [
         c("div", {
-          class: B(l.orientation === "row" ? "col-12 mb-1" : "col"),
+          class: B(a.orientation === "row" ? "col-12 mb-1" : "col"),
           "data-cy": "multiselect-container"
         }, [
           f(pe, _({
-            modelValue: a.value,
-            "onUpdate:modelValue": n[0] || (n[0] = (r) => a.value = r),
-            "limit-text": () => `${a.value.length} selected`,
+            modelValue: l.value,
+            "onUpdate:modelValue": n[0] || (n[0] = (r) => l.value = r),
+            "limit-text": () => `${l.value.length} selected`,
             options: t.options
-          }, { ...l.$attrs }), {
-            tag: g(() => [
+          }, { ...a.$attrs }), {
+            tag: g(() => n[1] || (n[1] = [
               O(h(""))
-            ]),
+            ])),
             selection: g(() => [
-              a.value.length > 0 ? (i(), v("span", It, h(a.value.length) + " items selected", 1)) : S("", !0)
+              l.value.length > 0 ? (i(), v("span", Mt, h(l.value.length) + " items selected", 1)) : S("", !0)
             ]),
             default: g(() => [
-              (i(!0), v(L, null, Y(l.$slots, (r, d) => $(l.$slots, d, { slot: d })), 256))
+              (i(!0), v(L, null, Y(a.$slots, (r, u) => $(a.$slots, u, { slot: u })), 256))
             ]),
             _: 3
           }, 16, ["modelValue", "limit-text", "options"]),
-          $(l.$slots, "after-multi-select")
+          $(a.$slots, "after-multi-select")
         ], 2),
         c("div", {
-          class: B(l.orientation === "row" ? "col-12" : "col"),
+          class: B(a.orientation === "row" ? "col-12" : "col"),
           "data-cy": "options-preview"
         }, [
           c("div", {
-            style: ge({ height: l.height }),
+            style: ge({ height: a.height }),
             class: "overflow-auto"
           }, [
-            c("div", zt, [
-              l.title ? (i(), v("div", Ot, h(l.title), 1)) : S("", !0),
-              (i(!0), v(L, null, Y(a.value, (r) => (i(), v("div", {
+            c("div", It, [
+              a.title ? (i(), v("div", zt, h(a.title), 1)) : S("", !0),
+              (i(!0), v(L, null, Y(l.value, (r) => (i(), v("div", {
                 key: r.id,
                 class: "p-2 item d-flex justify-content-between align-items-center"
               }, [
-                $(l.$slots, "list-item", { item: r }, () => [
-                  c("span", Dt, h(r.shortLabel ? r.shortLabel : r.label), 1)
+                $(a.$slots, "list-item", { item: r }, () => [
+                  c("span", Ot, h(r.shortLabel ? r.shortLabel : r.label), 1)
                 ]),
-                l.canRemoveItemFromPreview ? (i(), w(u, {
+                a.canRemoveItemFromPreview ? (i(), w(d, {
                   key: 0,
                   link: "",
                   class: "m-0 p-0 d-flex align-items-center",
-                  onClick: (d) => o(r.id)
+                  onClick: (u) => o(r.id)
                 }, {
                   default: g(() => [
                     f(m(V), {
@@ -1704,34 +1713,34 @@ const vt = { key: 0 }, bt = {
                   _: 2
                 }, 1032, ["onClick"])) : S("", !0)
               ]))), 128)),
-              a.value.length === 0 ? (i(), v("div", Ut, h(t.optionsPreviewEmptyText), 1)) : S("", !0)
+              l.value.length === 0 ? (i(), v("div", Dt, h(t.optionsPreviewEmptyText), 1)) : S("", !0)
             ])
           ], 4)
         ], 2)
       ], 2);
     };
   }
-}), At = { class: "d-flex justify-content-between pb-2" }, Nt = {
+}), Ut = { class: "d-flex justify-content-between pb-2" }, At = {
   "data-cy": "title",
   class: "my-auto"
-}, Et = {
+}, Nt = {
   "data-cy": "slot",
   class: "d-flex align-items-center"
-}, $l = /* @__PURE__ */ F({
+}, ha = /* @__PURE__ */ F({
   __name: "ForgePageHeader",
   props: {
     title: {}
   },
   setup(e) {
     const t = e;
-    return (a, o) => (i(), v("div", At, [
-      c("h3", Nt, h(t.title), 1),
-      c("div", Et, [
-        $(a.$slots, "default")
+    return (l, o) => (i(), v("div", Ut, [
+      c("h3", At, h(t.title), 1),
+      c("div", Nt, [
+        $(l.$slots, "default")
       ])
     ]));
   }
-}), Lt = { class: "d-flex" }, Rt = { "data-cy": "before-slot" }, jt = { class: "position-relative w-100" }, Ht = { "data-cy": "after-slot" }, ye = /* @__PURE__ */ F({
+}), Et = { class: "d-flex" }, Lt = { "data-cy": "before-slot" }, Rt = { class: "position-relative w-100" }, jt = { "data-cy": "after-slot" }, ye = /* @__PURE__ */ F({
   __name: "ForgeDatepicker",
   props: /* @__PURE__ */ E({
     severity: { default: "primary" },
@@ -1804,11 +1813,11 @@ const vt = { key: 0 }, bt = {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, a = A(e, "modelValue"), { errors: o, errorMessage: l, handleChange: n, handleBlur: u, setValue: r } = K(() => t.name, void 0, {
-      initialValue: a.value
-    }), d = () => {
-      r(null), a.value = null;
-    }, p = x(() => o.value.length > 0), y = x(() => ({
+    const t = e, l = A(e, "modelValue"), { errors: o, errorMessage: a, handleChange: n, handleBlur: d, setValue: r } = K(() => t.name, void 0, {
+      initialValue: l.value
+    }), u = () => {
+      r(null), l.value = null;
+    }, p = k(() => o.value.length > 0), y = k(() => ({
       day: ({ context: s }) => ({
         class: [
           `text-center date-${t.severity === void 0 ? "primary" : t.severity}`,
@@ -1902,19 +1911,19 @@ const vt = { key: 0 }, bt = {
     return (s, T) => {
       const C = _e;
       return i(), v(L, null, [
-        c("div", Lt, [
-          c("span", Rt, [
+        c("div", Et, [
+          c("span", Lt, [
             $(s.$slots, "before")
           ]),
-          c("div", jt, [
+          c("div", Rt, [
             f(C, _({ ...t, ...s.$attrs }, {
               pt: y.value,
-              modelValue: a.value,
+              modelValue: l.value,
               "onUpdate:modelValue": [
-                T[0] || (T[0] = (M) => a.value = M),
+                T[0] || (T[0] = (P) => l.value = P),
                 m(n)
               ],
-              onBlur: m(u),
+              onBlur: m(d),
               "input-class": { "is-invalid": p.value }
             }), null, 16, ["pt", "modelValue", "onUpdate:modelValue", "onBlur", "input-class"]),
             j(f(m(V), {
@@ -1927,38 +1936,38 @@ const vt = { key: 0 }, bt = {
             j(f(m(V), {
               "data-cy": "icon",
               icon: "bi:x",
-              onClick: d,
+              onClick: u,
               class: B(["position-absolute end-0 top-50 bottom-50 my-auto text-muted cursor-pointer bg-white", t.showIcon ? "datepicker-close-icon" : "me-2"])
             }, null, 8, ["class"]), [
               [H, t.modelValue]
             ])
           ]),
-          c("span", Ht, [
+          c("span", jt, [
             $(s.$slots, "after")
           ])
         ]),
         j(c("small", {
           "data-cy": "error",
           class: "text-invalid"
-        }, h(m(l)), 513), [
+        }, h(m(a)), 513), [
           [H, p.value]
         ])
       ], 64);
     };
   }
-}), Bl = /* @__PURE__ */ F({
+}), wa = /* @__PURE__ */ F({
   __name: "ForgeRemainingCharacters",
   props: {
     maxCount: { default: 300 },
     currentCount: {}
   },
   setup(e) {
-    const t = e, a = x(() => t.maxCount - t.currentCount);
-    return (o, l) => (i(), v("div", {
-      class: B(a.value < 0 ? "text-danger" : "")
-    }, "Remaining characters: " + h(a.value), 3));
+    const t = e, l = k(() => t.maxCount - t.currentCount);
+    return (o, a) => (i(), v("div", {
+      class: B(l.value < 0 ? "text-danger" : "")
+    }, "Remaining characters: " + h(l.value), 3));
   }
-}), qt = /* @__PURE__ */ c("hr", null, null, -1), Yt = { class: "d-flex justify-content-between" }, Fl = /* @__PURE__ */ F({
+}), Ht = { class: "d-flex justify-content-between" }, xa = /* @__PURE__ */ F({
   __name: "ForgeForm",
   props: {
     onSubmit: {},
@@ -1970,25 +1979,25 @@ const vt = { key: 0 }, bt = {
     hideCancel: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, a = I(!1), o = I({
+    const t = e, l = I(!1), o = I({
       hasError: !1,
       message: ""
     });
-    async function l() {
-      a.value = !0, o.value.hasError = !1;
+    async function a() {
+      l.value = !0, o.value.hasError = !1;
       try {
         await t.onSubmit();
       } catch (n) {
         o.value.hasError = !0, n.message && (o.value.message = n.message);
       }
-      a.value = !1;
+      l.value = !1;
     }
-    return (n, u) => {
+    return (n, d) => {
       const r = R;
       return i(), v("form", _(n.$attrs, {
         novalidate: "",
         class: "position-relative shadow-sm border p-4 bg-white",
-        onSubmit: q(l, ["prevent"])
+        onSubmit: q(a, ["prevent"])
       }), [
         n.hideTitle ? S("", !0) : (i(), v(L, { key: 0 }, [
           $(n.$slots, "title", {}, () => [
@@ -1997,9 +2006,9 @@ const vt = { key: 0 }, bt = {
               "data-cy": "form-title"
             }, h(n.title), 3)
           ]),
-          qt
+          d[1] || (d[1] = c("hr", null, null, -1))
         ], 64)),
-        o.value.hasError ? (i(), w(le, {
+        o.value.hasError ? (i(), w(ae, {
           key: 1,
           severity: "danger",
           "data-cy": "error"
@@ -2014,7 +2023,7 @@ const vt = { key: 0 }, bt = {
           _: 3
         })) : S("", !0),
         $(n.$slots, "default"),
-        c("div", Yt, [
+        c("div", Ht, [
           $(n.$slots, "cancel", {}, () => [
             n.hideCancel ? S("", !0) : (i(), w(r, {
               key: 0,
@@ -2022,7 +2031,7 @@ const vt = { key: 0 }, bt = {
               type: "reset",
               severity: "secondary",
               outlined: "",
-              onClick: u[0] || (u[0] = (d) => n.$emit("cancel"))
+              onClick: d[0] || (d[0] = (u) => n.$emit("cancel"))
             }, {
               default: g(() => [
                 O(h(n.cancelText), 1)
@@ -2030,7 +2039,7 @@ const vt = { key: 0 }, bt = {
               _: 1
             }))
           ]),
-          $(n.$slots, "submit", { submit: l }, () => [
+          $(n.$slots, "submit", { submit: a }, () => [
             f(r, {
               "data-cy": "submit-btn",
               type: "submit",
@@ -2044,20 +2053,21 @@ const vt = { key: 0 }, bt = {
             })
           ])
         ]),
-        a.value ? (i(), w(me, {
+        l.value ? (i(), w(me, {
           key: 2,
           "data-cy": "loading-spinner"
         })) : S("", !0)
       ], 16);
     };
   }
-}), Gt = {
+}), qt = {
   key: 1,
   class: "d-flex flex-column w-100"
-}, Kt = ["for"], _l = /* @__PURE__ */ F({
+}, Yt = ["for"], ka = /* @__PURE__ */ F({
   __name: "ForgeFormField",
   props: /* @__PURE__ */ E({
     name: {},
+    fieldLabelPosition: { default: "top" },
     fieldLabel: {},
     type: { default: "text" },
     mask: { default: "" },
@@ -2068,92 +2078,97 @@ const vt = { key: 0 }, bt = {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = A(e, "modelValue"), a = e, o = (y) => {
-      a.type == "number" ? r(y.value) : r(y);
-    }, { errors: l, value: n, errorMessage: u, handleChange: r, handleBlur: d } = K(() => a.name, void 0, {
+    const t = A(e, "modelValue"), l = e, o = (y) => {
+      l.type == "number" ? r(y.value) : r(y);
+    }, { errors: a, value: n, errorMessage: d, handleChange: r, handleBlur: u } = K(() => l.name, void 0, {
       initialValue: t.value
-    }), p = x(() => l.value.length > 0);
+    }), p = k(() => a.value.length > 0);
     return de(() => n.value, (y) => {
       t.value = y;
     }, { immediate: !0 }), (y, s) => {
-      const T = Ve, C = Se, M = ie, P = ae, z = pe, b = ye;
-      return a.type === "checkbox" ? (i(), w(ct, _({
+      const T = Ve, C = Se, P = ie, M = le, z = pe, b = ye;
+      return l.type === "checkbox" ? (i(), w(ct, _({
         key: 0,
-        id: a.name,
-        label: a.fieldLabel
+        id: l.name,
+        label: l.fieldLabel
       }, y.$attrs, {
-        name: a.name,
+        name: l.name,
         modelValue: t.value,
-        "onUpdate:modelValue": s[0] || (s[0] = (k) => t.value = k)
-      }), null, 16, ["id", "label", "name", "modelValue"])) : (i(), v("div", Gt, [
-        c("label", {
-          for: a.name,
-          class: "mb-1"
-        }, h(a.fieldLabel), 9, Kt),
-        a.type === "number" ? (i(), w(m(ue), _({
-          key: 0,
-          id: a.name
-        }, y.$attrs, {
-          placeholder: a.placeholder,
-          "input-class": { "is-invalid": p.value },
-          class: { "is-invalid": p.value },
-          modelValue: t.value,
-          "onUpdate:modelValue": s[1] || (s[1] = (k) => t.value = k),
-          onInput: o
-        }), null, 16, ["id", "placeholder", "input-class", "class", "modelValue"])) : a.type === "textarea" ? (i(), w(T, _({
-          key: 1,
-          id: a.name
-        }, y.$attrs, {
-          placeholder: a.placeholder,
-          class: { "is-invalid": p.value },
-          modelValue: t.value,
-          "onUpdate:modelValue": s[2] || (s[2] = (k) => t.value = k),
-          onInput: o,
-          onBlur: m(d)
-        }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "mask" ? (i(), w(C, _({
-          key: 2,
-          id: a.name
-        }, y.$attrs, {
-          placeholder: a.placeholder,
-          mask: a.mask,
-          class: { "is-invalid": p.value },
-          modelValue: t.value,
-          "onUpdate:modelValue": s[3] || (s[3] = (k) => t.value = k),
-          onComplete: o,
-          onBlur: m(d)
-        }), null, 16, ["id", "placeholder", "mask", "class", "modelValue", "onBlur"])) : a.type === "text" ? (i(), w(M, _({
-          key: 3,
-          id: a.name
-        }, y.$attrs, {
-          placeholder: a.placeholder,
-          class: { "is-invalid": p.value },
-          modelValue: t.value,
-          "onUpdate:modelValue": s[4] || (s[4] = (k) => t.value = k),
-          onInput: o,
-          onBlur: m(d)
-        }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "select" ? (i(), w(P, _({ key: 4 }, { ...a, ...y.$attrs }, {
-          modelValue: t.value,
-          "onUpdate:modelValue": s[5] || (s[5] = (k) => t.value = k),
-          class: { "is-invalid": p.value }
-        }), null, 16, ["modelValue", "class"])) : a.type === "multiselect" ? (i(), w(z, _({ key: 5 }, { ...a, ...y.$attrs }, {
-          modelValue: t.value,
-          "onUpdate:modelValue": s[6] || (s[6] = (k) => t.value = k),
-          class: { "is-invalid": p.value }
-        }), null, 16, ["modelValue", "class"])) : a.type === "datepicker" ? (i(), w(b, _({ key: 6 }, { ...a, ...y.$attrs }, {
-          modelValue: t.value,
-          "onUpdate:modelValue": s[7] || (s[7] = (k) => t.value = k),
-          class: { "is-invalid": p.value }
-        }), null, 16, ["modelValue", "class"])) : S("", !0),
+        "onUpdate:modelValue": s[0] || (s[0] = (x) => t.value = x)
+      }), null, 16, ["id", "label", "name", "modelValue"])) : (i(), v("div", qt, [
+        c("div", {
+          "data-cy": "input-wrapper",
+          class: B(["d-flex", l.fieldLabelPosition === "top" ? "flex-column" : "flex-row"])
+        }, [
+          c("label", {
+            for: l.name,
+            class: B(l.fieldLabelPosition === "top" ? "mb-1" : "me-2")
+          }, h(l.fieldLabel), 11, Yt),
+          l.type === "number" ? (i(), w(m(ue), _({
+            key: 0,
+            id: l.name
+          }, y.$attrs, {
+            placeholder: l.placeholder,
+            "input-class": { "is-invalid": p.value },
+            class: { "is-invalid": p.value },
+            modelValue: t.value,
+            "onUpdate:modelValue": s[1] || (s[1] = (x) => t.value = x),
+            onInput: o
+          }), null, 16, ["id", "placeholder", "input-class", "class", "modelValue"])) : l.type === "textarea" ? (i(), w(T, _({
+            key: 1,
+            id: l.name
+          }, y.$attrs, {
+            placeholder: l.placeholder,
+            class: { "is-invalid": p.value },
+            modelValue: t.value,
+            "onUpdate:modelValue": s[2] || (s[2] = (x) => t.value = x),
+            onInput: o,
+            onBlur: m(u)
+          }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : l.type === "mask" ? (i(), w(C, _({
+            key: 2,
+            id: l.name
+          }, y.$attrs, {
+            placeholder: l.placeholder,
+            mask: l.mask,
+            class: { "is-invalid": p.value },
+            modelValue: t.value,
+            "onUpdate:modelValue": s[3] || (s[3] = (x) => t.value = x),
+            onComplete: o,
+            onBlur: m(u)
+          }), null, 16, ["id", "placeholder", "mask", "class", "modelValue", "onBlur"])) : l.type === "text" ? (i(), w(P, _({
+            key: 3,
+            id: l.name
+          }, y.$attrs, {
+            placeholder: l.placeholder,
+            class: { "is-invalid": p.value },
+            modelValue: t.value,
+            "onUpdate:modelValue": s[4] || (s[4] = (x) => t.value = x),
+            onInput: o,
+            onBlur: m(u)
+          }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : l.type === "select" ? (i(), w(M, _({ key: 4 }, { ...l, ...y.$attrs }, {
+            modelValue: t.value,
+            "onUpdate:modelValue": s[5] || (s[5] = (x) => t.value = x),
+            class: { "is-invalid": p.value }
+          }), null, 16, ["modelValue", "class"])) : l.type === "multiselect" ? (i(), w(z, _({ key: 5 }, { ...l, ...y.$attrs }, {
+            modelValue: t.value,
+            "onUpdate:modelValue": s[6] || (s[6] = (x) => t.value = x),
+            class: { "is-invalid": p.value }
+          }), null, 16, ["modelValue", "class"])) : l.type === "datepicker" ? (i(), w(b, _({ key: 6 }, { ...l, ...y.$attrs }, {
+            modelValue: t.value,
+            "onUpdate:modelValue": s[7] || (s[7] = (x) => t.value = x),
+            class: { "is-invalid": p.value }
+          }), null, 16, ["modelValue", "class"])) : S("", !0)
+        ], 2),
         j(c("small", {
           "data-cy": "error",
           class: "invalid-feedback"
-        }, h(m(u)), 513), [
-          [H, p.value && a.type !== "multiselect" && a.type !== "datepicker"]
+        }, h(m(d)), 513), [
+          [H, p.value && l.type !== "multiselect" && l.type !== "datepicker"]
         ])
       ]));
     };
   }
-}), Sl = /* @__PURE__ */ F({
+}), $a = /* @__PURE__ */ F({
   __name: "ForgeChips",
   props: {
     chipSeverity: { default: "primary" },
@@ -2180,9 +2195,9 @@ const vt = { key: 0 }, bt = {
     unstyled: { type: Boolean }
   },
   setup(e) {
-    const t = e, { errors: a, value: o, errorMessage: l } = K(() => t.name, void 0, {
+    const t = e, { errors: l, value: o, errorMessage: a } = K(() => t.name, void 0, {
       initialValue: t.modelValue
-    }), n = x(() => a.value.length > 0), u = x(() => ({
+    }), n = k(() => l.value.length > 0), d = k(() => ({
       inputtoken: "list-unstyled",
       input: "border-0",
       container: ({ props: r }) => ({
@@ -2213,13 +2228,13 @@ const vt = { key: 0 }, bt = {
         ]
       }
     }));
-    return (r, d) => {
+    return (r, u) => {
       const p = Ce;
       return i(), v(L, null, [
         f(p, _({ ...t, ...r.$attrs }, {
-          pt: u.value,
+          pt: d.value,
           "model-value": m(o),
-          "onUpdate:modelValue": d[0] || (d[0] = (y) => se(o) ? o.value = y : null)
+          "onUpdate:modelValue": u[0] || (u[0] = (y) => se(o) ? o.value = y : null)
         }), {
           removetokenicon: g(({ removeCallback: y }) => [
             j(f(m(V), {
@@ -2235,13 +2250,13 @@ const vt = { key: 0 }, bt = {
         j(c("small", {
           "data-cy": "error",
           class: "text-invalid"
-        }, h(m(l)), 513), [
+        }, h(m(a)), 513), [
           [H, n.value]
         ])
       ], 64);
     };
   }
-}), Wt = /* @__PURE__ */ F({
+}), Gt = /* @__PURE__ */ F({
   __name: "ForgeProgressBar",
   props: {
     severity: { default: "primary" },
@@ -2256,7 +2271,7 @@ const vt = { key: 0 }, bt = {
     unstyled: { type: Boolean }
   },
   setup(e) {
-    const t = e, a = x(() => t.striped ? "progress-bar-striped" : null), o = x(() => t.animate ? "progress-bar-animated" : null), l = x(() => {
+    const t = e, l = k(() => t.striped ? "progress-bar-striped" : null), o = k(() => t.animate ? "progress-bar-animated" : null), a = k(() => {
       switch (t.severity) {
         case "brand":
           return "bg-brand";
@@ -2275,25 +2290,25 @@ const vt = { key: 0 }, bt = {
         default:
           return "bg-primary";
       }
-    }), n = x(() => ({
+    }), n = k(() => ({
       root: {
         style: t.pixelWidth ? `width: ${t.pixelWidth}px` : ""
       },
       value: {
-        class: [l.value, a.value, o.value]
+        class: [a.value, l.value, o.value]
       }
     }));
-    return (u, r) => {
-      const d = Te;
-      return i(), w(d, _({ ...u.$attrs, ...t }, { pt: n.value }), {
+    return (d, r) => {
+      const u = Te;
+      return i(), w(u, _({ ...d.$attrs, ...t }, { pt: n.value }), {
         default: g(() => [
-          $(u.$slots, "default")
+          $(d.$slots, "default")
         ]),
         _: 3
       }, 16, ["pt"]);
     };
   }
-}), Zt = { class: "value text-white w-100 text-center" }, Vl = /* @__PURE__ */ F({
+}), Kt = { class: "value text-white w-100 text-center" }, Ba = /* @__PURE__ */ F({
   __name: "ForgeStatWidget",
   props: {
     size: { default: "md" },
@@ -2301,18 +2316,18 @@ const vt = { key: 0 }, bt = {
   },
   setup(e) {
     const t = e;
-    return (a, o) => (i(), v("div", _(a.$attrs, {
+    return (l, o) => (i(), v("div", _(l.$attrs, {
       class: `d-flex shadow m-2 align-items-center widget--${t.size} bg-${t.severity}`
     }), [
-      c("span", Zt, [
-        $(a.$slots, "default")
+      c("span", Kt, [
+        $(l.$slots, "default")
       ])
     ], 16));
   }
-}), Jt = {
+}), Wt = {
   class: "d-flex flex-column align-items-center",
   "data-cy": "stepper"
-}, Xt = { class: "d-flex align-items-center justify-content-center w-100" }, Cl = /* @__PURE__ */ F({
+}, Zt = { class: "d-flex align-items-center justify-content-center w-100" }, Fa = /* @__PURE__ */ F({
   __name: "ForgeStepper",
   props: {
     currentStep: { default: 0 },
@@ -2328,21 +2343,21 @@ const vt = { key: 0 }, bt = {
   },
   emits: ["update:currentStep"],
   setup(e, { emit: t }) {
-    const a = t, o = e, l = I(o.currentStep), n = () => {
+    const l = t, o = e, a = I(o.currentStep), n = () => {
       do
-        l.value--;
-      while (o.model[l.value].disabled);
-      a("update:currentStep", l.value);
-    }, u = () => {
-      if (l.value < o.model.length - 1)
+        a.value--;
+      while (o.model[a.value].disabled);
+      l("update:currentStep", a.value);
+    }, d = () => {
+      if (a.value < o.model.length - 1)
         do
-          l.value++;
-        while (o.model[l.value].disabled);
-      a("update:currentStep", l.value);
-    }, r = x(() => {
+          a.value++;
+        while (o.model[a.value].disabled);
+      l("update:currentStep", a.value);
+    }, r = k(() => {
       const p = o.model.findIndex((y) => !y.disabled);
-      return !(p < l.value && p > -1);
-    }), d = x(() => ({
+      return !(p < a.value && p > -1);
+    }), u = k(() => ({
       menuitem: (p) => ({
         class: [{
           "cursor-pointer": !p.context.disabled
@@ -2353,13 +2368,13 @@ const vt = { key: 0 }, bt = {
           "d-flex align-items-center justify-content-center mb-2 step",
           {
             inactive: p.context.disabled,
-            "bg-primary text-white": p.context.index === l.value && (o.severity === void 0 || o.severity === "primary"),
-            "bg-brand text-white": p.context.index === l.value && o.severity === "brand",
-            "bg-secondary text-white": p.context.index === l.value && o.severity === "secondary",
-            "bg-success text-white": p.context.index === l.value && o.severity === "success",
-            "bg-warning text-white": p.context.index === l.value && o.severity === "warning",
-            "bg-danger text-white": p.context.index === l.value && o.severity === "danger",
-            "bg-info text-white": p.context.index === l.value && o.severity === "info"
+            "bg-primary text-white": p.context.index === a.value && (o.severity === void 0 || o.severity === "primary"),
+            "bg-brand text-white": p.context.index === a.value && o.severity === "brand",
+            "bg-secondary text-white": p.context.index === a.value && o.severity === "secondary",
+            "bg-success text-white": p.context.index === a.value && o.severity === "success",
+            "bg-warning text-white": p.context.index === a.value && o.severity === "warning",
+            "bg-danger text-white": p.context.index === a.value && o.severity === "danger",
+            "bg-info text-white": p.context.index === a.value && o.severity === "info"
           }
         ]
       }),
@@ -2367,21 +2382,21 @@ const vt = { key: 0 }, bt = {
         class: [
           "h5",
           {
-            "border-bottom border-2 border-primary": p.context.index === l.value && (o.severity === void 0 || o.severity === "primary"),
-            "border-bottom border-2 border-brand": p.context.index === l.value && o.severity === "brand",
-            "border-bottom border-2 border-secondary": p.context.index === l.value && o.severity === "secondary",
-            "border-bottom border-2 border-success": p.context.index === l.value && o.severity === "success",
-            "border-bottom border-2 border-warning": p.context.index === l.value && o.severity === "warning",
-            "border-bottom border-2 border-danger": p.context.index === l.value && o.severity === "danger",
-            "border-bottom border-2 border-info": p.context.index === l.value && o.severity === "info"
+            "border-bottom border-2 border-primary": p.context.index === a.value && (o.severity === void 0 || o.severity === "primary"),
+            "border-bottom border-2 border-brand": p.context.index === a.value && o.severity === "brand",
+            "border-bottom border-2 border-secondary": p.context.index === a.value && o.severity === "secondary",
+            "border-bottom border-2 border-success": p.context.index === a.value && o.severity === "success",
+            "border-bottom border-2 border-warning": p.context.index === a.value && o.severity === "warning",
+            "border-bottom border-2 border-danger": p.context.index === a.value && o.severity === "danger",
+            "border-bottom border-2 border-info": p.context.index === a.value && o.severity === "info"
           }
         ]
       })
     }));
     return (p, y) => {
-      const s = R, T = Pe, C = Me;
-      return i(), v("div", Jt, [
-        c("div", Xt, [
+      const s = R, T = Me, C = Pe;
+      return i(), v("div", Wt, [
+        c("div", Zt, [
           f(s, {
             severity: o.severity,
             disabled: r.value,
@@ -2398,33 +2413,33 @@ const vt = { key: 0 }, bt = {
             _: 1
           }, 8, ["severity", "disabled"]),
           f(T, {
-            "active-step": l.value,
-            "onUpdate:activeStep": y[0] || (y[0] = (M) => l.value = M),
+            "active-step": a.value,
+            "onUpdate:activeStep": y[0] || (y[0] = (P) => a.value = P),
             model: o.model,
-            pt: d.value,
+            pt: u.value,
             readonly: !1
           }, null, 8, ["active-step", "model", "pt"])
         ]),
         f(C, { class: "m-4" }),
-        (i(!0), v(L, null, Y(o.model, (M, P) => (i(), v("div", {
-          key: P,
+        (i(!0), v(L, null, Y(o.model, (P, M) => (i(), v("div", {
+          key: M,
           class: "w-100"
         }, [
-          P === l.value ? $(p.$slots, M.key ?? M.label, {
+          M === a.value ? $(p.$slots, P.key ?? P.label, {
             key: 0,
-            nextStep: u,
+            nextStep: d,
             previousStep: n
           }, () => [
-            f(le, {
+            f(ae, {
               severity: "info",
               "data-cy": "alert"
             }, {
               default: g(() => [
-                O(" Please add Slot Content for the key " + h(M.key ?? M.label) + " ", 1),
+                O(" Please add Slot Content for the key " + h(P.key ?? P.label) + " ", 1),
                 f(s, {
                   severity: "primary",
                   label: "Next",
-                  onClick: u,
+                  onClick: d,
                   class: "ms-2"
                 })
               ]),
@@ -2435,7 +2450,7 @@ const vt = { key: 0 }, bt = {
       ]);
     };
   }
-}), Qt = { class: "p-4 text-wrap w-100" }, ea = { class: "p-4 text-wrap w-100" }, Tl = /* @__PURE__ */ F({
+}), Jt = { class: "p-4 text-wrap w-100" }, Xt = { class: "p-4 text-wrap w-100" }, _a = /* @__PURE__ */ F({
   __name: "ForgeTile",
   props: {
     severity: { default: "primary" },
@@ -2444,20 +2459,20 @@ const vt = { key: 0 }, bt = {
     selected: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, a = x(() => `${t.severity === void 0 ? "tile-primary" : `tile-${t.severity}`} ${t.barPosition === "none" ? "" : `tile-bar-${t.barPosition}`} ${t.selected ? "selected" : ""}`), o = x(() => `${t.severity === void 0 ? "tile-primary border-primary" : `tile-${t.severity} border-${t.severity}`} ${t.barPosition === "none" ? "" : `tile-bar-${t.barPosition}`} ${t.selected ? "selected" : ""}`);
-    return (l, n) => {
-      const u = R;
-      return t.clickable ? (i(), w(u, {
+    const t = e, l = k(() => `${t.severity === void 0 ? "tile-primary" : `tile-${t.severity}`} ${t.barPosition === "none" ? "" : `tile-bar-${t.barPosition}`} ${t.selected ? "selected" : ""}`), o = k(() => `${t.severity === void 0 ? "tile-primary border-primary" : `tile-${t.severity} border-${t.severity}`} ${t.barPosition === "none" ? "" : `tile-bar-${t.barPosition}`} ${t.selected ? "selected" : ""}`);
+    return (a, n) => {
+      const d = R;
+      return t.clickable ? (i(), w(d, {
         key: 0,
-        class: B(["d-flex w-100 p-0 text-body", a.value]),
+        class: B(["d-flex w-100 p-0 text-body", l.value]),
         severity: t.severity,
         unstyled: "",
         "data-cy": "button-tile"
       }, {
         default: g(() => [
-          c("div", Qt, [
-            $(l.$slots, "default", {}, () => [
-              O("Tile Content")
+          c("div", Jt, [
+            $(a.$slots, "default", {}, () => [
+              n[0] || (n[0] = O("Tile Content"))
             ])
           ])
         ]),
@@ -2467,9 +2482,9 @@ const vt = { key: 0 }, bt = {
         class: B(["d-flex w-100", o.value]),
         "data-cy": "tile"
       }, [
-        c("div", ea, [
-          $(l.$slots, "default", {}, () => [
-            O("Tile Content")
+        c("div", Xt, [
+          $(a.$slots, "default", {}, () => [
+            n[1] || (n[1] = O("Tile Content"))
           ])
         ])
       ], 2));
@@ -2479,13 +2494,13 @@ const vt = { key: 0 }, bt = {
 function X(e, t) {
   return e > 1 ? `${t}s` : t;
 }
-const ta = {
+const Qt = {
   class: "d-flex justify-content-start align-items-baseline",
   "data-cy": "pagination-header"
-}, aa = { class: "ms-2" }, la = { key: 0 }, oa = /* @__PURE__ */ c("span", { class: "mx-2" }, "|", -1), na = {
+}, el = { class: "ms-2" }, tl = { key: 0 }, ll = {
   class: "w-auto",
   "data-cy": "total"
-}, sa = /* @__PURE__ */ F({
+}, al = /* @__PURE__ */ F({
   __name: "ForgePaginationHeader",
   props: {
     total: {},
@@ -2494,31 +2509,31 @@ const ta = {
   },
   emits: ["update:perPage"],
   setup(e, { emit: t }) {
-    const a = t, o = e, l = (u) => {
-      a("update:perPage", u.value);
-    }, n = x(() => {
-      const u = Math.ceil(o.total / o.perPage);
-      return `${u} ${X(u, "page")}`;
+    const l = t, o = e, a = (d) => {
+      l("update:perPage", d.value);
+    }, n = k(() => {
+      const d = Math.ceil(o.total / o.perPage);
+      return `${d} ${X(d, "page")}`;
     });
-    return (u, r) => (i(), v("div", ta, [
-      O(" Number of results per page "),
-      c("div", aa, [
-        f(m(ae), {
+    return (d, r) => (i(), v("div", Qt, [
+      r[2] || (r[2] = O(" Number of results per page ")),
+      c("div", el, [
+        f(m(le), {
           options: o.pageSizes,
           "model-value": o.perPage,
-          onChange: r[0] || (r[0] = (d) => l(d))
+          onChange: r[0] || (r[0] = (u) => a(u))
         }, null, 8, ["options", "model-value"])
       ]),
-      o.total ? (i(), v("div", la, [
-        oa,
-        c("span", na, h(o.total) + " " + h(m(X)(o.total, "result")) + " across " + h(n.value), 1)
+      o.total ? (i(), v("div", tl, [
+        r[1] || (r[1] = c("span", { class: "mx-2" }, "|", -1)),
+        c("span", ll, h(o.total) + " " + h(m(X)(o.total, "result")) + " across " + h(n.value), 1)
       ])) : S("", !0)
     ]));
   }
-}), ia = { class: "position-relative" }, ra = { "data-cy": "above-table-slot" }, da = { class: "d-flex w-100" }, ua = {
+}), ol = { class: "position-relative" }, nl = { "data-cy": "above-table-slot" }, sl = { class: "d-flex w-100" }, il = {
   class: "mx-auto",
   "data-cy": "empty-message"
-}, ca = { class: "d-flex" }, ma = { class: "d-flex align-items-end mb-2" }, pa = { key: 0 }, ya = { class: "ms-auto" }, va = /* @__PURE__ */ c("span", { class: "me-2 my-auto text-nowrap" }, "Page Size:", -1), Ml = /* @__PURE__ */ F({
+}, rl = { class: "d-flex" }, dl = { class: "d-flex align-items-end mb-2" }, ul = { key: 0 }, cl = { class: "ms-auto" }, Sa = /* @__PURE__ */ F({
   __name: "ForgeTable",
   props: {
     value: {},
@@ -2600,17 +2615,17 @@ const ta = {
   },
   emits: ["update:filters", "update:tableContext", "sort", "page"],
   setup(e, { emit: t }) {
-    const a = t, o = e, l = I(), n = I([10, 20, 50, 100]), u = I(20), r = I({
+    const l = t, o = e, a = I(), n = I([10, 20, 50, 100]), d = I(20), r = I({
       filters: o.filters,
-      perPage: u.value,
+      perPage: d.value,
       page: 0,
       sortDirection: "None",
       sortField: "",
       total: o.totalRecords ?? o.value.length
-    }), d = x(() => o.totalRecords ?? o.value.length), p = x(() => {
-      const b = Math.ceil(d.value / u.value);
+    }), u = k(() => o.totalRecords ?? o.value.length), p = k(() => {
+      const b = Math.ceil(u.value / d.value);
       return `${b} ${X(b, "page")}`;
-    }), y = x(() => ({
+    }), y = k(() => ({
       thead: () => ({
         class: [
           {
@@ -2638,63 +2653,63 @@ const ta = {
       else
         for (const b in o.filters)
           typeof o.filters[b] == "string" ? o.filters[b] = "" : o.filters[b].value = null;
-      M(o.filters);
+      P(o.filters);
     }, T = () => {
-      l.value.exportCSV();
+      a.value.exportCSV();
     }, C = (b) => {
-      var k;
-      r.value.sortDirection = b.sortOrder === 1 ? "Asc" : b.sortOrder === -1 ? "Desc" : "None", r.value.sortField = ((k = b.sortField) == null ? void 0 : k.toString()) ?? "", a("update:tableContext", r.value), a("sort", b);
-    }, M = (b) => {
-      r.value.filters = b, a("update:tableContext", r.value), a("update:filters", b);
+      var x;
+      r.value.sortDirection = b.sortOrder === 1 ? "Asc" : b.sortOrder === -1 ? "Desc" : "None", r.value.sortField = ((x = b.sortField) == null ? void 0 : x.toString()) ?? "", l("update:tableContext", r.value), l("sort", b);
     }, P = (b) => {
-      r.value.page = b.page, a("update:tableContext", r.value), a("page", b);
+      r.value.filters = b, l("update:tableContext", r.value), l("update:filters", b);
+    }, M = (b) => {
+      r.value.page = b.page, l("update:tableContext", r.value), l("page", b);
     }, z = () => {
-      r.value.perPage = u.value, a("update:tableContext", r.value);
+      r.value.perPage = d.value, l("update:tableContext", r.value);
     };
     return de(() => o.filters, (b) => {
-      r.value.filters = b, a("update:tableContext", r.value);
-    }, { deep: !0 }), ne(() => a("update:tableContext", r.value)), (b, k) => (i(), v("div", ia, [
-      c("span", ra, [
+      r.value.filters = b, l("update:tableContext", r.value);
+    }, { deep: !0 }), ne(() => l("update:tableContext", r.value)), (b, x) => (i(), v("div", ol, [
+      c("span", nl, [
         $(b.$slots, "above-table")
       ]),
       f(m(Ie), _({
         class: ["w-100", `${o.severity ? `forge-table-${o.severity}` : ""}`]
       }, { ...o, ...b.$attrs }, {
         pt: y.value,
-        rows: u.value,
-        "total-records": d.value,
+        rows: d.value,
+        "total-records": u.value,
         "filter-display": o.filters ? "row" : void 0,
         ref_key: "forgeTable",
-        ref: l,
+        ref: a,
         "data-cy": "table",
-        "onUpdate:filters": M,
+        "onUpdate:filters": P,
         onSort: C,
-        onPage: P
+        onPage: M
       }), te({
         empty: g(() => [
-          c("div", da, [
-            c("h5", ua, h(b.emptyMessage ?? "No items Found."), 1)
+          c("div", sl, [
+            c("h5", il, h(b.emptyMessage ?? "No items Found."), 1)
           ])
         ]),
         header: g(() => [
           c("div", {
             class: B(o.loading ? "opacity-50" : "")
           }, [
-            c("div", ca, [
-              c("div", ma, [
-                b.paginator && !b.legacyPaginationFooter ? (i(), v("span", pa, [
-                  f(sa, {
-                    total: d.value,
+            c("div", rl, [
+              c("div", dl, [
+                b.paginator && !b.legacyPaginationFooter ? (i(), v("span", ul, [
+                  f(al, {
+                    total: u.value,
                     "page-sizes": n.value,
-                    "per-page": u.value,
+                    "per-page": d.value,
                     "onUpdate:perPage": [
-                      k[0] || (k[0] = (G) => u.value = G),
+                      x[0] || (x[0] = (G) => d.value = G),
                       z
                     ]
                   }, null, 8, ["total", "page-sizes", "per-page"])
                 ])) : S("", !0)
               ]),
-              c("div", ya, [
+              c("div", cl, [
                 b.showClearButton ? (i(), w(m(R), {
                   key: 0,
                   outlined: "",
@@ -2708,7 +2723,7 @@ const ta = {
                       width: "24",
                       height: "24"
                     }),
-                    O(" Clear ")
+                    x[2] || (x[2] = O(" Clear "))
                   ]),
                   _: 1
                 }, 8, ["class"])) : S("", !0),
@@ -2724,7 +2739,7 @@ const ta = {
                       width: "24",
                       height: "24"
                     }),
-                    O(" Export ")
+                    x[3] || (x[3] = O(" Export "))
                   ]),
                   _: 1
                 })) : S("", !0)
@@ -2750,11 +2765,11 @@ const ta = {
               class: B(["d-flex", o.loading ? "opacity-50" : ""]),
               "data-cy": "legacy-page-size"
             }, [
-              va,
-              f(m(ae), {
+              x[4] || (x[4] = c("span", { class: "me-2 my-auto text-nowrap" }, "Page Size:", -1)),
+              f(m(le), {
                 options: n.value,
-                modelValue: u.value,
-                "onUpdate:modelValue": k[1] || (k[1] = (G) => u.value = G),
+                modelValue: d.value,
+                "onUpdate:modelValue": x[1] || (x[1] = (G) => d.value = G),
                 class: "ms-2",
                 onClick: z
               }, null, 8, ["options", "modelValue"])
@@ -2768,14 +2783,14 @@ const ta = {
             c("span", {
               "data-cy": "legacy-total",
               class: B(o.loading ? "opacity-50" : "")
-            }, h(d.value) + " " + h(m(X)(d.value, "result")) + " across " + h(p.value), 3)
+            }, h(u.value) + " " + h(m(X)(u.value, "result")) + " across " + h(p.value), 3)
           ]),
           key: "1"
         } : void 0
       ]), 1040, ["class", "pt", "rows", "total-records", "filter-display"])
     ]));
   }
-}), ba = { class: "d-flex position-relative" }, fa = { class: "d-flex w-100" }, ga = { class: "d-flex w-100" }, Pl = /* @__PURE__ */ F({
+}), ml = { class: "d-flex position-relative" }, pl = { class: "d-flex w-100" }, yl = { class: "d-flex w-100" }, Va = /* @__PURE__ */ F({
   __name: "ForgeFilterHeader",
   props: /* @__PURE__ */ E({
     dataType: {},
@@ -2790,49 +2805,49 @@ const ta = {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = A(e, "modelValue"), a = (l, n) => {
-      if (!l || Array.isArray(l) && l.length === 0)
+    const t = A(e, "modelValue"), l = (a, n) => {
+      if (!a || Array.isArray(a) && a.length === 0)
         return n;
-      const u = (r) => {
+      const d = (r) => {
         var p;
-        const d = (p = e.dropdownOptions) == null ? void 0 : p.find(
+        const u = (p = e.dropdownOptions) == null ? void 0 : p.find(
           (y) => e.optionValue ? y[e.optionValue] === r : Object.keys(y).every((s) => r.hasOwnProperty(s) && y[s] === r[s])
         );
-        return e.optionLabel ? d[e.optionLabel] : d;
+        return e.optionLabel ? u[e.optionLabel] : u;
       };
-      return Array.isArray(l) ? l.map(u).join(", ") : u(l);
+      return Array.isArray(a) ? a.map(d).join(", ") : d(a);
     }, o = () => {
       e.clearFilter ? e.clearFilter() : t.value = null;
     };
-    return (l, n) => {
-      const u = ue, r = R;
-      return i(), v("div", ba, [
-        l.dataType === "numeric" ? (i(), w(u, _({
+    return (a, n) => {
+      const d = ue, r = R;
+      return i(), v("div", ml, [
+        a.dataType === "numeric" ? (i(), w(d, _({
           key: 0,
           modelValue: t.value,
-          "onUpdate:modelValue": n[0] || (n[0] = (d) => t.value = d)
-        }, l.$attrs), null, 16, ["modelValue"])) : l.dataType === "date" ? (i(), w(ye, _({
+          "onUpdate:modelValue": n[0] || (n[0] = (u) => t.value = u)
+        }, a.$attrs), null, 16, ["modelValue"])) : a.dataType === "date" ? (i(), w(ye, _({
           key: 1,
           modelValue: t.value,
-          "onUpdate:modelValue": n[1] || (n[1] = (d) => t.value = d)
-        }, l.$attrs, {
+          "onUpdate:modelValue": n[1] || (n[1] = (u) => t.value = u)
+        }, a.$attrs, {
           "show-icon": !1,
           "show-on-focus": !0
-        }), null, 16, ["modelValue"])) : l.dataType === "select" ? (i(), w(m(ae), _({
+        }), null, 16, ["modelValue"])) : a.dataType === "select" ? (i(), w(m(le), _({
           key: 2,
           modelValue: t.value,
-          "onUpdate:modelValue": n[2] || (n[2] = (d) => t.value = d)
-        }, l.$attrs, {
-          options: l.dropdownOptions,
-          "option-value": l.optionValue,
-          "option-label": l.optionLabel
+          "onUpdate:modelValue": n[2] || (n[2] = (u) => t.value = u)
+        }, a.$attrs, {
+          options: a.dropdownOptions,
+          "option-value": a.optionValue,
+          "option-label": a.optionLabel
         }), {
-          value: g(({ value: d, placeholder: p }) => [
-            c("div", fa, [
+          value: g(({ value: u, placeholder: p }) => [
+            c("div", pl, [
               c("span", {
-                class: B({ "filter-placeholder": d === null })
-              }, h(a(d, p)), 3),
-              l.showClearButton && t.value !== null ? (i(), w(r, {
+                class: B({ "filter-placeholder": u === null })
+              }, h(l(u, p)), 3),
+              a.showClearButton && t.value !== null ? (i(), w(r, {
                 key: 0,
                 onClick: q(o, ["prevent"]),
                 size: "small",
@@ -2851,23 +2866,23 @@ const ta = {
             ])
           ]),
           _: 1
-        }, 16, ["modelValue", "options", "option-value", "option-label"])) : l.dataType === "multiselect" ? (i(), w(m(ze), _({
+        }, 16, ["modelValue", "options", "option-value", "option-label"])) : a.dataType === "multiselect" ? (i(), w(m(ze), _({
           key: 3,
           modelValue: t.value,
-          "onUpdate:modelValue": n[3] || (n[3] = (d) => t.value = d)
-        }, l.$attrs, {
-          options: l.dropdownOptions,
+          "onUpdate:modelValue": n[3] || (n[3] = (u) => t.value = u)
+        }, a.$attrs, {
+          options: a.dropdownOptions,
           showToggleAll: !1,
-          "option-label": l.optionLabel,
-          "option-value": l.optionValue,
+          "option-label": a.optionLabel,
+          "option-value": a.optionValue,
           filter: ""
         }), {
-          value: g(({ value: d, placeholder: p }) => [
-            c("div", ga, [
+          value: g(({ value: u, placeholder: p }) => [
+            c("div", yl, [
               c("span", {
-                class: B({ "filter-placeholder": (d == null ? void 0 : d.length) === 0 || d === null })
-              }, h(a(d, p)), 3),
-              l.showClearButton && (d == null ? void 0 : d.length) > 0 ? (i(), w(r, {
+                class: B({ "filter-placeholder": (u == null ? void 0 : u.length) === 0 || u === null })
+              }, h(l(u, p)), 3),
+              a.showClearButton && (u == null ? void 0 : u.length) > 0 ? (i(), w(r, {
                 key: 0,
                 onClick: q(o, ["prevent"]),
                 size: "small",
@@ -2889,9 +2904,9 @@ const ta = {
         }, 16, ["modelValue", "options", "option-label", "option-value"])) : (i(), w(m(ie), _({
           key: 4,
           modelValue: t.value,
-          "onUpdate:modelValue": n[4] || (n[4] = (d) => t.value = d)
-        }, l.$attrs), null, 16, ["modelValue"])),
-        l.showClearButton && t.value !== null && l.dataType !== "select" && l.dataType !== "multiselect" && l.dataType !== "date" ? (i(), w(r, {
+          "onUpdate:modelValue": n[4] || (n[4] = (u) => t.value = u)
+        }, a.$attrs), null, 16, ["modelValue"])),
+        a.showClearButton && t.value !== null && a.dataType !== "select" && a.dataType !== "multiselect" && a.dataType !== "date" ? (i(), w(r, {
           key: 5,
           onClick: q(o, ["prevent"]),
           size: "small",
@@ -2911,48 +2926,48 @@ const ta = {
     };
   }
 });
-function ve(e, t, a, o) {
-  const l = t.flatMap((n) => n.file);
+function ve(e, t, l, o) {
+  const a = t.flatMap((n) => n.file);
   return t = t.map((n) => ({ ...n, status: n.status == "Duplicate" ? "Not Uploaded" : n.status })), e.forEach((n) => {
-    const u = l.findIndex((d) => d.name === n.name);
+    const d = a.findIndex((u) => u.name === n.name);
     let r = "Not Uploaded";
-    u === -1 ? ((!a.includes(n.type) || !(n.size <= o)) && (r = a.includes(n.type) ? "InvalidFileSize" : "InvalidFileType"), t.unshift({
+    d === -1 ? ((!l.includes(n.type) || !(n.size <= o)) && (r = l.includes(n.type) ? "InvalidFileSize" : "InvalidFileType"), t.unshift({
       file: n,
       status: r,
       blobFileName: null
-    })) : t[u].status = "Duplicate";
+    })) : t[d].status = "Duplicate";
   }), t;
 }
-async function ha(e, t) {
+async function vl(e, t) {
   if (e === "Uploaded" && t !== null)
     try {
       await new ce(t).delete();
-    } catch (a) {
-      if (a !== "BlobNotFound") {
+    } catch (l) {
+      if (l !== "BlobNotFound") {
         e = "DeleteFileFailed";
         return;
       }
     }
 }
-function re(e, t = !0, a = 1) {
+function re(e, t = !0, l = 1) {
   const o = t ? 1e3 : 1024;
   if (Math.abs(e) < o)
     return e + " B";
-  const l = t ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+  const a = t ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
   let n = -1;
-  const u = 10 ** a;
+  const d = 10 ** l;
   do
     e /= o, ++n;
-  while (Math.round(Math.abs(e) * u) / u >= o && n < l.length - 1);
-  return e.toFixed(a) + " " + l[n];
+  while (Math.round(Math.abs(e) * d) / d >= o && n < a.length - 1);
+  return e.toFixed(l) + " " + a[n];
 }
-function wa(e) {
+function bl(e) {
   return ["image/gif", "image/png", "image/jpeg", "image/svg"].includes(e);
 }
-function xa(e) {
+function fl(e) {
   return URL.createObjectURL(e);
 }
-const ka = { class: "d-flex justify-content-between" }, $a = ["accept", "disabled", "multiple"], Ba = /* @__PURE__ */ F({
+const gl = { class: "d-flex justify-content-between" }, hl = ["accept", "disabled", "multiple"], wl = /* @__PURE__ */ F({
   __name: "UploadButton",
   props: /* @__PURE__ */ E({
     acceptedFileTypes: {},
@@ -2964,52 +2979,52 @@ const ka = { class: "d-flex justify-content-between" }, $a = ["accept", "disable
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = A(e, "modelValue"), a = x(() => e.maxFileInput <= t.value.length), o = (l) => {
-      t.value = ve(l, t.value, e.acceptedFileTypes, e.maxFileInput);
+    const t = A(e, "modelValue"), l = k(() => e.maxFileInput <= t.value.length), o = (a) => {
+      t.value = ve(a, t.value, e.acceptedFileTypes, e.maxFileInput);
     };
-    return (l, n) => (i(), v("div", ka, [
-      $(l.$slots, "message"),
+    return (a, n) => (i(), v("div", gl, [
+      $(a.$slots, "message"),
       c("div", null, [
         c("input", {
           id: "file-input",
           type: "file",
           class: "d-none",
-          accept: l.acceptedFileTypes.join(", "),
-          disabled: a.value,
-          multiple: l.maxFileInput > 1,
-          onInput: n[0] || (n[0] = (u) => o([...u.target.files]))
-        }, null, 40, $a),
+          accept: a.acceptedFileTypes.join(", "),
+          disabled: l.value,
+          multiple: a.maxFileInput > 1,
+          onInput: n[0] || (n[0] = (d) => o([...d.target.files]))
+        }, null, 40, hl),
         c("label", {
-          class: B([{ disabled: a.value }, "btn btn-primary"]),
+          class: B([{ disabled: l.value }, "btn btn-primary"]),
           id: "file-input-button",
           for: "file-input"
         }, [
-          $(l.$slots, "button-content", {}, () => [
+          $(a.$slots, "button-content", {}, () => [
             f(m(V), {
               icon: "bi:upload",
               class: "me-2",
               height: "20px",
               width: "20px"
             }),
-            O(" Browse your computer ")
+            n[1] || (n[1] = O(" Browse your computer "))
           ])
         ], 2)
       ]),
-      l.showDragDropArea ? (i(), v("div", {
+      a.showDragDropArea ? (i(), v("div", {
         class: "ms-auto",
-        key: l.acceptedFileTypes.length,
+        key: a.acceptedFileTypes.length,
         id: "accepted-file-types"
-      }, "Accepted File Types: " + h(l.acceptedFileTypes.map((u) => u.split("/").pop()).join(", ")), 1)) : S("", !0)
+      }, "Accepted File Types: " + h(a.acceptedFileTypes.map((d) => d.split("/").pop()).join(", ")), 1)) : S("", !0)
     ]));
   }
-}), Fa = {
+}), xl = {
   key: 0,
   class: "py-4 px-3",
   id: "placeholder-message"
-}, _a = {
+}, kl = {
   key: 1,
   class: "d-flex flex-column"
-}, Sa = /* @__PURE__ */ F({
+}, $l = /* @__PURE__ */ F({
   __name: "DragDropArea",
   props: /* @__PURE__ */ E({
     maxFileInput: {},
@@ -3021,30 +3036,30 @@ const ka = { class: "d-flex justify-content-between" }, $a = ["accept", "disable
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = A(e, "modelValue"), a = I(!1), o = x(() => e.maxFileInput <= t.value.length), l = (n) => {
-      a.value = !1, n.dataTransfer.files.length > e.maxFileInput || o.value ? n.preventDefault() : t.value = ve([...n.dataTransfer.files], t.value, e.acceptedFileTypes, e.maxFileSize);
+    const t = A(e, "modelValue"), l = I(!1), o = k(() => e.maxFileInput <= t.value.length), a = (n) => {
+      l.value = !1, n.dataTransfer.files.length > e.maxFileInput || o.value ? n.preventDefault() : t.value = ve([...n.dataTransfer.files], t.value, e.acceptedFileTypes, e.maxFileSize);
     };
-    return (n, u) => (i(), v("div", {
+    return (n, d) => (i(), v("div", {
       id: "drag-drop-area",
-      class: B(`${a.value ? "border-2 border-primary bg-body-tertiary" : ""} mt-3 file-container border-dashed border-2`),
-      onDragleave: u[0] || (u[0] = q((r) => a.value = !1, ["prevent"])),
-      onDragover: u[1] || (u[1] = q((r) => a.value = !0, ["prevent"])),
-      onDrop: q(l, ["prevent"])
+      class: B(`${l.value ? "border-2 border-primary bg-body-tertiary" : ""} mt-3 file-container border-dashed border-2`),
+      onDragleave: d[0] || (d[0] = q((r) => l.value = !1, ["prevent"])),
+      onDragover: d[1] || (d[1] = q((r) => l.value = !0, ["prevent"])),
+      onDrop: q(a, ["prevent"])
     }, [
-      t.value.length === 0 ? (i(), v("div", Fa, [
+      t.value.length === 0 ? (i(), v("div", xl, [
         f(m(V), {
           icon: "bi:upload",
           class: "me-2",
           height: "20px",
           width: "20px"
         }),
-        O(" Drag and drop files here ")
-      ])) : (i(), v("div", _a, [
+        d[2] || (d[2] = O(" Drag and drop files here "))
+      ])) : (i(), v("div", kl, [
         $(n.$slots, "default")
       ]))
     ], 34));
   }
-}), Va = { class: "d-flex align-items-center me-2" }, Ca = /* @__PURE__ */ F({
+}), Bl = { class: "d-flex align-items-center me-2" }, Fl = /* @__PURE__ */ F({
   __name: "UploadStatus",
   props: {
     fileSize: {},
@@ -3053,7 +3068,7 @@ const ka = { class: "d-flex justify-content-between" }, $a = ["accept", "disable
     uploadStatus: {}
   },
   setup(e) {
-    const t = x(() => e.uploadStatus === "Failed" || e.uploadStatus === "InvalidFileType" || e.uploadStatus === "InvalidFileSize" ? "danger" : "warning"), a = x(() => {
+    const t = k(() => e.uploadStatus === "Failed" || e.uploadStatus === "InvalidFileType" || e.uploadStatus === "InvalidFileSize" ? "danger" : "warning"), l = k(() => {
       switch (e.uploadStatus) {
         case "InvalidFileType":
           return "Upload Failed: File type is not accepted.";
@@ -3069,8 +3084,8 @@ const ka = { class: "d-flex justify-content-between" }, $a = ["accept", "disable
           return "Upload Failed: Connection error, please try again.";
       }
     });
-    return (o, l) => (i(), v("div", Va, [
-      o.uploadStatus === "Uploading" ? (i(), w(Wt, {
+    return (o, a) => (i(), v("div", Bl, [
+      o.uploadStatus === "Uploading" ? (i(), w(Gt, {
         key: 0,
         pixelWidth: 200,
         animate: "",
@@ -3081,29 +3096,29 @@ const ka = { class: "d-flex justify-content-between" }, $a = ["accept", "disable
         ]),
         _: 1
       })) : S("", !0),
-      o.uploadStatus !== "Uploading" && o.uploadStatus !== "Not Uploaded" && o.uploadStatus !== "Uploaded" && o.uploadStatus !== "Preparing" ? (i(), w(le, {
+      o.uploadStatus !== "Uploading" && o.uploadStatus !== "Not Uploaded" && o.uploadStatus !== "Uploaded" && o.uploadStatus !== "Preparing" ? (i(), w(ae, {
         key: 1,
         id: "upload-status-alert",
         severity: t.value,
         class: "mb-0 w-75 ms-auto"
       }, {
         default: g(() => [
-          O(h(a.value), 1)
+          O(h(l.value), 1)
         ]),
         _: 1
       }, 8, ["severity"])) : S("", !0)
     ]));
   }
-}), Ta = ["data-cy"], Ma = { class: "ms-3 d-flex flex-column" }, Pa = {
+}), _l = ["data-cy"], Sl = { class: "ms-3 d-flex flex-column" }, Vl = {
   key: 1,
   id: "file-name"
-}, Ia = {
+}, Cl = {
   class: "text-black-50",
   id: "file-type"
-}, za = {
+}, Tl = {
   class: "text-black-50",
   id: "file-size"
-}, Oa = { class: "ms-auto my-auto d-flex" }, Da = /* @__PURE__ */ F({
+}, Pl = { class: "ms-auto my-auto d-flex" }, Ml = /* @__PURE__ */ F({
   __name: "FileInfo",
   props: /* @__PURE__ */ E({
     editableFileName: { type: Boolean },
@@ -3122,52 +3137,52 @@ const ka = { class: "d-flex justify-content-between" }, $a = ["accept", "disable
   }),
   emits: /* @__PURE__ */ E(["deleted"], ["update:file", "update:blobFileName", "update:uploadStatus"]),
   setup(e, { emit: t }) {
-    const a = A(e, "file"), o = A(e, "blobFileName"), l = A(e, "uploadStatus"), n = t, u = I(a.value.name), r = I(""), d = I(0), p = I(), y = x(() => e.acceptedFileTypes.includes(a.value.type)), s = x(() => a.value.size <= e.maxFileSize), T = () => {
-      a.value = new File([a.value], u.value, { type: a.value.type, lastModified: (/* @__PURE__ */ new Date()).valueOf() });
+    const l = A(e, "file"), o = A(e, "blobFileName"), a = A(e, "uploadStatus"), n = t, d = I(l.value.name), r = I(""), u = I(0), p = I(), y = k(() => e.acceptedFileTypes.includes(l.value.type)), s = k(() => l.value.size <= e.maxFileSize), T = () => {
+      l.value = new File([l.value], d.value, { type: l.value.type, lastModified: (/* @__PURE__ */ new Date()).valueOf() });
     }, C = async () => {
       if (!y.value || !s.value) {
-        l.value = y.value ? "InvalidFileSize" : "InvalidFileType";
+        a.value = y.value ? "InvalidFileSize" : "InvalidFileType";
         return;
       }
-      l.value = "Preparing", p.value = new AbortController();
-      const [P, z] = await e.getFileUrlAction(a.value.name);
-      if (!P) {
-        l.value = "Failed";
+      a.value = "Preparing", p.value = new AbortController();
+      const [M, z] = await e.getFileUrlAction(l.value.name);
+      if (!M) {
+        a.value = "Failed";
         return;
       }
       try {
-        l.value = "Uploading";
-        const b = new ce(P), k = {
+        a.value = "Uploading";
+        const b = new ce(M), x = {
           abortSignal: p.value.signal,
-          onProgress: (G) => d.value = G.loadedBytes,
+          onProgress: (G) => u.value = G.loadedBytes,
           tags: { temp: "true" }
         };
-        await b.uploadData(a.value, k), r.value = P, l.value = "Uploaded", o.value = z;
+        await b.uploadData(l.value, x), r.value = M, a.value = "Uploaded", o.value = z;
       } catch (b) {
         if (b.name === "AbortError") {
-          l.value = "Aborted";
+          a.value = "Aborted";
           return;
         }
-        l.value = "Failed";
+        a.value = "Failed";
       }
-    }, M = async () => {
-      await ha(l.value, r.value), n("deleted", a.value);
+    }, P = async () => {
+      await vl(a.value, r.value), n("deleted", l.value);
     };
     return ne(() => {
       e.autoUploadToBlob && C();
-    }), (P, z) => {
+    }), (M, z) => {
       const b = R;
       return i(), v("div", {
         class: "py-4 px-3 d-flex",
-        "data-cy": `file-info-${a.value.name}`
+        "data-cy": `file-info-${l.value.name}`
       }, [
         c("div", null, [
-          m(wa)(a.value.type) ? (i(), w(m(Oe), {
+          m(bl)(l.value.type) ? (i(), w(m(Oe), {
             key: 0,
             id: "thumbnail-image",
             "image-class": "image-file-thumbnail border",
-            src: m(xa)(a.value),
-            alt: a.value.name,
+            src: m(fl)(l.value),
+            alt: l.value.name,
             width: "75px",
             preview: ""
           }, null, 8, ["src", "alt"])) : (i(), w(m(V), {
@@ -3178,45 +3193,45 @@ const ka = { class: "d-flex justify-content-between" }, $a = ["accept", "disable
             width: "75px"
           }))
         ]),
-        c("div", Ma, [
+        c("div", Sl, [
           c("div", null, [
-            P.editableFileName ? (i(), w($t, {
+            M.editableFileName ? (i(), w($t, {
               key: 0,
               id: "edit-file-name",
-              modelValue: u.value,
-              "onUpdate:modelValue": z[0] || (z[0] = (k) => u.value = k),
-              rules: P.customFileNameRules,
-              name: a.value.name,
+              modelValue: d.value,
+              "onUpdate:modelValue": z[0] || (z[0] = (x) => d.value = x),
+              rules: M.customFileNameRules,
+              name: l.value.name,
               "complete-action": T
-            }, null, 8, ["modelValue", "rules", "name"])) : (i(), v("span", Pa, h(a.value.name), 1))
+            }, null, 8, ["modelValue", "rules", "name"])) : (i(), v("span", Vl, h(l.value.name), 1))
           ]),
-          c("span", Ia, "File type: " + h(a.value.type.split("/").pop()), 1),
-          c("span", za, "File size: " + h(m(re)(a.value.size)), 1)
+          c("span", Cl, "File type: " + h(l.value.type.split("/").pop()), 1),
+          c("span", Tl, "File size: " + h(m(re)(l.value.size)), 1)
         ]),
-        c("div", Oa, [
-          (i(), w(Ca, {
-            key: l.value,
-            "file-size": a.value.size,
-            "upload-status": l.value,
-            "bytes-uploaded": d.value,
-            "max-file-size": P.maxFileSize
+        c("div", Pl, [
+          (i(), w(Fl, {
+            key: a.value,
+            "file-size": l.value.size,
+            "upload-status": a.value,
+            "bytes-uploaded": u.value,
+            "max-file-size": M.maxFileSize
           }, null, 8, ["file-size", "upload-status", "bytes-uploaded", "max-file-size"])),
-          l.value === "Not Uploaded" || l.value === "Failed" || l.value === "Duplicate" || l.value === "Aborted" ? (i(), w(b, {
+          a.value === "Not Uploaded" || a.value === "Failed" || a.value === "Duplicate" || a.value === "Aborted" ? (i(), w(b, {
             key: 0,
             link: "",
             onClick: C
           }, {
             default: g(() => [
               f(m(V), {
-                icon: l.value === "Not Uploaded" || l.value === "Duplicate" ? "bi:upload" : "bi:arrow-clockwise"
+                icon: a.value === "Not Uploaded" || a.value === "Duplicate" ? "bi:upload" : "bi:arrow-clockwise"
               }, null, 8, ["icon"])
             ]),
             _: 1
           })) : S("", !0),
-          l.value === "Uploading" ? (i(), w(b, {
+          a.value === "Uploading" ? (i(), w(b, {
             key: 1,
             link: "",
-            onClick: z[1] || (z[1] = (k) => p.value.value.abort())
+            onClick: z[1] || (z[1] = (x) => p.value.value.abort())
           }, {
             default: g(() => [
               f(m(V), { icon: "bi:x-circle-fill" })
@@ -3225,7 +3240,7 @@ const ka = { class: "d-flex justify-content-between" }, $a = ["accept", "disable
           })) : (i(), w(b, {
             key: 2,
             link: "",
-            onClick: M,
+            onClick: P,
             id: "delete-button"
           }, {
             default: g(() => [
@@ -3234,20 +3249,20 @@ const ka = { class: "d-flex justify-content-between" }, $a = ["accept", "disable
             _: 1
           }))
         ])
-      ], 8, Ta);
+      ], 8, _l);
     };
   }
-}), Ua = { class: "d-flex justify-content-end mt-1" }, Aa = { id: "max-file-size" }, Na = /* @__PURE__ */ F({
+}), Il = { class: "d-flex justify-content-end mt-1" }, zl = { id: "max-file-size" }, Ol = /* @__PURE__ */ F({
   __name: "MaxFileSize",
   props: {
     maxFileSize: {}
   },
   setup(e) {
-    return (t, a) => (i(), v("div", Ua, [
-      c("div", Aa, "Max file size: " + h(m(re)(t.maxFileSize)), 1)
+    return (t, l) => (i(), v("div", Il, [
+      c("div", zl, "Max file size: " + h(m(re)(t.maxFileSize)), 1)
     ]));
   }
-}), Ea = { "data-cy": "file-uploader" }, La = { key: 0 }, Il = /* @__PURE__ */ F({
+}), Dl = { "data-cy": "file-uploader" }, Ul = { key: 0 }, Ca = /* @__PURE__ */ F({
   __name: "ForgeFileUploader",
   props: /* @__PURE__ */ E({
     acceptedFileTypes: {},
@@ -3264,72 +3279,72 @@ const ka = { class: "d-flex justify-content-between" }, $a = ["accept", "disable
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = A(e, "modelValue"), a = e, o = (l) => {
-      t.value = t.value.filter((n) => n.file != l);
+    const t = A(e, "modelValue"), l = e, o = (a) => {
+      t.value = t.value.filter((n) => n.file != a);
     };
-    return (l, n) => (i(), v("div", Ea, [
-      f(Ba, _(a, {
+    return (a, n) => (i(), v("div", Dl, [
+      f(wl, _(l, {
         modelValue: t.value,
-        "onUpdate:modelValue": n[0] || (n[0] = (u) => t.value = u)
+        "onUpdate:modelValue": n[0] || (n[0] = (d) => t.value = d)
       }), null, 16, ["modelValue"]),
-      l.showDragDropArea ? (i(), v("div", La, [
-        f(Sa, {
-          "max-file-input": a.maxFileInput,
-          "max-file-size": a.maxFileSize,
-          "accepted-file-types": a.acceptedFileTypes,
+      a.showDragDropArea ? (i(), v("div", Ul, [
+        f($l, {
+          "max-file-input": l.maxFileInput,
+          "max-file-size": l.maxFileSize,
+          "accepted-file-types": l.acceptedFileTypes,
           modelValue: t.value,
-          "onUpdate:modelValue": n[1] || (n[1] = (u) => t.value = u)
+          "onUpdate:modelValue": n[1] || (n[1] = (d) => t.value = d)
         }, {
           default: g(() => [
-            (i(!0), v(L, null, Y(t.value, ({ file: u }, r) => (i(), v("span", null, [
-              (i(), w(Da, _({
-                key: u.name,
+            (i(!0), v(L, null, Y(t.value, ({ file: d }, r) => (i(), v("span", null, [
+              (i(), w(Ml, _({
+                key: d.name,
                 class: r === t.value.length - 1 || t.value.length == 1 ? "" : "border-bottom",
                 file: t.value[r].file,
-                "onUpdate:file": (d) => t.value[r].file = d,
+                "onUpdate:file": (u) => t.value[r].file = u,
                 "blob-file-name": t.value[r].blobFileName,
-                "onUpdate:blobFileName": (d) => t.value[r].blobFileName = d,
+                "onUpdate:blobFileName": (u) => t.value[r].blobFileName = u,
                 "upload-status": t.value[r].status,
-                "onUpdate:uploadStatus": (d) => t.value[r].status = d,
+                "onUpdate:uploadStatus": (u) => t.value[r].status = u,
                 ref_for: !0
-              }, a, { onDeleted: o }), null, 16, ["class", "file", "onUpdate:file", "blob-file-name", "onUpdate:blobFileName", "upload-status", "onUpdate:uploadStatus"]))
+              }, l, { onDeleted: o }), null, 16, ["class", "file", "onUpdate:file", "blob-file-name", "onUpdate:blobFileName", "upload-status", "onUpdate:uploadStatus"]))
             ]))), 256))
           ]),
           _: 1
         }, 8, ["max-file-input", "max-file-size", "accepted-file-types", "modelValue"]),
-        f(Na, {
-          "max-file-size": a.maxFileSize
+        f(Ol, {
+          "max-file-size": l.maxFileSize
         }, null, 8, ["max-file-size"])
       ])) : S("", !0)
     ]));
   }
 });
 export {
-  vl as Bootstrap_PT,
-  bl as ForgeActionButton,
-  le as ForgeAlert,
+  ca as Bootstrap_PT,
+  ma as ForgeActionButton,
+  ae as ForgeAlert,
   ct as ForgeCheckbox,
-  Sl as ForgeChips,
+  $a as ForgeChips,
   ye as ForgeDatepicker,
-  Il as ForgeFileUploader,
-  Pl as ForgeFilterHeader,
-  Fl as ForgeForm,
-  _l as ForgeFormField,
+  Ca as ForgeFileUploader,
+  Va as ForgeFilterHeader,
+  xa as ForgeForm,
+  ka as ForgeFormField,
   $t as ForgeInlineEditor,
-  fl as ForgeLink,
+  pa as ForgeLink,
   me as ForgeLoader,
-  wl as ForgeModal,
+  ba as ForgeModal,
   pe as ForgeMultiSelect,
-  kl as ForgeMultiSelectPreview,
-  xl as ForgeNavbar,
-  $l as ForgePageHeader,
-  Wt as ForgeProgressBar,
-  Bl as ForgeRemainingCharacters,
-  Vl as ForgeStatWidget,
-  Cl as ForgeStepper,
-  Ml as ForgeTable,
-  Tl as ForgeTile,
-  hl as convertToMultiSelectOption,
-  gl as enumToMultiSelectList,
+  ga as ForgeMultiSelectPreview,
+  fa as ForgeNavbar,
+  ha as ForgePageHeader,
+  Gt as ForgeProgressBar,
+  wa as ForgeRemainingCharacters,
+  Ba as ForgeStatWidget,
+  Fa as ForgeStepper,
+  Sa as ForgeTable,
+  _a as ForgeTile,
+  va as convertToMultiSelectOption,
+  ya as enumToMultiSelectList,
   yt as parseError
 };