@onereach/ui-components 4.6.3-beta.2791.0 → 4.6.3

package/dist/bundled/v3/{OrBottomSheet.vue_vue_type_script_lang-abb955a4.js → OrBottomSheet.vue_vue_type_script_lang-a81b2abb.js}

@@ -1,10 +1,9 @@
 import { usePointerSwipe, onClickOutside, SwipeDirection } from '@vueuse/core';
-import { defineComponent, ref, computed, toRef, watch, unref } from 'vue-demi';
+import { defineComponent, ref, computed, watch, unref } from 'vue-demi';
 import { BottomSheetVariant } from './components/OrBottomSheetV3/props.js';
 import { BottomSheet, BottomSheetVariants, BottomSheetHandle, BottomSheetHeader } from './components/OrBottomSheetV3/styles.js';
 import './components/OrOverlayV3/OrOverlay.js';
-import { s as script$1 } from './OrOverlay.vue_vue_type_script_lang-29ff6fd8.js';
-import { usePopoverState } from './hooks/usePopoverState.js';
+import { s as script$1 } from './OrOverlay.vue_vue_type_script_lang-86c7b93a.js';
 
 var script = defineComponent({
   name: 'OrBottomSheet',
@@ -13,17 +12,13 @@ var script = defineComponent({
   },
   inheritAttrs: false,
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
     variant: {
       type: String,
       default: BottomSheetVariant.Advanced
     }
   },
-  emits: ['update:state', 'open', 'close'],
-  expose: ['root', 'state', 'open', 'close', 'toggle'],
+  emits: ['update:state', 'update:state:open', 'update:state:fullscreen', 'update:state:closed', 'update:state:closed-automatically'],
+  expose: ['root', 'state', 'isOpen', 'isFullscreen', 'isClosed', 'open', 'close'],
   setup(props, context) {
     // Refs
     const root = ref();
@@ -32,18 +27,43 @@ var script = defineComponent({
     const handleStyles = computed(() => [...BottomSheetHandle]);
     const headerStyles = computed(() => [...BottomSheetHeader]);
     // State
-    const {
-      state,
-      open,
-      close,
-      toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context);
-    const fullscreen = ref(false);
+    const state = ref('closed');
+    const isOpen = computed(() => state.value === 'open');
+    const isFullscreen = computed(() => state.value === 'fullscreen');
+    const isClosed = computed(() => state.value === 'closed');
+    // Events
     watch(state, value => {
-      if (value === 'closed') {
-        fullscreen.value = false;
+      context.emit('update:state', value);
+      switch (value) {
+        case 'open':
+          context.emit('update:state:open');
+          break;
+        case 'fullscreen':
+          context.emit('update:state:fullscreen');
+          break;
+        case 'closed':
+          context.emit('update:state:closed');
+          break;
       }
     });
+    // Methods
+    function open() {
+      state.value = 'open';
+    }
+    function close() {
+      let auto = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      state.value = 'closed';
+      if (auto) {
+        context.emit('update:state:closed-automatically');
+      }
+    }
+    // Handlers
+    function onSwipeUp() {
+      state.value = 'fullscreen';
+    }
+    function onSwipeDown() {
+      state.value = state.value === 'fullscreen' ? 'open' : 'closed';
+    }
     // Effects
     // #region Swipe
     const swipeOptions = {
@@ -68,7 +88,7 @@ var script = defineComponent({
                 minHeight: '100%',
                 maxHeight: '100%'
               });
-              fullscreen.value = true;
+              onSwipeUp();
               break;
             case SwipeDirection.DOWN:
               Object.assign(rootElement.style, {
@@ -76,11 +96,7 @@ var script = defineComponent({
                 minHeight: '0',
                 maxHeight: '50%'
               });
-              if (fullscreen.value) {
-                fullscreen.value = false;
-              } else {
-                close();
-              }
+              onSwipeDown();
               break;
           }
         }
@@ -97,7 +113,7 @@ var script = defineComponent({
         } = _ref;
         return (classList === null || classList === void 0 ? void 0 : classList.contains('or-popover-v3')) || (classList === null || classList === void 0 ? void 0 : classList.contains('or-bottom-sheet-v3'));
       })) {
-        close();
+        close(true);
       }
     });
     // #endregion
@@ -107,10 +123,11 @@ var script = defineComponent({
       handleStyles,
       headerStyles,
       state,
-      fullscreen,
+      isOpen,
+      isFullscreen,
+      isClosed,
       open,
-      close,
-      toggle
+      close
     };
   }
 });

package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-0aea0b97.js → OrCardCollection.vue_vue_type_script_lang-f2d222a5.js}

@@ -6,13 +6,13 @@ import './components/OrIconButtonV3/OrIconButton.js';
 import './components/OrButtonV3/OrButton.js';
 import { s as script$3 } from './OrButton.vue_vue_type_script_lang-f58fa1b8.js';
 import './components/OrMenuV3/OrMenu.js';
-import { s as script$4 } from './OrMenu.vue_vue_type_script_lang-25820c69.js';
+import { s as script$4 } from './OrMenu.vue_vue_type_script_lang-115f2c60.js';
 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-0650aac4.js';
-import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-80a5c7dd.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';
 
 var script$1 = defineComponent({

package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-87ac7c67.js → OrConfirm.vue_vue_type_script_lang-b1b13331.js}

@@ -1,16 +1,15 @@
 import { useMagicKeys, whenever, onClickOutside } from '@vueuse/core';
 import { l as logicAnd } from './index-968c331a.js';
-import { defineComponent, ref, toRef, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { ConfirmType } from './components/OrConfirmV3/props.js';
 import { ConfirmRoot, ConfirmHeader, ConfirmInput, ConfirmFooter, ConfirmFooterTypes, ConfirmFooterButtons } from './components/OrConfirmV3/styles.js';
 import './components/OrOverlayV3/OrOverlay.js';
 import './components/OrButtonV3/OrButton.js';
 import './components/OrInputV3/OrInput.js';
-import { usePopoverState } from './hooks/usePopoverState.js';
 import { ButtonColor } from './components/OrButtonV3/props.js';
-import { s as script$1 } from './OrOverlay.vue_vue_type_script_lang-29ff6fd8.js';
+import { s as script$1 } from './OrOverlay.vue_vue_type_script_lang-86c7b93a.js';
 import { s as script$2 } from './OrButton.vue_vue_type_script_lang-f58fa1b8.js';
-import { s as script$3 } from './OrInput.vue_vue_type_script_lang-7e6ee1dd.js';
+import { s as script$3 } from './OrInput.vue_vue_type_script_lang-d08b3796.js';
 
 var script = defineComponent({
   name: 'OrConfirm',
@@ -21,10 +20,6 @@ var script = defineComponent({
   },
   inheritAttrs: false,
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
     titleText: {
       type: String,
       required: false,
@@ -32,18 +27,22 @@ var script = defineComponent({
     },
     confirmButtonText: {
       type: String,
+      required: false,
       default: 'Confirm'
     },
     cancelButtonText: {
       type: String,
+      required: false,
       default: 'Cancel'
     },
     confirmType: {
       type: String,
+      required: false,
       default: ConfirmType.C
     },
     loading: {
       type: Boolean,
+      required: false,
       default: false
     },
     disabled: {
@@ -53,35 +52,43 @@ var script = defineComponent({
     },
     confirmationText: {
       type: String,
-      default: undefined
+      required: false,
+      default: null
     },
     textConfirmationLabel: {
       type: String,
-      default: undefined
+      required: false,
+      default: null
     },
     textConfirmationPlaceholder: {
       type: String,
-      default: undefined
+      required: false,
+      default: null
     },
     textConfirmationError: {
       type: String,
+      required: false,
+      default: null
+    },
+    isOpen: {
+      type: Boolean,
+      required: false,
       default: undefined
     }
   },
-  emits: ['update:state', 'open', 'close', 'confirm'],
-  expose: ['root', 'state', 'open', 'close'],
-  setup(props, context) {
+  emits: ['open', 'close', 'confirm'],
+  expose: ['root', 'isActive', 'open', 'close'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
     // Refs
     const root = ref();
     const confirmationInput = ref();
     const confirmationButton = ref();
     // State
     const touched = ref(false);
-    const {
-      state,
-      open,
-      close
-    } = usePopoverState(toRef(props, 'isOpen'), context);
+    const isActive = ref(props.isOpen || false);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
     const {
@@ -94,11 +101,22 @@ var script = defineComponent({
     const isConfirmationButtonDisabled = computed(() => !!props.disabled || isInvalid.value);
     const confirmButtonColor = computed(() => props.confirmType === ConfirmType.C ? ButtonColor.Primary : ButtonColor.Danger);
     // Methods
-    function confirm() {
-      if (!props.disabled && !isInvalid.value) {
-        context.emit('confirm');
+    function open() {
+      isActive.value = true;
+      emit('open');
+    }
+    function close() {
+      // In case if component opened by isOpen -  only event can be emited, app will catch it and flip reference
+      if (props.isOpen === true) {
+        emit('close');
+      } else {
+        isActive.value = false;
+        emit('close');
       }
     }
+    function confirm() {
+      if (!props.disabled && !isInvalid.value) emit('confirm');
+    }
     function onInputFocus() {
       isInputActive.value = true;
     }
@@ -107,14 +125,20 @@ var script = defineComponent({
       touched.value = true;
     }
     // Events
+    watch(() => props.isOpen, value => {
+      // In case if component opened by isOpen - no need to emmit events, we need just sync local state
+      if (value != undefined) {
+        isActive.value = value;
+      }
+    }, {
+      immediate: true
+    });
     watch(escape, val => {
       if (val) close();
     });
-    watch(state, value => {
-      if (value === 'closed') {
-        confirmationValue.value = '';
-        touched.value = false;
-      }
+    watch(isActive, () => {
+      confirmationValue.value = '';
+      touched.value = false;
     });
     // types here are used for fixing TS2349
     watch(confirmationInput, val => {
@@ -147,7 +171,7 @@ var script = defineComponent({
       isInvalid,
       isConfirmationButtonDisabled,
       touched,
-      state,
+      isActive,
       isInputActive,
       escape,
       rootStyles,

package/dist/bundled/v3/{OrDatePicker.vue_vue_type_script_lang-e5724b48.js → OrDatePicker.vue_vue_type_script_lang-31f5d798.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from './components/OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { s as script$1, a as script$2, b as script$4 } from './OrDateTimePickerMonthSelect-e8b9b8c9.js';
-import { s as script$3, a as script$5, b as script$6 } from './OrDateTimePickerPopoverHeader-f81b902f.js';
+import { s as script$1, a as script$2, b as script$4 } from './OrDateTimePickerMonthSelect-98b935cb.js';
+import { s as script$3, a as script$5, b as script$6 } from './OrDateTimePickerPopoverHeader-eff55bd9.js';
 import { DatePicker, DatePickerPopover } from './components/OrDatePickerV3/styles.js';
 import './components/OrErrorV3/OrError.js';
 import './components/OrHintV3/OrHint.js';
@@ -15,10 +15,10 @@ import { DropdownOpen } from './directives/dropdown-open.js';
 import { s as script$7 } from './OrError.vue_vue_type_script_lang-df7b5e32.js';
 import { s as script$8 } from './OrHint.vue_vue_type_script_lang-0f5e8377.js';
 import { s as script$9 } from './OrIcon.vue_vue_type_script_lang-73f9cc63.js';
-import { s as script$a } from './OrIconButton.vue_vue_type_script_lang-80a5c7dd.js';
-import { s as script$b } from './OrInputBox.vue_vue_type_script_lang-a21db166.js';
+import { s as script$a } from './OrIconButton.vue_vue_type_script_lang-5bba9f3f.js';
+import { s as script$b } from './OrInputBox.vue_vue_type_script_lang-ede24b04.js';
 import { s as script$c } from './OrLabel.vue_vue_type_script_lang-3e11ab8a.js';
-import { s as script$d } from './OrPopover.vue_vue_type_script_lang-05151000.js';
+import { s as script$d } from './OrPopover.vue_vue_type_script_lang-7b1b2488.js';
 import { InputBoxSize } from './components/OrInputBoxV3/props.js';
 
 var script = defineComponent({
@@ -112,7 +112,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();

package/dist/bundled/v3/{OrDateTimePicker.vue_vue_type_script_lang-10e6becd.js → OrDateTimePicker.vue_vue_type_script_lang-a0354296.js}

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from './components/OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { s as script$1, a as script$2, b as script$4 } from './OrDateTimePickerMonthSelect-e8b9b8c9.js';
-import { s as script$3, a as script$5, b as script$6 } from './OrDateTimePickerPopoverHeader-f81b902f.js';
-import { s as script$7, a as script$8 } from './OrDateTimePickerTimeSelect-8bdb97b7.js';
+import { s as script$1, a as script$2, b as script$4 } from './OrDateTimePickerMonthSelect-98b935cb.js';
+import { s as script$3, a as script$5, b as script$6 } from './OrDateTimePickerPopoverHeader-eff55bd9.js';
+import { s as script$7, a as script$8 } from './OrDateTimePickerTimeSelect-2f1a2767.js';
 import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './components/OrDateTimePickerV3/styles.js';
 import './components/OrErrorV3/OrError.js';
 import './components/OrHintV3/OrHint.js';
@@ -14,10 +14,10 @@ import './components/OrPopoverV3/OrPopover.js';
 import { s as script$9 } from './OrError.vue_vue_type_script_lang-df7b5e32.js';
 import { s as script$a } from './OrHint.vue_vue_type_script_lang-0f5e8377.js';
 import { s as script$b } from './OrIcon.vue_vue_type_script_lang-73f9cc63.js';
-import { s as script$c } from './OrIconButton.vue_vue_type_script_lang-80a5c7dd.js';
-import { s as script$d } from './OrInputBox.vue_vue_type_script_lang-a21db166.js';
+import { s as script$c } from './OrIconButton.vue_vue_type_script_lang-5bba9f3f.js';
+import { s as script$d } from './OrInputBox.vue_vue_type_script_lang-ede24b04.js';
 import { s as script$e } from './OrLabel.vue_vue_type_script_lang-3e11ab8a.js';
-import { s as script$f } from './OrPopover.vue_vue_type_script_lang-05151000.js';
+import { s as script$f } from './OrPopover.vue_vue_type_script_lang-7b1b2488.js';
 import { DropdownClose } from './directives/dropdown-close.js';
 import { DropdownOpen } from './directives/dropdown-open.js';
 import { InputBoxSize } from './components/OrInputBoxV3/props.js';
@@ -128,7 +128,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

package/dist/bundled/v3/{OrDateTimePickerMonthSelect-e8b9b8c9.js → OrDateTimePickerMonthSelect-98b935cb.js}

@@ -8,8 +8,8 @@ import './components/OrIconButtonV3/OrIconButton.js';
 import './components/OrMenuV3/OrMenu.js';
 import './components/OrMenuItemV3/OrMenuItem.js';
 import { s as script$4 } from './OrIcon.vue_vue_type_script_lang-73f9cc63.js';
-import { s as script$5 } from './OrIconButton.vue_vue_type_script_lang-80a5c7dd.js';
-import { s as script$6 } from './OrMenu.vue_vue_type_script_lang-25820c69.js';
+import { s as script$5 } from './OrIconButton.vue_vue_type_script_lang-5bba9f3f.js';
+import { s as script$6 } from './OrMenu.vue_vue_type_script_lang-115f2c60.js';
 import { s as script$7 } from './OrMenuItem.vue_vue_type_script_lang-b338d68a.js';
 
 const DateTimePickerDateControl = [
@@ -52,7 +52,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({
@@ -165,7 +165,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]);
@@ -330,7 +330,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/v3/{OrDateTimePickerPopoverHeader-f81b902f.js → OrDateTimePickerPopoverHeader-eff55bd9.js}

@@ -32,7 +32,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,
@@ -80,7 +80,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
@@ -124,7 +124,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/v3/{OrDateTimePickerTimeSelect-8bdb97b7.js → OrDateTimePickerTimeSelect-2f1a2767.js}

@@ -44,7 +44,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({
@@ -149,7 +149,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/v3/{OrIconButton.vue_vue_type_script_lang-80a5c7dd.js → OrIconButton.vue_vue_type_script_lang-5bba9f3f.js}

@@ -3,7 +3,7 @@ import { IconButtonColor } from './components/OrIconButtonV3/props.js';
 import { IconButtonRoot, IconButtonRootColors } from './components/OrIconButtonV3/styles.js';
 import './components/OrIconV3/OrIcon.js';
 import './components/OrTooltipV3/OrTooltip.js';
-import { s as script$2 } from './OrTooltip.vue_vue_type_script_lang-666ac1dd.js';
+import { s as script$2 } from './OrTooltip.vue_vue_type_script_lang-bb3db5bf.js';
 import { IconSize } from './components/OrIconV3/props.js';
 import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-73f9cc63.js';
 

package/dist/bundled/v3/{OrInlineInput.vue_vue_type_script_lang-858acf13.js → OrInlineInput.vue_vue_type_script_lang-3c6b0958.js}

@@ -12,7 +12,7 @@ import { useControlAttributes } from './hooks/useControlAttributes.js';
 import { useValidationAttributes } from './hooks/useValidationAttributes.js';
 import { s as script$1 } from './OrError.vue_vue_type_script_lang-df7b5e32.js';
 import { s as script$2 } from './OrHint.vue_vue_type_script_lang-0f5e8377.js';
-import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-80a5c7dd.js';
+import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-5bba9f3f.js';
 
 var script = defineComponent({
   name: 'OrInlineInput',

package/dist/bundled/v3/{OrInlineTextarea.vue_vue_type_script_lang-83e49316.js → OrInlineTextarea.vue_vue_type_script_lang-da59cd8e.js}

@@ -9,7 +9,7 @@ import { useControlAttributes } from './hooks/useControlAttributes.js';
 import { useValidationAttributes } from './hooks/useValidationAttributes.js';
 import { s as script$1 } from './OrError.vue_vue_type_script_lang-df7b5e32.js';
 import { s as script$2 } from './OrHint.vue_vue_type_script_lang-0f5e8377.js';
-import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-80a5c7dd.js';
+import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-5bba9f3f.js';
 import { s as script$4 } from './OrInlineInputBox.vue_vue_type_script_lang-fe99c485.js';
 
 var script = defineComponent({

package/dist/bundled/v3/{OrInput.vue_vue_type_script_lang-7e6ee1dd.js → OrInput.vue_vue_type_script_lang-d08b3796.js}

@@ -7,9 +7,9 @@ import './components/OrHintV3/OrHint.js';
 import { s as script$2 } from './OrHint.vue_vue_type_script_lang-0f5e8377.js';
 import './components/OrIconV3/OrIcon.js';
 import './components/OrIconButtonV3/OrIconButton.js';
-import { s as script$4 } from './OrIconButton.vue_vue_type_script_lang-80a5c7dd.js';
+import { s as script$4 } from './OrIconButton.vue_vue_type_script_lang-5bba9f3f.js';
 import './components/OrInputBoxV3/OrInputBox.js';
-import { s as script$5 } from './OrInputBox.vue_vue_type_script_lang-a21db166.js';
+import { s as script$5 } from './OrInputBox.vue_vue_type_script_lang-ede24b04.js';
 import './components/OrLabelV3/OrLabel.js';
 import { s as script$6 } from './OrLabel.vue_vue_type_script_lang-3e11ab8a.js';
 import './components/OrLoaderV3/OrLoader.js';

package/dist/bundled/v3/OrInputBox.vue_vue_type_script_lang-ede24b04.js

@@ -0,0 +1,95 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+import { InputBoxVariant, InputBoxSize } from './components/OrInputBoxV3/props.js';
+import { InputBoxRoot, InputBoxRootVariants, InputBoxRootSizes } from './components/OrInputBoxV3/styles.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
+    };
+  }
+});
+
+const _hoisted_1 = ["invalid", "readonly", "disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles),
+    invalid: _ctx.invalid ? '' : null,
+    readonly: _ctx.readonly ? '' : null,
+    disabled: _ctx.disabled ? '' : null
+  }, [renderSlot(_ctx.$slots, "default")], 10 /* CLASS, PROPS */, _hoisted_1);
+}
+
+script$1.render = render;
+script$1.__file = "src/components/or-input-box-v3/partials/or-input-box-addon/OrInputBoxAddon.vue";
+
+var script = defineComponent({
+  name: 'OrInputBox',
+  components: {
+    OrInputBoxAddon: script$1
+  },
+  props: {
+    variant: {
+      type: String,
+      default: InputBoxVariant.Styled
+    },
+    size: {
+      type: String,
+      default: InputBoxSize.M
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-input-box-v3', ...InputBoxRoot, ...InputBoxRootVariants[props.variant], ...InputBoxRootSizes[props.size]]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+export { script as s };