@onereach/ui-components 8.16.1 → 8.16.2-beta.3856.0

package/dist/bundled/v2/components/OrConfirmV3/OrConfirm.js

@@ -1,6 +1,6 @@
 import { a as useMagicKeys, o as onClickOutside } from '../../index-cc89d6b7.js';
 import { l as logicAnd } from '../../index-017c190e.js';
-import { defineComponent, ref, toRef, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { ConfirmType } from './props.js';
 import { Confirm, ConfirmHeader, ConfirmInput, ConfirmFooter, ConfirmFooterTypes, ConfirmFooterButtons } from './styles.js';
 import __vue_component__$1 from '../OrOverlayV3/OrOverlay.js';
@@ -74,8 +74,13 @@ var script = defineComponent({
     const root = ref();
     const confirmationInput = ref();
     const confirmationButton = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
+    const headerStyles = computed(() => [...ConfirmHeader]);
+    const inputBoxStyles = computed(() => [...ConfirmInput]);
+    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
+    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // State
-    const touched = ref(false);
     const {
       state,
       open,
@@ -83,6 +88,20 @@ var script = defineComponent({
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
+    const touched = ref(false);
+    watch(state, value => {
+      confirmationValue.value = '';
+      if (value === 'open') {
+        touched.value = false;
+      }
+    }, {
+      immediate: true
+    });
+    watch(confirmationValue, value => {
+      if (value.length > 0) {
+        touched.value = true;
+      }
+    });
     const {
       escape,
       enter
@@ -103,18 +122,11 @@ var script = defineComponent({
     }
     function onInputBlur() {
       isInputActive.value = false;
-      touched.value = true;
     }
     // Events
     watch(escape, val => {
       if (val) close();
     });
-    watch(state, value => {
-      if (value === 'closed') {
-        confirmationValue.value = '';
-        touched.value = false;
-      }
-    });
     // types here are used for fixing TS2349
     watch(confirmationInput, val => {
       var _a;
@@ -128,12 +140,6 @@ var script = defineComponent({
       }
     });
     whenever(logicAnd(enter, isInputActive), () => confirm());
-    // Styles
-    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
-    const headerStyles = computed(() => [...ConfirmHeader]);
-    const inputBoxStyles = computed(() => [...ConfirmInput]);
-    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
-    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // #region Click Outside
     onClickOutside(root, close);
     // #endregion

package/dist/bundled/v3/components/OrConfirmV3/OrConfirm.js

@@ -1 +1 @@
-export { s as default } from '../OrConfirmV3-c2eeee5c.js';
+export { s as default } from '../OrConfirmV3-c9d90846.js';

package/dist/bundled/v3/components/OrConfirmV3/index.js

@@ -1 +1 @@
-export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirmV3-c2eeee5c.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirmV3-c9d90846.js';

package/dist/bundled/v3/components/OrConfirmV3/props.js

@@ -1 +1 @@
-export { C as ConfirmType } from '../OrConfirmV3-c2eeee5c.js';
+export { C as ConfirmType } from '../OrConfirmV3-c9d90846.js';

package/dist/bundled/v3/components/OrConfirmV3/styles.js

@@ -1 +1 @@
-export { a as Confirm, d as ConfirmFooter, f as ConfirmFooterButtons, e as ConfirmFooterTypes, b as ConfirmHeader, c as ConfirmInput } from '../OrConfirmV3-c2eeee5c.js';
+export { a as Confirm, d as ConfirmFooter, f as ConfirmFooterButtons, e as ConfirmFooterTypes, b as ConfirmHeader, c as ConfirmInput } from '../OrConfirmV3-c9d90846.js';

package/dist/bundled/v3/components/{OrConfirmV3-c2eeee5c.js → OrConfirmV3-c9d90846.js}

@@ -1,7 +1,7 @@
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createTextVNode, toDisplayString, createElementBlock, createVNode, createCommentVNode } from 'vue';
 import { b as useMagicKeys, w as whenever, o as onClickOutside } from './OrBottomSheetV3-66815f6f.js';
 import { l as logicAnd } from './OrConfirm-f95a3ce6.js';
-import { defineComponent, ref, toRef, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { s as script$1 } from './OrOverlayV3-b2576ca1.js';
 import { s as script$2, B as ButtonColor } from './OrButtonV3-529c4206.js';
 import { s as script$3 } from './OrInputV3-1b3a2135.js';
@@ -120,8 +120,13 @@ var script = defineComponent({
     const root = ref();
     const confirmationInput = ref();
     const confirmationButton = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
+    const headerStyles = computed(() => [...ConfirmHeader]);
+    const inputBoxStyles = computed(() => [...ConfirmInput]);
+    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
+    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // State
-    const touched = ref(false);
     const {
       state,
       open,
@@ -129,6 +134,20 @@ var script = defineComponent({
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
+    const touched = ref(false);
+    watch(state, value => {
+      confirmationValue.value = '';
+      if (value === 'open') {
+        touched.value = false;
+      }
+    }, {
+      immediate: true
+    });
+    watch(confirmationValue, value => {
+      if (value.length > 0) {
+        touched.value = true;
+      }
+    });
     const {
       escape,
       enter
@@ -149,18 +168,11 @@ var script = defineComponent({
     }
     function onInputBlur() {
       isInputActive.value = false;
-      touched.value = true;
     }
     // Events
     watch(escape, val => {
       if (val) close();
     });
-    watch(state, value => {
-      if (value === 'closed') {
-        confirmationValue.value = '';
-        touched.value = false;
-      }
-    });
     // types here are used for fixing TS2349
     watch(confirmationInput, val => {
       var _a;
@@ -174,12 +186,6 @@ var script = defineComponent({
       }
     });
     whenever(logicAnd(enter, isInputActive), () => confirm());
-    // Styles
-    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
-    const headerStyles = computed(() => [...ConfirmHeader]);
-    const inputBoxStyles = computed(() => [...ConfirmInput]);
-    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
-    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // #region Click Outside
     onClickOutside(root, close);
     // #endregion

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

@@ -22,7 +22,7 @@ export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k
 export { s as OrCombinedInputV3 } from './OrCombinedInputV3-795e8cf2.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateRangePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize, I as TimeRangePickerSize } from './OrInputBoxV3-ddd117f0.js';
 export { s as OrConfirm } from './OrConfirm-f95a3ce6.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirmV3-c2eeee5c.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirmV3-c9d90846.js';
 export { OrContextMenuV3 } from './OrContextMenuV3/index.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopoverV3-a7d181a4.js';
 export { s as OrDateFormatV3 } from './OrDateFormatV3-8456e52e.js';

package/dist/bundled/v3/index.js

@@ -13,7 +13,7 @@ export { C as CodeLanguage, s as OrCodeV3 } from './components/OrCodeV3-7ecb46ca
 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 './components/OrColorPicker-2271c176.js';
 export { s as OrCombinedInputV3 } from './components/OrCombinedInputV3-795e8cf2.js';
 export { s as OrConfirm } from './components/OrConfirm-f95a3ce6.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './components/OrConfirmV3-c2eeee5c.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './components/OrConfirmV3-c9d90846.js';
 export { OrContextMenuV3 } from './components/OrContextMenuV3/index.js';
 export { s as OrDateFormatV3 } from './components/OrDateFormatV3-8456e52e.js';
 export { s as OrDatePickerV3 } from './components/OrDatePickerV3-a3e534f7.js';

package/dist/esm/v2/{OrConfirm-dc9219de.js → OrConfirm-a9568ff9.js}

@@ -1,6 +1,6 @@
 import { useMagicKeys, whenever, onClickOutside } from '@vueuse/core';
 import { logicAnd } from '@vueuse/math';
-import { defineComponent, ref, toRef, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import './dom-aecadd9a.js';
 import { u as usePopoverState } from './usePopoverState-5033b9cb.js';
 import '@onereach/styles/tailwind/plugins/core';
@@ -124,8 +124,13 @@ var script = defineComponent({
     const root = ref();
     const confirmationInput = ref();
     const confirmationButton = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
+    const headerStyles = computed(() => [...ConfirmHeader]);
+    const inputBoxStyles = computed(() => [...ConfirmInput]);
+    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
+    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // State
-    const touched = ref(false);
     const {
       state,
       open,
@@ -133,6 +138,20 @@ var script = defineComponent({
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
+    const touched = ref(false);
+    watch(state, value => {
+      confirmationValue.value = '';
+      if (value === 'open') {
+        touched.value = false;
+      }
+    }, {
+      immediate: true
+    });
+    watch(confirmationValue, value => {
+      if (value.length > 0) {
+        touched.value = true;
+      }
+    });
     const {
       escape,
       enter
@@ -153,18 +172,11 @@ var script = defineComponent({
     }
     function onInputBlur() {
       isInputActive.value = false;
-      touched.value = true;
     }
     // Events
     watch(escape, val => {
       if (val) close();
     });
-    watch(state, value => {
-      if (value === 'closed') {
-        confirmationValue.value = '';
-        touched.value = false;
-      }
-    });
     // types here are used for fixing TS2349
     watch(confirmationInput, val => {
       var _a;
@@ -178,12 +190,6 @@ var script = defineComponent({
       }
     });
     whenever(logicAnd(enter, isInputActive), () => confirm());
-    // Styles
-    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
-    const headerStyles = computed(() => [...ConfirmHeader]);
-    const inputBoxStyles = computed(() => [...ConfirmInput]);
-    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
-    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // #region Click Outside
     onClickOutside(root, close);
     // #endregion

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

@@ -33,7 +33,7 @@ export { _ as OrCombinedInputV3 } from '../OrCombinedInput-27179a1d.js';
 export { _ as OrInputBoxV3 } from '../OrInputBox-140c344d.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateRangePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize, I as TimeRangePickerSize } from '../OrInputBox.vue_rollup-plugin-vue_script-65ebcf4d.js';
 export { _ as OrConfirm } from '../OrConfirm-f3f7ec59.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-dc9219de.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-a9568ff9.js';
 export { _ as OrContextMenuV3 } from '../OrContextMenu-7292aca0.js';
 export { _ as OrMenuV3 } from '../OrMenu-6fa468e0.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-07b82c80.js';

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

@@ -1,4 +1,4 @@
-export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-dc9219de.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-a9568ff9.js';
 import '@vueuse/core';
 import '@vueuse/math';
 import 'vue-demi';

package/dist/esm/v2/index.js

@@ -33,7 +33,7 @@ export { _ as OrCombinedInputV3 } from './OrCombinedInput-27179a1d.js';
 export { _ as OrInputBoxV3 } from './OrInputBox-140c344d.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateRangePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize, I as TimeRangePickerSize } from './OrInputBox.vue_rollup-plugin-vue_script-65ebcf4d.js';
 export { _ as OrConfirm } from './OrConfirm-f3f7ec59.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-dc9219de.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-a9568ff9.js';
 export { _ as OrContextMenuV3 } from './OrContextMenu-7292aca0.js';
 export { _ as OrMenuV3 } from './OrMenu-6fa468e0.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-07b82c80.js';

package/dist/esm/v3/{OrConfirm-a999f6ce.js → OrConfirm-3846fc7c.js}

@@ -1,6 +1,6 @@
 import { useMagicKeys, whenever, onClickOutside } from '@vueuse/core';
 import { logicAnd } from '@vueuse/math';
-import { defineComponent, ref, toRef, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import './dom-aecadd9a.js';
 import { u as usePopoverState } from './usePopoverState-5033b9cb.js';
 import '@onereach/styles/tailwind/plugins/core';
@@ -123,8 +123,13 @@ var script = defineComponent({
     const root = ref();
     const confirmationInput = ref();
     const confirmationButton = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
+    const headerStyles = computed(() => [...ConfirmHeader]);
+    const inputBoxStyles = computed(() => [...ConfirmInput]);
+    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
+    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // State
-    const touched = ref(false);
     const {
       state,
       open,
@@ -132,6 +137,20 @@ var script = defineComponent({
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
+    const touched = ref(false);
+    watch(state, value => {
+      confirmationValue.value = '';
+      if (value === 'open') {
+        touched.value = false;
+      }
+    }, {
+      immediate: true
+    });
+    watch(confirmationValue, value => {
+      if (value.length > 0) {
+        touched.value = true;
+      }
+    });
     const {
       escape,
       enter
@@ -152,18 +171,11 @@ var script = defineComponent({
     }
     function onInputBlur() {
       isInputActive.value = false;
-      touched.value = true;
     }
     // Events
     watch(escape, val => {
       if (val) close();
     });
-    watch(state, value => {
-      if (value === 'closed') {
-        confirmationValue.value = '';
-        touched.value = false;
-      }
-    });
     // types here are used for fixing TS2349
     watch(confirmationInput, val => {
       var _a;
@@ -177,12 +189,6 @@ var script = defineComponent({
       }
     });
     whenever(logicAnd(enter, isInputActive), () => confirm());
-    // Styles
-    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
-    const headerStyles = computed(() => [...ConfirmHeader]);
-    const inputBoxStyles = computed(() => [...ConfirmInput]);
-    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
-    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // #region Click Outside
     onClickOutside(root, close);
     // #endregion

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

@@ -30,7 +30,7 @@ export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k
 export { s as OrCombinedInputV3 } from '../OrCombinedInput-aeac0bb1.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateRangePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize, I as TimeRangePickerSize } from '../OrInputBox-8c1a29dd.js';
 export { s as OrConfirm } from '../OrConfirm-859ff5a2.js';
-export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-a999f6ce.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-3846fc7c.js';
 export { s as OrContextMenuV3 } from '../OrContextMenu-8468ecfd.js';
 export { s as OrMenuV3 } from '../OrMenu-690d1376.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-88b8aa2a.js';

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

@@ -1,4 +1,4 @@
-export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-a999f6ce.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-3846fc7c.js';
 import '@vueuse/core';
 import '@vueuse/math';
 import 'vue-demi';

package/dist/esm/v3/index.js

@@ -30,7 +30,7 @@ export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k
 export { s as OrCombinedInputV3 } from './OrCombinedInput-aeac0bb1.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateRangePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize, I as TimeRangePickerSize } from './OrInputBox-8c1a29dd.js';
 export { s as OrConfirm } from './OrConfirm-859ff5a2.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-a999f6ce.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-3846fc7c.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-8468ecfd.js';
 export { s as OrMenuV3 } from './OrMenu-690d1376.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-88b8aa2a.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.16.1",
+  "version": "8.16.2-beta.3856.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -176,6 +176,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "99292ae49e945d7f918bab350aaa4f46e5054398"
+  }
 }

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

@@ -166,14 +166,52 @@ export default defineComponent({
   setup(props, context) {
     // Refs
     const root = ref<HTMLElement>();
+
     const confirmationInput = ref<InstanceType<typeof OrInput>>();
     const confirmationButton = ref<InstanceType<typeof OrButton>>();
 
+    // Styles
+    const rootStyles = computed(() => [
+      'or-confirm-v3',
+      ...Confirm,
+    ]);
+
+    const headerStyles = computed(() => [
+      ...ConfirmHeader,
+    ]);
+
+    const inputBoxStyles = computed(() => [
+      ...ConfirmInput,
+    ]);
+
+    const footerStyles = computed(() => [
+      ...ConfirmFooter,
+      ...ConfirmFooterTypes[props.confirmType],
+    ]);
+
+    const buttonsStyles = computed(() => [
+      ...ConfirmFooterButtons,
+    ]);
+
     // State
-    const touched = ref(false);
     const { state, open, close } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isInputActive = ref(false);
-    const confirmationValue = ref<string>('');
+    const confirmationValue = ref('');
+    const touched = ref(false);
+
+    watch(state, (value) => {
+      confirmationValue.value = '';
+
+      if (value === 'open') {
+        touched.value = false;
+      }
+    }, { immediate: true });
+
+    watch(confirmationValue, (value) => {
+      if (value.length > 0) {
+        touched.value = true;
+      }
+    });
 
     const { escape, enter } = useMagicKeys();
 
@@ -200,7 +238,6 @@ export default defineComponent({
 
     function onInputBlur(): void {
       isInputActive.value = false;
-      touched.value = true;
     }
 
     // Events
@@ -208,13 +245,6 @@ export default defineComponent({
       if (val) close();
     });
 
-    watch(state, (value) => {
-      if (value === 'closed') {
-        confirmationValue.value = '';
-        touched.value = false;
-      }
-    });
-
     // types here are used for fixing TS2349
     watch(confirmationInput as any, (val: InstanceType<typeof OrInput>) =>
       (val?.focus as (() => void) | undefined)?.());
@@ -229,29 +259,6 @@ export default defineComponent({
 
     whenever(logicAnd(enter, isInputActive), () => confirm());
 
-    // Styles
-    const rootStyles = computed(() => [
-      'or-confirm-v3',
-      ...Confirm,
-    ]);
-
-    const headerStyles = computed(() => [
-      ...ConfirmHeader,
-    ]);
-
-    const inputBoxStyles = computed(() => [
-      ...ConfirmInput,
-    ]);
-
-    const footerStyles = computed(() => [
-      ...ConfirmFooter,
-      ...ConfirmFooterTypes[props.confirmType],
-    ]);
-
-    const buttonsStyles = computed(() => [
-      ...ConfirmFooterButtons,
-    ]);
-
     // #region Click Outside
     onClickOutside(root, close);
     // #endregion