@onereach/ui-components 7.0.1 → 7.0.2-beta.3544.0

package/dist/esm/v2/{OrDateTimePickerTimeSelect-9c1c1ff0.js → OrDateTimePickerTimeSelect-ab870b6a.js}

@@ -4,7 +4,7 @@ import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { g as getDatePlaceholder, f as formatDate, D as DateTimePickerTimeFormat, b as getTimePlaceholder, a as formatTime } from './getTimePlaceholder-06d57fcf.js';
+import { g as getDatePlaceholder, f as formatDate, D as DateTimePickerTimeFormat, b as getTimePlaceholder, a as formatTime } from './getTimePlaceholder-8f786f44.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 import { _ as __vue_component__$8 } from './OrButton-78336f88.js';
 import { _ as __vue_component__$9 } from './OrLabel-b465bc0b.js';
@@ -26,7 +26,6 @@ const DateTimePickerDateControlPlaceholder = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$7 = defineComponent({
-  name: 'OrDateTimePickerDateControl',
   model: {
     prop: 'modelValue',
     event: 'update:modelValue'
@@ -126,14 +125,14 @@ const DateTimePickerDateSelectButtonGroup = [
 // Box
 'h-[262px]',
 // Spacing
-'gap-xs'];
+'mx-[-2px]', 'my-[-2px]'];
 const DateTimePickerDateSelectButtonGroupWeekdayItem = [
 // Layout
 'layout-row justify-center',
 // Interactivity
 'interactivity-default',
 // Spacing
-'px-sm', 'py-sm',
+'mx-[2px]', 'my-[2px]', 'px-sm', 'py-sm',
 // Typography
 'typography-caption-regular',
 // Theme
@@ -142,15 +141,21 @@ const DateTimePickerDateSelectButtonGroupDateItem = [
 // Box
 '!min-w-fit',
 // Spacing
-'!px-sm', '!py-sm',
+'mx-[2px]', 'my-[2px]', '!px-sm', '!py-sm',
 // Typography
 'typography-caption-regular'];
 const DateTimePickerDateSelectButtonGroupCurrentDateItem = [
 // Theme
 'theme-foreground-primary', 'dark:theme-foreground-primary-dark', 'theme-outline-1-primary', 'dark:theme-outline-1-primary-dark'];
+const DateTimePickerDateSelectButtonGroupInRangeDateItem = [
+// Spacing
+'!mx-none', '!px-[10px]',
+// Shape
+'!rounded-none',
+// Theme
+'theme-background-primary-translucent-2', 'dark:theme-background-primary-translucent-2-dark'];
 
 var script$6 = defineComponent({
-  name: 'OrDateTimePickerDateSelect',
   components: {
     OrButton: __vue_component__$8
   },
@@ -170,6 +175,14 @@ var script$6 = defineComponent({
     dateFilter: {
       type: Function,
       default: undefined
+    },
+    rangeStart: {
+      type: Date,
+      default: undefined
+    },
+    rangeEnd: {
+      type: Date,
+      default: undefined
     }
   },
   emits: ['update:modelValue'],
@@ -183,13 +196,12 @@ var script$6 = defineComponent({
     const buttonGroupWeekdayItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupWeekdayItem]);
     const buttonGroupDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupDateItem]);
     const buttonGroupCurrentDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupCurrentDateItem]);
+    const buttonGroupInRangeDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupInRangeDateItem]);
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
-      defaultValue: toRef(props, 'initialValue')
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     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 monthStartDate = new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth(), 1, props.initialValue.getUTCHours(), props.initialValue.getUTCMinutes()));
+      const monthEndDate = new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth() + 1, 0, props.initialValue.getUTCHours(), props.initialValue.getUTCMinutes()));
       const calendarStartDate = new Date(Date.UTC(monthStartDate.getUTCFullYear(), monthStartDate.getUTCMonth(), 1 - monthStartDate.getUTCDay(), monthStartDate.getUTCHours(), monthStartDate.getUTCMinutes()));
       const calendarEndDate = new Date(Date.UTC(monthEndDate.getUTCFullYear(), monthEndDate.getUTCMonth() + 1, 7 - monthEndDate.getUTCDay(), monthEndDate.getUTCHours(), monthEndDate.getUTCMinutes()));
       return (() => {
@@ -204,10 +216,10 @@ var script$6 = defineComponent({
     });
     const currentDate = computed(() => {
       const value = new Date();
-      value.setUTCHours(proxyModelValue.value.getUTCHours());
-      value.setUTCMinutes(proxyModelValue.value.getUTCMinutes());
-      value.setUTCSeconds(proxyModelValue.value.getUTCSeconds());
-      value.setUTCMilliseconds(proxyModelValue.value.getUTCMilliseconds());
+      value.setUTCHours(props.initialValue.getUTCHours());
+      value.setUTCMinutes(props.initialValue.getUTCMinutes());
+      value.setUTCSeconds(props.initialValue.getUTCSeconds());
+      value.setUTCMilliseconds(props.initialValue.getUTCMilliseconds());
       return value;
     });
     // Methods
@@ -230,6 +242,7 @@ var script$6 = defineComponent({
       buttonGroupWeekdayItemStyles,
       buttonGroupDateItemStyles,
       buttonGroupCurrentDateItemStyles,
+      buttonGroupInRangeDateItemStyles,
       proxyModelValue,
       dayOptions,
       currentDate,
@@ -261,10 +274,10 @@ var __vue_render__$6 = function () {
     var _obj;
     return _c('OrButton', {
       key: Number(value),
-      class: (_obj = {}, _obj[_vm.buttonGroupDateItemStyles.join(' ')] = true, _obj[_vm.buttonGroupCurrentDateItemStyles.join(' ')] = Number(value) === Number(_vm.currentDate) && Number(value) !== Number(_vm.proxyModelValue), _obj['invisible'] = value.getUTCMonth() !== _vm.proxyModelValue.getUTCMonth(), _obj),
+      class: (_obj = {}, _obj[_vm.buttonGroupDateItemStyles.join(' ')] = true, _obj[_vm.buttonGroupCurrentDateItemStyles.join(' ')] = Number(value) === Number(_vm.currentDate) && Number(value) !== Number(_vm.proxyModelValue), _obj[_vm.buttonGroupInRangeDateItemStyles.join(' ')] = _vm.rangeStart && Number(value) > Number(_vm.rangeStart) && _vm.rangeEnd && Number(value) < Number(_vm.rangeEnd), _obj),
       attrs: {
-        "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
-        "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
+        "variant": Number(value) === Number(_vm.proxyModelValue) || _vm.rangeStart && Number(value) === Number(_vm.rangeStart) || _vm.rangeEnd && Number(value) === Number(_vm.rangeEnd) ? 'contained' : 'text',
+        "color": Number(value) === Number(_vm.proxyModelValue) || _vm.rangeStart && Number(value) === Number(_vm.rangeStart) || _vm.rangeEnd && Number(value) === Number(_vm.rangeEnd) ? 'primary' : 'inherit',
         "disabled": _vm.dateFilter && !_vm.dateFilter(value)
       },
       on: {
@@ -300,16 +313,19 @@ const __vue_component__$6 = /*#__PURE__*/normalizeComponent({
 const DateTimePickerMobileControl = [
 // Layout
 'layout-column',
+// Interactivity
+'interactivity-auto',
 // Spacing
-'gap-xs'];
+'gap-xs',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
+// Theme (selected)
+'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark'];
 const DateTimePickerMobileControlContent = [
 // Typography
-'typography-headline-1',
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+'typography-headline-1'];
 
 var script$5 = defineComponent({
-  name: 'OrDateTimePickerMobileControl',
   components: {
     OrLabel: __vue_component__$9
   },
@@ -317,6 +333,10 @@ var script$5 = defineComponent({
     label: {
       type: String,
       required: true
+    },
+    selected: {
+      type: Boolean,
+      default: false
     }
   },
   expose: ['root'],
@@ -344,7 +364,10 @@ var __vue_render__$5 = function () {
   var _c = _vm._self._c || _h;
   return _c('div', {
     ref: "root",
-    class: _vm.rootStyles
+    class: _vm.rootStyles,
+    attrs: {
+      "selected": _vm.selected ? '' : null
+    }
   }, [_c('OrLabel', [_vm._v(_vm._s(_vm.label))]), _vm._v(" "), _c('div', {
     class: _vm.contentStyles
   }, [_vm._t("default")], 2)], 1);
@@ -377,7 +400,6 @@ const DateTimePickerMonthSelect = [
 'px-md', 'py-md', 'gap-md'];
 
 var script$4 = defineComponent({
-  name: 'OrDateTimePickerMonthSelect',
   components: {
     OrButton: __vue_component__$8,
     OrIcon: __vue_component__$a,
@@ -391,10 +413,6 @@ var script$4 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
-      default: undefined
-    },
-    initialValue: {
       type: Date,
       required: true
     },
@@ -435,9 +453,7 @@ var script$4 = defineComponent({
     // Styles
     const rootStyles = computed(() => ['or-date-time-picker-month-select-v3', ...DateTimePickerMonthSelect]);
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
-      defaultValue: toRef(props, 'initialValue')
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const yearOptions = computed(() => {
       return Array.from({
         length: 11
@@ -639,7 +655,6 @@ const DateTimePickerPopoverFooter = [
 'theme-border-1-outline-variant', 'dark:theme-border-1-outline-variant-dark', 'theme-border-overline'];
 
 var script$3 = defineComponent({
-  name: 'OrDateTimePickerPopoverFooter',
   components: {
     OrButton: __vue_component__$8
   },
@@ -725,7 +740,6 @@ const DateTimePickerPopoverHeader = [
 'px-md', 'py-md', 'gap-xl'];
 
 var script$2 = defineComponent({
-  name: 'OrDateTimePickerPopoverHeader',
   expose: ['root'],
   setup() {
     // Refs
@@ -785,7 +799,6 @@ const DateTimePickerTimeControlPlaceholder = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$1 = defineComponent({
-  name: 'OrDateTimePickerTimeControl',
   model: {
     prop: 'modelValue',
     event: 'update:modelValue'
@@ -901,7 +914,6 @@ const DateTimePickerTimeSelectButtonGroupItem = [
 'typography-caption-regular'];
 
 var script = defineComponent({
-  name: 'OrDateTimePickerTimeSelect',
   components: {
     OrButton: __vue_component__$8
   },
@@ -941,9 +953,7 @@ var script = defineComponent({
     const buttonGroupStyles = computed(() => [...DateTimePickerTimeSelectButtonGroup]);
     const buttonGroupItemStyles = computed(() => [...DateTimePickerTimeSelectButtonGroupItem]);
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
-      defaultValue: toRef(props, 'initialValue')
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const proxyTimeFormat = computed(() => {
       if (props.format === DateTimePickerTimeFormat.Auto) {
         const timeSample = new Date(1970, 0);
@@ -954,14 +964,14 @@ var script = defineComponent({
       }
       return props.format;
     });
-    const hoursRange = ref(proxyModelValue.value.getUTCHours() < 12 ? 'am' : 'pm');
+    const hoursRange = ref(props.initialValue.getUTCHours() < 12 ? 'am' : 'pm');
     watch(hoursRange, value => {
       switch (value) {
         case 'am':
-          proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours() - 12, proxyModelValue.value.getUTCMinutes()));
+          proxyModelValue.value = new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth(), props.initialValue.getUTCDate(), props.initialValue.getUTCHours() - 12, props.initialValue.getUTCMinutes()));
           break;
         case 'pm':
-          proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours() + 12, proxyModelValue.value.getUTCMinutes()));
+          proxyModelValue.value = new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth(), props.initialValue.getUTCDate(), props.initialValue.getUTCHours() + 12, props.initialValue.getUTCMinutes()));
           break;
       }
     });
@@ -970,7 +980,7 @@ var script = defineComponent({
         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()));
+        return new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth(), props.initialValue.getUTCDate(), value, props.initialValue.getUTCMinutes()));
       }).filter(value => {
         if (proxyTimeFormat.value === DateTimePickerTimeFormat.H23) {
           return true;
@@ -988,7 +998,7 @@ var script = defineComponent({
         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));
+        return new Date(Date.UTC(props.initialValue.getUTCFullYear(), props.initialValue.getUTCMonth(), props.initialValue.getUTCDate(), props.initialValue.getUTCHours(), value));
       });
     });
     // Methods

package/dist/esm/v2/{OrInput-e9e91885.js → OrInput-47e37630.js}

@@ -10,8 +10,8 @@ import { _ as __vue_component__$1 } from './OrError-916e928e.js';
 import { _ as __vue_component__$2 } from './OrHint-1220face.js';
 import { _ as __vue_component__$4 } from './OrIconButton-07c0bd56.js';
 import { _ as __vue_component__$3 } from './OrIcon-82bfdc62.js';
-import { _ as __vue_component__$5 } from './OrInputBox-7dc5b9e9.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
+import { _ as __vue_component__$5 } from './OrInputBox-2ba5d5de.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
 import { _ as __vue_component__$6 } from './OrLabel-b465bc0b.js';
 import { _ as __vue_component__$7 } from './OrLoader-b0c381f9.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v2/{OrInputBox-7dc5b9e9.js → OrInputBox-2ba5d5de.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
+import { s as script } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 /* script */

package/dist/esm/v2/{OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js → OrInputBox.vue_rollup-plugin-vue_script-bebba826.js}

@@ -101,13 +101,13 @@ const InputBoxVariants = {
   // Theme
   'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark', 'theme-outline-2-transparent', 'dark:theme-outline-2-transparent',
   // Theme (focus)
-  'focus-within:theme-background-primary-translucent', 'dark:focus-within:theme-background-primary-translucent-dark', 'focus-within:theme-border-1-primary', 'dark:focus-within:theme-border-1-primary-dark', 'focus-within:theme-outline-2-primary', 'dark:focus-within:theme-outline-2-primary-dark',
+  'focus-within:theme-background-primary-translucent-1', 'dark:focus-within:theme-background-primary-translucent-1-dark', 'focus-within:theme-border-1-primary', 'dark:focus-within:theme-border-1-primary-dark', 'focus-within:theme-outline-2-primary', 'dark:focus-within:theme-outline-2-primary-dark',
   // Theme (read-only)
-  'read-only:theme-background-primary-translucent', 'dark:read-only:theme-background-primary-translucent-dark', 'read-only:!border-transparent', 'dark:read-only:!border-transparent',
+  'read-only:theme-background-primary-translucent-1', 'dark:read-only:theme-background-primary-translucent-1-dark', 'read-only:!border-transparent', 'dark:read-only:!border-transparent',
   // Theme (invalid)
-  'invalid:theme-preset-3-error', 'dark:invalid:theme-preset-3-error-dark', 'invalid:theme-background-error-translucent', 'dark:invalid:theme-background-error-translucent-dark', 'invalid:theme-foreground-default', 'dark:invalid:theme-foreground-default-dark', 'invalid:theme-border-1-error', 'dark:invalid:theme-border-1-error-dark', 'invalid:theme-outline-2-transparent', 'dark:invalid:theme-outline-2-transparent',
+  'invalid:theme-preset-3-error', 'dark:invalid:theme-preset-3-error-dark', 'invalid:theme-background-error-translucent-1', 'dark:invalid:theme-background-error-translucent-1-dark', 'invalid:theme-foreground-default', 'dark:invalid:theme-foreground-default-dark', 'invalid:theme-border-1-error', 'dark:invalid:theme-border-1-error-dark', 'invalid:theme-outline-2-transparent', 'dark:invalid:theme-outline-2-transparent',
   // Theme (invalid, focus)
-  'invalid:focus-within:theme-background-error-translucent', 'dark:invalid:focus-within:theme-background-error-translucent-dark', 'invalid:focus-within:theme-border-1-error', 'dark:invalid:focus-within:theme-border-1-error-dark', 'invalid:focus-within:theme-outline-2-error', 'dark:invalid:focus-within:theme-outline-2-error-dark',
+  'invalid:focus-within:theme-background-error-translucent-1', 'dark:invalid:focus-within:theme-background-error-translucent-1-dark', 'invalid:focus-within:theme-border-1-error', 'dark:invalid:focus-within:theme-border-1-error-dark', 'invalid:focus-within:theme-outline-2-error', 'dark:invalid:focus-within:theme-outline-2-error-dark',
   // Theme (invalid, read-only)
   'invalid:read-only:bg-error-opacity-0-08', 'dark:invalid:read-only:bg-error-opacity-0-08-dark', 'invalid:read-only:!border-transparent', 'dark:invalid:read-only:!border-transparent'],
   [InputBoxVariant.Unstyled]: [

package/dist/esm/v2/{OrRichTextEditor-100c02ba.js → OrRichTextEditor-0746e943.js}

@@ -22,7 +22,7 @@ import { _ as __vue_component__$4 } from './OrMenu-3d8e70c1.js';
 import { _ as __vue_component__$8 } from './OrPopover-2ced765c.js';
 import { _ as __vue_component__$3 } from './OrMenuItem-8d1c89f6.js';
 import { _ as __vue_component__$5 } from './OrModal-aef72b96.js';
-import { _ as __vue_component__$6 } from './OrInput-e9e91885.js';
+import { _ as __vue_component__$6 } from './OrInput-47e37630.js';
 import { _ as __vue_component__$7 } from './OrButton-78336f88.js';
 import _ from 'lodash';
 import { Node, Editor, mergeAttributes } from '@tiptap/core';
@@ -156,7 +156,7 @@ const deserialize = (schema, content) => {
 
 const EditorContainer = [
 // Colors
-'border-outline', 'focus-within:theme-background-primary-translucent', 'focus-within:theme-border-1-primary', 'focus-within:theme-outline-2-primary',
+'border-outline', 'focus-within:theme-background-primary-translucent-1', 'focus-within:theme-border-1-primary', 'focus-within:theme-outline-2-primary',
 // Sizing
 'border-1', 'rounded-md', 'w-full'];
 const ToolbarContainer = [

package/dist/esm/v2/{OrSearch-c5850ddd.js → OrSearch-9860bd73.js}

@@ -1,7 +1,7 @@
 import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrInput-e9e91885.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
+import { _ as __vue_component__$1 } from './OrInput-47e37630.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import './dom-aecadd9a.js';
 import '@onereach/styles/tailwind/plugins/core';

package/dist/esm/v2/{OrSelect-07de6a73.js → OrSelect-bd77c553.js}

@@ -12,9 +12,9 @@ import { _ as __vue_component__$5 } from './OrExpansionPanel-218abf58.js';
 import { _ as __vue_component__$6 } from './OrHint-1220face.js';
 import { _ as __vue_component__$8 } from './OrIconButton-07c0bd56.js';
 import { _ as __vue_component__$7 } from './OrIcon-82bfdc62.js';
-import { _ as __vue_component__$a } from './OrInputBox-7dc5b9e9.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
-import { _ as __vue_component__$9 } from './OrInput-e9e91885.js';
+import { _ as __vue_component__$a } from './OrInputBox-2ba5d5de.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
+import { _ as __vue_component__$9 } from './OrInput-47e37630.js';
 import { _ as __vue_component__$b } from './OrLabel-b465bc0b.js';
 import { _ as __vue_component__$c } from './OrMenuItem-8d1c89f6.js';
 import { _ as __vue_component__$d } from './OrPopover-2ced765c.js';
@@ -415,7 +415,7 @@ var __vue_render__ = function () {
       expression: "close"
     }],
     ref: "inputBox",
-    class: [_vm.popoverState === 'open' && (_vm.popover && _vm.popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')],
+    class: [_vm.popoverState === 'open' && (_vm.popover && _vm.popover.isFlipped ? 'rounded-t-none' : 'rounded-b-none')],
     attrs: {
       "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
       "size": _vm.size,

package/dist/esm/v2/{OrTagInput-4c4d0714.js → OrTagInput-46da8417.js}

@@ -9,8 +9,8 @@ import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34
 import { _ as __vue_component__$1 } from './OrError-916e928e.js';
 import { _ as __vue_component__$2 } from './OrHint-1220face.js';
 import { _ as __vue_component__$3 } from './OrIconButton-07c0bd56.js';
-import { _ as __vue_component__$4 } from './OrInputBox-7dc5b9e9.js';
-import './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
+import { _ as __vue_component__$4 } from './OrInputBox-2ba5d5de.js';
+import './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
 import { _ as __vue_component__$5 } from './OrLabel-b465bc0b.js';
 import { _ as __vue_component__$6, T as TagsOverflow } from './OrTags-a733e716.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v2/{OrTextarea-2645d63f.js → OrTextarea-88db4c34.js}

@@ -8,8 +8,8 @@ import '@onereach/styles/tailwind.config.json';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { _ as __vue_component__$1 } from './OrError-916e928e.js';
 import { _ as __vue_component__$2 } from './OrHint-1220face.js';
-import { _ as __vue_component__$3 } from './OrInputBox-7dc5b9e9.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
+import { _ as __vue_component__$3 } from './OrInputBox-2ba5d5de.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
 import { _ as __vue_component__$4 } from './OrLabel-b465bc0b.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrTimeFormat-72f90cea.js → OrTimeFormat-73a2e956.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-a4a287ed.js';
-import './OrDateTimePickerTimeSelect-9c1c1ff0.js';
-import { D as DateTimePickerTimeFormat, a as formatTime } from './getTimePlaceholder-06d57fcf.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-0658f779.js';
+import './OrDateTimePickerTimeSelect-ab870b6a.js';
+import { D as DateTimePickerTimeFormat, a as formatTime } from './getTimePlaceholder-8f786f44.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const TimeFormat = [

package/dist/esm/v2/{OrTimePicker-4d375cf3.js → OrTimePicker-4462cd1f.js}

@@ -1,20 +1,20 @@
-import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
+import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-06d651cf.js';
 import '@vueuse/core';
 import './dom-aecadd9a.js';
 import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-a4a287ed.js';
-import { b as __vue_component__$1, d as __vue_component__$2, e as __vue_component__$3, f as __vue_component__$4, g as __vue_component__$5 } from './OrDateTimePickerTimeSelect-9c1c1ff0.js';
-import { D as DateTimePickerTimeFormat } from './getTimePlaceholder-06d57fcf.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-0658f779.js';
+import { b as __vue_component__$1, d as __vue_component__$2, e as __vue_component__$3, f as __vue_component__$4, g as __vue_component__$5 } from './OrDateTimePickerTimeSelect-ab870b6a.js';
+import { D as DateTimePickerTimeFormat } from './getTimePlaceholder-8f786f44.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 import { _ as __vue_component__$6 } from './OrError-916e928e.js';
 import { _ as __vue_component__$7 } from './OrHint-1220face.js';
 import { _ as __vue_component__$9 } from './OrIconButton-07c0bd56.js';
 import { _ as __vue_component__$8 } from './OrIcon-82bfdc62.js';
-import { _ as __vue_component__$a } from './OrInputBox-7dc5b9e9.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
+import { _ as __vue_component__$a } from './OrInputBox-2ba5d5de.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
 import { _ as __vue_component__$b } from './OrLabel-b465bc0b.js';
 import { _ as __vue_component__$c } from './OrPopover-2ced765c.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -27,7 +27,6 @@ const TimePicker = [
 const TimePickerPopover = [];
 
 var script = defineComponent({
-  name: 'OrDateTimePicker',
   components: {
     OrDateTimePickerMobileControl: __vue_component__$1,
     OrDateTimePickerPopoverFooter: __vue_component__$2,
@@ -103,6 +102,7 @@ var script = defineComponent({
   emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
+    var _a;
     // Refs
     const root = ref();
     const inputBox = ref();
@@ -119,7 +119,10 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-time-picker-v3', ...TimePicker]);
     const popoverStyles = computed(() => [...TimePickerPopover]);
     // State
-    const initialModelValue = getCurrentDate();
+    const initialValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : getCurrentDate());
+    watch(() => props.modelValue, value => {
+      initialValue.value = value !== null && value !== void 0 ? value : getCurrentDate();
+    });
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const draftModelValue = ref(proxyModelValue.value);
     watch(proxyModelValue, value => {
@@ -139,20 +142,16 @@ var script = defineComponent({
     // Methods
     function apply() {
       var _a;
-      proxyModelValue.value = (_a = draftModelValue.value) !== null && _a !== void 0 ? _a : initialModelValue;
+      proxyModelValue.value = (_a = draftModelValue.value) !== null && _a !== void 0 ? _a : initialValue.value;
     }
     function reset() {
       draftModelValue.value = proxyModelValue.value;
     }
-    function togglePopover() {
+    function openPopover() {
       if (!props.readonly && !props.disabled) {
         const popoverInstance = popover.value;
         if (popoverInstance) {
-          if (popoverState.value === 'open') {
-            popoverInstance.close();
-          } else {
-            popoverInstance.open();
-          }
+          popoverInstance.open();
         }
       }
     }
@@ -178,13 +177,13 @@ var script = defineComponent({
       popoverState,
       rootStyles,
       popoverStyles,
-      initialModelValue,
+      initialValue,
       proxyModelValue,
       draftModelValue,
       isInvalidDraftModelValue,
       apply,
       reset,
-      togglePopover,
+      openPopover,
       closePopover,
       formatTimeAlt
     };
@@ -219,8 +218,8 @@ var __vue_render__ = function () {
     directives: [{
       name: "dropdown-open",
       rawName: "v-dropdown-open",
-      value: _vm.togglePopover,
-      expression: "togglePopover"
+      value: _vm.openPopover,
+      expression: "openPopover"
     }, {
       name: "dropdown-close",
       rawName: "v-dropdown-close",
@@ -263,8 +262,8 @@ var __vue_render__ = function () {
     directives: [{
       name: "dropdown-open",
       rawName: "v-dropdown-open",
-      value: _vm.togglePopover,
-      expression: "togglePopover"
+      value: _vm.openPopover,
+      expression: "openPopover"
     }, {
       name: "dropdown-close",
       rawName: "v-dropdown-close",
@@ -302,11 +301,12 @@ var __vue_render__ = function () {
     }
   }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": "Time"
+      "label": 'Time',
+      "selected": true
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
     attrs: {
-      "initial-value": _vm.initialModelValue,
+      "initial-value": _vm.initialValue,
       "format": _vm.format,
       "hours-filter": _vm.hoursFilter,
       "minutes-filter": _vm.minutesFilter