@onereach/ui-components 4.6.2 → 4.6.3-beta.2784.0

package/dist/bundled/v2/{OrDateTimePickerMonthSelect-75089f80.js → OrDateTimePickerMonthSelect-30f79990.js}

@@ -47,7 +47,7 @@ var script$2 = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-date-control', ...DateTimePickerDateControl]);
+    const rootStyles = computed(() => ['or-date-time-picker-date-control-v3', ...DateTimePickerDateControl]);
     const placeholderStyles = computed(() => [...DateTimePickerDateControlPlaceholder]);
     // State
     const proxyModelValue = computed({
@@ -184,7 +184,7 @@ var script$1 = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-date-select', ...DateTimePickerDateSelect]);
+    const rootStyles = computed(() => ['or-date-time-picker-date-select-v3', ...DateTimePickerDateSelect]);
     const buttonGroupStyles = computed(() => [...DateTimePickerDateSelectButtonGroup]);
     const buttonGroupWeekdayItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupWeekdayItem]);
     const buttonGroupDateItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupDateItem]);
@@ -373,7 +373,7 @@ var script = defineComponent({
       return (_a = monthMenu.value) === null || _a === void 0 ? void 0 : _a.state;
     });
     // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-month-select', ...DateTimePickerMonthSelect]);
+    const rootStyles = computed(() => ['or-date-time-picker-month-select-v3', ...DateTimePickerMonthSelect]);
     // State
     const proxyModelValue = computed({
       get: () => {

package/dist/bundled/v2/{OrDateTimePickerPopoverHeader-7c87f38a.js → OrDateTimePickerPopoverHeader-61faaa61.js}

@@ -30,7 +30,7 @@ var script$2 = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-mobile-control', ...DateTimePickerMobileControl]);
+    const rootStyles = computed(() => ['or-date-time-picker-mobile-control-v3', ...DateTimePickerMobileControl]);
     const contentStyles = computed(() => [...DateTimePickerMobileControlContent]);
     return {
       root,
@@ -98,7 +98,7 @@ var script$1 = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-popover-footer', ...DateTimePickerPopoverFooter]);
+    const rootStyles = computed(() => ['or-date-time-picker-popover-footer-v3', ...DateTimePickerPopoverFooter]);
     return {
       root,
       rootStyles
@@ -174,7 +174,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-popover-header', ...DateTimePickerPopoverHeader]);
+    const rootStyles = computed(() => ['or-date-time-picker-popover-header-v3', ...DateTimePickerPopoverHeader]);
     return {
       root,
       rootStyles

package/dist/bundled/v2/{OrDateTimePickerTimeSelect-3d0ef650.js → OrDateTimePickerTimeSelect-2a5772a9.js}

@@ -43,7 +43,7 @@ var script$1 = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-time-control', ...DateTimePickerTimeControl]);
+    const rootStyles = computed(() => ['or-date-time-picker-time-control-v3', ...DateTimePickerTimeControl]);
     const placeholderStyles = computed(() => [...DateTimePickerTimeControlPlaceholder]);
     // State
     const proxyModelValue = computed({
@@ -172,7 +172,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-time-select', ...DateTimePickerTimeSelect]);
+    const rootStyles = computed(() => ['or-date-time-picker-time-select-v3', ...DateTimePickerTimeSelect]);
     const buttonGroupStyles = computed(() => [...DateTimePickerTimeSelectButtonGroup]);
     const buttonGroupItemStyles = computed(() => [...DateTimePickerTimeSelectButtonGroupItem]);
     // State

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-75089f80.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-7c87f38a.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-30f79990.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-61faaa61.js';
 import { DatePicker, DatePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -142,7 +142,7 @@ var script = defineComponent({
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
     // Styles
-    const rootStyles = computed(() => ['or-date-picker', ...DatePicker]);
+    const rootStyles = computed(() => ['or-date-picker-v3', ...DatePicker]);
     const popoverStyles = computed(() => [...DatePickerPopover]);
     // State
     const initialModelValue = useCurrentDate();
@@ -254,7 +254,31 @@ var __vue_render__ = function () {
       "invalid": !!_vm.error,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
-    }
+    },
+    scopedSlots: _vm._u([{
+      key: "addon",
+      fn: function () {
+        return [_vm.modelValue ? [_c('OrIconButton', {
+          attrs: {
+            "icon": 'close',
+            "color": 'inherit',
+            "disabled": _vm.readonly || _vm.disabled
+          },
+          on: {
+            "click": function ($event) {
+              $event.stopPropagation();
+              return _vm.$emit('update:modelValue', undefined);
+            }
+          }
+        })] : [_c('OrIcon', {
+          attrs: {
+            "icon": 'calendar_month',
+            "variant": 'outlined'
+          }
+        })]];
+      },
+      proxy: true
+    }])
   }, [_c('OrDateTimePickerDateControl', {
     directives: [{
       name: "dropdown-open",
@@ -337,26 +361,7 @@ var __vue_render__ = function () {
     }
   })], 1), _vm._v(" "), _c('div', {
     class: ['grow']
-  }), _vm._v(" "), _c('div', {
-    class: ['layout-inline-row']
-  }, [_vm.modelValue ? [_c('OrIconButton', {
-    attrs: {
-      "icon": 'close',
-      "color": 'inherit',
-      "disabled": _vm.readonly || _vm.disabled
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-        return _vm.$emit('update:modelValue', undefined);
-      }
-    }
-  })] : [_c('OrIcon', {
-    attrs: {
-      "icon": 'calendar_month',
-      "variant": 'outlined'
-    }
-  })]], 2)], 1), _vm._v(" "), !_vm.error ? [_vm.hint ? [_c('OrHint', {
+  })], 1), _vm._v(" "), !_vm.error ? [_vm.hint ? [_c('OrHint', {
     attrs: {
       "disabled": _vm.disabled
     }

package/dist/bundled/v2/components/OrDatePickerV3/index.js

@@ -2,7 +2,7 @@ export { default as OrDatePickerV3 } from './OrDatePicker.js';
 export { InputBoxSize as DatePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-75089f80.js';
+import '../../OrDateTimePickerMonthSelect-30f79990.js';
 import '../OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../OrButtonV3/OrButton.js';
@@ -38,7 +38,7 @@ import '../OrMenuV3/OrMenu.js';
 import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-7c87f38a.js';
+import '../../OrDateTimePickerPopoverHeader-61faaa61.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from './hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-75089f80.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-7c87f38a.js';
-import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-3d0ef650.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-30f79990.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-61faaa61.js';
+import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-2a5772a9.js';
 import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -159,7 +159,7 @@ var script = defineComponent({
       return (_a = timePopover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
     // Styles
-    const rootStyles = computed(() => ['or-date-time-picker', ...DateTimePicker]);
+    const rootStyles = computed(() => ['or-date-time-picker-v3', ...DateTimePicker]);
     const datePopoverStyles = computed(() => [...DateTimePickerDatePopover]);
     const timePopoverStyles = computed(() => [...DateTimePickerTimePopover]);
     // State
@@ -305,7 +305,31 @@ var __vue_render__ = function () {
       "invalid": !!_vm.error,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
-    }
+    },
+    scopedSlots: _vm._u([{
+      key: "addon",
+      fn: function () {
+        return [_vm.modelValue ? [_c('OrIconButton', {
+          attrs: {
+            "icon": 'close',
+            "color": 'inherit',
+            "disabled": _vm.readonly || _vm.disabled
+          },
+          on: {
+            "click": function ($event) {
+              $event.stopPropagation();
+              return _vm.$emit('update:modelValue', undefined);
+            }
+          }
+        })] : [_c('OrIcon', {
+          attrs: {
+            "icon": 'calendar_month',
+            "variant": 'outlined'
+          }
+        })]];
+      },
+      proxy: true
+    }])
   }, [_c('OrDateTimePickerDateControl', {
     directives: [{
       name: "dropdown-open",
@@ -464,26 +488,7 @@ var __vue_render__ = function () {
     }
   })], 1), _vm._v(" "), _c('div', {
     class: ['grow']
-  }), _vm._v(" "), _c('div', {
-    class: ['layout-inline-row']
-  }, [_vm.modelValue ? [_c('OrIconButton', {
-    attrs: {
-      "icon": 'close',
-      "color": 'inherit',
-      "disabled": _vm.readonly || _vm.disabled
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-        return _vm.$emit('update:modelValue', undefined);
-      }
-    }
-  })] : [_c('OrIcon', {
-    attrs: {
-      "icon": 'calendar_month',
-      "variant": 'outlined'
-    }
-  })]], 2)], 1), _vm._v(" "), !_vm.error ? [_vm.hint ? [_c('OrHint', {
+  })], 1), _vm._v(" "), !_vm.error ? [_vm.hint ? [_c('OrHint', {
     attrs: {
       "disabled": _vm.disabled
     }

package/dist/bundled/v2/components/OrDateTimePickerV3/index.js

@@ -2,7 +2,7 @@ export { default as OrDateTimePickerV3 } from './OrDateTimePicker.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import './hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-75089f80.js';
+import '../../OrDateTimePickerMonthSelect-30f79990.js';
 import './hooks/useDatePlaceholder.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../OrButtonV3/OrButton.js';
@@ -38,11 +38,11 @@ import '../OrMenuV3/OrMenu.js';
 import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-7c87f38a.js';
+import '../../OrDateTimePickerPopoverHeader-61faaa61.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
-import '../../OrDateTimePickerTimeSelect-3d0ef650.js';
+import '../../OrDateTimePickerTimeSelect-2a5772a9.js';
 import './hooks/useTimePlaceholder.js';
 import './styles.js';
 import '../OrErrorV3/OrError.js';

package/dist/bundled/v2/components/OrInputBoxV3/OrInputBox.js

@@ -1,10 +1,88 @@
 import { defineComponent, ref, computed } from 'vue-demi';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import { InputBoxVariant, InputBoxSize } from './props.js';
 import { InputBoxRoot, InputBoxRootVariants, InputBoxRootSizes } from './styles.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+
+const InputBoxAddon = [
+// Layout
+'layout-inline-row',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+var script$1 = defineComponent({
+  name: 'OrInputBoxAddon',
+  props: {
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-input-box-addon-v3', ...InputBoxAddon]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+/* script */
+const __vue_script__$1 = script$1;
+
+/* template */
+var __vue_render__$1 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "invalid": _vm.invalid ? '' : null,
+      "readonly": _vm.readonly ? '' : null,
+      "disabled": _vm.disabled ? '' : null
+    }
+  }, [_vm._t("default")], 2);
+};
+var __vue_staticRenderFns__$1 = [];
+
+/* style */
+const __vue_inject_styles__$1 = undefined;
+/* scoped */
+const __vue_scope_id__$1 = undefined;
+/* module identifier */
+const __vue_module_identifier__$1 = undefined;
+/* functional template */
+const __vue_is_functional_template__$1 = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__$1 = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__$1,
+  staticRenderFns: __vue_staticRenderFns__$1
+}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);
+var OrInputBoxAddon = __vue_component__$1;
 
 var script = defineComponent({
   name: 'OrInputBox',
+  components: {
+    OrInputBoxAddon
+  },
   props: {
     variant: {
       type: String,
@@ -56,7 +134,13 @@ var __vue_render__ = function () {
       "readonly": _vm.readonly ? '' : null,
       "disabled": _vm.disabled ? '' : null
     }
-  }, [_vm._t("default")], 2);
+  }, [_vm._t("default"), _vm._v(" "), _vm.$slots.addon ? [_c('OrInputBoxAddon', {
+    attrs: {
+      "invalid": _vm.invalid,
+      "readonly": _vm.readonly,
+      "disabled": _vm.disabled
+    }
+  }, [_vm._t("addon")], 2)] : _vm._e()], 2);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrInputBoxV3/index.js

@@ -1,5 +1,5 @@
 export { default as OrInputBoxV3 } from './OrInputBox.js';
 export { InputBoxSize, InputBoxVariant } from './props.js';
 import 'vue-demi';
-import './styles.js';
 import '../../normalize-component-6e8e3d80.js';
+import './styles.js';

package/dist/bundled/v2/components/OrInputV3/OrInput.js

@@ -168,7 +168,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-10156a60]{min-width:0;background:0 0;outline:0}input[type=number][data-v-10156a60]::-webkit-inner-spin-button{display:none}input[type=search][data-v-10156a60]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-75bfda1e]{min-width:0;background:0 0;outline:0}input[type=number][data-v-75bfda1e]::-webkit-inner-spin-button{display:none}input[type=search][data-v-75bfda1e]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -202,7 +202,52 @@ var __vue_render__ = function () {
       "invalid": !!_vm.error,
       "readonly": _vm.readonly || _vm.loading,
       "disabled": _vm.disabled
-    }
+    },
+    scopedSlots: _vm._u([{
+      key: "addon",
+      fn: function () {
+        return [_vm.loading ? [_c('OrLoader', {
+          attrs: {
+            "variant": 'circular',
+            "color": 'primary',
+            "size": _vm.isMobile ? 'm' : 's'
+          }
+        })] : [_vm.type === 'password' ? [_c('OrIconButton', {
+          attrs: {
+            "icon": {
+              icon: _vm.disclosed ? 'visibility_off' : 'visibility',
+              variant: 'filled'
+            },
+            "color": 'inherit',
+            "disabled": _vm.disabled
+          },
+          on: {
+            "click": function ($event) {
+              $event.stopPropagation();
+              _vm.disclosed = !_vm.disclosed;
+            }
+          }
+        })] : _vm._e(), _vm._v(" "), _vm.type === 'search' ? [_vm.modelValue ? [_c('OrIconButton', {
+          attrs: {
+            "icon": 'close',
+            "color": 'inherit',
+            "disabled": _vm.readonly || _vm.disabled
+          },
+          on: {
+            "click": function ($event) {
+              $event.stopPropagation();
+              return _vm.$emit('update:modelValue', '');
+            }
+          }
+        })] : [_c('OrIcon', {
+          attrs: {
+            "icon": 'search',
+            "variant": 'outlined'
+          }
+        })]] : _vm._e()]];
+      },
+      proxy: true
+    }])
   }, [(_vm.type === 'password' && _vm.disclosed ? 'text' : _vm.type) === 'checkbox' ? _c('input', _vm._b({
     directives: [{
       name: "model",
@@ -330,47 +375,7 @@ var __vue_render__ = function () {
         _vm.proxyModelValue = $event.target.value;
       }
     }
-  }, 'input', _vm.controlAttributes, false)), _vm._v(" "), _c('div', {
-    class: ['layout-inline-row']
-  }, [_vm.loading ? [_c('OrLoader', {
-    attrs: {
-      "variant": 'circular',
-      "color": 'primary',
-      "size": _vm.isMobile ? 'm' : 's'
-    }
-  })] : [_vm.type === 'password' ? [_c('OrIconButton', {
-    attrs: {
-      "icon": {
-        icon: _vm.disclosed ? 'visibility_off' : 'visibility',
-        variant: 'filled'
-      },
-      "color": 'inherit',
-      "disabled": _vm.disabled
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-        _vm.disclosed = !_vm.disclosed;
-      }
-    }
-  })] : _vm._e(), _vm._v(" "), _vm.type === 'search' ? [_vm.modelValue ? [_c('OrIconButton', {
-    attrs: {
-      "icon": 'close',
-      "color": 'inherit',
-      "disabled": _vm.readonly || _vm.disabled
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-        return _vm.$emit('update:modelValue', '');
-      }
-    }
-  })] : [_c('OrIcon', {
-    attrs: {
-      "icon": 'search',
-      "variant": 'outlined'
-    }
-  })]] : _vm._e()]], 2)]), _vm._v(" "), _c('div', {
+  }, 'input', _vm.controlAttributes, false))]), _vm._v(" "), _c('div', {
     directives: [{
       name: "show",
       rawName: "v-show",
@@ -415,7 +420,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-10156a60";
+const __vue_scope_id__ = "data-v-75bfda1e";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/components/OrTimePickerV3/OrTimePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-7c87f38a.js';
-import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-3d0ef650.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-61faaa61.js';
+import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-2a5772a9.js';
 import { TimePicker, TimePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -133,7 +133,7 @@ var script = defineComponent({
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
     // Styles
-    const rootStyles = computed(() => ['or-time-picker', ...TimePicker]);
+    const rootStyles = computed(() => ['or-time-picker-v3', ...TimePicker]);
     const popoverStyles = computed(() => [...TimePickerPopover]);
     // State
     const initialModelValue = useCurrentDate();
@@ -245,7 +245,31 @@ var __vue_render__ = function () {
       "invalid": !!_vm.error,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
-    }
+    },
+    scopedSlots: _vm._u([{
+      key: "addon",
+      fn: function () {
+        return [_vm.modelValue ? [_c('OrIconButton', {
+          attrs: {
+            "icon": 'close',
+            "color": 'inherit',
+            "disabled": _vm.readonly || _vm.disabled
+          },
+          on: {
+            "click": function ($event) {
+              $event.stopPropagation();
+              return _vm.$emit('update:modelValue', undefined);
+            }
+          }
+        })] : [_c('OrIcon', {
+          attrs: {
+            "icon": 'calendar_month',
+            "variant": 'outlined'
+          }
+        })]];
+      },
+      proxy: true
+    }])
   }, [_c('OrDateTimePickerTimeControl', {
     directives: [{
       name: "dropdown-open",
@@ -316,26 +340,7 @@ var __vue_render__ = function () {
     }
   })], 1), _vm._v(" "), _c('div', {
     class: ['grow']
-  }), _vm._v(" "), _c('div', {
-    class: ['layout-inline-row']
-  }, [_vm.modelValue ? [_c('OrIconButton', {
-    attrs: {
-      "icon": 'close',
-      "color": 'inherit',
-      "disabled": _vm.readonly || _vm.disabled
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-        return _vm.$emit('update:modelValue', undefined);
-      }
-    }
-  })] : [_c('OrIcon', {
-    attrs: {
-      "icon": 'calendar_month',
-      "variant": 'outlined'
-    }
-  })]], 2)], 1), _vm._v(" "), !_vm.error ? [_vm.hint ? [_c('OrHint', {
+  })], 1), _vm._v(" "), !_vm.error ? [_vm.hint ? [_c('OrHint', {
     attrs: {
       "disabled": _vm.disabled
     }

package/dist/bundled/v2/components/OrTimePickerV3/index.js

@@ -2,7 +2,7 @@ export { default as OrTimePickerV3 } from './OrTimePicker.js';
 export { InputBoxSize as TimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../../OrDateTimePickerPopoverHeader-7c87f38a.js';
+import '../../OrDateTimePickerPopoverHeader-61faaa61.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
@@ -14,7 +14,7 @@ import '../OrLoaderV3/OrLoader.js';
 import '@vueuse/core';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
-import '../../OrDateTimePickerTimeSelect-3d0ef650.js';
+import '../../OrDateTimePickerTimeSelect-2a5772a9.js';
 import '../OrDateTimePickerV3/hooks/useTimePlaceholder.js';
 import './styles.js';
 import '../OrErrorV3/OrError.js';

package/dist/bundled/v2/components/index.js

@@ -219,14 +219,14 @@ import './OrCombinedInputV3/styles.js';
 import '../index-968c331a.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../OrDateTimePickerMonthSelect-75089f80.js';
+import '../OrDateTimePickerMonthSelect-30f79990.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
-import '../OrDateTimePickerPopoverHeader-7c87f38a.js';
+import '../OrDateTimePickerPopoverHeader-61faaa61.js';
 import './OrDatePickerV3/styles.js';
 import '../directives/dropdown-close.js';
 import '../directives/dropdown-open.js';
 import 'lodash/padStart';
-import '../OrDateTimePickerTimeSelect-3d0ef650.js';
+import '../OrDateTimePickerTimeSelect-2a5772a9.js';
 import './OrDateTimePickerV3/hooks/useTimePlaceholder.js';
 import './OrDateTimePickerV3/styles.js';
 import './OrEmptyStateV3/styles.js';

package/dist/bundled/v2/index.js

@@ -194,16 +194,16 @@ import './components/OrCombinedInputV3/styles.js';
 import './index-968c331a.js';
 import './components/OrConfirmV3/styles.js';
 import './components/OrDateTimePickerV3/hooks/useCurrentDate.js';
-import './OrDateTimePickerMonthSelect-75089f80.js';
+import './OrDateTimePickerMonthSelect-30f79990.js';
 import './components/OrDateTimePickerV3/hooks/useDatePlaceholder.js';
-import './OrDateTimePickerPopoverHeader-7c87f38a.js';
+import './OrDateTimePickerPopoverHeader-61faaa61.js';
 import './components/OrDatePickerV3/styles.js';
 import 'lodash/padStart';
 import './utils/functions/dom.js';
 import 'lodash/isElement';
 import 'lodash/get';
 import './utils/functions/px-to-rem.js';
-import './OrDateTimePickerTimeSelect-3d0ef650.js';
+import './OrDateTimePickerTimeSelect-2a5772a9.js';
 import './components/OrDateTimePickerV3/hooks/useTimePlaceholder.js';
 import './components/OrDateTimePickerV3/styles.js';
 import './components/OrEmptyStateV3/styles.js';

package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-34390dfe.js → OrCardCollection.vue_vue_type_script_lang-f2d222a5.js}

@@ -11,7 +11,7 @@ import './components/OrMenuItemV3/OrMenuItem.js';
 import { s as script$5 } from './OrMenuItem.vue_vue_type_script_lang-b338d68a.js';
 import './components/OrIconV3/OrIcon.js';
 import './components/OrSearchV3/OrSearch.js';
-import { s as script$7 } from './OrSearch.vue_vue_type_script_lang-0bcc597c.js';
+import { s as script$7 } from './OrSearch.vue_vue_type_script_lang-940d8e1f.js';
 import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-5bba9f3f.js';
 import { s as script$6 } from './OrIcon.vue_vue_type_script_lang-73f9cc63.js';