@onereach/ui-components 3.0.4-beta.2486.0 → 3.0.4-beta.2497.0

package/dist/esm/v2/{OrDateTimePicker-4b650aca.js → OrDateTimePicker-57094f24.js}

@@ -1,7 +1,4 @@
-import { defineComponent, ref, computed, reactive } from 'vue-demi';
-import { s as styleInject } from './style-inject.es-4c6f2515.js';
-import { _ as __vue_component__$f } from './OrInputBox-0f4e8500.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-b2d0c353.js';
+import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
@@ -9,22 +6,60 @@ import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34
 import { _ as __vue_component__$d } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$e } from './OrHint-aa221198.js';
 import { _ as __vue_component__$a } from './OrIconButton-ec2e21aa.js';
-import { _ as __vue_component__$7 } from './OrLabel-63380256.js';
+import { _ as __vue_component__$f } from './OrInputBox-0f4e8500.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-b2d0c353.js';
+import { _ as __vue_component__$8 } from './OrLabel-63380256.js';
 import { _ as __vue_component__$g } from './OrPopover-83c885d0.js';
+import { _ as __vue_component__$7 } from './OrButton-2283df1c.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { _ as __vue_component__$8 } from './OrButton-2283df1c.js';
 import { _ as __vue_component__$9 } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$c } from './OrMenuItem-6f9b8a93.js';
-import { _ as __vue_component__$b } from './OrMenu-47b319a6.js';
+import { _ as __vue_component__$b } from './OrMenu-18a7f179.js';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
+
+function useDefaultDate() {
+  return new Date().getUTCDate();
+}
+
+function useDefaultHours() {
+  return 0;
+}
+
+function useDefaultMinutes() {
+  return 0;
+}
 
-const DateTimePickerDateSelect = [
+function useDefaultMonth() {
+  return new Date().getUTCMonth();
+}
+
+function useDefaultYear() {
+  return new Date().getUTCFullYear();
+}
+
+const DateTimePickerDaySelect = [
 // Layout
 'layout-column',
 // Spacing
 'px-md', 'py-md', 'gap-sm'];
+const DateTimePickerDaySelectButtonGroup = [
+// Layout
+'grid', 'grid-cols-7',
+// Spacing
+'gap-xs'];
+const DateTimePickerDaySelectButtonGroupItem = [
+// Box
+'min-w-fit',
+// Spacing
+'!px-sm', '!py-sm',
+// Typography
+'typography-caption-regular'];
 
 var script$6 = defineComponent({
-  name: 'OrDateTimePickerDateSelect',
+  name: 'OrDateTimePickerDaySelect',
+  components: {
+    OrButton: __vue_component__$7
+  },
   model: {
     prop: 'modelValue',
     event: 'update:modelValue'
@@ -41,18 +76,49 @@ var script$6 = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-date-select', ...DateTimePickerDateSelect]);
+    const rootStyles = computed(() => ['or-date-time-picker-day-select', ...DateTimePickerDaySelect]);
+    const buttonGroupStyles = computed(() => [...DateTimePickerDaySelectButtonGroup]);
+    const buttonGroupItemStyles = computed(() => [...DateTimePickerDaySelectButtonGroupItem]);
     // State
     const proxyModelValue = computed({
-      get: () => props.modelValue,
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : new Date(Date.UTC(useDefaultYear(), useDefaultMonth(), useDefaultDate(), useDefaultHours(), useDefaultMinutes()));
+      },
       set: value => {
         context.emit('update:modelValue', value);
       }
     });
+    const dayOptions = computed(() => {
+      const monthStartDate = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), 1, proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
+      const monthEndDate = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth() + 1, 0, proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
+      const calendarStartDate = new Date(Date.UTC(monthStartDate.getUTCFullYear(), monthStartDate.getUTCMonth(), 1 - (monthStartDate.getUTCDay() + 6) % 7, monthStartDate.getUTCHours(), monthStartDate.getUTCMinutes()));
+      const calendarEndDate = new Date(Date.UTC(monthEndDate.getUTCFullYear(), monthEndDate.getUTCMonth() + 1, (7 - monthEndDate.getUTCDay()) % 7, monthEndDate.getUTCHours(), monthEndDate.getUTCMinutes()));
+      return (() => {
+        let options = [],
+          value = calendarStartDate;
+        while (Number(value) !== Number(calendarEndDate)) {
+          options = [...options, value];
+          value = new Date(Date.UTC(value.getUTCFullYear(), value.getUTCMonth(), value.getUTCDate() + 1, value.getUTCHours(), value.getUTCMinutes()));
+        }
+        return options;
+      })();
+    });
+    // Methods
+    function formatDay(value) {
+      return value.toLocaleString('default', {
+        day: 'numeric',
+        timeZone: 'UTC'
+      });
+    }
     return {
       root,
       rootStyles,
-      proxyModelValue
+      buttonGroupStyles,
+      buttonGroupItemStyles,
+      proxyModelValue,
+      dayOptions,
+      formatDay
     };
   }
 });
@@ -68,7 +134,24 @@ var __vue_render__$6 = function () {
   return _c('div', {
     ref: "root",
     class: _vm.rootStyles
-  }, [_vm._v("\n  Calendar\n")]);
+  }, [_c('div', {
+    class: _vm.buttonGroupStyles
+  }, _vm._l(_vm.dayOptions, function (value) {
+    return _c('OrButton', {
+      key: Number(value),
+      class: _vm.buttonGroupItemStyles,
+      attrs: {
+        "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
+        "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit'
+      },
+      on: {
+        "click": function ($event) {
+          $event.stopPropagation();
+          _vm.proxyModelValue = value;
+        }
+      }
+    }, [_vm._v("\n      " + _vm._s(_vm.formatDay(value)) + "\n    ")]);
+  }), 1)]);
 };
 var __vue_staticRenderFns__$6 = [];
 
@@ -105,7 +188,7 @@ const DateTimePickerMobileControlContent = [
 var script$5 = defineComponent({
   name: 'OrDateTimePickerMobileControl',
   components: {
-    OrLabel: __vue_component__$7
+    OrLabel: __vue_component__$8
   },
   props: {
     label: {
@@ -173,7 +256,7 @@ const DateTimePickerMonthSelect = [
 var script$4 = defineComponent({
   name: 'OrDateTimePickerMonthSelect',
   components: {
-    OrButton: __vue_component__$8,
+    OrButton: __vue_component__$7,
     OrIcon: __vue_component__$9,
     OrIconButton: __vue_component__$a,
     OrMenu: __vue_component__$b,
@@ -194,101 +277,93 @@ var script$4 = defineComponent({
   setup(props, context) {
     // Refs
     const root = ref();
-    const monthButton = ref();
     const yearButton = ref();
+    const monthButton = ref();
+    const yearButtonRoot = computed(() => {
+      var _a;
+      return (_a = yearButton.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
     const monthButtonRoot = computed(() => {
       var _a;
       return (_a = monthButton.value) === null || _a === void 0 ? void 0 : _a.root;
     });
-    const yearButtonRoot = computed(() => {
+    const yearMenu = ref();
+    const monthMenu = ref();
+    const yearMenuState = computed(() => {
       var _a;
-      return (_a = yearButton.value) === null || _a === void 0 ? void 0 : _a.root;
+      return (_a = yearMenu.value) === null || _a === void 0 ? void 0 : _a.state;
+    });
+    const monthMenuState = computed(() => {
+      var _a;
+      return (_a = monthMenu.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    const monthMenu = ref();
-    const yearMenu = ref();
-    // const monthMenuState = computed(() => monthMenu.value?.state);
-    // const yearMenuState = computed(() => yearMenu.value?.state);
     // Styles
     const rootStyles = computed(() => ['or-date-time-picker-month-select', ...DateTimePickerMonthSelect]);
     // State
     const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
-    });
-    const yearValue = computed({
       get: () => {
-        var _a, _b;
-        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.getUTCFullYear()) !== null && _b !== void 0 ? _b : new Date().getUTCFullYear();
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : new Date(Date.UTC(useDefaultYear(), useDefaultMonth(), useDefaultDate(), useDefaultHours(), useDefaultMinutes()));
       },
       set: value => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        proxyModelValue.value = new Date(Date.UTC(value, (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.getUTCMonth()) !== null && _b !== void 0 ? _b : monthValue.value, (_d = (_c = proxyModelValue.value) === null || _c === void 0 ? void 0 : _c.getUTCDate()) !== null && _d !== void 0 ? _d : 1, (_f = (_e = proxyModelValue.value) === null || _e === void 0 ? void 0 : _e.getUTCHours()) !== null && _f !== void 0 ? _f : 0, (_h = (_g = proxyModelValue.value) === null || _g === void 0 ? void 0 : _g.getUTCMinutes()) !== null && _h !== void 0 ? _h : 0));
+        context.emit('update:modelValue', value);
       }
     });
-    const monthValue = computed({
-      get: () => {
-        var _a, _b;
-        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.getUTCMonth()) !== null && _b !== void 0 ? _b : new Date().getUTCMonth();
-      },
-      set: value => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        proxyModelValue.value = new Date(Date.UTC((_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.getUTCFullYear()) !== null && _b !== void 0 ? _b : yearValue.value, value, (_d = (_c = proxyModelValue.value) === null || _c === void 0 ? void 0 : _c.getUTCDate()) !== null && _d !== void 0 ? _d : 1, (_f = (_e = proxyModelValue.value) === null || _e === void 0 ? void 0 : _e.getUTCHours()) !== null && _f !== void 0 ? _f : 0, (_h = (_g = proxyModelValue.value) === null || _g === void 0 ? void 0 : _g.getUTCMinutes()) !== null && _h !== void 0 ? _h : 0));
-      }
+    const yearOptions = computed(() => {
+      return Array.from({
+        length: 11
+      }).map((_value, index, {
+        length
+      }) => {
+        const value = proxyModelValue.value.getUTCFullYear() - Math.floor(length / 2) + index;
+        return new Date(Date.UTC(value, proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
+      });
     });
-    const yearLabel = computed(() => {
-      var _a;
-      return (_a = yearOptions.find(({
-        value
-      }) => value === yearValue.value)) === null || _a === void 0 ? void 0 : _a.label;
-    });
-    const monthLabel = computed(() => {
-      var _a;
-      return (_a = monthOptions.find(({
-        value
-      }) => value === monthValue.value)) === null || _a === void 0 ? void 0 : _a.label;
-    });
-    const yearOptions = Array.from({
-      length: 100
-    }, (_value, index) => {
-      const year = new Date().getUTCFullYear() - index;
-      return {
-        value: year,
-        label: new Date(year, monthValue.value).toLocaleString([], {
-          year: 'numeric'
-        })
-      };
-    });
-    const monthOptions = Array.from({
-      length: 12
-    }, (_value, index) => {
-      const month = index;
-      return {
-        value: month,
-        label: new Date(yearValue.value, month).toLocaleString([], {
-          month: 'long'
-        })
-      };
+    const monthOptions = computed(() => {
+      return Array.from({
+        length: 12
+      }, (_value, index) => {
+        const value = index;
+        return new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), value, proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
+      });
     });
+    // Methods
+    function goToNextMonth() {
+      proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth() + 1, proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
+    }
+    function goToPreviousMonth() {
+      proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth() - 1, proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
+    }
+    function formatYear(value) {
+      return value.toLocaleString('default', {
+        year: 'numeric',
+        timeZone: 'UTC'
+      });
+    }
+    function formatMonth(value) {
+      return value.toLocaleString('default', {
+        month: 'long',
+        timeZone: 'UTC'
+      });
+    }
     return {
       root,
-      monthButton,
       yearButton,
-      monthButtonRoot,
+      monthButton,
       yearButtonRoot,
-      monthMenu,
+      monthButtonRoot,
       yearMenu,
-      // monthMenuState,
-      // yearMenuState,
+      monthMenu,
+      yearMenuState,
+      monthMenuState,
       rootStyles,
       proxyModelValue,
-      yearValue,
-      monthValue,
-      yearLabel,
-      monthLabel,
       yearOptions,
-      monthOptions
+      monthOptions,
+      goToNextMonth,
+      goToPreviousMonth,
+      formatYear,
+      formatMonth
     };
   }
 });
@@ -311,13 +386,13 @@ var __vue_render__$4 = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        _vm.monthValue = _vm.monthValue - 1;
+        return _vm.goToPreviousMonth();
       }
     }
   }), _vm._v(" "), _c('div', {
-    class: ['layout-row', 'gap-md']
+    class: ['layout-row-reverse', 'gap-md']
   }, [_c('OrButton', {
-    ref: "monthButton",
+    ref: "yearButton",
     attrs: {
       "variant": 'link',
       "color": 'inherit'
@@ -325,15 +400,15 @@ var __vue_render__$4 = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        return _vm.monthMenu.open();
+        return _vm.yearMenu.open();
       }
     }
-  }, [_vm._v("\n      " + _vm._s(_vm.monthLabel) + " "), _c('OrIcon', {
+  }, [_vm._v("\n      " + _vm._s(_vm.formatYear(_vm.proxyModelValue)) + " "), _c('OrIcon', {
     attrs: {
-      "icon": 'arrow_drop_down'
+      "icon": _vm.yearMenuState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
     }
   })], 1), _vm._v(" "), _c('OrButton', {
-    ref: "yearButton",
+    ref: "monthButton",
     attrs: {
       "variant": 'link',
       "color": 'inherit'
@@ -341,45 +416,51 @@ var __vue_render__$4 = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        return _vm.yearMenu.open();
+        return _vm.monthMenu.open();
       }
     }
-  }, [_vm._v("\n      " + _vm._s(_vm.yearLabel) + " "), _c('OrIcon', {
+  }, [_vm._v("\n      " + _vm._s(_vm.formatMonth(_vm.proxyModelValue)) + " "), _c('OrIcon', {
     attrs: {
-      "icon": 'arrow_drop_down'
+      "icon": _vm.monthMenuState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
     }
   })], 1), _vm._v(" "), _c('OrMenu', {
-    ref: "monthMenu",
+    ref: "yearMenu",
     attrs: {
-      "trigger": _vm.monthButtonRoot
+      "trigger": _vm.yearButtonRoot
     }
-  }, _vm._l(_vm.monthOptions, function (option) {
+  }, _vm._l(_vm.yearOptions, function (value) {
     return _c('OrMenuItem', {
-      key: option.value,
+      key: Number(value),
+      attrs: {
+        "selected": Number(value) === Number(_vm.proxyModelValue)
+      },
       on: {
         "click": function ($event) {
           $event.stopPropagation();
-          _vm.monthValue = option.value;
-          _vm.monthMenu.close();
+          _vm.proxyModelValue = value;
+          _vm.yearMenu.close();
         }
       }
-    }, [_vm._v("\n        " + _vm._s(option.label) + "\n      ")]);
+    }, [_vm._v("\n        " + _vm._s(_vm.formatYear(value)) + "\n      ")]);
   }), 1), _vm._v(" "), _c('OrMenu', {
-    ref: "yearMenu",
+    ref: "monthMenu",
     attrs: {
-      "trigger": _vm.yearButtonRoot
+      "trigger": _vm.monthButtonRoot
     }
-  }, _vm._l(_vm.yearOptions, function (option) {
+  }, _vm._l(_vm.monthOptions, function (value) {
     return _c('OrMenuItem', {
-      key: option.value,
+      key: Number(value),
+      attrs: {
+        "selected": Number(value) === Number(_vm.proxyModelValue)
+      },
       on: {
         "click": function ($event) {
           $event.stopPropagation();
-          _vm.yearValue = option.value;
-          _vm.yearMenu.close();
+          _vm.proxyModelValue = value;
+          _vm.monthMenu.close();
         }
       }
-    }, [_vm._v("\n        " + _vm._s(option.label) + "\n      ")]);
+    }, [_vm._v("\n        " + _vm._s(_vm.formatMonth(value)) + "\n      ")]);
   }), 1)], 1), _vm._v(" "), _c('OrIconButton', {
     attrs: {
       "icon": 'chevron_right'
@@ -387,7 +468,7 @@ var __vue_render__$4 = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        _vm.monthValue = _vm.monthValue + 1;
+        return _vm.goToNextMonth();
       }
     }
   })], 1);
@@ -424,7 +505,7 @@ const DateTimePickerPopoverFooter = [
 var script$3 = defineComponent({
   name: 'OrDateTimePickerPopoverFooter',
   components: {
-    OrButton: __vue_component__$8
+    OrButton: __vue_component__$7
   },
   emits: ['resolve', 'reject'],
   expose: ['root'],
@@ -572,7 +653,7 @@ const DateTimePickerTimeSelectButtonGroupItem = [
 var script$1 = defineComponent({
   name: 'OrDateTimePickerTimeSelect',
   components: {
-    OrButton: __vue_component__$8
+    OrButton: __vue_component__$7
   },
   model: {
     prop: 'modelValue',
@@ -595,53 +676,53 @@ var script$1 = defineComponent({
     const buttonGroupItemStyles = computed(() => [...DateTimePickerTimeSelectButtonGroupItem]);
     // State
     const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
-      }
-    });
-    const hoursValue = computed({
       get: () => {
-        var _a, _b;
-        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.getUTCHours()) !== null && _b !== void 0 ? _b : 0;
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : new Date(Date.UTC(useDefaultYear(), useDefaultMonth(), useDefaultDate(), useDefaultHours(), useDefaultMinutes()));
       },
       set: value => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        proxyModelValue.value = new Date(Date.UTC((_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.getUTCFullYear()) !== null && _b !== void 0 ? _b : 1970, (_d = (_c = proxyModelValue.value) === null || _c === void 0 ? void 0 : _c.getUTCMonth()) !== null && _d !== void 0 ? _d : 0, (_f = (_e = proxyModelValue.value) === null || _e === void 0 ? void 0 : _e.getUTCDate()) !== null && _f !== void 0 ? _f : 1, value, (_h = (_g = proxyModelValue.value) === null || _g === void 0 ? void 0 : _g.getUTCMinutes()) !== null && _h !== void 0 ? _h : minutesValue.value));
+        context.emit('update:modelValue', value);
       }
     });
-    const minutesValue = computed({
-      get: () => {
-        var _a, _b;
-        return (_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.getUTCMinutes()) !== null && _b !== void 0 ? _b : 0;
-      },
-      set: value => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        proxyModelValue.value = new Date(Date.UTC((_b = (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.getUTCFullYear()) !== null && _b !== void 0 ? _b : 1970, (_d = (_c = proxyModelValue.value) === null || _c === void 0 ? void 0 : _c.getUTCMonth()) !== null && _d !== void 0 ? _d : 0, (_f = (_e = proxyModelValue.value) === null || _e === void 0 ? void 0 : _e.getUTCDate()) !== null && _f !== void 0 ? _f : 1, (_h = (_g = proxyModelValue.value) === null || _g === void 0 ? void 0 : _g.getUTCHours()) !== null && _h !== void 0 ? _h : hoursValue.value, value));
-      }
+    const hoursOptions = computed(() => {
+      return Array.from({
+        length: 24
+      }, (_value, index) => {
+        const value = index;
+        return new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), value, proxyModelValue.value.getUTCMinutes()));
+      });
+    });
+    const minutesOptions = computed(() => {
+      return Array.from({
+        length: 60
+      }, (_value, index) => {
+        const value = index;
+        return new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), value));
+      });
     });
-    const hoursOptions = Array.from({
-      length: 24
-    }, (_value, index) => ({
-      value: index,
-      label: String(index).padStart(2, '0')
-    }));
-    const minutesOptions = Array.from({
-      length: 60
-    }, (_value, index) => ({
-      value: index,
-      label: String(index).padStart(2, '0')
-    }));
+    // Methods
+    function formatHours(value) {
+      return value.toLocaleString('default', {
+        hour: '2-digit',
+        timeZone: 'UTC'
+      });
+    }
+    function formatMinutes(value) {
+      return value.toLocaleString('default', {
+        minute: '2-digit',
+        timeZone: 'UTC'
+      });
+    }
     return {
       root,
       rootStyles,
       buttonGroupStyles,
       buttonGroupItemStyles,
       proxyModelValue,
-      hoursValue,
-      minutesValue,
       hoursOptions,
-      minutesOptions
+      minutesOptions,
+      formatHours,
+      formatMinutes
     };
   }
 });
@@ -659,38 +740,38 @@ var __vue_render__$1 = function () {
     class: _vm.rootStyles
   }, [_c('div', {
     class: _vm.buttonGroupStyles
-  }, _vm._l(_vm.hoursOptions, function (option) {
+  }, _vm._l(_vm.hoursOptions, function (value) {
     return _c('OrButton', {
-      key: option.value,
+      key: Number(value),
       class: _vm.buttonGroupItemStyles,
       attrs: {
-        "variant": _vm.hoursValue === option.value ? 'contained' : 'text',
-        "color": _vm.hoursValue === option.value ? 'primary' : 'inherit'
+        "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
+        "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit'
       },
       on: {
         "click": function ($event) {
           $event.stopPropagation();
-          _vm.hoursValue = option.value;
+          _vm.proxyModelValue = value;
         }
       }
-    }, [_vm._v("\n      " + _vm._s(option.label) + "\n    ")]);
+    }, [_vm._v("\n      " + _vm._s(_vm.formatHours(value)) + "\n    ")]);
   }), 1), _vm._v("\n\n  :\n\n  "), _c('div', {
     class: _vm.buttonGroupStyles
-  }, _vm._l(_vm.minutesOptions, function (option) {
+  }, _vm._l(_vm.minutesOptions, function (value) {
     return _c('OrButton', {
-      key: option.value,
+      key: Number(value),
       class: _vm.buttonGroupItemStyles,
       attrs: {
-        "variant": _vm.minutesValue === option.value ? 'contained' : 'text',
-        "color": _vm.minutesValue === option.value ? 'primary' : 'inherit'
+        "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
+        "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit'
       },
       on: {
         "click": function ($event) {
           $event.stopPropagation();
-          _vm.minutesValue = option.value;
+          _vm.proxyModelValue = value;
         }
       }
-    }, [_vm._v("\n      " + _vm._s(option.label) + "\n    ")]);
+    }, [_vm._v("\n      " + _vm._s(_vm.formatMinutes(value)) + "\n    ")]);
   }), 1)]);
 };
 var __vue_staticRenderFns__$1 = [];
@@ -720,13 +801,15 @@ const DateTimePicker = [
 // Spacing
 'gap-xs'];
 const DateTimePickerControl = [
+// Layout
+'layout-inline-row justify-center',
 // Theme (focus)
-'focus:theme-border-1-current', 'dark:focus:theme-border-1-current-dark', 'focus:theme-border-underline', 'dark:focus:theme-border-underline'];
+'focus:theme-border-2-current', 'dark:focus:theme-border-2-current-dark', 'focus:theme-border-underline', 'dark:focus:theme-border-underline'];
 
 var script = defineComponent({
   name: 'OrDateTimePicker',
   components: {
-    OrDateTimePickerDateSelect: __vue_component__$6,
+    OrDateTimePickerDaySelect: __vue_component__$6,
     OrDateTimePickerMobileControl: __vue_component__$5,
     OrDateTimePickerMonthSelect: __vue_component__$4,
     OrDateTimePickerPopoverFooter: __vue_component__$3,
@@ -736,7 +819,7 @@ var script = defineComponent({
     OrHint: __vue_component__$e,
     OrIconButton: __vue_component__$a,
     OrInputBox: __vue_component__$f,
-    OrLabel: __vue_component__$7,
+    OrLabel: __vue_component__$8,
     OrPopover: __vue_component__$g
   },
   directives: {
@@ -817,6 +900,12 @@ var script = defineComponent({
         context.emit('update:modelValue', value);
       }
     });
+    const draftModelValue = ref();
+    watch(proxyModelValue, value => {
+      draftModelValue.value = value;
+    }, {
+      immediate: true
+    });
     // Methods
     function toggleDatePopover() {
       if (!props.readonly && !props.disabled) {
@@ -854,6 +943,34 @@ var script = defineComponent({
         popoverInstance.close();
       }
     }
+    function formatDate(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        dateStyle: 'short',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
+    function formatTime(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        timeStyle: 'short',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
+    function formatDateAlt(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        dateStyle: 'medium',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
+    function formatTimeAlt(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        timeStyle: 'short',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
     return {
       root,
       dateControl,
@@ -866,15 +983,20 @@ var script = defineComponent({
       controlStyles,
       controlAttributes,
       proxyModelValue,
+      draftModelValue,
       toggleDatePopover,
       toggleTimePopover,
       closeDatePopover,
-      closeTimePopover
+      closeTimePopover,
+      formatDate,
+      formatTime,
+      formatDateAlt,
+      formatTimeAlt
     };
   }
 });
 
-var css_248z = "input[data-v-84c46328]{min-width:0;background:0 0;outline:0}input[type=date][data-v-84c46328]::-webkit-datetime-edit-day-field,input[type=date][data-v-84c46328]::-webkit-datetime-edit-month-field,input[type=date][data-v-84c46328]::-webkit-datetime-edit-year-field{display:none}input[type=time][data-v-84c46328]::-webkit-datetime-edit-ampm-field,input[type=time][data-v-84c46328]::-webkit-datetime-edit-hour-field,input[type=time][data-v-84c46328]::-webkit-datetime-edit-minute-field{display:none}input[type=date][data-v-84c46328]::-webkit-datetime-edit-text,input[type=time][data-v-84c46328]::-webkit-datetime-edit-text{display:none}input[type=date][data-v-84c46328]::-webkit-calendar-picker-indicator,input[type=time][data-v-84c46328]::-webkit-calendar-picker-indicator{display:none}";
+var css_248z = "input[data-v-183da045]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -920,7 +1042,7 @@ var __vue_render__ = function () {
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, [_c('input', _vm._b({
+  }, [_c('div', _vm._b({
     directives: [{
       name: "dropdown-open",
       rawName: "v-dropdown-open",
@@ -935,12 +1057,12 @@ var __vue_render__ = function () {
     ref: "dateControl",
     class: _vm.controlStyles,
     attrs: {
-      "type": 'date',
+      "contenteditable": true,
       "required": _vm.required,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, 'input', _vm.controlAttributes, false)), _vm._v(" "), _c('input', _vm._b({
+  }, 'div', _vm.controlAttributes, false), [_vm._v("\n      " + _vm._s(_vm.formatDate(_vm.proxyModelValue)) + "\n    ")]), _vm._v(" "), _c('div', _vm._b({
     directives: [{
       name: "dropdown-open",
       rawName: "v-dropdown-open",
@@ -955,12 +1077,12 @@ var __vue_render__ = function () {
     ref: "timeControl",
     class: _vm.controlStyles,
     attrs: {
-      "type": 'time',
+      "contenteditable": true,
       "required": _vm.required,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, 'input', _vm.controlAttributes, false)), _vm._v(" "), _c('OrPopover', {
+  }, 'div', _vm.controlAttributes, false), [_vm._v("\n      " + _vm._s(_vm.formatTime(_vm.proxyModelValue)) + "\n    ")]), _vm._v(" "), _c('OrPopover', {
     ref: "datePopover",
     attrs: {
       "variant": 'auto',
@@ -971,30 +1093,35 @@ var __vue_render__ = function () {
     attrs: {
       "label": "Date"
     }
-  }, [_vm._v("\n          Sep 12\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
+  }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
     attrs: {
       "label": "Time"
     }
-  }, [_vm._v("\n          9:07\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
+  }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
     model: {
-      value: _vm.proxyModelValue,
+      value: _vm.draftModelValue,
       callback: function ($$v) {
-        _vm.proxyModelValue = $$v;
+        _vm.draftModelValue = $$v;
       },
-      expression: "proxyModelValue"
+      expression: "draftModelValue"
     }
-  }), _vm._v(" "), _c('OrDateTimePickerDateSelect', {
+  }), _vm._v(" "), _c('OrDateTimePickerDaySelect', {
     model: {
-      value: _vm.proxyModelValue,
+      value: _vm.draftModelValue,
       callback: function ($$v) {
-        _vm.proxyModelValue = $$v;
+        _vm.draftModelValue = $$v;
       },
-      expression: "proxyModelValue"
+      expression: "draftModelValue"
     }
   }), _vm._v(" "), _c('OrDateTimePickerPopoverFooter', {
     on: {
+      "resolve": function ($event) {
+        _vm.proxyModelValue = _vm.draftModelValue;
+        _vm.datePopover.close();
+      },
       "reject": function ($event) {
-        return _vm.closeDatePopover();
+        _vm.draftModelValue = _vm.proxyModelValue;
+        _vm.datePopover.close();
       }
     }
   })], 1), _vm._v(" "), _c('OrPopover', {
@@ -1008,22 +1135,27 @@ var __vue_render__ = function () {
     attrs: {
       "label": "Date"
     }
-  }, [_vm._v("\n          Sep 12\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
+  }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
     attrs: {
       "label": "Time"
     }
-  }, [_vm._v("\n          9:07\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
+  }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
     model: {
-      value: _vm.proxyModelValue,
+      value: _vm.draftModelValue,
       callback: function ($$v) {
-        _vm.proxyModelValue = $$v;
+        _vm.draftModelValue = $$v;
       },
-      expression: "proxyModelValue"
+      expression: "draftModelValue"
     }
   }), _vm._v(" "), _c('OrDateTimePickerPopoverFooter', {
     on: {
+      "resolve": function ($event) {
+        _vm.proxyModelValue = _vm.draftModelValue;
+        _vm.timePopover.close();
+      },
       "reject": function ($event) {
-        return _vm.closeTimePopover();
+        _vm.draftModelValue = _vm.proxyModelValue;
+        _vm.timePopover.close();
       }
     }
   })], 1), _vm._v(" "), _c('div', {
@@ -1057,7 +1189,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-84c46328";
+const __vue_scope_id__ = "data-v-183da045";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */