@onereach/ui-components 2.60.0 → 2.60.1-beta.1846.0

package/dist/v3/index52.js

@@ -1,15 +1,15 @@
-export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-9e7e5d16.js';
+export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-7ef1b4e7.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import './OrIconButton-54618375.js';
+import './OrIconButton-f9226adf.js';
 import './OrIcon-b3906e35.js';
 import 'vue';
-import './OrTooltip-3928dfdc.js';
-import './OrPopover-f49b5714.js';
+import './OrTooltip-30e05f9e.js';
+import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';
 import './useResponsive-a02e95b7.js';
-import './OrBottomSheet-20a6e3ee.js';
+import './OrBottomSheet-9de57dd0.js';
 import './OrOverlay-27050c19.js';
 import './OrTeleport.vue3-8099178c.js';

package/dist/v3/index56.js

@@ -1,11 +1,11 @@
-export { s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant } from './OrPopover-f49b5714.js';
+export { s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant } from './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import '@vueuse/core';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import './useElevation-0e973238.js';
 import './useResponsive-a02e95b7.js';
-import './OrBottomSheet-20a6e3ee.js';
+import './OrBottomSheet-9de57dd0.js';
 import './OrOverlay-27050c19.js';
 import './OrTeleport.vue3-8099178c.js';
 import 'vue';

package/dist/v3/index61.js

@@ -1,7 +1,7 @@
-export { s as OrRadioV3 } from './OrRadio-d7382a18.js';
+export { s as OrRadioV3 } from './OrRadio-0c1883f2.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import './OrLabel-8cada750.js';
+import './OrLabel-7d4fe80b.js';
 import 'vue';
 import './style-inject.es-4c6f2515.js';

package/dist/v3/index62.js

@@ -1,21 +1,21 @@
-export { s as OrSearchV3 } from './OrSearch-d7c4ed11.js';
-export { a as SearchSize } from './OrInputBox-f44f1f5f.js';
+export { s as OrSearchV3 } from './OrSearch-e27cadbf.js';
+export { a as SearchSize } from './OrInputBox-634230b1.js';
 import 'vue-demi';
 import '@vueuse/core';
 import './useClassAttribute-47fdb016.js';
-import './OrInput-5e4c5c9a.js';
+import './OrInput-f51916d4.js';
 import './OrError-19a62a18.js';
 import 'vue';
 import './OrHint-73835593.js';
-import './OrIconButton-54618375.js';
+import './OrIconButton-f9226adf.js';
 import './OrIcon-b3906e35.js';
-import './OrTooltip-3928dfdc.js';
-import './OrPopover-f49b5714.js';
+import './OrTooltip-30e05f9e.js';
+import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';
 import './useResponsive-a02e95b7.js';
-import './OrBottomSheet-20a6e3ee.js';
+import './OrBottomSheet-9de57dd0.js';
 import './OrOverlay-27050c19.js';
 import './OrTeleport.vue3-8099178c.js';
-import './OrLabel-8cada750.js';
+import './OrLabel-7d4fe80b.js';
 import './style-inject.es-4c6f2515.js';

package/dist/v3/index64.js

@@ -1,26 +1,26 @@
-export { s as OrSelectV3 } from './OrSelect-d5376a93.js';
-export { a as SelectSize } from './OrInputBox-f44f1f5f.js';
+export { s as OrSelectV3 } from './OrSelect-4cd90c6b.js';
+export { a as SelectSize } from './OrInputBox-634230b1.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import './useOverflow-ac506c65.js';
 import '@vueuse/core';
-import './OrCheckbox-3bdd62b7.js';
-import './OrLabel-8cada750.js';
+import './OrCheckbox-a20fcc04.js';
+import './OrLabel-7d4fe80b.js';
 import 'vue';
 import './style-inject.es-4c6f2515.js';
 import './OrError-19a62a18.js';
 import './OrExpansionPanel-1e2a6375.js';
 import './OrIcon-b3906e35.js';
 import './OrHint-73835593.js';
-import './OrInput-5e4c5c9a.js';
-import './OrIconButton-54618375.js';
-import './OrTooltip-3928dfdc.js';
-import './OrPopover-f49b5714.js';
+import './OrInput-f51916d4.js';
+import './OrIconButton-f9226adf.js';
+import './OrTooltip-30e05f9e.js';
+import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';
 import './useResponsive-a02e95b7.js';
-import './OrBottomSheet-20a6e3ee.js';
+import './OrBottomSheet-9de57dd0.js';
 import './OrOverlay-27050c19.js';
 import './OrTeleport.vue3-8099178c.js';
-import './OrMenuItem-f7d575ba.js';
-import './OrTag-58145d09.js';
+import './OrMenuItem-8773d073.js';
+import './OrTag-60585386.js';

package/dist/v3/index66.js

@@ -1,4 +1,4 @@
-export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-96f8b7c3.js';
+export { O as OrSidebarPlacement, s as OrSidebarV3 } from './OrSidebar-a62972f5.js';
 import '@vueuse/core';
 import 'lodash';
 import 'vue-demi';

package/dist/v3/index72.js

@@ -1,8 +1,8 @@
-export { s as OrSwitchV3 } from './OrSwitch-23608182.js';
+export { s as OrSwitchV3 } from './OrSwitch-ec454b76.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import './OrLabel-8cada750.js';
+import './OrLabel-7d4fe80b.js';
 import 'vue';
 import './OrLoader-60943812.js';
 import './style-inject.es-4c6f2515.js';

package/dist/v3/index77.js

@@ -1,16 +1,16 @@
-export { s as OrTabsV3, T as TabsVariant } from './OrTabs-bfcbbd53.js';
+export { s as OrTabsV3, T as TabsVariant } from './OrTabs-194ca950.js';
 import '@vueuse/core';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import './OrIcon-b3906e35.js';
 import 'vue';
-import './OrMenuItem-f7d575ba.js';
-import './OrMenu-e9a72243.js';
-import './OrPopover-f49b5714.js';
+import './OrMenuItem-8773d073.js';
+import './OrMenu-75ef8635.js';
+import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';
 import './useResponsive-a02e95b7.js';
-import './OrBottomSheet-20a6e3ee.js';
+import './OrBottomSheet-9de57dd0.js';
 import './OrOverlay-27050c19.js';
 import './OrTeleport.vue3-8099178c.js';
 import './OrTab-97044946.js';

package/dist/v3/index79.js

@@ -1,15 +1,15 @@
-export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-58145d09.js';
+export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-60585386.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import './OrIconButton-54618375.js';
+import './OrIconButton-f9226adf.js';
 import './OrIcon-b3906e35.js';
 import 'vue';
-import './OrTooltip-3928dfdc.js';
-import './OrPopover-f49b5714.js';
+import './OrTooltip-30e05f9e.js';
+import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';
 import './useResponsive-a02e95b7.js';
-import './OrBottomSheet-20a6e3ee.js';
+import './OrBottomSheet-9de57dd0.js';
 import './OrOverlay-27050c19.js';
 import './OrTeleport.vue3-8099178c.js';

package/dist/v3/index8.js

@@ -1,4 +1,4 @@
-export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-7e436ca9.js';
+export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-12b36e89.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/v3/index83.js

@@ -1,10 +1,10 @@
-export { s as OrTextareaV3 } from './OrTextarea-fcfa253a.js';
-export { a as TextareaSize } from './OrInputBox-f44f1f5f.js';
+export { s as OrTextareaV3 } from './OrTextarea-09aa33dc.js';
+export { a as TextareaSize } from './OrInputBox-634230b1.js';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
 import './OrError-19a62a18.js';
 import 'vue';
 import './OrHint-73835593.js';
-import './OrLabel-8cada750.js';
+import './OrLabel-7d4fe80b.js';
 import './style-inject.es-4c6f2515.js';

package/dist/v3/index87.js

@@ -1,18 +1,18 @@
-export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-59395ba4.js';
+export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-e4403486.js';
 export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-0665462d.js';
 import '@vueuse/core';
 import 'vue-demi';
 import './OrTeleport.vue3-8099178c.js';
 import 'vue';
-import './OrIconButton-54618375.js';
+import './OrIconButton-f9226adf.js';
 import './useClassAttribute-47fdb016.js';
 import './OrIcon-b3906e35.js';
-import './OrTooltip-3928dfdc.js';
-import './OrPopover-f49b5714.js';
+import './OrTooltip-30e05f9e.js';
+import './OrPopover-3525c670.js';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';
 import './useResponsive-a02e95b7.js';
-import './OrBottomSheet-20a6e3ee.js';
+import './OrBottomSheet-9de57dd0.js';
 import './OrOverlay-27050c19.js';
 import './OrLoader-60943812.js';
 import './style-inject.es-4c6f2515.js';

package/dist/v3/index90.js

@@ -1,5 +1,5 @@
-export { s as OrTooltipV3 } from './OrTooltip-3928dfdc.js';
-export { P as TooltipPlacement } from './OrPopover-f49b5714.js';
+export { s as OrTooltipV3 } from './OrTooltip-30e05f9e.js';
+export { P as TooltipPlacement } from './OrPopover-3525c670.js';
 import '@vueuse/core';
 import 'vue-demi';
 import './useClassAttribute-47fdb016.js';
@@ -7,6 +7,6 @@ import 'vue';
 import '@floating-ui/dom';
 import './useElevation-0e973238.js';
 import './useResponsive-a02e95b7.js';
-import './OrBottomSheet-20a6e3ee.js';
+import './OrBottomSheet-9de57dd0.js';
 import './OrOverlay-27050c19.js';
 import './OrTeleport.vue3-8099178c.js';

package/dist/v3/{types-59395ba4.js → types-e4403486.js}

@@ -2,7 +2,7 @@ import { useToggle } from '@vueuse/core';
 import { defineComponent, ref, computed, onBeforeMount, onBeforeUnmount, nextTick } from 'vue-demi';
 import { s as script$4 } from './OrTeleport.vue3-8099178c.js';
 import { T as ToastType, P as PositionsX, b as PositionsY, c as TransitionType, d as useToastEventBus, a as useQueue } from './useToast-0665462d.js';
-import { s as script$2 } from './OrIconButton-54618375.js';
+import { s as script$2 } from './OrIconButton-f9226adf.js';
 import { s as script$3 } from './OrLoader-60943812.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, toDisplayString, createElementVNode, createBlock, withModifiers, withCtx, TransitionGroup, Fragment, renderList, mergeProps } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
@@ -13,7 +13,7 @@ const ToastRoot = [
 // Box
 'w-[343px] md:w-[512px]', 'rounded-md',
 // Sizing
-'px-md', 'py-md', 'gap-[16px]',
+'px-md', 'py-md', 'gap-md',
 // Typography
 'typography-caption-regular',
 // Theme
@@ -24,16 +24,16 @@ const ToastContainer = [
 // Layout
 'flex', 'flex-col', 'items-center',
 // Sizing
-'gap-[8px]',
+'gap-sm',
 // Overflow
 'overflow-hidden'];
 const ToastContainerPositions = {
-  'left-top': ['left-[16px] md:left-[24px]', 'top-[16px] md:top-[24px]'],
-  'center-top': ['top-[16px] md:top-[24px]'],
-  'right-top': ['right-[16px] md:right-[24px]', 'top-[16px] md:top-[24px]'],
-  'left-bottom': ['left-[16px] md:left-[24px]', 'bottom-[16px] md:bottom-[24px]'],
-  'center-bottom': ['bottom-[16px] md:bottom-[24px]'],
-  'right-bottom': ['right-[16px] md:right-[24px]', 'bottom-[16px] md:bottom-[24px]']
+  'left-top': ['left-md md:left-lg', 'top-md md:top-lg'],
+  'center-top': ['top-md md:top-lg'],
+  'right-top': ['right-md md:right-lg', 'top-md md:top-lg'],
+  'left-bottom': ['left-md md:left-lg', 'bottom-md md:bottom-lg'],
+  'center-bottom': ['bottom-md md:bottom-lg'],
+  'right-bottom': ['right-md md:right-lg', 'bottom-md md:bottom-lg']
 };
 const messageStyleVariant = {
   [ToastType.Success]: ['typography-caption-regular'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.60.0",
+  "version": "2.60.1-beta.1846.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -29,7 +29,7 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.28.0",
+    "@onereach/styles": "^2.28.1-beta.1846.0",
     "@splidejs/splide": "4.0.6",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",
@@ -75,6 +75,5 @@
     "portal-vue": {
       "optional": true
     }
-  },
-  "gitHead": "a6d8285aee8f32ec3db7d20f5488d71de5dc45bb"
+  }
 }

package/src/components/or-bottom-sheet-v3/styles.ts

@@ -35,12 +35,13 @@ export const BottomSheetHandle: string[] = [
   'justify-center',
 
   // Box
-  'after:w-[48px]',
-  'after:h-[4px]',
+  'after:w-2xl',
+  'after:h-xs',
   'after:rounded-full',
 
   // Sizing
-  'p-[8px]',
+  'px-sm',
+  'py-sm',
 
   // Interactivity
   'cursor-grab',
@@ -55,8 +56,8 @@ export const BottomSheetHeader: string[] = [
   'empty:hidden',
 
   // Sizing
-  'px-[24px]',
-  'py-[16px]',
+  'px-lg',
+  'py-md',
 
   // Typography
   'typography-headline-3',

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

@@ -19,9 +19,9 @@ export const ButtonRoot: string[] = [
 export const ButtonRootVariants: Record<ButtonVariant, string[]> = {
   'contained': [
     // Sizing
-    'px-[16px] md:px-[16px]',
-    'py-[12px] md:py-[8px]',
-    'gap-[12px] md:gap-[8px]',
+    'px-md md:px-md',
+    'py-sm+ md:py-sm',
+    'gap-sm+ md:gap-sm',
 
     // Theme
     'enabled:shadow-button',
@@ -32,19 +32,19 @@ export const ButtonRootVariants: Record<ButtonVariant, string[]> = {
     // Sizing
     'px-[15px] md:px-[15px]',
     'py-[11px] md:py-[7px]',
-    'gap-[12px] md:gap-[8px]',
+    'gap-sm+ md:gap-sm',
   ],
 
   'text': [
     // Sizing
-    'px-[16px] md:px-[16px]',
-    'py-[12px] md:py-[8px]',
-    'gap-[12px] md:gap-[8px]',
+    'px-md md:px-md',
+    'py-sm+ md:py-sm',
+    'gap-sm+ md:gap-sm',
   ],
 
   'link': [
     // Sizing
-    'gap-[8px] md:gap-[4px]',
+    'gap-sm md:gap-xs',
   ],
 };
 

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

@@ -7,8 +7,8 @@ export const CardRoot: string[] = [
   'rounded-md',
 
   // Sizing
-  'px-[16px]',
-  'py-[16px]',
+  'px-md',
+  'py-md',
   'gap-[10px]',
 
   // Typography

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

@@ -4,7 +4,7 @@ export const CheckboxRoot: string[] = [
   'items-center',
 
   // Sizing
-  'gap-[12px] md:gap-[8px]',
+  'gap-sm+ md:gap-sm',
 ];
 
 export const CheckboxControl: string[] = [
@@ -14,8 +14,8 @@ export const CheckboxControl: string[] = [
   'justify-center',
 
   // Box
-  'w-[20px] md:w-[16px]',
-  'h-[20px] md:h-[16px]',
+  'w-md+ md:w-md',
+  'h-md+ md:h-md',
   'rounded-sm',
 
   // Interactivity

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

@@ -11,9 +11,9 @@ export const ConfirmRoot: string[] = [
   'rounded-md',
 
   // Sizing
-  'px-[24px]',
-  'py-[24px]',
-  'gap-[16px]',
+  'px-lg',
+  'py-lg',
+  'gap-md',
 
   // Typography
   'typography-body-2-regular',
@@ -44,7 +44,7 @@ export const ConfirmInput: string[] = [
   'w-full',
 
   // Sizing
-  'mt-[16px]',
+  'mt-md',
 ];
 
 export const ConfirmFooter: string[] = [
@@ -54,7 +54,7 @@ export const ConfirmFooter: string[] = [
   'justify-between',
 
   // Sizing
-  'gap-[16px]',
+  'gap-md',
 ];
 
 export const ConfirmFooterTypes: Record<ConfirmType, string[]> = {

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

@@ -9,9 +9,9 @@ export const ErrorTagRoot: string[] = [
   'rounded-full',
 
   // Sizing
-  'px-[12px] md:px-[8px]',
-  'py-[8px] md:py-[4px]',
-  'gap-[8px] md:gap-[4px]',
+  'px-sm+ md:px-sm',
+  'py-sm md:py-xs',
+  'gap-sm md:gap-xs',
 
   // Interactivity
   'interactivity-none',

package/src/components/or-inline-input-box-v3/styles.ts

@@ -67,10 +67,10 @@ export const InlineInputBoxRoot: string[] = [
 export const InlineInputBoxRootSizes: Record<InlineInputBoxSize, string[]> = {
   'm': [
     // Sizing
-    'activated:children:px-[8px]',
-    'children:py-[4px]',
+    'activated:children:px-sm',
+    'children:py-xs',
 
-    'gap-[16px]',
+    'gap-md',
 
     // Typography
     'typography-headline-2',
@@ -78,10 +78,10 @@ export const InlineInputBoxRootSizes: Record<InlineInputBoxSize, string[]> = {
 
   's': [
     // Sizing
-    'activated:children:px-[8px]',
-    'children:py-[0]',
+    'activated:children:px-sm',
+    'children:py-none',
 
-    'gap-[16px]',
+    'gap-md',
 
     // Typography
     'typography-body-2-regular',

package/src/components/or-inline-input-v3/styles.ts

@@ -25,7 +25,7 @@ export const InlineInputAction: string[] = [
   'items-center',
 
   // Sizing
-  'gap-[8px]',
+  'gap-sm',
 
   // Theme
   'theme-foreground-outline',

package/src/components/or-inline-textarea-v3/styles.ts

@@ -25,7 +25,7 @@ export const InlineTextareaAction: string[] = [
   'items-center',
 
   // Sizing
-  'gap-[8px]',
+  'gap-sm',
 
   // Theme
   'theme-foreground-outline',

package/src/components/or-input-box-v3/styles.ts

@@ -92,12 +92,12 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
     'children:min-h-[34px]',
 
     // Sizing
-    'first-child:pl-[16px] first-child:md:pl-[12px]',
-    'last-child:pr-[16px] last-child:md:pr-[12px]',
+    'first-child:pl-md first-child:md:pl-sm+',
+    'last-child:pr-md last-child:md:pr-sm+',
     'children:pt-[11px] children:md:pt-[7px]',
     'children:pb-[11px] children:md:pb-[6px]',
 
-    'gap-[12px] md:gap-[8px]',
+    'gap-sm+ md:gap-sm',
 
     // Typography
     'typography-body-2-regular',
@@ -108,8 +108,8 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
     'children:min-h-[30px]',
 
     // Sizing
-    'first-child:pl-[8px]',
-    'last-child:pr-[8px]',
+    'first-child:pl-sm',
+    'last-child:pr-sm',
     'children:py-[6px]',
 
     'gap-[6px]',

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

@@ -34,9 +34,6 @@ export const LabelText: string[] = [
   // Content (required)
   'required:after:content-label-required',
 
-  // Sizing
-  'after:ml-2xs',
-
   // Interactivity
   'interactivity-auto !cursor-default',
 ];

package/src/components/or-menu-item-v3/styles.ts

@@ -4,9 +4,9 @@ export const MenuItemRoot: string[] = [
   'items-center',
 
   // Sizing
-  'px-[24px] md:px-[8px]',
-  'py-[12px] md:py-[8px]',
-  'gap-[8px] md:gap-[8px]',
+  'px-lg md:px-sm',
+  'py-sm+ md:py-sm',
+  'gap-sm md:gap-sm',
 
   // Interactivity
   'interactivity-auto',

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

@@ -11,9 +11,9 @@ export const ModalRoot: string[] = [
   'md:rounded-md',
 
   // Sizing
-  'px-[24px]',
-  'py-[24px]',
-  'gap-[16px] md:gap-[24px]',
+  'px-lg',
+  'py-lg',
+  'gap-md md:gap-lg',
 
   // Typography
   'typography-body-2-regular',

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

@@ -9,9 +9,9 @@ export const NotificationRoot: string[] = [
   'rounded-md',
 
   // Sizing
-  'px-[16px]',
-  'py-[16px]',
-  'gap-[16px]',
+  'px-md',
+  'py-md',
+  'gap-md',
 
   // Typography
   'typography-body-2-regular',

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

@@ -10,7 +10,8 @@ export const PopoverBody: string[] = [
   'rounded-md',
 
   // Sizing
-  'm-sm',
+  'mx-sm',
+  'my-sm',
 
   // Theme
   'bg-background',

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

@@ -4,7 +4,7 @@ export const RadioRoot: string[] = [
   'items-center',
 
   // Sizing
-  'gap-[12px] md:gap-[8px]',
+  'gap-sm+ md:gap-sm',
 ];
 
 export const RadioControl: string[] = [
@@ -14,8 +14,8 @@ export const RadioControl: string[] = [
   'justify-center',
 
   // Box
-  'w-[20px] md:w-[16px]',
-  'h-[20px] md:h-[16px]',
+  'w-md+ md:w-md',
+  'h-md+ md:h-md',
   'rounded-full',
 
   // Interactivity
@@ -42,8 +42,8 @@ export const RadioControl: string[] = [
 
 export const RadioControlHandle: string[] = [
   // Box
-  'after:w-[8px] after:md:w-[4px]',
-  'after:h-[8px] after:md:h-[4px]',
+  'after:w-sm after:md:w-xs',
+  'after:h-sm after:md:h-xs',
   'after:rounded-full',
 
   // Theme

package/src/components/or-select-v3/OrSelect.vue

@@ -23,7 +23,7 @@
       ref="inputBox"
       v-dropdown-open="open"
       v-dropdown-close="close"
-      :class="[popoverState === 'open' && 'rounded-b-[0]']"
+      :class="[popoverState === 'open' && 'rounded-b-0']"
       :size="size"
       :invalid="invalid"
       :readonly="readonly"