@onereach/ui-components 2.60.1-beta.1845.0 → 2.60.1-beta.1847.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (136) hide show
  1. package/dist/v2/{OrBottomSheet-3ce1529c.js → OrBottomSheet-f09adbbb.js} +3 -3
  2. package/dist/v2/{OrButton-52618150.js → OrButton-eb895669.js} +4 -4
  3. package/dist/v2/{OrCard-657f6d1f.js → OrCard-1d904e72.js} +1 -1
  4. package/dist/v2/{OrCheckbox-3b857df7.js → OrCheckbox-eb833bab.js} +2 -2
  5. package/dist/v2/{OrConfirm-d581c53a.js → OrConfirm-d561bf82.js} +5 -5
  6. package/dist/v2/{OrErrorTag-5306b7dd.js → OrErrorTag-9d592185.js} +1 -1
  7. package/dist/v2/{OrIconButton-42c8459c.js → OrIconButton-1b34f3fa.js} +2 -2
  8. package/dist/v2/{OrInlineInput-49630a02.js → OrInlineInput-e754cb9f.js} +3 -3
  9. package/dist/v2/{OrInlineInputBox-cac18547.js → OrInlineInputBox-6a15ea2b.js} +2 -2
  10. package/dist/v2/{OrInlineTextarea-b2185392.js → OrInlineTextarea-7dc58bb1.js} +3 -3
  11. package/dist/v2/{OrInput-a53e0166.js → OrInput-0dcfba2a.js} +2 -2
  12. package/dist/v2/{OrInputBox-f4b747ab.js → OrInputBox-208dceac.js} +2 -2
  13. package/dist/v2/{OrMenu-adbfd24f.js → OrMenu-bb81644d.js} +1 -1
  14. package/dist/v2/{OrMenuItem-d82ba657.js → OrMenuItem-3a28db7b.js} +1 -1
  15. package/dist/v2/{OrModal-ef90cb0f.js → OrModal-1ed53441.js} +2 -2
  16. package/dist/v2/{OrNotification-d2f13c11.js → OrNotification-e2d510b3.js} +2 -2
  17. package/dist/v2/{OrPopover-06682070.js → OrPopover-9080fc00.js} +2 -2
  18. package/dist/v2/{OrRadio-1b0a3149.js → OrRadio-4ba56887.js} +3 -3
  19. package/dist/v2/{OrSearch-c1058507.js → OrSearch-45ea8c33.js} +2 -2
  20. package/dist/v2/{OrSelect-4278e127.js → OrSelect-21247104.js} +8 -8
  21. package/dist/v2/{OrSidebar-2522cce0.js → OrSidebar-fabc7bc9.js} +4 -4
  22. package/dist/v2/{OrSwitch-bf5b1f82.js → OrSwitch-21a7e693.js} +1 -1
  23. package/dist/v2/{OrTabs-50dd04ee.js → OrTabs-b4a9740b.js} +4 -4
  24. package/dist/v2/{OrTag-6b6ff503.js → OrTag-c42c3f9c.js} +2 -2
  25. package/dist/v2/{OrTextarea-d1a481ed.js → OrTextarea-8773d494.js} +1 -1
  26. package/dist/v2/{OrTooltip-e9fd5e45.js → OrTooltip-caeac590.js} +2 -2
  27. package/dist/v2/index.js +27 -27
  28. package/dist/v2/index11.js +1 -1
  29. package/dist/v2/index14.js +1 -1
  30. package/dist/v2/index2.js +27 -27
  31. package/dist/v2/index20.js +8 -8
  32. package/dist/v2/index23.js +1 -1
  33. package/dist/v2/index31.js +4 -4
  34. package/dist/v2/index33.js +1 -1
  35. package/dist/v2/index34.js +6 -6
  36. package/dist/v2/index36.js +6 -6
  37. package/dist/v2/index37.js +1 -1
  38. package/dist/v2/index38.js +6 -6
  39. package/dist/v2/index47.js +1 -1
  40. package/dist/v2/index48.js +3 -3
  41. package/dist/v2/index5.js +1 -1
  42. package/dist/v2/index50.js +5 -5
  43. package/dist/v2/index52.js +5 -5
  44. package/dist/v2/index56.js +2 -2
  45. package/dist/v2/index61.js +1 -1
  46. package/dist/v2/index62.js +7 -7
  47. package/dist/v2/index64.js +10 -10
  48. package/dist/v2/index66.js +1 -1
  49. package/dist/v2/index72.js +1 -1
  50. package/dist/v2/index77.js +5 -5
  51. package/dist/v2/index79.js +5 -5
  52. package/dist/v2/index8.js +1 -1
  53. package/dist/v2/index83.js +2 -2
  54. package/dist/v2/index87.js +5 -5
  55. package/dist/v2/index90.js +3 -3
  56. package/dist/v2/{types-96ec9445.js → types-8ea6482d.js} +9 -9
  57. package/dist/v3/{OrBottomSheet-20a6e3ee.js → OrBottomSheet-9de57dd0.js} +3 -3
  58. package/dist/v3/{OrButton-7e436ca9.js → OrButton-12b36e89.js} +4 -4
  59. package/dist/v3/{OrCard-90d2c5cf.js → OrCard-b63658a8.js} +1 -1
  60. package/dist/v3/{OrCheckbox-5d6be1d4.js → OrCheckbox-a20fcc04.js} +2 -2
  61. package/dist/v3/{OrConfirm-0975a9c8.js → OrConfirm-a9d3f157.js} +5 -5
  62. package/dist/v3/{OrErrorTag-6bc94241.js → OrErrorTag-ceefd643.js} +1 -1
  63. package/dist/v3/{OrIconButton-54618375.js → OrIconButton-f9226adf.js} +2 -2
  64. package/dist/v3/{OrInlineInput-c8523c5a.js → OrInlineInput-8f473205.js} +3 -3
  65. package/dist/v3/{OrInlineInputBox-731e0731.js → OrInlineInputBox-1b473796.js} +2 -2
  66. package/dist/v3/{OrInlineTextarea-2e3359d4.js → OrInlineTextarea-86f4506d.js} +3 -3
  67. package/dist/v3/{OrInput-63602dfc.js → OrInput-f51916d4.js} +2 -2
  68. package/dist/v3/{OrInputBox-f44f1f5f.js → OrInputBox-634230b1.js} +2 -2
  69. package/dist/v3/{OrMenu-e9a72243.js → OrMenu-75ef8635.js} +1 -1
  70. package/dist/v3/{OrMenuItem-f7d575ba.js → OrMenuItem-8773d073.js} +1 -1
  71. package/dist/v3/{OrModal-17b49caa.js → OrModal-0713f927.js} +2 -2
  72. package/dist/v3/{OrNotification-9e7e5d16.js → OrNotification-7ef1b4e7.js} +2 -2
  73. package/dist/v3/{OrPopover-f49b5714.js → OrPopover-3525c670.js} +2 -2
  74. package/dist/v3/{OrRadio-b2afbb5f.js → OrRadio-0c1883f2.js} +3 -3
  75. package/dist/v3/{OrSearch-4e018c6a.js → OrSearch-e27cadbf.js} +2 -2
  76. package/dist/v3/{OrSelect-b6c314cf.js → OrSelect-4cd90c6b.js} +8 -8
  77. package/dist/v3/{OrSidebar-96f8b7c3.js → OrSidebar-a62972f5.js} +4 -4
  78. package/dist/v3/{OrSwitch-63976c00.js → OrSwitch-ec454b76.js} +1 -1
  79. package/dist/v3/{OrTabs-bfcbbd53.js → OrTabs-194ca950.js} +4 -4
  80. package/dist/v3/{OrTag-58145d09.js → OrTag-60585386.js} +2 -2
  81. package/dist/v3/{OrTextarea-47380706.js → OrTextarea-09aa33dc.js} +1 -1
  82. package/dist/v3/{OrTooltip-3928dfdc.js → OrTooltip-30e05f9e.js} +2 -2
  83. package/dist/v3/index.js +27 -27
  84. package/dist/v3/index11.js +1 -1
  85. package/dist/v3/index14.js +1 -1
  86. package/dist/v3/index2.js +27 -27
  87. package/dist/v3/index20.js +8 -8
  88. package/dist/v3/index23.js +1 -1
  89. package/dist/v3/index31.js +4 -4
  90. package/dist/v3/index33.js +1 -1
  91. package/dist/v3/index34.js +6 -6
  92. package/dist/v3/index36.js +6 -6
  93. package/dist/v3/index37.js +1 -1
  94. package/dist/v3/index38.js +6 -6
  95. package/dist/v3/index47.js +1 -1
  96. package/dist/v3/index48.js +3 -3
  97. package/dist/v3/index5.js +1 -1
  98. package/dist/v3/index50.js +5 -5
  99. package/dist/v3/index52.js +5 -5
  100. package/dist/v3/index56.js +2 -2
  101. package/dist/v3/index61.js +1 -1
  102. package/dist/v3/index62.js +7 -7
  103. package/dist/v3/index64.js +10 -10
  104. package/dist/v3/index66.js +1 -1
  105. package/dist/v3/index72.js +1 -1
  106. package/dist/v3/index77.js +5 -5
  107. package/dist/v3/index79.js +5 -5
  108. package/dist/v3/index8.js +1 -1
  109. package/dist/v3/index83.js +2 -2
  110. package/dist/v3/index87.js +5 -5
  111. package/dist/v3/index90.js +3 -3
  112. package/dist/v3/{types-59395ba4.js → types-e4403486.js} +9 -9
  113. package/package.json +2 -2
  114. package/src/components/or-bottom-sheet-v3/styles.ts +6 -5
  115. package/src/components/or-button-v3/styles.ts +8 -8
  116. package/src/components/or-card-v3/styles.ts +2 -2
  117. package/src/components/or-checkbox-v3/styles.ts +3 -3
  118. package/src/components/or-confirm-v3/styles.ts +5 -5
  119. package/src/components/or-error-tag-v3/styles.ts +3 -3
  120. package/src/components/or-inline-input-box-v3/styles.ts +6 -6
  121. package/src/components/or-inline-input-v3/styles.ts +1 -1
  122. package/src/components/or-inline-textarea-v3/styles.ts +1 -1
  123. package/src/components/or-input-box-v3/styles.ts +5 -5
  124. package/src/components/or-menu-item-v3/styles.ts +3 -3
  125. package/src/components/or-modal-v3/styles.ts +3 -3
  126. package/src/components/or-notification-v3/styles.ts +3 -3
  127. package/src/components/or-popover-v3/styles.ts +2 -1
  128. package/src/components/or-radio-v3/styles.ts +5 -5
  129. package/src/components/or-select-v3/OrSelect.vue +1 -1
  130. package/src/components/or-select-v3/styles.ts +1 -1
  131. package/src/components/or-sidebar-v3/styles.ts +4 -4
  132. package/src/components/or-switch-v3/styles.ts +1 -1
  133. package/src/components/or-tabs-v3/styles.ts +1 -1
  134. package/src/components/or-tag-v3/styles.ts +3 -3
  135. package/src/components/or-toast-v3/styles.ts +12 -12
  136. package/src/components/or-tooltip-v3/styles.ts +2 -2
package/src/components/or-bottom-sheet-v3/styles.ts CHANGED
@@ -35,12 +35,13 @@ export const BottomSheetHandle: string[] = [
35
35
  'justify-center',
36
36
 
37
37
  // Box
38
- 'after:w-[48px]',
39
- 'after:h-[4px]',
38
+ 'after:w-2xl',
39
+ 'after:h-xs',
40
40
  'after:rounded-full',
41
41
 
42
42
  // Sizing
43
- 'p-[8px]',
43
+ 'px-sm',
44
+ 'py-sm',
44
45
 
45
46
  // Interactivity
46
47
  'cursor-grab',
@@ -55,8 +56,8 @@ export const BottomSheetHeader: string[] = [
55
56
  'empty:hidden',
56
57
 
57
58
  // Sizing
58
- 'px-[24px]',
59
- 'py-[16px]',
59
+ 'px-lg',
60
+ 'py-md',
60
61
 
61
62
  // Typography
62
63
  'typography-headline-3',
package/src/components/or-button-v3/styles.ts CHANGED
@@ -19,9 +19,9 @@ export const ButtonRoot: string[] = [
19
19
  export const ButtonRootVariants: Record<ButtonVariant, string[]> = {
20
20
  'contained': [
21
21
  // Sizing
22
- 'px-[16px] md:px-[16px]',
23
- 'py-[12px] md:py-[8px]',
24
- 'gap-[12px] md:gap-[8px]',
22
+ 'px-md md:px-md',
23
+ 'py-sm+ md:py-sm',
24
+ 'gap-sm+ md:gap-sm',
25
25
 
26
26
  // Theme
27
27
  'enabled:shadow-button',
@@ -32,19 +32,19 @@ export const ButtonRootVariants: Record<ButtonVariant, string[]> = {
32
32
  // Sizing
33
33
  'px-[15px] md:px-[15px]',
34
34
  'py-[11px] md:py-[7px]',
35
- 'gap-[12px] md:gap-[8px]',
35
+ 'gap-sm+ md:gap-sm',
36
36
  ],
37
37
 
38
38
  'text': [
39
39
  // Sizing
40
- 'px-[16px] md:px-[16px]',
41
- 'py-[12px] md:py-[8px]',
42
- 'gap-[12px] md:gap-[8px]',
40
+ 'px-md md:px-md',
41
+ 'py-sm+ md:py-sm',
42
+ 'gap-sm+ md:gap-sm',
43
43
  ],
44
44
 
45
45
  'link': [
46
46
  // Sizing
47
- 'gap-[8px] md:gap-[4px]',
47
+ 'gap-sm md:gap-xs',
48
48
  ],
49
49
  };
50
50
 
package/src/components/or-card-v3/styles.ts CHANGED
@@ -7,8 +7,8 @@ export const CardRoot: string[] = [
7
7
  'rounded-md',
8
8
 
9
9
  // Sizing
10
- 'px-[16px]',
11
- 'py-[16px]',
10
+ 'px-md',
11
+ 'py-md',
12
12
  'gap-[10px]',
13
13
 
14
14
  // Typography
package/src/components/or-checkbox-v3/styles.ts CHANGED
@@ -4,7 +4,7 @@ export const CheckboxRoot: string[] = [
4
4
  'items-center',
5
5
 
6
6
  // Sizing
7
- 'gap-[12px] md:gap-[8px]',
7
+ 'gap-sm+ md:gap-sm',
8
8
  ];
9
9
 
10
10
  export const CheckboxControl: string[] = [
@@ -14,8 +14,8 @@ export const CheckboxControl: string[] = [
14
14
  'justify-center',
15
15
 
16
16
  // Box
17
- 'w-[20px] md:w-[16px]',
18
- 'h-[20px] md:h-[16px]',
17
+ 'w-md+ md:w-md',
18
+ 'h-md+ md:h-md',
19
19
  'rounded-sm',
20
20
 
21
21
  // Interactivity
package/src/components/or-confirm-v3/styles.ts CHANGED
@@ -11,9 +11,9 @@ export const ConfirmRoot: string[] = [
11
11
  'rounded-md',
12
12
 
13
13
  // Sizing
14
- 'px-[24px]',
15
- 'py-[24px]',
16
- 'gap-[16px]',
14
+ 'px-lg',
15
+ 'py-lg',
16
+ 'gap-md',
17
17
 
18
18
  // Typography
19
19
  'typography-body-2-regular',
@@ -44,7 +44,7 @@ export const ConfirmInput: string[] = [
44
44
  'w-full',
45
45
 
46
46
  // Sizing
47
- 'mt-[16px]',
47
+ 'mt-md',
48
48
  ];
49
49
 
50
50
  export const ConfirmFooter: string[] = [
@@ -54,7 +54,7 @@ export const ConfirmFooter: string[] = [
54
54
  'justify-between',
55
55
 
56
56
  // Sizing
57
- 'gap-[16px]',
57
+ 'gap-md',
58
58
  ];
59
59
 
60
60
  export const ConfirmFooterTypes: Record<ConfirmType, string[]> = {
package/src/components/or-error-tag-v3/styles.ts CHANGED
@@ -9,9 +9,9 @@ export const ErrorTagRoot: string[] = [
9
9
  'rounded-full',
10
10
 
11
11
  // Sizing
12
- 'px-[12px] md:px-[8px]',
13
- 'py-[8px] md:py-[4px]',
14
- 'gap-[8px] md:gap-[4px]',
12
+ 'px-sm+ md:px-sm',
13
+ 'py-sm md:py-xs',
14
+ 'gap-sm md:gap-xs',
15
15
 
16
16
  // Interactivity
17
17
  'interactivity-none',
package/src/components/or-inline-input-box-v3/styles.ts CHANGED
@@ -67,10 +67,10 @@ export const InlineInputBoxRoot: string[] = [
67
67
  export const InlineInputBoxRootSizes: Record<InlineInputBoxSize, string[]> = {
68
68
  'm': [
69
69
  // Sizing
70
- 'activated:children:px-[8px]',
71
- 'children:py-[4px]',
70
+ 'activated:children:px-sm',
71
+ 'children:py-xs',
72
72
 
73
- 'gap-[16px]',
73
+ 'gap-md',
74
74
 
75
75
  // Typography
76
76
  'typography-headline-2',
@@ -78,10 +78,10 @@ export const InlineInputBoxRootSizes: Record<InlineInputBoxSize, string[]> = {
78
78
 
79
79
  's': [
80
80
  // Sizing
81
- 'activated:children:px-[8px]',
82
- 'children:py-[0]',
81
+ 'activated:children:px-sm',
82
+ 'children:py-none',
83
83
 
84
- 'gap-[16px]',
84
+ 'gap-md',
85
85
 
86
86
  // Typography
87
87
  'typography-body-2-regular',
package/src/components/or-inline-input-v3/styles.ts CHANGED
@@ -25,7 +25,7 @@ export const InlineInputAction: string[] = [
25
25
  'items-center',
26
26
 
27
27
  // Sizing
28
- 'gap-[8px]',
28
+ 'gap-sm',
29
29
 
30
30
  // Theme
31
31
  'theme-foreground-outline',
package/src/components/or-inline-textarea-v3/styles.ts CHANGED
@@ -25,7 +25,7 @@ export const InlineTextareaAction: string[] = [
25
25
  'items-center',
26
26
 
27
27
  // Sizing
28
- 'gap-[8px]',
28
+ 'gap-sm',
29
29
 
30
30
  // Theme
31
31
  'theme-foreground-outline',
package/src/components/or-input-box-v3/styles.ts CHANGED
@@ -92,12 +92,12 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
92
92
  'children:min-h-[34px]',
93
93
 
94
94
  // Sizing
95
- 'first-child:pl-[16px] first-child:md:pl-[12px]',
96
- 'last-child:pr-[16px] last-child:md:pr-[12px]',
95
+ 'first-child:pl-md first-child:md:pl-sm+',
96
+ 'last-child:pr-md last-child:md:pr-sm+',
97
97
  'children:pt-[11px] children:md:pt-[7px]',
98
98
  'children:pb-[11px] children:md:pb-[6px]',
99
99
 
100
- 'gap-[12px] md:gap-[8px]',
100
+ 'gap-sm+ md:gap-sm',
101
101
 
102
102
  // Typography
103
103
  'typography-body-2-regular',
@@ -108,8 +108,8 @@ export const InputBoxRootSizes: Record<InputBoxSize, string[]> = {
108
108
  'children:min-h-[30px]',
109
109
 
110
110
  // Sizing
111
- 'first-child:pl-[8px]',
112
- 'last-child:pr-[8px]',
111
+ 'first-child:pl-sm',
112
+ 'last-child:pr-sm',
113
113
  'children:py-[6px]',
114
114
 
115
115
  'gap-[6px]',
package/src/components/or-menu-item-v3/styles.ts CHANGED
@@ -4,9 +4,9 @@ export const MenuItemRoot: string[] = [
4
4
  'items-center',
5
5
 
6
6
  // Sizing
7
- 'px-[24px] md:px-[8px]',
8
- 'py-[12px] md:py-[8px]',
9
- 'gap-[8px] md:gap-[8px]',
7
+ 'px-lg md:px-sm',
8
+ 'py-sm+ md:py-sm',
9
+ 'gap-sm md:gap-sm',
10
10
 
11
11
  // Interactivity
12
12
  'interactivity-auto',
package/src/components/or-modal-v3/styles.ts CHANGED
@@ -11,9 +11,9 @@ export const ModalRoot: string[] = [
11
11
  'md:rounded-md',
12
12
 
13
13
  // Sizing
14
- 'px-[24px]',
15
- 'py-[24px]',
16
- 'gap-[16px] md:gap-[24px]',
14
+ 'px-lg',
15
+ 'py-lg',
16
+ 'gap-md md:gap-lg',
17
17
 
18
18
  // Typography
19
19
  'typography-body-2-regular',
package/src/components/or-notification-v3/styles.ts CHANGED
@@ -9,9 +9,9 @@ export const NotificationRoot: string[] = [
9
9
  'rounded-md',
10
10
 
11
11
  // Sizing
12
- 'px-[16px]',
13
- 'py-[16px]',
14
- 'gap-[16px]',
12
+ 'px-md',
13
+ 'py-md',
14
+ 'gap-md',
15
15
 
16
16
  // Typography
17
17
  'typography-body-2-regular',
package/src/components/or-popover-v3/styles.ts CHANGED
@@ -10,7 +10,8 @@ export const PopoverBody: string[] = [
10
10
  'rounded-md',
11
11
 
12
12
  // Sizing
13
- 'm-sm',
13
+ 'mx-sm',
14
+ 'my-sm',
14
15
 
15
16
  // Theme
16
17
  'bg-background',
package/src/components/or-radio-v3/styles.ts CHANGED
@@ -4,7 +4,7 @@ export const RadioRoot: string[] = [
4
4
  'items-center',
5
5
 
6
6
  // Sizing
7
- 'gap-[12px] md:gap-[8px]',
7
+ 'gap-sm+ md:gap-sm',
8
8
  ];
9
9
 
10
10
  export const RadioControl: string[] = [
@@ -14,8 +14,8 @@ export const RadioControl: string[] = [
14
14
  'justify-center',
15
15
 
16
16
  // Box
17
- 'w-[20px] md:w-[16px]',
18
- 'h-[20px] md:h-[16px]',
17
+ 'w-md+ md:w-md',
18
+ 'h-md+ md:h-md',
19
19
  'rounded-full',
20
20
 
21
21
  // Interactivity
@@ -42,8 +42,8 @@ export const RadioControl: string[] = [
42
42
 
43
43
  export const RadioControlHandle: string[] = [
44
44
  // Box
45
- 'after:w-[8px] after:md:w-[4px]',
46
- 'after:h-[8px] after:md:h-[4px]',
45
+ 'after:w-sm after:md:w-xs',
46
+ 'after:h-sm after:md:h-xs',
47
47
  'after:rounded-full',
48
48
 
49
49
  // Theme
package/src/components/or-select-v3/OrSelect.vue CHANGED
@@ -23,7 +23,7 @@
23
23
  ref="inputBox"
24
24
  v-dropdown-open="open"
25
25
  v-dropdown-close="close"
26
- :class="[popoverState === 'open' && 'rounded-b-[0]']"
26
+ :class="[popoverState === 'open' && 'rounded-b-0']"
27
27
  :size="size"
28
28
  :invalid="invalid"
29
29
  :readonly="readonly"
package/src/components/or-select-v3/styles.ts CHANGED
@@ -42,7 +42,7 @@ export const SelectDropdown: string[] = [
42
42
  'theme-border-1-outline',
43
43
  'dark:theme-border-1-outline-dark',
44
44
 
45
- '!border-t-[0]',
45
+ '!border-t-0',
46
46
  ];
47
47
 
48
48
  export const SelectNoSearchResults: string[] = [
package/src/components/or-sidebar-v3/styles.ts CHANGED
@@ -32,7 +32,7 @@ export const SidebarRootSides: Record<OrSidebarPlacement, string[]> = {
32
32
  export const SidebarResize: string[] = [
33
33
  // Position
34
34
  'absolute',
35
- 'inset-y-[0]',
35
+ 'inset-y-none',
36
36
  'z-[1]',
37
37
 
38
38
  // Box
@@ -93,7 +93,7 @@ export const SidebarMain: string[] = [
93
93
 
94
94
  export const SidebarHeader: string[] = [
95
95
  // Sizing
96
- 'p-[16px]',
96
+ 'p-md',
97
97
  ];
98
98
 
99
99
  export const SidebarContent: string[] = [
@@ -102,12 +102,12 @@ export const SidebarContent: string[] = [
102
102
  'overflow-auto',
103
103
 
104
104
  // Sizing
105
- 'p-[16px]',
105
+ 'p-md',
106
106
  ];
107
107
 
108
108
  export const SidebarFooter: string[] = [
109
109
  // Sizing
110
- 'p-[16px]',
110
+ 'p-md',
111
111
 
112
112
  // Borders
113
113
  'border-t-[1px]',
package/src/components/or-switch-v3/styles.ts CHANGED
@@ -4,7 +4,7 @@ export const SwitchRoot: string[] = [
4
4
  'items-center',
5
5
 
6
6
  // Sizing
7
- 'gap-[12px] md:gap-[8px]',
7
+ 'gap-sm+ md:gap-sm',
8
8
  ];
9
9
 
10
10
  export const SwitchControl: string[] = [
package/src/components/or-tabs-v3/styles.ts CHANGED
@@ -11,7 +11,7 @@ export const TabsRoot: string[] = [
11
11
  'overflow-hidden',
12
12
 
13
13
  // Sizing
14
- 'gap-[16px]',
14
+ 'gap-md',
15
15
 
16
16
  // Theme
17
17
  'theme-border-1-outline',
package/src/components/or-tag-v3/styles.ts CHANGED
@@ -11,9 +11,9 @@ export const TagRoot: string[] = [
11
11
  'rounded-full',
12
12
 
13
13
  // Sizing
14
- 'px-[12px] md:px-[8px]',
15
- 'py-[8px] md:py-[4px]',
16
- 'gap-[8px] md:gap-[4px]',
14
+ 'px-sm+ md:px-sm',
15
+ 'py-sm md:py-xs',
16
+ 'gap-sm md:gap-xs',
17
17
 
18
18
  // Typography
19
19
  'typography-caption-regular',
package/src/components/or-toast-v3/styles.ts CHANGED
@@ -12,7 +12,7 @@ export const ToastRoot = [
12
12
  // Sizing
13
13
  'px-md',
14
14
  'py-md',
15
- 'gap-[16px]',
15
+ 'gap-md',
16
16
 
17
17
  // Typography
18
18
  'typography-caption-regular',
@@ -42,7 +42,7 @@ export const ToastContainer = [
42
42
  'items-center',
43
43
 
44
44
  // Sizing
45
- 'gap-[8px]',
45
+ 'gap-sm',
46
46
 
47
47
  // Overflow
48
48
  'overflow-hidden',
@@ -50,31 +50,31 @@ export const ToastContainer = [
50
50
 
51
51
  export const ToastContainerPositions: Record<`${PositionsX}-${PositionsY}`, string[]> = {
52
52
  'left-top': [
53
- 'left-[16px] md:left-[24px]',
54
- 'top-[16px] md:top-[24px]',
53
+ 'left-md md:left-lg',
54
+ 'top-md md:top-lg',
55
55
  ],
56
56
 
57
57
  'center-top': [
58
- 'top-[16px] md:top-[24px]',
58
+ 'top-md md:top-lg',
59
59
  ],
60
60
 
61
61
  'right-top': [
62
- 'right-[16px] md:right-[24px]',
63
- 'top-[16px] md:top-[24px]',
62
+ 'right-md md:right-lg',
63
+ 'top-md md:top-lg',
64
64
  ],
65
65
 
66
66
  'left-bottom': [
67
- 'left-[16px] md:left-[24px]',
68
- 'bottom-[16px] md:bottom-[24px]',
67
+ 'left-md md:left-lg',
68
+ 'bottom-md md:bottom-lg',
69
69
  ],
70
70
 
71
71
  'center-bottom': [
72
- 'bottom-[16px] md:bottom-[24px]',
72
+ 'bottom-md md:bottom-lg',
73
73
  ],
74
74
 
75
75
  'right-bottom': [
76
- 'right-[16px] md:right-[24px]',
77
- 'bottom-[16px] md:bottom-[24px]',
76
+ 'right-md md:right-lg',
77
+ 'bottom-md md:bottom-lg',
78
78
  ],
79
79
  };
80
80
 
package/src/components/or-tooltip-v3/styles.ts CHANGED
@@ -9,8 +9,8 @@ export const TooltipBody: string[] = [
9
9
  'rounded-sm',
10
10
 
11
11
  // Sizing
12
- 'px-[8px]',
13
- 'py-[4px]',
12
+ 'px-sm',
13
+ 'py-xs',
14
14
 
15
15
  // Typography
16
16
  'typography-caption-regular',