@citruslime/ui 2.0.0-beta.13 → 2.0.0-beta.17

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

@@ -31,7 +31,7 @@ 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, reactive, toRefs, nextTick, createBlock, Teleport, renderList, unref, mergeProps, toDisplayString, createCommentVNode, computed, watch, onMounted, onUnmounted, isRef, normalizeStyle, vModelText, withModifiers, vModelDynamic, withKeys, createTextVNode, watchEffect, createSlots } from "vue";
 import { createI18n, useI18n } from "vue-i18n";
 import Flatpickr from "flatpickr";
 const _hoisted_1$u = { class: "cl-overflow-hidden" };
@@ -76,7 +76,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 +118,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]
@@ -183,236 +183,6 @@ function getParamsByName(stringToSearch, paramToFind) {
   }
   return valueToReturn;
 }
-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;
-  }
-  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;
-  }
-  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(" ");
-}
-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;
-  }
-  const longerLength = longerString.length;
-  if (longerLength === 0) {
-    similarityToReturn = 100;
-  } else {
-    similarityToReturn = Math.round((longerLength - levenshtein(longerString, shorterString)) / longerLength * 100);
-  }
-  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}`);
-};
 var NumberFormat;
 (function(NumberFormat2) {
   NumberFormat2["CURRENCY"] = "currency";
@@ -502,8 +272,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."
@@ -877,32 +646,88 @@ const buttonSizes = [
   "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) {
-  (function(global2, factory) {
-    factory(exports);
-  })(commonjsGlobal, function(exports2) {
-    var fp = typeof window !== "undefined" && window.flatpickr !== void 0 ? window.flatpickr : {
-      l10ns: {}
-    };
-    var German = {
-      weekdays: {
-        shorthand: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
-        longhand: [
-          "Sonntag",
-          "Montag",
-          "Dienstag",
-          "Mittwoch",
-          "Donnerstag",
-          "Freitag",
-          "Samstag"
-        ]
-      },
-      months: {
-        shorthand: [
-          "Jan",
-          "Feb",
+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);
+    };
+  }
+});
+const cardSizes = [
+  "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) {
+  (function(global2, factory) {
+    factory(exports);
+  })(commonjsGlobal, function(exports2) {
+    var fp = typeof window !== "undefined" && window.flatpickr !== void 0 ? window.flatpickr : {
+      l10ns: {}
+    };
+    var German = {
+      weekdays: {
+        shorthand: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
+        longhand: [
+          "Sonntag",
+          "Montag",
+          "Dienstag",
+          "Mittwoch",
+          "Donnerstag",
+          "Freitag",
+          "Samstag"
+        ]
+      },
+      months: {
+        shorthand: [
+          "Jan",
+          "Feb",
           "M\xE4r",
           "Apr",
           "Mai",
@@ -1312,7 +1137,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,9 +1191,9 @@ 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 },
     datePlaceholder: { default: "Select date." },
@@ -1552,16 +1377,13 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
             element.value = _value;
           }
         }, _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 +1393,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,579 +1427,1026 @@ 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);
-  }
-  function close() {
-    if (!props.preventClose) {
-      visible.value = false;
-      document.removeEventListener("keydown", closeOnKeyPress);
-    }
+var clUiSlider = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-31c5214e"]]);
+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 closeOnKeyPress(event) {
-    if (event.key === "Escape") {
-      close();
-    }
+  return isText;
+}
+function isInputCalendarSupportedDate(type) {
+  let isSupported = false;
+  switch (type) {
+    case "date":
+    case "datetime":
+    case "time":
+      isSupported = true;
+      break;
+    default:
+      isSupported = false;
+      break;
   }
-  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);
-  };
+  return isSupported;
 }
-const _sfc_main$m = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
-  props: {
-    headerColour: { default: "white" },
-    preventClose: { type: Boolean, default: false },
-    size: { default: "medium" }
-  },
-  setup: setup$2
-}));
-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 = {
+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-w-1/2"
+  class: "cl-block cl-left-auto cl-relative cl-text-danger-default"
 };
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
-  props: {
-    showClearButton: { type: Boolean, default: false },
-    text: { default: "" },
-    additionalText: { default: "" }
-  },
-  emits: {
-    "clear-object": null
-  },
-  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),
-        createElementVNode("div", {
-          class: normalizeClass({
-            "cl-w-1/2": __props.additionalText !== "",
-            "cl-w-full": __props.additionalText === ""
-          })
-        }, toDisplayString(__props.text), 3),
-        withDirectives(createElementVNode("div", {
-          class: "cl-cursor-pointer cl-float-right",
-          onMousedown: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("clear-object"))
-        }, [
-          createVNode(_component_icon, {
-            class: "cl-mt-0.5 cl-rounded-full cl-transition-colors hover:cl-text-link-default",
-            icon: "ph:x-circle"
-          })
-        ], 544), [
-          [vShow, __props.showClearButton]
-        ])
-      ]);
-    };
-  }
-});
-const _hoisted_1$j = {
+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-w-1/2"
+  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 _hoisted_2$i = { class: "cl-float-right cl-py-1.5" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   props: {
-    isCreateNewOption: { type: Boolean, default: false },
-    selectedIndex: { default: -1 },
-    text: { default: "" },
-    option: { default: () => null },
-    index: null
+    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: {
-    "create-object": null,
-    "select-object": null,
-    "option-highlighted": null
+    "update:modelValue": null,
+    click: null,
+    focus: null,
+    input: null,
+    validated: null
   },
   setup(__props, { emit }) {
     const props = __props;
-    const displayedText = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.option) == null ? void 0 : _a.name) != null ? _b : props.text;
+    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 displayedParent = computed(() => {
-      var _a, _b;
-      return (_b = (_a = props.option) == null ? void 0 : _a.parentName) != null ? _b : "";
+    const currentDateValue = computed({
+      get: () => props.modelValue,
+      set: (value) => updateDateValue(value)
     });
-    const isHighlighted = ref(false);
-    function optionSelected() {
-      var _a;
-      if (props.isCreateNewOption === true) {
-        emit("create-object");
-      } else {
-        emit("select-object", (_a = props.option) == null ? void 0 : _a.id);
+    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 onHover(hovered) {
-      if (hovered === true) {
-        isHighlighted.value = true;
-        emit("option-highlighted", props.index);
-      } else {
-        if (props.index !== props.selectedIndex) {
-          isHighlighted.value = false;
+    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 updateHighlight() {
-      if (props.selectedIndex === props.index) {
-        isHighlighted.value = true;
-      } else {
-        isHighlighted.value = false;
+    function emitClickIfButton(event) {
+      if (isInputButton(props.inputType)) {
+        event.preventDefault();
+        emit("click", event);
+      } else if (props.inputType === "checkbox") {
+        emit("click", event);
       }
     }
-    watch(() => props.selectedIndex, () => updateHighlight());
-    return (_ctx, _cache) => {
-      var _a, _b;
-      const _component_icon = resolveComponent("icon");
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["cl-border-b cl-border-grey-0 cl-border-t cl-cursor-pointer cl-duration-75 cl-flex cl-p-1 cl-transition-colors", {
-          "cl-bg-grey-0": isHighlighted.value === false,
-          "cl-bg-primary-default cl-text-white": isHighlighted.value
-        }]),
-        onMousedown: optionSelected,
-        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),
-        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, [
-          createVNode(_component_icon, {
-            class: "cl-bg-primary-default cl-rounded-full cl-text-white",
-            icon: "ph:plus-circle"
-          })
-        ], 512), [
-          [vShow, __props.isCreateNewOption]
-        ])
-      ], 34);
-    };
-  }
-});
-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({
-  props: {
-    loading: { type: Boolean, default: false },
-    objectType: null,
-    objectParentType: { default: "" },
-    errorMessage: { default: "" },
-    canCreateNewObject: { type: Boolean, default: false },
-    canClearSelectedObject: { type: Boolean, default: true },
-    currentObjectName: { default: "" },
-    results: { default: () => [] },
-    isVisible: { type: Boolean, default: false }
-  },
-  emits: {
-    "clear-object": null,
-    "create-object": null,
-    "select-object": null,
-    search: null,
-    "hide-dropdown": null
-  },
-  setup(__props, { emit }) {
-    const props = __props;
-    const { t: t2 } = useI18n();
-    const searchText = ref("");
-    const showAddNewOption = ref(false);
-    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);
-        currentSelection.value = -2;
+    function incrementNumericValue() {
+      if (inputElement.value) {
+        inputElement.value.stepUp();
+        inputElement.value.focus();
+        onValueChanged(inputElement.value.valueAsNumber);
+        const inputEvent = {
+          target: inputElement.value
+        };
+        emit("input", inputEvent);
       }
     }
-    function selectObject(id) {
-      emit("select-object", id);
-    }
-    function createObject() {
-      emit("create-object", searchText.value);
-      hideDropdown();
-    }
-    function hideDropdown() {
-      emit("hide-dropdown");
-    }
-    function onKeyboardArrowDown(firstIndex) {
-      if (currentSelection.value < props.results.length - 1) {
-        if (currentSelection.value === -2 && searchText.value === "") {
-          currentSelection.value++;
-        }
-        currentSelection.value++;
-      } else {
-        currentSelection.value = firstIndex;
+    function decrementNumericValue() {
+      if (inputElement.value) {
+        inputElement.value.stepDown();
+        inputElement.value.focus();
+        onValueChanged(inputElement.value.valueAsNumber);
+        const inputEvent = {
+          target: inputElement.value
+        };
+        emit("input", inputEvent);
       }
-      scroll();
     }
-    function onKeyboardArrowUp(firstIndex) {
-      if (currentSelection.value > firstIndex) {
-        currentSelection.value--;
-      } else {
-        currentSelection.value = props.results.length - 1;
-      }
-      scroll();
+    function toggleFocus(focus) {
+      focused.value = focus;
     }
-    function onKeyboardEnter() {
-      if (currentSelection.value >= 0 && props.results !== void 0) {
-        selectObject(props.results[currentSelection.value].id);
-      } else if (currentSelection.value === -1) {
-        createObject();
-      }
+    function onLostFocus() {
+      lostFocus.value = true;
+      toggleFocus(false);
     }
-    function onKeyboardShiftTab(keyboardEvent) {
-      if (keyboardEvent.key === "Tab" && keyboardEvent.shiftKey === true) {
-        const selectableElements = document.getElementsByTagName("input");
-        let indexOfPreviouslySelectableItem = -1;
-        for (let i = 0; i < selectableElements.length; i++) {
-          if (selectableElements[i] === keyboardEvent.target) {
-            indexOfPreviouslySelectableItem = i - 1;
-          }
-        }
-        if (indexOfPreviouslySelectableItem >= 0) {
-          selectableElements[indexOfPreviouslySelectableItem].focus();
-          hideDropdown();
-        }
-      }
+    function onMouseWheel(wheelEvent) {
+      wheelEvent.target.blur();
     }
-    function scroll() {
+    function getShowAsteriskOrRequired() {
       var _a;
-      if (props.results && props.results.length > 1) {
-        const heightOffset = 34;
-        (_a = container.value) == null ? void 0 : _a.scrollTo(0, (currentSelection.value + 1) * heightOffset - heightOffset * 2);
-      }
-    }
-    function updateAddNewOption() {
-      let finalResultMatches = false;
-      if (props.results !== null && props.results.length === 1) {
-        finalResultMatches = searchText.value.toUpperCase().trim() === props.results[0].name.toUpperCase().trim();
+      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;
       }
-      showAddNewOption.value = props.canCreateNewObject === true && props.errorMessage === "" && searchText.value.trim() !== "" && finalResultMatches === false;
-    }
-    function updateSelectedObjectIndex(index) {
-      currentSelection.value = index;
+      return asterisk;
     }
-    function onVisibilityChanged() {
-      if (props.isVisible === true) {
-        searchText.value = "";
-        search();
-        nextTick(() => {
-          var _a;
-          return (_a = searchBox.value) == null ? void 0 : _a.focus();
-        });
-      }
+    function onDateOutOfRange() {
+      dateFlaggedAsOutOfRange.value = true;
     }
-    watch(() => props.results, () => updateAddNewOption());
-    watch(() => props.errorMessage, () => updateAddNewOption());
-    watch(() => props.isVisible, () => onVisibilityChanged());
     onMounted(() => {
-      var _a;
-      return (_a = container.value) == null ? void 0 : _a.addEventListener("keydown", onKeyboardShiftTab);
-    });
-    onUnmounted(() => {
-      var _a;
-      return (_a = container.value) == null ? void 0 : _a.removeEventListener("keydown", onKeyboardShiftTab);
+      if (props.validateImmediately) {
+        onValueChanged(props.modelValue);
+      }
     });
+    watch(() => props.isRequired, () => onValueChanged(props.modelValue));
+    watch(() => props.externalErrors, () => updateAndValidateValue(currentValue.value));
     return (_ctx, _cache) => {
-      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",
-        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", {
+      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: (_value, _refs) => {
-              _refs["searchBox"] = _value;
-              searchBox.value = _value;
+              _refs["inputElement"] = _value;
+              inputElement.value = _value;
             },
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event),
-            type: "text",
-            placeholder: unref(t2)("comboBox.searchHint", { object: __props.objectType }),
-            onKeyup: search,
-            onBlur: hideDropdown
-          }, null, 40, _hoisted_3$f), [
-            [vModelText, searchText.value]
+            "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: (_value, _refs) => {
+              _refs["inputElement"] = _value;
+              inputElement.value = _value;
+            },
+            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)
           ]),
-          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, {
-          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, {
-          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, {
-          key: 2,
-          text: unref(t2)("comboBox.noResults", { object: __props.objectType })
-        }, null, 8, ["text"])) : createCommentVNode("", true),
-        __props.errorMessage !== "" ? (openBlock(), createBlock(_sfc_main$l, {
-          key: 3,
-          class: "!cl-bg-danger-light cl-text-danger-dark",
-          text: unref(t2)("comboBox.errorMessage", { error: __props.errorMessage })
-        }, null, 8, ["text"])) : createCommentVNode("", true),
-        showAddNewOption.value ? (openBlock(), createBlock(_sfc_main$k, {
-          key: 4,
-          "is-create-new-option": true,
-          text: unref(t2)("comboBox.addPrompt", { value: searchText.value, object: __props.objectType }),
-          index: -1,
-          "selected-index": currentSelection.value,
-          onCreateObject: createObject,
-          onOptionHighlighted: updateSelectedObjectIndex
-        }, null, 8, ["text", "selected-index"])) : createCommentVNode("", true),
-        __props.errorMessage === "" && __props.results !== null ? (openBlock(), createElementBlock("div", _hoisted_4$d, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.results, (result, index) => {
-            return openBlock(), createBlock(_sfc_main$k, {
-              key: index,
-              option: result,
-              index,
-              "selected-index": currentSelection.value,
-              onSelectObject: selectObject,
-              onOptionHighlighted: updateSelectedObjectIndex
-            }, null, 8, ["option", "index", "selected-index"]);
-          }), 128))
-        ])) : createCommentVNode("", true)
-      ], 40, _hoisted_1$i);
+          __props.inputType === "range" && typeof unref(currentValue) === "number" ? (openBlock(), createElementBlock("div", _hoisted_8$5, [
+            createVNode(unref(clUiSlider), {
+              ref: (_value, _refs) => {
+                _refs["inputElement"] = _value;
+                inputElement.value = _value;
+              },
+              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)
+      ]);
+    };
+  }
+});
+var ClUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-3848d1cc"]]);
+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
+};
+function setup$2(__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 _sfc_main$k = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
+  props: {
+    headerColour: { default: "white" },
+    preventClose: { type: Boolean, default: false },
+    size: { default: "medium" }
+  },
+  setup: setup$2
+}));
+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$j = /* @__PURE__ */ defineComponent({
+  props: {
+    showClearButton: { type: Boolean, default: false },
+    text: { default: "" },
+    additionalText: { default: "" }
+  },
+  emits: {
+    "clear-object": null
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      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 !== "",
+            "cl-w-full": __props.additionalText === ""
+          })
+        }, toDisplayString(__props.text), 3),
+        withDirectives(createElementVNode("div", {
+          class: "cl-cursor-pointer cl-float-right",
+          onMousedown: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("clear-object"))
+        }, [
+          createVNode(_component_icon, {
+            class: "cl-mt-0.5 cl-rounded-full cl-transition-colors hover:cl-text-link-default",
+            icon: "ph:x-circle"
+          })
+        ], 544), [
+          [vShow, __props.showClearButton]
+        ])
+      ]);
     };
   }
 });
-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 _hoisted_1$h = {
+  key: 0,
+  class: "cl-w-1/2"
+};
+const _hoisted_2$g = { class: "cl-float-right cl-py-1.5" };
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   props: {
-    loading: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    required: { type: Boolean, default: false },
-    objectType: null,
-    objectParentType: { default: "" },
-    canCreateNewObject: { type: Boolean, default: false },
-    canClearSelectedObject: { type: Boolean, default: true },
-    errorMessage: { default: "" },
-    objectCreatedResponse: { default: () => null },
-    parentObjectCreatedResponse: { default: () => null },
-    results: { default: () => [] },
-    parentResults: { default: () => [] },
-    currentObject: null
+    isCreateNewOption: { type: Boolean, default: false },
+    selectedIndex: { default: -1 },
+    text: { default: "" },
+    option: { default: () => null },
+    index: null
   },
   emits: {
-    search: null,
-    "search-parent": null,
     "create-object": null,
-    "create-parent-object": null,
-    "update:current-object": null
+    "select-object": null,
+    "option-highlighted": null
   },
   setup(__props, { emit }) {
     const props = __props;
-    const { t: t2 } = useI18n();
-    const searchContainerVisible = ref(false);
-    const selectedItem = computed({
-      get: () => props.currentObject,
-      set: (value) => emit("update:current-object", value)
+    const displayedText = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.option) == null ? void 0 : _a.name) != null ? _b : props.text;
     });
-    const parentItem = ref(null);
-    const currentText = computed(() => getDisplayName());
-    const objectToCreateValue = ref("");
-    const parentObjectToCreateValue = ref("");
-    const createObjectRequest = ref();
-    const objectToCreateValid = ref(true);
-    function toggleDropdown(forcedState) {
-      if (!props.disabled) {
-        if (typeof forcedState !== "undefined") {
-          searchContainerVisible.value = forcedState;
-        } else {
-          searchContainerVisible.value = !searchContainerVisible.value;
-        }
+    const displayedParent = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.option) == null ? void 0 : _a.parentName) != null ? _b : "";
+    });
+    const isHighlighted = ref(false);
+    function optionSelected() {
+      var _a;
+      if (props.isCreateNewOption === true) {
+        emit("create-object");
+      } else {
+        emit("select-object", (_a = props.option) == null ? void 0 : _a.id);
       }
     }
-    function search(searchTerm) {
-      objectToCreateValue.value = searchTerm;
-      emit("search", searchTerm);
-    }
-    function searchParent(searchTerm) {
-      parentObjectToCreateValue.value = searchTerm;
-      emit("search-parent", searchTerm);
-    }
-    function clearObject() {
-      selectedItem.value = null;
-      toggleDropdown(false);
-    }
-    function selectObject(id) {
-      const item = getComboBoxItemById(id);
-      selectedItem.value = item;
-      toggleDropdown(false);
-    }
-    function getComboBoxItemById(id) {
-      let currentItem = null;
-      if (props.results !== null) {
-        for (let i = 0; i < props.results.length; i++) {
-          if (props.results[i].id === id) {
-            currentItem = props.results[i];
-            break;
-          }
+    function onHover(hovered) {
+      if (hovered === true) {
+        isHighlighted.value = true;
+        emit("option-highlighted", props.index);
+      } else {
+        if (props.index !== props.selectedIndex) {
+          isHighlighted.value = false;
         }
       }
-      return currentItem;
-    }
-    function createObject() {
-      var _a, _b;
-      createObjectRequest.value = {
-        name: objectToCreateValue.value,
-        parentId: (_b = (_a = parentItem.value) == null ? void 0 : _a.id) != null ? _b : 0
-      };
-      emit("create-object", createObjectRequest.value);
     }
-    function createParentObject() {
-      createObjectRequest.value = {
-        name: parentObjectToCreateValue.value,
-        parentId: 0
-      };
-      emit("create-parent-object", createObjectRequest.value);
+    function updateHighlight() {
+      if (props.selectedIndex === props.index) {
+        isHighlighted.value = true;
+      } else {
+        isHighlighted.value = false;
+      }
     }
-    function handleObjectCreateResponse() {
+    watch(() => props.selectedIndex, () => updateHighlight());
+    return (_ctx, _cache) => {
+      var _a, _b;
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["cl-border-b cl-border-grey-0 cl-border-t cl-cursor-pointer cl-duration-75 cl-flex cl-p-1 cl-transition-colors", {
+          "cl-bg-grey-0": isHighlighted.value === false,
+          "cl-bg-primary-default cl-text-white": isHighlighted.value
+        }]),
+        onMousedown: optionSelected,
+        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$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$g, [
+          createVNode(_component_icon, {
+            class: "cl-bg-primary-default cl-rounded-full cl-text-white",
+            icon: "ph:plus-circle"
+          })
+        ], 512), [
+          [vShow, __props.isCreateNewOption]
+        ])
+      ], 34);
+    };
+  }
+});
+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,
+    objectParentType: { default: "" },
+    errorMessage: { default: "" },
+    canCreateNewObject: { type: Boolean, default: false },
+    canClearSelectedObject: { type: Boolean, default: true },
+    currentObjectName: { default: "" },
+    results: { default: () => [] },
+    isVisible: { type: Boolean, default: false }
+  },
+  emits: {
+    "clear-object": null,
+    "create-object": null,
+    "select-object": null,
+    search: null,
+    "hide-dropdown": null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const { t: t2 } = useI18n();
+    const searchText = ref("");
+    const showAddNewOption = ref(false);
+    const currentSelection = ref(-1);
+    const firstIndexInResults = computed(() => showAddNewOption.value ? -1 : 0);
+    const container = 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);
+        currentSelection.value = -2;
+      }
+    }
+    function selectObject(id) {
+      emit("select-object", id);
+    }
+    function createObject() {
+      emit("create-object", searchText.value);
+      hideDropdown();
+    }
+    function hideDropdown() {
+      emit("hide-dropdown");
+    }
+    function onKeyboardArrowDown(firstIndex) {
+      if (currentSelection.value < props.results.length - 1) {
+        if (currentSelection.value === -2 && searchText.value === "") {
+          currentSelection.value++;
+        }
+        currentSelection.value++;
+      } else {
+        currentSelection.value = firstIndex;
+      }
+      scroll();
+    }
+    function onKeyboardArrowUp(firstIndex) {
+      if (currentSelection.value > firstIndex) {
+        currentSelection.value--;
+      } else {
+        currentSelection.value = props.results.length - 1;
+      }
+      scroll();
+    }
+    function onKeyboardEnter() {
+      if (currentSelection.value >= 0 && props.results !== void 0) {
+        selectObject(props.results[currentSelection.value].id);
+      } else if (currentSelection.value === -1) {
+        createObject();
+      }
+    }
+    function onKeyboardShiftTab(keyboardEvent) {
+      if (keyboardEvent.key === "Tab" && keyboardEvent.shiftKey === true) {
+        const selectableElements = document.getElementsByTagName("input");
+        let indexOfPreviouslySelectableItem = -1;
+        for (let i = 0; i < selectableElements.length; i++) {
+          if (selectableElements[i] === keyboardEvent.target) {
+            indexOfPreviouslySelectableItem = i - 1;
+          }
+        }
+        if (indexOfPreviouslySelectableItem >= 0) {
+          selectableElements[indexOfPreviouslySelectableItem].focus();
+          hideDropdown();
+        }
+      }
+    }
+    function scroll() {
+      var _a;
+      if (props.results && props.results.length > 1) {
+        const heightOffset = 34;
+        (_a = container.value) == null ? void 0 : _a.scrollTo(0, (currentSelection.value + 1) * heightOffset - heightOffset * 2);
+      }
+    }
+    function updateAddNewOption() {
+      let finalResultMatches = false;
+      if (props.results !== null && props.results.length === 1) {
+        finalResultMatches = searchText.value.toUpperCase().trim() === props.results[0].name.toUpperCase().trim();
+      }
+      showAddNewOption.value = props.canCreateNewObject === true && props.errorMessage === "" && searchText.value.trim() !== "" && finalResultMatches === false;
+    }
+    function updateSelectedObjectIndex(index) {
+      currentSelection.value = index;
+    }
+    function onVisibilityChanged() {
+      if (props.isVisible === true) {
+        searchText.value = "";
+        search();
+        nextTick(() => {
+          var _a, _b;
+          return (_b = (_a = container.value) == null ? void 0 : _a.querySelector("input")) == null ? void 0 : _b.focus();
+        });
+      }
+    }
+    watch(() => props.results, () => updateAddNewOption());
+    watch(() => props.errorMessage, () => updateAddNewOption());
+    watch(() => props.isVisible, () => onVisibilityChanged());
+    onMounted(() => {
+      var _a;
+      return (_a = container.value) == null ? void 0 : _a.addEventListener("keydown", onKeyboardShiftTab);
+    });
+    onUnmounted(() => {
+      var _a;
+      return (_a = container.value) == null ? void 0 : _a.removeEventListener("keydown", onKeyboardShiftTab);
+    });
+    return (_ctx, _cache) => {
+      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-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$f, [
+          createVNode(ClUiInput, {
+            modelValue: searchText.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event),
+            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, 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$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$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$j, {
+          key: 2,
+          text: unref(t2)("comboBox.noResults", { value: searchText.value })
+        }, null, 8, ["text"])) : createCommentVNode("", true),
+        __props.errorMessage !== "" ? (openBlock(), createBlock(_sfc_main$j, {
+          key: 3,
+          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$i, {
+          key: 4,
+          "is-create-new-option": true,
+          text: unref(t2)("comboBox.addPrompt", { value: searchText.value, object: __props.objectType }),
+          index: -1,
+          "selected-index": currentSelection.value,
+          onCreateObject: createObject,
+          onOptionHighlighted: updateSelectedObjectIndex
+        }, null, 8, ["text", "selected-index"])) : createCommentVNode("", true),
+        __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$i, {
+              key: index,
+              option: result,
+              index,
+              "selected-index": currentSelection.value,
+              onSelectObject: selectObject,
+              onOptionHighlighted: updateSelectedObjectIndex
+            }, null, 8, ["option", "index", "selected-index"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 40, _hoisted_1$g);
+    };
+  }
+});
+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 },
+    required: { type: Boolean, default: false },
+    objectType: null,
+    objectParentType: { default: "" },
+    canCreateNewObject: { type: Boolean, default: false },
+    canClearSelectedObject: { type: Boolean, default: true },
+    errorMessage: { default: "" },
+    objectCreatedResponse: { default: () => null },
+    parentObjectCreatedResponse: { default: () => null },
+    results: { default: () => [] },
+    parentResults: { default: () => [] },
+    currentObject: null
+  },
+  emits: {
+    focus: null,
+    search: null,
+    "search-parent": null,
+    "create-object": null,
+    "create-parent-object": null,
+    "update:current-object": null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const { t: t2 } = useI18n();
+    const searchContainerVisible = ref(false);
+    const selectedItem = computed({
+      get: () => props.currentObject,
+      set: (value) => emit("update:current-object", value)
+    });
+    const parentItem = ref(null);
+    const currentText = computed(() => getDisplayName());
+    const objectToCreateValue = ref("");
+    const parentObjectToCreateValue = ref("");
+    const createObjectRequest = ref();
+    const objectToCreateValid = ref(true);
+    function toggleDropdown(forcedState) {
+      if (!props.disabled) {
+        if (typeof forcedState !== "undefined") {
+          searchContainerVisible.value = forcedState;
+        } else {
+          searchContainerVisible.value = !searchContainerVisible.value;
+        }
+      }
+    }
+    function search(searchTerm) {
+      objectToCreateValue.value = searchTerm;
+      emit("search", searchTerm);
+    }
+    function searchParent(searchTerm) {
+      parentObjectToCreateValue.value = searchTerm;
+      emit("search-parent", searchTerm);
+    }
+    function clearObject() {
+      selectedItem.value = null;
+      toggleDropdown(false);
+    }
+    function selectObject(id) {
+      const item = getComboBoxItemById(id);
+      selectedItem.value = item;
+      toggleDropdown(false);
+    }
+    function getComboBoxItemById(id) {
+      let currentItem = null;
+      if (props.results !== null) {
+        for (let i = 0; i < props.results.length; i++) {
+          if (props.results[i].id === id) {
+            currentItem = props.results[i];
+            break;
+          }
+        }
+      }
+      return currentItem;
+    }
+    function createObject() {
+      var _a, _b;
+      createObjectRequest.value = {
+        name: objectToCreateValue.value,
+        parentId: (_b = (_a = parentItem.value) == null ? void 0 : _a.id) != null ? _b : 0
+      };
+      emit("create-object", createObjectRequest.value);
+    }
+    function createParentObject() {
+      createObjectRequest.value = {
+        name: parentObjectToCreateValue.value,
+        parentId: 0
+      };
+      emit("create-parent-object", createObjectRequest.value);
+    }
+    function handleObjectCreateResponse() {
       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
         });
@@ -2197,7 +2466,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
       });
@@ -2241,21 +2510,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,
-            onFocus: _cache[1] || (_cache[1] = ($event) => toggleDropdown(true))
-          }, null, 42, _hoisted_2$g), [
-            [vModelText, unref(currentText)]
-          ]),
-          withDirectives(createElementVNode("div", _hoisted_3$e, [
-            createElementVNode("div", _hoisted_4$c, [
+            "input-type": "text",
+            "placeholder-text": unref(t2)("comboBox.emptyHintText", { object: __props.objectType }),
+            onFocus: _cache[1] || (_cache[1] = ($event) => {
+              toggleDropdown(true);
+              _ctx.$emit("focus");
+            })
+          }, 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",
@@ -2266,7 +2536,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
             }]),
@@ -2278,12 +2548,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,
@@ -2303,7 +2573,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",
@@ -2332,28 +2602,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
@@ -2368,42 +2639,41 @@ 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"
 };
@@ -2450,7 +2720,7 @@ function setup$1(__props, { emit }) {
         "cl-bg-link-lighter": unref(edited)
       }]
     }), [
-      createElementVNode("strong", _hoisted_1$f, toDisplayString(__props.column.caption), 1),
+      createElementVNode("strong", _hoisted_1$d, toDisplayString(__props.column.caption), 1),
       renderSlot(_ctx.$slots, `${__props.column.name}Edit`, normalizeProps(guardReactiveProps({
         cellFocused,
         column: __props.column,
@@ -2458,13 +2728,13 @@ function setup$1(__props, { emit }) {
         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", {
+      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,
-        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 }, [
+        "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 }, [
@@ -2481,12 +2751,12 @@ function setup$1(__props, { emit }) {
           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))
+        __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 _sfc_main$g = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+const _sfc_main$e = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
   props: {
     column: null,
     record: null,
@@ -2669,27 +2939,25 @@ function isFilterResponse(objectToTest, resultValidator) {
   }
   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,
@@ -2724,9 +2992,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;
     }
@@ -2800,7 +3077,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", {
@@ -2808,8 +3084,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
@@ -2821,15 +3097,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,
@@ -2840,8 +3116,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),
@@ -2858,57 +3134,57 @@ 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", {
+          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,
-          value: unref(currentFilter),
-          class: "cl-border-none cl-w-full",
-          type: "text",
+          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, 40, _hoisted_13$4)) : createCommentVNode("", true)
-      ], 2)) : (openBlock(), createElementBlock("div", _hoisted_14$3, " \xA0 "));
+        }, 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 }
@@ -2927,6 +3203,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     ];
     const { n, t: t2 } = useI18n();
     const { debounce } = useDebouncer();
+    const currentPage = ref(props.request.pageNumber);
     const totalPages = computed(() => props.data !== null ? Math.ceil(props.data.totalRecords / props.request.pageSize) : 1);
     const pageNumbers = computed(() => {
       const calculatedPageNumbers = Array.from(Array(totalPages.value + 1).keys());
@@ -2956,29 +3233,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",
@@ -2989,7 +3272,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",
@@ -3006,11 +3289,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",
@@ -3021,7 +3304,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",
@@ -3032,8 +3315,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,
@@ -3042,31 +3325,30 @@ 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
 };
@@ -3111,20 +3393,20 @@ function setup(__props, { emit }) {
       (openBlock(), createBlock(Teleport, { to: "body" }, [
         createVNode(Transition, { name: "slide-left" }, {
           default: withCtx(() => [
-            withDirectives(createElementVNode("div", _hoisted_1$c, [
-              createElementVNode("div", _hoisted_2$b, [
+            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$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)
+                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", {
@@ -3133,13 +3415,13 @@ function setup(__props, { emit }) {
                     }, [
                       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",
+                        createVNode(ClUiInput, {
+                          "model-value": column.visible === void 0 || column.visible === true,
+                          "input-type": "checkbox",
                           onClick: ($event) => updateColumnVisibility($event.target, column)
-                        }, null, 8, _hoisted_11$2)
+                        }, null, 8, ["model-value", "onClick"])
                       ]),
-                      createElementVNode("div", _hoisted_12$2, [
+                      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,
@@ -3153,7 +3435,7 @@ function setup(__props, { emit }) {
                             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))
+                        ], 64)) : (openBlock(), createElementBlock("em", _hoisted_12$1, toDisplayString(unref(t2)("grid.hidden")), 1))
                       ])
                     ]);
                   }), 128))
@@ -3169,7 +3451,7 @@ function setup(__props, { emit }) {
     ], 64);
   };
 }
-const _sfc_main$d = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+const _sfc_main$b = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
   props: {
     columns: null
   },
@@ -3178,14 +3460,14 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   },
   setup
 }));
-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 },
@@ -3207,7 +3489,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",
@@ -3224,13 +3506,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",
@@ -3242,7 +3524,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",
@@ -3260,26 +3542,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"];
@@ -3288,7 +3570,7 @@ 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,
@@ -3404,8 +3686,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,
@@ -3420,17 +3702,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,
@@ -3444,7 +3726,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",
@@ -3466,7 +3748,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
@@ -3488,7 +3770,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), [
@@ -3498,9 +3780,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,
@@ -3509,7 +3791,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;
@@ -3536,7 +3818,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))
                 ]),
@@ -3547,7 +3829,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,
@@ -3567,7 +3849,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)),
@@ -3616,559 +3898,96 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
               ])
             ])
           ]),
-          createVNode(_sfc_main$e, {
-            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)
-      ], 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" };
-function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("header", _hoisted_1$9, [
-    renderSlot(_ctx.$slots, "logo"),
-    createElementVNode("div", _hoisted_2$8, [
-      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;
+          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$7)
+      ], 64);
+    };
   }
-  return calendarType;
+});
+var clUiGrid = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-4e7c7908"]]);
+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$7, [
+    renderSlot(_ctx.$slots, "logo"),
+    createElementVNode("div", _hoisted_2$6, [
+      renderSlot(_ctx.$slots, "menu"),
+      renderSlot(_ctx.$slots, "icon")
+    ])
+  ]);
 }
-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 = {
+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-flex-grow cl-hidden cl-my-4 cl-text-white md:cl-block" };
+const _hoisted_5$1 = {
   key: 0,
-  class: "cl-left-auto cl-relative cl-text-danger-default"
+  class: "cl-cursor-default cl-overflow-ellipsis cl-whitespace-nowrap"
 };
-const _hoisted_5$1 = {
+const _hoisted_6$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-overflow-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,
-    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)),
-            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-966ee6cc"]]);
 const inputTypes = [
   "button",
   "checkbox",
@@ -4280,7 +4099,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" };
@@ -4291,16 +4109,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: () => [] },
@@ -4315,7 +4126,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,
@@ -4326,18 +4137,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", {
@@ -4348,66 +4172,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")
@@ -4415,24 +4212,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", {
@@ -4441,10 +4240,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(() => [
@@ -4458,7 +4257,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,
@@ -4477,7 +4276,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var clUiLogin = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-2e5cd708"]]);
 const modalSizes = [
   "x-small",
   "small",
@@ -4645,11 +4443,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,
@@ -4665,15 +4461,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,
@@ -4681,9 +4477,238 @@ var components = /* @__PURE__ */ Object.freeze({
   clUiNavigationGroup: _sfc_main$2,
   clUiNavigationSection,
   clUiNavigationItem,
-  clUiNotification: _sfc_main$s,
-  clUiSlider
+  clUiNotification: _sfc_main$s
 });
+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;
+  }
+  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;
+  }
+  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(" ");
+}
+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;
+  }
+  const longerLength = longerString.length;
+  if (longerLength === 0) {
+    similarityToReturn = 100;
+  } else {
+    similarityToReturn = Math.round((longerLength - levenshtein(longerString, shorterString)) / longerLength * 100);
+  }
+  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}`);
+};
 Date.prototype.toLocaleMonthString = function(locale) {
   return i18n.global.d(this, DateFormat.MONTH_YEAR, locale != null ? locale : i18n.global.locale.value);
 };
@@ -4704,4 +4729,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, 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 };