@citruslime/ui 2.0.0-beta.14 → 2.0.0-beta.18

package/dist/citrus-lime-ui.es.js

@@ -31,9 +31,11 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { Icon } from "@iconify/vue";
-import { defineComponent, ref, openBlock, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, resolveComponent, Fragment, createElementVNode, normalizeClass, createVNode, Transition, withCtx, withDirectives, vShow, reactive, toRefs, nextTick, createBlock, Teleport, renderList, unref, mergeProps, toDisplayString, computed, watch, onMounted, onUnmounted, createCommentVNode, withKeys, withModifiers, vModelText, isRef, createTextVNode, watchEffect, normalizeStyle, createSlots, vModelDynamic } from "vue";
+import { defineComponent, ref, openBlock, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, resolveComponent, Fragment, createElementVNode, normalizeClass, createVNode, Transition, withCtx, withDirectives, vShow, createBlock, Teleport, renderList, unref, mergeProps, toDisplayString, createCommentVNode, nextTick, computed, watch, onMounted, onUnmounted, isRef, normalizeStyle, vModelText, withModifiers, vModelDynamic, withKeys, createTextVNode, watchEffect, createSlots } from "vue";
+import { generateStringId } from "@citruslime/utils";
 import { createI18n, useI18n } from "vue-i18n";
 import Flatpickr from "flatpickr";
+import { useDebouncer, copy } from "@citruslime/vue-utils";
 const _hoisted_1$u = { class: "cl-overflow-hidden" };
 const _sfc_main$v = /* @__PURE__ */ defineComponent({
   props: {
@@ -76,7 +78,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
 const _hoisted_1$t = { class: "cl-absolute cl-left-5 cl-top-5" };
 const _hoisted_2$n = { class: "cl-font-semibold cl-ml-10 cl-p-4 cl-select-none cl-text-grey-5" };
 const _hoisted_3$h = { class: "cl-overflow-hidden" };
-const _hoisted_4$e = { class: "cl-ml-10 cl-p-4" };
+const _hoisted_4$d = { class: "cl-ml-10 cl-p-4" };
 const _sfc_main$u = /* @__PURE__ */ defineComponent({
   props: {
     open: { type: Boolean },
@@ -118,7 +120,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
         createElementVNode("div", _hoisted_3$h, [
           createVNode(Transition, { name: "grow-down" }, {
             default: withCtx(() => [
-              withDirectives(createElementVNode("div", _hoisted_4$e, [
+              withDirectives(createElementVNode("div", _hoisted_4$d, [
                 renderSlot(_ctx.$slots, "default")
               ], 512), [
                 [vShow, __props.open]
@@ -132,10 +134,11 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
-    sfc[key] = val;
+    target[key] = val;
   }
-  return sfc;
+  return target;
 };
 const _sfc_main$t = {};
 const _hoisted_1$s = { class: "cl-border-b cl-border-grey-1 cl-font-semibold cl-pl-14 cl-pr-4 cl-py-2 cl-text-grey-3 cl-text-sm" };
@@ -145,274 +148,211 @@ function _sfc_render$5(_ctx, _cache) {
   ]);
 }
 var clUiAccordionHeader = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$5]]);
-function copy(value) {
-  return JSON.parse(JSON.stringify(value));
-}
-function useDebouncer(timeout = 500) {
-  const debouncerState = reactive({
-    debouncer: null,
-    timeout
-  });
-  function debounce(event, eventArgs) {
-    if (debouncerState.debouncer !== null) {
-      window.clearTimeout(debouncerState.debouncer);
-    }
-    debouncerState.debouncer = window.setTimeout(() => event(...eventArgs), debouncerState.timeout);
-  }
-  return __spreadProps(__spreadValues({}, toRefs(debouncerState)), {
-    debounce
-  });
-}
-function generateStringId() {
-  return Math.random().toString(36).slice(2, 8);
-}
-function nameOf(name) {
-  return name;
-}
-function compareByProperty(firstValue, secondValue, property) {
-  return firstValue[property] < secondValue[property] ? -1 : firstValue[property] > secondValue[property] ? 1 : 0;
+const notifications = ref([]);
+function showNotification(notification) {
+  const newNotification = __spreadValues({
+    id: generateStringId()
+  }, notification);
+  notifications.value.push(newNotification);
+  setTimeout(() => removeNotification(newNotification), notification.duration);
 }
-function getParamsByName(stringToSearch, paramToFind) {
-  let valueToReturn = "";
-  const urlToSearch = decodeURIComponent(stringToSearch);
-  const regexS = "[\\?&]" + paramToFind + "=([^&#]*)";
-  const regex = new RegExp(regexS);
-  const results = regex.exec(urlToSearch);
-  if (results && results[1]) {
-    valueToReturn = decodeURIComponent(results[1].replace(/\+/g, " "));
-  }
-  return valueToReturn;
+function removeNotification(notification) {
+  notifications.value = notifications.value.filter((n) => n.id !== notification.id);
 }
-function levenshtein(firstString, secondString) {
-  if (firstString.length === 0) {
-    return secondString.length;
-  }
-  if (secondString.length === 0) {
-    return firstString.length;
-  }
-  if (firstString.length > secondString.length) {
-    const tmp = firstString;
-    firstString = secondString;
-    secondString = tmp;
-  }
-  const row = new Int8Array(firstString.length + 1);
-  for (let i = 0; i <= firstString.length; i++) {
-    row[i] = i;
+const _hoisted_1$r = ["onClick"];
+const _hoisted_2$m = { class: "cl-flex-1 cl-select-none cl-text-ellipsis cl-w-64" };
+const __default__$4 = {
+  inheritAttrs: false
+};
+const _sfc_main$s = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
+  props: {
+    container: { default: "body" },
+    position: { default: "top-right" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createBlock(Teleport, { to: __props.container }, [
+        createElementVNode("div", {
+          class: normalizeClass(["cl-fixed cl-w-80 cl-z-40", {
+            "cl-top-5 cl-left-5": __props.position === "top-left",
+            "cl-top-5 cl-left-1/2": __props.position === "top-centre",
+            "cl-top-5 cl-right-5": __props.position === "top-right",
+            "cl-bottom-5 cl-left-5": __props.position === "bottom-left",
+            "cl-bottom-5 cl-left-1/2": __props.position === "bottom-centre",
+            "cl-bottom-5 cl-right-5": __props.position === "bottom-right"
+          }])
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifications), (notification, index) => {
+            return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
+              key: index,
+              class: ["cl-break-words cl-cursor-pointer cl-flex cl-font-semibold cl-group cl-mb-2 cl-overflow-hidden cl-p-4 cl-rounded cl-shadow-lg cl-text-sm", {
+                "cl-bg-white": notification.colour === "default",
+                "cl-bg-primary-default": notification.colour === "primary",
+                "cl-bg-secondary-default": notification.colour === "secondary",
+                "cl-bg-danger-default": notification.colour === "danger",
+                "cl-bg-warning-default": notification.colour === "warning"
+              }],
+              onClick: ($event) => unref(removeNotification)(notification)
+            }), [
+              createElementVNode("span", _hoisted_2$m, toDisplayString(notification.message), 1),
+              createVNode(_component_icon, {
+                class: "cl-inline-block cl-opacity-0 cl-transition-opacity group-hover:cl-opacity-100",
+                icon: "ph:x",
+                size: 16,
+                weight: "bold"
+              })
+            ], 16, _hoisted_1$r);
+          }), 128))
+        ], 2)
+      ], 8, ["to"]);
+    };
   }
-  let temp;
-  for (let i = 1; i <= secondString.length; i++) {
-    let prev = i;
-    const previousChar = secondString[i - 1];
-    for (let j = 1; j <= firstString.length; j++) {
-      if (previousChar === firstString[j - 1]) {
-        temp = row[j - 1];
-      } else {
-        const a = prev + 1;
-        const b = row[j] + 1;
-        const c = a - (a - b & b - a >> 7);
-        const d = row[j - 1] + 1;
-        temp = c - (c - d & d - c >> 7);
-      }
-      row[j - 1] = prev;
-      prev = temp;
-    }
-    row[firstString.length] = prev;
+}));
+const _hoisted_1$q = { class: "cl-absolute cl-flex cl-flex-wrap cl-h-screen cl-max-h-screen cl-max-w-full cl-min-h-screen cl-min-w-full cl-w-full" };
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  props: {
+    removePadding: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_sfc_main$s),
+        createElementVNode("div", _hoisted_1$q, [
+          renderSlot(_ctx.$slots, "header"),
+          createElementVNode("div", {
+            class: normalizeClass(["cl-content-start cl-flex cl-flex-nowrap cl-items-stretch cl-max-h-screen cl-relative cl-w-full", {
+              "cl-pt-20": _ctx.$slots.header
+            }])
+          }, [
+            renderSlot(_ctx.$slots, "navigation"),
+            createElementVNode("div", {
+              class: normalizeClass(["cl-grow cl-max-h-full cl-overflow-x-hidden cl-overflow-y-auto cl-w-auto", {
+                "md:cl-p-8 cl-p-2": !__props.removePadding
+              }])
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 2)
+          ], 2)
+        ])
+      ], 64);
+    };
   }
-  return row[firstString.length];
-}
-function camelCaseToArray(camelCase) {
-  return camelCase.split(/(?=[A-Z])/g);
-}
-function kebabCaseToArray(kebabCase) {
-  return kebabCase.split(/(?=-)/g).map((s) => s.replace(/-/g, ""));
-}
-function pascalCaseToArray(pascalCase) {
-  return camelCaseToArray(pascalCase);
-}
-function sentenceCaseToArray(sentenceCase) {
-  return sentenceCase.split(/ /g).map((s) => s.replace(/[^A-Za-z0-9]/g, ""));
-}
-function snakeCaseToArray(snakeCase) {
-  return snakeCase.split(/(?=_)/g).map((s) => s.replace(/_/g, ""));
-}
-function titleCaseToArray(titleCase) {
-  return sentenceCaseToArray(titleCase);
-}
-function arrayToCamelCase(array, locale) {
-  let result = "";
-  array.forEach((s, i) => {
-    result += i === 0 ? s.toLocaleLowerCase(locale) : s.toLocaleLowerCase(locale).firstCharToUpperCase(locale);
-  });
-  return result;
-}
-function arrayToKebabCase(array, lowerCase, locale) {
-  let result = "";
-  array.forEach((s) => {
-    result += `${lowerCase ? s.toLocaleLowerCase(locale) : s.toLocaleUpperCase(locale)}-`;
-  });
-  return result.trimEndChar("-");
-}
-function arrayToSentenceCase(array, locale) {
-  let result = "";
-  array.forEach((s, i) => {
-    result += `${i === 0 ? s.toLowerCase().firstCharToUpperCase(locale) : s.toLocaleLowerCase(locale)} `;
-  });
-  return result.trimEndChar(" ");
-}
-function arrayToTitleCase(array, locale) {
-  let result = "";
-  array.forEach((s) => {
-    result += `${s.toLocaleLowerCase(locale).firstCharToUpperCase(locale)} `;
-  });
-  return result.trimEndChar(" ");
+});
+var clUiLoadingSpinner_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _sfc_main$q = {};
+const _hoisted_1$p = { class: "loading-spinner" };
+function _sfc_render$4(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$p);
 }
-String.prototype.similarity = function(comparisonString) {
-  let similarityToReturn = 0;
-  let longerString = this.toLowerCase();
-  let shorterString = comparisonString.toLowerCase();
-  if (longerString < shorterString) {
-    const temp = shorterString;
-    shorterString = longerString;
-    longerString = temp;
+var ClUiLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$4], ["__scopeId", "data-v-60d7cfd0"]]);
+const _hoisted_1$o = ["disabled"];
+const __default__$3 = {
+  inheritAttrs: false
+};
+const _sfc_main$p = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
+  props: {
+    colour: { default: "default" },
+    size: { default: "medium" },
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        withDirectives(createVNode(ClUiLoadingSpinner, { class: "cl-absolute" }, null, 512), [
+          [vShow, __props.loading]
+        ]),
+        withDirectives(createElementVNode("button", mergeProps(_ctx.$attrs, {
+          class: ["cl-align-middle cl-border cl-font-semibold cl-inline-block cl-overflow-visible cl-rounded cl-select-none cl-shadow cl-text-center cl-transition-colors", {
+            "cl-leading-8 cl-px-4 cl-text-sm": __props.size === "small",
+            "cl-leading-10 cl-px-8 cl-text-sm": __props.size === "medium",
+            "cl-leading-10 cl-px-10 cl-py-2": __props.size === "large",
+            "cl-bg-white cl-border-grey-0 hover:cl-border-grey-2 cl-text-secondary": __props.colour === "default",
+            "cl-border-primary-default cl-bg-primary-default cl-text-white hover:cl-bg-primary-light hover:cl-border-primary-light": __props.colour === "primary",
+            "cl-border-secondary-default cl-bg-secondary-default cl-text-white hover:cl-bg-secondary-light hover:cl-border-secondary-light": __props.colour === "secondary",
+            "cl-border-danger-default cl-bg-danger-default cl-text-white hover:cl-bg-danger-dark hover:cl-border-danger-dark": __props.colour === "danger",
+            "cl-border-link-default cl-bg-link-default cl-text-white hover:cl-bg-link-light hover:cl-border-link-light": __props.colour === "blue",
+            "!cl-border-grey-3 !cl-bg-grey-3 cl-text-grey-0 hover:!cl-bg-grey-3 hover:!cl-border-grey-3 cl-cursor-default": __props.disabled
+          }],
+          disabled: __props.disabled
+        }), [
+          renderSlot(_ctx.$slots, "default")
+        ], 16, _hoisted_1$o), [
+          [vShow, !__props.loading]
+        ])
+      ], 64);
+    };
   }
-  const longerLength = longerString.length;
-  if (longerLength === 0) {
-    similarityToReturn = 100;
-  } else {
-    similarityToReturn = Math.round((longerLength - levenshtein(longerString, shorterString)) / longerLength * 100);
+}));
+const buttonColours = [
+  "default",
+  "primary",
+  "secondary",
+  "danger",
+  "blue"
+];
+const buttonSizes = [
+  "small",
+  "medium",
+  "large"
+];
+const _hoisted_1$n = { key: 0 };
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  props: {
+    size: { default: "medium" },
+    hover: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["cl-border cl-border-transparent cl-overflow-hidden cl-relative cl-rounded-md cl-shadow-lg cl-transition-all", {
+          "cl-cursor-pointer hover:cl-shadow-xl hover:cl-border-grey-0": __props.hover
+        }])
+      }, [
+        _ctx.$slots.image ? (openBlock(), createElementBlock("div", _hoisted_1$n, [
+          renderSlot(_ctx.$slots, "image")
+        ])) : createCommentVNode("", true),
+        _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(["cl-border-grey-2 cl-font-normal", {
+            "cl-p-2 cl-text-2xl cl-leading-8": __props.size === "small",
+            "cl-p-4 cl-text-3xl cl-leading-9": __props.size === "medium",
+            "cl-p-6 cl-text-4xl cl-leading-10": __props.size === "large",
+            "cl-border-t": _ctx.$slots.image
+          }])
+        }, [
+          renderSlot(_ctx.$slots, "title")
+        ], 2)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(["cl-border-grey-2", {
+            "cl-p-2": __props.size === "small",
+            "cl-p-4": __props.size === "medium",
+            "cl-p-6": __props.size === "large",
+            "cl-border-t": _ctx.$slots.image || _ctx.$slots.title
+          }])
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2),
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: normalizeClass(["cl-border-grey-2 cl-border-t", {
+            "cl-p-2": __props.size === "small",
+            "cl-p-4": __props.size === "medium",
+            "cl-p-6": __props.size === "large"
+          }])
+        }, [
+          renderSlot(_ctx.$slots, "footer")
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
   }
-  return similarityToReturn;
-};
-String.prototype.trimChar = function(character) {
-  return this.trimStartChar(character).trimEndChar(character);
-};
-String.prototype.trimStartChar = function(character) {
-  return character !== "" && this.startsWith(character) ? this.slice(1) : this;
-};
-String.prototype.trimEndChar = function(character) {
-  return character !== "" && this.endsWith(character) ? this.slice(0, -1) : this;
-};
-String.prototype.trimToLength = function(length, addEllipsis = false) {
-  const trimLength = this.length < length ? this.length : length;
-  return addEllipsis && trimLength >= 4 && trimLength < this.length ? `${this.slice(0, Math.max(trimLength - 3, 1))}...` : this.slice(0, Math.max(trimLength, 1));
-};
-String.prototype.firstCharToUpperCase = function(locale) {
-  return `${this.charAt(0).toLocaleUpperCase(locale)}${this.slice(1)}`;
-};
-String.prototype.firstCharToLowerCase = function(locale) {
-  return `${this.charAt(0).toLocaleLowerCase(locale)}${this.slice(1)}`;
-};
-String.prototype.removeWhitespace = function() {
-  return this.replace(/\s/g, "");
-};
-String.prototype.removeNonAlphanumeric = function() {
-  return this.replace(/[^a-zA-Z0-9]/g, "");
-};
-String.prototype.removeNonAlphabetic = function() {
-  return this.replace(/[^a-zA-Z]/g, "");
-};
-String.prototype.removeNonNumeric = function() {
-  return this.replace(/[^0-9]/g, "");
-};
-String.prototype.replacePlaceholders = function(...args) {
-  let i = 0;
-  return this.replace(/{\d+}/g, () => typeof args[i] !== "undefined" ? args[i++] : "");
-};
-String.prototype.camelCaseToKebabCase = function(lowerCase = true, locale) {
-  return arrayToKebabCase(camelCaseToArray(this), lowerCase, locale);
-};
-String.prototype.camelCaseToPascalCase = function(locale) {
-  return this.firstCharToUpperCase(locale);
-};
-String.prototype.camelCaseToSentenceCase = function(locale) {
-  return arrayToSentenceCase(camelCaseToArray(this), locale);
-};
-String.prototype.camelCaseToSnakeCase = function(lowerCase = true, locale) {
-  return this.camelCaseToKebabCase().kebabCaseToSnakeCase(lowerCase, locale);
-};
-String.prototype.camelCaseToTitleCase = function(locale) {
-  return arrayToTitleCase(camelCaseToArray(this), locale);
-};
-String.prototype.kebabCaseToCamelCase = function(locale) {
-  return arrayToCamelCase(kebabCaseToArray(this), locale);
-};
-String.prototype.kebabCaseToPascalCase = function(locale) {
-  return this.kebabCaseToCamelCase().camelCaseToPascalCase(locale);
-};
-String.prototype.kebabCaseToSentenceCase = function(locale) {
-  return arrayToSentenceCase(kebabCaseToArray(this), locale);
-};
-String.prototype.kebabCaseToSnakeCase = function(lowerCase = true, locale) {
-  const result = this.replace(/-/g, "_");
-  return lowerCase ? result.toLocaleLowerCase(locale) : result.toLocaleUpperCase(locale);
-};
-String.prototype.kebabCaseToTitleCase = function(locale) {
-  return arrayToTitleCase(kebabCaseToArray(this), locale);
-};
-String.prototype.pascalCaseToCamelCase = function(locale) {
-  return arrayToCamelCase(pascalCaseToArray(this), locale);
-};
-String.prototype.pascalCaseToKebabCase = function(lowerCase = true, locale) {
-  return arrayToKebabCase(pascalCaseToArray(this), lowerCase, locale);
-};
-String.prototype.pascalCaseToSentenceCase = function(locale) {
-  return arrayToSentenceCase(pascalCaseToArray(this), locale);
-};
-String.prototype.pascalCaseToSnakeCase = function(lowerCase = true, locale) {
-  return this.pascalCaseToKebabCase().kebabCaseToSnakeCase(lowerCase, locale);
-};
-String.prototype.pascalCaseToTitleCase = function(locale) {
-  return arrayToTitleCase(pascalCaseToArray(this), locale);
-};
-String.prototype.sentenceCaseToCamelCase = function(locale) {
-  return arrayToCamelCase(sentenceCaseToArray(this), locale);
-};
-String.prototype.sentenceCaseToKebabCase = function(lowerCase = true, locale) {
-  return arrayToKebabCase(sentenceCaseToArray(this), lowerCase, locale);
-};
-String.prototype.sentenceCaseToPascalCase = function(locale) {
-  return this.sentenceCaseToCamelCase().camelCaseToPascalCase(locale);
-};
-String.prototype.sentenceCaseToSnakeCase = function(lowerCase = true, locale) {
-  return this.sentenceCaseToKebabCase().kebabCaseToSnakeCase(lowerCase, locale);
-};
-String.prototype.sentenceCaseToTitleCase = function(locale) {
-  return arrayToTitleCase(sentenceCaseToArray(this), locale);
-};
-String.prototype.snakeCaseToCamelCase = function(locale) {
-  return arrayToCamelCase(snakeCaseToArray(this), locale);
-};
-String.prototype.snakeCaseToKebabCase = function(lowerCase = true, locale) {
-  const result = this.replace(/_/g, "-");
-  return lowerCase ? result.toLocaleLowerCase(locale) : result.toLocaleUpperCase(locale);
-};
-String.prototype.snakeCaseToPascalCase = function(locale) {
-  return this.snakeCaseToCamelCase().camelCaseToPascalCase(locale);
-};
-String.prototype.snakeCaseToSentenceCase = function(locale) {
-  return arrayToSentenceCase(snakeCaseToArray(this), locale);
-};
-String.prototype.snakeCaseToTitleCase = function(locale) {
-  return arrayToTitleCase(snakeCaseToArray(this), locale);
-};
-String.prototype.titleCaseToCamelCase = function(locale) {
-  return arrayToCamelCase(titleCaseToArray(this), locale);
-};
-String.prototype.titleCaseToKebabCase = function(lowerCase = true, locale) {
-  return arrayToKebabCase(titleCaseToArray(this), lowerCase, locale);
-};
-String.prototype.titleCaseToPascalCase = function(locale) {
-  return this.titleCaseToCamelCase().camelCaseToPascalCase(locale);
-};
-String.prototype.titleCaseToSentenceCase = function(locale) {
-  return arrayToSentenceCase(titleCaseToArray(this), locale);
-};
-String.prototype.titleCaseToSnakeCase = function(lowerCase = true, locale) {
-  return this.titleCaseToKebabCase().kebabCaseToSnakeCase(lowerCase, locale);
-};
-String.prototype.toDateFromTime = function() {
-  return new Date(`${new Date().toISOString().substr(0, 11)}${this}`);
-};
+});
+const cardSizes = [
+  "small",
+  "medium",
+  "large"
+];
 var NumberFormat;
 (function(NumberFormat2) {
   NumberFormat2["CURRENCY"] = "currency";
@@ -502,8 +442,7 @@ const messages = {
       login: "Login",
       email: "Email Address",
       password: "Password",
-      validEmail: "Username is a valid email address.",
-      invalidEmail: "Username must be a valid email address."
+      validEmail: "Username is a valid email address."
     },
     slider: {
       invalidProps: "The current combination of props is invalid. Please confirm the values provided are correct."
@@ -639,12 +578,12 @@ function validateMinValue(minimumValue, typeOfValue, valueName, actualValue) {
           break;
         case "datetime":
           isValid = actualValue >= new Date(minimumValue).getTime();
-          validatedState = getValidatedInputState(isValid, t("input.afterOrEqualToValue", { label: valueName, min: new Date(minimumValue).toLocaleStringWithoutMilliseconds(locale) }));
+          validatedState = getValidatedInputState(isValid, t("input.afterOrEqualToValue", { label: valueName, min: i18n.global.d(new Date(minimumValue), DateFormat.DATETIME, locale != null ? locale : i18n.global.locale.value) }));
           break;
         case "time":
           timeValue = minimumValue.toDateFromTime();
           isValid = actualValue >= timeValue;
-          validatedState = getValidatedInputState(isValid, t("input.afterOrEqualToValue", { label: valueName, min: new Date(timeValue).toLocaleTimeStringWithoutMilliseconds(locale) }));
+          validatedState = getValidatedInputState(isValid, t("input.afterOrEqualToValue", { label: valueName, min: i18n.global.d(new Date(timeValue), DateFormat.TIME, locale != null ? locale : i18n.global.locale.value) }));
           break;
         default:
           validatedState.valid = true;
@@ -689,12 +628,12 @@ function validateMaxValue(maximumValue, typeOfValue, valueName, actualValue) {
           break;
         case "datetime":
           isValid = actualValue <= new Date(maximumValue).getTime();
-          validatedState = getValidatedInputState(isValid, t("input.beforeOrEqualToValue", { label: valueName, max: new Date(maximumValue).toLocaleStringWithoutMilliseconds(locale) }));
+          validatedState = getValidatedInputState(isValid, t("input.afterOrEqualToValue", { label: valueName, min: i18n.global.d(new Date(maximumValue), DateFormat.DATETIME, locale != null ? locale : i18n.global.locale.value) }));
           break;
         case "time":
           timeValue = maximumValue.toDateFromTime();
           isValid = actualValue <= timeValue;
-          validatedState = getValidatedInputState(isValid, t("input.beforeOrEqualToValue", { label: valueName, max: new Date(timeValue).toLocaleTimeStringWithoutMilliseconds(locale) }));
+          validatedState = getValidatedInputState(isValid, t("input.afterOrEqualToValue", { label: valueName, min: i18n.global.d(new Date(timeValue), DateFormat.TIME, locale != null ? locale : i18n.global.locale.value) }));
           break;
         default:
           validatedState.valid = true;
@@ -726,157 +665,6 @@ function getValidatedInputState(validationCheck, message) {
   };
   return validation;
 }
-const notifications = ref([]);
-function showNotification(notification) {
-  const newNotification = __spreadValues({
-    id: generateStringId()
-  }, notification);
-  notifications.value.push(newNotification);
-  setTimeout(() => removeNotification(newNotification), notification.duration);
-}
-function removeNotification(notification) {
-  notifications.value = notifications.value.filter((n) => n.id !== notification.id);
-}
-const _hoisted_1$r = ["onClick"];
-const _hoisted_2$m = { class: "cl-flex-1 cl-overflow-ellipsis cl-select-none cl-w-64" };
-const __default__$4 = {
-  inheritAttrs: false
-};
-function setup$4(__props) {
-  return (_ctx, _cache) => {
-    const _component_icon = resolveComponent("icon");
-    return openBlock(), createBlock(Teleport, { to: __props.container }, [
-      createElementVNode("div", {
-        class: normalizeClass(["cl-fixed cl-w-80 cl-z-40", {
-          "cl-top-5 cl-left-5": __props.position === "top-left",
-          "cl-top-5 cl-left-1/2": __props.position === "top-centre",
-          "cl-top-5 cl-right-5": __props.position === "top-right",
-          "cl-bottom-5 cl-left-5": __props.position === "bottom-left",
-          "cl-bottom-5 cl-left-1/2": __props.position === "bottom-centre",
-          "cl-bottom-5 cl-right-5": __props.position === "bottom-right"
-        }])
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifications), (notification, index) => {
-          return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
-            key: index,
-            class: ["cl-break-words cl-cursor-pointer cl-flex cl-font-semibold cl-group cl-mb-2 cl-overflow-hidden cl-p-4 cl-rounded cl-shadow-lg cl-text-sm", {
-              "cl-bg-white": notification.colour === "default",
-              "cl-bg-primary-default": notification.colour === "primary",
-              "cl-bg-secondary-default": notification.colour === "secondary",
-              "cl-bg-danger-default": notification.colour === "danger",
-              "cl-bg-warning-default": notification.colour === "warning"
-            }],
-            onClick: ($event) => unref(removeNotification)(notification)
-          }), [
-            createElementVNode("span", _hoisted_2$m, toDisplayString(notification.message), 1),
-            createVNode(_component_icon, {
-              class: "cl-inline-block cl-opacity-0 cl-transition-opacity group-hover:cl-opacity-100",
-              icon: "ph:x",
-              size: 16,
-              weight: "bold"
-            })
-          ], 16, _hoisted_1$r);
-        }), 128))
-      ], 2)
-    ], 8, ["to"]);
-  };
-}
-const _sfc_main$s = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
-  props: {
-    container: { default: "body" },
-    position: { default: "top-right" }
-  },
-  setup: setup$4
-}));
-const _hoisted_1$q = { class: "cl-absolute cl-flex cl-flex-wrap cl-h-screen cl-max-h-screen cl-max-w-full cl-min-h-screen cl-min-w-full cl-w-full" };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  props: {
-    removePadding: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$s),
-        createElementVNode("div", _hoisted_1$q, [
-          renderSlot(_ctx.$slots, "header"),
-          createElementVNode("div", {
-            class: normalizeClass(["cl-content-start cl-flex cl-flex-nowrap cl-items-stretch cl-max-h-screen cl-relative cl-w-full", {
-              "cl-pt-20": _ctx.$slots.header
-            }])
-          }, [
-            renderSlot(_ctx.$slots, "navigation"),
-            createElementVNode("div", {
-              class: normalizeClass(["cl-flex-grow cl-max-h-full cl-overflow-x-hidden cl-overflow-y-auto cl-w-auto", {
-                "md:cl-p-8 cl-p-2": !__props.removePadding
-              }])
-            }, [
-              renderSlot(_ctx.$slots, "default")
-            ], 2)
-          ], 2)
-        ])
-      ], 64);
-    };
-  }
-});
-var clUiLoadingSpinner_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$q = {};
-const _hoisted_1$p = { class: "loading-spinner" };
-function _sfc_render$4(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$p);
-}
-var ClUiLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$4], ["__scopeId", "data-v-60d7cfd0"]]);
-const _hoisted_1$o = ["disabled"];
-const __default__$3 = {
-  inheritAttrs: false
-};
-function setup$3(__props) {
-  return (_ctx, _cache) => {
-    return openBlock(), createElementBlock(Fragment, null, [
-      withDirectives(createVNode(ClUiLoadingSpinner, { class: "cl-absolute" }, null, 512), [
-        [vShow, __props.loading]
-      ]),
-      withDirectives(createElementVNode("button", mergeProps(_ctx.$attrs, {
-        class: ["cl-align-middle cl-border cl-font-semibold cl-inline-block cl-overflow-visible cl-rounded cl-select-none cl-shadow cl-text-center cl-transition-colors", {
-          "cl-leading-8 cl-px-4 cl-text-sm": __props.size === "small",
-          "cl-leading-10 cl-px-8 cl-text-sm": __props.size === "medium",
-          "cl-leading-10 cl-px-10 cl-py-2": __props.size === "large",
-          "cl-bg-white cl-border-grey-0 hover:cl-border-grey-2 cl-text-secondary": __props.colour === "default",
-          "cl-border-primary-default cl-bg-primary-default cl-text-white hover:cl-bg-primary-light hover:cl-border-primary-light": __props.colour === "primary",
-          "cl-border-secondary-default cl-bg-secondary-default cl-text-white hover:cl-bg-secondary-light hover:cl-border-secondary-light": __props.colour === "secondary",
-          "cl-border-danger-default cl-bg-danger-default cl-text-white hover:cl-bg-danger-dark hover:cl-border-danger-dark": __props.colour === "danger",
-          "cl-border-link-default cl-bg-link-default cl-text-white hover:cl-bg-link-light hover:cl-border-link-light": __props.colour === "blue",
-          "!cl-border-grey-3 !cl-bg-grey-3 cl-text-grey-0 hover:!cl-bg-grey-3 hover:!cl-border-grey-3 cl-cursor-default": __props.disabled
-        }],
-        disabled: __props.disabled
-      }), [
-        renderSlot(_ctx.$slots, "default")
-      ], 16, _hoisted_1$o), [
-        [vShow, !__props.loading]
-      ])
-    ], 64);
-  };
-}
-const _sfc_main$p = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
-  props: {
-    colour: { default: "default" },
-    size: { default: "medium" },
-    loading: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false }
-  },
-  setup: setup$3
-}));
-const buttonColours = [
-  "default",
-  "primary",
-  "secondary",
-  "danger",
-  "blue"
-];
-const buttonSizes = [
-  "small",
-  "medium",
-  "large"
-];
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var de = { exports: {} };
 (function(module, exports) {
@@ -1312,7 +1100,7 @@ function generateFixedDate() {
   return new Date(`${FixedDate.YEAR}-${FixedDate.MONTH}-${FixedDate.DAY}T${FixedDate.HOUR}:${FixedDate.MINUTE}`);
 }
 function replaceDateWithPlaceholders(date, hourPlaceholder, yearPlaceholder) {
-  return date.replace(FixedDate.YEAR, yearPlaceholder).replace(FixedDate.HOUR, hourPlaceholder).replace(FixedDate.MONTH, "m").replace(FixedDate.MONTH_SHORT, "n").replace(FixedDate.DAY, "d").replace(FixedDate.DAY_SHORT, "j").replace(FixedDate.MINUTE, "i").replace(FixedDate.SUFFIX, "K").replace(",", "");
+  return date.replace(FixedDate.YEAR, yearPlaceholder).replace(FixedDate.HOUR, hourPlaceholder).replace(FixedDate.MONTH, "m").replace(FixedDate.MONTH_SHORT, "n").replace(FixedDate.DAY, "d").replace(FixedDate.DAY_SHORT, "j").replace(FixedDate.MINUTE, "i").replace(FixedDate.SUFFIX, "K");
 }
 function getLocale(locale) {
   let result;
@@ -1366,11 +1154,11 @@ function getFormattedTimeForMinMax(date) {
   return formatted;
 }
 var clUiCalendar_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1$n = ["placeholder", "disabled"];
-const _hoisted_2$l = { class: "cl-absolute cl-bg-white cl-flex cl-right-2 cl-text-grey-4 cl-top-3" };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _hoisted_1$m = ["placeholder", "disabled"];
+const _hoisted_2$l = { class: "cl-absolute cl-bg-white cl-flex cl-right-2 cl-text-grey-4 cl-top-3.5" };
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   props: {
-    date: { default: () => null },
+    date: { default: null },
     datePlaceholder: { default: "Select date." },
     dateTimePlaceholder: { default: "Select date & time." },
     timePlaceholder: { default: "Select time." },
@@ -1547,21 +1335,16 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
       const _component_icon = resolveComponent("icon");
       return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, { class: "cl-relative" }), [
         createElementVNode("input", mergeProps({
-          ref: (_value, _refs) => {
-            _refs["element"] = _value;
-            element.value = _value;
-          }
+          ref_key: "element",
+          ref: element
         }, _ctx.$attrs, {
-          class: ["!cl-text-sm", {
-            "!cl-pr-12": __props.date !== null,
-            "!cl-pr-8": __props.date === null
-          }],
+          class: ["!cl-text-sm cl-border-grey-1 cl-rounded-lg focus:cl-border-blue-light focus:cl-ring-0", { "cl-bg-off-white": __props.disabled }],
           type: "text",
           placeholder: unref(placeholder),
           disabled: __props.disabled
-        }), null, 16, _hoisted_1$n),
+        }), null, 16, _hoisted_1$m),
         withDirectives(createVNode(_component_icon, {
-          class: normalizeClass(["cl-absolute cl-bg-white cl-right-2 cl-text-grey-4 cl-top-3", {
+          class: normalizeClass(["cl-absolute cl-bg-white cl-right-2 cl-text-grey-4 cl-top-3.5", {
             "!cl-bg-off-white": __props.disabled
           }]),
           icon: "ph:calendar",
@@ -1571,7 +1354,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
           [vShow, (__props.date === null || __props.disabled) && __props.type !== "time"]
         ]),
         withDirectives(createVNode(_component_icon, {
-          class: normalizeClass(["cl-absolute cl-bg-white cl-right-2 cl-text-grey-4 cl-top-3", {
+          class: normalizeClass(["cl-absolute cl-bg-white cl-right-2 cl-text-grey-4 cl-top-3.5", {
             "!cl-bg-off-white": __props.disabled
           }]),
           icon: "ph-clock",
@@ -1605,153 +1388,599 @@ const calendarTypes = [
   "datetime",
   "time"
 ];
-const _hoisted_1$m = { key: 0 };
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+var clUiSlider_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _hoisted_1$l = { class: "cl-flex cl-flex-wrap cl-items-center" };
+const _hoisted_2$k = { class: "cl-flex cl-flex-1 cl-flex-wrap cl-items-center cl-mb-2 cl-mt-3 cl-relative md:cl-mt-0" };
+const _hoisted_3$g = { class: "cl-absolute cl-bg-grey-0 cl-leading-6 cl-ml-0 cl-px-3 cl-rounded-full cl-text-center cl-text-xs cl-top-full" };
+const _hoisted_4$c = {
+  key: 0,
+  class: "cl-w-full"
+};
+const _hoisted_5$9 = ["min", "max", "step", "disabled"];
+const _hoisted_6$7 = { class: "cl-absolute cl-bg-grey-0 cl-leading-6 cl-ml-2 cl-px-3 cl-right-0 cl-rounded-full cl-text-center cl-text-xs cl-top-full" };
+const _hoisted_7$7 = {
+  key: 1,
+  class: "emphasis-danger text-sm w-full"
+};
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   props: {
-    size: { default: "medium" },
-    hover: { type: Boolean, default: false }
+    value: null,
+    min: null,
+    max: null,
+    step: { default: 1 },
+    enforceStep: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    showNumericInput: { type: Boolean, default: true }
   },
-  setup(__props) {
+  emits: {
+    "update:value": null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const { n, t: t2 } = useI18n();
+    const { debounce } = useDebouncer();
+    const numericInputValue = ref(props.value);
+    const currentValue = computed({
+      get: () => props.value,
+      set: (value) => emit("update:value", value)
+    });
+    const colour = computed(() => props.disabled ? "rgba(153, 153, 153, 0.8)" : "#9acd32");
+    const percentage = computed(() => {
+      let value = (currentValue.value - props.min) / (props.max - props.min) * 100;
+      if (value < 35 && value > 0) {
+        if (value < 20) {
+          value += 0.5;
+        } else {
+          value += 0.25;
+        }
+      } else if (value > 65 && value < 100) {
+        if (value > 80) {
+          value -= 0.5;
+        } else {
+          value -= 0.25;
+        }
+      }
+      return value;
+    });
+    const validProps = computed(() => props.min <= props.max && props.step > 0);
+    function updateCurrentValue(target, forceUpdate) {
+      var _a;
+      const inputValue = (_a = target == null ? void 0 : target.value) != null ? _a : "";
+      const value = Math.max(Math.min(parseFloat(inputValue) || props.min, props.max), props.min);
+      currentValue.value = props.enforceStep ? Math.ceil(value / props.step) * props.step : value;
+      nextTick(() => forceUpdate());
+    }
+    watch(() => props.value, () => numericInputValue.value = props.value);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["cl-border cl-border-transparent cl-overflow-hidden cl-relative cl-rounded-md cl-shadow-lg cl-transition-all", {
-          "cl-cursor-pointer hover:cl-shadow-xl hover:cl-border-grey-0": __props.hover
-        }])
-      }, [
-        _ctx.$slots.image ? (openBlock(), createElementBlock("div", _hoisted_1$m, [
-          renderSlot(_ctx.$slots, "image")
-        ])) : createCommentVNode("", true),
-        _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: normalizeClass(["cl-border-grey-2 cl-font-normal", {
-            "cl-p-2 cl-text-2xl cl-leading-8": __props.size === "small",
-            "cl-p-4 cl-text-3xl cl-leading-9": __props.size === "medium",
-            "cl-p-6 cl-text-4xl cl-leading-10": __props.size === "large",
-            "cl-border-t": _ctx.$slots.image
-          }])
-        }, [
-          renderSlot(_ctx.$slots, "title")
-        ], 2)) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass(["cl-border-grey-2", {
-            "cl-p-2": __props.size === "small",
-            "cl-p-4": __props.size === "medium",
-            "cl-p-6": __props.size === "large",
-            "cl-border-t": _ctx.$slots.image || _ctx.$slots.title
-          }])
-        }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 2),
-        _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: normalizeClass(["cl-border-grey-2 cl-border-t", {
-            "cl-p-2": __props.size === "small",
-            "cl-p-4": __props.size === "medium",
-            "cl-p-6": __props.size === "large"
-          }])
-        }, [
-          renderSlot(_ctx.$slots, "footer")
-        ], 2)) : createCommentVNode("", true)
-      ], 2);
+      const _component_cl_ui_input = resolveComponent("cl-ui-input");
+      return unref(validProps) ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)), [
+        withDirectives(createElementVNode("div", { class: "cl-bg-transparent cl-relative cl-text-center cl-text-sm" }, toDisplayString(unref(currentValue)), 513), [
+          [vShow, !__props.showNumericInput]
+        ]),
+        createElementVNode("div", _hoisted_1$l, [
+          withDirectives(createVNode(_component_cl_ui_input, {
+            modelValue: numericInputValue.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => numericInputValue.value = $event),
+            class: "!cl-text-sm md:!cl-w-auto",
+            "input-type": "number",
+            min: __props.min,
+            max: __props.max,
+            step: __props.step,
+            disabled: __props.disabled,
+            onInput: _cache[1] || (_cache[1] = ($event) => unref(debounce)(updateCurrentValue, $event.target, _ctx.$forceUpdate))
+          }, null, 8, ["modelValue", "min", "max", "step", "disabled"]), [
+            [vShow, __props.showNumericInput]
+          ]),
+          createElementVNode("div", _hoisted_2$k, [
+            createElementVNode("span", _hoisted_3$g, toDisplayString(unref(n)(__props.min, Number.isInteger(__props.min) ? unref(NumberFormat).INTEGER : unref(NumberFormat).DECIMAL)), 1),
+            typeof unref(currentValue) === "number" ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(currentValue) ? currentValue.value = $event : null),
+                class: "cl-align-middle cl-appearance-none cl-bg-gradient-to-r cl-border cl-border-grey-2 cl-delay-500 cl-ease-in cl-flex-1 cl-h-5 cl-mb-2 cl-outline-none cl-rounded-full cl-transition-colors cl-w-full",
+                style: normalizeStyle({
+                  background: `linear-gradient(to right, ${unref(colour)} 0%, ${unref(colour)} ${unref(percentage)}%, white ${unref(percentage)}%, white 100%)`
+                }),
+                type: "range",
+                min: __props.min,
+                max: __props.max,
+                step: __props.step,
+                disabled: __props.disabled
+              }, null, 12, _hoisted_5$9), [
+                [
+                  vModelText,
+                  unref(currentValue),
+                  void 0,
+                  { number: true }
+                ]
+              ])
+            ])) : createCommentVNode("", true),
+            createElementVNode("span", _hoisted_6$7, toDisplayString(unref(n)(__props.max, Number.isInteger(__props.max) ? unref(NumberFormat).INTEGER : unref(NumberFormat).DECIMAL)), 1)
+          ])
+        ])
+      ], 16)) : (openBlock(), createElementBlock("div", _hoisted_7$7, toDisplayString(unref(t2)("slider.invalidProps")), 1));
     };
   }
 });
-const cardSizes = [
-  "small",
-  "medium",
-  "large"
-];
-const _hoisted_1$l = { class: "cl-align-items-center cl-bg-black cl-bg-opacity-40 cl-bottom-0 cl-fixed cl-flex cl-h-screen cl-justify-center cl-left-0 cl-right-0 cl-top-0 cl-w-full cl-z-40" };
-const _hoisted_2$k = ["onKeypress"];
-const _hoisted_3$g = { class: "cl-overflow-y-auto cl-p-2 cl-w-full" };
-const __default__$2 = {
-  inheritAttrs: false
-};
-function setup$2(__props) {
-  const props = __props;
-  const visible = ref(false);
-  function open() {
-    visible.value = true;
-    document.addEventListener("keydown", closeOnKeyPress);
+var clUiSlider = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-26895858"]]);
+function isInputText(type) {
+  let isText = false;
+  switch (type) {
+    case "email":
+    case "password":
+    case "search":
+    case "tel":
+    case "text":
+    case "url":
+      isText = true;
+      break;
+    default:
+      isText = false;
+      break;
   }
-  function close() {
-    if (!props.preventClose) {
-      visible.value = false;
-      document.removeEventListener("keydown", closeOnKeyPress);
-    }
+  return isText;
+}
+function isInputCalendarSupportedDate(type) {
+  let isSupported = false;
+  switch (type) {
+    case "date":
+    case "datetime":
+    case "time":
+      isSupported = true;
+      break;
+    default:
+      isSupported = false;
+      break;
   }
-  function closeOnKeyPress(event) {
-    if (event.key === "Escape") {
-      close();
+  return isSupported;
+}
+function isInputButton(type) {
+  return type === "button" || type === "submit" || type === "reset";
+}
+function getInputTypeAsCalendarType(type) {
+  let calendarType;
+  switch (type) {
+    case "datetime":
+      calendarType = calendarTypes[1];
+      break;
+    case "time":
+      calendarType = calendarTypes[2];
+      break;
+    case "date":
+    default:
+      calendarType = calendarTypes[0];
+      break;
+  }
+  return calendarType;
+}
+var clUiInput_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _hoisted_1$k = { class: "cl-align-top cl-border-none cl-inline-block cl-mb-4 cl-mr-4 cl-text-left" };
+const _hoisted_2$j = { class: "cl-flex cl-justify-between" };
+const _hoisted_3$f = { class: "cl-w-full" };
+const _hoisted_4$b = {
+  key: 0,
+  class: "cl-block cl-left-auto cl-relative cl-text-danger-default"
+};
+const _hoisted_5$8 = {
+  key: 1,
+  class: "cl-bg-danger-light cl-block cl-max-h-6 cl-mb-1 cl-ml-2 cl-px-2 cl-rounded-md cl-text-center cl-text-danger-default cl-text-xs cl-uppercase"
+};
+const _hoisted_6$6 = ["type", "disabled", "min", "max", "minlength", "maxlength", "step", "placeholder", "accept", "name", "autocomplete", "onBlur", "onMousewheel"];
+const _hoisted_7$6 = { class: "cl-relative" };
+const _hoisted_8$5 = {
+  key: 2,
+  class: "cl-h-[5.78rem] cl-pb-2 md:cl-h-20"
+};
+const _hoisted_9$5 = {
+  key: 0,
+  class: "cl-bg-primary-lighter cl-px-2 cl-rounded-md cl-text-center cl-text-secondary-light cl-text-xs cl-w-auto cl-whitespace-pre-line"
+};
+const _hoisted_10$5 = {
+  key: 1,
+  class: "cl-bg-danger-light cl-px-2 cl-rounded-md cl-text-center cl-text-danger-default cl-text-xs cl-w-auto cl-whitespace-pre-line"
+};
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  props: {
+    inputType: { default: "text" },
+    modelValue: { type: [String, Number, Boolean, Date, null], default: void 0 },
+    label: { default: "" },
+    isRequired: { type: Boolean, default: false },
+    customValidationFunction: { type: Function, default: void 0 },
+    onInputFunction: { type: Function, default: void 0 },
+    min: { default: -1e11 },
+    max: { default: 1e11 },
+    step: { default: 1 },
+    validateImmediately: { type: Boolean, default: false },
+    externalErrors: { default: () => [] },
+    disabled: { type: Boolean, default: false },
+    requiredText: { default: "" },
+    placeholderText: { default: "" },
+    fileExtensions: { default: "" },
+    group: { default: "" },
+    showLabel: { type: Boolean, default: true },
+    showArrows: { type: Boolean, default: true },
+    autocomplete: { default: "off" },
+    highlightWhenValid: { type: Boolean, default: false },
+    messageWhenValid: { default: "" },
+    inputSpecificClasses: { default: "" }
+  },
+  emits: {
+    "update:modelValue": null,
+    click: null,
+    focus: null,
+    input: null,
+    validated: null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const inputElement = ref(null);
+    const focused = ref(false);
+    const lostFocus = ref(false);
+    const showRequiredAsterisk = computed(getShowAsteriskOrRequired);
+    const placeholder = computed(() => props.placeholderText.trim() !== "" ? props.placeholderText : props.label);
+    const dateFlaggedAsOutOfRange = ref(false);
+    const { t: t2 } = useI18n();
+    const currentValue = computed({
+      get: () => props.modelValue,
+      set: (value) => onValueChanged(value)
+    });
+    const currentDateValue = computed({
+      get: () => props.modelValue,
+      set: (value) => updateDateValue(value)
+    });
+    const minAsString = computed(() => typeof props.min === "number" ? props.min.toString() : props.min);
+    const maxAsString = computed(() => typeof props.max === "number" ? props.max.toString() : props.max);
+    const minAsNumber = computed(() => typeof props.min === "number" ? props.min : parseFloat(props.min));
+    const maxAsNumber = computed(() => typeof props.max === "number" ? props.max : parseFloat(props.max));
+    const validMessage = computed(() => props.messageWhenValid.trim() !== "" ? props.messageWhenValid : "");
+    const isValid = ref(true);
+    const internalErrors = ref([]);
+    const errors = computed(() => {
+      var _a, _b, _c, _d;
+      return [
+        ...(_b = (_a = internalErrors.value) == null ? void 0 : _a.filter((e) => {
+          var _a2;
+          return ((_a2 = e == null ? void 0 : e.length) != null ? _a2 : 0) > 0;
+        })) != null ? _b : [],
+        ...(_d = (_c = props.externalErrors) == null ? void 0 : _c.filter((e) => {
+          var _a2;
+          return ((_a2 = e == null ? void 0 : e.length) != null ? _a2 : 0) > 0;
+        })) != null ? _d : []
+      ].join("\n");
+    });
+    function updateDateValue(value) {
+      updateAndValidateValue(value);
+      dateFlaggedAsOutOfRange.value = false;
+    }
+    function onValueChanged(value) {
+      if (props.onInputFunction !== void 0) {
+        value = props.onInputFunction(value);
+      }
+      updateAndValidateValue(value);
+    }
+    function updateAndValidateValue(value) {
+      const defaultSuccess = {
+        message: "",
+        valid: true
+      };
+      const validationPromises = [props.customValidationFunction === null || props.customValidationFunction === void 0 ? new Promise((resolve) => {
+        resolve(defaultSuccess);
+      }) : new Promise((resolve) => {
+        resolve(props.customValidationFunction(props.label, value));
+      })];
+      if (typeof value === "string" || typeof value === "number" || value instanceof Date) {
+        validationPromises.push(validateMinValue(props.min, props.inputType, props.label, value));
+        validationPromises.push(validateMaxValue(props.max, props.inputType, props.label, value));
+      }
+      if (props.isRequired) {
+        validationPromises.push(validateRequired(props.label, value));
+      }
+      if (props.inputType === "email" && typeof value === "string") {
+        validationPromises.push(validateEmail(props.label, value));
+      }
+      Promise.all(validationPromises).then((internalValidationResults) => {
+        const messages2 = [...internalValidationResults.map((e) => e.message)];
+        let invalid = internalValidationResults.some((e) => e.valid === false) || props.externalErrors.length > 0;
+        if (dateFlaggedAsOutOfRange.value) {
+          messages2.push(t2("input.dateOutOfRange"));
+          invalid = true;
+        }
+        if (invalid) {
+          internalErrors.value = messages2;
+          emit("validated", false, value);
+        } else {
+          internalErrors.value = [];
+          emit("validated", true, value);
+        }
+        isValid.value = !invalid;
+        emit("update:modelValue", value);
+      });
     }
+    function getStyle() {
+      let style = "";
+      if (props.inputType === "color" && currentValue.value) {
+        if (props.disabled) {
+          style = `background: #999999`;
+        } else {
+          style = `background: ${currentValue.value};`;
+        }
+      }
+      return style;
+    }
+    function emitClickIfButton(event) {
+      if (isInputButton(props.inputType)) {
+        event.preventDefault();
+        emit("click", event);
+      } else if (props.inputType === "checkbox") {
+        emit("click", event);
+      }
+    }
+    function incrementNumericValue() {
+      if (inputElement.value) {
+        inputElement.value.stepUp();
+        inputElement.value.focus();
+        onValueChanged(inputElement.value.valueAsNumber);
+        const inputEvent = {
+          target: inputElement.value
+        };
+        emit("input", inputEvent);
+      }
+    }
+    function decrementNumericValue() {
+      if (inputElement.value) {
+        inputElement.value.stepDown();
+        inputElement.value.focus();
+        onValueChanged(inputElement.value.valueAsNumber);
+        const inputEvent = {
+          target: inputElement.value
+        };
+        emit("input", inputEvent);
+      }
+    }
+    function toggleFocus(focus) {
+      focused.value = focus;
+    }
+    function onLostFocus() {
+      lostFocus.value = true;
+      toggleFocus(false);
+    }
+    function onMouseWheel(wheelEvent) {
+      wheelEvent.target.blur();
+    }
+    function getShowAsteriskOrRequired() {
+      var _a;
+      let asterisk = true;
+      const currentState = showRequiredAsterisk.value;
+      if (focused.value) {
+        asterisk = currentState;
+      } else if (lostFocus.value && ((_a = currentValue.value) == null ? void 0 : _a.toString().trim()) === "") {
+        asterisk = false;
+      }
+      return asterisk;
+    }
+    function onDateOutOfRange() {
+      dateFlaggedAsOutOfRange.value = true;
+    }
+    onMounted(() => {
+      if (props.validateImmediately) {
+        onValueChanged(props.modelValue);
+      }
+    });
+    watch(() => props.isRequired, () => onValueChanged(props.modelValue));
+    watch(() => props.externalErrors, () => updateAndValidateValue(currentValue.value));
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+        createElementVNode("div", {
+          onMouseenter: _cache[10] || (_cache[10] = ($event) => toggleFocus(true)),
+          onMouseleave: _cache[11] || (_cache[11] = ($event) => toggleFocus(false))
+        }, [
+          createElementVNode("div", _hoisted_2$j, [
+            createElementVNode("div", _hoisted_3$f, [
+              withDirectives(createElementVNode("label", { class: "cl-block cl-mb-1 cl-text-gray-400 cl-text-xs cl-tracking-widest cl-uppercase" }, toDisplayString(__props.label), 513), [
+                [vShow, __props.showLabel && __props.label !== ""]
+              ])
+            ]),
+            __props.isRequired && unref(showRequiredAsterisk) ? (openBlock(), createElementBlock("label", _hoisted_4$b, " * ")) : createCommentVNode("", true),
+            __props.isRequired && !unref(showRequiredAsterisk) ? (openBlock(), createElementBlock("label", _hoisted_5$8, toDisplayString(__props.requiredText), 1)) : createCommentVNode("", true)
+          ]),
+          __props.inputType !== "range" && !unref(isInputCalendarSupportedDate)(__props.inputType) ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
+            key: 0,
+            ref_key: "inputElement",
+            ref: inputElement,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(currentValue) ? currentValue.value = $event : null)
+          }, _ctx.$attrs, {
+            class: ["cl-block cl-border cl-duration-300 cl-h-full cl-mb-1 cl-transition cl-w-full focus:cl-outline-none", {
+              "hover:!cl-border-grey-3": __props.disabled === false && !unref(isInputButton)(__props.inputType),
+              "!cl-cursor-default": __props.disabled,
+              "!cl-border-danger-default": !isValid.value,
+              "!cl-border-primary-default": isValid.value && __props.highlightWhenValid,
+              "cl-border-grey-0 focus:cl-border-blue-light": isValid.value && !unref(isInputButton)(__props.inputType),
+              "!cl-p-2": __props.inputType === "checkbox" || __props.inputType === "radio",
+              "cl-p-3 cl-rounded-lg": !unref(isInputButton)(__props.inputType),
+              [`${__props.inputSpecificClasses}`]: __props.inputSpecificClasses !== ""
+            }],
+            style: getStyle(),
+            type: __props.inputType,
+            disabled: __props.disabled,
+            min: __props.min,
+            max: __props.max,
+            minlength: unref(isInputText)(__props.inputType) ? __props.min : 0,
+            maxlength: unref(isInputText)(__props.inputType) ? __props.max : 0,
+            step: __props.step,
+            placeholder: unref(placeholder),
+            accept: __props.fileExtensions,
+            name: __props.group,
+            autocomplete: __props.autocomplete,
+            onClick: _cache[1] || (_cache[1] = ($event) => emitClickIfButton($event)),
+            onFocus: _cache[2] || (_cache[2] = ($event) => emit("focus")),
+            onBlur: withModifiers(onLostFocus, ["self"]),
+            onMousewheel: withModifiers(onMouseWheel, ["prevent"]),
+            onInput: _cache[3] || (_cache[3] = ($event) => emit("input", $event))
+          }), null, 16, _hoisted_6$6)), [
+            [vModelDynamic, unref(currentValue)]
+          ]) : createCommentVNode("", true),
+          unref(isInputCalendarSupportedDate)(__props.inputType) ? (openBlock(), createBlock(unref(_sfc_main$n), mergeProps({ key: 1 }, _ctx.$attrs, {
+            ref_key: "inputElement",
+            ref: inputElement,
+            date: unref(currentDateValue),
+            "onUpdate:date": _cache[4] || (_cache[4] = ($event) => isRef(currentDateValue) ? currentDateValue.value = $event : null),
+            class: ["cl-block cl-duration-300 cl-h-fit cl-mb-1 cl-rounded-lg cl-text-sm cl-transition cl-w-full focus:cl-outline-none", {
+              "hover:cl-border-grey-3": !__props.disabled,
+              "!cl-border-danger-default": !isValid.value,
+              "!cl-border-primary-default": isValid.value && __props.highlightWhenValid
+            }],
+            disabled: __props.disabled,
+            type: unref(getInputTypeAsCalendarType)(__props.inputType),
+            min: unref(minAsString),
+            max: unref(maxAsString),
+            onBlur: withModifiers(onLostFocus, ["self"]),
+            onValueOutOfRange: onDateOutOfRange,
+            onFocus: _cache[5] || (_cache[5] = ($event) => emit("focus"))
+          }), null, 16, ["date", "class", "disabled", "type", "min", "max", "onBlur"])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_7$6, [
+            __props.inputType === "number" && !__props.disabled && __props.showArrows ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(["cl-absolute cl-duration-300 cl-right-1 cl-transition", {
+                "cl-opacity-0": !focused.value
+              }]),
+              style: { "bottom": "1.625rem" }
+            }, [
+              createVNode(_component_icon, {
+                icon: "ph:caret-up-bold",
+                class: "cl-bg-link-default cl-rounded-md cl-text-sm cl-text-white hover:cl-bg-link-light hover:cl-cursor-pointer",
+                onClick: incrementNumericValue,
+                onMousedown: _cache[6] || (_cache[6] = withModifiers(() => {
+                }, ["prevent"]))
+              })
+            ], 2)) : createCommentVNode("", true),
+            __props.inputType === "number" && !__props.disabled && __props.showArrows ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(["cl-absolute cl-bottom-2 cl-duration-300 cl-right-1 cl-transition", {
+                "cl-opacity-0": !focused.value
+              }])
+            }, [
+              createVNode(_component_icon, {
+                icon: "ph:caret-down-bold",
+                class: "cl-bg-link-default cl-rounded-md cl-text-sm cl-text-white hover:cl-bg-link-light hover:cl-cursor-pointer",
+                onClick: decrementNumericValue,
+                onMousedown: _cache[7] || (_cache[7] = withModifiers(() => {
+                }, ["prevent"]))
+              })
+            ], 2)) : createCommentVNode("", true)
+          ]),
+          __props.inputType === "range" && typeof unref(currentValue) === "number" ? (openBlock(), createElementBlock("div", _hoisted_8$5, [
+            createVNode(unref(clUiSlider), {
+              ref_key: "inputElement",
+              ref: inputElement,
+              value: unref(currentValue),
+              "onUpdate:value": _cache[8] || (_cache[8] = ($event) => isRef(currentValue) ? currentValue.value = $event : null),
+              min: unref(minAsNumber),
+              max: unref(maxAsNumber),
+              step: __props.step,
+              disabled: __props.disabled,
+              "show-numeric-input": false,
+              onBlur: withModifiers(onLostFocus, ["self"]),
+              onFocus: _cache[9] || (_cache[9] = ($event) => emit("focus"))
+            }, null, 8, ["value", "min", "max", "step", "disabled", "onBlur"])
+          ])) : createCommentVNode("", true)
+        ], 32),
+        isValid.value && unref(validMessage) ? (openBlock(), createElementBlock("div", _hoisted_9$5, toDisplayString(unref(validMessage)), 1)) : createCommentVNode("", true),
+        !isValid.value && unref(errors).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_10$5, toDisplayString(unref(errors)), 1)) : createCommentVNode("", true)
+      ]);
+    };
   }
-  return (_ctx, _cache) => {
-    const _component_icon = resolveComponent("icon");
-    return openBlock(), createElementBlock(Fragment, null, [
-      renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps({ open }))),
-      (openBlock(), createBlock(Teleport, { to: "body" }, [
-        createVNode(Transition, { name: "fade" }, {
-          default: withCtx(() => [
-            withDirectives(createElementVNode("div", _hoisted_1$l, [
-              createElementVNode("div", mergeProps(_ctx.$attrs, {
-                class: ["cl-bg-white cl-flex cl-flex-wrap cl-mx-0 cl-my-auto cl-overflow-y-auto cl-relative cl-rounded-lg cl-shadow-lg", {
-                  "lg:cl-w-2/12 cl-w-10/12": __props.size === "x-small",
-                  "cl-w-6/12": __props.size === "small",
-                  "cl-w-8/12": __props.size === "medium",
-                  "cl-w-10/12": __props.size === "large"
-                }]
-              }), [
-                withDirectives(createElementVNode("div", {
-                  class: normalizeClass(["cl-absolute cl-cursor-pointer cl-right-4 cl-top-4 cl-transition-colors cl-w-3", {
-                    "cl-text-white hover:cl-text-off-white": __props.headerColour === "secondary" || __props.headerColour === "primary",
-                    "cl-text-black hover:cl-text-grey-7": __props.headerColour === "white"
-                  }]),
-                  tabindex: 0,
-                  onKeypress: withKeys(close, ["enter"]),
-                  onClick: close
-                }, [
-                  createVNode(_component_icon, { icon: "ph:x" })
-                ], 42, _hoisted_2$k), [
-                  [vShow, !__props.preventClose]
-                ]),
-                createElementVNode("div", {
-                  class: normalizeClass(["cl-leading-[2.75rem] cl-min-h-12 cl-overflow-hidden cl-pl-3 cl-pr-8 cl-text-2xl cl-w-full", {
-                    "cl-border-b cl-border-grey-2": __props.headerColour === "white",
-                    "cl-bg-secondary-default cl-text-white": __props.headerColour === "secondary",
-                    "cl-bg-primary-default cl-text-white": __props.headerColour === "primary"
-                  }])
-                }, [
-                  renderSlot(_ctx.$slots, "title", normalizeProps(guardReactiveProps({ close })))
-                ], 2),
-                createElementVNode("div", _hoisted_3$g, [
-                  renderSlot(_ctx.$slots, "default")
-                ]),
-                renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({ close })))
-              ], 16)
-            ], 512), [
-              [vShow, visible.value]
-            ])
-          ]),
-          _: 3
-        })
-      ]))
-    ], 64);
-  };
-}
-const _sfc_main$m = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
+});
+var ClUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-438103cc"]]);
+const _hoisted_1$j = { class: "cl-align-items-center cl-bg-black cl-bg-opacity-40 cl-bottom-0 cl-fixed cl-flex cl-h-screen cl-justify-center cl-left-0 cl-right-0 cl-top-0 cl-w-full cl-z-40" };
+const _hoisted_2$i = ["onKeypress"];
+const _hoisted_3$e = { class: "cl-overflow-y-auto cl-p-2 cl-w-full" };
+const __default__$2 = {
+  inheritAttrs: false
+};
+const _sfc_main$k = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
   props: {
     headerColour: { default: "white" },
     preventClose: { type: Boolean, default: false },
     size: { default: "medium" }
   },
-  setup: setup$2
+  setup(__props) {
+    const props = __props;
+    const visible = ref(false);
+    function open() {
+      visible.value = true;
+      document.addEventListener("keydown", closeOnKeyPress);
+    }
+    function close() {
+      if (!props.preventClose) {
+        visible.value = false;
+        document.removeEventListener("keydown", closeOnKeyPress);
+      }
+    }
+    function closeOnKeyPress(event) {
+      if (event.key === "Escape") {
+        close();
+      }
+    }
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock(Fragment, null, [
+        renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps({ open }))),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createVNode(Transition, { name: "fade" }, {
+            default: withCtx(() => [
+              withDirectives(createElementVNode("div", _hoisted_1$j, [
+                createElementVNode("div", mergeProps(_ctx.$attrs, {
+                  class: ["cl-bg-white cl-flex cl-flex-wrap cl-mx-0 cl-my-auto cl-overflow-y-auto cl-relative cl-rounded-lg cl-shadow-lg", {
+                    "lg:cl-w-2/12 cl-w-10/12": __props.size === "x-small",
+                    "cl-w-6/12": __props.size === "small",
+                    "cl-w-8/12": __props.size === "medium",
+                    "cl-w-10/12": __props.size === "large"
+                  }]
+                }), [
+                  withDirectives(createElementVNode("div", {
+                    class: normalizeClass(["cl-absolute cl-cursor-pointer cl-right-4 cl-top-4 cl-transition-colors cl-w-3", {
+                      "cl-text-white hover:cl-text-off-white": __props.headerColour === "secondary" || __props.headerColour === "primary",
+                      "cl-text-black hover:cl-text-grey-7": __props.headerColour === "white"
+                    }]),
+                    tabindex: 0,
+                    onKeypress: withKeys(close, ["enter"]),
+                    onClick: close
+                  }, [
+                    createVNode(_component_icon, { icon: "ph:x" })
+                  ], 42, _hoisted_2$i), [
+                    [vShow, !__props.preventClose]
+                  ]),
+                  createElementVNode("div", {
+                    class: normalizeClass(["cl-leading-[2.75rem] cl-min-h-12 cl-overflow-hidden cl-pl-3 cl-pr-8 cl-text-2xl cl-w-full", {
+                      "cl-border-b cl-border-grey-2": __props.headerColour === "white",
+                      "cl-bg-secondary-default cl-text-white": __props.headerColour === "secondary",
+                      "cl-bg-primary-default cl-text-white": __props.headerColour === "primary"
+                    }])
+                  }, [
+                    renderSlot(_ctx.$slots, "title", normalizeProps(guardReactiveProps({ close })))
+                  ], 2),
+                  createElementVNode("div", _hoisted_3$e, [
+                    renderSlot(_ctx.$slots, "default")
+                  ]),
+                  renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({ close })))
+                ], 16)
+              ], 512), [
+                [vShow, visible.value]
+              ])
+            ]),
+            _: 3
+          })
+        ]))
+      ], 64);
+    };
+  }
 }));
-const _hoisted_1$k = { class: "cl-bg-grey-2 cl-border-b cl-border-grey-2 cl-border-t cl-flex cl-p-1" };
-const _hoisted_2$j = {
+const _hoisted_1$i = { class: "cl-bg-grey-2 cl-border-b cl-border-grey-2 cl-border-t cl-flex cl-p-1" };
+const _hoisted_2$h = {
   key: 0,
   class: "cl-w-1/2"
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   props: {
     showClearButton: { type: Boolean, default: false },
     text: { default: "" },
@@ -1763,8 +1992,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       const _component_icon = resolveComponent("icon");
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
-        __props.additionalText !== "" ? (openBlock(), createElementBlock("div", _hoisted_2$j, toDisplayString(__props.additionalText), 1)) : createCommentVNode("", true),
+      return openBlock(), createElementBlock("div", _hoisted_1$i, [
+        __props.additionalText !== "" ? (openBlock(), createElementBlock("div", _hoisted_2$h, toDisplayString(__props.additionalText), 1)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass({
             "cl-w-1/2": __props.additionalText !== "",
@@ -1786,17 +2015,17 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$j = {
+const _hoisted_1$h = {
   key: 0,
   class: "cl-w-1/2"
 };
-const _hoisted_2$i = { class: "cl-float-right cl-py-1.5" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _hoisted_2$g = { class: "cl-float-right cl-py-1.5" };
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   props: {
     isCreateNewOption: { type: Boolean, default: false },
     selectedIndex: { default: -1 },
     text: { default: "" },
-    option: { default: () => null },
+    option: { default: null },
     index: null
   },
   emits: {
@@ -1853,14 +2082,14 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         onMousemove: _cache[0] || (_cache[0] = ($event) => onHover(true)),
         onMouseleave: _cache[1] || (_cache[1] = ($event) => onHover(false))
       }, [
-        __props.option !== null && ((_a = __props.option) == null ? void 0 : _a.parentId) !== 0 && ((_b = __props.option) == null ? void 0 : _b.parentId) !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1$j, toDisplayString(unref(displayedParent)), 1)) : createCommentVNode("", true),
+        __props.option !== null && ((_a = __props.option) == null ? void 0 : _a.parentId) !== 0 && ((_b = __props.option) == null ? void 0 : _b.parentId) !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1$h, toDisplayString(unref(displayedParent)), 1)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass({
             "cl-w-1/2": unref(displayedParent) !== "",
             "cl-w-full": unref(displayedParent) === ""
           })
         }, toDisplayString(unref(displayedText)), 3),
-        withDirectives(createElementVNode("div", _hoisted_2$i, [
+        withDirectives(createElementVNode("div", _hoisted_2$g, [
           createVNode(_component_icon, {
             class: "cl-bg-primary-default cl-rounded-full cl-text-white",
             icon: "ph:plus-circle"
@@ -1872,11 +2101,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$i = ["onKeyup"];
-const _hoisted_2$h = { class: "cl-flex" };
-const _hoisted_3$f = ["placeholder"];
-const _hoisted_4$d = { key: 5 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _hoisted_1$g = ["onKeyup"];
+const _hoisted_2$f = { class: "cl-flex" };
+const _hoisted_3$d = { key: 5 };
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   props: {
     loading: { type: Boolean, default: false },
     objectType: null,
@@ -1903,7 +2131,6 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const currentSelection = ref(-1);
     const firstIndexInResults = computed(() => showAddNewOption.value ? -1 : 0);
     const container = ref();
-    const searchBox = ref();
     function search(keyboardEvent) {
       if (keyboardEvent === void 0 || (keyboardEvent == null ? void 0 : keyboardEvent.code.startsWith("Arrow")) === false && (keyboardEvent == null ? void 0 : keyboardEvent.code.startsWith("Control")) === false && (keyboardEvent == null ? void 0 : keyboardEvent.code.startsWith("Shift")) === false && (keyboardEvent == null ? void 0 : keyboardEvent.code.startsWith("Tab")) === false && (keyboardEvent == null ? void 0 : keyboardEvent.code) !== "Enter") {
         emit("search", searchText.value);
@@ -1983,8 +2210,8 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         searchText.value = "";
         search();
         nextTick(() => {
-          var _a;
-          return (_a = searchBox.value) == null ? void 0 : _a.focus();
+          var _a, _b;
+          return (_b = (_a = container.value) == null ? void 0 : _a.querySelector("input")) == null ? void 0 : _b.focus();
         });
       }
     }
@@ -2003,56 +2230,50 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       var _a;
       const _component_cl_ui_loading_spinner = resolveComponent("cl-ui-loading-spinner");
       return openBlock(), createElementBlock("div", {
-        ref: (_value, _refs) => {
-          _refs["container"] = _value;
-          container.value = _value;
-        },
-        class: "cl-bg-white cl-border cl-border-collapse cl-border-grey-0 cl-h-52 cl-overflow-y-auto cl-p-2 cl-text-sm",
+        ref_key: "container",
+        ref: container,
+        class: "cl-bg-white cl-border cl-border-collapse cl-border-grey-0 cl-h-52 cl-overflow-y-auto cl-p-2 cl-rounded cl-text-sm",
         onKeydown: [
           _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => onKeyboardArrowUp(unref(firstIndexInResults)), ["prevent", "stop"]), ["up"])),
           _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => onKeyboardArrowDown(unref(firstIndexInResults)), ["prevent", "stop"]), ["down"]))
         ],
         onKeyup: withKeys(withModifiers(onKeyboardEnter, ["prevent", "stop"]), ["enter"])
       }, [
-        createElementVNode("div", _hoisted_2$h, [
-          withDirectives(createElementVNode("input", {
-            ref: (_value, _refs) => {
-              _refs["searchBox"] = _value;
-              searchBox.value = _value;
-            },
+        createElementVNode("div", _hoisted_2$f, [
+          createVNode(ClUiInput, {
+            modelValue: searchText.value,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event),
-            type: "text",
-            placeholder: unref(t2)("comboBox.searchHint", { object: __props.objectType }),
+            class: "!cl-mr-0 cl-mb-1 cl-w-full",
+            "input-type": "text",
+            "placeholder-text": unref(t2)("comboBox.searchHint", { object: __props.objectType }),
             onKeyup: search,
             onBlur: hideDropdown
-          }, null, 40, _hoisted_3$f), [
-            [vModelText, searchText.value]
-          ]),
+          }, null, 8, ["modelValue", "placeholder-text"]),
           withDirectives(createVNode(_component_cl_ui_loading_spinner, { class: "cl-absolute cl-ml-2 cl-mt-11" }, null, 512), [
             [vShow, __props.loading]
           ])
         ]),
-        __props.currentObjectName !== "" ? (openBlock(), createBlock(_sfc_main$l, {
+        __props.currentObjectName !== "" ? (openBlock(), createBlock(_sfc_main$j, {
           key: 0,
           "show-clear-button": __props.canClearSelectedObject,
           text: __props.currentObjectName,
           onClearObject: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("clear-object"))
         }, null, 8, ["show-clear-button", "text"])) : createCommentVNode("", true),
-        __props.objectParentType !== "" && __props.results !== void 0 && __props.results.length > 0 && __props.errorMessage === "" ? (openBlock(), createBlock(_sfc_main$l, {
+        __props.objectParentType !== "" && __props.results !== void 0 && __props.results.length > 0 && __props.errorMessage === "" ? (openBlock(), createBlock(_sfc_main$j, {
           key: 1,
           text: __props.objectType,
           "additional-text": __props.objectParentType
         }, null, 8, ["text", "additional-text"])) : createCommentVNode("", true),
-        __props.results !== null && ((_a = __props.results) == null ? void 0 : _a.length) === 0 && searchText.value.trim() !== "" && __props.canCreateNewObject === false && __props.errorMessage === "" ? (openBlock(), createBlock(_sfc_main$l, {
+        __props.results !== null && ((_a = __props.results) == null ? void 0 : _a.length) === 0 && searchText.value.trim() !== "" && __props.canCreateNewObject === false && __props.errorMessage === "" ? (openBlock(), createBlock(_sfc_main$j, {
           key: 2,
-          text: unref(t2)("comboBox.noResults", { object: __props.objectType })
+          text: unref(t2)("comboBox.noResults", { value: searchText.value })
         }, null, 8, ["text"])) : createCommentVNode("", true),
-        __props.errorMessage !== "" ? (openBlock(), createBlock(_sfc_main$l, {
+        __props.errorMessage !== "" ? (openBlock(), createBlock(_sfc_main$j, {
           key: 3,
-          class: "!cl-bg-danger-light cl-text-danger-dark",
+          class: "!cl-bg-danger-light cl-border-danger-light cl-rounded cl-text-danger-dark",
           text: unref(t2)("comboBox.errorMessage", { error: __props.errorMessage })
         }, null, 8, ["text"])) : createCommentVNode("", true),
-        showAddNewOption.value ? (openBlock(), createBlock(_sfc_main$k, {
+        showAddNewOption.value ? (openBlock(), createBlock(_sfc_main$i, {
           key: 4,
           "is-create-new-option": true,
           text: unref(t2)("comboBox.addPrompt", { value: searchText.value, object: __props.objectType }),
@@ -2061,9 +2282,9 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           onCreateObject: createObject,
           onOptionHighlighted: updateSelectedObjectIndex
         }, null, 8, ["text", "selected-index"])) : createCommentVNode("", true),
-        __props.errorMessage === "" && __props.results !== null ? (openBlock(), createElementBlock("div", _hoisted_4$d, [
+        __props.errorMessage === "" && __props.results !== null ? (openBlock(), createElementBlock("div", _hoisted_3$d, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.results, (result, index) => {
-            return openBlock(), createBlock(_sfc_main$k, {
+            return openBlock(), createBlock(_sfc_main$i, {
               key: index,
               option: result,
               index,
@@ -2073,17 +2294,16 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
             }, null, 8, ["option", "index", "selected-index"]);
           }), 128))
         ])) : createCommentVNode("", true)
-      ], 40, _hoisted_1$i);
+      ], 40, _hoisted_1$g);
     };
   }
 });
-const _hoisted_1$h = { class: "cl-flex" };
-const _hoisted_2$g = ["placeholder", "disabled"];
-const _hoisted_3$e = { class: "cl-relative cl-right-20 cl-top-0.5" };
-const _hoisted_4$c = { class: "cl-absolute cl-flex cl-float-right cl-font-semibold cl-mt-2 cl-text-danger-default cl-text-sm" };
-const _hoisted_5$a = { class: "cl-mt-3" };
-const _hoisted_6$8 = { class: "cl-p-2 cl-text-right cl-w-full" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _hoisted_1$f = { class: "cl-flex" };
+const _hoisted_2$e = { class: "cl-relative cl-right-20 cl-top-0.5" };
+const _hoisted_3$c = { class: "cl-absolute cl-flex cl-float-right cl-font-semibold cl-mt-2 cl-text-danger-default cl-text-sm" };
+const _hoisted_4$a = { class: "cl-ml-4 cl-w-11/12" };
+const _hoisted_5$7 = { class: "cl-p-2 cl-text-right cl-w-full" };
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   props: {
     loading: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
@@ -2093,8 +2313,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     canCreateNewObject: { type: Boolean, default: false },
     canClearSelectedObject: { type: Boolean, default: true },
     errorMessage: { default: "" },
-    objectCreatedResponse: { default: () => null },
-    parentObjectCreatedResponse: { default: () => null },
+    objectCreatedResponse: { default: null },
+    parentObjectCreatedResponse: { default: null },
     results: { default: () => [] },
     parentResults: { default: () => [] },
     currentObject: null
@@ -2178,7 +2398,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       var _a, _b;
       if ((_a = props.objectCreatedResponse) == null ? void 0 : _a.error) {
         showNotification({
-          message: t2("comboBox.noResults", { name: objectToCreateValue.value, error: props.objectCreatedResponse.error }),
+          message: t2("comboBox.createFailed", { name: objectToCreateValue.value, error: props.objectCreatedResponse.error }),
           colour: "danger",
           duration: 1e4
         });
@@ -2198,7 +2418,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     function handleSuccessfulObjectCreation() {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i;
       showNotification({
-        message: t2("comboBox.noResults", { object: props.objectType, name: (_b = (_a = props.objectCreatedResponse) == null ? void 0 : _a.name) != null ? _b : "" }),
+        message: t2("comboBox.createSuccessful", { object: props.objectType, name: (_b = (_a = props.objectCreatedResponse) == null ? void 0 : _a.name) != null ? _b : "" }),
         colour: "primary",
         duration: 1e4
       });
@@ -2242,24 +2462,22 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       const _component_icon = resolveComponent("icon");
       const _component_cl_ui_combo_box = resolveComponent("cl-ui-combo-box", true);
       return openBlock(), createElementBlock("div", null, [
-        createElementVNode("div", _hoisted_1$h, [
-          withDirectives(createElementVNode("input", {
+        createElementVNode("div", _hoisted_1$f, [
+          createVNode(ClUiInput, {
+            modelValue: unref(currentText),
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(currentText) ? currentText.value = $event : null),
-            class: normalizeClass(["!cl-bg-transparent cl-z-10", {
+            class: normalizeClass(["!cl-bg-transparent !cl-mr-0 cl-mb-0 cl-rounded-r-none cl-w-full cl-z-10", {
               "cl-cursor-pointer": __props.disabled === false
             }]),
-            type: "text",
-            placeholder: unref(t2)("comboBox.emptyHintText", { object: __props.objectType }),
-            disabled: __props.disabled,
+            "input-type": "text",
+            "placeholder-text": unref(t2)("comboBox.emptyHintText", { object: __props.objectType }),
             onFocus: _cache[1] || (_cache[1] = ($event) => {
               toggleDropdown(true);
               _ctx.$emit("focus");
             })
-          }, null, 42, _hoisted_2$g), [
-            [vModelText, unref(currentText)]
-          ]),
-          withDirectives(createElementVNode("div", _hoisted_3$e, [
-            createElementVNode("div", _hoisted_4$c, [
+          }, null, 8, ["modelValue", "class", "placeholder-text"]),
+          withDirectives(createElementVNode("div", _hoisted_2$e, [
+            createElementVNode("div", _hoisted_3$c, [
               createTextVNode(toDisplayString(unref(t2)("comboBox.required")) + " ", 1),
               createVNode(_component_icon, {
                 class: "cl-ml-1 cl-mt-1",
@@ -2270,7 +2488,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             [vShow, __props.required && __props.disabled === false && __props.currentObject === null]
           ]),
           createElementVNode("div", {
-            class: normalizeClass(["cl-border cl-border-grey-1 cl-float-right cl-px-1 cl-py-2.5 cl-text-grey-3 cl-transition-colors cl-w-min hover:cl-bg-primary-default hover:cl-text-white", {
+            class: normalizeClass(["cl-border cl-border-grey-1 cl-float-right cl-h-10 cl-px-1 cl-py-2.5 cl-rounded cl-rounded-l-none cl-text-grey-3 cl-transition-colors cl-w-min hover:cl-bg-primary-default hover:cl-text-white", {
               "cl-bg-off-white cl-cursor-default hover:cl-bg-off-white hover:cl-text-grey-3": __props.disabled,
               "cl-cursor-pointer": __props.disabled === false
             }]),
@@ -2282,12 +2500,12 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             })
           ], 2)
         ]),
-        createVNode(_sfc_main$m, { size: "x-small" }, {
+        createVNode(_sfc_main$k, { size: "x-small" }, {
           title: withCtx(() => [
             createTextVNode(toDisplayString(unref(t2)("comboBox.createTitle", { object: __props.objectType })), 1)
           ]),
           trigger: withCtx(({ open }) => [
-            withDirectives(createVNode(_sfc_main$j, {
+            withDirectives(createVNode(_sfc_main$h, {
               "can-create-new-object": __props.canCreateNewObject,
               "can-clear-selected-object": __props.canClearSelectedObject,
               loading: __props.loading,
@@ -2307,7 +2525,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ])
           ]),
           footer: withCtx(({ close }) => [
-            createElementVNode("div", _hoisted_6$8, [
+            createElementVNode("div", _hoisted_5$7, [
               createVNode(_sfc_main$p, {
                 class: "cl-mr-4",
                 colour: "primary",
@@ -2336,28 +2554,29 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             ])
           ]),
           default: withCtx(() => [
-            __props.objectParentType ? (openBlock(), createBlock(_component_cl_ui_combo_box, {
-              key: 0,
-              "current-object": parentItem.value,
-              "onUpdate:current-object": _cache[4] || (_cache[4] = ($event) => parentItem.value = $event),
-              class: "cl-mt-3",
-              results: __props.parentResults,
-              loading: __props.loading,
-              "object-type": __props.objectParentType,
-              "object-created-response": __props.parentObjectCreatedResponse,
-              "can-create-new-object": __props.canCreateNewObject,
-              "can-clear-selected-object": __props.canClearSelectedObject,
-              "error-message": __props.errorMessage,
-              onSearch: searchParent,
-              onCreateObject: createParentObject
-            }, null, 8, ["current-object", "results", "loading", "object-type", "object-created-response", "can-create-new-object", "can-clear-selected-object", "error-message"])) : createCommentVNode("", true),
-            createElementVNode("label", _hoisted_5$a, toDisplayString(unref(t2)("comboBox.createProperty")), 1),
-            withDirectives(createElementVNode("input", {
-              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => objectToCreateValue.value = $event),
-              class: "cl-mb-2",
-              type: "text"
-            }, null, 512), [
-              [vModelText, objectToCreateValue.value]
+            createElementVNode("div", _hoisted_4$a, [
+              __props.objectParentType ? (openBlock(), createBlock(_component_cl_ui_combo_box, {
+                key: 0,
+                "current-object": parentItem.value,
+                "onUpdate:current-object": _cache[4] || (_cache[4] = ($event) => parentItem.value = $event),
+                class: "cl-mt-3",
+                results: __props.parentResults,
+                loading: __props.loading,
+                "object-type": __props.objectParentType,
+                "object-created-response": __props.parentObjectCreatedResponse,
+                "can-create-new-object": __props.canCreateNewObject,
+                "can-clear-selected-object": __props.canClearSelectedObject,
+                "error-message": __props.errorMessage,
+                onSearch: searchParent,
+                onCreateObject: createParentObject
+              }, null, 8, ["current-object", "results", "loading", "object-type", "object-created-response", "can-create-new-object", "can-clear-selected-object", "error-message"])) : createCommentVNode("", true),
+              createVNode(ClUiInput, {
+                modelValue: objectToCreateValue.value,
+                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => objectToCreateValue.value = $event),
+                label: unref(t2)("comboBox.createProperty"),
+                class: "cl-mb-2 cl-pt-2 cl-w-full",
+                "input-type": "text"
+              }, null, 8, ["modelValue", "label"])
             ])
           ]),
           _: 1
@@ -2372,125 +2591,48 @@ function isComboBoxItem(objectToTest) {
 function isComboBoxCreateRequest(objectToTest) {
   return typeof objectToTest.name === "string";
 }
-const _sfc_main$h = {};
-const _hoisted_1$g = { class: "cl-flex cl-flex-wrap cl-left-0 cl-mt-4 cl-w-full" };
-const _hoisted_2$f = {
+const _sfc_main$f = {};
+const _hoisted_1$e = { class: "cl-flex cl-flex-wrap cl-left-0 cl-mt-4 cl-w-full" };
+const _hoisted_2$d = {
   key: 0,
   class: "cl-w-full"
 };
-const _hoisted_3$d = {
+const _hoisted_3$b = {
   key: 1,
   class: "cl-leading-10 cl-text-sm cl-w-full"
 };
-const _hoisted_4$b = { class: "cl-float-left" };
-const _hoisted_5$9 = { class: "cl-float-right" };
+const _hoisted_4$9 = { class: "cl-float-left" };
+const _hoisted_5$6 = { class: "cl-float-right" };
 function _sfc_render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$g, [
-    _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2$f, [
+  return openBlock(), createElementBlock("div", _hoisted_1$e, [
+    _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
       renderSlot(_ctx.$slots, "default")
     ])) : createCommentVNode("", true),
-    _ctx.$slots.left || _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_3$d, [
-      createElementVNode("span", _hoisted_4$b, [
+    _ctx.$slots.left || _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_3$b, [
+      createElementVNode("span", _hoisted_4$9, [
         renderSlot(_ctx.$slots, "left")
       ]),
-      createElementVNode("span", _hoisted_5$9, [
+      createElementVNode("span", _hoisted_5$6, [
         renderSlot(_ctx.$slots, "right")
       ])
     ])) : createCommentVNode("", true)
   ]);
 }
-var clUiFooter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$3]]);
-const _hoisted_1$f = { class: "cl-mr-2 lg:cl-hidden" };
-const _hoisted_2$e = { class: "cl-mr-2 lg:cl-hidden" };
-const _hoisted_3$c = ["checked"];
-const _hoisted_4$a = {
+var clUiFooter = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$3]]);
+const _hoisted_1$d = { class: "cl-mr-2 lg:cl-hidden" };
+const _hoisted_2$c = { class: "cl-mr-2 lg:cl-hidden" };
+const _hoisted_3$a = {
   key: 0,
   class: "cl-inline-block cl-whitespace-nowrap"
 };
-const _hoisted_5$8 = {
+const _hoisted_4$8 = {
   key: 1,
   class: "cl-inline-block cl-whitespace-nowrap"
 };
 const __default__$1 = {
   inheritAttrs: false
 };
-function setup$1(__props, { emit }) {
-  const props = __props;
-  const { d, n } = useI18n();
-  const currentRecord = ref(copy(props.record));
-  const edited = computed(() => {
-    var _a, _b;
-    return currentRecord.value[(_a = props.column.field) != null ? _a : ""] !== props.record[(_b = props.column.field) != null ? _b : ""];
-  });
-  function getStringValue(record, key) {
-    return record[key];
-  }
-  function getNumericValue(record, key) {
-    return record[key];
-  }
-  function getBooleanValue(record, key) {
-    return record[key];
-  }
-  function cellFocused() {
-    emit("focus");
-  }
-  watchEffect(() => currentRecord.value = copy(props.record));
-  watch(currentRecord, (newValue) => {
-    var _a;
-    const property = (_a = props.column.field) != null ? _a : "";
-    if (property !== "") {
-      if (newValue[property] !== props.record[property]) {
-        emit("edit", newValue[property]);
-      } else {
-        emit("undo-edit");
-      }
-    }
-  }, {
-    deep: true
-  });
-  return (_ctx, _cache) => {
-    return __props.editMode && __props.column.field && __props.column.editable ? (openBlock(), createElementBlock("td", mergeProps({ key: 0 }, _ctx.$attrs, {
-      class: ["cl-transition-colours", {
-        "cl-bg-link-lighter": unref(edited)
-      }]
-    }), [
-      createElementVNode("strong", _hoisted_1$f, toDisplayString(__props.column.caption), 1),
-      renderSlot(_ctx.$slots, `${__props.column.name}Edit`, normalizeProps(guardReactiveProps({
-        cellFocused,
-        column: __props.column,
-        edited: unref(edited),
-        record: currentRecord.value
-      })))
-    ], 16)) : (openBlock(), createElementBlock("td", normalizeProps(mergeProps({ key: 1 }, _ctx.$attrs)), [
-      createElementVNode("strong", _hoisted_2$e, toDisplayString(__props.column.caption), 1),
-      __props.column.type === "slot" ? renderSlot(_ctx.$slots, __props.column.name, normalizeProps(mergeProps({ key: 0 }, { column: __props.column, record: __props.record }))) : __props.column.type === "boolean" && __props.column.field !== void 0 ? (openBlock(), createElementBlock("input", {
-        key: 1,
-        type: "checkbox",
-        checked: getBooleanValue(__props.record, __props.column.field),
-        disabled: ""
-      }, null, 8, _hoisted_3$c)) : (__props.column.type === "date" || __props.column.type === "datetime") && __props.column.field !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-        __props.column.format !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          createTextVNode(toDisplayString(unref(d)(new Date(getStringValue(__props.record, __props.column.field)), __props.column.format)), 1)
-        ], 64)) : __props.column.type === "date" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createTextVNode(toDisplayString(unref(d)(new Date(getStringValue(__props.record, __props.column.field)), unref(DateFormat).DATE)), 1)
-        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          createTextVNode(toDisplayString(unref(d)(new Date(getStringValue(__props.record, __props.column.field)), unref(DateFormat).DATETIME)), 1)
-        ], 64))
-      ], 64)) : __props.column.type === "number" && __props.column.field ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-        __props.column.format === unref(NumberFormat).MULTIPLIER ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          createTextVNode(" \xD7" + toDisplayString(getNumericValue(__props.record, __props.column.field)), 1)
-        ], 64)) : __props.column.format !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createTextVNode(toDisplayString(unref(n)(getNumericValue(__props.record, __props.column.field), __props.column.format)), 1)
-        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          createTextVNode(toDisplayString(getNumericValue(__props.record, __props.column.field)), 1)
-        ], 64))
-      ], 64)) : __props.column.field !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
-        __props.column.maxLength !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_4$a, toDisplayString(getStringValue(__props.record, __props.column.field).trimToLength(__props.column.maxLength, __props.column.format !== void 0 ? __props.column.format === "ellipsis" : false)), 1)) : (openBlock(), createElementBlock("span", _hoisted_5$8, toDisplayString(getStringValue(__props.record, __props.column.field)), 1))
-      ], 64)) : createCommentVNode("", true)
-    ], 16));
-  };
-}
-const _sfc_main$g = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+const _sfc_main$e = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
   props: {
     column: null,
     record: null,
@@ -2501,8 +2643,162 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     focus: null,
     "undo-edit": null
   },
-  setup: setup$1
+  setup(__props, { emit }) {
+    const props = __props;
+    const { d, n } = useI18n();
+    const currentRecord = ref(copy(props.record));
+    const edited = computed(() => {
+      var _a, _b;
+      return currentRecord.value[(_a = props.column.field) != null ? _a : ""] !== props.record[(_b = props.column.field) != null ? _b : ""];
+    });
+    function getStringValue(record, key) {
+      return record[key];
+    }
+    function getNumericValue(record, key) {
+      return record[key];
+    }
+    function getBooleanValue(record, key) {
+      return record[key];
+    }
+    function cellFocused() {
+      emit("focus");
+    }
+    watchEffect(() => currentRecord.value = copy(props.record));
+    watch(currentRecord, (newValue) => {
+      var _a;
+      const property = (_a = props.column.field) != null ? _a : "";
+      if (property !== "") {
+        if (newValue[property] !== props.record[property]) {
+          emit("edit", newValue[property]);
+        } else {
+          emit("undo-edit");
+        }
+      }
+    }, {
+      deep: true
+    });
+    return (_ctx, _cache) => {
+      return __props.editMode && __props.column.field && __props.column.editable ? (openBlock(), createElementBlock("td", mergeProps({ key: 0 }, _ctx.$attrs, {
+        class: ["cl-transition-colours", {
+          "cl-bg-link-lighter": unref(edited)
+        }]
+      }), [
+        createElementVNode("strong", _hoisted_1$d, toDisplayString(__props.column.caption), 1),
+        renderSlot(_ctx.$slots, `${__props.column.name}Edit`, normalizeProps(guardReactiveProps({
+          cellFocused,
+          column: __props.column,
+          edited: unref(edited),
+          record: currentRecord.value
+        })))
+      ], 16)) : (openBlock(), createElementBlock("td", normalizeProps(mergeProps({ key: 1 }, _ctx.$attrs)), [
+        createElementVNode("strong", _hoisted_2$c, toDisplayString(__props.column.caption), 1),
+        __props.column.type === "slot" ? renderSlot(_ctx.$slots, __props.column.name, normalizeProps(mergeProps({ key: 0 }, { column: __props.column, record: __props.record }))) : __props.column.type === "boolean" && __props.column.field !== void 0 ? (openBlock(), createBlock(ClUiInput, {
+          key: 1,
+          "input-type": "checkbox",
+          "model-value": getBooleanValue(__props.record, __props.column.field),
+          disabled: true
+        }, null, 8, ["model-value"])) : (__props.column.type === "date" || __props.column.type === "datetime") && __props.column.field !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          __props.column.format !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(toDisplayString(unref(d)(new Date(getStringValue(__props.record, __props.column.field)), __props.column.format)), 1)
+          ], 64)) : __props.column.type === "date" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createTextVNode(toDisplayString(unref(d)(new Date(getStringValue(__props.record, __props.column.field)), unref(DateFormat).DATE)), 1)
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+            createTextVNode(toDisplayString(unref(d)(new Date(getStringValue(__props.record, __props.column.field)), unref(DateFormat).DATETIME)), 1)
+          ], 64))
+        ], 64)) : __props.column.type === "number" && __props.column.field ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+          __props.column.format === unref(NumberFormat).MULTIPLIER ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(" \xD7" + toDisplayString(getNumericValue(__props.record, __props.column.field)), 1)
+          ], 64)) : __props.column.format !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createTextVNode(toDisplayString(unref(n)(getNumericValue(__props.record, __props.column.field), __props.column.format)), 1)
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+            createTextVNode(toDisplayString(getNumericValue(__props.record, __props.column.field)), 1)
+          ], 64))
+        ], 64)) : __props.column.field !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
+          __props.column.maxLength !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_3$a, toDisplayString(getStringValue(__props.record, __props.column.field).trimToLength(__props.column.maxLength, __props.column.format !== void 0 ? __props.column.format === "ellipsis" : false)), 1)) : (openBlock(), createElementBlock("span", _hoisted_4$8, toDisplayString(getStringValue(__props.record, __props.column.field)), 1))
+        ], 64)) : createCommentVNode("", true)
+      ], 16));
+    };
+  }
 }));
+const gridColumnTypes = [
+  "string",
+  "boolean",
+  "number",
+  "date",
+  "datetime",
+  "slot"
+];
+function isGridColumn(objectToTest) {
+  return typeof objectToTest.caption === "string" && typeof objectToTest.name === "string" && typeof objectToTest.type === "string";
+}
+function isGridColumnArray(arrayToTest) {
+  let arrayIsValid = Array.isArray(arrayToTest);
+  if (arrayIsValid) {
+    for (const objectToTest of arrayToTest) {
+      if (!isGridColumn(objectToTest)) {
+        arrayIsValid = false;
+        break;
+      }
+    }
+  }
+  return arrayIsValid;
+}
+const stringFormats = ["ellipsis"];
+var FilterOperation;
+(function(FilterOperation2) {
+  FilterOperation2[FilterOperation2["CONTAINS"] = 0] = "CONTAINS";
+  FilterOperation2[FilterOperation2["NOT_CONTAINS"] = 1] = "NOT_CONTAINS";
+  FilterOperation2[FilterOperation2["EQUAL"] = 2] = "EQUAL";
+  FilterOperation2[FilterOperation2["NOT_EQUAL"] = 3] = "NOT_EQUAL";
+  FilterOperation2[FilterOperation2["STARTS_WITH"] = 4] = "STARTS_WITH";
+  FilterOperation2[FilterOperation2["ENDS_WITH"] = 5] = "ENDS_WITH";
+  FilterOperation2[FilterOperation2["GREATER_THAN"] = 6] = "GREATER_THAN";
+  FilterOperation2[FilterOperation2["LESS_THAN"] = 7] = "LESS_THAN";
+  FilterOperation2[FilterOperation2["EQUAL_OR_GREATER_THAN"] = 8] = "EQUAL_OR_GREATER_THAN";
+  FilterOperation2[FilterOperation2["EQUAL_OR_LESS_THAN"] = 9] = "EQUAL_OR_LESS_THAN";
+})(FilterOperation || (FilterOperation = {}));
+const filterMethodTypes = [
+  "equal",
+  "notequal",
+  "contains",
+  "notcontains",
+  "lessthan",
+  "greaterthan",
+  "startswith",
+  "endswith",
+  "equalorlessthan",
+  "equalorgreaterthan"
+];
+function isFilterArgs(objectToTest) {
+  return typeof objectToTest.filterOnColumn === "string" && typeof objectToTest.filterOperation === "number" && typeof objectToTest.filterValue === "string";
+}
+function isSortArgs(objectToTest) {
+  return objectToTest === null || typeof objectToTest.sortByAscending === "boolean" && typeof objectToTest.sortOnColumn === "string";
+}
+function isFilterRequest(objectToTest) {
+  let objectValid = typeof objectToTest.filters === "object" && Array.isArray(objectToTest.filters) && typeof objectToTest.pageNumber === "number" && typeof objectToTest.pageSize === "number" && typeof objectToTest.sort === "object" && isSortArgs(objectToTest.sort);
+  if (objectValid) {
+    for (const filterArgs of objectToTest.filters) {
+      if (!isFilterArgs(filterArgs)) {
+        objectValid = false;
+        break;
+      }
+    }
+  }
+  return objectValid;
+}
+function isFilterResponse(objectToTest, resultValidator) {
+  let objectValid = typeof objectToTest.results === "object" && Array.isArray(objectToTest.results) && typeof objectToTest.totalRecords === "number";
+  if (objectValid) {
+    for (const result of objectToTest.results) {
+      if (!resultValidator(result)) {
+        objectValid = false;
+        break;
+      }
+    }
+  }
+  return objectValid;
+}
 const defaultFilterMethod = {
   method: "equal",
   icon: "&equals;",
@@ -2594,106 +2890,25 @@ const filterMethods = [
     ]
   }
 ];
-const gridColumnTypes = [
-  "string",
-  "boolean",
-  "number",
-  "date",
-  "datetime",
-  "slot"
-];
-function isGridColumn(objectToTest) {
-  return typeof objectToTest.caption === "string" && typeof objectToTest.name === "string" && typeof objectToTest.type === "string";
-}
-function isGridColumnArray(arrayToTest) {
-  let arrayIsValid = Array.isArray(arrayToTest);
-  if (arrayIsValid) {
-    for (const objectToTest of arrayToTest) {
-      if (!isGridColumn(objectToTest)) {
-        arrayIsValid = false;
-        break;
-      }
-    }
-  }
-  return arrayIsValid;
-}
-const stringFormats = ["ellipsis"];
-var FilterOperation;
-(function(FilterOperation2) {
-  FilterOperation2[FilterOperation2["CONTAINS"] = 0] = "CONTAINS";
-  FilterOperation2[FilterOperation2["NOT_CONTAINS"] = 1] = "NOT_CONTAINS";
-  FilterOperation2[FilterOperation2["EQUAL"] = 2] = "EQUAL";
-  FilterOperation2[FilterOperation2["NOT_EQUAL"] = 3] = "NOT_EQUAL";
-  FilterOperation2[FilterOperation2["STARTS_WITH"] = 4] = "STARTS_WITH";
-  FilterOperation2[FilterOperation2["ENDS_WITH"] = 5] = "ENDS_WITH";
-  FilterOperation2[FilterOperation2["GREATER_THAN"] = 6] = "GREATER_THAN";
-  FilterOperation2[FilterOperation2["LESS_THAN"] = 7] = "LESS_THAN";
-  FilterOperation2[FilterOperation2["EQUAL_OR_GREATER_THAN"] = 8] = "EQUAL_OR_GREATER_THAN";
-  FilterOperation2[FilterOperation2["EQUAL_OR_LESS_THAN"] = 9] = "EQUAL_OR_LESS_THAN";
-})(FilterOperation || (FilterOperation = {}));
-const filterMethodTypes = [
-  "equal",
-  "notequal",
-  "contains",
-  "notcontains",
-  "lessthan",
-  "greaterthan",
-  "startswith",
-  "endswith",
-  "equalorlessthan",
-  "equalorgreaterthan"
-];
-function isFilterArgs(objectToTest) {
-  return typeof objectToTest.filterOnColumn === "string" && typeof objectToTest.filterOperation === "number" && typeof objectToTest.filterValue === "string";
-}
-function isSortArgs(objectToTest) {
-  return objectToTest === null || typeof objectToTest.sortByAscending === "boolean" && typeof objectToTest.sortOnColumn === "string";
-}
-function isFilterRequest(objectToTest) {
-  let objectValid = typeof objectToTest.filters === "object" && Array.isArray(objectToTest.filters) && typeof objectToTest.pageNumber === "number" && typeof objectToTest.pageSize === "number" && typeof objectToTest.sort === "object" && isSortArgs(objectToTest.sort);
-  if (objectValid) {
-    for (const filterArgs of objectToTest.filters) {
-      if (!isFilterArgs(filterArgs)) {
-        objectValid = false;
-        break;
-      }
-    }
-  }
-  return objectValid;
-}
-function isFilterResponse(objectToTest, resultValidator) {
-  let objectValid = typeof objectToTest.results === "object" && Array.isArray(objectToTest.results) && typeof objectToTest.totalRecords === "number";
-  if (objectValid) {
-    for (const result of objectToTest.results) {
-      if (!resultValidator(result)) {
-        objectValid = false;
-        break;
-      }
-    }
-  }
-  return objectValid;
-}
-const _hoisted_1$e = {
+const _hoisted_1$c = {
   key: 0,
   class: "cl-border-grey-2 cl-border-r cl-capitalize cl-group cl-inline cl-relative cl-w-auto"
 };
-const _hoisted_2$d = { class: "cl-bg-off-white cl-flex cl-h-full cl-items-center cl-justify-center cl-w-10" };
-const _hoisted_3$b = { class: "cl-p-3" };
-const _hoisted_4$9 = { class: "cl-px-4 cl-py-1 cl-w-full" };
-const _hoisted_5$7 = ["innerHTML"];
-const _hoisted_6$7 = { class: "cl-p-3" };
-const _hoisted_7$7 = ["onClick"];
-const _hoisted_8$6 = ["innerHTML"];
+const _hoisted_2$b = { class: "cl-bg-off-white cl-flex cl-h-full cl-items-center cl-justify-center cl-w-10" };
+const _hoisted_3$9 = { class: "cl-p-3" };
+const _hoisted_4$7 = { class: "cl-px-4 cl-py-1 cl-w-full" };
+const _hoisted_5$5 = ["innerHTML"];
+const _hoisted_6$5 = { class: "cl-p-3" };
+const _hoisted_7$5 = ["onClick"];
+const _hoisted_8$4 = ["innerHTML"];
 const _hoisted_9$4 = /* @__PURE__ */ createElementVNode("option", { value: void 0 }, null, -1);
 const _hoisted_10$4 = ["selected"];
-const _hoisted_11$4 = ["selected"];
-const _hoisted_12$4 = ["value"];
-const _hoisted_13$4 = ["value"];
-const _hoisted_14$3 = {
+const _hoisted_11$3 = ["selected"];
+const _hoisted_12$3 = {
   key: 1,
   class: "cl-flex cl-w-full"
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   props: {
     request: null,
     column: null,
@@ -2728,9 +2943,18 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       var _a, _b;
       return (_b = (_a = props.request.filters.find((f) => f.filterOnColumn === props.column.field)) == null ? void 0 : _a.filterValue) != null ? _b : "";
     });
-    const currentNumberFilter = computed(() => Number(currentFilter.value));
     const currentDateFilter = computed(() => currentFilter.value !== "" ? new Date(currentFilter.value) : null);
+    const filterInput = ref(currentFilter.value);
     const decimalSeparator = computed(() => Intl.NumberFormat(locale.value).format(1.1).replace(/[0-9]+/g, ""));
+    const columnInputType = computed(() => {
+      let inputType = "text";
+      if (props.column.slotType === "date" || props.column.type === "date") {
+        inputType = "date";
+      } else if (props.column.slotType === "datetime" || props.column.type === "datetime") {
+        inputType = "datetime";
+      }
+      return inputType;
+    });
     function getDefaultFilterOperation() {
       return props.column.type === "string" || props.column.slotType === "string" ? FilterOperation.CONTAINS : props.column.type === "datetime" || props.column.slotType === "datetime" ? FilterOperation.LESS_THAN : FilterOperation.EQUAL;
     }
@@ -2804,7 +3028,6 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       var _a, _b;
       const _component_icon = resolveComponent("icon");
-      const _component_cl_ui_calendar = resolveComponent("cl-ui-calendar");
       return __props.column.filterable === void 0 || __props.column.filterable === true ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: normalizeClass(["cl-border-grey-2 cl-flex cl-rounded cl-w-full", {
@@ -2812,8 +3035,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           "cl-border": __props.column.type !== "slot" || __props.column.slotType !== void 0 && __props.column.field !== void 0
         }])
       }, [
-        __props.column.type !== "slot" || __props.column.slotType !== void 0 && __props.column.field !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
-          createElementVNode("div", _hoisted_2$d, [
+        __props.column.type !== "slot" || __props.column.slotType !== void 0 && __props.column.field !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
+          createElementVNode("div", _hoisted_2$b, [
             createVNode(_component_icon, {
               icon: "ph:sliders-horizontal",
               size: 20
@@ -2825,15 +3048,15 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               "cl--left-44": !__props.firstHalf
             }])
           }, [
-            createElementVNode("strong", _hoisted_3$b, toDisplayString(unref(t2)("grid.currentMethod")), 1),
-            createElementVNode("span", _hoisted_4$9, [
+            createElementVNode("strong", _hoisted_3$9, toDisplayString(unref(t2)("grid.currentMethod")), 1),
+            createElementVNode("span", _hoisted_4$7, [
               createTextVNode(toDisplayString((_a = unref(currentFilterMethod)) == null ? void 0 : _a.description) + " ", 1),
               createElementVNode("span", {
                 class: "cl-float-right",
                 innerHTML: (_b = unref(currentFilterMethod)) == null ? void 0 : _b.icon
-              }, null, 8, _hoisted_5$7)
+              }, null, 8, _hoisted_5$5)
             ]),
-            createElementVNode("strong", _hoisted_6$7, toDisplayString(unref(t2)("grid.availableMethods")), 1),
+            createElementVNode("strong", _hoisted_6$5, toDisplayString(unref(t2)("grid.availableMethods")), 1),
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(allowedFilterMethods), (filterMethod, index) => {
               return openBlock(), createElementBlock("span", {
                 key: index,
@@ -2844,8 +3067,8 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 createElementVNode("span", {
                   class: "cl-float-right",
                   innerHTML: filterMethod.icon
-                }, null, 8, _hoisted_8$6)
-              ], 8, _hoisted_7$7);
+                }, null, 8, _hoisted_8$4)
+              ], 8, _hoisted_7$5);
             }), 128))
           ], 2)
         ])) : createCommentVNode("", true),
@@ -2862,60 +3085,60 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
           createElementVNode("option", {
             value: "false",
             selected: unref(currentFilter) === "false"
-          }, toDisplayString(unref(t2)("grid.false")), 9, _hoisted_11$4)
-        ], 32)) : __props.column.type === "date" || __props.column.type === "datetime" || (__props.column.slotType === "date" || __props.column.slotType === "datetime") && typeof __props.column.field !== "undefined" ? (openBlock(), createBlock(_component_cl_ui_calendar, {
+          }, toDisplayString(unref(t2)("grid.false")), 9, _hoisted_11$3)
+        ], 32)) : __props.column.type === "date" || __props.column.type === "datetime" || (__props.column.slotType === "date" || __props.column.slotType === "datetime") && typeof __props.column.field !== "undefined" ? (openBlock(), createBlock(ClUiInput, {
           key: 2,
-          date: unref(currentDateFilter),
-          class: "cl-border-none cl-w-full",
-          type: __props.column.type,
-          "date-placeholder": unref(t2)("grid.selectDate"),
-          "date-time-placeholder": unref(t2)("grid.selectDateTime"),
-          "onUpdate:date": _cache[1] || (_cache[1] = ($event) => setDateFilter($event))
-        }, null, 8, ["date", "type", "date-placeholder", "date-time-placeholder"])) : __props.column.type === "number" || __props.column.slotType === "number" && typeof __props.column.field !== "undefined" ? (openBlock(), createElementBlock("input", {
+          "model-value": unref(currentDateFilter),
+          class: "!cl-border-none !cl-mb-0 !cl-mr-0 cl-w-full",
+          min: "1900-01-01",
+          max: "2999-12-31T23:59",
+          label: __props.column.name,
+          "show-label": false,
+          "input-type": unref(columnInputType),
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => setDateFilter($event))
+        }, null, 8, ["model-value", "label", "input-type"])) : __props.column.type === "number" || __props.column.slotType === "number" && typeof __props.column.field !== "undefined" ? (openBlock(), createBlock(ClUiInput, {
           key: 3,
-          value: unref(currentFilter),
-          class: "cl-border-none cl-w-full",
-          type: "text",
-          onKeyup: [
-            _cache[2] || (_cache[2] = withKeys(($event) => setFilter(null, (unref(currentNumberFilter) + 1).toString()), ["arrow-up"])),
-            _cache[3] || (_cache[3] = withKeys(($event) => setFilter(null, (unref(currentNumberFilter) - 1).toString()), ["arrow-down"]))
-          ],
-          onInput: _cache[4] || (_cache[4] = ($event) => unref(debounce)(setNumberFilter, [$event.target]))
-        }, null, 40, _hoisted_12$4)) : __props.column.type !== "slot" || __props.column.slotType === "string" && typeof __props.column.field !== "undefined" ? (openBlock(), createElementBlock("input", {
-          key: 4,
-          value: unref(currentFilter),
-          class: "cl-border-none cl-w-full",
-          type: "text",
-          onInput: _cache[5] || (_cache[5] = ($event) => unref(debounce)(setFilter, [$event.target]))
-        }, null, 40, _hoisted_13$4)) : createCommentVNode("", true)
-      ], 2)) : (openBlock(), createElementBlock("div", _hoisted_14$3, " \xA0 "));
+          modelValue: filterInput.value,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => filterInput.value = $event),
+          class: "cl-border-none cl-mb-0 cl-w-full",
+          "input-type": "number",
+          "show-arrows": false,
+          onInput: _cache[3] || (_cache[3] = ($event) => unref(debounce)(setNumberFilter, $event.target))
+        }, null, 8, ["modelValue"])) : __props.column.type !== "slot" || __props.column.slotType === "string" && typeof __props.column.field !== "undefined" ? (openBlock(), createBlock(ClUiInput, {
+          key: 4,
+          modelValue: filterInput.value,
+          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => filterInput.value = $event),
+          class: "cl-border-none cl-mb-0 cl-w-full",
+          "input-type": "text",
+          onInput: _cache[5] || (_cache[5] = ($event) => unref(debounce)(setFilter, $event.target))
+        }, null, 8, ["modelValue"])) : createCommentVNode("", true)
+      ], 2)) : (openBlock(), createElementBlock("div", _hoisted_12$3, " \xA0 "));
     };
   }
 });
-const _hoisted_1$d = {
+const _hoisted_1$b = {
   key: 0,
   class: "cl-flex cl-flex-wrap cl-justify-end cl-mt-4 cl-w-full"
 };
-const _hoisted_2$c = { class: "cl-bg-off-white cl-border cl-border-grey-0 cl-flex cl-items-center cl-mb-2 cl-px-3 cl-py-2 cl-rounded cl-shadow-md cl-text-sm cl-w-full lg:cl-w-auto" };
-const _hoisted_3$a = { class: "cl-text-grey-3 cl-w-max" };
-const _hoisted_4$8 = ["value"];
-const _hoisted_5$6 = { class: "cl-bg-off-white cl-border cl-border-grey-0 cl-flex cl-flex-wrap cl-items-center cl-mb-2 cl-px-3 cl-py-2 cl-rounded cl-shadow-md cl-text-sm cl-w-full lg:cl-ml-2 lg:cl-w-auto mb:cl-flex-nowrap" };
-const _hoisted_6$6 = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-text-sm cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
-const _hoisted_7$6 = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-w-full lg:cl-mb-0 lg:cl-mr-2 lg:cl-w-auto" };
-const _hoisted_8$5 = { class: "cl-text-grey-3 cl-w-full lg:cl-mr-2 lg:cl-w-auto" };
-const _hoisted_9$3 = { class: "cl-flex cl-flex-wrap cl-text-sm mb:cl-flex-nowrap" };
-const _hoisted_10$3 = { class: "cl-pr-2" };
-const _hoisted_11$3 = ["onClick"];
-const _hoisted_12$3 = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-text-sm cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
-const _hoisted_13$3 = { class: "cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-mb-0 lg:cl-mr-2 lg:cl-w-auto" };
-const _hoisted_14$2 = ["onClick"];
-const _hoisted_15$2 = { class: "cl-mb-2 cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
-const _hoisted_16$2 = { class: "cl-block cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-inline-block lg:cl-mb-0 lg:cl-mr-1 lg:cl-w-auto" };
-const _hoisted_17$2 = { class: "cl-block lg:cl-inline-block" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_2$a = { class: "cl-bg-off-white cl-border cl-border-grey-0 cl-flex cl-items-center cl-mb-2 cl-px-3 cl-rounded cl-shadow-md cl-text-sm cl-w-full lg:cl-w-auto" };
+const _hoisted_3$8 = { class: "cl-text-grey-3 cl-w-max" };
+const _hoisted_4$6 = { class: "cl-bg-off-white cl-border cl-border-grey-0 cl-flex cl-flex-wrap cl-items-center cl-mb-2 cl-px-3 cl-py-2 cl-rounded cl-shadow-md cl-text-sm cl-w-full lg:cl-ml-2 lg:cl-w-auto mb:cl-flex-nowrap" };
+const _hoisted_5$4 = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-text-sm cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
+const _hoisted_6$4 = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-w-full lg:cl-mb-0 lg:cl-mr-2 lg:cl-w-auto" };
+const _hoisted_7$4 = { class: "cl-text-grey-3 cl-w-full lg:cl-mr-2 lg:cl-w-auto" };
+const _hoisted_8$3 = { class: "cl-flex cl-flex-wrap cl-text-sm mb:cl-flex-nowrap" };
+const _hoisted_9$3 = { class: "cl-pr-2" };
+const _hoisted_10$3 = ["onClick"];
+const _hoisted_11$2 = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-text-sm cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
+const _hoisted_12$2 = { class: "cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-mb-0 lg:cl-mr-2 lg:cl-w-auto" };
+const _hoisted_13$1 = ["onClick"];
+const _hoisted_14$1 = { class: "cl-mb-2 cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
+const _hoisted_15$1 = { class: "cl-block cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-inline-block lg:cl-mb-0 lg:cl-mr-1 lg:cl-w-auto" };
+const _hoisted_16$1 = { class: "cl-block lg:cl-inline-block" };
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   props: {
     request: null,
-    data: { default: () => null }
+    data: { default: null }
   },
   emits: {
     "update:request": null
@@ -2931,7 +3154,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     ];
     const { n, t: t2 } = useI18n();
     const { debounce } = useDebouncer();
-    const totalPages = computed(() => props.data !== null ? Math.ceil(props.data.totalRecords / props.request.pageSize) : 1);
+    const currentPage = ref(props.request.pageNumber);
+    const totalPages = computed(() => {
+      var _a, _b;
+      return props.data !== null ? Math.ceil((_b = (_a = props.data) == null ? void 0 : _a.totalRecords) != null ? _b : 0 / props.request.pageSize) : 1;
+    });
     const pageNumbers = computed(() => {
       const calculatedPageNumbers = Array.from(Array(totalPages.value + 1).keys());
       let results = [];
@@ -2960,29 +3187,35 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       filterRequest.pageNumber = 1;
       emit("update:request", filterRequest);
     }
+    watch(() => props.request.pageNumber, () => currentPage.value = props.request.pageNumber);
     return (_ctx, _cache) => {
       var _a;
       const _component_icon = resolveComponent("icon");
-      return __props.data && ((_a = __props.data.results) == null ? void 0 : _a.length) && __props.request ? (openBlock(), createElementBlock("div", _hoisted_1$d, [
-        createElementVNode("div", _hoisted_2$c, [
-          createElementVNode("span", _hoisted_3$a, toDisplayString(unref(t2)("grid.jumpToPage")), 1),
-          createElementVNode("input", {
-            class: "!cl-h-8 !cl-inline-block !cl-ml-2 !cl-text-sm !cl-w-max",
-            value: __props.request.pageNumber,
-            type: "number",
-            onInput: _cache[0] || (_cache[0] = ($event) => unref(debounce)(setPageFromInput, [$event.target]))
-          }, null, 40, _hoisted_4$8)
+      return __props.data && ((_a = __props.data.results) == null ? void 0 : _a.length) && __props.request ? (openBlock(), createElementBlock("div", _hoisted_1$b, [
+        createElementVNode("div", _hoisted_2$a, [
+          createElementVNode("span", _hoisted_3$8, toDisplayString(unref(t2)("grid.jumpToPage")), 1),
+          createVNode(ClUiInput, {
+            modelValue: currentPage.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currentPage.value = $event),
+            class: "!cl-inline-block !cl-ml-2 !cl-mt-2 !cl-text-sm !cl-w-max",
+            "input-type": "number",
+            label: "Page",
+            "show-label": false,
+            min: "1",
+            max: unref(totalPages),
+            onInput: _cache[1] || (_cache[1] = ($event) => unref(debounce)(setPageFromInput, $event.target))
+          }, null, 8, ["modelValue", "max"])
         ]),
-        createElementVNode("div", _hoisted_5$6, [
-          createElementVNode("div", _hoisted_6$6, [
-            createElementVNode("li", _hoisted_7$6, [
-              createElementVNode("span", _hoisted_8$5, toDisplayString(unref(t2)("grid.page")), 1)
+        createElementVNode("div", _hoisted_4$6, [
+          createElementVNode("div", _hoisted_5$4, [
+            createElementVNode("li", _hoisted_6$4, [
+              createElementVNode("span", _hoisted_7$4, toDisplayString(unref(t2)("grid.page")), 1)
             ]),
-            createElementVNode("ul", _hoisted_9$3, [
-              createElementVNode("li", _hoisted_10$3, toDisplayString(unref(n)(__props.request.pageNumber, unref(NumberFormat).INTEGER)) + " / " + toDisplayString(unref(n)(unref(totalPages), unref(NumberFormat).INTEGER)), 1),
+            createElementVNode("ul", _hoisted_8$3, [
+              createElementVNode("li", _hoisted_9$3, toDisplayString(unref(n)(__props.request.pageNumber, unref(NumberFormat).INTEGER)) + " / " + toDisplayString(unref(n)(unref(totalPages), unref(NumberFormat).INTEGER)), 1),
               withDirectives(createElementVNode("li", {
                 class: "cl-cursor-pointer cl-mr-1 cl-mt-1 lg:cl-mr-2",
-                onClick: _cache[1] || (_cache[1] = ($event) => setPage(1))
+                onClick: _cache[2] || (_cache[2] = ($event) => setPage(1))
               }, [
                 createVNode(_component_icon, {
                   icon: "ph:caret-double-left",
@@ -2993,7 +3226,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               ]),
               withDirectives(createElementVNode("li", {
                 class: "cl-cursor-pointer cl-mt-1 lg:cl-mr-2 mr-1",
-                onClick: _cache[2] || (_cache[2] = ($event) => setPage(__props.request.pageNumber - 1))
+                onClick: _cache[3] || (_cache[3] = ($event) => setPage(__props.request.pageNumber - 1))
               }, [
                 createVNode(_component_icon, {
                   icon: "ph:caret-left",
@@ -3010,11 +3243,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     "cl-text-grey-6": __props.request.pageNumber !== number
                   }]),
                   onClick: ($event) => setPage(number)
-                }, toDisplayString(unref(n)(number, unref(NumberFormat).INTEGER)), 11, _hoisted_11$3);
+                }, toDisplayString(unref(n)(number, unref(NumberFormat).INTEGER)), 11, _hoisted_10$3);
               }), 128)),
               withDirectives(createElementVNode("li", {
                 class: "cl-cursor-pointer cl-mr-1 cl-mt-1 lg:cl-mr-2",
-                onClick: _cache[3] || (_cache[3] = ($event) => setPage(__props.request.pageNumber + 1))
+                onClick: _cache[4] || (_cache[4] = ($event) => setPage(__props.request.pageNumber + 1))
               }, [
                 createVNode(_component_icon, {
                   icon: "ph:caret-right",
@@ -3025,7 +3258,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               ]),
               withDirectives(createElementVNode("li", {
                 class: "cl-cursor-pointer cl-mr-1 cl-mt-1 lg:cl-mr-2",
-                onClick: _cache[4] || (_cache[4] = ($event) => setPage(unref(totalPages)))
+                onClick: _cache[5] || (_cache[5] = ($event) => setPage(unref(totalPages)))
               }, [
                 createVNode(_component_icon, {
                   icon: "ph:caret-double-right",
@@ -3036,8 +3269,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               ])
             ])
           ]),
-          createElementVNode("ul", _hoisted_12$3, [
-            createElementVNode("li", _hoisted_13$3, toDisplayString(unref(t2)("grid.pageSize")), 1),
+          createElementVNode("ul", _hoisted_11$2, [
+            createElementVNode("li", _hoisted_12$2, toDisplayString(unref(t2)("grid.pageSize")), 1),
             (openBlock(), createElementBlock(Fragment, null, renderList(pageSizes, (size, index) => {
               return createElementVNode("li", {
                 key: index,
@@ -3046,150 +3279,148 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                   "cl-text-grey-6": __props.request.pageSize !== size
                 }]),
                 onClick: ($event) => setPageSize(size)
-              }, toDisplayString(unref(n)(size, unref(NumberFormat).INTEGER)), 11, _hoisted_14$2);
+              }, toDisplayString(unref(n)(size, unref(NumberFormat).INTEGER)), 11, _hoisted_13$1);
             }), 64))
           ]),
-          createElementVNode("ul", _hoisted_15$2, [
-            createElementVNode("li", _hoisted_16$2, toDisplayString(unref(t2)("grid.totalRecords")), 1),
-            createElementVNode("li", _hoisted_17$2, toDisplayString(unref(n)(__props.data.totalRecords, unref(NumberFormat).INTEGER)), 1)
+          createElementVNode("ul", _hoisted_14$1, [
+            createElementVNode("li", _hoisted_15$1, toDisplayString(unref(t2)("grid.totalRecords")), 1),
+            createElementVNode("li", _hoisted_16$1, toDisplayString(unref(n)(__props.data.totalRecords, unref(NumberFormat).INTEGER)), 1)
           ])
         ])
       ])) : createCommentVNode("", true);
     };
   }
 });
-const _hoisted_1$c = { class: "cl-fixed cl-flex cl-h-full cl-justify-end cl-right-0 cl-shadow-lg cl-top-0 cl-z-40" };
-const _hoisted_2$b = { class: "cl-bg-secondary-default cl-h-full cl-overflow-y-auto cl-px-10 cl-py-20 cl-relative cl-text-grey-2 cl-w-80" };
-const _hoisted_3$9 = { class: "cl-mb-4 cl-text-2xl cl-text-off-white" };
-const _hoisted_4$7 = { class: "cl-border-grey-3 cl-border-t cl-flex cl-flex-wrap cl-text-sm cl-w-full" };
-const _hoisted_5$5 = { class: "cl-border-b cl-border-grey-2 cl-flex cl-py-2 cl-text-sm cl-w-full" };
-const _hoisted_6$5 = { class: "cl-flex-1 cl-py-2" };
-const _hoisted_7$5 = { class: "cl-py-2 cl-w-1/4" };
-const _hoisted_8$4 = { class: "cl-py-2 cl-w-1/5" };
+const _hoisted_1$a = { class: "cl-fixed cl-flex cl-h-full cl-justify-end cl-right-0 cl-shadow-lg cl-top-0 cl-z-40" };
+const _hoisted_2$9 = { class: "cl-bg-secondary-default cl-h-full cl-overflow-y-auto cl-px-10 cl-py-20 cl-relative cl-text-grey-2 cl-w-80" };
+const _hoisted_3$7 = { class: "cl-mb-4 cl-text-2xl cl-text-off-white" };
+const _hoisted_4$5 = { class: "cl-border-grey-3 cl-border-t cl-flex cl-flex-wrap cl-text-sm cl-w-full" };
+const _hoisted_5$3 = { class: "cl-border-b cl-border-grey-2 cl-flex cl-py-2 cl-text-sm cl-w-full" };
+const _hoisted_6$3 = { class: "cl-flex-1 cl-py-2" };
+const _hoisted_7$3 = { class: "cl-py-2 cl-w-1/4" };
+const _hoisted_8$2 = { class: "cl-py-2 cl-w-1/5" };
 const _hoisted_9$2 = { class: "cl-flex-1 cl-py-2" };
 const _hoisted_10$2 = { class: "cl-py-2 cl-w-1/4" };
-const _hoisted_11$2 = ["checked", "onClick"];
-const _hoisted_12$2 = { class: "cl-py-2 cl-text-off-white cl-w-1/5" };
-const _hoisted_13$2 = { key: 1 };
+const _hoisted_11$1 = { class: "cl-py-2 cl-text-off-white cl-w-1/5" };
+const _hoisted_12$1 = { key: 1 };
 const __default__ = {
   inheritAttrs: false
 };
-function setup(__props, { emit }) {
-  const props = __props;
-  const { t: t2 } = useI18n();
-  const visible = ref(false);
-  function moveColumn(columns, oldIndex, newIndex) {
-    if (newIndex < columns.length && newIndex >= 0) {
-      columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
-    }
-  }
-  function updateColumnVisibility(target, column) {
-    var _a;
-    const gridColumns = copy(props.columns);
-    const checked = (_a = target == null ? void 0 : target.checked) != null ? _a : false;
-    const targetColumnIndex = gridColumns.findIndex((c) => c.name === column.name);
-    if (targetColumnIndex >= 0) {
-      gridColumns[targetColumnIndex].visible = checked;
-    }
-    emit("update:columns", gridColumns);
-  }
-  function changeColumnOrder(columnIndex, direction) {
-    const gridColumns = copy(props.columns);
-    const newIndex = direction === "up" ? columnIndex + 1 : columnIndex - 1;
-    moveColumn(gridColumns, columnIndex, newIndex);
-    emit("update:columns", gridColumns);
-  }
-  return (_ctx, _cache) => {
-    const _component_icon = resolveComponent("icon");
-    return openBlock(), createElementBlock(Fragment, null, [
-      createVNode(_sfc_main$p, mergeProps(_ctx.$attrs, {
-        class: "cl-w-full",
-        size: "small",
-        onClick: _cache[0] || (_cache[0] = withModifiers(($event) => visible.value = true, ["prevent"]))
-      }), {
-        default: withCtx(() => [
-          createTextVNode(toDisplayString(unref(t2)("grid.manageView")), 1)
-        ]),
-        _: 1
-      }, 16),
-      (openBlock(), createBlock(Teleport, { to: "body" }, [
-        createVNode(Transition, { name: "slide-left" }, {
-          default: withCtx(() => [
-            withDirectives(createElementVNode("div", _hoisted_1$c, [
-              createElementVNode("div", _hoisted_2$b, [
-                createVNode(_component_icon, {
-                  class: "cl-absolute cl-cursor-pointer cl-right-3 cl-text-off-white cl-top-3",
-                  icon: "ph:x",
-                  size: 16,
-                  onClick: _cache[1] || (_cache[1] = ($event) => visible.value = false)
-                }),
-                createElementVNode("h3", _hoisted_3$9, toDisplayString(unref(t2)("grid.manageView")), 1),
-                createElementVNode("ul", _hoisted_4$7, [
-                  createElementVNode("li", _hoisted_5$5, [
-                    createElementVNode("strong", _hoisted_6$5, toDisplayString(unref(t2)("grid.column")), 1),
-                    createElementVNode("strong", _hoisted_7$5, toDisplayString(unref(t2)("grid.visible")), 1),
-                    createElementVNode("strong", _hoisted_8$4, toDisplayString(unref(t2)("grid.order")), 1)
-                  ]),
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column, index) => {
-                    return openBlock(), createElementBlock("li", {
-                      key: index,
-                      class: "cl-border-b cl-border-grey-2 cl-flex cl-py-2 cl-text-sm cl-w-full"
-                    }, [
-                      createElementVNode("div", _hoisted_9$2, toDisplayString(column.caption), 1),
-                      createElementVNode("div", _hoisted_10$2, [
-                        createElementVNode("input", {
-                          checked: column.visible === void 0 || column.visible === true,
-                          type: "checkbox",
-                          onClick: ($event) => updateColumnVisibility($event.target, column)
-                        }, null, 8, _hoisted_11$2)
-                      ]),
-                      createElementVNode("div", _hoisted_12$2, [
-                        column.visible === void 0 || column.visible === true ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                          index !== 0 ? (openBlock(), createBlock(_component_icon, {
-                            key: 0,
-                            class: "cl-cursor-pointer cl-inline-block cl-mr-2",
-                            icon: "ph:arrow-left",
-                            onClick: ($event) => changeColumnOrder(index, "down")
-                          }, null, 8, ["onClick"])) : createCommentVNode("", true),
-                          index !== __props.columns.length - 1 ? (openBlock(), createBlock(_component_icon, {
-                            key: 1,
-                            class: "cl-cursor-pointer cl-inline-block",
-                            icon: "ph:arrow-right",
-                            onClick: ($event) => changeColumnOrder(index, "up")
-                          }, null, 8, ["onClick"])) : createCommentVNode("", true)
-                        ], 64)) : (openBlock(), createElementBlock("em", _hoisted_13$2, toDisplayString(unref(t2)("grid.hidden")), 1))
-                      ])
-                    ]);
-                  }), 128))
-                ])
-              ])
-            ], 512), [
-              [vShow, visible.value]
-            ])
-          ]),
-          _: 1
-        })
-      ]))
-    ], 64);
-  };
-}
-const _sfc_main$d = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+const _sfc_main$b = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
   props: {
     columns: null
   },
   emits: {
     "update:columns": null
   },
-  setup
+  setup(__props, { emit }) {
+    const props = __props;
+    const { t: t2 } = useI18n();
+    const visible = ref(false);
+    function moveColumn(columns, oldIndex, newIndex) {
+      if (newIndex < columns.length && newIndex >= 0) {
+        columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
+      }
+    }
+    function updateColumnVisibility(target, column) {
+      var _a;
+      const gridColumns = copy(props.columns);
+      const checked = (_a = target == null ? void 0 : target.checked) != null ? _a : false;
+      const targetColumnIndex = gridColumns.findIndex((c) => c.name === column.name);
+      if (targetColumnIndex >= 0) {
+        gridColumns[targetColumnIndex].visible = checked;
+      }
+      emit("update:columns", gridColumns);
+    }
+    function changeColumnOrder(columnIndex, direction) {
+      const gridColumns = copy(props.columns);
+      const newIndex = direction === "up" ? columnIndex + 1 : columnIndex - 1;
+      moveColumn(gridColumns, columnIndex, newIndex);
+      emit("update:columns", gridColumns);
+    }
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_sfc_main$p, mergeProps(_ctx.$attrs, {
+          class: "cl-w-full",
+          size: "small",
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => visible.value = true, ["prevent"]))
+        }), {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(t2)("grid.manageView")), 1)
+          ]),
+          _: 1
+        }, 16),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createVNode(Transition, { name: "slide-left" }, {
+            default: withCtx(() => [
+              withDirectives(createElementVNode("div", _hoisted_1$a, [
+                createElementVNode("div", _hoisted_2$9, [
+                  createVNode(_component_icon, {
+                    class: "cl-absolute cl-cursor-pointer cl-right-3 cl-text-off-white cl-top-3",
+                    icon: "ph:x",
+                    size: 16,
+                    onClick: _cache[1] || (_cache[1] = ($event) => visible.value = false)
+                  }),
+                  createElementVNode("h3", _hoisted_3$7, toDisplayString(unref(t2)("grid.manageView")), 1),
+                  createElementVNode("ul", _hoisted_4$5, [
+                    createElementVNode("li", _hoisted_5$3, [
+                      createElementVNode("strong", _hoisted_6$3, toDisplayString(unref(t2)("grid.column")), 1),
+                      createElementVNode("strong", _hoisted_7$3, toDisplayString(unref(t2)("grid.visible")), 1),
+                      createElementVNode("strong", _hoisted_8$2, toDisplayString(unref(t2)("grid.order")), 1)
+                    ]),
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column, index) => {
+                      return openBlock(), createElementBlock("li", {
+                        key: index,
+                        class: "cl-border-b cl-border-grey-2 cl-flex cl-py-2 cl-text-sm cl-w-full"
+                      }, [
+                        createElementVNode("div", _hoisted_9$2, toDisplayString(column.caption), 1),
+                        createElementVNode("div", _hoisted_10$2, [
+                          createVNode(ClUiInput, {
+                            "model-value": column.visible === void 0 || column.visible === true,
+                            "input-type": "checkbox",
+                            onClick: ($event) => updateColumnVisibility($event.target, column)
+                          }, null, 8, ["model-value", "onClick"])
+                        ]),
+                        createElementVNode("div", _hoisted_11$1, [
+                          column.visible === void 0 || column.visible === true ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                            index !== 0 ? (openBlock(), createBlock(_component_icon, {
+                              key: 0,
+                              class: "cl-cursor-pointer cl-inline-block cl-mr-2",
+                              icon: "ph:arrow-left",
+                              onClick: ($event) => changeColumnOrder(index, "down")
+                            }, null, 8, ["onClick"])) : createCommentVNode("", true),
+                            index !== __props.columns.length - 1 ? (openBlock(), createBlock(_component_icon, {
+                              key: 1,
+                              class: "cl-cursor-pointer cl-inline-block",
+                              icon: "ph:arrow-right",
+                              onClick: ($event) => changeColumnOrder(index, "up")
+                            }, null, 8, ["onClick"])) : createCommentVNode("", true)
+                          ], 64)) : (openBlock(), createElementBlock("em", _hoisted_12$1, toDisplayString(unref(t2)("grid.hidden")), 1))
+                        ])
+                      ]);
+                    }), 128))
+                  ])
+                ])
+              ], 512), [
+                [vShow, visible.value]
+              ])
+            ]),
+            _: 1
+          })
+        ]))
+      ], 64);
+    };
+  }
 }));
-const _hoisted_1$b = {
+const _hoisted_1$9 = {
   key: 0,
   class: "cl-pb-2 cl-pr-2 cl-w-1/2 lg:cl-pb-0 lg:cl-w-auto"
 };
-const _hoisted_2$a = { class: "cl-hidden cl-pr-2 lg:cl-inline-block" };
-const _hoisted_3$8 = { class: "cl-pb-2 cl-pr-2 cl-w-1/2 lg:cl-pb-0 lg:cl-pr-0 lg:cl-w-auto" };
-const _hoisted_4$6 = { class: "cl-pr-2 cl-w-full lg:cl-hidden md:cl-w-1/2" };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _hoisted_2$8 = { class: "cl-hidden cl-pr-2 lg:cl-inline-block" };
+const _hoisted_3$6 = { class: "cl-pb-2 cl-pr-2 cl-w-1/2 lg:cl-pb-0 lg:cl-pr-0 lg:cl-w-auto" };
+const _hoisted_4$4 = { class: "cl-pr-2 cl-w-full lg:cl-hidden md:cl-w-1/2" };
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   props: {
     columns: null,
     editMode: { type: Boolean },
@@ -3211,7 +3442,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        __props.editEnabled ? (openBlock(), createElementBlock("span", _hoisted_1$b, [
+        __props.editEnabled ? (openBlock(), createElementBlock("span", _hoisted_1$9, [
           createVNode(_sfc_main$p, {
             class: "cl-w-full lg:cl-w-auto",
             size: "small",
@@ -3228,13 +3459,13 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             _: 1
           })
         ])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_2$a, [
-          createVNode(_sfc_main$d, {
+        createElementVNode("span", _hoisted_2$8, [
+          createVNode(_sfc_main$b, {
             columns: unref(currentColumns),
             "onUpdate:columns": _cache[1] || (_cache[1] = ($event) => isRef(currentColumns) ? currentColumns.value = $event : null)
           }, null, 8, ["columns"])
         ]),
-        createElementVNode("span", _hoisted_3$8, [
+        createElementVNode("span", _hoisted_3$6, [
           createVNode(_sfc_main$p, {
             class: "cl-w-full lg:cl-w-auto",
             size: "small",
@@ -3246,7 +3477,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             _: 1
           })
         ]),
-        createElementVNode("span", _hoisted_4$6, [
+        createElementVNode("span", _hoisted_4$4, [
           createVNode(_sfc_main$p, {
             class: "cl-w-full",
             colour: "blue",
@@ -3264,26 +3495,26 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 var clUiGrid_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _hoisted_1$a = { class: "cl-hidden cl-mb-4 cl-w-full lg:cl-block lg:cl-text-right" };
-const _hoisted_2$9 = ["data-loading"];
-const _hoisted_3$7 = { class: "cl-absolute cl-bg-white cl-h-full cl-opacity-40 cl-w-full cl-z-20" };
-const _hoisted_4$5 = { class: "cl-bg-white cl-flex cl-flex-wrap cl-sticky cl-top-0 cl-w-full lg:cl-hidden" };
-const _hoisted_5$4 = { class: "cl-border-b cl-border-grey-2 cl-flex cl-flex-wrap cl-px-2 cl-py-4 cl-w-full" };
-const _hoisted_6$4 = { class: "cl-mb-4 cl-text-sm cl-w-full" };
-const _hoisted_7$4 = { class: "cl-flex cl-flex-wrap cl-w-full" };
-const _hoisted_8$3 = { class: "cl-absolute cl-bg-white cl-h-screen cl-overflow-x-auto cl-p-4 cl-text-sm cl-w-full cl-z-10" };
+const _hoisted_1$8 = { class: "cl-hidden cl-mb-4 cl-w-full lg:cl-block lg:cl-text-right" };
+const _hoisted_2$7 = ["data-loading"];
+const _hoisted_3$5 = { class: "cl-absolute cl-bg-white cl-h-full cl-opacity-40 cl-w-full cl-z-20" };
+const _hoisted_4$3 = { class: "cl-bg-white cl-flex cl-flex-wrap cl-sticky cl-top-0 cl-w-full lg:cl-hidden" };
+const _hoisted_5$2 = { class: "cl-border-b cl-border-grey-2 cl-flex cl-flex-wrap cl-px-2 cl-py-4 cl-w-full" };
+const _hoisted_6$2 = { class: "cl-mb-4 cl-text-sm cl-w-full" };
+const _hoisted_7$2 = { class: "cl-flex cl-flex-wrap cl-w-full" };
+const _hoisted_8$1 = { class: "!cl-bg-white cl-absolute cl-h-screen cl-overflow-x-auto cl-p-4 cl-text-sm cl-w-full cl-z-10" };
 const _hoisted_9$1 = { class: "cl-border-b cl-border-grey-2 cl-mb-2 cl-pb-2 cl-text-right cl-w-full" };
 const _hoisted_10$1 = { class: "cl-grid cl-grid-cols-3" };
-const _hoisted_11$1 = {
+const _hoisted_11 = {
   key: 1,
   class: "cl-ml-2"
 };
-const _hoisted_12$1 = { class: "cl-overflow-auto cl-w-full" };
-const _hoisted_13$1 = { class: "cl-min-w-full cl-table-fixed" };
-const _hoisted_14$1 = { class: "cl-hidden lg:cl-table-column-group" };
-const _hoisted_15$1 = { class: "cl-hidden lg:cl-table-header-group" };
-const _hoisted_16$1 = ["onClick"];
-const _hoisted_17$1 = { key: 1 };
+const _hoisted_12 = { class: "cl-overflow-auto cl-w-full" };
+const _hoisted_13 = { class: "cl-min-w-full cl-table-fixed" };
+const _hoisted_14 = { class: "cl-hidden lg:cl-table-column-group" };
+const _hoisted_15 = { class: "cl-hidden lg:cl-table-header-group" };
+const _hoisted_16 = ["onClick"];
+const _hoisted_17 = { key: 1 };
 const _hoisted_18 = { key: 0 };
 const _hoisted_19 = { key: 1 };
 const _hoisted_20 = ["colspan"];
@@ -3292,12 +3523,12 @@ const _hoisted_22 = {
   key: 0,
   class: "cl-w-full"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   props: {
     columns: null,
     request: null,
     loading: { type: Boolean },
-    data: { default: () => null }
+    data: { default: null }
   },
   emits: {
     "update:columns": null,
@@ -3408,8 +3639,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       var _a, _b;
       const _component_icon = resolveComponent("icon");
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", _hoisted_1$a, [
-          createVNode(_sfc_main$c, {
+        createElementVNode("div", _hoisted_1$8, [
+          createVNode(_sfc_main$a, {
             columns: unref(currentColumns),
             "onUpdate:columns": _cache[0] || (_cache[0] = ($event) => isRef(currentColumns) ? currentColumns.value = $event : null),
             "edit-mode": editMode.value,
@@ -3424,17 +3655,17 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
         }, [
           createVNode(Transition, { name: "fade" }, {
             default: withCtx(() => [
-              withDirectives(createElementVNode("div", _hoisted_3$7, null, 512), [
+              withDirectives(createElementVNode("div", _hoisted_3$5, null, 512), [
                 [vShow, __props.loading]
               ])
             ]),
             _: 1
           }),
-          createElementVNode("div", _hoisted_4$5, [
-            createElementVNode("div", _hoisted_5$4, [
-              createElementVNode("strong", _hoisted_6$4, toDisplayString(unref(t2)("grid.gridTools")), 1),
-              createElementVNode("div", _hoisted_7$4, [
-                createVNode(_sfc_main$c, {
+          createElementVNode("div", _hoisted_4$3, [
+            createElementVNode("div", _hoisted_5$2, [
+              createElementVNode("strong", _hoisted_6$2, toDisplayString(unref(t2)("grid.gridTools")), 1),
+              createElementVNode("div", _hoisted_7$2, [
+                createVNode(_sfc_main$a, {
                   columns: unref(currentColumns),
                   "onUpdate:columns": _cache[2] || (_cache[2] = ($event) => isRef(currentColumns) ? currentColumns.value = $event : null),
                   "edit-mode": editMode.value,
@@ -3448,7 +3679,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
             ]),
             createVNode(Transition, { name: "grow-down" }, {
               default: withCtx(() => [
-                withDirectives(createElementVNode("div", _hoisted_8$3, [
+                withDirectives(createElementVNode("div", _hoisted_8$1, [
                   createElementVNode("div", _hoisted_9$1, [
                     createVNode(_component_icon, {
                       class: "cl--mt-1 cl-inline-block cl-text-grey-5",
@@ -3470,7 +3701,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                       class: "cl-grid cl-grid-cols-3 cl-mb-4 cl-w-full"
                     }, [
                       createElementVNode("div", null, toDisplayString(column.caption), 1),
-                      createVNode(_sfc_main$f, {
+                      createVNode(_sfc_main$d, {
                         request: unref(currentRequest),
                         "onUpdate:request": _cache[6] || (_cache[6] = ($event) => isRef(currentRequest) ? currentRequest.value = $event : null),
                         column
@@ -3492,7 +3723,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                           icon: "ph:caret-up",
                           onClick: ($event) => setSort(column.field)
                         }, null, 8, ["onClick"]))
-                      ], 64)) : (openBlock(), createElementBlock("div", _hoisted_11$1, " \xA0 "))
+                      ], 64)) : (openBlock(), createElementBlock("div", _hoisted_11, " \xA0 "))
                     ]);
                   }), 128))
                 ], 512), [
@@ -3502,9 +3733,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               _: 1
             })
           ]),
-          createElementVNode("div", _hoisted_12$1, [
-            createElementVNode("table", _hoisted_13$1, [
-              createElementVNode("colgroup", _hoisted_14$1, [
+          createElementVNode("div", _hoisted_12, [
+            createElementVNode("table", _hoisted_13, [
+              createElementVNode("colgroup", _hoisted_14, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleColumns), (column, index) => {
                   return openBlock(), createElementBlock("col", {
                     key: index,
@@ -3513,7 +3744,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                   }, null, 4);
                 }), 128))
               ]),
-              createElementVNode("thead", _hoisted_15$1, [
+              createElementVNode("thead", _hoisted_15, [
                 createElementVNode("tr", null, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleColumns), (column, index) => {
                     var _a2;
@@ -3540,7 +3771,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                         }, null, 512), [
                           [vShow, unref(currentRequest).sort !== null && unref(currentRequest).sort.sortOnColumn === column.field && unref(currentRequest).sort.sortByAscending === false]
                         ])
-                      ], 8, _hoisted_16$1)) : (openBlock(), createElementBlock("span", _hoisted_17$1, toDisplayString(column.caption), 1))
+                      ], 8, _hoisted_16)) : (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(column.caption), 1))
                     ], 4);
                   }), 128))
                 ]),
@@ -3551,7 +3782,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                       class: "cl-p-1",
                       style: normalizeStyle(getStyleForColumn(column.name))
                     }, [
-                      createVNode(_sfc_main$f, {
+                      createVNode(_sfc_main$d, {
                         request: unref(currentRequest),
                         "onUpdate:request": _cache[7] || (_cache[7] = ($event) => isRef(currentRequest) ? currentRequest.value = $event : null),
                         column,
@@ -3571,7 +3802,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                     })
                   }, [
                     (openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleColumns), (column, columnIndex) => {
-                      return openBlock(), createBlock(_sfc_main$g, {
+                      return openBlock(), createBlock(_sfc_main$e, {
                         key: columnIndex,
                         class: "cl-align-top cl-p-2 cl-rounded cl-whitespace-nowrap",
                         style: normalizeStyle(getStyleForColumn(column.name)),
@@ -3620,563 +3851,96 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               ])
             ])
           ]),
-          createVNode(_sfc_main$e, {
+          createVNode(_sfc_main$c, {
             request: unref(currentRequest),
             "onUpdate:request": _cache[8] || (_cache[8] = ($event) => isRef(currentRequest) ? currentRequest.value = $event : null),
             data: __props.data
           }, null, 8, ["request", "data"])
-        ], 8, _hoisted_2$9)
+        ], 8, _hoisted_2$7)
       ], 64);
     };
   }
 });
-var clUiGrid = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-435e22be"]]);
-const _sfc_main$a = {};
-const _hoisted_1$9 = { class: "cl-absolute cl-bg-secondary-default cl-flex cl-h-20 cl-items-center cl-justify-between cl-left-0 cl-top-0 cl-w-full cl-z-40" };
-const _hoisted_2$8 = { class: "cl-flex cl-flex-nowrap" };
+var clUiGrid = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-7df0fada"]]);
+const _sfc_main$8 = {};
+const _hoisted_1$7 = { class: "cl-absolute cl-bg-secondary-default cl-flex cl-h-20 cl-items-center cl-justify-between cl-left-0 cl-top-0 cl-w-full cl-z-40" };
+const _hoisted_2$6 = { class: "cl-flex cl-flex-nowrap" };
 function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("header", _hoisted_1$9, [
+  return openBlock(), createElementBlock("header", _hoisted_1$7, [
     renderSlot(_ctx.$slots, "logo"),
-    createElementVNode("div", _hoisted_2$8, [
+    createElementVNode("div", _hoisted_2$6, [
       renderSlot(_ctx.$slots, "menu"),
       renderSlot(_ctx.$slots, "icon")
     ])
   ]);
 }
-var clUiHeader = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$2]]);
-const _hoisted_1$8 = { class: "md:cl-relative" };
-const _hoisted_2$7 = { class: "cl-bg-blue-light cl-flex cl-items-center cl-select-none md:cl-min-w-[320px]" };
-const _hoisted_3$6 = ["src"];
-const _hoisted_4$4 = { class: "cl-cursor-default cl-flex-grow cl-hidden cl-my-4 cl-text-white md:cl-block" };
-const _hoisted_5$3 = {
-  key: 0,
-  class: "cl-cursor-default cl-overflow-ellipsis cl-whitespace-nowrap"
-};
-const _hoisted_6$3 = {
-  key: 1,
-  class: "cl-cursor-default cl-overflow-ellipsis cl-text-xs cl-whitespace-nowrap"
-};
-const _hoisted_7$3 = { class: "cl-absolute cl-bg-white cl-right-0 cl-shadow-2xl cl-top-20 cl-w-full cl-z-20" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  props: {
-    username: { default: "" },
-    group: { default: "" },
-    image: { default: "" }
-  },
-  setup(__props) {
-    const isOpen = ref(false);
-    return (_ctx, _cache) => {
-      const _component_icon = resolveComponent("icon");
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
-        createElementVNode("div", _hoisted_2$7, [
-          __props.image ? (openBlock(), createElementBlock("img", {
-            key: 0,
-            src: __props.image,
-            class: "cl-hidden cl-m-4 cl-max-h-12 cl-max-w-12 cl-ring-2 cl-ring-white cl-rounded-full md:cl-block"
-          }, null, 8, _hoisted_3$6)) : (openBlock(), createBlock(_component_icon, {
-            key: 1,
-            class: "cl-hidden cl-m-4 cl-text-white md:cl-block",
-            icon: "ph:user-circle",
-            width: "48",
-            height: "48"
-          })),
-          createElementVNode("div", _hoisted_4$4, [
-            __props.username ? (openBlock(), createElementBlock("div", _hoisted_5$3, toDisplayString(__props.username), 1)) : createCommentVNode("", true),
-            __props.group ? (openBlock(), createElementBlock("div", _hoisted_6$3, toDisplayString(__props.group), 1)) : createCommentVNode("", true)
-          ]),
-          createElementVNode("div", {
-            class: "cl-bg-transparent cl-content-center cl-cursor-pointer cl-flex cl-h-20 cl-items-center cl-justify-center cl-justify-items-center cl-transition-all cl-w-10 hover:cl-bg-opacity-10 hover:cl-bg-white md:cl-ml-4 md:cl-w-20",
-            onClick: _cache[0] || (_cache[0] = ($event) => isOpen.value = !isOpen.value)
-          }, [
-            createVNode(_component_icon, {
-              class: normalizeClass(["cl-text-white cl-transform-gpu cl-transition-transform", {
-                "cl-rotate-180": isOpen.value
-              }]),
-              icon: "ph:caret-down"
-            }, null, 8, ["class"])
-          ])
-        ]),
-        createVNode(Transition, { name: "fade" }, {
-          default: withCtx(() => [
-            withDirectives(createElementVNode("div", _hoisted_7$3, [
-              renderSlot(_ctx.$slots, "default")
-            ], 512), [
-              [vShow, isOpen.value]
-            ])
-          ]),
-          _: 3
-        })
-      ]);
-    };
-  }
-});
-var clUiSlider_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _hoisted_1$7 = { class: "cl-flex cl-flex-wrap cl-items-center" };
-const _hoisted_2$6 = ["value", "min", "max", "step", "disabled"];
-const _hoisted_3$5 = { class: "cl-flex cl-flex-1 cl-flex-wrap cl-items-center cl-mb-2 cl-mt-3 cl-relative md:cl-mt-0" };
-const _hoisted_4$3 = { class: "cl-absolute cl-bg-grey-0 cl-leading-6 cl-ml-0 cl-px-3 cl-rounded-full cl-text-center cl-text-xs cl-top-full" };
-const _hoisted_5$2 = { key: 0 };
-const _hoisted_6$2 = ["min", "max", "step", "disabled"];
-const _hoisted_7$2 = { class: "cl-absolute cl-bg-grey-0 cl-leading-6 cl-ml-2 cl-px-3 cl-right-0 cl-rounded-full cl-text-center cl-text-xs cl-top-full" };
-const _hoisted_8$2 = {
-  key: 1,
-  class: "emphasis-danger text-sm w-full"
-};
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  props: {
-    value: null,
-    min: null,
-    max: null,
-    step: { default: 1 },
-    enforceStep: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    showNumericInput: { type: Boolean, default: true }
-  },
-  emits: {
-    "update:value": null
-  },
-  setup(__props, { emit }) {
-    const props = __props;
-    const { n, t: t2 } = useI18n();
-    const { debounce } = useDebouncer();
-    const currentValue = computed({
-      get: () => props.value,
-      set: (value) => emit("update:value", value)
-    });
-    const colour = computed(() => props.disabled ? "rgba(153, 153, 153, 0.8)" : "#9acd32");
-    const percentage = computed(() => {
-      let value = (currentValue.value - props.min) / (props.max - props.min) * 100;
-      if (value < 35 && value > 0) {
-        if (value < 20) {
-          value += 0.5;
-        } else {
-          value += 0.25;
-        }
-      } else if (value > 65 && value < 100) {
-        if (value > 80) {
-          value -= 0.5;
-        } else {
-          value -= 0.25;
-        }
-      }
-      return value;
-    });
-    const validProps = computed(() => props.min <= props.max && props.step > 0);
-    function updateCurrentValue(target, forceUpdate) {
-      var _a;
-      const inputValue = (_a = target == null ? void 0 : target.value) != null ? _a : "";
-      const value = Math.max(Math.min(parseFloat(inputValue) || props.min, props.max), props.min);
-      currentValue.value = props.enforceStep ? Math.ceil(value / props.step) * props.step : value;
-      nextTick(() => forceUpdate());
-    }
-    return (_ctx, _cache) => {
-      return unref(validProps) ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)), [
-        withDirectives(createElementVNode("div", { class: "cl-bg-transparent cl-relative cl-text-center cl-text-sm" }, toDisplayString(unref(currentValue)), 513), [
-          [vShow, !__props.showNumericInput]
-        ]),
-        createElementVNode("div", _hoisted_1$7, [
-          withDirectives(createElementVNode("input", {
-            class: "!cl-text-sm md:!cl-h-8 md:!cl-w-auto",
-            type: "number",
-            value: unref(currentValue),
-            min: __props.min,
-            max: __props.max,
-            step: __props.step,
-            disabled: __props.disabled,
-            onInput: _cache[0] || (_cache[0] = ($event) => unref(debounce)(updateCurrentValue, [$event.target, _ctx.$forceUpdate]))
-          }, null, 40, _hoisted_2$6), [
-            [vShow, __props.showNumericInput]
-          ]),
-          createElementVNode("div", _hoisted_3$5, [
-            createElementVNode("span", _hoisted_4$3, toDisplayString(unref(n)(__props.min, Number.isInteger(__props.min) ? unref(NumberFormat).INTEGER : unref(NumberFormat).DECIMAL)), 1),
-            typeof unref(currentValue) === "number" ? (openBlock(), createElementBlock("div", _hoisted_5$2, [
-              withDirectives(createElementVNode("input", {
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(currentValue) ? currentValue.value = $event : null),
-                class: "cl-align-middle cl-appearance-none cl-bg-gradient-to-r cl-border cl-border-grey-2 cl-delay-500 cl-ease-in cl-flex-1 cl-h-5 cl-mb-2 cl-outline-none cl-rounded-full cl-transition-colors",
-                style: normalizeStyle({
-                  background: `linear-gradient(to right, ${unref(colour)} 0%, ${unref(colour)} ${unref(percentage)}%, white ${unref(percentage)}%, white 100%)`
-                }),
-                type: "range",
-                min: __props.min,
-                max: __props.max,
-                step: __props.step,
-                disabled: __props.disabled
-              }, null, 12, _hoisted_6$2), [
-                [
-                  vModelText,
-                  unref(currentValue),
-                  void 0,
-                  { number: true }
-                ]
-              ])
-            ])) : createCommentVNode("", true),
-            createElementVNode("span", _hoisted_7$2, toDisplayString(unref(n)(__props.max, Number.isInteger(__props.max) ? unref(NumberFormat).INTEGER : unref(NumberFormat).DECIMAL)), 1)
-          ])
-        ])
-      ], 16)) : (openBlock(), createElementBlock("div", _hoisted_8$2, toDisplayString(unref(t2)("slider.invalidProps")), 1));
-    };
-  }
-});
-var clUiSlider = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-3cc89ae4"]]);
-function isInputText(type) {
-  let isText = false;
-  switch (type) {
-    case "email":
-    case "password":
-    case "search":
-    case "tel":
-    case "text":
-    case "url":
-      isText = true;
-      break;
-    default:
-      isText = false;
-      break;
-  }
-  return isText;
-}
-function isInputCalendarSupportedDate(type) {
-  let isSupported = false;
-  switch (type) {
-    case "date":
-    case "datetime":
-    case "time":
-      isSupported = true;
-      break;
-    default:
-      isSupported = false;
-      break;
-  }
-  return isSupported;
-}
-function isInputButton(type) {
-  return type === "button" || type === "submit" || type === "reset";
-}
-function getInputTypeAsCalendarType(type) {
-  let calendarType;
-  switch (type) {
-    case "datetime":
-      calendarType = calendarTypes[1];
-      break;
-    case "time":
-      calendarType = calendarTypes[2];
-      break;
-    case "date":
-    default:
-      calendarType = calendarTypes[0];
-      break;
-  }
-  return calendarType;
-}
-var clUiInput_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _hoisted_1$6 = { class: "cl-align-top cl-inline-block cl-mb-4 cl-mr-4 cl-text-left" };
-const _hoisted_2$5 = { class: "cl-flex cl-justify-between" };
-const _hoisted_3$4 = { class: "cl-text-gray-400 cl-text-xs cl-tracking-widest cl-uppercase cl-w:70%" };
-const _hoisted_4$2 = {
-  key: 0,
-  class: "cl-left-auto cl-relative cl-text-danger-default"
-};
+var clUiHeader = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$2]]);
+const _hoisted_1$6 = { class: "md:cl-relative" };
+const _hoisted_2$5 = { class: "cl-bg-blue-light cl-flex cl-items-center cl-select-none md:cl-min-w-[320px]" };
+const _hoisted_3$4 = ["src"];
+const _hoisted_4$2 = { class: "cl-cursor-default cl-grow cl-hidden cl-my-4 cl-text-white md:cl-block" };
 const _hoisted_5$1 = {
-  key: 1,
-  class: "cl-bg-danger-light cl-block cl-max-h-6 cl-ml-2 cl-px-2 cl-rounded-md cl-text-center cl-text-danger-default cl-text-xs cl-uppercase"
-};
-const _hoisted_6$1 = ["type", "disabled", "min", "max", "minlength", "maxlength", "step", "placeholder", "accept", "name", "onBlur"];
-const _hoisted_7$1 = {
-  key: 4,
-  class: "cl-pb-2"
-};
-const _hoisted_8$1 = {
   key: 0,
-  class: "cl-bg-danger-light cl-px-2 cl-rounded-md cl-text-center cl-text-danger-default cl-text-xs cl-w-auto cl-whitespace-pre-line"
+  class: "cl-cursor-default cl-text-ellipsis cl-whitespace-nowrap"
+};
+const _hoisted_6$1 = {
+  key: 1,
+  class: "cl-cursor-default cl-text-ellipsis cl-text-xs cl-whitespace-nowrap"
 };
+const _hoisted_7$1 = { class: "cl-absolute cl-bg-white cl-right-0 cl-shadow-2xl cl-top-20 cl-w-full cl-z-20" };
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   props: {
-    inputType: { default: "text" },
-    modelValue: { type: [String, Number, Boolean, Date], default: void 0 },
-    label: { default: "" },
-    isRequired: { type: Boolean, default: false },
-    customValidationFunction: { type: Function, default: void 0 },
-    onInputFunction: { type: Function, default: void 0 },
-    min: { default: 0 },
-    max: { default: 512 },
-    step: { default: 1 },
-    validateImmediately: { type: Boolean, default: false },
-    externalErrors: { default: () => [] },
-    disabled: { type: Boolean, default: false },
-    requiredText: { default: "" },
-    placeholderText: { default: "" },
-    fileExtensions: { default: "" },
-    group: { default: "" }
-  },
-  emits: {
-    "update:modelValue": null,
-    click: null,
-    focus: null,
-    validated: null
+    username: { default: "" },
+    group: { default: "" },
+    image: { default: "" }
   },
-  setup(__props, { emit }) {
-    const props = __props;
-    const inputElement = ref(null);
-    const focused = ref(false);
-    const lostFocus = ref(false);
-    const showRequiredAsterisk = computed(getShowAsteriskOrRequired);
-    const dateFlaggedAsOutOfRange = ref(false);
-    const { t: t2 } = useI18n();
-    const currentValue = computed({
-      get: () => props.modelValue,
-      set: (value) => onValueChanged(value)
-    });
-    const currentDateValue = computed({
-      get: () => props.modelValue,
-      set: (value) => updateDateValue(value)
-    });
-    const minAsString = computed(() => typeof props.min === "number" ? props.min.toString() : props.min);
-    const maxAsString = computed(() => typeof props.max === "number" ? props.max.toString() : props.max);
-    const minAsNumber = computed(() => typeof props.min === "number" ? props.min : parseFloat(props.min));
-    const maxAsNumber = computed(() => typeof props.max === "number" ? props.max : parseFloat(props.max));
-    const internalErrors = ref([]);
-    const errors = computed(() => {
-      var _a, _b, _c, _d;
-      return [
-        ...(_b = (_a = internalErrors.value) == null ? void 0 : _a.filter((e) => {
-          var _a2;
-          return ((_a2 = e == null ? void 0 : e.length) != null ? _a2 : 0) > 0;
-        })) != null ? _b : [],
-        ...(_d = (_c = props.externalErrors) == null ? void 0 : _c.filter((e) => {
-          var _a2;
-          return ((_a2 = e == null ? void 0 : e.length) != null ? _a2 : 0) > 0;
-        })) != null ? _d : []
-      ].join("\n");
-    });
-    function updateDateValue(value) {
-      updateAndValidateValue(value);
-      dateFlaggedAsOutOfRange.value = false;
-    }
-    function onValueChanged(value) {
-      if (props.onInputFunction !== void 0) {
-        value = props.onInputFunction(value);
-      }
-      updateAndValidateValue(value);
-    }
-    function updateAndValidateValue(value) {
-      const defaultSuccess = {
-        message: "",
-        valid: true
-      };
-      const customValidationSuccess = props.customValidationFunction === null || props.customValidationFunction === void 0 ? defaultSuccess : props.customValidationFunction(props.label, value);
-      const validationPromises = [props.customValidationFunction === null || props.customValidationFunction === void 0 ? new Promise((resolve) => {
-        resolve(defaultSuccess);
-      }) : new Promise((resolve) => {
-        resolve(props.customValidationFunction(props.label, value));
-      })];
-      if (typeof value === "string" || typeof value === "number" || value instanceof Date) {
-        validationPromises.push(validateMinValue(props.min, props.inputType, props.label, value));
-        validationPromises.push(validateMaxValue(props.max, props.inputType, props.label, value));
-      }
-      if (props.isRequired) {
-        validationPromises.push(validateRequired(props.label, value));
-      }
-      if (props.inputType === "email" && typeof value === "string") {
-        validationPromises.push(validateEmail(props.label, value));
-      }
-      Promise.all(validationPromises).then((internalValidationResults) => {
-        const messages2 = [...internalValidationResults.map((e) => e.message)];
-        let invalid = internalValidationResults.some((e) => e.valid === false) || !customValidationSuccess.valid;
-        if (dateFlaggedAsOutOfRange.value) {
-          messages2.push(t2("input.dateOutOfRange"));
-          invalid = true;
-        }
-        if (invalid) {
-          internalErrors.value = messages2;
-          emit("validated", false);
-        } else {
-          internalErrors.value = [];
-          emit("validated", true);
-        }
-        emit("update:modelValue", value);
-      });
-    }
-    function getStyle() {
-      let style = "";
-      if (props.inputType === "color" && currentValue.value) {
-        if (props.disabled) {
-          style = `background: #999999`;
-        } else {
-          style = `background: ${currentValue.value};`;
-        }
-      }
-      return style;
-    }
-    function emitClickIfButton(event) {
-      if (isInputButton(props.inputType)) {
-        event.preventDefault();
-        emit("click");
-      }
-    }
-    function incrementNumericValue() {
-      if (inputElement.value) {
-        inputElement.value.stepUp();
-        inputElement.value.focus();
-        onValueChanged(inputElement.value.valueAsNumber);
-      }
-    }
-    function decrementNumericValue() {
-      if (inputElement.value) {
-        inputElement.value.stepDown();
-        inputElement.value.focus();
-        onValueChanged(inputElement.value.valueAsNumber);
-      }
-    }
-    function toggleFocus(focus) {
-      focused.value = focus;
-    }
-    function onLostFocus() {
-      lostFocus.value = true;
-      toggleFocus(false);
-    }
-    function onMouseWheel(wheelEvent) {
-      wheelEvent.target.blur();
-    }
-    function getShowAsteriskOrRequired() {
-      var _a;
-      let asterisk = true;
-      const currentState = showRequiredAsterisk.value;
-      if (focused.value) {
-        asterisk = currentState;
-      } else if (lostFocus.value && ((_a = currentValue.value) == null ? void 0 : _a.toString().trim()) === "") {
-        asterisk = false;
-      }
-      return asterisk;
-    }
-    function onDateOutOfRange() {
-      dateFlaggedAsOutOfRange.value = true;
-    }
-    onMounted(() => {
-      if (props.validateImmediately) {
-        onValueChanged(props.modelValue);
-      }
-    });
-    watch(() => props.isRequired, () => onValueChanged(props.modelValue));
+  setup(__props) {
+    const isOpen = ref(false);
     return (_ctx, _cache) => {
       const _component_icon = resolveComponent("icon");
       return openBlock(), createElementBlock("div", _hoisted_1$6, [
-        createElementVNode("div", {
-          class: "cl-relative",
-          onMouseenter: _cache[7] || (_cache[7] = ($event) => toggleFocus(true)),
-          onMouseleave: _cache[8] || (_cache[8] = ($event) => toggleFocus(false))
-        }, [
-          createElementVNode("div", _hoisted_2$5, [
-            createElementVNode("label", _hoisted_3$4, toDisplayString(__props.label), 1),
-            __props.isRequired && unref(showRequiredAsterisk) ? (openBlock(), createElementBlock("label", _hoisted_4$2, " * ")) : createCommentVNode("", true),
-            __props.isRequired && !unref(showRequiredAsterisk) ? (openBlock(), createElementBlock("label", _hoisted_5$1, toDisplayString(__props.requiredText), 1)) : createCommentVNode("", true)
-          ]),
-          __props.inputType !== "range" && !unref(isInputCalendarSupportedDate)(__props.inputType) ? withDirectives((openBlock(), createElementBlock("input", {
+        createElementVNode("div", _hoisted_2$5, [
+          __props.image ? (openBlock(), createElementBlock("img", {
             key: 0,
-            ref: (_value, _refs) => {
-              _refs["inputElement"] = _value;
-              inputElement.value = _value;
-            },
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(currentValue) ? currentValue.value = $event : null),
-            class: normalizeClass(["cl-block cl-border cl-duration-300 cl-h-fit cl-mb-1 cl-transition cl-w-full focus:cl-outline-none", {
-              "hover:!cl-border-grey-3": __props.disabled === false && !unref(isInputButton)(__props.inputType),
-              "!cl-cursor-default": __props.disabled,
-              "!cl-border-danger-default": unref(errors).length > 0,
-              "cl-border-grey-0 focus:cl-border-blue-light": unref(errors).length === 0 && !unref(isInputButton)(__props.inputType),
-              "!cl-p-2": __props.inputType === "checkbox" || __props.inputType === "radio",
-              "cl-p-3 cl-rounded-lg": !unref(isInputButton)(__props.inputType)
-            }]),
-            style: normalizeStyle(getStyle()),
-            type: __props.inputType,
-            disabled: __props.disabled,
-            min: __props.min,
-            max: __props.max,
-            minlength: unref(isInputText)(__props.inputType) ? __props.min : 0,
-            maxlength: unref(isInputText)(__props.inputType) ? __props.max : 0,
-            step: __props.step,
-            placeholder: __props.placeholderText,
-            accept: __props.fileExtensions,
-            name: __props.group,
-            onClick: _cache[1] || (_cache[1] = ($event) => emitClickIfButton($event)),
-            onFocus: _cache[2] || (_cache[2] = ($event) => {
-              toggleFocus(true);
-              _ctx.$emit("focus");
-            }),
-            onBlur: withModifiers(onLostFocus, ["self"]),
-            onMousewheel: onMouseWheel
-          }, null, 46, _hoisted_6$1)), [
-            [vModelDynamic, unref(currentValue)]
-          ]) : createCommentVNode("", true),
-          unref(isInputCalendarSupportedDate)(__props.inputType) ? (openBlock(), createBlock(unref(_sfc_main$o), {
+            src: __props.image,
+            class: "cl-hidden cl-m-4 cl-max-h-12 cl-max-w-12 cl-ring-2 cl-ring-white cl-rounded-full md:cl-block"
+          }, null, 8, _hoisted_3$4)) : (openBlock(), createBlock(_component_icon, {
             key: 1,
-            ref: (_value, _refs) => {
-              _refs["inputElement"] = _value;
-              inputElement.value = _value;
-            },
-            date: unref(currentDateValue),
-            "onUpdate:date": _cache[3] || (_cache[3] = ($event) => isRef(currentDateValue) ? currentDateValue.value = $event : null),
-            class: normalizeClass(["cl-block cl-duration-300 cl-h-fit cl-mb-1 cl-rounded-lg cl-text-sm cl-transition cl-w-full focus:cl-outline-none", {
-              "hover:cl-border-grey-3": !__props.disabled,
-              "!cl-border-danger-default": unref(errors).length > 0
-            }]),
-            disabled: __props.disabled,
-            type: unref(getInputTypeAsCalendarType)(__props.inputType),
-            min: unref(minAsString),
-            max: unref(maxAsString),
-            onBlur: withModifiers(onLostFocus, ["self"]),
-            onValueOutOfRange: onDateOutOfRange
-          }, null, 8, ["date", "class", "disabled", "type", "min", "max", "onBlur"])) : createCommentVNode("", true),
-          __props.inputType === "number" && !__props.disabled ? (openBlock(), createElementBlock("div", {
-            key: 2,
-            class: normalizeClass(["cl-absolute cl-duration-300 cl-right-1 cl-transition", {
-              "cl-opacity-0": !focused.value
-            }]),
-            style: { "bottom": "1.625rem" }
-          }, [
-            createVNode(_component_icon, {
-              icon: "ph:caret-up-bold",
-              class: "cl-bg-link-default cl-rounded-md cl-text-sm cl-text-white hover:cl-bg-link-light hover:cl-cursor-pointer",
-              onClick: incrementNumericValue,
-              onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {
-              }, ["prevent"]))
-            })
-          ], 2)) : createCommentVNode("", true),
-          __props.inputType === "number" && !__props.disabled ? (openBlock(), createElementBlock("div", {
-            key: 3,
-            class: normalizeClass(["cl-absolute cl-bottom-2 cl-duration-300 cl-right-1 cl-transition", {
-              "cl-opacity-0": !focused.value
-            }])
+            class: "cl-hidden cl-m-4 cl-text-white md:cl-block",
+            icon: "ph:user-circle",
+            width: "48",
+            height: "48"
+          })),
+          createElementVNode("div", _hoisted_4$2, [
+            __props.username ? (openBlock(), createElementBlock("div", _hoisted_5$1, toDisplayString(__props.username), 1)) : createCommentVNode("", true),
+            __props.group ? (openBlock(), createElementBlock("div", _hoisted_6$1, toDisplayString(__props.group), 1)) : createCommentVNode("", true)
+          ]),
+          createElementVNode("div", {
+            class: "cl-bg-transparent cl-content-center cl-cursor-pointer cl-flex cl-h-20 cl-items-center cl-justify-center cl-justify-items-center cl-transition-all cl-w-10 hover:cl-bg-opacity-10 hover:cl-bg-white md:cl-ml-4 md:cl-w-20",
+            onClick: _cache[0] || (_cache[0] = ($event) => isOpen.value = !isOpen.value)
           }, [
             createVNode(_component_icon, {
-              icon: "ph:caret-down-bold",
-              class: "cl-bg-link-default cl-rounded-md cl-text-sm cl-text-white hover:cl-bg-link-light hover:cl-cursor-pointer",
-              onClick: decrementNumericValue,
-              onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {
-              }, ["prevent"]))
-            })
-          ], 2)) : createCommentVNode("", true),
-          __props.inputType === "range" && typeof unref(currentValue) === "number" ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
-            createVNode(unref(clUiSlider), {
-              ref: (_value, _refs) => {
-                _refs["inputElement"] = _value;
-                inputElement.value = _value;
-              },
-              value: unref(currentValue),
-              "onUpdate:value": _cache[6] || (_cache[6] = ($event) => isRef(currentValue) ? currentValue.value = $event : null),
-              min: unref(minAsNumber),
-              max: unref(maxAsNumber),
-              step: __props.step,
-              disabled: __props.disabled,
-              "show-numeric-input": false,
-              onBlur: withModifiers(onLostFocus, ["self"])
-            }, null, 8, ["value", "min", "max", "step", "disabled", "onBlur"])
-          ])) : createCommentVNode("", true)
-        ], 32),
-        unref(errors).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_8$1, toDisplayString(unref(errors)), 1)) : createCommentVNode("", true)
+              class: normalizeClass(["cl-text-white cl-transform-gpu cl-transition-transform", {
+                "cl-rotate-180": isOpen.value
+              }]),
+              icon: "ph:caret-down"
+            }, null, 8, ["class"])
+          ])
+        ]),
+        createVNode(Transition, { name: "fade" }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", _hoisted_7$1, [
+              renderSlot(_ctx.$slots, "default")
+            ], 512), [
+              [vShow, isOpen.value]
+            ])
+          ]),
+          _: 3
+        })
       ]);
     };
   }
 });
-var clUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-22c48b29"]]);
 const inputTypes = [
   "button",
   "checkbox",
@@ -4288,7 +4052,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var clUiLogin_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$4 = { class: "cl-relative" };
 const _hoisted_2$3 = { class: "cl-h-screen cl-z-0" };
 const _hoisted_3$2 = { class: "cl-absolute cl-bg-secondary-default cl-gap-y-1 cl-grid cl-grid-cols-1 cl-left-0 cl-opacity-95 cl-p-6 cl-top-0 cl-w-full cl-z-10 lg:cl-gap-x-1 lg:cl-grid-cols-10 lg:cl-p-10" };
@@ -4299,16 +4062,9 @@ const _hoisted_5 = {
 };
 const _hoisted_6 = { class: "cl-col-span-3" };
 const _hoisted_7 = { class: "cl-inline cl-relative cl-text-grey-4" };
-const _hoisted_8 = ["data-valid", "placeholder"];
-const _hoisted_9 = { class: "cl-text-grey-3 cl-text-sm" };
-const _hoisted_10 = { class: "cl-flex cl-mt-2" };
-const _hoisted_11 = { class: "cl-align-middle cl-inline-block cl-ml-2" };
-const _hoisted_12 = { class: "cl-flex cl-mt-2" };
-const _hoisted_13 = { class: "cl-align-middle cl-inline-block cl-ml-2" };
-const _hoisted_14 = { class: "cl-col-span-3" };
-const _hoisted_15 = { class: "cl-inline cl-relative cl-text-grey-4" };
-const _hoisted_16 = ["type", "data-valid", "placeholder"];
-const _hoisted_17 = { class: "cl-col-span-10 cl-emphasis-danger cl-mt-10 cl-p-3 cl-rounded-md cl-text-sm md:cl-mt-3" };
+const _hoisted_8 = { class: "cl-col-span-3" };
+const _hoisted_9 = { class: "cl-inline cl-relative cl-text-grey-4" };
+const _hoisted_10 = { class: "cl-col-span-10 cl-emphasis-danger cl-mt-10 cl-p-3 cl-rounded-md cl-text-sm md:cl-mt-3" };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   props: {
     errors: { default: () => [] },
@@ -4323,7 +4079,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     const username = ref("");
     const password = ref("");
     const passwordFieldType = ref("password");
-    const usernameValid = computed(() => /[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)/gi.test(username.value));
+    const usernameValid = ref();
     function login() {
       const authentication = {
         username: username.value,
@@ -4334,18 +4090,31 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     function clearErrors() {
       emit("update:errors", []);
     }
+    function emptyIsInvalidValidation(_, value) {
+      const state = {
+        valid: true,
+        message: ""
+      };
+      if (typeof value === "string" && value.trim() === "") {
+        state.valid = false;
+      }
+      return state;
+    }
+    function onUsernameValidated(valid, _) {
+      usernameValid.value = valid;
+    }
     return (_ctx, _cache) => {
       const _component_icon = resolveComponent("icon");
       return openBlock(), createElementBlock("div", _hoisted_1$4, [
         createElementVNode("div", _hoisted_2$3, [
-          renderSlot(_ctx.$slots, "background", {}, void 0, true)
+          renderSlot(_ctx.$slots, "background")
         ]),
         createElementVNode("form", _hoisted_3$2, [
           createElementVNode("div", _hoisted_4, [
-            renderSlot(_ctx.$slots, "logo", {}, void 0, true)
+            renderSlot(_ctx.$slots, "logo")
           ]),
           _ctx.$slots["language-switcher"] ? (openBlock(), createElementBlock("div", _hoisted_5, [
-            renderSlot(_ctx.$slots, "language-switcher", {}, void 0, true)
+            renderSlot(_ctx.$slots, "language-switcher")
           ])) : createCommentVNode("", true),
           createElementVNode("div", {
             class: normalizeClass(["cl-gap-y-4 cl-grid cl-grid-cols-1 lg:cl-gap-x-2 lg:cl-grid-cols-8", {
@@ -4356,66 +4125,39 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             createElementVNode("div", _hoisted_6, [
               createElementVNode("div", _hoisted_7, [
                 createVNode(_component_icon, {
-                  class: "cl-absolute cl-left-3 cl-top-2",
+                  class: "cl-absolute cl-left-3 cl-top-2.5",
                   icon: "ph:user",
                   size: 18
                 }),
-                withDirectives(createElementVNode("input", {
+                createVNode(ClUiInput, {
+                  modelValue: username.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => username.value = $event),
-                  class: "!cl-pb-1 !cl-pl-9",
-                  type: "email",
-                  "data-valid": unref(usernameValid),
-                  placeholder: unref(t2)("login.email"),
+                  modelModifiers: { trim: true },
+                  class: "!cl-border-2 !cl-mb-1 cl-w-full",
+                  "input-type": "email",
+                  "highlight-when-valid": true,
+                  label: "Username",
+                  "show-label": false,
+                  "placeholder-text": unref(t2)("login.email"),
                   autocomplete: "username",
-                  onInput: clearErrors
-                }, null, 40, _hoisted_8), [
-                  [
-                    vModelText,
-                    username.value,
-                    void 0,
-                    { trim: true }
-                  ]
-                ])
-              ]),
-              createVNode(Transition, { name: "fade" }, {
-                default: withCtx(() => [
-                  withDirectives(createElementVNode("div", _hoisted_9, [
-                    withDirectives(createElementVNode("div", _hoisted_10, [
-                      createVNode(_component_icon, {
-                        class: "cl-mt-1 cl-text-primary-default",
-                        icon: "ph:check",
-                        size: 16
-                      }),
-                      createElementVNode("em", _hoisted_11, toDisplayString(unref(t2)("login.validEmail")), 1)
-                    ], 512), [
-                      [vShow, unref(usernameValid)]
-                    ]),
-                    withDirectives(createElementVNode("div", _hoisted_12, [
-                      createVNode(_component_icon, {
-                        class: "cl-mt-1 cl-text-danger-default",
-                        icon: "ph:x",
-                        size: 16
-                      }),
-                      createElementVNode("em", _hoisted_13, toDisplayString(unref(t2)("login.invalidEmail")), 1)
-                    ], 512), [
-                      [vShow, !unref(usernameValid)]
-                    ])
-                  ], 512), [
-                    [vShow, username.value !== ""]
-                  ])
-                ]),
-                _: 1
-              })
+                  "validate-immediately": true,
+                  "custom-validation-function": emptyIsInvalidValidation,
+                  "input-specific-classes": "!cl-pl-9",
+                  "message-when-valid": unref(t2)("login.validEmail"),
+                  onInput: clearErrors,
+                  onValidated: onUsernameValidated
+                }, null, 8, ["modelValue", "placeholder-text", "message-when-valid"])
+              ])
             ]),
-            createElementVNode("div", _hoisted_14, [
-              createElementVNode("div", _hoisted_15, [
+            createElementVNode("div", _hoisted_8, [
+              createElementVNode("div", _hoisted_9, [
                 createVNode(_component_icon, {
-                  class: "cl-absolute cl-left-3 cl-top-2",
+                  class: "cl-absolute cl-left-3 cl-top-2.5",
                   icon: "ph:lock",
                   size: 18
                 }),
                 withDirectives(createVNode(_component_icon, {
-                  class: "cl-absolute cl-cursor-pointer cl-right-3 cl-top-2",
+                  class: "cl-absolute cl-cursor-pointer cl-right-6 cl-top-2.5",
                   icon: "ph:eye",
                   size: 18,
                   onClick: _cache[1] || (_cache[1] = ($event) => passwordFieldType.value = "text")
@@ -4423,24 +4165,26 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                   [vShow, passwordFieldType.value === "password"]
                 ]),
                 withDirectives(createVNode(_component_icon, {
-                  class: "cl-absolute cl-cursor-pointer cl-right-3 cl-top-2",
+                  class: "cl-absolute cl-cursor-pointer cl-right-6 cl-top-2.5",
                   icon: "ph:eye-slash",
                   size: 18,
                   onClick: _cache[2] || (_cache[2] = ($event) => passwordFieldType.value = "password")
                 }, null, 512), [
                   [vShow, passwordFieldType.value === "text"]
                 ]),
-                withDirectives(createElementVNode("input", {
+                createVNode(ClUiInput, {
+                  modelValue: password.value,
                   "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => password.value = $event),
-                  class: "!cl-pb-1 !cl-pl-9 !cl-pr-9",
-                  type: passwordFieldType.value,
-                  "data-valid": password.value !== "",
-                  placeholder: unref(t2)("login.password"),
+                  class: "!cl-border-2 cl-w-full",
+                  "input-type": passwordFieldType.value,
+                  "highlight-when-valid": true,
+                  "placeholder-text": unref(t2)("login.password"),
                   autocomplete: "current-password",
+                  "validate-immediately": true,
+                  "input-specific-classes": "!cl-pl-9 !cl-pr-9",
+                  "custom-validation-function": emptyIsInvalidValidation,
                   onInput: clearErrors
-                }, null, 40, _hoisted_16), [
-                  [vModelDynamic, password.value]
-                ])
+                }, null, 8, ["modelValue", "input-type", "placeholder-text"])
               ])
             ]),
             createElementVNode("div", {
@@ -4449,10 +4193,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               }])
             }, [
               createVNode(_sfc_main$p, {
-                class: "cl-w-full",
+                class: "!cl-leading-9 cl-w-full",
                 colour: "blue",
                 loading: __props.loading,
-                disabled: !unref(usernameValid) || password.value === "",
+                disabled: !usernameValid.value || password.value === "",
                 onClick: withModifiers(login, ["prevent"])
               }, {
                 default: withCtx(() => [
@@ -4466,7 +4210,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             default: withCtx(() => {
               var _a;
               return [
-                withDirectives(createElementVNode("span", _hoisted_17, [
+                withDirectives(createElementVNode("span", _hoisted_10, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(__props.errors, (error, index) => {
                     return openBlock(), createElementBlock("div", {
                       key: index,
@@ -4485,7 +4229,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var clUiLogin = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-2e5cd708"]]);
 const modalSizes = [
   "x-small",
   "small",
@@ -4653,11 +4396,9 @@ var components = /* @__PURE__ */ Object.freeze({
   clUiButton: _sfc_main$p,
   buttonColours,
   buttonSizes,
-  clUiCalendar: _sfc_main$o,
-  calendarTypes,
-  clUiCard: _sfc_main$n,
+  clUiCard: _sfc_main$o,
   cardSizes,
-  clUiComboBox: _sfc_main$i,
+  clUiComboBox: _sfc_main$g,
   isComboBoxItem,
   isComboBoxCreateRequest,
   clUiFooter,
@@ -4673,15 +4414,15 @@ var components = /* @__PURE__ */ Object.freeze({
   isFilterRequest,
   isFilterResponse,
   clUiHeader,
-  clUiHeaderMenu: _sfc_main$9,
-  clUiInput,
+  clUiHeaderMenu: _sfc_main$7,
+  clUiInput: ClUiInput,
   inputTypes,
   clUiLanguageSwitcher: _sfc_main$6,
   isLanguageLocaleFormat,
   isLanguageArray,
   clUiLoadingSpinner: ClUiLoadingSpinner,
-  clUiLogin,
-  clUiModal: _sfc_main$m,
+  clUiLogin: _sfc_main$5,
+  clUiModal: _sfc_main$k,
   modalSizes,
   modalColours,
   clUiNavigation,
@@ -4689,18 +4430,8 @@ var components = /* @__PURE__ */ Object.freeze({
   clUiNavigationGroup: _sfc_main$2,
   clUiNavigationSection,
   clUiNavigationItem,
-  clUiNotification: _sfc_main$s,
-  clUiSlider
+  clUiNotification: _sfc_main$s
 });
-Date.prototype.toLocaleMonthString = function(locale) {
-  return i18n.global.d(this, DateFormat.MONTH_YEAR, locale != null ? locale : i18n.global.locale.value);
-};
-Date.prototype.toLocaleTimeStringWithoutMilliseconds = function(locale) {
-  return i18n.global.d(this, DateFormat.TIME, locale != null ? locale : i18n.global.locale.value);
-};
-Date.prototype.toLocaleStringWithoutMilliseconds = function(locale) {
-  return i18n.global.d(this, DateFormat.DATETIME, locale != null ? locale : i18n.global.locale.value);
-};
 var main = "";
 const install = (app) => {
   app.use(i18n);
@@ -4712,4 +4443,4 @@ const install = (app) => {
     app.component(name, component);
   });
 };
-export { DateFormat, FilterOperation, NumberFormat, buttonColours, buttonSizes, calendarTypes, cardSizes, _sfc_main$v as clUiAccordion, clUiAccordionHeader, _sfc_main$u as clUiAccordionItem, _sfc_main$r as clUiApp, _sfc_main$p as clUiButton, _sfc_main$o as clUiCalendar, _sfc_main$n as clUiCard, _sfc_main$i as clUiComboBox, clUiFooter, clUiGrid, clUiHeader, _sfc_main$9 as clUiHeaderMenu, clUiInput, _sfc_main$6 as clUiLanguageSwitcher, ClUiLoadingSpinner as clUiLoadingSpinner, clUiLogin, _sfc_main$m as clUiModal, clUiNavigation, _sfc_main$2 as clUiNavigationGroup, _sfc_main$3 as clUiNavigationIcon, clUiNavigationItem, clUiNavigationSection, _sfc_main$s as clUiNotification, clUiSlider, compareByProperty, copy, datetimeFormats, install as default, filterMethodTypes, generateStringId, getParamsByName, gridColumnTypes, i18n, inputTypes, isComboBoxCreateRequest, isComboBoxItem, isFilterRequest, isFilterResponse, isGridColumn, isGridColumnArray, isLanguageArray, isLanguageLocaleFormat, messages, modalColours, modalSizes, nameOf, numberFormats, setCurrentLocale, setLocaleDateTimeFormats, setLocaleMessages, setLocaleNumberFormats, showNotification, stringFormats, useDebouncer, validateEmail, validateMaxValue, validateMinValue };
+export { DateFormat, FilterOperation, NumberFormat, buttonColours, buttonSizes, cardSizes, _sfc_main$v as clUiAccordion, clUiAccordionHeader, _sfc_main$u as clUiAccordionItem, _sfc_main$r as clUiApp, _sfc_main$p as clUiButton, _sfc_main$o as clUiCard, _sfc_main$g as clUiComboBox, clUiFooter, clUiGrid, clUiHeader, _sfc_main$7 as clUiHeaderMenu, ClUiInput as clUiInput, _sfc_main$6 as clUiLanguageSwitcher, ClUiLoadingSpinner as clUiLoadingSpinner, _sfc_main$5 as clUiLogin, _sfc_main$k as clUiModal, clUiNavigation, _sfc_main$2 as clUiNavigationGroup, _sfc_main$3 as clUiNavigationIcon, clUiNavigationItem, clUiNavigationSection, _sfc_main$s as clUiNotification, datetimeFormats, install as default, filterMethodTypes, gridColumnTypes, i18n, inputTypes, isComboBoxCreateRequest, isComboBoxItem, isFilterRequest, isFilterResponse, isGridColumn, isGridColumnArray, isLanguageArray, isLanguageLocaleFormat, messages, modalColours, modalSizes, numberFormats, setCurrentLocale, setLocaleDateTimeFormats, setLocaleMessages, setLocaleNumberFormats, showNotification, stringFormats, validateEmail, validateMaxValue, validateMinValue };