@onereach/ui-components 6.4.5-beta.3426.0 → 6.4.5

package/dist/esm/v2/{OrCardCollection-655c8112.js → OrCardCollection-7ef48be2.js}

@@ -1,8 +1,8 @@
 import { defineComponent, computed, ref, watch } from 'vue-demi';
-import { _ as __vue_component__$2 } from './OrIconButton-36b8fc18.js';
-import { _ as __vue_component__$4 } from './OrSearch-2cae5b17.js';
-import './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
-import { _ as __vue_component__$3 } from './OrSorting-9d7ec521.js';
+import { _ as __vue_component__$2 } from './OrIconButton-08d2913d.js';
+import { _ as __vue_component__$4 } from './OrSearch-21ae4e63.js';
+import './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
+import { _ as __vue_component__$3 } from './OrSorting-b280f39c.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var CardCollectionView;

package/dist/esm/v2/{OrCode-a030bcf8.js → OrCode-57bd041c.js}

@@ -15,12 +15,12 @@ import { u as useProxyModelValue } from './useProxyModelValue-940010d2.js';
 import '@onereach/styles/tailwind/plugins/core';
 import { u as useTheme } from './useTheme-0ef25778.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
-import { _ as __vue_component__$7 } from './OrIconButton-36b8fc18.js';
-import { _ as __vue_component__$6 } from './OrModal-db8cd96e.js';
+import { _ as __vue_component__$7 } from './OrIconButton-08d2913d.js';
+import { _ as __vue_component__$6 } from './OrModal-dbb90626.js';
 import { _ as __vue_component__$2 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$3 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$4 } from './OrInputBox-2ba5d5de.js';
-import './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
+import { _ as __vue_component__$4 } from './OrInputBox-7dc5b9e9.js';
+import './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import { _ as __vue_component__$5 } from './OrLabel-4a3d8904.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrCombinedInput-6f6bee02.js → OrCombinedInput-08f20c4c.js}

@@ -2,7 +2,7 @@ import { defineComponent, ref, computed } from 'vue-demi';
 import { _ as __vue_component__$1 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$2 } from './OrHint-aa221198.js';
 import { _ as __vue_component__$3 } from './OrLabel-4a3d8904.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const CombinedInput = [
@@ -16,7 +16,7 @@ const CombinedInputControlGroup = [
 // Box
 'w-full',
 // Shape (.or-input-box-v3)
-'[&_.or-input-box-v3]:first-child:rounded-r-none', '[&_.or-input-box-v3]:middle-child:rounded-none', '[&_.or-input-box-v3]:last-child:rounded-l-none',
+'[&_.or-input-box-v3]:first-child:rounded-r-0', '[&_.or-input-box-v3]:middle-child:rounded-0', '[&_.or-input-box-v3]:last-child:rounded-l-0',
 // Spacing (.or-input-box-v3)
 '[&_.or-input-box-v3]:first-child:mr-[-1px]', '[&_.or-input-box-v3]:middle-child:border-x-0', '[&_.or-input-box-v3]:last-child:ml-[-1px]'];
 

package/dist/esm/v2/{OrConfirm-6cb17e00.js → OrConfirm-3ff773e4.js}

@@ -6,7 +6,7 @@ import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$2, a as ButtonColor } from './OrButton-a23ee9f0.js';
-import { _ as __vue_component__$3 } from './OrInput-1498c6f9.js';
+import { _ as __vue_component__$3 } from './OrInput-794bc2f6.js';
 import { _ as __vue_component__$1 } from './OrOverlay-868d1120.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrContextMenu-61421d56.js → OrContextMenu-247e4a05.js}

@@ -4,7 +4,7 @@ import './dom-aecadd9a.js';
 import { u as usePopoverState } from './usePopoverState-b92c698b.js';
 import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
-import { _ as __vue_component__$1 } from './OrMenu-70c93166.js';
+import { _ as __vue_component__$1 } from './OrMenu-f402e409.js';
 import { P as PopoverPlacement } from './OrPopover-58fefa76.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrDateFormat-cabd9f6b.js → OrDateFormat-d06e6a17.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-1fd30543.js';
-import './OrDateTimePickerTimeSelect-6a388872.js';
-import { f as formatDate } from './getTimePlaceholder-8f786f44.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-c15c0ff1.js';
+import './OrDateTimePickerTimeSelect-a122ae93.js';
+import { f as formatDate } from './getTimePlaceholder-06d57fcf.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const DateFormat = [

package/dist/esm/v2/{OrDatePicker-c7424f08.js → OrDatePicker-8590a3e0.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-1fd30543.js';
-import { _ as __vue_component__$1, a as __vue_component__$2, b as __vue_component__$3, c as __vue_component__$4, d as __vue_component__$5, e as __vue_component__$6 } from './OrDateTimePickerTimeSelect-6a388872.js';
-import './getTimePlaceholder-8f786f44.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-c15c0ff1.js';
+import { _ as __vue_component__$1, a as __vue_component__$2, b as __vue_component__$3, c as __vue_component__$4, d as __vue_component__$5, e as __vue_component__$6 } from './OrDateTimePickerTimeSelect-a122ae93.js';
+import './getTimePlaceholder-06d57fcf.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 import { _ as __vue_component__$7 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$8 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$a } from './OrIconButton-36b8fc18.js';
+import { _ as __vue_component__$a } from './OrIconButton-08d2913d.js';
 import { _ as __vue_component__$9 } from './OrIcon-a36250bf.js';
-import { _ as __vue_component__$b } from './OrInputBox-2ba5d5de.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
+import { _ as __vue_component__$b } from './OrInputBox-7dc5b9e9.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import { _ as __vue_component__$c } from './OrLabel-4a3d8904.js';
 import { _ as __vue_component__$d } from './OrPopover-58fefa76.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -29,6 +29,7 @@ const DatePickerPopover = [
 'w-[298px]'];
 
 var script = defineComponent({
+  name: 'OrDatePicker',
   components: {
     OrDateTimePickerDateControl: __vue_component__$1,
     OrDateTimePickerDateSelect: __vue_component__$2,
@@ -289,8 +290,8 @@ var __vue_render__ = function () {
     }
   }), _vm._v(" "), _c('OrPopover', {
     ref: "popover",
-    class: _vm.popoverStyles,
     attrs: {
+      "custom-styles": _vm.popoverStyles,
       "variant": 'auto',
       "bottom-sheet-props": {
         variant: 'basic'
@@ -305,8 +306,7 @@ var __vue_render__ = function () {
     }
   }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Date',
-      "selected": true
+      "label": "Date"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
     attrs: {

package/dist/esm/v2/{OrDateTimeFormat-d97cafe6.js → OrDateTimeFormat-958ac2b5.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import './OrDateTimePicker.vue_rollup-plugin-vue_script-1fd30543.js';
-import './OrDateTimePickerTimeSelect-6a388872.js';
-import { D as DateTimePickerTimeFormat, f as formatDate, a as formatTime } from './getTimePlaceholder-8f786f44.js';
+import './OrDateTimePicker.vue_rollup-plugin-vue_script-c15c0ff1.js';
+import './OrDateTimePickerTimeSelect-a122ae93.js';
+import { D as DateTimePickerTimeFormat, f as formatDate, a as formatTime } from './getTimePlaceholder-06d57fcf.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const DateTimeFormat = [

package/dist/esm/v2/{OrDateTimePicker-fb96f604.js → OrDateTimePicker-43e5c95b.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrDateTimePicker.vue_rollup-plugin-vue_script-1fd30543.js';
+import { s as script } from './OrDateTimePicker.vue_rollup-plugin-vue_script-c15c0ff1.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 /* script */
@@ -136,11 +136,11 @@ var __vue_render__ = function () {
     }
   }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Date'
+      "label": "Date"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Time'
+      "label": "Time"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
     attrs: {
@@ -199,11 +199,11 @@ var __vue_render__ = function () {
     }
   }, [_c('OrDateTimePickerPopoverHeader', [_c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Date'
+      "label": "Date"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
     attrs: {
-      "label": 'Time'
+      "label": "Time"
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
     attrs: {

package/dist/esm/v2/{OrDateTimePicker.vue_rollup-plugin-vue_script-1fd30543.js → OrDateTimePicker.vue_rollup-plugin-vue_script-c15c0ff1.js}

@@ -7,14 +7,14 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$8 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$9 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$b } from './OrIconButton-36b8fc18.js';
+import { _ as __vue_component__$b } from './OrIconButton-08d2913d.js';
 import { _ as __vue_component__$a } from './OrIcon-a36250bf.js';
-import { _ as __vue_component__$c } from './OrInputBox-2ba5d5de.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.js';
+import { _ as __vue_component__$c } from './OrInputBox-7dc5b9e9.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-4fde9829.js';
 import { _ as __vue_component__$d } from './OrLabel-4a3d8904.js';
 import { _ as __vue_component__$e } from './OrPopover-58fefa76.js';
-import { _ as __vue_component__, a as __vue_component__$1, b as __vue_component__$2, c as __vue_component__$3, d as __vue_component__$4, e as __vue_component__$5, f as __vue_component__$6, g as __vue_component__$7 } from './OrDateTimePickerTimeSelect-6a388872.js';
-import { D as DateTimePickerTimeFormat } from './getTimePlaceholder-8f786f44.js';
+import { _ as __vue_component__, a as __vue_component__$1, b as __vue_component__$2, c as __vue_component__$3, d as __vue_component__$4, e as __vue_component__$5, f as __vue_component__$6, g as __vue_component__$7 } from './OrDateTimePickerTimeSelect-a122ae93.js';
+import { D as DateTimePickerTimeFormat } from './getTimePlaceholder-06d57fcf.js';
 import { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 
 const DateTimePicker = [
@@ -28,6 +28,7 @@ const DateTimePickerDatePopover = [
 const DateTimePickerTimePopover = [];
 
 var script = defineComponent({
+  name: 'OrDateTimePicker',
   components: {
     OrDateTimePickerDateControl: __vue_component__,
     OrDateTimePickerDateSelect: __vue_component__$1,

package/dist/esm/v2/{OrDateTimePickerTimeSelect-6a388872.js → OrDateTimePickerTimeSelect-a122ae93.js}

@@ -4,14 +4,14 @@ 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-8f786f44.js';
+import { g as getDatePlaceholder, f as formatDate, D as DateTimePickerTimeFormat, b as getTimePlaceholder, a as formatTime } from './getTimePlaceholder-06d57fcf.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';
-import { _ as __vue_component__$b } from './OrIconButton-36b8fc18.js';
+import { _ as __vue_component__$b } from './OrIconButton-08d2913d.js';
 import { _ as __vue_component__$a } from './OrIcon-a36250bf.js';
 import { _ as __vue_component__$d } from './OrMenuItem-61403f7a.js';
-import { _ as __vue_component__$c } from './OrMenu-70c93166.js';
+import { _ as __vue_component__$c } from './OrMenu-f402e409.js';
 import './OrPopover-58fefa76.js';
 
 const DateTimePickerDateControl = [
@@ -26,6 +26,7 @@ const DateTimePickerDateControlPlaceholder = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$7 = defineComponent({
+  name: 'OrDateTimePickerDateControl',
   model: {
     prop: 'modelValue',
     event: 'update:modelValue'
@@ -125,12 +126,12 @@ const DateTimePickerDateSelectButtonGroup = [
 // Box
 'h-[262px]',
 // Spacing
-'mx-[-2px]', 'my-[-2px]'];
+'gap-xs'];
 const DateTimePickerDateSelectButtonGroupWeekdayItem = [
 // Layout
 'layout-row justify-center',
 // Spacing
-'mx-[2px]', 'my-[2px]', 'px-sm', 'py-sm',
+'px-sm', 'py-sm',
 // Interactivity
 'interactivity-none',
 // Typography
@@ -141,21 +142,15 @@ const DateTimePickerDateSelectButtonGroupDateItem = [
 // Box
 '!min-w-fit',
 // Spacing
-'mx-[2px]', 'my-[2px]', '!px-sm', '!py-sm',
+'!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
   },
@@ -175,14 +170,6 @@ var script$6 = defineComponent({
     dateFilter: {
       type: Function,
       default: undefined
-    },
-    rangeStart: {
-      type: Date,
-      default: undefined
-    },
-    rangeEnd: {
-      type: Date,
-      default: undefined
     }
   },
   emits: ['update:modelValue'],
@@ -196,7 +183,6 @@ 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')
@@ -244,7 +230,6 @@ var script$6 = defineComponent({
       buttonGroupWeekdayItemStyles,
       buttonGroupDateItemStyles,
       buttonGroupCurrentDateItemStyles,
-      buttonGroupInRangeDateItemStyles,
       proxyModelValue,
       dayOptions,
       currentDate,
@@ -276,7 +261,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[_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),
+      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),
       attrs: {
         "variant": Number(value) === Number(_vm.proxyModelValue) ? 'contained' : 'text',
         "color": Number(value) === Number(_vm.proxyModelValue) ? 'primary' : 'inherit',
@@ -315,19 +300,16 @@ const __vue_component__$6 = /*#__PURE__*/normalizeComponent({
 const DateTimePickerMobileControl = [
 // Layout
 'layout-column',
-// Interactivity
-'interactivity-auto',
 // Spacing
-'gap-xs',
-// Theme
-'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
-// Theme (selected)
-'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark'];
+'gap-xs'];
 const DateTimePickerMobileControlContent = [
 // Typography
-'typography-headline-1'];
+'typography-headline-1',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$5 = defineComponent({
+  name: 'OrDateTimePickerMobileControl',
   components: {
     OrLabel: __vue_component__$9
   },
@@ -335,10 +317,6 @@ var script$5 = defineComponent({
     label: {
       type: String,
       required: true
-    },
-    selected: {
-      type: Boolean,
-      default: false
     }
   },
   expose: ['root'],
@@ -366,10 +344,7 @@ var __vue_render__$5 = function () {
   var _c = _vm._self._c || _h;
   return _c('div', {
     ref: "root",
-    class: _vm.rootStyles,
-    attrs: {
-      "selected": _vm.selected ? '' : null
-    }
+    class: _vm.rootStyles
   }, [_c('OrLabel', [_vm._v(_vm._s(_vm.label))]), _vm._v(" "), _c('div', {
     class: _vm.contentStyles
   }, [_vm._t("default")], 2)], 1);
@@ -402,6 +377,7 @@ const DateTimePickerMonthSelect = [
 'px-md', 'py-md', 'gap-md'];
 
 var script$4 = defineComponent({
+  name: 'OrDateTimePickerMonthSelect',
   components: {
     OrButton: __vue_component__$8,
     OrIcon: __vue_component__$a,
@@ -663,6 +639,7 @@ 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
   },
@@ -748,6 +725,7 @@ const DateTimePickerPopoverHeader = [
 'px-md', 'py-md', 'gap-xl'];
 
 var script$2 = defineComponent({
+  name: 'OrDateTimePickerPopoverHeader',
   expose: ['root'],
   setup() {
     // Refs
@@ -807,6 +785,7 @@ const DateTimePickerTimeControlPlaceholder = [
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
 var script$1 = defineComponent({
+  name: 'OrDateTimePickerTimeControl',
   model: {
     prop: 'modelValue',
     event: 'update:modelValue'
@@ -922,6 +901,7 @@ const DateTimePickerTimeSelectButtonGroupItem = [
 'typography-caption-regular'];
 
 var script = defineComponent({
+  name: 'OrDateTimePickerTimeSelect',
   components: {
     OrButton: __vue_component__$8
   },

package/dist/esm/v2/{OrIconButton-36b8fc18.js → OrIconButton-08d2913d.js}

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed, isVue3 } from 'vue-demi';
-import { _ as __vue_component__$1, I as IconSize } from './OrIcon-a36250bf.js';
+import { defineComponent, ref, toRefs, computed, isVue3 } from 'vue-demi';
+import { _ as __vue_component__$1, I as IconSize, a as IconVariant } from './OrIcon-a36250bf.js';
 import { _ as __vue_component__$2 } from './OrTooltip-742ee269.js';
 import './OrPopover-58fefa76.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -105,12 +105,26 @@ var script = defineComponent({
   setup(props) {
     // Refs
     const root = ref();
+    const {
+      icon,
+      size
+    } = toRefs(props);
+    const iconProps = computed(() => {
+      return {
+        size: size.value,
+        variant: IconVariant.Inherit,
+        ...(typeof icon.value === 'string' ? {
+          icon: icon.value
+        } : icon.value)
+      };
+    });
     // Styles
     const rootStyles = computed(() => ['or-icon-button-v3', ...IconButton, ...IconButtonColors[props.color]]);
     return {
       root,
       rootStyles,
-      isVue3
+      isVue3,
+      iconProps
     };
   }
 });
@@ -151,14 +165,7 @@ var __vue_render__ = function () {
     blur: function (e) {
       return _vm.$emit('blur', e);
     }
-  })), [_c('OrIcon', _vm._b({
-    attrs: {
-      "variant": 'inherit',
-      "size": _vm.size
-    }
-  }, 'OrIcon', typeof _vm.icon === 'string' ? {
-    icon: _vm.icon
-  } : _vm.icon, false))], 1)]);
+  })), [_c('OrIcon', _vm._b({}, 'OrIcon', _vm.iconProps, false))], 1)]);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/esm/v2/{OrInlineInput-083c8263.js → OrInlineInput-b2e9bf37.js}

@@ -8,7 +8,7 @@ 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 './OrIconButton-36b8fc18.js';
+import { _ as __vue_component__$3 } from './OrIconButton-08d2913d.js';
 import { _ as __vue_component__$4, I as InlineInputBoxSize } from './OrInlineInputBox-19b49ee6.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrInlineTextarea-4219ba3b.js → OrInlineTextarea-5f6d4064.js}

@@ -8,7 +8,7 @@ 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 './OrIconButton-36b8fc18.js';
+import { _ as __vue_component__$3 } from './OrIconButton-08d2913d.js';
 import { _ as __vue_component__$4 } from './OrInlineInputBox-19b49ee6.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

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

@@ -8,10 +8,10 @@ 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__$4 } from './OrIconButton-36b8fc18.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-2ba5d5de.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-bebba826.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__$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-2ba5d5de.js → OrInputBox-7dc5b9e9.js}

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

package/dist/esm/v2/{OrInputBox.vue_rollup-plugin-vue_script-bebba826.js → OrInputBox.vue_rollup-plugin-vue_script-4fde9829.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-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',
+  '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',
   // Theme (read-only)
-  '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',
+  'read-only:theme-background-primary-translucent', 'dark:read-only:theme-background-primary-translucent-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-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',
+  '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',
   // Theme (invalid, focus)
-  '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',
+  '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',
   // 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/{OrMenu-70c93166.js → OrMenu-f402e409.js}

@@ -34,6 +34,11 @@ var script = defineComponent({
     offset: {
       type: [Number, Object, Function],
       default: undefined
+    },
+    // TODO: Remove after migration to Vue 3
+    additionalStyles: {
+      type: Array,
+      default: () => []
     }
   },
   emits: ['update:state', 'open', 'close'],
@@ -97,7 +102,7 @@ var __vue_render__ = function () {
     }
   }, [_c('div', _vm._b({
     ref: "root",
-    class: _vm.rootStyles,
+    class: [_vm.rootStyles].concat(_vm.additionalStyles),
     on: {
       "click": function ($event) {
         $event.stopPropagation();

package/dist/esm/v2/{OrModal-db8cd96e.js → OrModal-dbb90626.js}

@@ -6,7 +6,7 @@ import '@onereach/styles/tailwind/plugins/core';
 import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$5 } from './OrOverlay-868d1120.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
-import { _ as __vue_component__$4 } from './OrIconButton-36b8fc18.js';
+import { _ as __vue_component__$4 } from './OrIconButton-08d2913d.js';
 
 const ModalContent = [
 // Overflow

package/dist/esm/v2/{OrNotification-339051be.js → OrNotification-f8f0b678.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { _ as __vue_component__$2 } from './OrIconButton-36b8fc18.js';
+import { _ as __vue_component__$2 } from './OrIconButton-08d2913d.js';
 import { _ as __vue_component__$1 } from './OrIcon-a36250bf.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrPagination-a301a29f.js → OrPagination-4ca1f4b0.js}

@@ -7,7 +7,7 @@ import '@onereach/styles/tailwind.config.json';
 import { _ as __vue_component__$1 } from './OrButton-a23ee9f0.js';
 import { _ as __vue_component__$2 } from './OrIcon-a36250bf.js';
 import { _ as __vue_component__$4 } from './OrMenuItem-61403f7a.js';
-import { _ as __vue_component__$3 } from './OrMenu-70c93166.js';
+import { _ as __vue_component__$3 } from './OrMenu-f402e409.js';
 import './OrPopover-58fefa76.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
@@ -274,8 +274,8 @@ var __vue_render__ = function () {
     }
   })], 1), _vm._v(" "), _c('OrMenu', {
     ref: "limitMenu",
-    class: ['min-w-[60px]'],
     attrs: {
+      "additional-styles": ['min-w-[60px]'],
       "trigger": _vm.limitButtonRoot,
       "placement": 'top'
     }

package/dist/esm/v2/{OrRichTextEditor-9663cfb3.js → OrRichTextEditor-b12605d3.js}

@@ -16,13 +16,13 @@ import Blockquote from '@tiptap/extension-blockquote';
 import Link from '@tiptap/extension-link';
 import Highlight from '@tiptap/extension-highlight';
 import Underline from '@tiptap/extension-underline';
-import { _ as __vue_component__$1 } from './OrIconButton-36b8fc18.js';
+import { _ as __vue_component__$1 } from './OrIconButton-08d2913d.js';
 import { _ as __vue_component__$2 } from './OrLabel-4a3d8904.js';
-import { _ as __vue_component__$4 } from './OrMenu-70c93166.js';
+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-db8cd96e.js';
-import { _ as __vue_component__$6 } from './OrInput-1498c6f9.js';
+import { _ as __vue_component__$5 } from './OrModal-dbb90626.js';
+import { _ as __vue_component__$6 } from './OrInput-794bc2f6.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-1', 'focus-within:theme-border-1-primary', 'focus-within:theme-outline-2-primary',
+'border-outline', 'focus-within:theme-background-primary-translucent', 'focus-within:theme-border-1-primary', 'focus-within:theme-outline-2-primary',
 // Sizing
 'border-1', 'rounded-md', 'w-full'];
 const ToolbarContainer = [