@3squared/forge-ui-3 2.4.0 → 2.5.1

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

@@ -1,8 +1,8 @@
 import he from "primevue/message";
-import { defineComponent as F, openBlock as d, createBlock as b, normalizeProps as X, guardReactiveProps as Q, withCtx as g, createElementVNode as m, normalizeClass as B, unref as c, createCommentVNode as C, createVNode as y, renderSlot as k, ref as I, createElementBlock as f, Fragment as N, mergeProps as S, renderList as q, mergeModels as E, useModel as D, computed as z, createTextVNode as P, toDisplayString as w, withDirectives as H, vShow as Y, createSlots as ie, onMounted as le, isRef as we, withKeys as K, normalizeStyle as ke, withModifiers as G, watch as ce, h as $e, useTemplateRef as Be } from "vue";
-import { Icon as j } from "@iconify/vue";
+import { defineComponent as B, openBlock as d, createBlock as f, normalizeProps as K, guardReactiveProps as Z, withCtx as g, createElementVNode as m, normalizeClass as F, unref as c, createCommentVNode as C, createVNode as y, renderSlot as k, ref as I, createElementBlock as b, Fragment as N, mergeProps as S, renderList as q, mergeModels as E, useModel as D, computed as z, createTextVNode as _, toDisplayString as w, withDirectives as H, vShow as Y, createSlots as ie, onMounted as le, isRef as we, withKeys as X, normalizeStyle as ke, withModifiers as G, watch as ce, h as $e, useTemplateRef as Fe } from "vue";
+import { Icon as T } from "@iconify/vue";
 import U from "primevue/button";
-import Fe from "primevue/toast";
+import Be from "primevue/toast";
 import Se from "primevue/autocomplete";
 import Ce from "primevue/checkbox";
 import { useField as ee } from "vee-validate";
@@ -12,9 +12,9 @@ import ne from "primevue/inputtext";
 import { vOnClickOutside as je } from "@vueuse/components";
 import Ie from "primevue/menubar";
 import oe from "primevue/multiselect";
-import Pe from "primevue/datepicker";
+import _e from "primevue/datepicker";
 import te from "primevue/select";
-import _e from "primevue/inputmask";
+import Pe from "primevue/inputmask";
 import Ve from "primevue/textarea";
 import ue from "primevue/inputnumber";
 import Me from "primevue/chip";
@@ -28,7 +28,8 @@ import Ee from "primevue/datatable";
 import { BlockBlobClient as me } from "@azure/storage-blob";
 import ve from "primevue/popover";
 import Le from "primevue/image";
-const Re = {
+import Re from "primevue/panel";
+const He = {
   autoComplete: {
     root: ({ props: e }) => ({
       class: [
@@ -57,7 +58,7 @@ const Re = {
     }),
     emptyMessage: "mx-3 my-2"
   }
-}, He = {
+}, We = {
   button: {
     root: ({ props: e }) => ({
       class: [
@@ -158,7 +159,7 @@ const Re = {
       })
     }
   }
-}, We = {
+}, Ye = {
   checkbox: {
     root: () => ({
       class: ["form-check"]
@@ -174,7 +175,7 @@ const Re = {
       ]
     })
   }
-}, Ye = {
+}, Ge = {
   select: {
     root: ({ props: e }) => ({
       class: [
@@ -184,7 +185,7 @@ const Re = {
         }
       ]
     }),
-    dropdown: ({ state: e }) => ({
+    dropdown: () => ({
       class: [
         "d-none my-auto filter-trigger"
       ]
@@ -204,10 +205,12 @@ const Re = {
     overlay: "dropdown-menu overflow-y-auto show",
     header: "p-2 w-100",
     pcFilter: "form-control w-100",
-    pcFilterIconContainer: { root: {
-      class: ["position-absolute bottom-0 end-0 me-3"],
-      style: "top: 8%;"
-    } },
+    pcFilterIconContainer: {
+      root: {
+        class: ["position-absolute bottom-0 end-0 me-3"],
+        style: "top: 8%;"
+      }
+    },
     clearIcon: "ms-auto my-auto",
     loadingIcon: "spinner-border spinner-border-sm border-0",
     optionGroupLabel: "ps-2 fw-bold",
@@ -222,7 +225,7 @@ const Re = {
       ]
     })
   }
-}, Ge = {
+}, Je = {
   column: {
     pcSortBadge: "ms-2 my-auto cursor-pointer",
     headerCell: (e) => {
@@ -325,7 +328,7 @@ const Re = {
       ]
     })
   }
-}, Je = {
+}, Ke = {
   inputtext: {
     root: (e) => {
       var t, a;
@@ -340,7 +343,7 @@ const Re = {
       };
     }
   }
-}, Ke = {
+}, Ze = {
   inputmask: {
     root: () => ({
       class: [
@@ -348,12 +351,12 @@ const Re = {
       ]
     })
   }
-}, Ze = {
+}, Xe = {
   toggleSwitch: {
     root: "form-check form-switch",
     input: "form-check-input"
   }
-}, Xe = {
+}, Qe = {
   tag: {
     root: ({ props: e }) => ({
       class: [
@@ -373,7 +376,7 @@ const Re = {
       ]
     })
   }
-}, Qe = {
+}, et = {
   textarea: {
     root: () => ({
       class: [
@@ -381,13 +384,13 @@ const Re = {
       ]
     })
   }
-}, et = {
+}, tt = {
   chip: {
     root: "badge rounded-pill bg-primary-subtle text-primary d-inline-flex align-items-center border border-primary me-1 p-1",
     label: "px-2 fs-6 fw-400",
     removeIcon: "ms-auto my-auto"
   }
-}, tt = {
+}, at = {
   dialog: {
     root: ({ parent: e }) => e.instance.$.type.name == "ConfirmDialog" ? {
       class: ["modal modal-dialog modal-content h-auto m-0 modal-sm"]
@@ -446,7 +449,7 @@ const Re = {
       ]
     })
   }
-}, at = {
+}, it = {
   popover: {
     root: (e) => ({
       class: [
@@ -460,7 +463,7 @@ const Re = {
     content: "d-flex position-relative",
     closeButton: "position-absolute top-0 end-0 p-1 btn btn-link text-black ms-2"
   }
-}, it = {
+}, lt = {
   message: {
     root: ({ props: e }) => ({
       class: [
@@ -489,7 +492,7 @@ const Re = {
       class: ["px-0 ms-2 btn d-flex"]
     })
   }
-}, lt = {
+}, nt = {
   // More PT options defined in ForgeStepper.
   stepList: {
     root: "d-flex mb-2 w-100"
@@ -517,7 +520,7 @@ const Re = {
     }),
     separator: "border border-1 separator"
   }
-}, nt = {
+}, ot = {
   tabList: {
     root: () => ({
       class: ["nav nav-tabs position-relative"]
@@ -542,7 +545,7 @@ const Re = {
       class: ["p-2"]
     })
   }
-}, ot = {
+}, st = {
   // More PassThrough options defined in ForgeDatepicker.
   datepicker: {
     root: "d-inline-flex relative w-100",
@@ -617,7 +620,7 @@ const Re = {
     pcDecrementButton: { root: "btn btn-sm", label: "d-none" },
     pcIncrementButton: { root: "btn btn-sm", label: "d-none" }
   }
-}, st = {
+}, rt = {
   multiselect: {
     root: ({ props: e }) => ({
       class: [
@@ -645,7 +648,7 @@ const Re = {
       class: "d-none"
     })
   }
-}, rt = {
+}, dt = {
   // More PassThrough options in component file.
   progressbar: {
     root: () => ({
@@ -655,14 +658,20 @@ const Re = {
       class: ["text-white m-1"]
     })
   }
-}, dt = {
+}, pt = {
   panel: {
     root: "card w-100",
-    header: "d-flex justify-content-between align-items-center fw-600 ms-4 me-3 my-2",
-    pcToggleButton: "btn",
+    header: "h4 d-flex justify-content-between align-items-center fw-600 ms-4 me-3 my-2",
+    pcToggleButton: {
+      root: {
+        class: [
+          "btn"
+        ]
+      }
+    },
     contentContainer: "mt-2 mx-4 mb-4"
   }
-}, pt = {
+}, ct = {
   // More PT options can be found in the ForgeTable file.
   dataTable: {
     root: "position-relative",
@@ -695,7 +704,18 @@ const Re = {
     }),
     rowGroupHeaderCell: "d-inline-flex align-items-center border border-0",
     rowGroupHeader: "border-top border-bottom",
-    rowToggleButton: "btn"
+    rowToggleButton: "btn",
+    pcPaginator: {
+      //remove paginator if there are initially no values
+      paginatorContainer: (e) => {
+        var t;
+        return {
+          class: {
+            "d-none": ((t = e.parent.props.value) == null ? void 0 : t.length) == 0
+          }
+        };
+      }
+    }
   },
   paginator: {
     root: (e) => {
@@ -725,7 +745,7 @@ const Re = {
       ]
     })
   }
-}, ct = {
+}, ut = {
   badge: {
     root: ({ props: e }) => ({
       class: [
@@ -746,7 +766,7 @@ const Re = {
       ]
     })
   }
-}, ut = {
+}, mt = {
   // More PassThrough options in component file.
   menubar: {
     rootList: ({ instance: e }) => ({
@@ -827,7 +847,7 @@ const Re = {
       ]
     })
   }
-}, mt = {
+}, vt = {
   tooltip: {
     root: ({ context: e }) => ({
       class: [
@@ -849,7 +869,7 @@ const Re = {
       class: ["tooltip-inner"]
     }
   }
-}, vt = {
+}, ft = {
   selectButton: {
     root: () => ({
       class: ["btn-group"]
@@ -866,7 +886,7 @@ const Re = {
       ]
     })
   }
-}, ft = {
+}, gt = {
   splitbutton: {
     root: () => ({
       class: ["btn-group"]
@@ -902,7 +922,7 @@ const Re = {
       separator: "border-bottom w-100"
     }
   }
-}, gt = {
+}, bt = {
   progressspinner: {
     spin: () => ({
       class: [
@@ -910,7 +930,7 @@ const Re = {
       ]
     })
   }
-}, bt = {
+}, xt = {
   card: {
     root: () => ({
       class: ["card"]
@@ -934,11 +954,11 @@ const Re = {
       class: ["card-header"]
     })
   }
-}, xt = {
+}, yt = {
   divider: {
     root: "border-bottom w-100 m-1"
   }
-}, yt = {
+}, ht = {
   image: {
     root: "position-relative d-inline-block",
     previewMask: "preview-button",
@@ -951,7 +971,7 @@ const Re = {
     zoominbutton: "btn text-white",
     closebutton: "btn text-white"
   }
-}, ht = {
+}, wt = {
   toast: {
     message: () => ({
       class: ["toast-container w-100 position-relative"]
@@ -986,7 +1006,7 @@ const Re = {
       };
     }
   }
-}, wt = {
+}, kt = {
   fieldset: {
     root: () => ({
       class: [
@@ -1012,42 +1032,42 @@ const Re = {
       ]
     })
   }
-}, Ci = {
-  ...Re,
-  ...ct,
+}, Ti = {
   ...He,
-  ...bt,
+  ...ut,
   ...We,
-  ...et,
-  ...Ge,
-  ...ot,
-  ...tt,
   ...xt,
   ...Ye,
-  ...yt,
+  ...tt,
   ...Je,
-  ...Ke,
-  ...Ze,
-  ...it,
   ...st,
-  ...ut,
   ...at,
+  ...yt,
+  ...Ge,
+  ...ht,
+  ...Ke,
+  ...Ze,
+  ...Xe,
+  ...lt,
   ...rt,
-  ...gt,
+  ...mt,
+  ...it,
   ...dt,
-  ...vt,
-  ...ft,
-  ...lt,
+  ...bt,
   ...pt,
-  ...Xe,
+  ...ft,
+  ...gt,
   ...nt,
-  ...ht,
+  ...ct,
   ...Qe,
+  ...ot,
   ...wt,
+  ...et,
+  ...kt,
   directives: {
-    ...mt
+    ...vt
   }
-}, se = /* @__PURE__ */ F({
+}, se = /* @__PURE__ */ B({
   __name: "ForgeAlert",
   props: {
     severity: { default: "primary" },
@@ -1068,22 +1088,22 @@ const Re = {
     const t = e;
     return (a, i) => {
       const l = he;
-      return d(), b(l, X(Q({ ...a.$attrs, ...t })), {
+      return d(), f(l, K(Z({ ...a.$attrs, ...t })), {
         icon: g(() => [
           m("div", {
-            class: B(t.icon ? "me-2 pe-1" : "")
+            class: F(t.icon ? "me-2 pe-1" : "")
           }, [
-            t.icon ? (d(), b(c(j), {
+            t.icon ? (d(), f(c(T), {
               key: 0,
               "data-cy": "message-icon",
               icon: t.icon,
-              class: B(`text-${t.severity}`),
+              class: F(`text-${t.severity}`),
               height: 35
             }, null, 8, ["icon", "class"])) : C("", !0)
           ], 2)
         ]),
         closeicon: g(() => [
-          y(c(j), { icon: "bi:x" })
+          y(c(T), { icon: "bi:x" })
         ]),
         default: g(() => [
           k(a.$slots, "default")
@@ -1092,7 +1112,7 @@ const Re = {
       }, 16);
     };
   }
-}), zi = /* @__PURE__ */ F({
+}), ji = /* @__PURE__ */ B({
   __name: "ForgeActionButton",
   props: {
     action: {},
@@ -1112,27 +1132,27 @@ const Re = {
     };
     return (l, n) => {
       const s = U;
-      return d(), f(N, null, [
+      return d(), b(N, null, [
         y(s, S({ ...a, ...l.$attrs }, {
           loading: t.value,
           disabled: t.value || a.disabled,
           onClick: i
         }), null, 16, ["loading", "disabled"]),
-        y(c(Fe))
+        y(c(Be))
       ], 64);
     };
   }
-}), Ti = /* @__PURE__ */ F({
+}), Ii = /* @__PURE__ */ B({
   __name: "ForgeAutoComplete",
   setup(e) {
-    return (t, a) => (d(), b(c(Se), S({ ...t.$attrs, ...t.$props }, { inputClass: "form-control border-0" }), {
+    return (t, a) => (d(), f(c(Se), S({ ...t.$attrs, ...t.$props }, { inputClass: "form-control border-0" }), {
       default: g(() => [
-        (d(!0), f(N, null, q(t.$slots, (i, l) => k(t.$slots, l, { slot: l })), 256))
+        (d(!0), b(N, null, q(t.$slots, (i, l) => k(t.$slots, l, { slot: l })), 256))
       ]),
       _: 3
     }, 16));
   }
-}), kt = { class: "d-flex flex-column" }, $t = ["for"], fe = /* @__PURE__ */ F({
+}), $t = { class: "d-flex flex-column" }, Ft = ["for"], fe = /* @__PURE__ */ B({
   __name: "ForgeCheckbox",
   props: /* @__PURE__ */ E({
     label: { default: "" },
@@ -1179,7 +1199,7 @@ const Re = {
     }, r = z(() => l.value.length > 0);
     return (p, u) => {
       const x = Ce;
-      return d(), f("div", kt, [
+      return d(), b("div", $t, [
         m("div", S({
           class: "d-flex",
           "data-cy": "checkbox-container",
@@ -1196,12 +1216,12 @@ const Re = {
           m("label", {
             for: t.name,
             onClick: u[1] || (u[1] = (o) => s(!a.value)),
-            class: B([`${t.disabled ? "opacity-50" : "cursor-pointer"} ${r.value ? "text-danger-dark" : ""}`, "w-100 my-auto"])
+            class: F([`${t.disabled ? "opacity-50" : "cursor-pointer"} ${r.value ? "text-danger-dark" : ""}`, "w-100 my-auto"])
           }, [
             k(p.$slots, "default", {}, () => [
-              P(w(t.label), 1)
+              _(w(t.label), 1)
             ])
-          ], 10, $t)
+          ], 10, Ft)
         ], 16),
         H(m("small", {
           "data-cy": "error",
@@ -1212,7 +1232,7 @@ const Re = {
       ]);
     };
   }
-}), Bt = { class: "forge-loader" }, ge = /* @__PURE__ */ F({
+}), Bt = { class: "forge-loader" }, ge = /* @__PURE__ */ B({
   __name: "ForgeLoader",
   props: {
     severity: { default: "primary" }
@@ -1221,15 +1241,15 @@ const Re = {
     const t = e;
     return (a, i) => {
       const l = ze;
-      return d(), f("div", Bt, [
+      return d(), b("div", Bt, [
         y(l, {
           "animation-duration": ".75",
-          class: B(`text-${t.severity === void 0 ? "primary" : t.severity}`)
+          class: F(`text-${t.severity === void 0 ? "primary" : t.severity}`)
         }, null, 8, ["class"])
       ]);
     };
   }
-}), Ft = ["href", "target"], ji = /* @__PURE__ */ F({
+}), St = ["href", "target"], _i = /* @__PURE__ */ B({
   __name: "ForgeLink",
   props: {
     url: {},
@@ -1263,25 +1283,25 @@ const Re = {
       "ms-0": e.positionIconEnd && e.animateIconOnHover,
       "me-0": e.animateIconOnHover
     }));
-    return (i, l) => (d(), f("a", {
+    return (i, l) => (d(), b("a", {
       id: "link",
-      class: B(["cursor-pointer d-flex text-break", t.value]),
+      class: F(["cursor-pointer d-flex text-break", t.value]),
       href: i.url,
       target: i.target
     }, [
       k(i.$slots, "default", {}, () => [
-        i.iconName ? (d(), b(c(j), {
+        i.iconName ? (d(), f(c(T), {
           key: 0,
           id: "link-icon",
           icon: i.iconName,
-          class: B(["bi my-auto", a.value])
+          class: F(["bi my-auto", a.value])
         }, null, 8, ["icon", "class"])) : C("", !0),
-        P(" " + w(i.label), 1)
+        _(" " + w(i.label), 1)
       ])
-    ], 10, Ft));
+    ], 10, St));
   }
 });
-function St(e) {
+function Ct(e) {
   const t = {
     errorMessage: "",
     errorDetails: []
@@ -1292,16 +1312,16 @@ function St(e) {
   }
   return t.errorMessage === "" && t.errorDetails.length === 0 && (t.errorMessage = e), t;
 }
-function Ii(e, t) {
+function Pi(e, t) {
   return e.map((a) => ({ id: a, label: t ? t(a) : `${a}` }));
 }
-function Pi(e, t, a) {
+function Vi(e, t, a) {
   return { id: e, label: t ?? e.toString(), shortLabel: a };
 }
-const Ct = { key: 0 }, zt = {
+const zt = { key: 0 }, Tt = {
   class: "d-flex w-100",
   "data-cy": "footer"
-}, _i = /* @__PURE__ */ F({
+}, Mi = /* @__PURE__ */ B({
   __name: "ForgeModal",
   props: /* @__PURE__ */ E({
     cancelText: { default: "Cancel" },
@@ -1369,7 +1389,7 @@ const Ct = { key: 0 }, zt = {
           (o || o == null) && p();
         } catch (o) {
           n.value.hasError = !0;
-          const $ = St(o);
+          const $ = Ct(o);
           n.value.header = $.errorMessage, n.value.message = $.errorDetails;
         }
         l.value = !1;
@@ -1386,14 +1406,14 @@ const Ct = { key: 0 }, zt = {
       ]
     }));
     return (o, $) => {
-      const T = U, V = Te;
-      return d(), b(V, S(i, {
+      const j = U, V = Te;
+      return d(), f(V, S(i, {
         onMaximize: r,
         onUnmaximize: s,
         pt: x.value
       }), ie({
         closeicon: g(() => [
-          y(c(j), {
+          y(c(T), {
             "data-cy": "close-icon",
             icon: "bi:x-lg",
             width: "18",
@@ -1402,7 +1422,7 @@ const Ct = { key: 0 }, zt = {
           })
         ]),
         maximizeicon: g(() => [
-          y(c(j), {
+          y(c(T), {
             "data-cy": "maximisable-icon",
             icon: a.value ? "bi:arrows-angle-contract" : "bi:arrows-angle-expand",
             width: "16",
@@ -1414,22 +1434,22 @@ const Ct = { key: 0 }, zt = {
         q(o.$slots, (M, O) => ({
           name: O,
           fn: g((v) => [
-            n.value.hasError ? (d(), b(se, {
+            n.value.hasError ? (d(), f(se, {
               key: 0,
               severity: "danger",
               "data-cy": "error"
             }, {
               default: g(() => [
                 m("p", {
-                  class: B(n.value.message.length > 0 ? "my-auto" : "mb-0")
+                  class: F(n.value.message.length > 0 ? "my-auto" : "mb-0")
                 }, w(n.value.header), 3),
-                n.value.message.length > 0 ? (d(), f("ul", Ct, [
-                  (d(!0), f(N, null, q(n.value.message, (h) => (d(), f("li", { key: h }, w(h), 1))), 128))
+                n.value.message.length > 0 ? (d(), b("ul", zt, [
+                  (d(!0), b(N, null, q(n.value.message, (h) => (d(), b("li", { key: h }, w(h), 1))), 128))
                 ])) : C("", !0)
               ]),
               _: 1
             })) : C("", !0),
-            k(o.$slots, O, X(Q(v || {}))),
+            k(o.$slots, O, K(Z(v || {}))),
             l.value ? k(o.$slots, "loader", { key: 1 }, () => [
               y(ge, { "data-cy": "loader" })
             ]) : C("", !0)
@@ -1438,18 +1458,18 @@ const Ct = { key: 0 }, zt = {
         o.showFooter ? {
           name: "footer",
           fn: g(() => [
-            m("div", zt, [
-              y(T, {
+            m("div", Tt, [
+              y(j, {
                 label: o.cancelText,
-                class: B(i.cancelClass),
+                class: F(i.cancelClass),
                 outlined: "",
                 onClick: p,
                 id: "cancel-button",
                 type: i.cancelButtonType
               }, null, 8, ["label", "class", "type"]),
-              y(T, {
+              y(j, {
                 label: o.submitText,
-                class: B([i.submitClass, "ms-auto"]),
+                class: F([i.submitClass, "ms-auto"]),
                 onClick: u,
                 id: "submit-button",
                 type: i.submitButtonType
@@ -1461,7 +1481,7 @@ const Ct = { key: 0 }, zt = {
       ]), 1040, ["pt"]);
     };
   }
-}), Tt = ["id"], jt = { key: 0 }, It = { key: 0 }, Pt = { class: "d-flex justify-content-between align-items-center position-relative" }, _t = { key: 1 }, Vt = { "data-cy": "readonly-value" }, Mt = /* @__PURE__ */ F({
+}), jt = ["id"], It = { key: 0 }, _t = { key: 0 }, Pt = { class: "d-flex justify-content-between align-items-center position-relative" }, Vt = { key: 1 }, Mt = { "data-cy": "readonly-value" }, Dt = /* @__PURE__ */ B({
   __name: "ForgeInlineEditor",
   props: /* @__PURE__ */ E({
     name: { default: "" },
@@ -1477,8 +1497,8 @@ const Ct = { key: 0 }, zt = {
   emits: ["update:modelValue"],
   setup(e) {
     const t = e, a = D(e, "modelValue"), i = I(!1), l = I(), n = () => {
-      var T;
-      i.value = !i.value, (T = l.value) == null || T.focus();
+      var j;
+      i.value = !i.value, (j = l.value) == null || j.focus();
     }, s = async () => {
       if ($.value)
         return !1;
@@ -1501,20 +1521,20 @@ const Ct = { key: 0 }, zt = {
       o.value = a.value;
     });
     const $ = z(() => x.value.length > 0);
-    return (T, V) => {
+    return (j, V) => {
       const M = ne, O = U;
-      return d(), f("div", {
+      return d(), b("div", {
         id: t.name
       }, [
-        T.readonly ? (d(), f("div", _t, [
-          k(T.$slots, "default", {}, () => [
-            m("span", Vt, w(c(o)), 1)
+        j.readonly ? (d(), b("div", Vt, [
+          k(j.$slots, "default", {}, () => [
+            m("span", Mt, w(c(o)), 1)
           ])
-        ])) : (d(), f("div", jt, [
-          i.value ? (d(), f("div", It, [
-            H((d(), f("div", Pt, [
-              k(T.$slots, "editor", {
-                class: B({ "is-invalid": $.value }),
+        ])) : (d(), b("div", It, [
+          i.value ? (d(), b("div", _t, [
+            H((d(), b("div", Pt, [
+              k(j.$slots, "editor", {
+                class: F({ "is-invalid": $.value }),
                 editFinished: s,
                 cancel: r,
                 val: c(o)
@@ -1526,32 +1546,32 @@ const Ct = { key: 0 }, zt = {
                   "data-cy": "input",
                   ref_key: "input",
                   ref: l,
-                  class: B({ "is-invalid": $.value }),
+                  class: F({ "is-invalid": $.value }),
                   onKeydown: [
-                    K(s, ["enter"]),
-                    K(r, ["esc"])
+                    X(s, ["enter"]),
+                    X(r, ["esc"])
                   ]
                 }, null, 8, ["modelValue", "class"])
               ]),
-              y(c(j), {
+              y(c(T), {
                 icon: "bi:x-circle",
                 class: "mx-2 cursor-pointer",
                 onClick: p,
-                onKeydown: K(p, ["enter"]),
+                onKeydown: X(p, ["enter"]),
                 "data-cy": "clear-icon"
               })
             ])), [
               [c(je), s]
             ])
-          ])) : (d(), f("div", {
+          ])) : (d(), b("div", {
             key: 1,
             class: "d-flex text-muted",
             onClick: n,
             onFocus: n
           }, [
-            k(T.$slots, "default", {}, () => [
+            k(j.$slots, "default", {}, () => [
               m("div", {
-                class: B(["pe-2 cursor-pointer", { "text-invalid": $.value }]),
+                class: F(["pe-2 cursor-pointer", { "text-invalid": $.value }]),
                 "data-cy": "value"
               }, w(c(o) ? c(o) : "Click to edit"), 3)
             ]),
@@ -1560,11 +1580,11 @@ const Ct = { key: 0 }, zt = {
               class: "p-0 m-0"
             }, {
               default: g(() => [
-                y(c(j), {
+                y(c(T), {
                   icon: "bi:pencil",
-                  class: B($.value ? "text-invalid" : "text-muted"),
+                  class: F($.value ? "text-invalid" : "text-muted"),
                   "data-cy": "edit-icon",
-                  onKeydown: K(n, ["enter"])
+                  onKeydown: X(n, ["enter"])
                 }, null, 8, ["class"])
               ]),
               _: 1
@@ -1577,10 +1597,10 @@ const Ct = { key: 0 }, zt = {
         }, w(c(u)), 513), [
           [Y, $.value]
         ])
-      ], 8, Tt);
+      ], 8, jt);
     };
   }
-}), Dt = ["href"], Vi = /* @__PURE__ */ F({
+}), Ot = ["href"], Di = /* @__PURE__ */ B({
   __name: "ForgeNavbar",
   props: {
     severity: { default: "light" },
@@ -1624,7 +1644,7 @@ const Ct = { key: 0 }, zt = {
         ]
       })
     }));
-    return (i, l) => (d(), b(c(Ie), S({ ...t, ...i.$attrs }, {
+    return (i, l) => (d(), f(c(Ie), S({ ...t, ...i.$attrs }, {
       pt: a.value,
       "data-cy": "navbar"
     }), ie({
@@ -1635,15 +1655,15 @@ const Ct = { key: 0 }, zt = {
           "data-cy": "logo"
         }, [
           k(i.$slots, "logo", {}, () => [
-            l[0] || (l[0] = P(" Logo "))
+            l[0] || (l[0] = _(" Logo "))
           ])
-        ], 8, Dt)
+        ], 8, Ot)
       ]),
       buttonicon: g(() => [
         k(i.$slots, "buttonIcon", {}, () => [
-          y(c(j), {
+          y(c(T), {
             icon: "bi:list",
-            class: B(t.severity === "light" ? "text-black" : "text-white"),
+            class: F(t.severity === "light" ? "text-black" : "text-white"),
             height: "24",
             "data-cy": "burger-icon"
           }, null, 8, ["class"])
@@ -1654,19 +1674,19 @@ const Ct = { key: 0 }, zt = {
       q(i.$slots, (n, s) => ({
         name: s,
         fn: g((r) => [
-          k(i.$slots, s, X(Q(r)))
+          k(i.$slots, s, K(Z(r)))
         ])
       }))
     ]), 1040, ["pt"]));
   }
-}), Ot = { class: "border alternating-item-list" }, Nt = {
+}), Nt = { class: "border alternating-item-list" }, Ut = {
   key: 0,
   class: "p-2 border-top border-bottom",
   "data-cy": "title"
-}, Ut = { class: "d-inline-block" }, At = {
+}, At = { class: "d-inline-block" }, qt = {
   key: 1,
   class: "p-2 item d-flex justify-content-between align-items-center"
-}, qt = /* @__PURE__ */ F({
+}, Et = /* @__PURE__ */ B({
   __name: "ForgeMultiSelectPreview",
   props: /* @__PURE__ */ E({
     title: { default: "Selected Items" },
@@ -1687,12 +1707,12 @@ const Ct = { key: 0 }, zt = {
     };
     return (l, n) => {
       const s = oe, r = U;
-      return d(), f("div", {
-        class: B(l.orientation === "column" ? "row" : ""),
+      return d(), b("div", {
+        class: F(l.orientation === "column" ? "row" : ""),
         "data-cy": "multiselect-preview"
       }, [
         m("div", {
-          class: B(l.orientation === "row" ? "col-12 mb-1" : "col"),
+          class: F(l.orientation === "row" ? "col-12 mb-1" : "col"),
           "data-cy": "multiselect-container"
         }, [
           y(s, S({
@@ -1705,37 +1725,37 @@ const Ct = { key: 0 }, zt = {
             "data-cy": "multiselect"
           }), {
             default: g(() => [
-              (d(!0), f(N, null, q(l.$slots, (p, u) => k(l.$slots, u, { slot: u })), 256))
+              (d(!0), b(N, null, q(l.$slots, (p, u) => k(l.$slots, u, { slot: u })), 256))
             ]),
             _: 3
           }, 16, ["modelValue", "options", "placeholder"]),
           k(l.$slots, "after-multi-select")
         ], 2),
         m("div", {
-          class: B(l.orientation === "row" ? "col-12" : "col"),
+          class: F(l.orientation === "row" ? "col-12" : "col"),
           "data-cy": "options-preview"
         }, [
           m("div", {
             style: ke({ height: l.height }),
             class: "overflow-auto"
           }, [
-            m("div", Ot, [
-              l.title ? (d(), f("div", Nt, w(l.title), 1)) : C("", !0),
-              (d(!0), f(N, null, q(a.value, (p) => (d(), f("div", {
+            m("div", Nt, [
+              l.title ? (d(), b("div", Ut, w(l.title), 1)) : C("", !0),
+              (d(!0), b(N, null, q(a.value, (p) => (d(), b("div", {
                 key: p.id,
                 class: "p-2 item d-flex justify-content-between align-items-center"
               }, [
                 k(l.$slots, "list-item", { item: p }, () => [
-                  m("span", Ut, w(p.shortLabel ? p.shortLabel : p.label), 1)
+                  m("span", At, w(p.shortLabel ? p.shortLabel : p.label), 1)
                 ]),
-                l.canRemoveItemFromPreview ? (d(), b(r, {
+                l.canRemoveItemFromPreview ? (d(), f(r, {
                   key: 0,
                   link: "",
                   class: "m-0 p-0 d-flex align-items-center",
                   onClick: (u) => i(p.id)
                 }, {
                   default: g(() => [
-                    y(c(j), {
+                    y(c(T), {
                       icon: "bi:x",
                       class: "close-icon",
                       "data-cy": `close-icon-${p.id}`
@@ -1744,34 +1764,34 @@ const Ct = { key: 0 }, zt = {
                   _: 2
                 }, 1032, ["onClick"])) : C("", !0)
               ]))), 128)),
-              a.value == null || a.value.length == 0 ? (d(), f("div", At, w(t.optionsPreviewEmptyText), 1)) : C("", !0)
+              a.value == null || a.value.length == 0 ? (d(), b("div", qt, w(t.optionsPreviewEmptyText), 1)) : C("", !0)
             ])
           ], 4)
         ], 2)
       ], 2);
     };
   }
-}), Et = { class: "d-flex justify-content-between pb-2" }, Lt = {
+}), Lt = { class: "d-flex justify-content-between pb-2" }, Rt = {
   "data-cy": "title",
   class: "my-auto"
-}, Rt = {
+}, Ht = {
   "data-cy": "slot",
   class: "d-flex align-items-center"
-}, Mi = /* @__PURE__ */ F({
+}, Oi = /* @__PURE__ */ B({
   __name: "ForgePageHeader",
   props: {
     title: {}
   },
   setup(e) {
     const t = e;
-    return (a, i) => (d(), f("div", Et, [
-      m("h3", Lt, w(t.title), 1),
-      m("div", Rt, [
+    return (a, i) => (d(), b("div", Lt, [
+      m("h3", Rt, w(t.title), 1),
+      m("div", Ht, [
         k(a.$slots, "default")
       ])
     ]));
   }
-}), Ht = { class: "d-flex" }, Wt = { "data-cy": "before-slot" }, Yt = { class: "position-relative w-100" }, Gt = { "data-cy": "after-slot" }, be = /* @__PURE__ */ F({
+}), Wt = { class: "d-flex" }, Yt = { "data-cy": "before-slot" }, Gt = { class: "position-relative w-100" }, Jt = { "data-cy": "after-slot" }, be = /* @__PURE__ */ B({
   __name: "ForgeDatepicker",
   props: /* @__PURE__ */ E({
     severity: { default: "primary" },
@@ -1943,14 +1963,14 @@ const Ct = { key: 0 }, zt = {
       })
     }));
     return (o, $) => {
-      const T = Pe;
-      return d(), f(N, null, [
-        m("div", Ht, [
-          m("span", Wt, [
+      const j = _e;
+      return d(), b(N, null, [
+        m("div", Wt, [
+          m("span", Yt, [
             k(o.$slots, "before")
           ]),
-          m("div", Yt, [
-            y(T, S({ ...t, ...o.$attrs }, {
+          m("div", Gt, [
+            y(j, S({ ...t, ...o.$attrs }, {
               pt: x.value,
               modelValue: a.value,
               "onUpdate:modelValue": [
@@ -1960,23 +1980,23 @@ const Ct = { key: 0 }, zt = {
               onBlur: $[1] || ($[1] = () => c(s)),
               "input-class": { "datepicker-invalid": u.value }
             }), null, 16, ["pt", "modelValue", "onUpdate:modelValue", "input-class"]),
-            H(y(c(j), {
+            H(y(c(T), {
               "data-cy": "icon",
               icon: "bi:calendar4",
-              class: B(["position-absolute end-0 top-50 bottom-50 my-auto me-2 bg-white", `${u.value ? "text-danger-dark" : "text-muted"}`])
+              class: F(["position-absolute end-0 top-50 bottom-50 my-auto me-2 bg-white", `${u.value ? "text-danger-dark" : "text-muted"}`])
             }, null, 8, ["class"]), [
               [Y, t.showIcon]
             ]),
-            H(y(c(j), {
+            H(y(c(T), {
               "data-cy": "icon",
               icon: "bi:x",
               onClick: p,
-              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"])
+              class: F(["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"]), [
               [Y, t.modelValue]
             ])
           ]),
-          m("span", Gt, [
+          m("span", Jt, [
             k(o.$slots, "after")
           ])
         ]),
@@ -1989,7 +2009,7 @@ const Ct = { key: 0 }, zt = {
       ], 64);
     };
   }
-}), Di = /* @__PURE__ */ F({
+}), Ni = /* @__PURE__ */ B({
   __name: "ForgeRemainingCharacters",
   props: {
     maxCount: { default: 300 },
@@ -1997,11 +2017,11 @@ const Ct = { key: 0 }, zt = {
   },
   setup(e) {
     const t = e, a = z(() => t.maxCount - t.currentCount);
-    return (i, l) => (d(), f("div", {
-      class: B(a.value < 0 ? "text-danger" : "")
+    return (i, l) => (d(), b("div", {
+      class: F(a.value < 0 ? "text-danger" : "")
     }, "Remaining characters: " + w(a.value), 3));
   }
-}), Jt = { class: "d-flex justify-content-between" }, Oi = /* @__PURE__ */ F({
+}), Kt = { class: "d-flex justify-content-between" }, Ui = /* @__PURE__ */ B({
   __name: "ForgeForm",
   props: {
     onSubmit: {},
@@ -2028,21 +2048,21 @@ const Ct = { key: 0 }, zt = {
     }
     return (n, s) => {
       const r = U;
-      return d(), f("form", S(n.$attrs, {
+      return d(), b("form", S(n.$attrs, {
         novalidate: "",
         class: "position-relative shadow-sm border p-4 bg-white",
         onSubmit: G(l, ["prevent"])
       }), [
-        n.hideTitle ? C("", !0) : (d(), f(N, { key: 0 }, [
+        n.hideTitle ? C("", !0) : (d(), b(N, { key: 0 }, [
           k(n.$slots, "title", {}, () => [
             m("h3", {
-              class: B(n.titleClass),
+              class: F(n.titleClass),
               "data-cy": "form-title"
             }, w(n.title), 3)
           ]),
           s[1] || (s[1] = m("hr", null, null, -1))
         ], 64)),
-        i.value.hasError ? (d(), b(se, {
+        i.value.hasError ? (d(), f(se, {
           key: 1,
           severity: "danger",
           "data-cy": "error"
@@ -2051,15 +2071,15 @@ const Ct = { key: 0 }, zt = {
             k(n.$slots, "error", {
               error: i.value.message
             }, () => [
-              P(w(i.value.message), 1)
+              _(w(i.value.message), 1)
             ])
           ]),
           _: 3
         })) : C("", !0),
         k(n.$slots, "default"),
-        m("div", Jt, [
+        m("div", Kt, [
           k(n.$slots, "cancel", {}, () => [
-            n.hideCancel ? C("", !0) : (d(), b(r, {
+            n.hideCancel ? C("", !0) : (d(), f(r, {
               key: 0,
               "data-cy": "cancel-btn",
               type: "reset",
@@ -2068,7 +2088,7 @@ const Ct = { key: 0 }, zt = {
               onClick: s[0] || (s[0] = (p) => n.$emit("cancel"))
             }, {
               default: g(() => [
-                P(w(n.cancelText), 1)
+                _(w(n.cancelText), 1)
               ]),
               _: 1
             }))
@@ -2081,23 +2101,23 @@ const Ct = { key: 0 }, zt = {
               class: "ms-auto"
             }, {
               default: g(() => [
-                P(w(n.submitText), 1)
+                _(w(n.submitText), 1)
               ]),
               _: 1
             })
           ])
         ]),
-        a.value ? (d(), b(ge, {
+        a.value ? (d(), f(ge, {
           key: 2,
           "data-cy": "loading-spinner"
         })) : C("", !0)
       ], 16);
     };
   }
-}), Kt = {
+}), Zt = {
   key: 1,
   class: "d-flex flex-column w-100"
-}, Zt = ["for"], Ni = /* @__PURE__ */ F({
+}, Xt = ["for"], Ai = /* @__PURE__ */ B({
   __name: "ForgeFormField",
   props: /* @__PURE__ */ E({
     name: {},
@@ -2121,8 +2141,8 @@ const Ct = { key: 0 }, zt = {
     return ce(() => n.value, (x) => {
       t.value = x;
     }, { immediate: !0 }), (x, o) => {
-      const $ = Ve, T = _e, V = ne, M = te, O = oe, v = be;
-      return a.type === "checkbox" ? (d(), b(fe, S({
+      const $ = Ve, j = Pe, V = ne, M = te, O = oe, v = be;
+      return a.type === "checkbox" ? (d(), f(fe, S({
         key: 0,
         id: a.name,
         label: a.fieldLabel
@@ -2130,16 +2150,16 @@ const Ct = { key: 0 }, zt = {
         name: a.name,
         modelValue: t.value,
         "onUpdate:modelValue": o[0] || (o[0] = (h) => t.value = h)
-      }), null, 16, ["id", "label", "name", "modelValue"])) : (d(), f("div", Kt, [
+      }), null, 16, ["id", "label", "name", "modelValue"])) : (d(), b("div", Zt, [
         m("div", {
           "data-cy": "input-wrapper",
-          class: B(["d-flex", a.fieldLabelPosition === "top" ? "flex-column" : "flex-row"])
+          class: F(["d-flex", a.fieldLabelPosition === "top" ? "flex-column" : "flex-row"])
         }, [
           m("label", {
             for: a.name,
-            class: B(a.fieldLabelPosition === "top" ? "mb-1" : "me-2 " + a.labelWidthClass)
-          }, w(a.fieldLabel), 11, Zt),
-          a.type === "number" ? (d(), b(c(ue), S({
+            class: F(a.fieldLabelPosition === "top" ? "mb-1" : "me-2 " + a.labelWidthClass)
+          }, w(a.fieldLabel), 11, Xt),
+          a.type === "number" ? (d(), f(c(ue), S({
             key: 0,
             id: a.name
           }, x.$attrs, {
@@ -2149,7 +2169,7 @@ const Ct = { key: 0 }, zt = {
             modelValue: t.value,
             "onUpdate:modelValue": o[1] || (o[1] = (h) => t.value = h),
             onInput: i
-          }), null, 16, ["id", "placeholder", "input-class", "class", "modelValue"])) : a.type === "textarea" ? (d(), b($, S({
+          }), null, 16, ["id", "placeholder", "input-class", "class", "modelValue"])) : a.type === "textarea" ? (d(), f($, S({
             key: 1,
             id: a.name
           }, x.$attrs, {
@@ -2159,7 +2179,7 @@ const Ct = { key: 0 }, zt = {
             "onUpdate:modelValue": o[2] || (o[2] = (h) => t.value = h),
             onInput: i,
             onBlur: c(p)
-          }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "mask" ? (d(), b(T, S({
+          }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "mask" ? (d(), f(j, S({
             key: 2,
             id: a.name
           }, x.$attrs, {
@@ -2170,7 +2190,7 @@ const Ct = { key: 0 }, zt = {
             "onUpdate:modelValue": o[3] || (o[3] = (h) => t.value = h),
             onComplete: i,
             onBlur: c(p)
-          }), null, 16, ["id", "placeholder", "mask", "class", "modelValue", "onBlur"])) : a.type === "text" ? (d(), b(V, S({
+          }), null, 16, ["id", "placeholder", "mask", "class", "modelValue", "onBlur"])) : a.type === "text" ? (d(), f(V, S({
             key: 3,
             id: a.name
           }, x.$attrs, {
@@ -2180,19 +2200,19 @@ const Ct = { key: 0 }, zt = {
             "onUpdate:modelValue": o[4] || (o[4] = (h) => t.value = h),
             onInput: i,
             onBlur: c(p)
-          }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "select" ? (d(), b(M, S({ key: 4 }, { ...a, ...x.$attrs }, {
+          }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "select" ? (d(), f(M, S({ key: 4 }, { ...a, ...x.$attrs }, {
             modelValue: t.value,
             "onUpdate:modelValue": o[5] || (o[5] = (h) => t.value = h),
             class: { "is-invalid": u.value }
-          }), null, 16, ["modelValue", "class"])) : a.type === "multiselect" ? (d(), b(O, S({ key: 5 }, { ...a, ...x.$attrs }, {
+          }), null, 16, ["modelValue", "class"])) : a.type === "multiselect" ? (d(), f(O, S({ key: 5 }, { ...a, ...x.$attrs }, {
             modelValue: t.value,
             "onUpdate:modelValue": o[6] || (o[6] = (h) => t.value = h),
             class: { "is-invalid": u.value }
-          }), null, 16, ["modelValue", "class"])) : a.type === "multiselect-preview" ? (d(), b(qt, S({ key: 6 }, { ...a, ...x.$attrs }, {
+          }), null, 16, ["modelValue", "class"])) : a.type === "multiselect-preview" ? (d(), f(Et, S({ key: 6 }, { ...a, ...x.$attrs }, {
             modelValue: t.value,
             "onUpdate:modelValue": o[7] || (o[7] = (h) => t.value = h),
             class: { "is-invalid": u.value }
-          }), null, 16, ["modelValue", "class"])) : a.type === "datepicker" ? (d(), b(v, S({ key: 7 }, { ...a, ...x.$attrs }, {
+          }), null, 16, ["modelValue", "class"])) : a.type === "datepicker" ? (d(), f(v, S({ key: 7 }, { ...a, ...x.$attrs }, {
             modelValue: t.value,
             "onUpdate:modelValue": o[8] || (o[8] = (h) => t.value = h),
             class: { "is-invalid": u.value }
@@ -2207,7 +2227,7 @@ const Ct = { key: 0 }, zt = {
       ]));
     };
   }
-}), Ui = /* @__PURE__ */ F({
+}), qi = /* @__PURE__ */ B({
   __name: "ForgeChip",
   props: {
     chipSeverity: { default: "primary" },
@@ -2242,15 +2262,15 @@ const Ct = { key: 0 }, zt = {
     }));
     return (i, l) => {
       const n = Me;
-      return d(), b(n, S({ ...i.$attrs, ...i.$props }, { pt: a.value }), {
+      return d(), f(n, S({ ...i.$attrs, ...i.$props }, { pt: a.value }), {
         default: g(() => [
-          (d(!0), f(N, null, q(i.$slots, (s, r) => k(i.$slots, r, { slot: r })), 256))
+          (d(!0), b(N, null, q(i.$slots, (s, r) => k(i.$slots, r, { slot: r })), 256))
         ]),
         _: 3
       }, 16, ["pt"]);
     };
   }
-}), Xt = /* @__PURE__ */ F({
+}), Qt = /* @__PURE__ */ B({
   __name: "ForgeProgressBar",
   props: {
     severity: { default: "primary" },
@@ -2295,7 +2315,7 @@ const Ct = { key: 0 }, zt = {
     }));
     return (s, r) => {
       const p = De;
-      return d(), b(p, S({ ...s.$attrs, ...t }, { pt: n.value }), {
+      return d(), f(p, S({ ...s.$attrs, ...t }, { pt: n.value }), {
         default: g(() => [
           k(s.$slots, "default")
         ]),
@@ -2304,7 +2324,7 @@ const Ct = { key: 0 }, zt = {
     };
   }
 });
-var Qt = /* @__PURE__ */ F({
+var ea = /* @__PURE__ */ B({
   name: "VueDrawingCanvas",
   props: {
     strokeType: {
@@ -2620,7 +2640,7 @@ var Qt = /* @__PURE__ */ F({
       var p = t.split(s).filter((M) => M.length > 0);
       for (let M = 0; M < p.length; M++) {
         for (var u = p[M].split(r).filter((O) => O.length > 0), x = "", o = 0; o < u.length; o++) {
-          var $ = x + u[o] + " ", T = e.measureText($), V = T.width;
+          var $ = x + u[o] + " ", j = e.measureText($), V = j.width;
           V > l && o > 0 ? (this.watermark && this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === "stroke" ? e.strokeText(x, a, i) : e.fillText(x, a, i), x = u[o] + " ", i += n) : x = $;
         }
         this.watermark && this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === "stroke" ? e.strokeText(x, a, i) : e.fillText(x, a, i), i += u.length > 0 ? n : 0;
@@ -2694,7 +2714,7 @@ var Qt = /* @__PURE__ */ F({
     });
   }
 });
-const ea = { class: "d-flex flex-column" }, ta = { class: "d-flex flex-row mt-1 gap-1" }, Ai = /* @__PURE__ */ F({
+const ta = { class: "d-flex flex-column" }, aa = { class: "d-flex flex-row mt-1 gap-1" }, Ei = /* @__PURE__ */ B({
   __name: "ForgeScratchpad",
   props: {
     showClear: { type: Boolean, default: !0 },
@@ -2702,11 +2722,12 @@ const ea = { class: "d-flex flex-column" }, ta = { class: "d-flex flex-row mt-1
     showRedo: { type: Boolean, default: !0 },
     showSave: { type: Boolean, default: !0 },
     height: { default: 300 },
-    width: { default: 600 }
+    width: { default: 600 },
+    lineJoin: { default: "round" }
   },
   emits: ["save"],
   setup(e, { emit: t }) {
-    const a = e, i = t, l = Be("drawingCanvas"), n = I(), s = () => {
+    const a = e, i = t, l = Fe("drawingCanvas"), n = I(), s = () => {
       l == null || l.value.reset();
     }, r = () => {
       l == null || l.value.redo();
@@ -2717,61 +2738,62 @@ const ea = { class: "d-flex flex-column" }, ta = { class: "d-flex flex-row mt-1
     };
     return (x, o) => {
       const $ = U;
-      return d(), f("div", ea, [
-        y(c(Qt), S({
+      return d(), b("div", ta, [
+        y(c(ea), S({
           ref_key: "drawingCanvas",
           ref: l,
           image: n.value,
-          "onUpdate:image": o[0] || (o[0] = (T) => n.value = T),
+          "onUpdate:image": o[0] || (o[0] = (j) => n.value = j),
           "data-cy": "drawing-canvas",
           class: "border canvas"
         }, { ...x.$attrs }, {
           height: x.height,
           width: x.width,
-          style: `height: ${x.height}px; width: ${x.width}px`
-        }), null, 16, ["image", "height", "width", "style"]),
-        m("div", ta, [
-          a.showUndo ? (d(), b($, {
+          style: `height: ${x.height}px; width: ${x.width}px`,
+          "line-join": x.lineJoin
+        }), null, 16, ["image", "height", "width", "style", "line-join"]),
+        m("div", aa, [
+          a.showUndo ? (d(), f($, {
             key: 0,
             onClick: p,
             outlined: "",
             "data-cy": "undo-button"
           }, {
             default: g(() => o[1] || (o[1] = [
-              P("Undo")
+              _("Undo")
             ])),
             _: 1
           })) : C("", !0),
-          a.showRedo ? (d(), b($, {
+          a.showRedo ? (d(), f($, {
             key: 1,
             onClick: r,
             outlined: "",
             "data-cy": "redo-button"
           }, {
             default: g(() => o[2] || (o[2] = [
-              P("Redo")
+              _("Redo")
             ])),
             _: 1
           })) : C("", !0),
-          a.showClear ? (d(), b($, {
+          a.showClear ? (d(), f($, {
             key: 2,
             onClick: s,
             outlined: "",
             "data-cy": "clear-button"
           }, {
             default: g(() => o[3] || (o[3] = [
-              P("Clear")
+              _("Clear")
             ])),
             _: 1
           })) : C("", !0),
-          a.showSave ? (d(), b($, {
+          a.showSave ? (d(), f($, {
             key: 3,
             onClick: u,
             class: "ms-auto",
             "data-cy": "save-button"
           }, {
             default: g(() => o[4] || (o[4] = [
-              P("Save")
+              _("Save")
             ])),
             _: 1
           })) : C("", !0)
@@ -2779,7 +2801,7 @@ const ea = { class: "d-flex flex-column" }, ta = { class: "d-flex flex-row mt-1
       ]);
     };
   }
-}), aa = { class: "value text-white w-100 text-center" }, qi = /* @__PURE__ */ F({
+}), ia = { class: "value text-white w-100 text-center" }, Li = /* @__PURE__ */ B({
   __name: "ForgeStatWidget",
   props: {
     size: { default: "md" },
@@ -2787,15 +2809,15 @@ const ea = { class: "d-flex flex-column" }, ta = { class: "d-flex flex-row mt-1
   },
   setup(e) {
     const t = e;
-    return (a, i) => (d(), f("div", S(a.$attrs, {
+    return (a, i) => (d(), b("div", S(a.$attrs, {
       class: `d-flex shadow m-2 align-items-center widget--${t.size} bg-${t.severity}`
     }), [
-      m("span", aa, [
+      m("span", ia, [
         k(a.$slots, "default")
       ])
     ], 16));
   }
-}), ia = { key: 0 }, Ei = /* @__PURE__ */ F({
+}), la = { key: 0 }, Ri = /* @__PURE__ */ B({
   __name: "ForgeStepper",
   props: {
     currentStep: { default: 1 },
@@ -2842,18 +2864,18 @@ const ea = { class: "d-flex flex-column" }, ta = { class: "d-flex flex-row mt-1
         ]
       })
     }));
-    return (i, l) => (d(), b(c(Ne), { value: i.currentStep }, {
+    return (i, l) => (d(), f(c(Ne), { value: i.currentStep }, {
       default: g(() => [
         y(c(Ue), null, {
           default: g(() => [
-            (d(!0), f(N, null, q(i.steps, (n) => (d(), b(c(Oe), S({
+            (d(!0), b(N, null, q(i.steps, (n) => (d(), f(c(Oe), S({
               key: n.value,
               value: n.value,
               disabled: n.disabled,
               ref_for: !0
             }, { ...i.$attrs }, { pt: a.value }), {
               default: g(() => [
-                i.showStepLabel ? (d(), f("div", ia, w(n.label), 1)) : C("", !0)
+                i.showStepLabel ? (d(), b("div", la, w(n.label), 1)) : C("", !0)
               ]),
               _: 2
             }, 1040, ["value", "disabled", "pt"]))), 128))
@@ -2862,7 +2884,7 @@ const ea = { class: "d-flex flex-column" }, ta = { class: "d-flex flex-row mt-1
         }),
         y(c(qe), null, {
           default: g(() => [
-            (d(!0), f(N, null, q(i.steps, (n) => (d(), b(c(Ae), {
+            (d(!0), b(N, null, q(i.steps, (n) => (d(), f(c(Ae), {
               key: n.value,
               value: n.value
             }, {
@@ -2878,7 +2900,7 @@ const ea = { class: "d-flex flex-column" }, ta = { class: "d-flex flex-row mt-1
       _: 3
     }, 8, ["value"]));
   }
-}), la = { class: "p-4 text-wrap w-100" }, na = { class: "p-4 text-wrap w-100" }, Li = /* @__PURE__ */ F({
+}), na = { class: "p-4 text-wrap w-100" }, oa = { class: "p-4 text-wrap w-100" }, Hi = /* @__PURE__ */ B({
   __name: "ForgeTile",
   props: {
     severity: { default: "primary" },
@@ -2890,45 +2912,45 @@ const ea = { class: "d-flex flex-column" }, ta = { class: "d-flex flex-row mt-1
     const t = e, a = z(() => `${t.severity === void 0 ? "tile-primary" : `tile-${t.severity}`} ${t.barPosition === "none" ? "" : `tile-bar-${t.barPosition}`} ${t.selected ? "selected" : ""}`), i = z(() => `${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 s = U;
-      return t.clickable ? (d(), b(s, {
+      return t.clickable ? (d(), f(s, {
         key: 0,
-        class: B(["d-flex w-100 p-0 text-body", a.value]),
+        class: F(["d-flex w-100 p-0 text-body", a.value]),
         severity: t.severity,
         unstyled: "",
         "data-cy": "button-tile"
       }, {
         default: g(() => [
-          m("div", la, [
+          m("div", na, [
             k(l.$slots, "default", {}, () => [
-              n[0] || (n[0] = P("Tile Content"))
+              n[0] || (n[0] = _("Tile Content"))
             ])
           ])
         ]),
         _: 3
-      }, 8, ["severity", "class"])) : (d(), f("div", {
+      }, 8, ["severity", "class"])) : (d(), b("div", {
         key: 1,
-        class: B(["d-flex w-100", i.value]),
+        class: F(["d-flex w-100", i.value]),
         "data-cy": "tile"
       }, [
-        m("div", na, [
+        m("div", oa, [
           k(l.$slots, "default", {}, () => [
-            n[1] || (n[1] = P("Tile Content"))
+            n[1] || (n[1] = _("Tile Content"))
           ])
         ])
       ], 2));
     };
   }
 });
-function Z(e, t) {
+function Q(e, t) {
   return e > 1 ? `${t}s` : t;
 }
-const oa = {
+const sa = {
   class: "d-flex justify-content-start align-items-baseline",
   "data-cy": "pagination-header"
-}, sa = { class: "ms-2" }, ra = { key: 0 }, da = {
+}, ra = { class: "ms-2" }, da = { key: 0 }, pa = {
   class: "w-auto",
   "data-cy": "total"
-}, pa = /* @__PURE__ */ F({
+}, ca = /* @__PURE__ */ B({
   __name: "ForgePaginationHeader",
   props: {
     total: {},
@@ -2941,11 +2963,11 @@ const oa = {
       a("update:perPage", s.value);
     }, n = z(() => {
       const s = Math.ceil(i.total / i.perPage);
-      return `${s} ${Z(s, "page")}`;
+      return `${s} ${Q(s, "page")}`;
     });
-    return (s, r) => (d(), f("div", oa, [
-      r[2] || (r[2] = P(" Number of results per page ")),
-      m("div", sa, [
+    return (s, r) => (d(), b("div", sa, [
+      r[2] || (r[2] = _(" Number of results per page ")),
+      m("div", ra, [
         y(c(te), {
           options: i.pageSizes,
           "model-value": i.perPage,
@@ -2953,16 +2975,16 @@ const oa = {
           onChange: r[0] || (r[0] = (p) => l(p))
         }, null, 8, ["options", "model-value"])
       ]),
-      i.total ? (d(), f("div", ra, [
+      i.total ? (d(), b("div", da, [
         r[1] || (r[1] = m("span", { class: "mx-2" }, "|", -1)),
-        m("span", da, w(i.total) + " " + w(c(Z)(i.total, "result")) + " across " + w(n.value), 1)
+        m("span", pa, w(i.total) + " " + w(c(Q)(i.total, "result")) + " across " + w(n.value), 1)
       ])) : C("", !0)
     ]));
   }
-}), ca = { class: "position-relative" }, ua = { "data-cy": "above-table-slot" }, ma = { class: "d-flex w-100" }, va = {
+}), ua = { class: "position-relative" }, ma = { "data-cy": "above-table-slot" }, va = { class: "d-flex w-100" }, fa = {
   class: "mx-auto",
   "data-cy": "empty-message"
-}, fa = { class: "d-flex" }, ga = { class: "d-flex align-items-end mb-2" }, ba = { key: 0 }, xa = { class: "ms-auto" }, Ri = /* @__PURE__ */ F({
+}, ga = { class: "d-flex" }, ba = { class: "d-flex align-items-end mb-2" }, xa = { key: 0 }, ya = { class: "ms-auto" }, Wi = /* @__PURE__ */ B({
   __name: "ForgeTable",
   props: {
     value: {},
@@ -3057,7 +3079,7 @@ const oa = {
       total: i.totalRecords ?? i.value.length
     }), p = z(() => i.totalRecords ?? i.value.length), u = z(() => {
       const v = Math.ceil(p.value / s.value);
-      return `${v} ${Z(v, "page")}`;
+      return `${v} ${Q(v, "page")}`;
     }), x = z(() => ({
       thead: () => ({
         class: [
@@ -3089,7 +3111,7 @@ const oa = {
       V(i.filters);
     }, $ = () => {
       l.value.exportCSV();
-    }, T = (v) => {
+    }, j = (v) => {
       var h;
       r.value.sortDirection = v.sortOrder === 1 ? "Asc" : v.sortOrder === -1 ? "Desc" : "None", r.value.sortField = ((h = v.sortField) == null ? void 0 : h.toString()) ?? "", a("update:tableContext", r.value), a("sort", v);
     }, V = (v) => {
@@ -3101,8 +3123,8 @@ const oa = {
     };
     return ce(() => i.filters, (v) => {
       r.value.filters = v, a("update:tableContext", r.value);
-    }, { deep: !0 }), le(() => a("update:tableContext", r.value)), (v, h) => (d(), f("div", ca, [
-      m("span", ua, [
+    }, { deep: !0 }), le(() => a("update:tableContext", r.value)), (v, h) => (d(), b("div", ua, [
+      m("span", ma, [
         k(v.$slots, "above-table")
       ]),
       y(c(Ee), S({
@@ -3116,64 +3138,64 @@ const oa = {
         ref: l,
         "data-cy": "table",
         "onUpdate:filters": V,
-        onSort: T,
+        onSort: j,
         onPage: M,
         showHeaders: ""
       }), ie({
         empty: g(() => [
-          m("div", ma, [
-            m("h5", va, w(v.emptyMessage ?? "No items Found."), 1)
+          m("div", va, [
+            m("h5", fa, w(v.emptyMessage ?? "No items Found."), 1)
           ])
         ]),
         header: g(() => [
           m("div", {
-            class: B(i.loading ? "opacity-50" : "")
+            class: F(i.loading ? "opacity-50" : "")
           }, [
-            m("div", fa, [
-              m("div", ga, [
-                v.paginator && !v.legacyPaginationFooter ? (d(), f("span", ba, [
-                  y(pa, {
+            m("div", ga, [
+              m("div", ba, [
+                v.paginator && !v.legacyPaginationFooter ? (d(), b("span", xa, [
+                  y(ca, {
                     total: p.value,
                     "page-sizes": n.value,
                     "per-page": s.value,
                     "onUpdate:perPage": [
-                      h[0] || (h[0] = (_) => s.value = _),
+                      h[0] || (h[0] = (P) => s.value = P),
                       O
                     ]
                   }, null, 8, ["total", "page-sizes", "per-page"])
                 ])) : C("", !0)
               ]),
-              m("div", xa, [
-                v.showClearButton ? (d(), b(c(U), {
+              m("div", ya, [
+                v.showClearButton ? (d(), f(c(U), {
                   key: 0,
                   outlined: "",
-                  class: B(v.showExporterButton ? "me-2" : ""),
+                  class: F(v.showExporterButton ? "me-2" : ""),
                   onClick: o,
                   "data-cy": "clear-all"
                 }, {
                   default: g(() => [
-                    y(c(j), {
+                    y(c(T), {
                       icon: "bi:funnel-fill",
                       width: "24",
                       height: "24"
                     }),
-                    h[2] || (h[2] = P(" Clear "))
+                    h[2] || (h[2] = _(" Clear "))
                   ]),
                   _: 1
                 }, 8, ["class"])) : C("", !0),
-                v.showExporterButton ? (d(), b(c(U), {
+                v.showExporterButton ? (d(), f(c(U), {
                   key: 1,
                   outlined: "",
                   onClick: $,
                   "data-cy": "exporter"
                 }, {
                   default: g(() => [
-                    y(c(j), {
+                    y(c(T), {
                       icon: "typcn:export",
                       width: "24",
                       height: "24"
                     }),
-                    h[3] || (h[3] = P(" Export "))
+                    h[3] || (h[3] = _(" Export "))
                   ]),
                   _: 1
                 })) : C("", !0),
@@ -3187,24 +3209,24 @@ const oa = {
         ]),
         _: 2
       }, [
-        q(v.$slots, (_, L) => ({
+        q(v.$slots, (P, L) => ({
           name: L,
           fn: g((ae) => [
-            k(v.$slots, L, X(Q(ae || {})))
+            k(v.$slots, L, K(Z(ae || {})))
           ])
         })),
         v.legacyPaginationFooter ? {
           name: "paginatorstart",
           fn: g(() => [
             m("span", {
-              class: B(["d-flex", i.loading ? "opacity-50" : ""]),
+              class: F(["d-flex", i.loading ? "opacity-50" : ""]),
               "data-cy": "legacy-page-size"
             }, [
               h[4] || (h[4] = m("span", { class: "me-2 my-auto text-nowrap" }, "Page Size:", -1)),
               y(c(te), {
                 options: n.value,
                 modelValue: s.value,
-                "onUpdate:modelValue": h[1] || (h[1] = (_) => s.value = _),
+                "onUpdate:modelValue": h[1] || (h[1] = (P) => s.value = P),
                 class: "ms-2",
                 onClick: O
               }, null, 8, ["options", "modelValue"])
@@ -3217,15 +3239,15 @@ const oa = {
           fn: g(() => [
             m("span", {
               "data-cy": "legacy-total",
-              class: B(i.loading ? "opacity-50" : "")
-            }, w(p.value) + " " + w(c(Z)(p.value, "result")) + " across " + w(u.value), 3)
+              class: F(i.loading ? "opacity-50" : "")
+            }, w(p.value) + " " + w(c(Q)(p.value, "result")) + " across " + w(u.value), 3)
           ]),
           key: "1"
         } : void 0
       ]), 1040, ["class", "pt", "rows", "total-records", "filter-display"])
     ]));
   }
-}), ya = { class: "d-flex position-relative" }, ha = { class: "d-flex w-100" }, Hi = /* @__PURE__ */ F({
+}), ha = { class: "d-flex position-relative" }, wa = { class: "d-flex w-100" }, Yi = /* @__PURE__ */ B({
   __name: "ForgeFilterHeader",
   props: /* @__PURE__ */ E({
     dataType: {},
@@ -3256,19 +3278,19 @@ const oa = {
     };
     return (l, n) => {
       const s = ue, r = U;
-      return d(), f("div", ya, [
-        l.dataType === "numeric" ? (d(), b(s, S({
+      return d(), b("div", ha, [
+        l.dataType === "numeric" ? (d(), f(s, S({
           key: 0,
           modelValue: t.value,
           "onUpdate:modelValue": n[0] || (n[0] = (p) => t.value = p)
-        }, l.$attrs), null, 16, ["modelValue"])) : l.dataType === "date" ? (d(), b(be, S({
+        }, l.$attrs), null, 16, ["modelValue"])) : l.dataType === "date" ? (d(), f(be, S({
           key: 1,
           modelValue: t.value,
           "onUpdate:modelValue": n[1] || (n[1] = (p) => t.value = p)
         }, l.$attrs, {
           "show-icon": !1,
           "show-on-focus": !0
-        }), null, 16, ["modelValue"])) : l.dataType === "select" ? (d(), b(c(te), S({
+        }), null, 16, ["modelValue"])) : l.dataType === "select" ? (d(), f(c(te), S({
           key: 2,
           modelValue: t.value,
           "onUpdate:modelValue": n[2] || (n[2] = (p) => t.value = p)
@@ -3278,18 +3300,18 @@ const oa = {
           "option-label": l.optionLabel
         }), {
           value: g(({ value: p, placeholder: u }) => [
-            m("div", ha, [
+            m("div", wa, [
               m("span", {
-                class: B({ "filter-placeholder": p === null })
+                class: F({ "filter-placeholder": p === null })
               }, w(a(p, u)), 3),
-              l.showClearButton && t.value !== null ? (d(), b(r, {
+              l.showClearButton && t.value !== null ? (d(), f(r, {
                 key: 0,
                 onClick: G(i, ["prevent"]),
                 size: "small",
                 class: "bg-transparent border-0 ms-auto p-0 pe-1"
               }, {
                 default: g(() => [
-                  y(c(j), {
+                  y(c(T), {
                     icon: "bi:x",
                     width: "1rem",
                     height: "1rem",
@@ -3301,7 +3323,7 @@ const oa = {
             ])
           ]),
           _: 1
-        }, 16, ["modelValue", "options", "option-value", "option-label"])) : l.dataType === "multiselect" ? (d(), b(c(oe), S({
+        }, 16, ["modelValue", "options", "option-value", "option-label"])) : l.dataType === "multiselect" ? (d(), f(c(oe), S({
           key: 3,
           modelValue: t.value,
           "onUpdate:modelValue": n[3] || (n[3] = (p) => t.value = p)
@@ -3311,19 +3333,19 @@ const oa = {
           "option-label": l.optionLabel,
           "option-value": l.optionValue,
           filter: ""
-        }), null, 16, ["modelValue", "options", "option-label", "option-value"])) : (d(), b(c(ne), S({
+        }), null, 16, ["modelValue", "options", "option-label", "option-value"])) : (d(), f(c(ne), S({
           key: 4,
           modelValue: t.value,
           "onUpdate:modelValue": n[4] || (n[4] = (p) => t.value = p)
         }, l.$attrs), null, 16, ["modelValue"])),
-        l.showClearButton && t.value !== null && l.dataType !== "select" && l.dataType !== "multiselect" && l.dataType !== "date" ? (d(), b(r, {
+        l.showClearButton && t.value !== null && l.dataType !== "select" && l.dataType !== "multiselect" && l.dataType !== "date" ? (d(), f(r, {
           key: 5,
           onClick: G(i, ["prevent"]),
           size: "small",
           class: "bg-transparent border-0 ms-auto p-0 pe-1 position-absolute end-0 top-0 bottom-0"
         }, {
           default: g(() => [
-            y(c(j), {
+            y(c(T), {
               icon: "bi:x",
               width: "1rem",
               height: "1rem",
@@ -4445,7 +4467,7 @@ class xe {
   }
 }
 W = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap();
-const wa = new xe(de, re)._freeze();
+const ka = new xe(de, re)._freeze();
 function ye(e, t, a, i) {
   const l = t.flatMap((n) => n.file);
   return t = t.map((n) => ({ ...n, status: n.status == "Duplicate" ? "Not Uploaded" : n.status })), e.forEach((n) => {
@@ -4458,7 +4480,7 @@ function ye(e, t, a, i) {
     })) : t[s].status = "Duplicate";
   }), t;
 }
-async function ka(e, t) {
+async function $a(e, t) {
   if (e === "Uploaded" && t !== null)
     try {
       await new me(t).delete();
@@ -4481,20 +4503,20 @@ function pe(e, t = !0, a = 1) {
   while (Math.round(Math.abs(e) * s) / s >= i && n < l.length - 1);
   return e.toFixed(a) + " " + l[n];
 }
-function $a(e) {
+function Fa(e) {
   return ["image/gif", "image/png", "image/jpeg", "image/svg"].includes(e);
 }
 function Ba(e) {
   return URL.createObjectURL(e);
 }
-function Fa() {
+function Sa() {
   const e = new xe(de, re);
   return e.define({ "application/vnd.ms-outlook": ["pst"] }), e;
 }
-const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disabled", "multiple"], za = {
+const Ca = { class: "d-flex justify-content-between" }, za = ["accept", "disabled", "multiple"], Ta = {
   class: "text-break accepted-file-types-container",
   id: "accepted-file-types-overlay"
-}, Ta = /* @__PURE__ */ F({
+}, ja = /* @__PURE__ */ B({
   __name: "UploadButton",
   props: /* @__PURE__ */ E({
     acceptedFileTypes: {},
@@ -4511,7 +4533,7 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
     };
     return (s, r) => {
       const p = U;
-      return d(), f("div", Sa, [
+      return d(), b("div", Ca, [
         k(s.$slots, "message"),
         m("div", null, [
           m("input", {
@@ -4522,24 +4544,24 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
             disabled: l.value,
             multiple: s.maxFileInput > 1,
             onInput: r[0] || (r[0] = (u) => n([...u.target.files]))
-          }, null, 40, Ca),
+          }, null, 40, za),
           m("label", {
-            class: B([{ disabled: l.value }, "btn btn-primary"]),
+            class: F([{ disabled: l.value }, "btn btn-primary"]),
             id: "file-input-button",
             for: "file-input"
           }, [
             k(s.$slots, "button-content", {}, () => [
-              y(c(j), {
+              y(c(T), {
                 icon: "bi:upload",
                 class: "me-2",
                 height: "20px",
                 width: "20px"
               }),
-              r[1] || (r[1] = P(" Browse your computer "))
+              r[1] || (r[1] = _(" Browse your computer "))
             ])
           ], 2)
         ]),
-        s.showDragDropArea ? (d(), b(p, {
+        s.showDragDropArea ? (d(), f(p, {
           link: "",
           class: "ms-auto",
           key: s.acceptedFileTypes.length,
@@ -4547,7 +4569,7 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
           onClick: i
         }, {
           default: g(() => r[2] || (r[2] = [
-            P("Accepted File Types")
+            _("Accepted File Types")
           ])),
           _: 1
         })) : C("", !0),
@@ -4556,21 +4578,21 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
           ref: a
         }, {
           default: g(() => [
-            m("div", za, w(s.acceptedFileTypes.map((u) => u.label ?? u.fileType.split("/").pop()).join(", ")), 1)
+            m("div", Ta, w(s.acceptedFileTypes.map((u) => u.label ?? u.fileType.split("/").pop()).join(", ")), 1)
           ]),
           _: 1
         }, 512)
       ]);
     };
   }
-}), ja = {
+}), Ia = {
   key: 0,
   class: "py-4 px-3",
   id: "placeholder-message"
-}, Ia = {
+}, _a = {
   key: 1,
   class: "d-flex flex-column"
-}, Pa = /* @__PURE__ */ F({
+}, Pa = /* @__PURE__ */ B({
   __name: "DragDropArea",
   props: /* @__PURE__ */ E({
     maxFileInput: {},
@@ -4585,27 +4607,27 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
     const t = D(e, "modelValue"), a = I(!1), i = z(() => e.maxFileInput <= t.value.length), l = (n) => {
       a.value = !1, n.dataTransfer.files.length > e.maxFileInput || i.value ? n.preventDefault() : t.value = ye([...n.dataTransfer.files], t.value, e.acceptedFileTypes.map((s) => s.fileType), e.maxFileSize);
     };
-    return (n, s) => (d(), f("div", {
+    return (n, s) => (d(), b("div", {
       id: "drag-drop-area",
-      class: B(`${a.value ? "border-2 border-primary bg-body-tertiary" : ""} mt-3 file-container border-dashed border-2`),
+      class: F(`${a.value ? "border-2 border-primary bg-body-tertiary" : ""} mt-3 file-container border-dashed border-2`),
       onDragleave: s[0] || (s[0] = G((r) => a.value = !1, ["prevent"])),
       onDragover: s[1] || (s[1] = G((r) => a.value = !0, ["prevent"])),
       onDrop: G(l, ["prevent"])
     }, [
-      t.value.length === 0 ? (d(), f("div", ja, [
-        y(c(j), {
+      t.value.length === 0 ? (d(), b("div", Ia, [
+        y(c(T), {
           icon: "bi:upload",
           class: "me-2",
           height: "20px",
           width: "20px"
         }),
-        s[2] || (s[2] = P(" Drag and drop files here "))
-      ])) : (d(), f("div", Ia, [
+        s[2] || (s[2] = _(" Drag and drop files here "))
+      ])) : (d(), b("div", _a, [
         k(n.$slots, "default")
       ]))
     ], 34));
   }
-}), _a = { class: "d-flex align-items-center me-2" }, Va = /* @__PURE__ */ F({
+}), Va = { class: "d-flex align-items-center me-2" }, Ma = /* @__PURE__ */ B({
   __name: "UploadStatus",
   props: {
     fileSize: {},
@@ -4630,41 +4652,41 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
           return "Upload Failed: Connection error, please try again.";
       }
     });
-    return (i, l) => (d(), f("div", _a, [
-      i.uploadStatus === "Uploading" ? (d(), b(Xt, {
+    return (i, l) => (d(), b("div", Va, [
+      i.uploadStatus === "Uploading" ? (d(), f(Qt, {
         key: 0,
         pixelWidth: 200,
         animate: "",
         striped: ""
       }, {
         default: g(() => [
-          P(w((i.bytesUploaded / i.fileSize * 100).toFixed(0)) + "%", 1)
+          _(w((i.bytesUploaded / i.fileSize * 100).toFixed(0)) + "%", 1)
         ]),
         _: 1
       })) : C("", !0),
-      i.uploadStatus !== "Uploading" && i.uploadStatus !== "Not Uploaded" && i.uploadStatus !== "Uploaded" && i.uploadStatus !== "Preparing" ? (d(), b(se, {
+      i.uploadStatus !== "Uploading" && i.uploadStatus !== "Not Uploaded" && i.uploadStatus !== "Uploaded" && i.uploadStatus !== "Preparing" ? (d(), f(se, {
         key: 1,
         id: "upload-status-alert",
         severity: t.value,
         class: "mb-0 w-75 ms-auto"
       }, {
         default: g(() => [
-          P(w(a.value), 1)
+          _(w(a.value), 1)
         ]),
         _: 1
       }, 8, ["severity"])) : C("", !0)
     ]));
   }
-}), Ma = ["data-cy"], Da = { class: "ms-3 d-flex flex-column" }, Oa = {
+}), Da = ["data-cy"], Oa = { class: "ms-3 d-flex flex-column" }, Na = {
   key: 1,
   id: "file-name"
-}, Na = {
+}, Ua = {
   class: "text-black-50",
   id: "file-type"
-}, Ua = {
+}, Aa = {
   class: "text-black-50",
   id: "file-size"
-}, Aa = { class: "ms-auto my-auto d-flex" }, qa = /* @__PURE__ */ F({
+}, qa = { class: "ms-auto my-auto d-flex" }, Ea = /* @__PURE__ */ B({
   __name: "FileInfo",
   props: /* @__PURE__ */ E({
     editableFileName: { type: Boolean },
@@ -4683,11 +4705,11 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
   }),
   emits: /* @__PURE__ */ E(["deleted"], ["update:file", "update:blobFileName", "update:uploadStatus"]),
   setup(e, { emit: t }) {
-    const a = D(e, "file"), i = D(e, "blobFileName"), l = D(e, "uploadStatus"), n = t, s = I(a.value.name), r = I(""), p = I(0), u = I(), x = z(() => e.acceptedFileTypes.some(({ fileType: v }) => v === a.value.type)), o = z(() => a.value.size <= e.maxFileSize), $ = z(() => a.value.type ? a.value.type : Fa().getType(a.value.name)), T = () => {
+    const a = D(e, "file"), i = D(e, "blobFileName"), l = D(e, "uploadStatus"), n = t, s = I(a.value.name), r = I(""), p = I(0), u = I(), x = z(() => e.acceptedFileTypes.some(({ fileType: v }) => v === a.value.type)), o = z(() => a.value.size <= e.maxFileSize), $ = z(() => a.value.type ? a.value.type : Sa().getType(a.value.name)), j = () => {
       s.value != null && (V(), a.value = new File([a.value], s.value, { type: a.value.type, lastModified: (/* @__PURE__ */ new Date()).valueOf() }));
     }, V = () => {
-      let v = s.value.split("."), h = wa.getExtension($.value), _ = s.value.split(".").pop();
-      v.length === 1 ? _ && _.length > 0 && (s.value = [s.value, h].join(".")) : v.length > 1 && _ !== h && (s.value = s.value.replace(_, h));
+      let v = s.value.split("."), h = ka.getExtension($.value), P = s.value.split(".").pop();
+      v.length === 1 ? P && P.length > 0 && (s.value = [s.value, h].join(".")) : v.length > 1 && P !== h && (s.value = s.value.replace(P, h));
     }, M = async () => {
       if (!x.value || !o.value) {
         l.value = x.value ? "InvalidFileSize" : "InvalidFileType";
@@ -4701,7 +4723,7 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
       }
       try {
         l.value = "Uploading";
-        const _ = new me(v), L = {
+        const P = new me(v), L = {
           abortSignal: u.value.signal,
           onProgress: (ae) => p.value = ae.loadedBytes,
           blobHTTPHeaders: {
@@ -4710,27 +4732,27 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
           },
           tags: { temp: "true" }
         };
-        await _.uploadData(a.value, L), r.value = v, l.value = "Uploaded", i.value = h;
-      } catch (_) {
-        if (_.name === "AbortError") {
+        await P.uploadData(a.value, L), r.value = v, l.value = "Uploaded", i.value = h;
+      } catch (P) {
+        if (P.name === "AbortError") {
           l.value = "Aborted";
           return;
         }
         l.value = "Failed";
       }
     }, O = async () => {
-      await ka(l.value, r.value), n("deleted", a.value);
+      await $a(l.value, r.value), n("deleted", a.value);
     };
     return le(() => {
       e.autoUploadToBlob && M();
     }), (v, h) => {
-      const _ = U;
-      return d(), f("div", {
+      const P = U;
+      return d(), b("div", {
         class: "py-4 px-3 d-flex",
         "data-cy": `file-info-${a.value.name}`
       }, [
         m("div", null, [
-          c($a)(a.value.type) ? (d(), b(c(Le), {
+          c(Fa)(a.value.type) ? (d(), f(c(Le), {
             key: 0,
             id: "thumbnail-image",
             "image-class": "image-file-thumbnail border",
@@ -4738,7 +4760,7 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
             alt: a.value.name,
             width: "75px",
             preview: ""
-          }, null, 8, ["src", "alt"])) : (d(), b(c(j), {
+          }, null, 8, ["src", "alt"])) : (d(), f(c(T), {
             key: 1,
             id: "file-earmark",
             icon: "bi:file-earmark",
@@ -4746,76 +4768,76 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
             width: "75px"
           }))
         ]),
-        m("div", Da, [
+        m("div", Oa, [
           m("div", null, [
-            v.editableFileName ? (d(), b(Mt, {
+            v.editableFileName ? (d(), f(Dt, {
               key: 0,
               id: "edit-file-name",
               modelValue: s.value,
               "onUpdate:modelValue": h[0] || (h[0] = (L) => s.value = L),
               rules: v.customFileNameRules,
               name: a.value.name,
-              "complete-action": T
-            }, null, 8, ["modelValue", "rules", "name"])) : (d(), f("span", Oa, w(s.value), 1))
+              "complete-action": j
+            }, null, 8, ["modelValue", "rules", "name"])) : (d(), b("span", Na, w(s.value), 1))
           ]),
-          m("span", Na, "File type: " + w(a.value.type.split("/").pop()), 1),
-          m("span", Ua, "File size: " + w(c(pe)(a.value.size)), 1)
+          m("span", Ua, "File type: " + w(a.value.type.split("/").pop()), 1),
+          m("span", Aa, "File size: " + w(c(pe)(a.value.size)), 1)
         ]),
-        m("div", Aa, [
-          (d(), b(Va, {
+        m("div", qa, [
+          (d(), f(Ma, {
             key: l.value,
             "file-size": a.value.size,
             "upload-status": l.value,
             "bytes-uploaded": p.value,
             "max-file-size": v.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" ? (d(), b(_, {
+          l.value === "Not Uploaded" || l.value === "Failed" || l.value === "Duplicate" || l.value === "Aborted" ? (d(), f(P, {
             key: 0,
             link: "",
             onClick: M
           }, {
             default: g(() => [
-              y(c(j), {
+              y(c(T), {
                 icon: l.value === "Not Uploaded" || l.value === "Duplicate" ? "bi:upload" : "bi:arrow-clockwise"
               }, null, 8, ["icon"])
             ]),
             _: 1
           })) : C("", !0),
-          l.value === "Uploading" ? (d(), b(_, {
+          l.value === "Uploading" ? (d(), f(P, {
             key: 1,
             link: "",
             onClick: h[1] || (h[1] = (L) => u.value.value.abort())
           }, {
             default: g(() => [
-              y(c(j), { icon: "bi:x-circle-fill" })
+              y(c(T), { icon: "bi:x-circle-fill" })
             ]),
             _: 1
-          })) : (d(), b(_, {
+          })) : (d(), f(P, {
             key: 2,
             link: "",
             onClick: O,
             id: "delete-button"
           }, {
             default: g(() => [
-              y(c(j), { icon: "bi:trash" })
+              y(c(T), { icon: "bi:trash" })
             ]),
             _: 1
           }))
         ])
-      ], 8, Ma);
+      ], 8, Da);
     };
   }
-}), Ea = { class: "d-flex justify-content-end mt-1" }, La = { id: "max-file-size" }, Ra = /* @__PURE__ */ F({
+}), La = { class: "d-flex justify-content-end mt-1" }, Ra = { id: "max-file-size" }, Ha = /* @__PURE__ */ B({
   __name: "MaxFileSize",
   props: {
     maxFileSize: {}
   },
   setup(e) {
-    return (t, a) => (d(), f("div", Ea, [
-      m("div", La, "Max file size: " + w(c(pe)(t.maxFileSize)), 1)
+    return (t, a) => (d(), b("div", La, [
+      m("div", Ra, "Max file size: " + w(c(pe)(t.maxFileSize)), 1)
     ]));
   }
-}), Ha = { "data-cy": "file-uploader" }, Wa = { key: 0 }, Wi = /* @__PURE__ */ F({
+}), Wa = { "data-cy": "file-uploader" }, Ya = { key: 0 }, Gi = /* @__PURE__ */ B({
   __name: "ForgeFileUploader",
   props: /* @__PURE__ */ E({
     acceptedFileTypes: {},
@@ -4835,12 +4857,12 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
     const t = D(e, "modelValue"), a = e, i = (l) => {
       t.value = t.value.filter((n) => n.file != l);
     };
-    return (l, n) => (d(), f("div", Ha, [
-      y(Ta, S(a, {
+    return (l, n) => (d(), b("div", Wa, [
+      y(ja, S(a, {
         modelValue: t.value,
         "onUpdate:modelValue": n[0] || (n[0] = (s) => t.value = s)
       }), null, 16, ["modelValue"]),
-      l.showDragDropArea ? (d(), f("div", Wa, [
+      l.showDragDropArea ? (d(), b("div", Ya, [
         y(Pa, {
           "max-file-input": a.maxFileInput,
           "max-file-size": a.maxFileSize,
@@ -4849,8 +4871,8 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
           "onUpdate:modelValue": n[1] || (n[1] = (s) => t.value = s)
         }, {
           default: g(() => [
-            (d(!0), f(N, null, q(t.value, ({ file: s }, r) => (d(), f("span", null, [
-              (d(), b(qa, S({
+            (d(!0), b(N, null, q(t.value, ({ file: s }, r) => (d(), b("span", null, [
+              (d(), f(Ea, S({
                 key: s.name,
                 class: r === t.value.length - 1 || t.value.length == 1 ? "" : "border-bottom",
                 file: t.value[r].file,
@@ -4865,13 +4887,13 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
           ]),
           _: 1
         }, 8, ["max-file-input", "max-file-size", "accepted-file-types", "modelValue"]),
-        y(Ra, {
+        y(Ha, {
           "max-file-size": a.maxFileSize
         }, null, 8, ["max-file-size"])
       ])) : C("", !0)
     ]));
   }
-}), Ya = { class: "d-flex" }, Ga = { class: "me-3" }, Ja = { class: "ms-2" }, Ka = { class: "d-flex flex-column w-100" }, Yi = /* @__PURE__ */ F({
+}), Ga = { class: "d-flex" }, Ja = { class: "me-3" }, Ka = { class: "ms-2" }, Za = { class: "d-flex flex-column w-100" }, Ji = /* @__PURE__ */ B({
   __name: "ForgeColumnCustomiser",
   props: {
     modelValue: { required: !0 },
@@ -4882,19 +4904,19 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
     const t = D(e, "modelValue"), a = I(), i = I(!1), l = (n) => {
       a.value.toggle(n);
     };
-    return (n, s) => (d(), f(N, null, [
+    return (n, s) => (d(), b(N, null, [
       y(c(U), {
         onClick: l,
         class: "ms-2"
       }, {
         default: g(() => [
-          m("div", Ya, [
-            m("div", Ga, [
-              y(c(j), { icon: "bi:layout-three-columns" })
-            ]),
-            P(" Columns (" + w(t.value.filter((r) => r.selected).length ?? 0) + "/" + w(t.value.length ?? 0) + ") ", 1),
+          m("div", Ga, [
             m("div", Ja, [
-              y(c(j), {
+              y(c(T), { icon: "bi:layout-three-columns" })
+            ]),
+            _(" Columns (" + w(t.value.filter((r) => r.selected).length ?? 0) + "/" + w(t.value.length ?? 0) + ") ", 1),
+            m("div", Ka, [
+              y(c(T), {
                 icon: i.value ? "bi:chevron-up" : "bi:chevron-down"
               }, null, 8, ["icon"])
             ])
@@ -4910,9 +4932,9 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
         onShow: s[1] || (s[1] = () => i.value = !0)
       }, {
         default: g(() => [
-          m("div", Ka, [
-            (d(!0), f(N, null, q(t.value, (r, p) => (d(), f("div", {
-              class: B(["d-flex cursor-pointer", {
+          m("div", Za, [
+            (d(!0), b(N, null, q(t.value, (r, p) => (d(), b("div", {
+              class: F(["d-flex cursor-pointer", {
                 "border-top": p !== 0,
                 "py-1": p !== 0 && t.value.length - 1 !== p,
                 "pt-1": t.value.length - 1 === p,
@@ -4934,35 +4956,61 @@ const Sa = { class: "d-flex justify-content-between" }, Ca = ["accept", "disable
       }, 512)
     ], 64));
   }
+}), Ki = /* @__PURE__ */ B({
+  __name: "ForgePanel",
+  setup(e) {
+    return (t, a) => {
+      const i = Re;
+      return d(), f(i, K(Z({ ...t.$attrs })), {
+        toggleicon: g(({ collapsed: l }) => [
+          l ? (d(), f(c(T), {
+            key: 0,
+            "data-cy": "message-icon",
+            icon: "bi:chevron-down"
+          })) : C("", !0),
+          l ? C("", !0) : (d(), f(c(T), {
+            key: 1,
+            "data-cy": "message-icon",
+            icon: "bi:chevron-up"
+          }))
+        ]),
+        default: g(() => [
+          k(t.$slots, "default")
+        ]),
+        _: 3
+      }, 16);
+    };
+  }
 });
 export {
-  Ci as Bootstrap_PT,
-  zi as ForgeActionButton,
+  Ti as Bootstrap_PT,
+  ji as ForgeActionButton,
   se as ForgeAlert,
-  Ti as ForgeAutoComplete,
+  Ii as ForgeAutoComplete,
   fe as ForgeCheckbox,
-  Ui as ForgeChip,
-  Yi as ForgeColumnCustomiser,
+  qi as ForgeChip,
+  Ji as ForgeColumnCustomiser,
   be as ForgeDatepicker,
-  Wi as ForgeFileUploader,
-  Hi as ForgeFilterHeader,
-  Oi as ForgeForm,
-  Ni as ForgeFormField,
-  Mt as ForgeInlineEditor,
-  ji as ForgeLink,
+  Gi as ForgeFileUploader,
+  Yi as ForgeFilterHeader,
+  Ui as ForgeForm,
+  Ai as ForgeFormField,
+  Dt as ForgeInlineEditor,
+  _i as ForgeLink,
   ge as ForgeLoader,
-  _i as ForgeModal,
-  qt as ForgeMultiSelectPreview,
-  Vi as ForgeNavbar,
-  Mi as ForgePageHeader,
-  Xt as ForgeProgressBar,
-  Di as ForgeRemainingCharacters,
-  Ai as ForgeScratchpad,
-  qi as ForgeStatWidget,
-  Ei as ForgeStepper,
-  Ri as ForgeTable,
-  Li as ForgeTile,
-  Pi as convertToMultiSelectOption,
-  Ii as enumToMultiSelectList,
-  St as parseError
+  Mi as ForgeModal,
+  Et as ForgeMultiSelectPreview,
+  Di as ForgeNavbar,
+  Oi as ForgePageHeader,
+  Ki as ForgePanel,
+  Qt as ForgeProgressBar,
+  Ni as ForgeRemainingCharacters,
+  Ei as ForgeScratchpad,
+  Li as ForgeStatWidget,
+  Ri as ForgeStepper,
+  Wi as ForgeTable,
+  Hi as ForgeTile,
+  Vi as convertToMultiSelectOption,
+  Pi as enumToMultiSelectList,
+  Ct as parseError
 };