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

package/dist/esm/v3/{OrDateTimePicker-ce7389e8.js → OrDateTimePicker-d29875b4.js}

@@ -1,4 +1,4 @@
-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';
@@ -9,11 +9,11 @@ import { s as script$9 } from './OrError-69bd7f6a.js';
 import { s as script$a } from './OrHint-55d3de35.js';
 import { s as script$c } from './OrIconButton-c89f733b.js';
 import { s as script$b } from './OrIcon-3e27d5fb.js';
-import { s as script$d, I as InputBoxSize } from './OrInputBox-912a6254.js';
+import { s as script$d, I as InputBoxSize } from './OrInputBox-5f246763.js';
 import { s as script$e } from './OrLabel-b826da04.js';
 import { s as script$f } from './OrPopover-3b07d49e.js';
-import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6, f as script$7, g as script$8 } from './OrDateTimePickerTimeSelect-4c910498.js';
-import { D as DateTimePickerTimeFormat } from './getTimePlaceholder-09859f55.js';
+import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6, f as script$7, g as script$8 } from './OrDateTimePickerTimeSelect-7d18eee6.js';
+import { D as DateTimePickerTimeFormat } from './getTimePlaceholder-f190a43f.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, Fragment, createElementVNode } from 'vue';
 
@@ -28,7 +28,6 @@ const DateTimePickerDatePopover = [
 const DateTimePickerTimePopover = [];
 
 var script = defineComponent({
-  name: 'OrDateTimePicker',
   components: {
     OrDateTimePickerDateControl: script$1,
     OrDateTimePickerDateSelect: script$2,
@@ -119,6 +118,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();
@@ -141,7 +141,10 @@ var script = defineComponent({
     const datePopoverStyles = computed(() => [...DateTimePickerDatePopover]);
     const timePopoverStyles = computed(() => [...DateTimePickerTimePopover]);
     // 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 => {
@@ -170,7 +173,7 @@ 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;
@@ -239,7 +242,7 @@ var script = defineComponent({
       rootStyles,
       datePopoverStyles,
       timePopoverStyles,
-      initialModelValue,
+      initialValue,
       proxyModelValue,
       draftModelValue,
       isInvalidDraftModelValue,
@@ -335,13 +338,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, {
       default: withCtx(() => [createVNode(_component_OrDateTimePickerPopoverHeader, null, {
         default: withCtx(() => [createVNode(_component_OrDateTimePickerMobileControl, {
-          label: "Date"
+          label: 'Date'
         }, {
           default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatDateAlt(_ctx.draftModelValue)), 1 /* TEXT */)]),
 
           _: 1 /* STABLE */
         }), createVNode(_component_OrDateTimePickerMobileControl, {
-          label: "Time"
+          label: 'Time'
         }, {
           default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatTimeAlt(_ctx.draftModelValue)), 1 /* TEXT */)]),
 
@@ -350,15 +353,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
         _: 1 /* STABLE */
       }), createVNode(_component_OrDateTimePickerMonthSelect, {
-        modelValue: _ctx.draftModelValue,
-        "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.draftModelValue = $event),
-        "initial-value": _ctx.initialModelValue,
+        modelValue: _ctx.initialValue,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.initialValue = $event),
         "year-filter": _ctx.yearFilter,
         "month-filter": _ctx.monthFilter
-      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "year-filter", "month-filter"]), createVNode(_component_OrDateTimePickerDateSelect, {
+      }, null, 8 /* PROPS */, ["modelValue", "year-filter", "month-filter"]), createVNode(_component_OrDateTimePickerDateSelect, {
         modelValue: _ctx.draftModelValue,
         "onUpdate:modelValue": _cache[3] || (_cache[3] = $event => _ctx.draftModelValue = $event),
-        "initial-value": _ctx.initialModelValue,
+        "initial-value": _ctx.initialValue,
         "date-filter": _ctx.dateFilter
       }, null, 8 /* PROPS */, ["modelValue", "initial-value", "date-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
         disabled: _ctx.isInvalidDraftModelValue,
@@ -385,13 +387,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, {
       default: withCtx(() => [createVNode(_component_OrDateTimePickerPopoverHeader, null, {
         default: withCtx(() => [createVNode(_component_OrDateTimePickerMobileControl, {
-          label: "Date"
+          label: 'Date'
         }, {
           default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatDateAlt(_ctx.draftModelValue)), 1 /* TEXT */)]),
 
           _: 1 /* STABLE */
         }), createVNode(_component_OrDateTimePickerMobileControl, {
-          label: "Time"
+          label: 'Time'
         }, {
           default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatTimeAlt(_ctx.draftModelValue)), 1 /* TEXT */)]),
 
@@ -402,7 +404,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }), createVNode(_component_OrDateTimePickerTimeSelect, {
         modelValue: _ctx.draftModelValue,
         "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.draftModelValue = $event),
-        "initial-value": _ctx.initialModelValue,
+        "initial-value": _ctx.initialValue,
         format: _ctx.timeFormat,
         "hours-filter": _ctx.hoursFilter,
         "minutes-filter": _ctx.minutesFilter

package/dist/esm/v3/{OrDateTimePickerTimeSelect-4c910498.js → OrDateTimePickerTimeSelect-7d18eee6.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-09859f55.js';
+import { g as getDatePlaceholder, f as formatDate, D as DateTimePickerTimeFormat, b as getTimePlaceholder, a as formatTime } from './getTimePlaceholder-f190a43f.js';
 import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, resolveComponent, createElementVNode, renderList, createBlock, withModifiers, withCtx, createVNode, renderSlot, createCommentVNode } from 'vue';
 import { s as script$8 } from './OrButton-2e3a73fb.js';
 import { s as script$9 } from './OrLabel-b826da04.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'
@@ -70,7 +69,7 @@ var script$7 = defineComponent({
   }
 });
 
-const _hoisted_1$2 = ["contenteditable", "required", "readonly", "disabled"];
+const _hoisted_1$3 = ["contenteditable", "required", "readonly", "disabled"];
 const _hoisted_2$1 = ["disabled"];
 function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
@@ -86,7 +85,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     key: 1,
     class: normalizeClass(_ctx.placeholderStyles),
     disabled: _ctx.disabled ? '' : null
-  }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_2$1))], 10 /* CLASS, PROPS */, _hoisted_1$2);
+  }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_2$1))], 10 /* CLASS, PROPS */, _hoisted_1$3);
 }
 
 script$7.render = render$7;
@@ -103,14 +102,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
@@ -119,15 +118,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: script$8
   },
@@ -147,6 +152,14 @@ var script$6 = defineComponent({
     dateFilter: {
       type: Function,
       default: undefined
+    },
+    rangeStart: {
+      type: Date,
+      default: undefined
+    },
+    rangeEnd: {
+      type: Date,
+      default: undefined
     }
   },
   emits: ['update:modelValue'],
@@ -160,13 +173,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 (() => {
@@ -181,10 +193,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
@@ -207,6 +219,7 @@ var script$6 = defineComponent({
       buttonGroupWeekdayItemStyles,
       buttonGroupDateItemStyles,
       buttonGroupCurrentDateItemStyles,
+      buttonGroupInRangeDateItemStyles,
       proxyModelValue,
       dayOptions,
       currentDate,
@@ -234,10 +247,10 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass({
         [_ctx.buttonGroupDateItemStyles.join(' ')]: true,
         [_ctx.buttonGroupCurrentDateItemStyles.join(' ')]: Number(value) === Number(_ctx.currentDate) && Number(value) !== Number(_ctx.proxyModelValue),
-        'invisible': value.getUTCMonth() !== _ctx.proxyModelValue.getUTCMonth()
+        [_ctx.buttonGroupInRangeDateItemStyles.join(' ')]: _ctx.rangeStart && Number(value) > Number(_ctx.rangeStart) && _ctx.rangeEnd && Number(value) < Number(_ctx.rangeEnd)
       }),
-      variant: Number(value) === Number(_ctx.proxyModelValue) ? 'contained' : 'text',
-      color: Number(value) === Number(_ctx.proxyModelValue) ? 'primary' : 'inherit',
+      variant: Number(value) === Number(_ctx.proxyModelValue) || _ctx.rangeStart && Number(value) === Number(_ctx.rangeStart) || _ctx.rangeEnd && Number(value) === Number(_ctx.rangeEnd) ? 'contained' : 'text',
+      color: Number(value) === Number(_ctx.proxyModelValue) || _ctx.rangeStart && Number(value) === Number(_ctx.rangeStart) || _ctx.rangeEnd && Number(value) === Number(_ctx.rangeEnd) ? 'primary' : 'inherit',
       disabled: _ctx.dateFilter && !_ctx.dateFilter(value),
       onClick: withModifiers($event => _ctx.proxyModelValue = value, ["stop"])
     }, {
@@ -254,16 +267,19 @@ script$6.__file = "src/components/or-date-time-picker-v3/partials/or-date-time-p
 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: script$9
   },
@@ -271,6 +287,10 @@ var script$5 = defineComponent({
     label: {
       type: String,
       required: true
+    },
+    selected: {
+      type: Boolean,
+      default: false
     }
   },
   expose: ['root'],
@@ -288,18 +308,20 @@ var script$5 = defineComponent({
   }
 });
 
+const _hoisted_1$2 = ["selected"];
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
   return openBlock(), createElementBlock("div", {
     ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
+    class: normalizeClass(_ctx.rootStyles),
+    selected: _ctx.selected ? '' : null
   }, [createVNode(_component_OrLabel, null, {
     default: withCtx(() => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)]),
 
     _: 1 /* STABLE */
   }), createElementVNode("div", {
     class: normalizeClass(_ctx.contentStyles)
-  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)], 2 /* CLASS */);
+  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_1$2);
 }
 
 script$5.render = render$5;
@@ -312,7 +334,6 @@ const DateTimePickerMonthSelect = [
 'px-md', 'py-md', 'gap-md'];
 
 var script$4 = defineComponent({
-  name: 'OrDateTimePickerMonthSelect',
   components: {
     OrButton: script$8,
     OrIcon: script$a,
@@ -326,10 +347,6 @@ var script$4 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
-      default: undefined
-    },
-    initialValue: {
       type: Date,
       required: true
     },
@@ -370,9 +387,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
@@ -536,7 +551,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: script$8
   },
@@ -591,7 +605,6 @@ const DateTimePickerPopoverHeader = [
 'px-md', 'py-md', 'gap-xl'];
 
 var script$2 = defineComponent({
-  name: 'OrDateTimePickerPopoverHeader',
   expose: ['root'],
   setup() {
     // Refs
@@ -627,7 +640,6 @@ const DateTimePickerTimeControlPlaceholder = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$1 = defineComponent({
-  name: 'OrDateTimePickerTimeControl',
   model: {
     prop: 'modelValue',
     event: 'update:modelValue'
@@ -720,7 +732,6 @@ const DateTimePickerTimeSelectButtonGroupItem = [
 'typography-caption-regular'];
 
 var script = defineComponent({
-  name: 'OrDateTimePickerTimeSelect',
   components: {
     OrButton: script$8
   },
@@ -760,9 +771,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);
@@ -773,14 +782,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;
       }
     });
@@ -789,7 +798,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;
@@ -807,7 +816,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/v3/{OrInput-0db1e05f.js → OrInput-74ed60b3.js}

@@ -10,7 +10,7 @@ import { s as script$1 } from './OrError-69bd7f6a.js';
 import { s as script$2 } from './OrHint-55d3de35.js';
 import { s as script$4 } from './OrIconButton-c89f733b.js';
 import { s as script$3 } from './OrIcon-3e27d5fb.js';
-import { s as script$5, I as InputBoxSize } from './OrInputBox-912a6254.js';
+import { s as script$5, I as InputBoxSize } from './OrInputBox-5f246763.js';
 import { s as script$6 } from './OrLabel-b826da04.js';
 import { s as script$7 } from './OrLoader-b79022da.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, Fragment, withModifiers, withDirectives, createElementVNode, mergeProps, vModelDynamic, createSlots, vShow } from 'vue';

package/dist/esm/v3/{OrInputBox-912a6254.js → OrInputBox-5f246763.js}

@@ -76,13 +76,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/v3/{OrRichTextEditor-c205f210.js → OrRichTextEditor-facfb733.js}

@@ -22,7 +22,7 @@ import { s as script$4 } from './OrMenu-72844eb1.js';
 import { s as script$8 } from './OrPopover-3b07d49e.js';
 import { s as script$3 } from './OrMenuItem-fdc66517.js';
 import { s as script$5 } from './OrModal-ef436909.js';
-import { s as script$6 } from './OrInput-0db1e05f.js';
+import { s as script$6 } from './OrInput-74ed60b3.js';
 import { s as script$7 } from './OrButton-2e3a73fb.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/v3/{OrSearch-602356a0.js → OrSearch-10f4835b.js}

@@ -1,7 +1,7 @@
 import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
-import { s as script$1 } from './OrInput-0db1e05f.js';
-import { I as InputBoxSize } from './OrInputBox-912a6254.js';
+import { s as script$1 } from './OrInput-74ed60b3.js';
+import { I as InputBoxSize } from './OrInputBox-5f246763.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/v3/{OrSelect-31442785.js → OrSelect-7428e5f8.js}

@@ -12,8 +12,8 @@ import { s as script$5 } from './OrExpansionPanel-164af8b7.js';
 import { s as script$6 } from './OrHint-55d3de35.js';
 import { s as script$8 } from './OrIconButton-c89f733b.js';
 import { s as script$7 } from './OrIcon-3e27d5fb.js';
-import { s as script$a, I as InputBoxSize } from './OrInputBox-912a6254.js';
-import { s as script$9 } from './OrInput-0db1e05f.js';
+import { s as script$a, I as InputBoxSize } from './OrInputBox-5f246763.js';
+import { s as script$9 } from './OrInput-74ed60b3.js';
 import { s as script$b } from './OrLabel-b826da04.js';
 import { s as script$c } from './OrMenuItem-fdc66517.js';
 import { s as script$d } from './OrPopover-3b07d49e.js';
@@ -419,7 +419,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3 /* FORWARDED */
   }, 8 /* PROPS */, ["control-id", "required", "disabled"])) : createCommentVNode("v-if", true), withDirectives((openBlock(), createBlock(_component_OrInputBox, {
     ref: "inputBox",
-    class: normalizeClass([_ctx.popoverState === 'open' && (_ctx.popover && _ctx.popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')]),
+    class: normalizeClass([_ctx.popoverState === 'open' && (_ctx.popover && _ctx.popover.isFlipped ? 'rounded-t-none' : 'rounded-b-none')]),
     variant: _ctx.disableDefaultStyles ? 'unstyled' : 'styled',
     size: _ctx.size,
     invalid: !!_ctx.error,

package/dist/esm/v3/{OrTagInput-d018033c.js → OrTagInput-9ad92675.js}

@@ -9,7 +9,7 @@ import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34
 import { s as script$1 } from './OrError-69bd7f6a.js';
 import { s as script$2 } from './OrHint-55d3de35.js';
 import { s as script$3 } from './OrIconButton-c89f733b.js';
-import { s as script$4 } from './OrInputBox-912a6254.js';
+import { s as script$4 } from './OrInputBox-5f246763.js';
 import { s as script$5 } from './OrLabel-b826da04.js';
 import { s as script$6, T as TagsOverflow } from './OrTags-ba8ef261.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, createSlots, createElementVNode, withDirectives, mergeProps, withKeys, vModelDynamic, vShow } from 'vue';

package/dist/esm/v3/{OrTextarea-5824a209.js → OrTextarea-68d6803e.js}

@@ -8,7 +8,7 @@ import '@onereach/styles/tailwind.config.json';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-69bd7f6a.js';
 import { s as script$2 } from './OrHint-55d3de35.js';
-import { s as script$3, I as InputBoxSize } from './OrInputBox-912a6254.js';
+import { s as script$3, I as InputBoxSize } from './OrInputBox-5f246763.js';
 import { s as script$4 } from './OrLabel-b826da04.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, mergeProps, vModelText, createSlots, vShow } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v3/{OrTimeFormat-5ece86b5.js → OrTimeFormat-cf35388e.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import './OrDateTimePicker-ce7389e8.js';
-import './OrDateTimePickerTimeSelect-4c910498.js';
-import { D as DateTimePickerTimeFormat, a as formatTime } from './getTimePlaceholder-09859f55.js';
+import './OrDateTimePicker-d29875b4.js';
+import './OrDateTimePickerTimeSelect-7d18eee6.js';
+import { D as DateTimePickerTimeFormat, a as formatTime } from './getTimePlaceholder-f190a43f.js';
 import { openBlock, createElementBlock, normalizeClass, toDisplayString } from 'vue';
 
 const TimeFormat = [