@onereach/ui-components 2.70.2-beta.2200.0 → 2.70.2-beta.2203.0

package/dist/esm/v2/components/or-switch-v3/OrSwitch.vue.d.ts

@@ -2,19 +2,11 @@ import { PropType } from 'vue-demi';
 import { LabelVariant } from '../or-label-v3';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    control: import("@vue/composition-api").Ref<HTMLInputElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     loaderStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    controlAttributes: {
-        readonly: boolean | undefined;
-        disabled: boolean | undefined;
-        'force-state': string | undefined;
-        id: string | undefined;
-    };
+    controlId: import("@vue/composition-api").Ref<string>;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<boolean | string[]>;
-    focus: () => void;
-    blur: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: PropType<boolean | string[]>;
@@ -94,19 +86,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    control: import("@vue/composition-api").Ref<HTMLInputElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     loaderStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    controlAttributes: {
-        readonly: boolean | undefined;
-        disabled: boolean | undefined;
-        'force-state': string | undefined;
-        id: string | undefined;
-    };
+    controlId: import("@vue/composition-api").Ref<string>;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<boolean | string[]>;
-    focus: () => void;
-    blur: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: boolean | string[];
     value: boolean | string[];

package/dist/esm/v2/components/or-switch-v3/index.js

@@ -1,7 +1,6 @@
-export { _ as OrSwitchV3 } from '../../OrSwitch-133052ca.js';
+export { _ as OrSwitchV3 } from '../../OrSwitch-13b6a7ee.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
-import '../../useIdAttribute-859439f0.js';
 import '@vueuse/core';
 import '../../OrLabel-2a9f1477.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/esm/v2/components/or-tabs-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrTabsV3, T as TabsVariant } from '../../OrTabs-e5b81f4b.js';
+export { _ as OrTabsV3, T as TabsVariant } from '../../OrTabs-71bd3fd2.js';
 import '@vueuse/core';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';

package/dist/esm/v2/components/or-textarea-v3/OrTextarea.vue.d.ts

@@ -2,28 +2,14 @@ import { PropType } from 'vue-demi';
 import { TextareaSize } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    control: import("@vue/composition-api").Ref<HTMLTextAreaElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    controlAttributes: {
-        required: boolean | undefined;
-        minlength: number | undefined;
-        maxlength: number | undefined;
-        pattern: string | undefined;
-        min: number | undefined;
-        max: number | undefined;
-        step: number | undefined;
-        readonly: boolean | undefined;
-        disabled: boolean | undefined;
-        'force-state': string | undefined;
-        id: string | undefined;
-    };
+    controlId: import("@vue/composition-api").Ref<string>;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
+    invalid: import("@vue/composition-api").ComputedRef<boolean>;
+    readonly: import("@vue/composition-api").ComputedRef<boolean>;
     currentLength: import("@vue/composition-api").ComputedRef<number>;
     maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
-    invalid: import("@vue/composition-api").ComputedRef<boolean>;
-    focus: () => void;
-    blur: () => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: StringConstructor;
@@ -57,10 +43,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -98,10 +80,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: BooleanConstructor;
         default: boolean;
     };
-    readonly: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -115,34 +93,19 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     hint: string;
     error: string;
     required: boolean;
-    readonly: boolean;
     disabled: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
-    control: import("@vue/composition-api").Ref<HTMLTextAreaElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    controlAttributes: {
-        required: boolean | undefined;
-        minlength: number | undefined;
-        maxlength: number | undefined;
-        pattern: string | undefined;
-        min: number | undefined;
-        max: number | undefined;
-        step: number | undefined;
-        readonly: boolean | undefined;
-        disabled: boolean | undefined;
-        'force-state': string | undefined;
-        id: string | undefined;
-    };
+    controlId: import("@vue/composition-api").Ref<string>;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<string>;
+    invalid: import("@vue/composition-api").ComputedRef<boolean>;
+    readonly: import("@vue/composition-api").ComputedRef<boolean>;
     currentLength: import("@vue/composition-api").ComputedRef<number>;
     maxLength: import("@vue/composition-api").ComputedRef<number | undefined>;
-    invalid: import("@vue/composition-api").ComputedRef<boolean>;
-    focus: () => void;
-    blur: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string;
     value: string;
@@ -152,7 +115,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     hint: string;
     error: string;
     required: boolean;
-    readonly: boolean;
     disabled: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
@@ -165,7 +127,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     hint: string;
     error: string;
     required: boolean;
-    readonly: boolean;
     disabled: boolean;
 }, true>);
 export default _default;

package/dist/esm/v2/components/or-textarea-v3/index.js

@@ -1,10 +1,8 @@
-export { _ as OrTextareaV3 } from '../../OrTextarea-709eea9b.js';
+export { _ as OrTextareaV3 } from '../../OrTextarea-6712a150.js';
 export { a as TextareaSize } from '../../OrInputBox-4d5a318d.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
-import '../../useIdAttribute-859439f0.js';
 import '@vueuse/core';
-import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrError-d267ee9a.js';
 import '../../normalize-component-6e8e3d80.js';
 import '../../OrHint-42dc9ebb.js';

package/dist/esm/v2/hooks/index.d.ts

@@ -1,8 +1,5 @@
 export { useClassAttribute } from './useClassAttribute';
-export { useControlAttributes } from './useControlAttributes';
 export { useElevation } from './useElevation';
-export { useIdAttribute } from './useIdAttribute';
 export { useOverflow } from './useOverflow';
 export { useResponsive } from './useResponsive';
 export { default as useToggle } from './useToggle';
-export { useValidationAttributes } from './useValidationAttributes';

package/dist/esm/v2/hooks/index.js

@@ -1,9 +1,7 @@
 export { u as useClassAttribute } from '../useClassAttribute-47fdb016.js';
-export { u as useControlAttributes, a as useIdAttribute } from '../useIdAttribute-859439f0.js';
 export { u as useElevation } from '../useElevation-31bfe1f6.js';
 export { u as useOverflow } from '../useOverflow-af6161c8.js';
 export { u as useResponsive } from '../useResponsive-a02e95b7.js';
 export { u as useToggle } from '../useToggle-29e4d7c7.js';
-export { u as useValidationAttributes } from '../useValidationAttributes-d1abbe34.js';
 import 'vue-demi';
 import '@vueuse/core';

package/dist/esm/v2/index.js

@@ -8,18 +8,18 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from './OrButton-835d4f11.js';
 export { _ as OrCard } from './OrCard-b7268256.js';
 export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from './OrCardCollection-f6b07557.js';
-export { D as DefaultCardCollectionViews, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-d51e15f5.js';
+export { D as DefaultCardCollectionViews, _ as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-3c38fc85.js';
 export { _ as OrCardV3 } from './OrCard-de799db0.js';
 export { a as OrCarousel, _ as OrCarouselItem } from './OrCarouselItem-4e2cf3d8.js';
 export { _ as OrCheckbox } from './OrCheckbox-915f1f0a.js';
-export { _ as OrCheckboxV3 } from './OrCheckbox-7317fe1a.js';
+export { _ as OrCheckboxV3 } from './OrCheckbox-567e387c.js';
 export { _ as OrChip } from './OrChips.vue_rollup-plugin-vue_script-aa8fedaa.js';
 export { _ as OrChips } from './OrChips-5e0063be.js';
 export { _ as OrCode, O as OrCodeLanguages } from './OrCode-d4400b42.js';
 export { _ as OrCollapse } from './OrCollapse-4d892ca3.js';
 export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-75abefdd.js';
 export { _ as OrConfirm } from './OrConfirm-d7112dd3.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-fe4f21bf.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-047d4086.js';
 export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-349df9b2.js';
 export { _ as OrError } from './OrError-081130bb.js';
 export { _ as OrErrorTagV3 } from './OrErrorTag-782dd714.js';
@@ -34,11 +34,11 @@ export { _ as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-819166
 export { I as IconButtonColor, _ as OrIconButtonV3 } from './OrIconButton-b3779042.js';
 export { I as IconButtonSize, I as IconSize, a as IconVariant, _ as OrIconV3 } from './OrIcon-5e394c62.js';
 export { I as InlineInputBoxSize, I as InlineInputSize, _ as OrInlineInputBoxV3 } from './OrInlineInputBox-fefd4fbd.js';
-export { I as InlineInputType, _ as OrInlineInputV3 } from './OrInlineInput-7c4f1f92.js';
+export { I as InlineInputType, _ as OrInlineInputV3 } from './OrInlineInput-10205811.js';
 export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, _ as OrInlineTextEdit } from './OrInlineTextEdit-b47cfc2d.js';
-export { _ as OrInlineTextareaV3 } from './OrInlineTextarea-3381e2a9.js';
+export { _ as OrInlineTextareaV3 } from './OrInlineTextarea-7658611e.js';
 export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, _ as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from './OrInputBox-4d5a318d.js';
-export { I as InputType, _ as OrInputV3 } from './OrInput-fbbf5de4.js';
+export { I as InputType, _ as OrInputV3 } from './OrInput-ada3a970.js';
 export { a as OrNumberInput, b as OrPassword, _ as OrTextarea } from './OrPassword-1fa97156.js';
 export { _ as OrInput } from './OrSearch.vue_rollup-plugin-vue_script-197d77fc.js';
 export { _ as OrSearch } from './OrSearch-0589d17d.js';
@@ -59,16 +59,16 @@ export { N as NotificationVariant, _ as OrNotificationV3 } from './OrNotificatio
 export { _ as OrOverflowMenu } from './OrOverflowMenu-10a4166a.js';
 export { _ as OrOverlay } from './OrOverlay-3b52865d.js';
 export { _ as OrOverlayV3 } from './OrOverlay-18ba2dc6.js';
-export { _ as OrPaginationV3 } from './OrPagination-291bd1b9.js';
+export { _ as OrPaginationV3 } from './OrPagination-c0dbec6a.js';
 export { _ as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './OrProgress-4ee24824.js';
 export { _ as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-c27c8946.js';
 export { _ as OrRadio } from './OrRadio-e4198532.js';
 export { _ as OrRadioGroup } from './OrRadioGroup-d9d32cba.js';
-export { _ as OrRadioV3 } from './OrRadio-b0a560d2.js';
-export { _ as OrSearchV3 } from './OrSearch-9e3dc7b2.js';
+export { _ as OrRadioV3 } from './OrRadio-848ce55d.js';
+export { _ as OrSearchV3 } from './OrSearch-0f08f2f5.js';
 export { _ as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-e8dce8f9.js';
 export { _ as OrSelect } from './OrSelect-dae2b069.js';
-export { _ as OrSelectV3 } from './OrSelect-6d3c3d2a.js';
+export { _ as OrSelectV3 } from './OrSelect-1d705445.js';
 export { _ as OrSidebar, O as OrSidebarSide } from './OrSidebar-7d6125bb.js';
 export { O as OrSidebarPlacement, _ as OrSidebarV3 } from './OrSidebar-fabc7bc9.js';
 export { _ as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-cc94bdc9.js';
@@ -77,18 +77,18 @@ export { _ as OrSlider } from './OrSlider-f7b9c7c2.js';
 export { _ as OrSortHeaderV3 } from './OrSortHeader-19bf94ca.js';
 export { _ as OrStepper } from './OrStepper-4f44e7b7.js';
 export { _ as OrSwitch } from './OrSwitch-f25f27f9.js';
-export { _ as OrSwitchV3 } from './OrSwitch-133052ca.js';
+export { _ as OrSwitchV3 } from './OrSwitch-13b6a7ee.js';
 export { _ as OrTab } from './OrTab-eade8ab6.js';
 export { _ as OrTabHeaderItem } from './OrTabHeaderItem-d1a340d1.js';
 export { _ as OrTabV3 } from './OrTab-702e7335.js';
 export { _ as OrTabs } from './OrTabs-e1c13d41.js';
-export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-e5b81f4b.js';
+export { _ as OrTabsV3, T as TabsVariant } from './OrTabs-71bd3fd2.js';
 export { _ as OrTag } from './OrTag-c1fa6901.js';
 export { _ as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-52e4cc94.js';
 export { _ as OrTeleport } from './OrTeleportVue2-8ef4ceca.js';
 export { _ as OrTeleportV3 } from './OrTeleport.vue2-fb92f29f.js';
 export { _ as OrTextV3 } from './OrText-ba5a2b6c.js';
-export { _ as OrTextareaV3 } from './OrTextarea-709eea9b.js';
+export { _ as OrTextareaV3 } from './OrTextarea-6712a150.js';
 export { _ as OrTextbox, T as TextboxTypes } from './OrTextbox-2594c980.js';
 export { _ as OrToast, a as OrToastContainer } from './OrToastContainer-2fbd4358.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-4fbe0e5a.js';
@@ -99,12 +99,10 @@ export { _ as OrTooltipContent } from './OrTooltip.vue_rollup-plugin-vue_script-
 export { _ as OrTooltipV3 } from './OrTooltip-513bee30.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 export { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-31bfe1f6.js';
 export { u as useOverflow } from './useOverflow-af6161c8.js';
 export { u as useResponsive } from './useResponsive-a02e95b7.js';
 export { u as useToggle } from './useToggle-29e4d7c7.js';
-export { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { R as RX_ABBREVIATION_FROM_STRING } from './color-1f348774.js';
 import 'vue-demi';
 import 'lodash';

package/dist/esm/v3/{OrCardCollection-14faa91f.js → OrCardCollection-dbb3e839.js}

@@ -8,7 +8,7 @@ import { s as script$5 } from './OrMenuItem-9da279f6.js';
 import { s as script$6 } from './OrIcon-b195169c.js';
 import { openBlock, createElementBlock, normalizeClass, Fragment, renderList, renderSlot, mergeProps, createTextVNode, toDisplayString, resolveComponent, createElementVNode, createVNode, withCtx, createBlock, createCommentVNode, normalizeProps, guardReactiveProps } from 'vue';
 import { s as script$3 } from './OrButton-0fa67a0d.js';
-import { s as script$7 } from './OrSearch-875646f5.js';
+import { s as script$7 } from './OrSearch-9885d178.js';
 import './OrInputBox-6d1b6059.js';
 
 const CardCollectionRoot = [

package/dist/esm/v3/{OrCheckbox-7144da06.js → OrCheckbox-3e139eac.js}

@@ -1,9 +1,8 @@
-import { defineComponent, ref, computed, reactive } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
 import { s as script$1, L as LabelVariant } from './OrLabel-bdaec602.js';
-import { resolveComponent, openBlock, createElementBlock, mergeProps, withDirectives, createElementVNode, vModelDynamic, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, mergeProps, vModelCheckbox, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 const CheckboxRoot = [
@@ -77,20 +76,18 @@ var script = defineComponent({
     }
   },
   emits: ['update:modelValue', 'input', 'focus', 'blur'],
-  expose: ['root', 'focus', 'blur'],
+  expose: ['root'],
   setup(props, context) {
+    var _a;
+    const currentInstance = getCurrentInstance();
     // Refs
     const root = ref();
-    const control = ref();
     // Styles
     const classAttribute = useClassAttribute();
     const rootStyles = computed(() => ['or-checkbox', ...CheckboxRoot, classAttribute.value]);
     const controlStyles = computed(() => [...CheckboxControl, ...CheckboxControlHandle]);
     // State
-    const controlAttributes = reactive({
-      id: useIdAttribute(),
-      ...useControlAttributes()
-    });
+    const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
     const proxyModelValue = computed({
       get: () => {
         var _a;
@@ -102,50 +99,36 @@ var script = defineComponent({
         context.emit('update:modelValue', value);
       }
     });
-    // Methods
-    function focus() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    function blur() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
-    }
     return {
       root,
-      control,
       rootStyles,
       controlStyles,
-      controlAttributes,
-      proxyModelValue,
-      focus,
-      blur
+      controlId,
+      proxyModelValue
     };
   }
 });
 
-const _hoisted_1 = ["value", "indeterminate", "required", "disabled"];
+const _hoisted_1 = ["id", "value", "indeterminate", "required", "disabled"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles
-  }), [withDirectives(createElementVNode("input", mergeProps({
-    ref: "control",
-    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.proxyModelValue = $event)
-  }, _ctx.controlAttributes, {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [withDirectives(createElementVNode("input", mergeProps(_ctx.$attrs, {
+    id: _ctx.controlId,
+    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.proxyModelValue = $event),
     class: _ctx.controlStyles,
-    type: 'checkbox',
+    type: "checkbox",
     value: _ctx.inputValue,
     indeterminate: _ctx.indeterminate,
     required: _ctx.required,
     disabled: _ctx.disabled,
     onFocus: _cache[1] || (_cache[1] = $event => _ctx.$emit('focus', $event)),
     onBlur: _cache[2] || (_cache[2] = $event => _ctx.$emit('blur', $event))
-  }), null, 16 /* FULL_PROPS */, _hoisted_1), [[vModelDynamic, _ctx.proxyModelValue]]), _ctx.$slots.default || _ctx.label ? (openBlock(), createBlock(_component_OrLabel, {
+  }), null, 16 /* FULL_PROPS */, _hoisted_1), [[vModelCheckbox, _ctx.proxyModelValue]]), _ctx.$slots.default || _ctx.label ? (openBlock(), createBlock(_component_OrLabel, {
     key: 0,
-    "control-id": _ctx.controlAttributes.id,
+    "control-id": _ctx.controlId,
     variant: _ctx.labelVariant,
     required: _ctx.required,
     disabled: _ctx.disabled
@@ -154,7 +137,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(_ctx.label), 1 /* TEXT */)])]),
 
     _: 3 /* FORWARDED */
-  }, 8 /* PROPS */, ["control-id", "variant", "required", "disabled"])) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */);
+  }, 8 /* PROPS */, ["control-id", "variant", "required", "disabled"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
 }
 
 var css_248z = "\ninput[data-v-5358d710] {\n  appearance: none;\n  line-height: 0;\n}\n";

package/dist/esm/v3/{OrConfirm-671d4ff7.js → OrConfirm-fee3c859.js}

@@ -1,9 +1,9 @@
+import { useMagicKeys, whenever, onClickOutside } from '@vueuse/core';
+import { logicAnd } from '@vueuse/math';
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { s as script$2, a as ButtonColor } from './OrButton-0fa67a0d.js';
+import { s as script$3 } from './OrInput-9c0426b9.js';
 import { s as script$1 } from './OrOverlay-738a44d5.js';
-import { s as script$3 } from './OrInput-8332b985.js';
-import { useMagicKeys, whenever } from '@vueuse/core';
-import { logicAnd } from '@vueuse/math';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createTextVNode, toDisplayString, createElementBlock, createVNode, createCommentVNode } from 'vue';
 
 var ConfirmType;
@@ -13,12 +13,14 @@ var ConfirmType;
 })(ConfirmType || (ConfirmType = {}));
 
 const ConfirmRoot = [
+// Position
+'fixed md:static', 'left-none', 'right-none', 'bottom-none',
 // Layout
 'layout-column',
 // Box
-'w-[320px]',
+'w-full md:w-[320px]',
 // Shape
-'rounded-md',
+'rounded-0 md:rounded-md',
 // Spacing
 'px-lg', 'py-lg', 'gap-md',
 // Typography
@@ -51,8 +53,10 @@ const ConfirmFooterTypes = {
   'flex-row-reverse']
 };
 const ConfirmFooterButtons = [
+// Layout
+'grow',
 // Box
-'w-[128px]'];
+'w-auto md:w-[128px]'];
 
 var script = defineComponent({
   name: 'OrConfirm',
@@ -194,6 +198,9 @@ var script = defineComponent({
     const inputBoxStyles = computed(() => [...ConfirmInput]);
     const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
     const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
+    // #region Click Outside
+    onClickOutside(root, close);
+    // #endregion
     return {
       root,
       confirmationInput,

package/dist/esm/v3/{OrInlineInput-a6b19dbe.js → OrInlineInput-507fc99c.js}

@@ -1,13 +1,11 @@
-import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
+import { defineComponent, getCurrentInstance, ref, computed, watch } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
-import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { s as script$1 } from './OrError-ec8c709d.js';
 import { s as script$2 } from './OrHint-74bb732d.js';
 import { s as script$3 } from './OrIconButton-1a89fbf9.js';
 import { s as script$4, I as InlineInputBoxSize } from './OrInlineInputBox-8049f95a.js';
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, createVNode, withCtx, withDirectives, vModelDynamic, normalizeClass, withModifiers, createCommentVNode, Fragment, createBlock, createSlots, createTextVNode, toDisplayString } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, withDirectives, mergeProps, vModelDynamic, withModifiers, createCommentVNode, Fragment, createBlock, createSlots, createTextVNode, toDisplayString } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 var InlineInputType;
@@ -88,22 +86,19 @@ var script = defineComponent({
     }
   },
   emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
-  expose: ['root', 'focus', 'blur'],
+  expose: ['root'],
   setup(props, context) {
+    var _a;
+    const currentInstance = getCurrentInstance();
     // Refs
     const root = ref();
-    const control = ref();
     // Styles
     const classAttribute = useClassAttribute();
     const rootStyles = computed(() => ['or-inline-input', ...InlineInputRoot, classAttribute.value]);
     const controlStyles = computed(() => [...InlineInputControl]);
     const actionStyles = computed(() => [...InlineInputAction, ...InlineInputActionSizes[props.size]]);
     // State
-    const controlAttributes = reactive({
-      id: useIdAttribute(),
-      ...useControlAttributes(),
-      ...useValidationAttributes()
-    });
+    const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
     const proxyModelValue = computed({
       get: () => {
         var _a;
@@ -116,13 +111,13 @@ var script = defineComponent({
       }
     });
     const draftModelValue = ref('');
+    const activated = ref(false);
+    const invalid = computed(() => !!props.error);
     const currentLength = computed(() => {
       var _a, _b;
       return (_b = (_a = draftModelValue.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
     });
-    const maxLength = computed(() => controlAttributes.maxlength);
-    const invalid = computed(() => !!props.error);
-    const activated = ref(false);
+    const maxLength = computed(() => context.attrs.maxlength);
     // Handlers
     function onFocus(event) {
       activated.value = true;
@@ -135,14 +130,6 @@ var script = defineComponent({
       context.emit('blur', event);
     }
     // Methods
-    function focus() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    function blur() {
-      var _a;
-      (_a = control.value) === null || _a === void 0 ? void 0 : _a.blur();
-    }
     function apply() {
       if (draftModelValue.value !== proxyModelValue.value) {
         proxyModelValue.value = draftModelValue.value;
@@ -164,21 +151,18 @@ var script = defineComponent({
     });
     return {
       root,
-      control,
       rootStyles,
       controlStyles,
       actionStyles,
-      controlAttributes,
+      controlId,
       proxyModelValue,
       draftModelValue,
+      activated,
+      invalid,
       currentLength,
       maxLength,
-      invalid,
-      activated,
       onFocus,
       onBlur,
-      focus,
-      blur,
       apply,
       reset
     };
@@ -188,24 +172,23 @@ var script = defineComponent({
 const _hoisted_1 = {
   class: /*#__PURE__*/normalizeClass(['layout-row', 'gap-sm+'])
 };
-const _hoisted_2 = ["type", "placeholder", "activated"];
+const _hoisted_2 = ["id", "type", "placeholder", "activated"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrInlineInputBox = resolveComponent("OrInlineInputBox");
   const _component_OrIconButton = resolveComponent("OrIconButton");
   const _component_OrHint = resolveComponent("OrHint");
   const _component_OrError = resolveComponent("OrError");
-  return openBlock(), createElementBlock("div", mergeProps({
-    ref: "root"
-  }, _ctx.$attrs, {
-    class: _ctx.rootStyles
-  }), [createElementVNode("div", _hoisted_1, [createVNode(_component_OrInlineInputBox, {
+  return openBlock(), createElementBlock("div", {
+    ref: "root",
+    class: normalizeClass(_ctx.rootStyles)
+  }, [createElementVNode("div", _hoisted_1, [createVNode(_component_OrInlineInputBox, {
     size: _ctx.size,
     invalid: _ctx.invalid
   }, {
     default: withCtx(() => [withDirectives(createElementVNode("input", mergeProps({
-      ref: "control",
+      id: _ctx.controlId,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValue = $event)
-    }, _ctx.controlAttributes, {
+    }, _ctx.$attrs, {
       class: _ctx.controlStyles,
       type: _ctx.type,
       placeholder: _ctx.placeholder,
@@ -251,7 +234,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     fn: withCtx(() => [createTextVNode(toDisplayString(_ctx.currentLength) + " / " + toDisplayString(_ctx.maxLength), 1 /* TEXT */)]),
 
     key: "0"
-  } : undefined]), 1024 /* DYNAMIC_SLOTS */))], 16 /* FULL_PROPS */);
+  } : undefined]), 1024 /* DYNAMIC_SLOTS */))], 2 /* CLASS */);
 }
 
 var css_248z = "\ninput[data-v-29d9ad19] {\n  min-width: 0;\n  background: none;\n  outline: none;\n}\ninput[type=\"number\"][data-v-29d9ad19]::-webkit-inner-spin-button {\n  display: none;\n}\ninput[type=\"search\"][data-v-29d9ad19]::-webkit-search-cancel-button {\n  display: none;\n}\n";