@onereach/ui-components 2.70.2-beta.2207.0 → 2.70.2-beta.2212.0

package/dist/esm/v2/{OrConfirm-e2ab9b4c.js → OrConfirm-047d4086.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 { _ as __vue_component__$2, a as ButtonColor } from './OrButton-835d4f11.js';
-import { _ as __vue_component__$1 } from './OrOverlay-18ba2dc6.js';
 import { _ as __vue_component__$3 } from './OrInput-ada3a970.js';
-import { useMagicKeys, whenever } from '@vueuse/core';
-import { logicAnd } from '@vueuse/math';
+import { _ as __vue_component__$1 } from './OrOverlay-18ba2dc6.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 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/v2/{OrSelect-f8837f5d.js → OrSelect-1d705445.js}

@@ -13,7 +13,7 @@ import { _ as __vue_component__$6 } from './OrInput-ada3a970.js';
 import { _ as __vue_component__$8 } from './OrLabel-2a9f1477.js';
 import { _ as __vue_component__$9 } from './OrMenuItem-c7f28480.js';
 import { _ as __vue_component__$a } from './OrPopover-9bafbdb4.js';
-import { _ as __vue_component__$b } from './OrTag-5c404031.js';
+import { _ as __vue_component__$b } from './OrTag-52e4cc94.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const SelectRoot = [

package/dist/esm/v2/{OrTag-5c404031.js → OrTag-52e4cc94.js}

@@ -43,7 +43,7 @@ const TagRootVariants = {
 const TagRootColors = {
   'default': [
   // Theme
-  'theme-preset-2-primary', 'dark:theme-preset-2-primary-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark'],
+  'theme-preset-2-primary', 'dark:theme-preset-2-primary-dark'],
   'danger': [
   // Theme
   'theme-preset-2-error', 'dark:theme-preset-2-error-dark']

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

@@ -19,7 +19,7 @@ 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-e2ab9b4c.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';
@@ -68,7 +68,7 @@ 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-f8837f5d.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';
@@ -84,7 +84,7 @@ export { _ as OrTabV3 } from '../OrTab-702e7335.js';
 export { _ as OrTabs } from '../OrTabs-e1c13d41.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-5c404031.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';

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

@@ -1,14 +1,11 @@
-export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-e2ab9b4c.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-047d4086.js';
+import '@vueuse/core';
+import '@vueuse/math';
 import 'vue-demi';
 import '../../OrButton-835d4f11.js';
 import '../../useClassAttribute-47fdb016.js';
-import '@vueuse/core';
 import '../../OrLoader-f857d55b.js';
 import '../../normalize-component-6e8e3d80.js';
-import '../../OrOverlay-18ba2dc6.js';
-import '../../useElevation-31bfe1f6.js';
-import '../../OrTeleport.vue2-fb92f29f.js';
-import 'portal-vue';
 import '../../OrInput-ada3a970.js';
 import '../../OrError-d267ee9a.js';
 import '../../OrHint-42dc9ebb.js';
@@ -17,9 +14,12 @@ import '../../OrIcon-5e394c62.js';
 import '../../OrTooltip-513bee30.js';
 import '../../OrPopover-9bafbdb4.js';
 import '@floating-ui/dom';
+import '../../useElevation-31bfe1f6.js';
 import '../../useResponsive-a02e95b7.js';
 import '../../OrBottomSheet-16c2e610.js';
+import '../../OrOverlay-18ba2dc6.js';
+import '../../OrTeleport.vue2-fb92f29f.js';
+import 'portal-vue';
 import '../../OrInputBox-4d5a318d.js';
 import '../../OrLabel-2a9f1477.js';
 import '../../browser-82dea9ed.js';
-import '@vueuse/math';

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

@@ -1,4 +1,4 @@
-export { _ as OrSelectV3 } from '../../OrSelect-f8837f5d.js';
+export { _ as OrSelectV3 } from '../../OrSelect-1d705445.js';
 export { a as SelectSize } from '../../OrInputBox-4d5a318d.js';
 import 'vue-demi';
 import '../../dropdown-open-0d314aa4.js';
@@ -25,4 +25,4 @@ import '../../OrOverlay-18ba2dc6.js';
 import '../../OrTeleport.vue2-fb92f29f.js';
 import 'portal-vue';
 import '../../OrMenuItem-c7f28480.js';
-import '../../OrTag-5c404031.js';
+import '../../OrTag-52e4cc94.js';

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

@@ -1,4 +1,4 @@
-export { _ as OrTagV3, a as TagColor, T as TagVariant } from '../../OrTag-5c404031.js';
+export { _ as OrTagV3, a as TagColor, T as TagVariant } from '../../OrTag-52e4cc94.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/esm/v2/index.js

@@ -19,7 +19,7 @@ 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-e2ab9b4c.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';
@@ -68,7 +68,7 @@ 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-f8837f5d.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';
@@ -84,7 +84,7 @@ export { _ as OrTabV3 } from './OrTab-702e7335.js';
 export { _ as OrTabs } from './OrTabs-e1c13d41.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-5c404031.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';

package/dist/esm/v3/{OrConfirm-1bcd39b1.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$1 } from './OrOverlay-738a44d5.js';
 import { s as script$3 } from './OrInput-9c0426b9.js';
-import { useMagicKeys, whenever } from '@vueuse/core';
-import { logicAnd } from '@vueuse/math';
+import { s as script$1 } from './OrOverlay-738a44d5.js';
 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/{OrSelect-8fbd88bc.js → OrSelect-dfa4885f.js}

@@ -13,7 +13,7 @@ import { s as script$6 } from './OrInput-9c0426b9.js';
 import { s as script$8 } from './OrLabel-bdaec602.js';
 import { s as script$9 } from './OrMenuItem-9da279f6.js';
 import { s as script$a } from './OrPopover-1075dd38.js';
-import { s as script$b } from './OrTag-5d54f37d.js';
+import { s as script$b } from './OrTag-efa7578f.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, normalizeClass, createElementVNode, Fragment, renderList, createVNode, withModifiers } from 'vue';
 
 const SelectRoot = [

package/dist/esm/v3/{OrTag-5d54f37d.js → OrTag-efa7578f.js}

@@ -43,7 +43,7 @@ const TagRootVariants = {
 const TagRootColors = {
   'default': [
   // Theme
-  'theme-preset-2-primary', 'dark:theme-preset-2-primary-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark'],
+  'theme-preset-2-primary', 'dark:theme-preset-2-primary-dark'],
   'danger': [
   // Theme
   'theme-preset-2-error', 'dark:theme-preset-2-error-dark']

package/dist/esm/v3/components/index.js

@@ -16,7 +16,7 @@ export { s as OrCode, O as OrCodeLanguages } from '../OrCode-5ed69c23.js';
 export { s as OrCollapse } from '../OrCollapse-445141ab.js';
 export { s 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-189cb097.js';
 export { s as OrConfirm } from '../OrConfirm-f39bd784.js';
-export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-1bcd39b1.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-fee3c859.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-f2e08564.js';
 export { s as OrError } from '../OrError-f90296db.js';
 export { s as OrErrorTagV3 } from '../OrErrorTag-98252eef.js';
@@ -63,7 +63,7 @@ export { s as OrRadioV3 } from '../OrRadio-54b6d0de.js';
 export { s as OrSearchV3 } from '../OrSearch-9885d178.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-171cad78.js';
 export { s as OrSelect } from '../OrSelect-0821b907.js';
-export { s as OrSelectV3 } from '../OrSelect-8fbd88bc.js';
+export { s as OrSelectV3 } from '../OrSelect-dfa4885f.js';
 export { s as OrSidebar, O as OrSidebarSide } from '../OrSidebar-375c85a3.js';
 export { O as OrSidebarPlacement, s as OrSidebarV3 } from '../OrSidebar-a62972f5.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from '../OrSkeletonText-2b1610ce.js';
@@ -79,7 +79,7 @@ export { s as OrTabV3 } from '../OrTab-c131cf60.js';
 export { s as OrTabs } from '../OrTabs-d3812c11.js';
 export { s as OrTabsV3, T as TabsVariant } from '../OrTabs-d0ee6cef.js';
 export { s as OrTag } from '../OrTag-1b5e43fa.js';
-export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-5d54f37d.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from '../OrTag-efa7578f.js';
 export { s as OrTeleport } from '../OrTeleportVue3-ad639f12.js';
 export { s as OrTeleportV3 } from '../OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from '../OrText-ecb46923.js';

package/dist/esm/v3/components/or-confirm-v3/index.js

@@ -1,13 +1,11 @@
-export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-1bcd39b1.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-fee3c859.js';
+import '@vueuse/core';
+import '@vueuse/math';
 import 'vue-demi';
 import '../../OrButton-0fa67a0d.js';
 import '../../useClassAttribute-47fdb016.js';
-import '@vueuse/core';
 import '../../OrLoader-b3cf4231.js';
 import 'vue';
-import '../../OrOverlay-738a44d5.js';
-import '../../useElevation-31bfe1f6.js';
-import '../../OrTeleport.vue3-8099178c.js';
 import '../../OrInput-9c0426b9.js';
 import '../../OrError-ec8c709d.js';
 import '../../OrHint-74bb732d.js';
@@ -16,9 +14,11 @@ import '../../OrIcon-b195169c.js';
 import '../../OrTooltip-50d27b4f.js';
 import '../../OrPopover-1075dd38.js';
 import '@floating-ui/dom';
+import '../../useElevation-31bfe1f6.js';
 import '../../useResponsive-a02e95b7.js';
 import '../../OrBottomSheet-62817aec.js';
+import '../../OrOverlay-738a44d5.js';
+import '../../OrTeleport.vue3-8099178c.js';
 import '../../OrInputBox-6d1b6059.js';
 import '../../OrLabel-bdaec602.js';
 import '../../style-inject.es-4c6f2515.js';
-import '@vueuse/math';

package/dist/esm/v3/components/or-select-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrSelectV3 } from '../../OrSelect-8fbd88bc.js';
+export { s as OrSelectV3 } from '../../OrSelect-dfa4885f.js';
 export { a as SelectSize } from '../../OrInputBox-6d1b6059.js';
 import 'vue-demi';
 import '../../dropdown-open-0d314aa4.js';
@@ -24,4 +24,4 @@ import '../../OrBottomSheet-62817aec.js';
 import '../../OrOverlay-738a44d5.js';
 import '../../OrTeleport.vue3-8099178c.js';
 import '../../OrMenuItem-9da279f6.js';
-import '../../OrTag-5d54f37d.js';
+import '../../OrTag-efa7578f.js';

package/dist/esm/v3/components/or-tag-v3/index.js

@@ -1,4 +1,4 @@
-export { s as OrTagV3, a as TagColor, T as TagVariant } from '../../OrTag-5d54f37d.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from '../../OrTag-efa7578f.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/esm/v3/index.js

@@ -16,7 +16,7 @@ export { s as OrCode, O as OrCodeLanguages } from './OrCode-5ed69c23.js';
 export { s as OrCollapse } from './OrCollapse-445141ab.js';
 export { s 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-189cb097.js';
 export { s as OrConfirm } from './OrConfirm-f39bd784.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-1bcd39b1.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-fee3c859.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-f2e08564.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-98252eef.js';
@@ -63,7 +63,7 @@ export { s as OrRadioV3 } from './OrRadio-54b6d0de.js';
 export { s as OrSearchV3 } from './OrSearch-9885d178.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-171cad78.js';
 export { s as OrSelect } from './OrSelect-0821b907.js';
-export { s as OrSelectV3 } from './OrSelect-8fbd88bc.js';
+export { s as OrSelectV3 } from './OrSelect-dfa4885f.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-375c85a3.js';
 export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-a62972f5.js';
 export { s as OrSkeletonCircle, a as OrSkeletonRect, b as OrSkeletonText, O as OrSkeletonTextSizes } from './OrSkeletonText-2b1610ce.js';
@@ -79,7 +79,7 @@ export { s as OrTabV3 } from './OrTab-c131cf60.js';
 export { s as OrTabs } from './OrTabs-d3812c11.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-d0ee6cef.js';
 export { s as OrTag } from './OrTag-1b5e43fa.js';
-export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-5d54f37d.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-efa7578f.js';
 export { s as OrTeleport } from './OrTeleportVue3-ad639f12.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-ecb46923.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.70.2-beta.2207.0",
+  "version": "2.70.2-beta.2212.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

package/src/components/or-confirm-v3/OrConfirm.vue

@@ -65,20 +65,17 @@
 </template>
 
 <script lang="ts">
+import { onClickOutside, useMagicKeys, whenever } from '@vueuse/core';
+import { logicAnd } from '@vueuse/math';
 import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
-import { OrButtonV3 as OrButton, ButtonColor } from '../or-button-v3';
-import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
+import { ButtonColor, OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrInputV3 as OrInput } from '../or-input-v3';
-import { useMagicKeys, whenever } from '@vueuse/core';
-import { logicAnd } from '@vueuse/math';
+import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
 import { ConfirmType } from './props';
 import {
-  ConfirmFooterTypes,
-  ConfirmFooter,
-  ConfirmHeader,
-  ConfirmInput,
-  ConfirmRoot,
-  ConfirmFooterButtons,
+ConfirmFooter, ConfirmFooterButtons, ConfirmFooterTypes, ConfirmHeader,
+ConfirmInput,
+ConfirmRoot
 } from './styles';
 
 export default defineComponent({
@@ -261,6 +258,10 @@ export default defineComponent({
       ...ConfirmFooterButtons,
     ]);
 
+    // #region Click Outside
+    onClickOutside(root, close);
+    // #endregion
+
     return {
       root,
       confirmationInput,

package/src/components/or-confirm-v3/styles.ts

@@ -1,14 +1,21 @@
 import { ConfirmType } from './props';
 
 export const ConfirmRoot: string[] = [
+  // 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',
@@ -71,6 +78,9 @@ export const ConfirmFooterTypes: Record<ConfirmType, string[]> = {
 };
 
 export const ConfirmFooterButtons: string[] = [
+  // Layout
+  'grow',
+
   // Box
-  'w-[128px]',
+  'w-auto md:w-[128px]',
 ];

package/src/components/or-tag-v3/styles.ts

@@ -49,9 +49,6 @@ export const TagRootColors: Record<TagColor, string[]> = {
     // Theme
     'theme-preset-2-primary',
     'dark:theme-preset-2-primary-dark',
-
-    'theme-foreground-default',
-    'dark:theme-foreground-default-dark',
   ],
 
   'danger': [