@x-plat/design-system 0.1.5 → 0.2.1

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 (178) hide show
  1. package/dist/{colors-BG91q_uV.d.cts → colors-DmMsWD7G.d.cts} +20 -4
  2. package/dist/{colors-BG91q_uV.d.ts → colors-DmMsWD7G.d.ts} +20 -4
  3. package/dist/components/Accordion/index.cjs +25 -14
  4. package/dist/components/Accordion/index.css +6 -6
  5. package/dist/components/Accordion/index.d.cts +16 -3
  6. package/dist/components/Accordion/index.d.ts +16 -3
  7. package/dist/components/Accordion/index.js +25 -14
  8. package/dist/components/Alert/index.cjs +1 -1
  9. package/dist/components/Alert/index.css +16 -16
  10. package/dist/components/Alert/index.js +1 -1
  11. package/dist/components/Avatar/index.cjs +1 -1
  12. package/dist/components/Avatar/index.css +3 -279
  13. package/dist/components/Avatar/index.d.cts +2 -118
  14. package/dist/components/Avatar/index.d.ts +2 -118
  15. package/dist/components/Avatar/index.js +1 -1
  16. package/dist/components/Badge/index.cjs +3 -2
  17. package/dist/components/Badge/index.css +23 -279
  18. package/dist/components/Badge/index.d.cts +4 -118
  19. package/dist/components/Badge/index.d.ts +4 -118
  20. package/dist/components/Badge/index.js +3 -2
  21. package/dist/components/Breadcrumb/index.cjs +1 -1
  22. package/dist/components/Breadcrumb/index.css +4 -4
  23. package/dist/components/Breadcrumb/index.js +1 -1
  24. package/dist/components/Button/index.cjs +3 -2
  25. package/dist/components/Button/index.css +26 -1214
  26. package/dist/components/Button/index.d.cts +4 -118
  27. package/dist/components/Button/index.d.ts +4 -118
  28. package/dist/components/Button/index.js +3 -2
  29. package/dist/components/Card/index.cjs +1 -1
  30. package/dist/components/Card/index.css +3 -3
  31. package/dist/components/Card/index.js +1 -1
  32. package/dist/components/CardTab/index.cjs +124 -0
  33. package/dist/components/CardTab/index.css +78 -0
  34. package/dist/components/CardTab/index.d.cts +44 -0
  35. package/dist/components/CardTab/index.d.ts +44 -0
  36. package/dist/components/CardTab/index.js +87 -0
  37. package/dist/components/Chart/index.cjs +14230 -37
  38. package/dist/components/Chart/index.js +14217 -33
  39. package/dist/components/CheckBox/index.cjs +3 -2
  40. package/dist/components/CheckBox/index.css +27 -563
  41. package/dist/components/CheckBox/index.d.cts +5 -119
  42. package/dist/components/CheckBox/index.d.ts +5 -119
  43. package/dist/components/CheckBox/index.js +3 -2
  44. package/dist/components/Chip/index.cjs +3 -2
  45. package/dist/components/Chip/index.css +21 -1209
  46. package/dist/components/Chip/index.d.cts +4 -118
  47. package/dist/components/Chip/index.d.ts +4 -118
  48. package/dist/components/Chip/index.js +3 -2
  49. package/dist/components/DatePicker/index.cjs +10772 -56
  50. package/dist/components/DatePicker/index.css +802 -1231
  51. package/dist/components/DatePicker/index.d.cts +3 -235
  52. package/dist/components/DatePicker/index.d.ts +3 -235
  53. package/dist/components/DatePicker/index.js +11004 -280
  54. package/dist/components/Divider/index.cjs +1 -1
  55. package/dist/components/Divider/index.css +2 -2
  56. package/dist/components/Divider/index.js +1 -1
  57. package/dist/components/Drawer/index.cjs +1 -1
  58. package/dist/components/Drawer/index.css +5 -5
  59. package/dist/components/Drawer/index.js +1 -1
  60. package/dist/components/Dropdown/index.cjs +1 -1
  61. package/dist/components/Dropdown/index.css +7 -7
  62. package/dist/components/Dropdown/index.js +1 -1
  63. package/dist/components/EmptyState/index.cjs +1 -1
  64. package/dist/components/EmptyState/index.css +3 -3
  65. package/dist/components/EmptyState/index.js +1 -1
  66. package/dist/components/FileUpload/index.cjs +1 -1
  67. package/dist/components/FileUpload/index.css +8 -8
  68. package/dist/components/FileUpload/index.js +1 -1
  69. package/dist/components/HtmlTypeWriter/index.css +1 -1
  70. package/dist/components/ImageSelector/index.css +9 -9
  71. package/dist/components/Input/index.cjs +3 -2
  72. package/dist/components/Input/index.css +21 -10
  73. package/dist/components/Input/index.d.cts +6 -2
  74. package/dist/components/Input/index.d.ts +6 -2
  75. package/dist/components/Input/index.js +3 -2
  76. package/dist/components/Modal/index.cjs +1 -1
  77. package/dist/components/Modal/index.js +1 -1
  78. package/dist/components/Pagination/index.cjs +3 -2
  79. package/dist/components/Pagination/index.css +33 -283
  80. package/dist/components/Pagination/index.d.cts +4 -118
  81. package/dist/components/Pagination/index.d.ts +4 -118
  82. package/dist/components/Pagination/index.js +3 -2
  83. package/dist/components/PopOver/index.cjs +1 -1
  84. package/dist/components/PopOver/index.js +1 -1
  85. package/dist/components/Progress/index.cjs +1 -1
  86. package/dist/components/Progress/index.css +3 -281
  87. package/dist/components/Progress/index.d.cts +2 -118
  88. package/dist/components/Progress/index.d.ts +2 -118
  89. package/dist/components/Progress/index.js +1 -1
  90. package/dist/components/Radio/index.cjs +4 -1
  91. package/dist/components/Radio/index.css +36 -747
  92. package/dist/components/Radio/index.d.cts +6 -119
  93. package/dist/components/Radio/index.d.ts +6 -119
  94. package/dist/components/Radio/index.js +4 -1
  95. package/dist/components/Select/index.cjs +4 -2
  96. package/dist/components/Select/index.css +38 -18
  97. package/dist/components/Select/index.d.cts +3 -0
  98. package/dist/components/Select/index.d.ts +3 -0
  99. package/dist/components/Select/index.js +4 -2
  100. package/dist/components/Skeleton/index.cjs +1 -1
  101. package/dist/components/Skeleton/index.css +1 -1
  102. package/dist/components/Skeleton/index.js +1 -1
  103. package/dist/components/Spinner/index.cjs +1 -1
  104. package/dist/components/Spinner/index.css +2 -280
  105. package/dist/components/Spinner/index.d.cts +2 -118
  106. package/dist/components/Spinner/index.d.ts +2 -118
  107. package/dist/components/Spinner/index.js +1 -1
  108. package/dist/components/Steps/index.cjs +1 -1
  109. package/dist/components/Steps/index.css +14 -846
  110. package/dist/components/Steps/index.d.cts +2 -118
  111. package/dist/components/Steps/index.d.ts +2 -118
  112. package/dist/components/Steps/index.js +1 -1
  113. package/dist/components/Swiper/index.cjs +5874 -18
  114. package/dist/components/Swiper/index.css +229 -0
  115. package/dist/components/Swiper/index.js +5863 -17
  116. package/dist/components/Switch/index.cjs +1 -1
  117. package/dist/components/Switch/index.css +9 -745
  118. package/dist/components/Switch/index.d.cts +2 -118
  119. package/dist/components/Switch/index.d.ts +2 -118
  120. package/dist/components/Switch/index.js +1 -1
  121. package/dist/components/Tab/index.cjs +3 -3
  122. package/dist/components/Tab/index.css +20 -9
  123. package/dist/components/Tab/index.d.cts +2 -0
  124. package/dist/components/Tab/index.d.ts +2 -0
  125. package/dist/components/Tab/index.js +3 -3
  126. package/dist/components/Table/index.cjs +1 -1
  127. package/dist/components/Table/index.css +47 -4003
  128. package/dist/components/Table/index.d.cts +2 -118
  129. package/dist/components/Table/index.d.ts +2 -118
  130. package/dist/components/Table/index.js +1 -1
  131. package/dist/components/Tag/index.cjs +3 -2
  132. package/dist/components/Tag/index.css +27 -467
  133. package/dist/components/Tag/index.d.cts +4 -118
  134. package/dist/components/Tag/index.d.ts +4 -118
  135. package/dist/components/Tag/index.js +3 -2
  136. package/dist/components/TextArea/index.cjs +1 -1
  137. package/dist/components/TextArea/index.css +4 -4
  138. package/dist/components/TextArea/index.js +1 -1
  139. package/dist/components/Toast/index.cjs +1 -1
  140. package/dist/components/Toast/index.css +8 -8
  141. package/dist/components/Toast/index.js +1 -1
  142. package/dist/components/Tooltip/index.cjs +1 -1
  143. package/dist/components/Tooltip/index.css +4 -560
  144. package/dist/components/Tooltip/index.d.cts +2 -118
  145. package/dist/components/Tooltip/index.d.ts +2 -118
  146. package/dist/components/Tooltip/index.js +1 -1
  147. package/dist/components/Video/index.cjs +1 -1
  148. package/dist/components/Video/index.css +3 -3
  149. package/dist/components/Video/index.js +1 -1
  150. package/dist/components/index.cjs +25841 -842
  151. package/dist/components/index.css +1929 -12543
  152. package/dist/components/index.d.cts +2 -1
  153. package/dist/components/index.d.ts +2 -1
  154. package/dist/components/index.js +25836 -841
  155. package/dist/index.cjs +25875 -876
  156. package/dist/index.css +2358 -12598
  157. package/dist/index.d.cts +2 -1
  158. package/dist/index.d.ts +2 -1
  159. package/dist/index.js +25878 -883
  160. package/dist/layout/Grid/FullGrid/index.cjs +1 -1
  161. package/dist/layout/Grid/FullGrid/index.js +1 -1
  162. package/dist/layout/Grid/FullScreen/index.cjs +1 -1
  163. package/dist/layout/Grid/FullScreen/index.js +1 -1
  164. package/dist/layout/Grid/Item/index.cjs +1 -1
  165. package/dist/layout/Grid/Item/index.js +1 -1
  166. package/dist/layout/Grid/index.cjs +1 -1
  167. package/dist/layout/Grid/index.js +1 -1
  168. package/dist/layout/Header/index.css +2 -2
  169. package/dist/layout/Layout/index.css +1 -1
  170. package/dist/layout/SideBar/index.cjs +1 -1
  171. package/dist/layout/SideBar/index.js +1 -1
  172. package/dist/layout/index.cjs +1 -1
  173. package/dist/layout/index.css +3 -3
  174. package/dist/layout/index.js +1 -1
  175. package/dist/tokens/index.d.cts +1 -1
  176. package/dist/tokens/index.d.ts +1 -1
  177. package/package.json +13 -12
  178. package/README.md +0 -123
@@ -4,6 +4,34 @@
4
4
  align-items: center;
5
5
  gap: 4px;
6
6
  }
7
+ .lib-xplat-pagination.sm .dots {
8
+ width: 24px;
9
+ height: 24px;
10
+ font-size: 12px;
11
+ }
12
+ .lib-xplat-pagination.sm .page-btn {
13
+ min-width: 24px;
14
+ height: 24px;
15
+ font-size: 12px;
16
+ }
17
+ .lib-xplat-pagination.sm .page-btn svg {
18
+ width: 14px;
19
+ height: 14px;
20
+ }
21
+ .lib-xplat-pagination.lg .dots {
22
+ width: 40px;
23
+ height: 40px;
24
+ font-size: 16px;
25
+ }
26
+ .lib-xplat-pagination.lg .page-btn {
27
+ min-width: 40px;
28
+ height: 40px;
29
+ font-size: 16px;
30
+ }
31
+ .lib-xplat-pagination.lg .page-btn svg {
32
+ width: 20px;
33
+ height: 20px;
34
+ }
7
35
  .lib-xplat-pagination .dots {
8
36
  display: flex;
9
37
  align-items: center;
@@ -11,7 +39,7 @@
11
39
  width: 32px;
12
40
  height: 32px;
13
41
  font-size: 14px;
14
- color: #737373;
42
+ color: var(--xplat-neutral-500);
15
43
  user-select: none;
16
44
  }
17
45
  .lib-xplat-pagination .page-btn {
@@ -26,298 +54,20 @@
26
54
  background: none;
27
55
  font-size: 14px;
28
56
  cursor: pointer;
29
- color: #404040;
57
+ color: var(--xplat-neutral-700);
30
58
  transition: background-color 0.2s, color 0.2s;
31
59
  }
32
60
  .lib-xplat-pagination .page-btn:hover:not(:disabled):not(.active) {
33
- background-color: #F5F5F5;
61
+ background-color: var(--xplat-neutral-100);
34
62
  }
35
63
  .lib-xplat-pagination .page-btn:disabled {
36
64
  cursor: not-allowed;
37
65
  opacity: 0.4;
38
66
  }
39
67
  .lib-xplat-pagination .page-btn.active {
40
- color: #FFFFFF;
68
+ color: var(--xplat-white);
41
69
  font-weight: 600;
42
- }
43
- .lib-xplat-pagination .page-btn.active.xplat-red-50 {
44
- background-color: #FFF0F0;
45
- }
46
- .lib-xplat-pagination .page-btn.active.xplat-red-100 {
47
- background-color: #FFDDDE;
48
- }
49
- .lib-xplat-pagination .page-btn.active.xplat-red-200 {
50
- background-color: #FFC1C2;
51
- }
52
- .lib-xplat-pagination .page-btn.active.xplat-red-300 {
53
- background-color: #FF9698;
54
- }
55
- .lib-xplat-pagination .page-btn.active.xplat-red-400 {
56
- background-color: #FF5A5D;
57
- }
58
- .lib-xplat-pagination .page-btn.active.xplat-red-500 {
59
- background-color: #FF272B;
60
- }
61
- .lib-xplat-pagination .page-btn.active.xplat-red-600 {
62
- background-color: #F80409;
63
- }
64
- .lib-xplat-pagination .page-btn.active.xplat-red-700 {
65
- background-color: #D40105;
66
- }
67
- .lib-xplat-pagination .page-btn.active.xplat-red-800 {
68
- background-color: #AE0609;
69
- }
70
- .lib-xplat-pagination .page-btn.active.xplat-red-900 {
71
- background-color: #900C0F;
72
- }
73
- .lib-xplat-pagination .page-btn.active.xplat-green-50 {
74
- background-color: #E5F6EA;
75
- }
76
- .lib-xplat-pagination .page-btn.active.xplat-green-100 {
77
- background-color: #C1E7CC;
78
- }
79
- .lib-xplat-pagination .page-btn.active.xplat-green-200 {
80
- background-color: #98D8AC;
81
- }
82
- .lib-xplat-pagination .page-btn.active.xplat-green-300 {
83
- background-color: #6CCA8B;
84
- }
85
- .lib-xplat-pagination .page-btn.active.xplat-green-400 {
86
- background-color: #47BE72;
87
- }
88
- .lib-xplat-pagination .page-btn.active.xplat-green-500 {
89
- background-color: #10B259;
90
- }
91
- .lib-xplat-pagination .page-btn.active.xplat-green-600 {
92
- background-color: #00A34F;
93
- }
94
- .lib-xplat-pagination .page-btn.active.xplat-green-700 {
95
- background-color: #009143;
96
- }
97
- .lib-xplat-pagination .page-btn.active.xplat-green-800 {
98
- background-color: #007F38;
99
- }
100
- .lib-xplat-pagination .page-btn.active.xplat-green-900 {
101
- background-color: #006024;
102
- }
103
- .lib-xplat-pagination .page-btn.active.xplat-orange-50 {
104
- background-color: #FFF8EC;
105
- }
106
- .lib-xplat-pagination .page-btn.active.xplat-orange-100 {
107
- background-color: #FFF0D3;
108
- }
109
- .lib-xplat-pagination .page-btn.active.xplat-orange-200 {
110
- background-color: #FFDDA5;
111
- }
112
- .lib-xplat-pagination .page-btn.active.xplat-orange-300 {
113
- background-color: #FFC46D;
114
- }
115
- .lib-xplat-pagination .page-btn.active.xplat-orange-400 {
116
- background-color: #FF9F32;
117
- }
118
- .lib-xplat-pagination .page-btn.active.xplat-orange-500 {
119
- background-color: #FF820A;
120
- }
121
- .lib-xplat-pagination .page-btn.active.xplat-orange-600 {
122
- background-color: #FF6900;
123
- }
124
- .lib-xplat-pagination .page-btn.active.xplat-orange-700 {
125
- background-color: #CC4B02;
126
- }
127
- .lib-xplat-pagination .page-btn.active.xplat-orange-800 {
128
- background-color: #A13A0B;
129
- }
130
- .lib-xplat-pagination .page-btn.active.xplat-orange-900 {
131
- background-color: #82320C;
132
- }
133
- .lib-xplat-pagination .page-btn.active.xplat-yellow-50 {
134
- background-color: #FFFDE7;
135
- }
136
- .lib-xplat-pagination .page-btn.active.xplat-yellow-100 {
137
- background-color: #FFFAC1;
138
- }
139
- .lib-xplat-pagination .page-btn.active.xplat-yellow-200 {
140
- background-color: #FFF186;
141
- }
142
- .lib-xplat-pagination .page-btn.active.xplat-yellow-300 {
143
- background-color: #FFE041;
144
- }
145
- .lib-xplat-pagination .page-btn.active.xplat-yellow-400 {
146
- background-color: #FFCC0D;
147
- }
148
- .lib-xplat-pagination .page-btn.active.xplat-yellow-500 {
149
- background-color: #F0B100;
150
- }
151
- .lib-xplat-pagination .page-btn.active.xplat-yellow-600 {
152
- background-color: #D18800;
153
- }
154
- .lib-xplat-pagination .page-btn.active.xplat-yellow-700 {
155
- background-color: #A66002;
156
- }
157
- .lib-xplat-pagination .page-btn.active.xplat-yellow-800 {
158
- background-color: #894B0A;
159
- }
160
- .lib-xplat-pagination .page-btn.active.xplat-yellow-900 {
161
- background-color: #743D0F;
162
- }
163
- .lib-xplat-pagination .page-btn.active.xplat-blue-50 {
164
- background-color: #F1F4FD;
165
- }
166
- .lib-xplat-pagination .page-btn.active.xplat-blue-100 {
167
- background-color: #DFE7FA;
168
- }
169
- .lib-xplat-pagination .page-btn.active.xplat-blue-200 {
170
- background-color: #C5D4F8;
171
- }
172
- .lib-xplat-pagination .page-btn.active.xplat-blue-300 {
173
- background-color: #9EB8F2;
174
- }
175
- .lib-xplat-pagination .page-btn.active.xplat-blue-400 {
176
- background-color: #7093EA;
177
- }
178
- .lib-xplat-pagination .page-btn.active.xplat-blue-500 {
179
- background-color: #4D6DE3;
180
- }
181
- .lib-xplat-pagination .page-btn.active.xplat-blue-600 {
182
- background-color: #3950D7;
183
- }
184
- .lib-xplat-pagination .page-btn.active.xplat-blue-700 {
185
- background-color: #303EC5;
186
- }
187
- .lib-xplat-pagination .page-btn.active.xplat-blue-800 {
188
- background-color: #2D35A0;
189
- }
190
- .lib-xplat-pagination .page-btn.active.xplat-blue-900 {
191
- background-color: #29317F;
192
- }
193
- .lib-xplat-pagination .page-btn.active.xplat-lightblue-50 {
194
- background-color: #EEFAFF;
195
- }
196
- .lib-xplat-pagination .page-btn.active.xplat-lightblue-100 {
197
- background-color: #D9F4FF;
198
- }
199
- .lib-xplat-pagination .page-btn.active.xplat-lightblue-200 {
200
- background-color: #BBEDFF;
201
- }
202
- .lib-xplat-pagination .page-btn.active.xplat-lightblue-300 {
203
- background-color: #8DE3FF;
204
- }
205
- .lib-xplat-pagination .page-btn.active.xplat-lightblue-400 {
206
- background-color: #57D0FF;
207
- }
208
- .lib-xplat-pagination .page-btn.active.xplat-lightblue-500 {
209
- background-color: #30B6FF;
210
- }
211
- .lib-xplat-pagination .page-btn.active.xplat-lightblue-600 {
212
- background-color: #1999F7;
213
- }
214
- .lib-xplat-pagination .page-btn.active.xplat-lightblue-700 {
215
- background-color: #1280E3;
216
- }
217
- .lib-xplat-pagination .page-btn.active.xplat-lightblue-800 {
218
- background-color: #1566B8;
219
- }
220
- .lib-xplat-pagination .page-btn.active.xplat-lightblue-900 {
221
- background-color: #175791;
222
- }
223
- .lib-xplat-pagination .page-btn.active.xplat-purple-50 {
224
- background-color: #FBF6FE;
225
- }
226
- .lib-xplat-pagination .page-btn.active.xplat-purple-100 {
227
- background-color: #F5EAFD;
228
- }
229
- .lib-xplat-pagination .page-btn.active.xplat-purple-200 {
230
- background-color: #EDD8FC;
231
- }
232
- .lib-xplat-pagination .page-btn.active.xplat-purple-300 {
233
- background-color: #E0BAF8;
234
- }
235
- .lib-xplat-pagination .page-btn.active.xplat-purple-400 {
236
- background-color: #CD8DF3;
237
- }
238
- .lib-xplat-pagination .page-btn.active.xplat-purple-500 {
239
- background-color: #B961EB;
240
- }
241
- .lib-xplat-pagination .page-btn.active.xplat-purple-600 {
242
- background-color: #A541DC;
243
- }
244
- .lib-xplat-pagination .page-btn.active.xplat-purple-700 {
245
- background-color: #9230C5;
246
- }
247
- .lib-xplat-pagination .page-btn.active.xplat-purple-800 {
248
- background-color: #782B9E;
249
- }
250
- .lib-xplat-pagination .page-btn.active.xplat-purple-900 {
251
- background-color: #62247F;
252
- }
253
- .lib-xplat-pagination .page-btn.active.xplat-pink-50 {
254
- background-color: #FFF4FE;
255
- }
256
- .lib-xplat-pagination .page-btn.active.xplat-pink-100 {
257
- background-color: #FFE7FD;
258
- }
259
- .lib-xplat-pagination .page-btn.active.xplat-pink-200 {
260
- background-color: #FFCFFA;
261
- }
262
- .lib-xplat-pagination .page-btn.active.xplat-pink-300 {
263
- background-color: #FEA9F1;
264
- }
265
- .lib-xplat-pagination .page-btn.active.xplat-pink-400 {
266
- background-color: #FD75E7;
267
- }
268
- .lib-xplat-pagination .page-btn.active.xplat-pink-500 {
269
- background-color: #F553DA;
270
- }
271
- .lib-xplat-pagination .page-btn.active.xplat-pink-600 {
272
- background-color: #D821B6;
273
- }
274
- .lib-xplat-pagination .page-btn.active.xplat-pink-700 {
275
- background-color: #B31892;
276
- }
277
- .lib-xplat-pagination .page-btn.active.xplat-pink-800 {
278
- background-color: #921676;
279
- }
280
- .lib-xplat-pagination .page-btn.active.xplat-pink-900 {
281
- background-color: #781761;
282
- }
283
- .lib-xplat-pagination .page-btn.active.xplat-neutral-50 {
284
- background-color: #FAFAFA;
285
- }
286
- .lib-xplat-pagination .page-btn.active.xplat-neutral-100 {
287
- background-color: #F5F5F5;
288
- }
289
- .lib-xplat-pagination .page-btn.active.xplat-neutral-200 {
290
- background-color: #E5E5E5;
291
- }
292
- .lib-xplat-pagination .page-btn.active.xplat-neutral-300 {
293
- background-color: #D4D4D4;
294
- }
295
- .lib-xplat-pagination .page-btn.active.xplat-neutral-400 {
296
- background-color: #A1A1A1;
297
- }
298
- .lib-xplat-pagination .page-btn.active.xplat-neutral-500 {
299
- background-color: #737373;
300
- }
301
- .lib-xplat-pagination .page-btn.active.xplat-neutral-600 {
302
- background-color: #525252;
303
- }
304
- .lib-xplat-pagination .page-btn.active.xplat-neutral-700 {
305
- background-color: #404040;
306
- }
307
- .lib-xplat-pagination .page-btn.active.xplat-neutral-800 {
308
- background-color: #262626;
309
- }
310
- .lib-xplat-pagination .page-btn.active.xplat-neutral-900 {
311
- background-color: #171717;
312
- }
313
- .lib-xplat-pagination .page-btn.active.xplat-black {
314
- background-color: #000000;
315
- }
316
- .lib-xplat-pagination .page-btn.active.xplat-white {
317
- background-color: #FFFFFF;
318
- }
319
- .lib-xplat-pagination .page-btn.active.test-default {
320
- background-color: #ffffff;
70
+ background-color: var(--ds-color);
321
71
  }
322
72
  .lib-xplat-pagination .page-btn svg {
323
73
  width: 16px;
@@ -1,132 +1,18 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.cjs';
2
+ import { a as ColorNamespace, b as ColorName, e as ColorProps } from '../../colors-DmMsWD7G.cjs';
3
3
 
4
+ type PaginationSize = "sm" | "md" | "lg";
4
5
  interface PaginationProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
5
6
  current: number;
6
7
  total: number;
7
8
  pageSize?: number;
8
9
  siblingCount?: number;
9
10
  onChange?: (page: number) => void;
11
+ size?: PaginationSize;
10
12
  className?: string;
11
13
  }
12
14
  declare const Pagination: {
13
- <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof {
14
- readonly xplat: {
15
- readonly red: {
16
- readonly 50: "#FFF0F0";
17
- readonly 100: "#FFDDDE";
18
- readonly 200: "#FFC1C2";
19
- readonly 300: "#FF9698";
20
- readonly 400: "#FF5A5D";
21
- readonly 500: "#FF272B";
22
- readonly 600: "#F80409";
23
- readonly 700: "#D40105";
24
- readonly 800: "#AE0609";
25
- readonly 900: "#900C0F";
26
- };
27
- readonly green: {
28
- readonly 50: "#E5F6EA";
29
- readonly 100: "#C1E7CC";
30
- readonly 200: "#98D8AC";
31
- readonly 300: "#6CCA8B";
32
- readonly 400: "#47BE72";
33
- readonly 500: "#10B259";
34
- readonly 600: "#00A34F";
35
- readonly 700: "#009143";
36
- readonly 800: "#007F38";
37
- readonly 900: "#006024";
38
- };
39
- readonly orange: {
40
- readonly 50: "#FFF8EC";
41
- readonly 100: "#FFF0D3";
42
- readonly 200: "#FFDDA5";
43
- readonly 300: "#FFC46D";
44
- readonly 400: "#FF9F32";
45
- readonly 500: "#FF820A";
46
- readonly 600: "#FF6900";
47
- readonly 700: "#CC4B02";
48
- readonly 800: "#A13A0B";
49
- readonly 900: "#82320C";
50
- };
51
- readonly yellow: {
52
- readonly 50: "#FFFDE7";
53
- readonly 100: "#FFFAC1";
54
- readonly 200: "#FFF186";
55
- readonly 300: "#FFE041";
56
- readonly 400: "#FFCC0D";
57
- readonly 500: "#F0B100";
58
- readonly 600: "#D18800";
59
- readonly 700: "#A66002";
60
- readonly 800: "#894B0A";
61
- readonly 900: "#743D0F";
62
- };
63
- readonly blue: {
64
- readonly 50: "#F1F4FD";
65
- readonly 100: "#DFE7FA";
66
- readonly 200: "#C5D4F8";
67
- readonly 300: "#9EB8F2";
68
- readonly 400: "#7093EA";
69
- readonly 500: "#4D6DE3";
70
- readonly 600: "#3950D7";
71
- readonly 700: "#303EC5";
72
- readonly 800: "#2D35A0";
73
- readonly 900: "#29317F";
74
- };
75
- readonly lightblue: {
76
- readonly 50: "#EEFAFF";
77
- readonly 100: "#D9F4FF";
78
- readonly 200: "#BBEDFF";
79
- readonly 300: "#8DE3FF";
80
- readonly 400: "#57D0FF";
81
- readonly 500: "#30B6FF";
82
- readonly 600: "#1999F7";
83
- readonly 700: "#1280E3";
84
- readonly 800: "#1566B8";
85
- readonly 900: "#175791";
86
- };
87
- readonly purple: {
88
- readonly 50: "#FBF6FE";
89
- readonly 100: "#F5EAFD";
90
- readonly 200: "#EDD8FC";
91
- readonly 300: "#E0BAF8";
92
- readonly 400: "#CD8DF3";
93
- readonly 500: "#B961EB";
94
- readonly 600: "#A541DC";
95
- readonly 700: "#9230C5";
96
- readonly 800: "#782B9E";
97
- readonly 900: "#62247F";
98
- };
99
- readonly pink: {
100
- readonly 50: "#FFF4FE";
101
- readonly 100: "#FFE7FD";
102
- readonly 200: "#FFCFFA";
103
- readonly 300: "#FEA9F1";
104
- readonly 400: "#FD75E7";
105
- readonly 500: "#F553DA";
106
- readonly 600: "#D821B6";
107
- readonly 700: "#B31892";
108
- readonly 800: "#921676";
109
- readonly 900: "#781761";
110
- };
111
- readonly neutral: {
112
- readonly 50: "#FAFAFA";
113
- readonly 100: "#F5F5F5";
114
- readonly 200: "#E5E5E5";
115
- readonly 300: "#D4D4D4";
116
- readonly 400: "#A1A1A1";
117
- readonly 500: "#737373";
118
- readonly 600: "#525252";
119
- readonly 700: "#404040";
120
- readonly 800: "#262626";
121
- readonly 900: "#171717";
122
- };
123
- readonly black: "#000000";
124
- readonly white: "#FFFFFF";
125
- };
126
- readonly test: {
127
- readonly default: "#ffffff";
128
- };
129
- }[N]>(props: PaginationProps<N, C>): react_jsx_runtime.JSX.Element;
15
+ <N extends ColorNamespace = "xplat", C extends ColorName<N> = ColorName<N>>(props: PaginationProps<N, C>): react_jsx_runtime.JSX.Element;
130
16
  displayName: string;
131
17
  };
132
18
 
@@ -1,132 +1,18 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.js';
2
+ import { a as ColorNamespace, b as ColorName, e as ColorProps } from '../../colors-DmMsWD7G.js';
3
3
 
4
+ type PaginationSize = "sm" | "md" | "lg";
4
5
  interface PaginationProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
5
6
  current: number;
6
7
  total: number;
7
8
  pageSize?: number;
8
9
  siblingCount?: number;
9
10
  onChange?: (page: number) => void;
11
+ size?: PaginationSize;
10
12
  className?: string;
11
13
  }
12
14
  declare const Pagination: {
13
- <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof {
14
- readonly xplat: {
15
- readonly red: {
16
- readonly 50: "#FFF0F0";
17
- readonly 100: "#FFDDDE";
18
- readonly 200: "#FFC1C2";
19
- readonly 300: "#FF9698";
20
- readonly 400: "#FF5A5D";
21
- readonly 500: "#FF272B";
22
- readonly 600: "#F80409";
23
- readonly 700: "#D40105";
24
- readonly 800: "#AE0609";
25
- readonly 900: "#900C0F";
26
- };
27
- readonly green: {
28
- readonly 50: "#E5F6EA";
29
- readonly 100: "#C1E7CC";
30
- readonly 200: "#98D8AC";
31
- readonly 300: "#6CCA8B";
32
- readonly 400: "#47BE72";
33
- readonly 500: "#10B259";
34
- readonly 600: "#00A34F";
35
- readonly 700: "#009143";
36
- readonly 800: "#007F38";
37
- readonly 900: "#006024";
38
- };
39
- readonly orange: {
40
- readonly 50: "#FFF8EC";
41
- readonly 100: "#FFF0D3";
42
- readonly 200: "#FFDDA5";
43
- readonly 300: "#FFC46D";
44
- readonly 400: "#FF9F32";
45
- readonly 500: "#FF820A";
46
- readonly 600: "#FF6900";
47
- readonly 700: "#CC4B02";
48
- readonly 800: "#A13A0B";
49
- readonly 900: "#82320C";
50
- };
51
- readonly yellow: {
52
- readonly 50: "#FFFDE7";
53
- readonly 100: "#FFFAC1";
54
- readonly 200: "#FFF186";
55
- readonly 300: "#FFE041";
56
- readonly 400: "#FFCC0D";
57
- readonly 500: "#F0B100";
58
- readonly 600: "#D18800";
59
- readonly 700: "#A66002";
60
- readonly 800: "#894B0A";
61
- readonly 900: "#743D0F";
62
- };
63
- readonly blue: {
64
- readonly 50: "#F1F4FD";
65
- readonly 100: "#DFE7FA";
66
- readonly 200: "#C5D4F8";
67
- readonly 300: "#9EB8F2";
68
- readonly 400: "#7093EA";
69
- readonly 500: "#4D6DE3";
70
- readonly 600: "#3950D7";
71
- readonly 700: "#303EC5";
72
- readonly 800: "#2D35A0";
73
- readonly 900: "#29317F";
74
- };
75
- readonly lightblue: {
76
- readonly 50: "#EEFAFF";
77
- readonly 100: "#D9F4FF";
78
- readonly 200: "#BBEDFF";
79
- readonly 300: "#8DE3FF";
80
- readonly 400: "#57D0FF";
81
- readonly 500: "#30B6FF";
82
- readonly 600: "#1999F7";
83
- readonly 700: "#1280E3";
84
- readonly 800: "#1566B8";
85
- readonly 900: "#175791";
86
- };
87
- readonly purple: {
88
- readonly 50: "#FBF6FE";
89
- readonly 100: "#F5EAFD";
90
- readonly 200: "#EDD8FC";
91
- readonly 300: "#E0BAF8";
92
- readonly 400: "#CD8DF3";
93
- readonly 500: "#B961EB";
94
- readonly 600: "#A541DC";
95
- readonly 700: "#9230C5";
96
- readonly 800: "#782B9E";
97
- readonly 900: "#62247F";
98
- };
99
- readonly pink: {
100
- readonly 50: "#FFF4FE";
101
- readonly 100: "#FFE7FD";
102
- readonly 200: "#FFCFFA";
103
- readonly 300: "#FEA9F1";
104
- readonly 400: "#FD75E7";
105
- readonly 500: "#F553DA";
106
- readonly 600: "#D821B6";
107
- readonly 700: "#B31892";
108
- readonly 800: "#921676";
109
- readonly 900: "#781761";
110
- };
111
- readonly neutral: {
112
- readonly 50: "#FAFAFA";
113
- readonly 100: "#F5F5F5";
114
- readonly 200: "#E5E5E5";
115
- readonly 300: "#D4D4D4";
116
- readonly 400: "#A1A1A1";
117
- readonly 500: "#737373";
118
- readonly 600: "#525252";
119
- readonly 700: "#404040";
120
- readonly 800: "#262626";
121
- readonly 900: "#171717";
122
- };
123
- readonly black: "#000000";
124
- readonly white: "#FFFFFF";
125
- };
126
- readonly test: {
127
- readonly default: "#ffffff";
128
- };
129
- }[N]>(props: PaginationProps<N, C>): react_jsx_runtime.JSX.Element;
15
+ <N extends ColorNamespace = "xplat", C extends ColorName<N> = ColorName<N>>(props: PaginationProps<N, C>): react_jsx_runtime.JSX.Element;
130
16
  displayName: string;
131
17
  };
132
18
 
@@ -1031,7 +1031,7 @@ import { jsx as jsx293, jsxs as jsxs188 } from "react/jsx-runtime";
1031
1031
  // src/tokens/svg/validation/SuccessIcon.tsx
1032
1032
  import { jsx as jsx294 } from "react/jsx-runtime";
1033
1033
 
1034
- // node_modules/clsx/dist/clsx.mjs
1034
+ // ../../node_modules/clsx/dist/clsx.mjs
1035
1035
  function r(e) {
1036
1036
  var t, f, n = "";
1037
1037
  if ("string" == typeof e || "number" == typeof e) n += e;
@@ -1081,6 +1081,7 @@ var Pagination = (props) => {
1081
1081
  pageSize = 10,
1082
1082
  siblingCount = 1,
1083
1083
  onChange,
1084
+ size = "md",
1084
1085
  colorNamespace = "xplat",
1085
1086
  color = "blue",
1086
1087
  colorDepth,
@@ -1098,7 +1099,7 @@ var Pagination = (props) => {
1098
1099
  onChange?.(page);
1099
1100
  }
1100
1101
  };
1101
- return /* @__PURE__ */ jsxs189("nav", { className: clsx_default("lib-xplat-pagination", className), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
1102
+ return /* @__PURE__ */ jsxs189("nav", { className: clsx_default("lib-xplat-pagination", size, className), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
1102
1103
  /* @__PURE__ */ jsx295(
1103
1104
  "button",
1104
1105
  {
@@ -100,7 +100,7 @@ var useClickOutside = (refs, handler, enabled = true) => {
100
100
  };
101
101
  var useClickOutside_default = useClickOutside;
102
102
 
103
- // node_modules/clsx/dist/clsx.mjs
103
+ // ../../node_modules/clsx/dist/clsx.mjs
104
104
  function r(e) {
105
105
  var t, f, n = "";
106
106
  if ("string" == typeof e || "number" == typeof e) n += e;
@@ -64,7 +64,7 @@ var useClickOutside = (refs, handler, enabled = true) => {
64
64
  };
65
65
  var useClickOutside_default = useClickOutside;
66
66
 
67
- // node_modules/clsx/dist/clsx.mjs
67
+ // ../../node_modules/clsx/dist/clsx.mjs
68
68
  function r(e) {
69
69
  var t, f, n = "";
70
70
  if ("string" == typeof e || "number" == typeof e) n += e;
@@ -151,7 +151,7 @@ var getColorClass = (namespace, palette, shade) => {
151
151
  return `${String(namespace)}-${String(palette)}${hasShade ? `-${String(shade)}` : ""}`;
152
152
  };
153
153
 
154
- // node_modules/clsx/dist/clsx.mjs
154
+ // ../../node_modules/clsx/dist/clsx.mjs
155
155
  function r(e) {
156
156
  var t, f, n = "";
157
157
  if ("string" == typeof e || "number" == typeof e) n += e;