@onereach/ui-components 6.4.5 → 6.4.6-beta.3436.0

package/dist/esm/v2/{OrDateTimePickerTimeSelect-a122ae93.js → OrDateTimePickerTimeSelect-88b01147.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-a23ee9f0.js';
 import { _ as __vue_component__$9 } from './OrLabel-4a3d8904.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,12 +125,12 @@ const DateTimePickerDateSelectButtonGroup = [
 // Box
 'h-[262px]',
 // Spacing
-'gap-xs'];
+'mx-[-2px]', 'my-[-2px]'];
 const DateTimePickerDateSelectButtonGroupWeekdayItem = [
 // Layout
 'layout-row justify-center',
 // Spacing
-'px-sm', 'py-sm',
+'mx-[2px]', 'my-[2px]', 'px-sm', 'py-sm',
 // Interactivity
 'interactivity-none',
 // Typography
@@ -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,6 +196,7 @@ 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')
@@ -230,6 +244,7 @@ var script$6 = defineComponent({
       buttonGroupWeekdayItemStyles,
       buttonGroupDateItemStyles,
       buttonGroupCurrentDateItemStyles,
+      buttonGroupInRangeDateItemStyles,
       proxyModelValue,
       dayOptions,
       currentDate,
@@ -261,7 +276,7 @@ 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['invisible'] = value.getUTCMonth() !== _vm.proxyModelValue.getUTCMonth(), _obj),
       attrs: {
         "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
         "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
@@ -300,16 +315,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 +335,10 @@ var script$5 = defineComponent({
     label: {
       type: String,
       required: true
+    },
+    selected: {
+      type: Boolean,
+      default: false
     }
   },
   expose: ['root'],
@@ -344,7 +366,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 +402,6 @@ const DateTimePickerMonthSelect = [
 'px-md', 'py-md', 'gap-md'];
 
 var script$4 = defineComponent({
-  name: 'OrDateTimePickerMonthSelect',
   components: {
     OrButton: __vue_component__$8,
     OrIcon: __vue_component__$a,
@@ -639,7 +663,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 +748,6 @@ const DateTimePickerPopoverHeader = [
 'px-md', 'py-md', 'gap-xl'];
 
 var script$2 = defineComponent({
-  name: 'OrDateTimePickerPopoverHeader',
   expose: ['root'],
   setup() {
     // Refs
@@ -785,7 +807,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 +922,6 @@ const DateTimePickerTimeSelectButtonGroupItem = [
 'typography-caption-regular'];
 
 var script = defineComponent({
-  name: 'OrDateTimePickerTimeSelect',
   components: {
     OrButton: __vue_component__$8
   },

package/dist/esm/v2/{OrInput-794bc2f6.js → OrInput-c16b09bd.js}

@@ -10,8 +10,8 @@ import { _ as __vue_component__$1 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$2 } from './OrHint-aa221198.js';
 import { _ as __vue_component__$4 } from './OrIconButton-08d2913d.js';
 import { _ as __vue_component__$3 } from './OrIcon-a36250bf.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-4a3d8904.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-b12605d3.js → OrRichTextEditor-46ae122c.js}

@@ -22,7 +22,7 @@ import { _ as __vue_component__$4 } from './OrMenu-f402e409.js';
 import { _ as __vue_component__$8 } from './OrPopover-58fefa76.js';
 import { _ as __vue_component__$3 } from './OrMenuItem-61403f7a.js';
 import { _ as __vue_component__$5 } from './OrModal-dbb90626.js';
-import { _ as __vue_component__$6 } from './OrInput-794bc2f6.js';
+import { _ as __vue_component__$6 } from './OrInput-c16b09bd.js';
 import { _ as __vue_component__$7 } from './OrButton-a23ee9f0.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-21ae4e63.js → OrSearch-29048a63.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-794bc2f6.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
+import { _ as __vue_component__$1 } from './OrInput-c16b09bd.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-0a5c0317.js → OrSelect-f633a2e5.js}

@@ -12,9 +12,9 @@ import { _ as __vue_component__$4 } from './OrExpansionPanel-2ac7b233.js';
 import { _ as __vue_component__$5 } from './OrHint-aa221198.js';
 import { _ as __vue_component__$7 } from './OrIconButton-08d2913d.js';
 import { _ as __vue_component__$6 } from './OrIcon-a36250bf.js';
-import { _ as __vue_component__$9 } from './OrInputBox-7dc5b9e9.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
-import { _ as __vue_component__$8 } from './OrInput-794bc2f6.js';
+import { _ as __vue_component__$9 } from './OrInputBox-2ba5d5de.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
+import { _ as __vue_component__$8 } from './OrInput-c16b09bd.js';
 import { _ as __vue_component__$a } from './OrLabel-4a3d8904.js';
 import { _ as __vue_component__$b } from './OrMenuItem-61403f7a.js';
 import { _ as __vue_component__$c } from './OrPopover-58fefa76.js';
@@ -453,7 +453,7 @@ var __vue_render__ = function () {
       expression: "close"
     }],
     ref: "inputBox",
-    class: [_vm.popoverState === 'open' && (_vm.popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')],
+    class: [_vm.popoverState === 'open' && (_vm.popover.isFlipped ? 'rounded-t-none' : 'rounded-b-none')],
     attrs: {
       "variant": _vm.disableDefaultStyles ? 'unstyled' : 'styled',
       "size": _vm.size,

package/dist/esm/v2/{OrTagInput-ebfaeaca.js → OrTagInput-45129485.js}

@@ -9,8 +9,8 @@ import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34
 import { _ as __vue_component__$1 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$2 } from './OrHint-aa221198.js';
 import { _ as __vue_component__$3 } from './OrIconButton-08d2913d.js';
-import { _ as __vue_component__$4 } from './OrInputBox-7dc5b9e9.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
+import { _ as __vue_component__$4 } from './OrInputBox-2ba5d5de.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
 import { _ as __vue_component__$5 } from './OrLabel-4a3d8904.js';
 import { _ as __vue_component__$6 } from './OrTags-b02fadce.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v2/{OrTextarea-58bd5e83.js → OrTextarea-e1875f6e.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-4ffc1c39.js';
 import { _ as __vue_component__$2 } from './OrHint-aa221198.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-4a3d8904.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-c369099a.js → OrTimeFormat-64b139c4.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-c15c0ff1.js';
-import './OrDateTimePickerTimeSelect-a122ae93.js';
-import { D as DateTimePickerTimeFormat, a as formatTime } from './getTimePlaceholder-06d57fcf.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-2547733c.js';
+import './OrDateTimePickerTimeSelect-88b01147.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-444a7d26.js → OrTimePicker-9dd254d2.js}

@@ -5,16 +5,16 @@ 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-c15c0ff1.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-a122ae93.js';
-import { D as DateTimePickerTimeFormat } from './getTimePlaceholder-06d57fcf.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-2547733c.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-88b01147.js';
+import { D as DateTimePickerTimeFormat } from './getTimePlaceholder-8f786f44.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 import { _ as __vue_component__$6 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$7 } from './OrHint-aa221198.js';
 import { _ as __vue_component__$9 } from './OrIconButton-08d2913d.js';
 import { _ as __vue_component__$8 } from './OrIcon-a36250bf.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-4a3d8904.js';
 import { _ as __vue_component__$c } from './OrPopover-58fefa76.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,
@@ -302,7 +301,8 @@ 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: {