@citruslime/ui 4.0.2-beta.12 → 4.0.2-beta.14

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

@@ -1,14 +1,14 @@
 import { Icon } from "@iconify/vue";
 import { defineComponent, ref, createElementBlock, openBlock, renderSlot, normalizeProps, guardReactiveProps, Fragment, createElementVNode, normalizeClass, createVNode, unref, Transition, withCtx, withDirectives, mergeProps, vShow, createBlock, Teleport, renderList, toDisplayString, createCommentVNode, computed, createTextVNode, mergeModels, useModel, watch, createSlots, vModelDynamic, shallowRef, toValue, toRefs, withKeys, onMounted, onUnmounted, withModifiers, nextTick, useAttrs, resolveComponent, inject, vModelCheckbox, watchEffect, vModelText, useCssVars, toHandlers, normalizeStyle, isRef, useSlots, provide } from "vue";
 import { generateStringId, highlightText, isTouchDevice, validateEmail as validateEmail$1, escapeStringForRegExp } from "@citruslime/utils";
-import { useFocusWithin, onKeyDown, toArray, unrefElement, tryOnScopeDispose, onClickOutside, useBreakpoints, breakpointsTailwind, useTimeoutFn, useMouseInElement, useMediaQuery, useThrottle, useDebounceFn, useMouse, useDraggable, defaultDocument, tryOnMounted, useThrottleFn, useWindowSize, useElementSize, useElementBounding } from "@vueuse/core";
+import { useFocusWithin, onKeyDown, toArray, unrefElement, tryOnScopeDispose, onClickOutside, useBreakpoints, breakpointsTailwind, useTimeoutFn, useMouseInElement, useThrottle, useMediaQuery, useDebounceFn, useMouse, useDraggable, defaultDocument, tryOnMounted, useThrottleFn, useWindowSize, useElementSize, useElementBounding } from "@vueuse/core";
 import { useI18n, createI18n } from "vue-i18n";
 import { createFocusTrap } from "focus-trap";
 import { copy } from "@citruslime/vue-utils";
 import { DateTime } from "luxon";
 import { DatePicker } from "v-calendar";
 import { useCurrencyInput } from "vue-currency-input";
-const _hoisted_1$12 = { class: "cl:overflow-hidden" };
+const _hoisted_1$13 = { class: "cl:overflow-hidden" };
 const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-accordion",
   props: {
@@ -42,15 +42,15 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$12, [
+      return openBlock(), createElementBlock("div", _hoisted_1$13, [
         renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ isItemOpen, toggleItem })))
       ]);
     };
   }
 });
-const _hoisted_1$11 = { class: "cl:absolute cl:left-5 cl:top-5" };
+const _hoisted_1$12 = { class: "cl:absolute cl:left-5 cl:top-5" };
 const _hoisted_2$L = { class: "cl:font-semibold cl:ml-10 cl:p-4 cl:select-none cl:text-grey-5" };
-const _hoisted_3$u = { class: "cl:overflow-hidden" };
+const _hoisted_3$t = { class: "cl:overflow-hidden" };
 const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -78,7 +78,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
           }]),
           onClick: toggle
         }, [
-          createElementVNode("div", _hoisted_1$11, [
+          createElementVNode("div", _hoisted_1$12, [
             createVNode(unref(Icon), {
               class: normalizeClass(["cl:duration-300 cl:ease-in-out cl:text-grey-3 cl:transform-gpu cl:transition-transform", {
                 "cl:rotate-180": _ctx.open
@@ -91,7 +91,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "title")
           ])
         ], 2),
-        createElementVNode("div", _hoisted_3$u, [
+        createElementVNode("div", _hoisted_3$t, [
           createVNode(Transition, { name: "grow-down" }, {
             default: withCtx(() => [
               withDirectives(createElementVNode("div", mergeProps(_ctx.$attrs, { class: "cl:ml-10 cl:p-4" }), [
@@ -115,9 +115,9 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const _sfc_main$1f = {};
-const _hoisted_1$10 = { class: "cl:border-b cl:border-grey-1 cl:font-semibold cl:pl-14 cl:pr-4 cl:py-2 cl:text-grey-3 cl:text-sm" };
+const _hoisted_1$11 = { class: "cl:border-b cl:border-grey-1 cl:font-semibold cl:pl-14 cl:pr-4 cl:py-2 cl:text-grey-3 cl:text-sm" };
 function _sfc_render$7(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$10, [
+  return openBlock(), createElementBlock("div", _hoisted_1$11, [
     renderSlot(_ctx.$slots, "default")
   ]);
 }
@@ -134,7 +134,7 @@ function showNotification(notification) {
 function removeNotification(notification) {
   notifications.value = notifications.value.filter((n) => n.id !== notification.id);
 }
-const _hoisted_1$$ = ["onClick"];
+const _hoisted_1$10 = ["onClick"];
 const _hoisted_2$K = { class: "cl:flex-1 cl:select-none cl:text-ellipsis cl:w-64" };
 const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   ...{
@@ -181,14 +181,14 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
                 size: 16,
                 weight: "bold"
               })
-            ], 16, _hoisted_1$$);
+            ], 16, _hoisted_1$10);
           }), 128))
         ], 2)
       ], 8, ["to"]);
     };
   }
 });
-const _hoisted_1$_ = { class: "cl:absolute cl:flex cl:flex-wrap cl:h-full cl:max-h-full cl:max-w-full cl:min-h-full cl:min-w-full cl:w-full cl:xl:h-screen cl:xl:max-h-screen cl:xl:min-h-screen" };
+const _hoisted_1$$ = { class: "cl:absolute cl:flex cl:flex-wrap cl:h-full cl:max-h-full cl:max-w-full cl:min-h-full cl:min-w-full cl:w-full cl:xl:h-screen cl:xl:max-h-screen cl:xl:min-h-screen" };
 const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-app",
   props: {
@@ -200,7 +200,7 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
         createVNode(_sfc_main$1e, {
           "header-visible": _ctx.$slots.header ? true : false
         }, null, 8, ["header-visible"]),
-        createElementVNode("div", _hoisted_1$_, [
+        createElementVNode("div", _hoisted_1$$, [
           renderSlot(_ctx.$slots, "header"),
           createElementVNode("div", {
             class: normalizeClass(["cl:content-start cl:flex cl:flex-nowrap cl:h-dscreen cl:items-stretch cl:max-h-full cl:relative cl:w-full cl:xl:max-h-screen", {
@@ -224,12 +224,12 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   }
 });
 const _sfc_main$1c = {};
-const _hoisted_1$Z = { class: "loading-spinner" };
+const _hoisted_1$_ = { class: "loading-spinner" };
 function _sfc_render$6(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$Z);
+  return openBlock(), createElementBlock("div", _hoisted_1$_);
 }
 const clUiLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$6], ["__scopeId", "data-v-1eee625a"]]);
-const _hoisted_1$Y = ["disabled"];
+const _hoisted_1$Z = ["disabled"];
 const _hoisted_2$J = {
   key: 0,
   class: "cl:absolute cl:bg-secondary-default/40 cl:flex cl:h-full cl:items-center cl:justify-center cl:left-0 cl:rounded-sm cl:top-0 cl:w-full"
@@ -283,7 +283,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
         _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_2$J, [
           createVNode(clUiLoadingSpinner, { class: "cl:-translate-x-1/2 cl:after:h-6! cl:after:w-6! cl:h-6! cl:w-6!" })
         ])) : createCommentVNode("", true)
-      ], 16, _hoisted_1$Y);
+      ], 16, _hoisted_1$Z);
     };
   }
 });
@@ -300,7 +300,7 @@ const buttonSizes = [
   "medium",
   "large"
 ];
-const _hoisted_1$X = { key: 0 };
+const _hoisted_1$Y = { key: 0 };
 const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-card",
   props: {
@@ -314,7 +314,7 @@ const _sfc_main$1a = /* @__PURE__ */ defineComponent({
           "cl:cursor-pointer cl:hover:shadow-xl cl:hover:border-grey-0": _ctx.hover
         }])
       }, [
-        _ctx.$slots.image ? (openBlock(), createElementBlock("div", _hoisted_1$X, [
+        _ctx.$slots.image ? (openBlock(), createElementBlock("div", _hoisted_1$Y, [
           renderSlot(_ctx.$slots, "image")
         ])) : createCommentVNode("", true),
         _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
@@ -357,9 +357,9 @@ const cardSizes = [
   "medium",
   "large"
 ];
-const _hoisted_1$W = { class: "cl:sm:w-auto cl:w-full" };
+const _hoisted_1$X = { class: "cl:sm:w-auto cl:w-full" };
 const _hoisted_2$I = { class: "cl:flex cl:flex-nowrap cl:gap-2 cl:text-grey-4 cl:text-xs cl:tracking-widest" };
-const _hoisted_3$t = {
+const _hoisted_3$s = {
   key: 0,
   class: "cl:self-center"
 };
@@ -367,7 +367,7 @@ const _hoisted_4$n = {
   key: 1,
   class: "cl:text-danger-dark"
 };
-const _hoisted_5$i = {
+const _hoisted_5$h = {
   key: 0,
   class: "cl:pt-1 cl:w-full"
 };
@@ -388,12 +388,12 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     const props = __props;
     const hasErrors = computed(() => Object.keys(props.errors ?? []).length > 0);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$W, [
+      return openBlock(), createElementBlock("div", _hoisted_1$X, [
         createElementVNode("div", {
           class: normalizeClass(["cl:flex", { "cl:flex-col": _ctx.labelPosition === "above", "cl:flex-row-reverse cl:gap-2 cl:items-center cl:justify-end": _ctx.labelPosition === "right" }])
         }, [
           createElementVNode("div", _hoisted_2$I, [
-            _ctx.$slots.label ? (openBlock(), createElementBlock("span", _hoisted_3$t, [
+            _ctx.$slots.label ? (openBlock(), createElementBlock("span", _hoisted_3$s, [
               renderSlot(_ctx.$slots, "label")
             ])) : createCommentVNode("", true),
             _ctx.showRequiredAsterisk ? (openBlock(), createElementBlock("span", _hoisted_4$n, "*")) : createCommentVNode("", true)
@@ -402,7 +402,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "default")
           ])
         ], 2),
-        hasErrors.value ? (openBlock(), createElementBlock("div", _hoisted_5$i, [
+        hasErrors.value ? (openBlock(), createElementBlock("div", _hoisted_5$h, [
           createElementVNode("div", _hoisted_6$b, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.errors, (error, index2) => {
               return openBlock(), createElementBlock("div", {
@@ -422,7 +422,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$V = ["type", "maxlength", "disabled", "placeholder"];
+const _hoisted_1$W = ["type", "maxlength", "disabled", "placeholder"];
 const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -488,7 +488,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
             placeholder: _ctx.placeholder ?? void 0,
             onFocus: _cache[1] || (_cache[1] = ($event) => emit("focus")),
             onBlur: _cache[2] || (_cache[2] = ($event) => emit("blur"))
-          }), null, 16, _hoisted_1$V), [
+          }), null, 16, _hoisted_1$W), [
             [vModelDynamic, value.value]
           ])
         ]),
@@ -573,7 +573,7 @@ function useFocusTrap(target, options = {}) {
     unpause
   };
 }
-const _hoisted_1$U = {
+const _hoisted_1$V = {
   key: 0,
   class: "cl:mt-1 cl:opacity-60 cl:text-primary-default"
 };
@@ -673,7 +673,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
                     }])
                   }, [
                     renderSlot(_ctx.$slots, "title"),
-                    _ctx.headerColour === "white" ? (openBlock(), createElementBlock("hr", _hoisted_1$U)) : createCommentVNode("", true)
+                    _ctx.headerColour === "white" ? (openBlock(), createElementBlock("hr", _hoisted_1$V)) : createCommentVNode("", true)
                   ], 2),
                   createElementVNode("div", _hoisted_2$H, [
                     renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ close })))
@@ -691,7 +691,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$T = { class: "cl:bg-grey-0 cl:flex cl:p-1 cl:text-left" };
+const _hoisted_1$U = { class: "cl:bg-grey-0 cl:flex cl:p-1 cl:text-left" };
 const _hoisted_2$G = {
   key: 0,
   class: "cl:w-1/2"
@@ -706,7 +706,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   emits: ["clear-object"],
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$T, [
+      return openBlock(), createElementBlock("div", _hoisted_1$U, [
         _ctx.additionalText !== "" ? (openBlock(), createElementBlock("div", _hoisted_2$G, toDisplayString(_ctx.additionalText), 1)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass({
@@ -729,7 +729,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$S = {
+const _hoisted_1$T = {
   key: 0,
   class: "cl:w-1/2"
 };
@@ -794,7 +794,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
         onMousemove: _cache[0] || (_cache[0] = ($event) => onHover(true)),
         onMouseleave: _cache[1] || (_cache[1] = ($event) => onHover(false))
       }, [
-        _ctx.option !== null && ((_a = _ctx.option) == null ? void 0 : _a.parentId) !== 0 && ((_b = _ctx.option) == null ? void 0 : _b.parentId) !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1$S, toDisplayString(displayedParent.value), 1)) : createCommentVNode("", true),
+        _ctx.option !== null && ((_a = _ctx.option) == null ? void 0 : _a.parentId) !== 0 && ((_b = _ctx.option) == null ? void 0 : _b.parentId) !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1$T, toDisplayString(displayedParent.value), 1)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass({
             "cl:w-1/2": displayedParent.value !== "",
@@ -813,14 +813,14 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$R = ["onKeyup"];
+const _hoisted_1$S = ["onKeyup"];
 const _hoisted_2$E = {
   key: 0,
   class: "cl:absolute cl:bg-off-white cl:flex cl:h-full cl:items-center cl:justify-center cl:top-0 cl:w-full cl:z-20"
 };
-const _hoisted_3$s = { class: "cl:bg-white cl:flex cl:p-2 cl:pb-1 cl:sticky cl:top-0 cl:w-full cl:z-10" };
+const _hoisted_3$r = { class: "cl:bg-white cl:flex cl:p-2 cl:pb-1 cl:sticky cl:top-0 cl:w-full cl:z-10" };
 const _hoisted_4$m = { class: "cl:inline-block cl:w-full" };
-const _hoisted_5$h = { key: 6 };
+const _hoisted_5$g = { key: 6 };
 const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-combo-box-search",
   props: {
@@ -958,7 +958,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
         _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_2$E, [
           createVNode(clUiLoadingSpinner)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$s, [
+        createElementVNode("div", _hoisted_3$r, [
           createElementVNode("div", _hoisted_4$m, [
             createVNode(_sfc_main$18, {
               id: `cl-ui-combo-box-search-input-${_ctx.objectType}`,
@@ -1008,7 +1008,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
           onCreateObject: createObject,
           onOptionHighlighted: updateSelectedObjectIndex
         }, null, 8, ["text", "selected-index"])) : createCommentVNode("", true),
-        _ctx.errorMessage === "" && _ctx.results !== null ? (openBlock(), createElementBlock("div", _hoisted_5$h, [
+        _ctx.errorMessage === "" && _ctx.results !== null ? (openBlock(), createElementBlock("div", _hoisted_5$g, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.results, (result, index2) => {
             return openBlock(), createBlock(_sfc_main$15, {
               key: index2,
@@ -1021,15 +1021,15 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["option", "index", "selected-index"]);
           }), 128))
         ])) : createCommentVNode("", true)
-      ], 42, _hoisted_1$R)) : createCommentVNode("", true);
+      ], 42, _hoisted_1$S)) : createCommentVNode("", true);
     };
   }
 });
-const _hoisted_1$Q = { class: "cl:flex cl:rounded-lg" };
+const _hoisted_1$R = { class: "cl:flex cl:rounded-lg" };
 const _hoisted_2$D = { class: "cl:inline-block cl:w-full" };
-const _hoisted_3$r = { class: "cl:pointer-events-none cl:relative cl:top-0.5" };
+const _hoisted_3$q = { class: "cl:pointer-events-none cl:relative cl:top-0.5" };
 const _hoisted_4$l = { class: "cl:absolute cl:flex cl:float-right cl:font-semibold cl:mt-[5px] cl:right-2 cl:text-danger-default cl:text-sm cl:z-10" };
-const _hoisted_5$g = ["disabled"];
+const _hoisted_5$f = ["disabled"];
 const _hoisted_6$a = ["disabled"];
 const _hoisted_7$8 = { class: "cl:min-h-[16rem] cl:mx-4" };
 const _hoisted_8$7 = { class: "cl:p-2 cl:text-right cl:w-full" };
@@ -1240,7 +1240,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
         ref_key: "outsideRef",
         ref: outsideRef
       }, attrs, { class: "cl:relative" }), [
-        createElementVNode("div", _hoisted_1$Q, [
+        createElementVNode("div", _hoisted_1$R, [
           createElementVNode("div", _hoisted_2$D, [
             createVNode(_sfc_main$18, {
               id: unref(id),
@@ -1264,7 +1264,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
               _: 1
             }, 8, ["id", "modelValue", "class", "placeholder", "disabled"])
           ]),
-          withDirectives(createElementVNode("div", _hoisted_3$r, [
+          withDirectives(createElementVNode("div", _hoisted_3$q, [
             createElementVNode("div", _hoisted_4$l, [
               createTextVNode(toDisplayString(unref(t2)("comboBox.required")) + " ", 1),
               createVNode(unref(Icon), {
@@ -1288,7 +1288,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
               icon: "ph:caret-down-bold",
               class: "cl:ml-[4px] cl:mt-[9px]"
             })
-          ], 10, _hoisted_5$g)) : (openBlock(), createElementBlock("div", {
+          ], 10, _hoisted_5$f)) : (openBlock(), createElementBlock("div", {
             key: 1,
             class: normalizeClass(["cl:border cl:border-grey-2 cl:border-l-0 cl:float-right cl:rounded-l-none cl:rounded-lg cl:text-grey-3 cl:transition-colors cl:w-[27px]", {
               "cl:cursor-default cl:bg-off-white": _ctx.disabled,
@@ -1403,27 +1403,27 @@ function isComboBoxCreateRequest(objectToTest) {
   return typeof objectToTest.name === "string";
 }
 const _sfc_main$12 = {};
-const _hoisted_1$P = { class: "cl:flex cl:flex-wrap cl:left-0 cl:mt-4 cl:w-full" };
+const _hoisted_1$Q = { class: "cl:flex cl:flex-wrap cl:left-0 cl:mt-4 cl:w-full" };
 const _hoisted_2$C = {
   key: 0,
   class: "cl:w-full"
 };
-const _hoisted_3$q = {
+const _hoisted_3$p = {
   key: 1,
   class: "cl:leading-10 cl:text-sm cl:w-full"
 };
 const _hoisted_4$k = { class: "cl:float-left" };
-const _hoisted_5$f = { class: "cl:float-right" };
+const _hoisted_5$e = { class: "cl:float-right" };
 function _sfc_render$5(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$P, [
+  return openBlock(), createElementBlock("div", _hoisted_1$Q, [
     _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2$C, [
       renderSlot(_ctx.$slots, "default")
     ])) : createCommentVNode("", true),
-    _ctx.$slots.left || _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_3$q, [
+    _ctx.$slots.left || _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_3$p, [
       createElementVNode("span", _hoisted_4$k, [
         renderSlot(_ctx.$slots, "left")
       ]),
-      createElementVNode("span", _hoisted_5$f, [
+      createElementVNode("span", _hoisted_5$e, [
         renderSlot(_ctx.$slots, "right")
       ])
     ])) : createCommentVNode("", true)
@@ -1432,15 +1432,15 @@ function _sfc_render$5(_ctx, _cache) {
 const clUiFooter = /* @__PURE__ */ _export_sfc(_sfc_main$12, [["render", _sfc_render$5]]);
 const gridDateFormatLocaleOverride = Symbol();
 const _sfc_main$11 = {};
-const _hoisted_1$O = { class: "cl:animate-pulse cl:bg-off-white cl:h-[33px] cl:px-20 cl:rounded-md" };
+const _hoisted_1$P = { class: "cl:h-[33px] cl:px-20 cl:rounded-md skeleton-loader-background" };
 function _sfc_render$4(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$O);
+  return openBlock(), createElementBlock("div", _hoisted_1$P);
 }
 const clUiSkeletonButton = /* @__PURE__ */ _export_sfc(_sfc_main$11, [["render", _sfc_render$4]]);
 const _sfc_main$10 = {};
-const _hoisted_1$N = { class: "cl:animate-pulse cl:bg-off-white cl:h-8 cl:rounded-md" };
+const _hoisted_1$O = { class: "cl:h-8 cl:rounded-md skeleton-loader-background" };
 function _sfc_render$3(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$N);
+  return openBlock(), createElementBlock("div", _hoisted_1$O);
 }
 const clUiSkeletonInput = /* @__PURE__ */ _export_sfc(_sfc_main$10, [["render", _sfc_render$3]]);
 const _sfc_main$$ = /* @__PURE__ */ defineComponent({
@@ -1462,7 +1462,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.words, (word) => {
             return openBlock(), createElementBlock("span", {
               key: word,
-              class: "cl:animate-pulse cl:bg-off-white cl:rounded-full cl:w-16"
+              class: "cl:rounded-full cl:w-16 skeleton-loader-background"
             }, [
               renderSlot(_ctx.$slots, "default", {}, () => [
                 _cache[0] || (_cache[0] = createTextVNode("   "))
@@ -1494,14 +1494,14 @@ function anySortableColumns(options, columns) {
 function anyFilterableColumns(columns) {
   return columns.some((c) => isFilterable(c));
 }
-const _hoisted_1$M = {
+const _hoisted_1$N = {
   key: 0,
   class: "cl:flex cl:gap-2 cl:justify-between cl:mb-2 cl:w-full"
 };
 const _hoisted_2$B = { key: 1 };
-const _hoisted_3$p = { class: "cl:flex cl:flex-wrap cl:gap-1 cl:lg:flex-nowrap cl:lg:gap-2 cl:md:justify-end cl:pb-2" };
+const _hoisted_3$o = { class: "cl:flex cl:flex-wrap cl:gap-1 cl:lg:flex-nowrap cl:lg:gap-2 cl:md:justify-end cl:pb-2" };
 const _hoisted_4$j = { class: "cl:basis-full cl:col-span-2 cl:grow cl:lg:basis-0" };
-const _hoisted_5$e = {
+const _hoisted_5$d = {
   key: 2,
   class: "cl:flex-1 cl:lg:block cl:lg:flex-none"
 };
@@ -1525,7 +1525,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     const hasFilters = computed(() => props.request.filters.some((f) => f.filterValue !== ""));
     const gridId = inject("cl-ui-grid-id") ?? "cl-ui-grid-filter";
     return (_ctx, _cache) => {
-      return _ctx.initialLoad && (_ctx.$slots["additional-grid-actions"] || unref(anyFilterableColumns)(_ctx.columns) || unref(anySortableColumns)(_ctx.options, _ctx.columns)) ? (openBlock(), createElementBlock("div", _hoisted_1$M, [
+      return _ctx.initialLoad && (_ctx.$slots["additional-grid-actions"] || unref(anyFilterableColumns)(_ctx.columns) || unref(anySortableColumns)(_ctx.options, _ctx.columns)) ? (openBlock(), createElementBlock("div", _hoisted_1$N, [
         (openBlock(), createElementBlock(Fragment, null, renderList(2, (n) => {
           return createVNode(unref(clUiSkeletonButton), {
             key: n,
@@ -1540,7 +1540,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
         }, [
           createElementVNode("strong", null, toDisplayString(unref(t2)("grid.gridTools")), 1)
         ], 2),
-        createElementVNode("div", _hoisted_3$p, [
+        createElementVNode("div", _hoisted_3$o, [
           createElementVNode("div", _hoisted_4$j, [
             renderSlot(_ctx.$slots, "additional-grid-actions", normalizeProps(guardReactiveProps({
               loading: _ctx.loading,
@@ -1582,7 +1582,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }, 8, ["disabled"])) : createCommentVNode("", true),
-          _ctx.options.hideViewManager === false ? (openBlock(), createElementBlock("div", _hoisted_5$e, [
+          _ctx.options.hideViewManager === false ? (openBlock(), createElementBlock("div", _hoisted_5$d, [
             renderSlot(_ctx.$slots, "view-manager")
           ])) : createCommentVNode("", true),
           unref(anyFilterableColumns)(_ctx.columns) || unref(anySortableColumns)(_ctx.options, _ctx.columns) ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
@@ -1623,7 +1623,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$L = ["for"];
+const _hoisted_1$M = ["for"];
 const _hoisted_2$A = ["required", "disabled"];
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   ...{
@@ -1694,7 +1694,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
               for: _ctx.$attrs.id ? _ctx.$attrs.id.toString() : ""
             }, [
               renderSlot(_ctx.$slots, "default", {}, void 0, true)
-            ], 8, _hoisted_1$L)
+            ], 8, _hoisted_1$M)
           ]),
           key: "0"
         } : void 0,
@@ -1837,7 +1837,9 @@ const messages = {
       invalidFileType: "{filename} is not a valid file type."
     },
     datetime: {
-      today: "Today"
+      today: "Today",
+      startDate: "Start Date",
+      endDate: "End Date"
     }
   }
 };
@@ -2307,7 +2309,7 @@ function getValidatedInputState(validationCheck, message) {
   };
   return validation;
 }
-const _hoisted_1$K = {
+const _hoisted_1$L = {
   key: 3,
   class: "cl:inline-block cl:whitespace-nowrap"
 };
@@ -2315,7 +2317,7 @@ const _hoisted_2$z = {
   key: 4,
   class: "cl:inline-block cl:whitespace-nowrap"
 };
-const _hoisted_3$o = {
+const _hoisted_3$n = {
   key: 5,
   class: "cl:inline-block cl:whitespace-nowrap"
 };
@@ -2423,7 +2425,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
         ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           createTextVNode(toDisplayString(formatDate(_ctx.data[_ctx.column.field], unref(DateFormat).DATETIME)), 1)
         ], 64))
-      ], 64)) : _ctx.column.type === "list" && _ctx.column.field !== void 0 && _ctx.column.listEntries !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_1$K, toDisplayString(unref(t2)(((_a = _ctx.column.listEntries.find((entry) => entry.value === _ctx.data[_ctx.column.field])) == null ? void 0 : _a.translationKey) ?? "")), 1)) : _ctx.column.type === "number" && _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_2$z, toDisplayString(formatNumberToString(_ctx.data[_ctx.column.field], unref(locale2))), 1)) : _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_3$o, [
+      ], 64)) : _ctx.column.type === "list" && _ctx.column.field !== void 0 && _ctx.column.listEntries !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_1$L, toDisplayString(unref(t2)(((_a = _ctx.column.listEntries.find((entry) => entry.value === _ctx.data[_ctx.column.field])) == null ? void 0 : _a.translationKey) ?? "")), 1)) : _ctx.column.type === "number" && _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_2$z, toDisplayString(formatNumberToString(_ctx.data[_ctx.column.field], unref(locale2))), 1)) : _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_3$n, [
         createElementVNode("span", {
           title: showUntruncatedStringValue.value ? _ctx.data[_ctx.column.field] : void 0,
           innerHTML: formatString()
@@ -2591,11 +2593,11 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$J = ["colspan"];
+const _hoisted_1$K = ["colspan"];
 const _hoisted_2$y = ["colspan"];
-const _hoisted_3$n = { key: 2 };
+const _hoisted_3$m = { key: 2 };
 const _hoisted_4$h = ["colspan"];
-const _hoisted_5$d = { class: "cl:flex cl:flex-wrap cl:justify-center cl:text-center cl:text-sm cl:w-full" };
+const _hoisted_5$c = { class: "cl:flex cl:flex-wrap cl:justify-center cl:text-center cl:text-sm cl:w-full" };
 const _hoisted_6$9 = { key: 0 };
 const _hoisted_7$7 = {
   key: 1,
@@ -2756,12 +2758,13 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
           return openBlock(), createElementBlock("tr", { key: row }, [
             createElementVNode("td", {
               colspan: _ctx.columns.length,
-              class: normalizeClass(
+              class: normalizeClass([
+                "cl:h-7",
                 {
-                  "cl:border-t cl:border-off-white": row % 2 === 0
+                  "cl:bg-white/60 skeleton-loader-background": row % 2 === 0
                 }
-              )
-            }, "   ", 10, _hoisted_1$J)
+              ])
+            }, "   ", 10, _hoisted_1$K)
           ]);
         }), 128)) : createCommentVNode("", true),
         _ctx.data && ((_a = _ctx.data.results) == null ? void 0 : _a.length) && !_ctx.initialLoad ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -2821,11 +2824,11 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
               }, "   ", 8, _hoisted_2$y)
             ], 2);
           }), 128)) : createCommentVNode("", true)
-        ], 64)) : !_ctx.loading ? (openBlock(), createElementBlock("tr", _hoisted_3$n, [
+        ], 64)) : !_ctx.loading ? (openBlock(), createElementBlock("tr", _hoisted_3$m, [
           createElementVNode("td", {
             colspan: _ctx.columns.length
           }, [
-            createElementVNode("div", _hoisted_5$d, [
+            createElementVNode("div", _hoisted_5$c, [
               _ctx.$slots.noData && _ctx.request.filters.some((f) => f.filterValue !== "") === false ? (openBlock(), createElementBlock("div", _hoisted_6$9, [
                 renderSlot(_ctx.$slots, "noData")
               ])) : (openBlock(), createElementBlock("strong", _hoisted_7$7, toDisplayString(unref(t2)("grid.noData")), 1)),
@@ -2849,9 +2852,9 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$I = ["value", "inputmode", "disabled", "placeholder"];
+const _hoisted_1$J = ["value", "inputmode", "disabled", "placeholder"];
 const _hoisted_2$x = { class: "cl:absolute cl:flex-col cl:flex-nowrap cl:h-full cl:hidden cl:justify-between cl:py-0.5 cl:right-1 cl:text-xs cl:top-0 cl:xl:flex" };
-const _hoisted_3$m = ["disabled"];
+const _hoisted_3$l = ["disabled"];
 const _hoisted_4$g = ["disabled"];
 const _sfc_main$U = /* @__PURE__ */ defineComponent({
   ...{
@@ -3029,7 +3032,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                 _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => incrementOrDecrement(true), ["prevent"]), ["down"])),
                 _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => incrementOrDecrement(false), ["prevent"]), ["up"]))
               ]
-            }), null, 16, _hoisted_1$I)),
+            }), null, 16, _hoisted_1$J)),
             withDirectives(createElementVNode("div", _hoisted_2$x, [
               createElementVNode("button", {
                 class: "cl:bg-secondary-light/30 cl:border cl:border-grey-3 cl:hover:bg-secondary-light/20 cl:px-1 cl:rounded",
@@ -3041,7 +3044,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                 ]
               }, [
                 createVNode(_component_icon, { icon: "ph:caret-up-bold" })
-              ], 40, _hoisted_3$m),
+              ], 40, _hoisted_3$l),
               createElementVNode("button", {
                 class: "cl:bg-secondary-light/30 cl:border cl:border-grey-3 cl:hover:bg-secondary-light/20 cl:px-1 cl:rounded",
                 disabled: _ctx.disabled,
@@ -3078,14 +3081,14 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$H = {
+const _hoisted_1$I = {
   key: 0,
   class: "cl:flex cl:flex-col cl:lg:flex-row cl:lg:gap-2"
 };
 const _hoisted_2$w = { class: "cl:border cl:border-off-white cl:flex cl:items-center cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg cl:w-full" };
-const _hoisted_3$l = { class: "cl:border cl:border-off-white cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg" };
+const _hoisted_3$k = { class: "cl:border cl:border-off-white cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg" };
 const _hoisted_4$f = ["inert"];
-const _hoisted_5$c = { class: "cl:basis-full cl:bg-off-white cl:border cl:border-grey-1 cl:flex cl:flex-1 cl:items-center cl:justify-between cl:lg:basis-0 cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg cl:shadow cl:text-sm" };
+const _hoisted_5$b = { class: "cl:basis-full cl:bg-off-white cl:border cl:border-grey-1 cl:flex cl:flex-1 cl:items-center cl:justify-between cl:lg:basis-0 cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg cl:shadow cl:text-sm" };
 const _hoisted_6$8 = { class: "cl:flex cl:flex-wrap cl:gap-x-4 cl:gap-y-2 cl:items-center cl:justify-between cl:w-full" };
 const _hoisted_7$6 = { class: "cl:flex cl:flex-wrap cl:gap-x-4" };
 const _hoisted_8$5 = { class: "cl:flex cl:flex-col cl:lg:flex-row" };
@@ -3162,7 +3165,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       var _a, _b, _c;
-      return _ctx.initialLoad ? (openBlock(), createElementBlock("div", _hoisted_1$H, [
+      return _ctx.initialLoad ? (openBlock(), createElementBlock("div", _hoisted_1$I, [
         createElementVNode("div", _hoisted_2$w, [
           createVNode(unref(_sfc_main$$), { words: 3 }),
           createVNode(unref(_sfc_main$$), {
@@ -3170,7 +3173,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             words: 2
           })
         ]),
-        createElementVNode("div", _hoisted_3$l, [
+        createElementVNode("div", _hoisted_3$k, [
           createVNode(unref(clUiSkeletonInput), { class: "cl:w-64" })
         ])
       ])) : _ctx.loading || ((_b = (_a = _ctx.data) == null ? void 0 : _a.results) == null ? void 0 : _b.length) && _ctx.request ? (openBlock(), createElementBlock("div", {
@@ -3180,7 +3183,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
         }]),
         inert: _ctx.loading
       }, [
-        createElementVNode("div", _hoisted_5$c, [
+        createElementVNode("div", _hoisted_5$b, [
           createElementVNode("div", _hoisted_6$8, [
             createElementVNode("div", _hoisted_7$6, [
               createElementVNode("div", _hoisted_8$5, [
@@ -3456,7 +3459,7 @@ function getMaxDateValue(max, timeZone, currentValue, calendarType) {
   }
   return currentValue;
 }
-const _hoisted_1$G = { class: "cl:gap-1 cl:grid cl:grid-cols-2" };
+const _hoisted_1$H = { class: "cl:gap-1 cl:grid cl:grid-cols-2" };
 const _hoisted_2$v = ["onClick"];
 const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-quick-dates-group",
@@ -3469,7 +3472,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const { t: t2 } = useI18n();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$G, [
+      return openBlock(), createElementBlock("div", _hoisted_1$H, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dates, (date, index2) => {
           var _a, _b;
           return openBlock(), createElementBlock("button", {
@@ -3584,7 +3587,7 @@ const allQuickDates = [
   ...futureQuickDates,
   ...currentQuickDates
 ];
-const _hoisted_1$F = { class: "cl:p-2 cl:pt-0" };
+const _hoisted_1$G = { class: "cl:p-2 cl:pt-0" };
 const _hoisted_2$u = {
   key: 0,
   class: "cl:mt-2 cl:opacity-20"
@@ -3631,7 +3634,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
       return groups;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$F, [
+      return openBlock(), createElementBlock("div", _hoisted_1$G, [
         createElementVNode("div", null, toDisplayString(unref(t2)("quickDates.quickDatesHeader")), 1),
         (openBlock(true), createElementBlock(Fragment, null, renderList(quickDateGroups.value, (group, index2) => {
           return openBlock(), createElementBlock("div", {
@@ -3650,208 +3653,6 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$Q = /* @__PURE__ */ defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __name: "cl-ui-input-date-range-input",
-  props: {
-    required: { type: Boolean },
-    disabled: { type: Boolean },
-    dateRangeSelected: { type: Boolean }
-  },
-  emits: ["togglePopover", "clear"],
-  setup(__props) {
-    const { t: t2 } = useI18n();
-    const togglePopoverButtonAttrs = computed(() => {
-      const { class: _, ...result } = useAttrs();
-      return result;
-    });
-    return (_ctx, _cache) => {
-      const _component_icon = resolveComponent("icon");
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["cl:border cl:border-grey-1 cl:flex cl:flex-nowrap cl:flex-row cl:overflow-hidden cl:rounded-md range-input", [
-          _ctx.$attrs.class,
-          {
-            "cl:bg-grey-3": _ctx.disabled
-          }
-        ]])
-      }, [
-        createVNode(_sfc_main$1b, mergeProps(togglePopoverButtonAttrs.value, {
-          class: ["cl:basis-full cl:border-transparent cl:flex! cl:hover:border-transparent cl:items-center cl:justify-center cl:rounded-l-md cl:rounded-r-none", {
-            "cl:text-grey-4 cl:hover:text-grey-3": !_ctx.dateRangeSelected && !_ctx.disabled,
-            "cl:text-primary-darker cl:hover:text-primary-dark": _ctx.dateRangeSelected && !_ctx.disabled
-          }],
-          disabled: _ctx.disabled,
-          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("togglePopover"))
-        }), {
-          default: withCtx(() => [
-            createVNode(_component_icon, {
-              icon: "bi:calendar3",
-              class: "cl:text-xl icon"
-            })
-          ]),
-          _: 1
-        }, 16, ["disabled", "class"]),
-        !_ctx.required ? (openBlock(), createBlock(_sfc_main$1b, {
-          key: 0,
-          id: _ctx.$attrs.id ? _ctx.$attrs.id + "Clear" : "clUiDateRangeInputClear",
-          title: unref(t2)("input.clearDateRange"),
-          size: "small",
-          class: normalizeClass(["cl:basis-0 cl:border-transparent cl:flex cl:hover:border-transparent cl:items-center cl:justify-center cl:rounded-l-none cl:rounded-r-md", {
-            "cl:text-grey-4 cl:hover:text-grey-3": !_ctx.dateRangeSelected && !_ctx.disabled,
-            "cl:text-danger-dark cl:hover:text-danger-default": _ctx.dateRangeSelected && !_ctx.disabled
-          }]),
-          disabled: _ctx.disabled,
-          onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("clear"))
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_icon, {
-              icon: "ph:x",
-              class: "cl:text-sm clear-icon"
-            })
-          ]),
-          _: 1
-        }, 8, ["id", "title", "disabled", "class"])) : createCommentVNode("", true)
-      ], 2);
-    };
-  }
-});
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
-  ...{
-    inheritAttrs: false
-  },
-  __name: "cl-ui-input-date-range",
-  props: /* @__PURE__ */ mergeModels({
-    minDate: { default: null },
-    maxDate: { default: null },
-    initialCalendarDate: { default: null },
-    dateFormatLocale: { default: null },
-    timeZone: { default: null },
-    disabled: { type: Boolean, default: false },
-    required: { type: Boolean, default: false },
-    quickDateScope: { default: null },
-    popoverPlacement: { default: "auto" }
-  }, {
-    "modelValue": { required: true },
-    "modelModifiers": {}
-  }),
-  emits: ["update:modelValue"],
-  setup(__props) {
-    const props = __props;
-    const model = useModel(__props, "modelValue");
-    const internalTimeZone = computed(() => props.timeZone ?? "UTC");
-    const internalCurrentDateRange = computed({
-      get() {
-        let result = null;
-        if (model.value !== null) {
-          result = {
-            start: DateTime.fromISO(model.value.start, {
-              zone: internalTimeZone.value
-            }).toJSDate(),
-            end: DateTime.fromISO(model.value.end ?? "", {
-              zone: internalTimeZone.value
-            }).toJSDate()
-          };
-        }
-        return result;
-      },
-      set(value) {
-        if (value !== null) {
-          const rangeValue = value;
-          model.value = {
-            start: convertDateToIsoString(rangeValue.start, "start", false, props.timeZone) ?? "",
-            end: convertDateToIsoString(rangeValue.end, "end", false, props.timeZone) ?? ""
-          };
-        } else {
-          model.value = null;
-        }
-      }
-    });
-    const { locale: locale2 } = useI18n();
-    const internalLocale = computed(() => props.dateFormatLocale ?? locale2.value);
-    const popover = computed(() => getPopoverOptions(props.disabled, props.popoverPlacement));
-    const currentInitialDate = computed(() => {
-      return getInitialCalendarDate(model.value, props.initialCalendarDate, internalTimeZone.value, "dateRange");
-    });
-    const dateRangeTooltipText = computed(() => {
-      return generateDateRangeTooltip(internalCurrentDateRange.value, internalTimeZone.value, internalLocale.value);
-    });
-    const currentQuickDate = ref(null);
-    const calendar = ref(null);
-    function handleQuickDateSelection(selectedQuickDate) {
-      const newDateRange = getDateRangeForQuickDateSelection(selectedQuickDate, internalTimeZone.value);
-      internalCurrentDateRange.value = newDateRange;
-      currentQuickDate.value = selectedQuickDate;
-      calendar.value.move(newDateRange.start);
-      calendar.value.hidePopover();
-    }
-    const isMediumScreen = useMediaQuery("(min-width: 768px)");
-    const dateRangeColumnCount = computed(() => isMediumScreen.value ? 2 : 1);
-    const showQuickDates = useMediaQuery("(min-height: 800px)");
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$19, { "show-required-asterisk": _ctx.required }, createSlots({
-        label: withCtx(() => [
-          renderSlot(_ctx.$slots, "default")
-        ]),
-        default: withCtx(() => [
-          createVNode(unref(DatePicker), {
-            ref_key: "calendar",
-            ref: calendar,
-            modelValue: internalCurrentDateRange.value,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => internalCurrentDateRange.value = $event),
-            modelModifiers: { range: true },
-            mode: "date",
-            color: "primary",
-            "title-position": "left",
-            locale: internalLocale.value,
-            timezone: internalTimeZone.value,
-            columns: dateRangeColumnCount.value,
-            popover: popover.value,
-            "min-date": _ctx.minDate,
-            "max-date": _ctx.maxDate,
-            "initial-page": currentInitialDate.value,
-            onDayclick: _cache[2] || (_cache[2] = ($event) => currentQuickDate.value = null)
-          }, {
-            default: withCtx(({ togglePopover }) => [
-              createVNode(_sfc_main$Q, mergeProps(_ctx.$attrs, {
-                required: _ctx.required,
-                disabled: _ctx.disabled,
-                "date-range-selected": !!internalCurrentDateRange.value,
-                title: dateRangeTooltipText.value,
-                onTogglePopover: togglePopover,
-                onClear: _cache[0] || (_cache[0] = ($event) => {
-                  internalCurrentDateRange.value = null;
-                  currentQuickDate.value = null;
-                  calendar.value.hidePopover();
-                })
-              }), null, 16, ["required", "disabled", "date-range-selected", "title", "onTogglePopover"])
-            ]),
-            footer: withCtx(() => [
-              _ctx.quickDateScope !== "none" && unref(showQuickDates) ? (openBlock(), createBlock(_sfc_main$R, {
-                key: 0,
-                scope: _ctx.quickDateScope,
-                "selected-quick-date": currentQuickDate.value,
-                "current-date-range": model.value,
-                onQuickDateSelected: handleQuickDateSelection
-              }, null, 8, ["scope", "selected-quick-date", "current-date-range"])) : createCommentVNode("", true)
-            ]),
-            _: 1
-          }, 8, ["modelValue", "locale", "timezone", "columns", "popover", "min-date", "max-date", "initial-page"])
-        ]),
-        _: 2
-      }, [
-        _ctx.$slots[`help-text`] ? {
-          name: "helpText",
-          fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "help-text")
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["show-required-asterisk"]);
-    };
-  }
-});
 const inputTextTypes = [
   "text",
   "email",
@@ -3859,7 +3660,7 @@ const inputTextTypes = [
   "password",
   "search"
 ];
-const _sfc_main$O = /* @__PURE__ */ defineComponent({
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -3963,15 +3764,15 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$E = { class: "cl:gap-1 cl:grid cl:grid-cols-[auto_1fr_auto_auto] cl:pt-0.5 cl:w-full" };
+const _hoisted_1$F = { class: "cl:gap-1 cl:grid cl:grid-cols-[auto_1fr_auto_auto] cl:pt-0.5 cl:w-full" };
 const _hoisted_2$t = ["disabled"];
-const _hoisted_3$k = { class: "cl:max-w-max" };
+const _hoisted_3$j = { class: "cl:max-w-max" };
 const _hoisted_4$e = { class: "cl:flex cl:flex-col cl:gap-1 cl:w-full" };
-const _hoisted_5$b = ["min", "disabled", "required", "step", "max"];
+const _hoisted_5$a = ["min", "disabled", "required", "step", "max"];
 const _hoisted_6$7 = { class: "cl:bg-white cl:border cl:border-grey-2 cl:leading-none cl:rounded-full cl:text-center cl:text-xs" };
 const _hoisted_7$5 = ["disabled"];
 const _hoisted_8$4 = ["disabled", "title"];
-const _sfc_main$N = /* @__PURE__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -4026,13 +3827,13 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
         "show-required-asterisk": _ctx.required
       }, createSlots({
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$E, [
+          createElementVNode("div", _hoisted_1$F, [
             createElementVNode("button", {
               disabled: _ctx.disabled,
               class: "cl:active:bg-grey-0 cl:bg-white cl:border cl:border-grey-2 cl:disabled:bg-grey-1 cl:hover:bg-off-white cl:leading-none cl:min-w-[26px] cl:p-[5px] cl:rounded-full cl:shadow cl:text-xs cl:transition-colors",
               onClick: _cache[0] || (_cache[0] = ($event) => setValueAndFocus(_ctx.min))
             }, toDisplayString(unref(formatNumberAsDecimal)(_ctx.min, _ctx.precision)), 9, _hoisted_2$t),
-            createElementVNode("div", _hoisted_3$k, [
+            createElementVNode("div", _hoisted_3$j, [
               withDirectives(createElementVNode("div", _hoisted_4$e, [
                 withDirectives(createElementVNode("input", mergeProps({
                   ref_key: "sliderRef",
@@ -4046,7 +3847,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                   required: _ctx.required,
                   step: 1 / Math.pow(10, _ctx.precision),
                   max: _ctx.max
-                }), null, 16, _hoisted_5$b), [
+                }), null, 16, _hoisted_5$a), [
                   [
                     vModelText,
                     value.value,
@@ -4109,12 +3910,79 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const clUiInputRange = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-82275076"]]);
+const clUiInputRange = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-82275076"]]);
 const dateTimeCalendarTypes = [
   "date",
   "datetime",
   "time"
 ];
+const _sfc_main$O = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "cl-ui-input-date-range-input",
+  props: {
+    required: { type: Boolean },
+    disabled: { type: Boolean },
+    dateRangeSelected: { type: Boolean }
+  },
+  emits: ["togglePopover", "clear"],
+  setup(__props) {
+    const { t: t2 } = useI18n();
+    const togglePopoverButtonAttrs = computed(() => {
+      const { class: _, ...result } = useAttrs();
+      return result;
+    });
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["cl:border cl:border-grey-1 cl:flex cl:flex-nowrap cl:flex-row cl:overflow-hidden cl:rounded-md range-input", [
+          _ctx.$attrs.class,
+          {
+            "cl:bg-grey-3": _ctx.disabled
+          }
+        ]])
+      }, [
+        createVNode(_sfc_main$1b, mergeProps(togglePopoverButtonAttrs.value, {
+          class: ["cl:basis-full cl:border-transparent cl:flex! cl:hover:border-transparent cl:items-center cl:justify-center cl:rounded-l-md cl:rounded-r-none", {
+            "cl:text-grey-4 cl:hover:text-grey-3": !_ctx.dateRangeSelected && !_ctx.disabled,
+            "cl:text-primary-darker cl:hover:text-primary-dark": _ctx.dateRangeSelected && !_ctx.disabled
+          }],
+          disabled: _ctx.disabled,
+          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("togglePopover"))
+        }), {
+          default: withCtx(() => [
+            createVNode(_component_icon, {
+              icon: "bi:calendar3",
+              class: "cl:text-xl icon"
+            })
+          ]),
+          _: 1
+        }, 16, ["disabled", "class"]),
+        !_ctx.required ? (openBlock(), createBlock(_sfc_main$1b, {
+          key: 0,
+          id: _ctx.$attrs.id ? _ctx.$attrs.id + "Clear" : "clUiDateRangeInputClear",
+          title: unref(t2)("input.clearDateRange"),
+          size: "small",
+          class: normalizeClass(["cl:basis-0 cl:border-transparent cl:flex cl:hover:border-transparent cl:items-center cl:justify-center cl:rounded-l-none cl:rounded-r-md", {
+            "cl:text-grey-4 cl:hover:text-grey-3": !_ctx.dateRangeSelected && !_ctx.disabled,
+            "cl:text-danger-dark cl:hover:text-danger-default": _ctx.dateRangeSelected && !_ctx.disabled
+          }]),
+          disabled: _ctx.disabled,
+          onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("clear"))
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_icon, {
+              icon: "ph:x",
+              class: "cl:text-sm clear-icon"
+            })
+          ]),
+          _: 1
+        }, 8, ["id", "title", "disabled", "class"])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
 const popoverPlacements = [
   "auto",
   "auto-start",
@@ -4128,16 +3996,12 @@ const popoverPlacements = [
   "left-start",
   "left-end"
 ];
-const _hoisted_1$D = {
+const _hoisted_1$E = {
   key: 1,
   class: "cl:relative"
 };
 const _hoisted_2$s = ["value", "disabled", "placeholder"];
-const _hoisted_3$j = {
-  key: 0,
-  class: "action-icon cl:absolute cl:bg-transparent cl:flex cl:right-2 cl:text-grey-4 cl:top-3.5"
-};
-const _sfc_main$M = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -4149,7 +4013,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     placeholder: {},
     required: { type: Boolean },
     disabled: { type: Boolean },
-    rangeSelected: { type: Boolean }
+    rangeSelected: { type: Boolean },
+    forceIconDisplay: { type: Boolean }
   },
   emits: ["clear", "reset", "togglePopover", "focus", "blur"],
   setup(__props, { expose: __expose }) {
@@ -4179,13 +4044,13 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
       focus
     });
     return (_ctx, _cache) => {
-      return _ctx.type === "dateRange" ? (openBlock(), createBlock(unref(_sfc_main$Q), mergeProps({ key: 0 }, _ctx.$attrs, {
+      return _ctx.type === "dateRange" ? (openBlock(), createBlock(unref(_sfc_main$O), mergeProps({ key: 0 }, _ctx.$attrs, {
         disabled: !!_ctx.disabled,
         required: _ctx.required,
         "date-range-selected": !!_ctx.rangeSelected,
         onTogglePopover: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("togglePopover")),
         onClear: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("clear"))
-      }), null, 16, ["disabled", "required", "date-range-selected"])) : (openBlock(), createElementBlock("div", _hoisted_1$D, [
+      }), null, 16, ["disabled", "required", "date-range-selected"])) : (openBlock(), createElementBlock("div", _hoisted_1$E, [
         createElementVNode("input", mergeProps({
           ref_key: "element",
           ref: element
@@ -4202,7 +4067,10 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           icon: _ctx.type === "time" ? "ph-clock" : "ph:calendar",
           onClick: focus
         }, null, 8, ["icon"]),
-        !_ctx.disabled ? (openBlock(), createElementBlock("div", _hoisted_3$j, [
+        !_ctx.disabled ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["action-icon cl:absolute cl:bg-transparent cl:flex cl:right-2 cl:text-grey-4 cl:top-3.5", { "show-icons": _ctx.forceIconDisplay }])
+        }, [
           _ctx.type !== "time" ? (openBlock(), createBlock(unref(Icon), {
             key: 0,
             class: "cl:cursor-pointer cl:hover:text-link-light",
@@ -4215,13 +4083,13 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
             icon: "ph:x",
             onClick: _cache[5] || (_cache[5] = withModifiers(($event) => _ctx.$emit("clear"), ["prevent"]))
           })) : createCommentVNode("", true)
-        ])) : createCommentVNode("", true)
+        ], 2)) : createCommentVNode("", true)
       ]));
     };
   }
 });
-const clUiCalendarInput = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-94999178"]]);
-const _hoisted_1$C = {
+const clUiCalendarInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-8d0a0dc4"]]);
+const _hoisted_1$D = {
   key: 0,
   class: "cl:px-3 cl:py-3 cl:w-full"
 };
@@ -4229,7 +4097,7 @@ const _hoisted_2$r = {
   key: 0,
   class: "cl:px-3 cl:py-3 cl:w-full"
 };
-const _sfc_main$L = /* @__PURE__ */ defineComponent({
+const _sfc_main$M = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -4245,7 +4113,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     required: { type: Boolean, default: false },
     placeholder: { default: null },
     popoverPlacement: { default: "auto" },
-    showPopover: { type: Boolean, default: void 0 }
+    showPopover: { type: Boolean, default: void 0 },
+    forceIconDisplay: { type: Boolean, default: false }
   }, {
     "modelValue": { required: true },
     "modelModifiers": {}
@@ -4368,14 +4237,15 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                 type: _ctx.type,
                 placeholder: _ctx.placeholder,
                 required: _ctx.required,
+                "force-icon-display": _ctx.forceIconDisplay,
                 disabled: _ctx.disabled,
                 onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("focus")),
                 onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("blur")),
                 onClear: _cache[2] || (_cache[2] = ($event) => internalCurrentDateTime.value = null)
-              }), null, 16, ["date", "events", "type", "placeholder", "required", "disabled"])
+              }), null, 16, ["date", "events", "type", "placeholder", "required", "force-icon-display", "disabled"])
             ]),
             footer: withCtx(() => [
-              todayButtonVisible.value ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
+              todayButtonVisible.value ? (openBlock(), createElementBlock("div", _hoisted_1$D, [
                 createElementVNode("button", {
                   class: "cl:bg-primary-default cl:hover:primary-light cl:px-3 cl:py-1 cl:rounded-md cl:text-black cl:w-full",
                   onClick: setToday
@@ -4414,11 +4284,12 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                 placeholder: _ctx.placeholder,
                 required: _ctx.required,
                 disabled: _ctx.disabled,
+                "force-icon-display": _ctx.forceIconDisplay,
                 onFocus: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("focus")),
                 onBlur: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("blur")),
                 onClear: _cache[6] || (_cache[6] = ($event) => internalCurrentDateTime.value = null),
                 onReset: _cache[7] || (_cache[7] = ($event) => internalCurrentDateTime.value = unref(getDefaultDate)(_ctx.minDate, _ctx.maxDate, internalTimeZone.value, _ctx.type))
-              }), null, 16, ["date", "events", "type", "placeholder", "required", "disabled"])
+              }), null, 16, ["date", "events", "type", "placeholder", "required", "disabled", "force-icon-display"])
             ]),
             footer: withCtx(() => [
               todayButtonVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2$r, [
@@ -4444,6 +4315,244 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$C = {
+  key: 1,
+  class: "cl:flex cl:flex-col cl:gap-2 cl:p-2 cl:w-full"
+};
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "cl-ui-input-date-range",
+  props: /* @__PURE__ */ mergeModels({
+    minDate: { default: null },
+    maxDate: { default: null },
+    initialCalendarDate: { default: null },
+    dateFormatLocale: { default: null },
+    timeZone: { default: null },
+    disabled: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    quickDateScope: { default: null },
+    popoverPlacement: { default: "auto" },
+    manualDateSelection: { type: Boolean, default: true }
+  }, {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const model = useModel(__props, "modelValue");
+    const internalTimeZone = computed(() => props.timeZone ?? "UTC");
+    const internalCurrentDateRange = computed({
+      get() {
+        let result = null;
+        if (model.value !== null) {
+          result = {
+            start: DateTime.fromISO(model.value.start, {
+              zone: internalTimeZone.value
+            }).toJSDate(),
+            end: DateTime.fromISO(model.value.end ?? "", {
+              zone: internalTimeZone.value
+            }).toJSDate()
+          };
+        }
+        return result;
+      },
+      set(value) {
+        if (value !== null) {
+          const rangeValue = value;
+          model.value = {
+            start: convertDateToIsoString(rangeValue.start, "start", false, props.timeZone) ?? "",
+            end: convertDateToIsoString(rangeValue.end, "end", false, props.timeZone) ?? ""
+          };
+          internalEntrySelectStartDate.value = convertDateToIsoString(rangeValue.start, "start", false, props.timeZone) ?? "";
+          internalEntrySelectEndDate.value = convertDateToIsoString(rangeValue.end, "end", false, props.timeZone) ?? "";
+        } else {
+          model.value = null;
+        }
+      }
+    });
+    watch(() => internalCurrentDateRange.value, (newVal) => {
+      if (!newVal) {
+        internalEntrySelectStartDate.value = null;
+        internalEntrySelectEndDate.value = null;
+      }
+    });
+    const { locale: locale2, t: t2 } = useI18n();
+    const internalLocale = computed(() => props.dateFormatLocale ?? locale2.value);
+    const popover = computed(() => getPopoverOptions(props.disabled, props.popoverPlacement));
+    const currentInitialDate = computed(() => {
+      return getInitialCalendarDate(model.value, props.initialCalendarDate, internalTimeZone.value, "dateRange");
+    });
+    const dateRangeTooltipText = computed(() => {
+      return generateDateRangeTooltip(internalCurrentDateRange.value, internalTimeZone.value, internalLocale.value);
+    });
+    const currentQuickDate = ref(null);
+    const calendar = ref(null);
+    function handleQuickDateSelection(selectedQuickDate) {
+      const newDateRange = getDateRangeForQuickDateSelection(selectedQuickDate, internalTimeZone.value);
+      internalCurrentDateRange.value = newDateRange;
+      currentQuickDate.value = selectedQuickDate;
+      calendar.value.move(newDateRange.start);
+      calendar.value.hidePopover();
+    }
+    const isMediumScreen = useMediaQuery("(min-width: 768px)");
+    const dateRangeColumnCount = computed(() => isMediumScreen.value ? 2 : 1);
+    const showQuickDates = useMediaQuery("(min-height: 800px)");
+    const internalEntrySelectStartDate = ref(null);
+    const internalEntrySelectEndDate = ref(null);
+    function handleEntrySelectDateRangeUpdate() {
+      let startDate = internalEntrySelectStartDate.value ? internalEntrySelectStartDate.value : "";
+      let endDate = internalEntrySelectEndDate.value ? internalEntrySelectEndDate.value : "";
+      let startDateTime = DateTime.fromISO(startDate, { zone: internalTimeZone.value });
+      let endDateTime = DateTime.fromISO(endDate, { zone: internalTimeZone.value });
+      if (!internalEntrySelectStartDate.value && internalEntrySelectEndDate.value || startDateTime.startOf("day") > endDateTime.startOf("day")) {
+        startDateTime = DateTime.fromISO(endDate, { zone: internalTimeZone.value }).minus({ days: 1 });
+        startDate = startDateTime.toISO() ?? "";
+        nextTick(() => {
+          internalEntrySelectStartDate.value = startDate;
+        });
+      } else if (internalEntrySelectStartDate.value && !internalEntrySelectEndDate.value) {
+        const todaysDate = DateTime.now().setZone(internalTimeZone.value).startOf("day");
+        if (startDateTime.startOf("day") > todaysDate) {
+          endDateTime = startDateTime.plus({ days: 1 });
+          endDate = endDateTime.toISO() ?? "";
+        } else {
+          endDate = todaysDate.toISO() ?? "";
+          endDateTime = DateTime.fromISO(endDate, { zone: internalTimeZone.value });
+        }
+        nextTick(() => {
+          internalEntrySelectEndDate.value = endDate;
+        });
+      }
+      if (!internalEntrySelectStartDate.value && !internalEntrySelectEndDate.value) {
+        internalCurrentDateRange.value = null;
+      } else {
+        const formattedStartDate = DateTime.fromISO(startDate, { zone: internalTimeZone.value });
+        const formattedEndDate = DateTime.fromISO(endDate, { zone: internalTimeZone.value });
+        internalCurrentDateRange.value = {
+          start: formattedStartDate.toJSDate(),
+          end: formattedEndDate.toJSDate()
+        };
+      }
+      if (internalCurrentDateRange.value) {
+        calendar.value.move(internalCurrentDateRange.value.start);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$19, { "show-required-asterisk": _ctx.required }, createSlots({
+        label: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        default: withCtx(() => [
+          createVNode(unref(DatePicker), {
+            ref_key: "calendar",
+            ref: calendar,
+            modelValue: internalCurrentDateRange.value,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => internalCurrentDateRange.value = $event),
+            modelModifiers: { range: true },
+            mode: "date",
+            color: "primary",
+            "title-position": "left",
+            locale: internalLocale.value,
+            timezone: internalTimeZone.value,
+            columns: dateRangeColumnCount.value,
+            popover: popover.value,
+            "min-date": _ctx.minDate,
+            "max-date": _ctx.maxDate,
+            "initial-page": currentInitialDate.value,
+            onDayclick: _cache[4] || (_cache[4] = ($event) => currentQuickDate.value = null)
+          }, {
+            default: withCtx(({ togglePopover }) => [
+              createVNode(_sfc_main$O, mergeProps(_ctx.$attrs, {
+                required: _ctx.required,
+                disabled: _ctx.disabled,
+                "date-range-selected": !!internalCurrentDateRange.value,
+                title: dateRangeTooltipText.value,
+                onTogglePopover: togglePopover,
+                onClear: _cache[0] || (_cache[0] = ($event) => {
+                  internalCurrentDateRange.value = null;
+                  currentQuickDate.value = null;
+                  calendar.value.hidePopover();
+                  internalEntrySelectStartDate.value = null;
+                  internalEntrySelectEndDate.value = null;
+                })
+              }), null, 16, ["required", "disabled", "date-range-selected", "title", "onTogglePopover"])
+            ]),
+            footer: withCtx(() => [
+              _ctx.quickDateScope !== "none" && unref(showQuickDates) ? (openBlock(), createBlock(_sfc_main$R, {
+                key: 0,
+                scope: _ctx.quickDateScope,
+                "selected-quick-date": currentQuickDate.value,
+                "current-date-range": model.value,
+                onQuickDateSelected: handleQuickDateSelection
+              }, null, 8, ["scope", "selected-quick-date", "current-date-range"])) : createCommentVNode("", true),
+              _ctx.manualDateSelection ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
+                createVNode(_sfc_main$M, {
+                  id: "dateInputStart",
+                  modelValue: internalEntrySelectStartDate.value,
+                  "onUpdate:modelValue": [
+                    _cache[1] || (_cache[1] = ($event) => internalEntrySelectStartDate.value = $event),
+                    handleEntrySelectDateRangeUpdate
+                  ],
+                  type: "date",
+                  "date-format-locale": _ctx.dateFormatLocale,
+                  disabled: _ctx.disabled,
+                  "time-zone": _ctx.timeZone,
+                  "min-date": _ctx.minDate,
+                  "max-date": _ctx.maxDate,
+                  required: true,
+                  "force-icon-display": true,
+                  "popover-placement": _ctx.popoverPlacement,
+                  "show-popover": true
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t2)("datetime.startDate")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["modelValue", "date-format-locale", "disabled", "time-zone", "min-date", "max-date", "popover-placement"]),
+                createVNode(_sfc_main$M, {
+                  id: "dateInputEnd",
+                  modelValue: internalEntrySelectEndDate.value,
+                  "onUpdate:modelValue": [
+                    _cache[2] || (_cache[2] = ($event) => internalEntrySelectEndDate.value = $event),
+                    handleEntrySelectDateRangeUpdate
+                  ],
+                  type: "date",
+                  "date-format-locale": _ctx.dateFormatLocale,
+                  disabled: _ctx.disabled,
+                  "time-zone": _ctx.timeZone,
+                  "min-date": _ctx.minDate,
+                  "max-date": _ctx.maxDate,
+                  required: true,
+                  "force-icon-display": true,
+                  "popover-placement": _ctx.popoverPlacement,
+                  "show-popover": true
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t2)("datetime.endDate")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["modelValue", "date-format-locale", "disabled", "time-zone", "min-date", "max-date", "popover-placement"])
+              ])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["modelValue", "locale", "timezone", "columns", "popover", "min-date", "max-date", "initial-page"])
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots[`help-text`] ? {
+          name: "helpText",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "help-text")
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["show-required-asterisk"]);
+    };
+  }
+});
 const _sfc_main$K = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -5153,7 +5262,7 @@ const _hoisted_4$d = {
   key: 3,
   class: "cl:w-full"
 };
-const _hoisted_5$a = {
+const _hoisted_5$9 = {
   key: 4,
   class: "cl:w-full"
 };
@@ -5514,7 +5623,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["id", "list", "model-value"])) : isDateColumn.value ? (openBlock(), createElementBlock("div", _hoisted_2$o, [
-          createVNode(_sfc_main$L, {
+          createVNode(_sfc_main$M, {
             id: `${unref(gridId)}-${_ctx.column.name}`,
             "model-value": currentDateFilterValue.value,
             "time-zone": _ctx.timeZone,
@@ -5524,12 +5633,13 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => setFilter(null, $event ?? ""))
           }, null, 8, ["id", "model-value", "time-zone", "type"])
         ])) : isDateRangeColumn.value ? (openBlock(), createElementBlock("div", _hoisted_3$g, [
-          createVNode(_sfc_main$P, {
+          createVNode(_sfc_main$L, {
             id: `${unref(gridId)}-${_ctx.column.name}`,
             "model-value": currentDateRangeFilterValue.value,
             class: "cl:[&_.clear-icon]:-pb-4 cl:[&_.icon]:text-sm cl:[&_.range-input]:h-[2rem] cl:border-none cl:h-[2rem] cl:mb-0 cl:w-full cl:z-50",
             "time-zone": _ctx.headerDisplayTimezone,
             "quick-date-scope": _ctx.quickDateScope,
+            "manual-date-selection": true,
             "popover-placement": "bottom-start",
             "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => setDateRangeFilter($event))
           }, null, 8, ["id", "model-value", "time-zone", "quick-date-scope"])
@@ -5549,7 +5659,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             ])),
             _: 1
           }, 8, ["id", "model-value", "format", "precision"])
-        ])) : _ctx.column.type === "string" || _ctx.column.type === "slot" && _ctx.column.slotType === "string" ? (openBlock(), createElementBlock("div", _hoisted_5$a, [
+        ])) : _ctx.column.type === "string" || _ctx.column.type === "slot" && _ctx.column.slotType === "string" ? (openBlock(), createElementBlock("div", _hoisted_5$9, [
           createVNode(_sfc_main$18, {
             id: `${unref(gridId)}-${_ctx.column.name}`,
             modelValue: internalTextInputValue.value,
@@ -5606,7 +5716,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const clUiGridFilterInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-879183d3"]]);
+const clUiGridFilterInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-0147943d"]]);
 const _hoisted_1$y = { key: 1 };
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-grid-filter",
@@ -5665,10 +5775,9 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$x = ["onClick"];
-const _hoisted_2$n = { key: 1 };
-const _hoisted_3$f = ["onClick"];
-const _hoisted_4$c = { class: "cl:font-normal cl:mr-1" };
-const _hoisted_5$9 = ["id"];
+const _hoisted_2$n = ["onClick"];
+const _hoisted_3$f = { class: "cl:font-normal cl:mr-1" };
+const _hoisted_4$c = ["id"];
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-grid-header",
   props: {
@@ -5835,21 +5944,21 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                 onClick: ($event) => unref(isSortable$1)(_ctx.options, column) && _ctx.loading === false ? setSort(column.field) : () => {
                 }
               }, [
-                _ctx.initialLoad ? (openBlock(), createBlock(unref(_sfc_main$$), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_2$n, [
+                createElementVNode("div", null, [
                   createTextVNode(toDisplayString(unref(t2)(column.caption)) + " ", 1),
                   withDirectives(createVNode(unref(Icon), {
                     class: "cl:inline-block",
                     icon: "ph:caret-up"
                   }, null, 512), [
-                    [vShow, isActiveSort(column, true)]
+                    [vShow, !_ctx.initialLoad && isActiveSort(column, true)]
                   ]),
                   withDirectives(createVNode(unref(Icon), {
                     class: "cl:inline-block",
                     icon: "ph:caret-down"
                   }, null, 512), [
-                    [vShow, isActiveSort(column, false)]
+                    [vShow, !_ctx.initialLoad && isActiveSort(column, false)]
                   ])
-                ]))
+                ])
               ], 10, _hoisted_1$x);
             }), 128))
           ], 2),
@@ -5893,7 +6002,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                   }]),
                   onClick: ($event) => _ctx.loading === false ? setSort(column.field) : void 0
                 }, [
-                  createElementVNode("span", _hoisted_4$c, toDisplayString(unref(t2)("grid.sortBy")), 1),
+                  createElementVNode("span", _hoisted_3$f, toDisplayString(unref(t2)("grid.sortBy")), 1),
                   isActiveSort(column, true) ? (openBlock(), createBlock(unref(Icon), {
                     key: 0,
                     class: "cl:cursor-pointer cl:inline-block",
@@ -5907,7 +6016,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                     class: "cl:cursor-pointer cl:inline-block",
                     icon: "ph:minus"
                   }))
-                ], 10, _hoisted_3$f)) : createCommentVNode("", true),
+                ], 10, _hoisted_2$n)) : createCommentVNode("", true),
                 createVNode(_sfc_main$F, {
                   class: "cl:col-span-4 cl:min-w-[100px]",
                   loading: _ctx.loading,
@@ -5940,7 +6049,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                   class: normalizeClass(["cl:-right-1 cl:absolute cl:cursor-ew-resize cl:h-[34px] cl:top-[calc(50%-17px)] cl:w-2 cl:z-10", {
                     "cl:right-0 cl:w-1": columnIndex === visibleColumns.value.length - 1
                   }])
-                }, null, 10, _hoisted_5$9)) : createCommentVNode("", true)
+                }, null, 10, _hoisted_4$c)) : createCommentVNode("", true)
               ], 2);
             }), 128))
           ], 2)
@@ -5965,7 +6074,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-grid-search",
   props: /* @__PURE__ */ mergeModels({
     columns: {},
-    request: {}
+    request: {},
+    loading: { type: Boolean }
   }, {
     "searchValue": { required: true },
     "searchValueModifiers": {}
@@ -6030,6 +6140,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
               ],
               class: "cl:box-border cl:font-light cl:p-2 cl:pr-9 cl:text-sm",
               type: "search",
+              inert: _ctx.loading,
               placeholder: _ctx.columns.length > 4 ? unref(t2)("grid.search") : unref(t2)("grid.searchSpecific", { columns: _ctx.columns.map((c) => unref(t2)(c.caption)).join(", ") }),
               onKeypress: _cache[2] || (_cache[2] = withKeys(($event) => performSearch(searchValue.value), ["enter"]))
             }, {
@@ -6037,7 +6148,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
                 createElementVNode("span", null, null, -1)
               ])),
               _: 1
-            }, 8, ["modelValue", "placeholder"])
+            }, 8, ["modelValue", "inert", "placeholder"])
           ]),
           searchValue.value ? (openBlock(), createBlock(_component_icon, {
             key: 0,
@@ -8618,13 +8729,14 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           "onUpdate:searchValue": _cache[0] || (_cache[0] = ($event) => searchValue.value = $event),
           request: currentRequest.value,
           "onUpdate:request": _cache[1] || (_cache[1] = ($event) => currentRequest.value = $event),
+          loading: _ctx.loading,
           columns: searchableColumns.value
         }, {
           search: withCtx((scope) => [
             renderSlot(_ctx.$slots, "search", normalizeProps(guardReactiveProps(scope)))
           ]),
           _: 3
-        }, 8, ["search-value", "request", "columns"])) : createCommentVNode("", true),
+        }, 8, ["search-value", "request", "loading", "columns"])) : createCommentVNode("", true),
         createVNode(Transition, { name: "fade" }, {
           default: withCtx(() => [
             _ctx.loading && isInitialLoad.value === false ? (openBlock(), createElementBlock("div", _hoisted_2$k, [
@@ -12048,13 +12160,13 @@ const components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
   clUiHeaderMenu: _sfc_main$r,
   clUiInput,
   clUiInputCheckbox,
-  clUiInputDateRange: _sfc_main$P,
-  clUiInputDateRangeInput: _sfc_main$Q,
-  clUiInputDateTime: _sfc_main$L,
+  clUiInputDateRange: _sfc_main$L,
+  clUiInputDateRangeInput: _sfc_main$O,
+  clUiInputDateTime: _sfc_main$M,
   clUiInputNumber: _sfc_main$U,
   clUiInputRange,
   clUiInputText: _sfc_main$18,
-  clUiInputTextArea: _sfc_main$O,
+  clUiInputTextArea: _sfc_main$Q,
   clUiLanguageSwitcher: _sfc_main$m,
   clUiLoadingSpinner,
   clUiLogin: _sfc_main$l,
@@ -12147,13 +12259,13 @@ export {
   _sfc_main$r as clUiHeaderMenu,
   clUiInput,
   clUiInputCheckbox,
-  _sfc_main$P as clUiInputDateRange,
-  _sfc_main$Q as clUiInputDateRangeInput,
-  _sfc_main$L as clUiInputDateTime,
+  _sfc_main$L as clUiInputDateRange,
+  _sfc_main$O as clUiInputDateRangeInput,
+  _sfc_main$M as clUiInputDateTime,
   _sfc_main$U as clUiInputNumber,
   clUiInputRange,
   _sfc_main$18 as clUiInputText,
-  _sfc_main$O as clUiInputTextArea,
+  _sfc_main$Q as clUiInputTextArea,
   _sfc_main$m as clUiLanguageSwitcher,
   clUiLoadingSpinner,
   _sfc_main$l as clUiLogin,