@bobbykim/mcl-cards 0.9.3 → 0.10.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 (4) hide show
  1. package/dist/index.d.ts +20 -20
  2. package/dist/mcl-cards.js +1327 -1560
  3. package/dist/mcl-cards.umd.cjs +2 -2
  4. package/package.json +7 -8
package/dist/mcl-cards.js CHANGED
@@ -1,1376 +1,1134 @@
1
- (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.perspective[data-v-f748c495]{-webkit-perspective:1800px;perspective:1800px}.card[data-v-f748c495]{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(0deg);transform:rotateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-card[data-v-f748c495]{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.card[data-v-09214c6f]{background-size:cover;background-position:center center;background-repeat:no-repeat;padding:var(--border-width);background:conic-gradient(from var(--border-angle, 0deg),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via),var(--tw-gradient-to));animation:bg-spin-09214c6f 4s linear infinite}@keyframes bg-spin-09214c6f{0%{--border-angle: 0deg}to{--border-angle: 360deg}}.card[data-v-09214c6f]:hover{animation-play-state:paused}@property --border-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
2
- import { defineComponent as w, ref as I, onMounted as G, useSlots as R, computed as p, openBlock as x, createElementBlock as C, normalizeClass as c, createElementVNode as n, createCommentVNode as v, unref as A, withModifiers as E, renderSlot as V, toDisplayString as O, normalizeStyle as W } from "vue";
3
- import d from "@bobbykim/manguito-theme";
4
- class N {
5
- // body text class
6
- bodyText = {
7
- xs: "text-xs",
8
- sm: "text-sm",
9
- md: "text-md",
10
- lg: "text-lg",
11
- xl: "text-xl"
12
- };
13
- // font weight class
14
- fontweight = {
15
- light: "font-light",
16
- normal: "font-normal",
17
- bold: "font-bold"
18
- };
19
- // text alignment
20
- textAlign = {
21
- left: "text-left",
22
- center: "text-center",
23
- right: "text-right"
24
- };
1
+ (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.perspective[data-v-eac7e2f0]{-webkit-perspective:1800px;perspective:1800px}.card[data-v-eac7e2f0]{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(0deg);transform:rotateY(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.flip-card[data-v-eac7e2f0]{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.card[data-v-8bf2cac0]{background-size:cover;background-position:center center;background-repeat:no-repeat;padding:var(--border-width);background:conic-gradient(from var(--border-angle, 0deg),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via),var(--tw-gradient-to));animation:bg-spin-8bf2cac0 4s linear infinite}@keyframes bg-spin-8bf2cac0{0%{--border-angle: 0deg}to{--border-angle: 360deg}}.card[data-v-8bf2cac0]:hover{animation-play-state:paused}@property --border-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
2
+ import { defineComponent as B, ref as $, onMounted as R, useSlots as L, computed as f, openBlock as k, createElementBlock as y, normalizeClass as h, createElementVNode as b, createCommentVNode as V, unref as S, withModifiers as z, renderSlot as A, toDisplayString as T, normalizeStyle as D } from "vue";
3
+ import { generateClass as g } from "@bobbykim/manguito-theme";
4
+ function H(r) {
5
+ var n, a, i = "";
6
+ if (typeof r == "string" || typeof r == "number") i += r;
7
+ else if (typeof r == "object") if (Array.isArray(r)) {
8
+ var m = r.length;
9
+ for (n = 0; n < m; n++) r[n] && (a = H(r[n])) && (i && (i += " "), i += a);
10
+ } else for (a in r) r[a] && (i && (i += " "), i += a);
11
+ return i;
25
12
  }
26
- class H {
27
- // Border width class
28
- borderWidth = {
29
- 1: "border-[1px]",
30
- 2: "border-[2px]",
31
- 3: "border-[3px]",
32
- 4: "border-[4px]",
33
- 5: "border-[5px]",
34
- 6: "border-[6px]",
35
- 7: "border-[7px]",
36
- 8: "border-[8px]",
37
- 9: "border-[9px]",
38
- 10: "border-[10px]",
39
- 11: "border-[11px]",
40
- 12: "border-[12px]"
41
- };
42
- borderXWidth = {
43
- 1: "border-x-[1px]",
44
- 2: "border-x-[2px]",
45
- 3: "border-x-[3px]",
46
- 4: "border-x-[4px]",
47
- 5: "border-x-[5px]",
48
- 6: "border-x-[6px]",
49
- 7: "border-x-[7px]",
50
- 8: "border-x-[8px]",
51
- 9: "border-x-[9px]",
52
- 10: "border-x-[10px]",
53
- 11: "border-x-[11px]",
54
- 12: "border-x-[12px]"
55
- };
56
- borderYWidth = {
57
- 1: "border-y-[1px]",
58
- 2: "border-y-[2px]",
59
- 3: "border-y-[3px]",
60
- 4: "border-y-[4px]",
61
- 5: "border-y-[5px]",
62
- 6: "border-y-[6px]",
63
- 7: "border-y-[7px]",
64
- 8: "border-y-[8px]",
65
- 9: "border-y-[9px]",
66
- 10: "border-y-[10px]",
67
- 11: "border-y-[11px]",
68
- 12: "border-y-[12px]"
69
- };
70
- borderTopWidth = {
71
- 1: "border-t-[1px]",
72
- 2: "border-t-[2px]",
73
- 3: "border-t-[3px]",
74
- 4: "border-t-[4px]",
75
- 5: "border-t-[5px]",
76
- 6: "border-t-[6px]",
77
- 7: "border-t-[7px]",
78
- 8: "border-t-[8px]",
79
- 9: "border-t-[9px]",
80
- 10: "border-t-[10px]",
81
- 11: "border-t-[11px]",
82
- 12: "border-t-[12px]"
83
- };
84
- borderBottomWidth = {
85
- 1: "border-b-[1px]",
86
- 2: "border-b-[2px]",
87
- 3: "border-b-[3px]",
88
- 4: "border-b-[4px]",
89
- 5: "border-b-[5px]",
90
- 6: "border-b-[6px]",
91
- 7: "border-b-[7px]",
92
- 8: "border-b-[8px]",
93
- 9: "border-b-[9px]",
94
- 10: "border-b-[10px]",
95
- 11: "border-b-[11px]",
96
- 12: "border-b-[12px]"
97
- };
98
- borderLeftWidth = {
99
- 1: "border-l-[1px]",
100
- 2: "border-l-[2px]",
101
- 3: "border-l-[3px]",
102
- 4: "border-l-[4px]",
103
- 5: "border-l-[5px]",
104
- 6: "border-l-[6px]",
105
- 7: "border-l-[7px]",
106
- 8: "border-l-[8px]",
107
- 9: "border-l-[9px]",
108
- 10: "border-l-[10px]",
109
- 11: "border-l-[11px]",
110
- 12: "border-l-[12px]"
111
- };
112
- borderRightWidth = {
113
- 1: "border-r-[1px]",
114
- 2: "border-r-[2px]",
115
- 3: "border-r-[3px]",
116
- 4: "border-r-[4px]",
117
- 5: "border-r-[5px]",
118
- 6: "border-r-[6px]",
119
- 7: "border-r-[7px]",
120
- 8: "border-r-[8px]",
121
- 9: "border-r-[9px]",
122
- 10: "border-r-[10px]",
123
- 11: "border-r-[11px]",
124
- 12: "border-r-[12px]"
125
- };
13
+ function I() {
14
+ for (var r, n, a = 0, i = "", m = arguments.length; a < m; a++) (r = arguments[a]) && (n = H(r)) && (i && (i += " "), i += n);
15
+ return i;
126
16
  }
127
- class M {
128
- // bg color class
129
- bgColor = {
130
- primary: "bg-primary",
131
- secondary: "bg-secondary",
132
- success: "bg-success",
133
- danger: "bg-danger",
134
- info: "bg-info",
135
- warning: "bg-warning",
136
- "light-1": "bg-light-1",
137
- "light-2": "bg-light-2",
138
- "light-3": "bg-light-3",
139
- "light-4": "bg-light-4",
140
- "dark-1": "bg-dark-1",
141
- "dark-2": "bg-dark-2",
142
- "dark-3": "bg-dark-3",
143
- "dark-4": "bg-dark-4",
144
- black: "bg-black",
145
- white: "bg-white",
146
- transparent: "bg-transparent"
147
- };
148
- // hover: bg color class
149
- hoverBgColor = {
150
- primary: "hover:bg-primary",
151
- secondary: "hover:bg-secondary",
152
- success: "hover:bg-success",
153
- danger: "hover:bg-danger",
154
- info: "hover:bg-info",
155
- warning: "hover:bg-warning",
156
- "light-1": "hover:bg-light-1",
157
- "light-2": "hover:bg-light-2",
158
- "light-3": "hover:bg-light-3",
159
- "light-4": "hover:bg-light-4",
160
- "dark-1": "hover:bg-dark-1",
161
- "dark-2": "hover:bg-dark-2",
162
- "dark-3": "hover:bg-dark-3",
163
- "dark-4": "hover:bg-dark-4",
164
- black: "hover:bg-black",
165
- white: "hover:bg-white",
166
- transparent: "hover:bg-transparent"
167
- };
168
- // focus: bg color class
169
- focusBgColor = {
170
- primary: "focus:bg-primary",
171
- secondary: "focus:bg-secondary",
172
- success: "focus:bg-success",
173
- danger: "focus:bg-danger",
174
- info: "focus:bg-info",
175
- warning: "focus:bg-warning",
176
- "light-1": "focus:bg-light-1",
177
- "light-2": "focus:bg-light-2",
178
- "light-3": "focus:bg-light-3",
179
- "light-4": "focus:bg-light-4",
180
- "dark-1": "focus:bg-dark-1",
181
- "dark-2": "focus:bg-dark-2",
182
- "dark-3": "focus:bg-dark-3",
183
- "dark-4": "focus:bg-dark-4",
184
- black: "focus:bg-black",
185
- white: "focus:bg-white",
186
- transparent: "focus:bg-transparent"
187
- };
188
- // ::before bg color class
189
- beforeBgColor = {
190
- primary: "before:bg-primary",
191
- secondary: "before:bg-secondary",
192
- success: "before:bg-success",
193
- danger: "before:bg-danger",
194
- info: "before:bg-info",
195
- warning: "before:bg-warning",
196
- "light-1": "before:bg-light-1",
197
- "light-2": "before:bg-light-2",
198
- "light-3": "before:bg-light-3",
199
- "light-4": "before:bg-light-4",
200
- "dark-1": "before:bg-dark-1",
201
- "dark-2": "before:bg-dark-2",
202
- "dark-3": "before:bg-dark-3",
203
- "dark-4": "before:bg-dark-4",
204
- black: "before:bg-black",
205
- white: "before:bg-white",
206
- transparent: "before:bg-transparent"
207
- };
208
- // ::after bg color class
209
- afterBgColor = {
210
- primary: "after:bg-primary",
211
- secondary: "after:bg-secondary",
212
- success: "after:bg-success",
213
- danger: "after:bg-danger",
214
- info: "after:bg-info",
215
- warning: "after:bg-warning",
216
- "light-1": "after:bg-light-1",
217
- "light-2": "after:bg-light-2",
218
- "light-3": "after:bg-light-3",
219
- "light-4": "after:bg-light-4",
220
- "dark-1": "after:bg-dark-1",
221
- "dark-2": "after:bg-dark-2",
222
- "dark-3": "after:bg-dark-3",
223
- "dark-4": "after:bg-dark-4",
224
- black: "after:bg-black",
225
- white: "after:bg-white",
226
- transparent: "after:bg-transparent"
227
- };
228
- // active:bg color class
229
- bgActiveColor = {
230
- primary: "active:bg-primary",
231
- secondary: "active:bg-secondary",
232
- success: "active:bg-success",
233
- danger: "active:bg-danger",
234
- info: "active:bg-info",
235
- warning: "active:bg-warning",
236
- "light-1": "active:bg-light-1",
237
- "light-2": "active:bg-light-2",
238
- "light-3": "active:bg-light-3",
239
- "light-4": "active:bg-light-4",
240
- "dark-1": "active:bg-dark-1",
241
- "dark-2": "active:bg-dark-2",
242
- "dark-3": "active:bg-dark-3",
243
- "dark-4": "active:bg-dark-4",
244
- black: "active:bg-black",
245
- white: "active:bg-white",
246
- transparent: "active:bg-transparent"
247
- };
248
- // text color class
249
- textColor = {
250
- primary: "text-primary",
251
- secondary: "text-secondary",
252
- success: "text-success",
253
- danger: "text-danger",
254
- info: "text-info",
255
- warning: "text-warning",
256
- "light-1": "text-light-1",
257
- "light-2": "text-light-2",
258
- "light-3": "text-light-3",
259
- "light-4": "text-light-4",
260
- "dark-1": "text-dark-1",
261
- "dark-2": "text-dark-2",
262
- "dark-3": "text-dark-3",
263
- "dark-4": "text-dark-4",
264
- black: "text-black",
265
- white: "text-white",
266
- transparent: "text-transparent"
267
- };
268
- // hover text color class
269
- hoverTextColor = {
270
- primary: "hover:text-primary",
271
- secondary: "hover:text-secondary",
272
- success: "hover:text-success",
273
- danger: "hover:text-danger",
274
- info: "hover:text-info",
275
- warning: "hover:text-warning",
276
- "light-1": "hover:text-light-1",
277
- "light-2": "hover:text-light-2",
278
- "light-3": "hover:text-light-3",
279
- "light-4": "hover:text-light-4",
280
- "dark-1": "hover:text-dark-1",
281
- "dark-2": "hover:text-dark-2",
282
- "dark-3": "hover:text-dark-3",
283
- "dark-4": "hover:text-dark-4",
284
- black: "hover:text-black",
285
- white: "hover:text-white",
286
- transparent: "hover:text-transparent"
287
- };
288
- // focus text color class
289
- focusTextColor = {
290
- primary: "focus:text-primary",
291
- secondary: "focus:text-secondary",
292
- success: "focus:text-success",
293
- danger: "focus:text-danger",
294
- info: "focus:text-info",
295
- warning: "focus:text-warning",
296
- "light-1": "focus:text-light-1",
297
- "light-2": "focus:text-light-2",
298
- "light-3": "focus:text-light-3",
299
- "light-4": "focus:text-light-4",
300
- "dark-1": "focus:text-dark-1",
301
- "dark-2": "focus:text-dark-2",
302
- "dark-3": "focus:text-dark-3",
303
- "dark-4": "focus:text-dark-4",
304
- black: "focus:text-black",
305
- white: "focus:text-white",
306
- transparent: "focus:text-transparent"
307
- };
308
- // disabled text color class
309
- disabledTextColor = {
310
- primary: "disabled:text-primary",
311
- secondary: "disabled:text-secondary",
312
- success: "disabled:text-success",
313
- danger: "disabled:text-danger",
314
- info: "disabled:text-info",
315
- warning: "disabled:text-warning",
316
- "light-1": "disabled:text-light-1",
317
- "light-2": "disabled:text-light-2",
318
- "light-3": "disabled:text-light-3",
319
- "light-4": "disabled:text-light-4",
320
- "dark-1": "disabled:text-dark-1",
321
- "dark-2": "disabled:text-dark-2",
322
- "dark-3": "disabled:text-dark-3",
323
- "dark-4": "disabled:text-dark-4",
324
- black: "disabled:text-black",
325
- white: "disabled:text-white",
326
- transparent: "disabled:text-transparent"
327
- };
328
- // SVG fill color class
329
- svgFillColor = {
330
- primary: "fill-primary",
331
- secondary: "fill-secondary",
332
- success: "fill-success",
333
- danger: "fill-danger",
334
- info: "fill-info",
335
- warning: "fill-warning",
336
- "light-1": "fill-light-1",
337
- "light-2": "fill-light-2",
338
- "light-3": "fill-light-3",
339
- "light-4": "fill-light-4",
340
- "dark-1": "fill-dark-1",
341
- "dark-2": "fill-dark-2",
342
- "dark-3": "fill-dark-3",
343
- "dark-4": "fill-dark-4",
344
- black: "fill-black",
345
- white: "fill-white",
346
- transparent: "fill-transparent"
347
- };
348
- // ring color class
349
- ringColor = {
350
- primary: "ring-primary",
351
- secondary: "ring-secondary",
352
- success: "ring-success",
353
- danger: "ring-danger",
354
- info: "ring-info",
355
- warning: "ring-warning",
356
- "light-1": "ring-light-1",
357
- "light-2": "ring-light-2",
358
- "light-3": "ring-light-3",
359
- "light-4": "ring-light-4",
360
- "dark-1": "ring-dark-1",
361
- "dark-2": "ring-dark-2",
362
- "dark-3": "ring-dark-3",
363
- "dark-4": "ring-dark-4",
364
- black: "ring-black",
365
- white: "ring-white",
366
- transparent: "ring-transparent"
367
- };
368
- // focus:ring color class
369
- ringFocusColor = {
370
- primary: "focus:ring-primary",
371
- secondary: "focus:ring-secondary",
372
- success: "focus:ring-success",
373
- danger: "focus:ring-danger",
374
- info: "focus:ring-info",
375
- warning: "focus:ring-warning",
376
- "light-1": "focus:ring-light-1",
377
- "light-2": "focus:ring-light-2",
378
- "light-3": "focus:ring-light-3",
379
- "light-4": "focus:ring-light-4",
380
- "dark-1": "focus:ring-dark-1",
381
- "dark-2": "focus:ring-dark-2",
382
- "dark-3": "focus:ring-dark-3",
383
- "dark-4": "focus:ring-dark-4",
384
- black: "focus:ring-black",
385
- white: "focus:ring-white",
386
- transparent: "focus:ring-transparent"
387
- };
388
- // active:ring color class
389
- ringActiveColor = {
390
- primary: "active:ring-primary",
391
- secondary: "active:ring-secondary",
392
- success: "active:ring-success",
393
- danger: "active:ring-danger",
394
- info: "active:ring-info",
395
- warning: "active:ring-warning",
396
- "light-1": "active:ring-light-1",
397
- "light-2": "active:ring-light-2",
398
- "light-3": "active:ring-light-3",
399
- "light-4": "active:ring-light-4",
400
- "dark-1": "active:ring-dark-1",
401
- "dark-2": "active:ring-dark-2",
402
- "dark-3": "active:ring-dark-3",
403
- "dark-4": "active:ring-dark-4",
404
- black: "active:ring-black",
405
- white: "active:ring-white",
406
- transparent: "active:ring-transparent"
407
- };
408
- // ring-offset color class
409
- ringOffsetColor = {
410
- primary: "ring-offset-primary",
411
- secondary: "ring-offset-secondary",
412
- success: "ring-offset-success",
413
- danger: "ring-offset-danger",
414
- info: "ring-offset-info",
415
- warning: "ring-offset-warning",
416
- "light-1": "ring-offset-light-1",
417
- "light-2": "ring-offset-light-2",
418
- "light-3": "ring-offset-light-3",
419
- "light-4": "ring-offset-light-4",
420
- "dark-1": "ring-offset-dark-1",
421
- "dark-2": "ring-offset-dark-2",
422
- "dark-3": "ring-offset-dark-3",
423
- "dark-4": "ring-offset-dark-4",
424
- black: "ring-offset-black",
425
- white: "ring-offset-white",
426
- transparent: "ring-offset-transparent"
427
- };
428
- // outline class
429
- outlineColor = {
430
- primary: "outline-primary",
431
- secondary: "outline-secondary",
432
- success: "outline-success",
433
- danger: "outline-danger",
434
- info: "outline-info",
435
- warning: "outline-warning",
436
- "light-1": "outline-light-1",
437
- "light-2": "outline-light-2",
438
- "light-3": "outline-light-3",
439
- "light-4": "outline-light-4",
440
- "dark-1": "outline-dark-1",
441
- "dark-2": "outline-dark-2",
442
- "dark-3": "outline-dark-3",
443
- "dark-4": "outline-dark-4",
444
- black: "outline-black",
445
- white: "outline-white",
446
- transparent: "outline-transparent"
447
- };
448
- // focus:outline class
449
- focusOutlineColor = {
450
- primary: "focus:outline-primary",
451
- secondary: "focus:outline-secondary",
452
- success: "focus:outline-success",
453
- danger: "focus:outline-danger",
454
- info: "focus:outline-info",
455
- warning: "focus:outline-warning",
456
- "light-1": "focus:outline-light-1",
457
- "light-2": "focus:outline-light-2",
458
- "light-3": "focus:outline-light-3",
459
- "light-4": "focus:outline-light-4",
460
- "dark-1": "focus:outline-dark-1",
461
- "dark-2": "focus:outline-dark-2",
462
- "dark-3": "focus:outline-dark-3",
463
- "dark-4": "focus:outline-dark-4",
464
- black: "focus:outline-black",
465
- white: "focus:outline-white",
466
- transparent: "focus:outline-transparent"
467
- };
468
- // active:outline class
469
- activeOutlineColor = {
470
- primary: "active:outline-primary",
471
- secondary: "active:outline-secondary",
472
- success: "active:outline-success",
473
- danger: "active:outline-danger",
474
- info: "active:outline-info",
475
- warning: "active:outline-warning",
476
- "light-1": "active:outline-light-1",
477
- "light-2": "active:outline-light-2",
478
- "light-3": "active:outline-light-3",
479
- "light-4": "active:outline-light-4",
480
- "dark-1": "active:outline-dark-1",
481
- "dark-2": "active:outline-dark-2",
482
- "dark-3": "active:outline-dark-3",
483
- "dark-4": "active:outline-dark-4",
484
- black: "active:outline-black",
485
- white: "active:outline-white",
486
- transparent: "active:outline-transparent"
487
- };
488
- // btn color class
489
- btnColor = {
490
- primary: "btn-primary",
491
- secondary: "btn-secondary",
492
- success: "btn-success",
493
- danger: "btn-danger",
494
- info: "btn-info",
495
- warning: "btn-warning",
496
- "light-1": "btn-light-1",
497
- "light-2": "btn-light-2",
498
- "light-3": "btn-light-3",
499
- "light-4": "btn-light-4",
500
- "dark-1": "btn-dark-1",
501
- "dark-2": "btn-dark-2",
502
- "dark-3": "btn-dark-3",
503
- "dark-4": "btn-dark-4",
504
- black: "btn-black",
505
- white: "btn-white",
506
- transparent: "btn-transparent"
507
- };
508
- // list color class
509
- listColor = {
510
- primary: "mcl-list-primary",
511
- secondary: "mcl-list-secondary",
512
- success: "mcl-list-success",
513
- danger: "mcl-list-danger",
514
- info: "mcl-list-info",
515
- warning: "mcl-list-warning",
516
- "light-1": "mcl-list-light-1",
517
- "light-2": "mcl-list-light-2",
518
- "light-3": "mcl-list-light-3",
519
- "light-4": "mcl-list-light-4",
520
- "dark-1": "mcl-list-dark-1",
521
- "dark-2": "mcl-list-dark-2",
522
- "dark-3": "mcl-list-dark-3",
523
- "dark-4": "mcl-list-dark-4",
524
- black: "mcl-list-black",
525
- white: "mcl-list-white",
526
- transparent: "mcl-list-transparent"
527
- };
528
- // border color classes
529
- borderColor = {
530
- primary: "border-primary",
531
- secondary: "border-secondary",
532
- success: "border-success",
533
- danger: "border-danger",
534
- info: "border-info",
535
- warning: "border-warning",
536
- "light-1": "border-light-1",
537
- "light-2": "border-light-2",
538
- "light-3": "border-light-3",
539
- "light-4": "border-light-4",
540
- "dark-1": "border-dark-1",
541
- "dark-2": "border-dark-2",
542
- "dark-3": "border-dark-3",
543
- "dark-4": "border-dark-4",
544
- black: "border-black",
545
- white: "border-white",
546
- transparent: "border-transparent"
547
- };
548
- borderXColor = {
549
- primary: "border-x-primary",
550
- secondary: "border-x-secondary",
551
- success: "border-x-success",
552
- danger: "border-x-danger",
553
- info: "border-x-info",
554
- warning: "border-x-warning",
555
- "light-1": "border-x-light-1",
556
- "light-2": "border-x-light-2",
557
- "light-3": "border-x-light-3",
558
- "light-4": "border-x-light-4",
559
- "dark-1": "border-x-dark-1",
560
- "dark-2": "border-x-dark-2",
561
- "dark-3": "border-x-dark-3",
562
- "dark-4": "border-x-dark-4",
563
- black: "border-x-black",
564
- white: "border-x-white",
565
- transparent: "border-x-transparent"
566
- };
567
- borderYColor = {
568
- primary: "border-y-primary",
569
- secondary: "border-y-secondary",
570
- success: "border-y-success",
571
- danger: "border-y-danger",
572
- info: "border-y-info",
573
- warning: "border-y-warning",
574
- "light-1": "border-y-light-1",
575
- "light-2": "border-y-light-2",
576
- "light-3": "border-y-light-3",
577
- "light-4": "border-y-light-4",
578
- "dark-1": "border-y-dark-1",
579
- "dark-2": "border-y-dark-2",
580
- "dark-3": "border-y-dark-3",
581
- "dark-4": "border-y-dark-4",
582
- black: "border-y-black",
583
- white: "border-y-white",
584
- transparent: "border-y-transparent"
585
- };
586
- borderTopColor = {
587
- primary: "border-t-primary",
588
- secondary: "border-t-secondary",
589
- success: "border-t-success",
590
- danger: "border-t-danger",
591
- info: "border-t-info",
592
- warning: "border-t-warning",
593
- "light-1": "border-t-light-1",
594
- "light-2": "border-t-light-2",
595
- "light-3": "border-t-light-3",
596
- "light-4": "border-t-light-4",
597
- "dark-1": "border-t-dark-1",
598
- "dark-2": "border-t-dark-2",
599
- "dark-3": "border-t-dark-3",
600
- "dark-4": "border-t-dark-4",
601
- black: "border-t-black",
602
- white: "border-t-white",
603
- transparent: "border-t-transparent"
604
- };
605
- borderBottomColor = {
606
- primary: "border-b-primary",
607
- secondary: "border-b-secondary",
608
- success: "border-b-success",
609
- danger: "border-b-danger",
610
- info: "border-b-info",
611
- warning: "border-b-warning",
612
- "light-1": "border-b-light-1",
613
- "light-2": "border-b-light-2",
614
- "light-3": "border-b-light-3",
615
- "light-4": "border-b-light-4",
616
- "dark-1": "border-b-dark-1",
617
- "dark-2": "border-b-dark-2",
618
- "dark-3": "border-b-dark-3",
619
- "dark-4": "border-b-dark-4",
620
- black: "border-b-black",
621
- white: "border-b-white",
622
- transparent: "border-b-transparent"
623
- };
624
- borderLeftColor = {
625
- primary: "border-l-primary",
626
- secondary: "border-l-secondary",
627
- success: "border-l-success",
628
- danger: "border-l-danger",
629
- info: "border-l-info",
630
- warning: "border-l-warning",
631
- "light-1": "border-l-light-1",
632
- "light-2": "border-l-light-2",
633
- "light-3": "border-l-light-3",
634
- "light-4": "border-l-light-4",
635
- "dark-1": "border-l-dark-1",
636
- "dark-2": "border-l-dark-2",
637
- "dark-3": "border-l-dark-3",
638
- "dark-4": "border-l-dark-4",
639
- black: "border-l-black",
640
- white: "border-l-white",
641
- transparent: "border-l-transparent"
642
- };
643
- borderRightColor = {
644
- primary: "border-r-primary",
645
- secondary: "border-r-secondary",
646
- success: "border-r-success",
647
- danger: "border-r-danger",
648
- info: "border-r-info",
649
- warning: "border-r-warning",
650
- "light-1": "border-r-light-1",
651
- "light-2": "border-r-light-2",
652
- "light-3": "border-r-light-3",
653
- "light-4": "border-r-light-4",
654
- "dark-1": "border-r-dark-1",
655
- "dark-2": "border-r-dark-2",
656
- "dark-3": "border-r-dark-3",
657
- "dark-4": "border-r-dark-4",
658
- black: "border-r-black",
659
- white: "border-r-white",
660
- transparent: "border-r-transparent"
661
- };
662
- }
663
- class X {
664
- // h1 class
665
- heading1 = {
666
- sm: "h1-sm",
667
- md: "h1-md",
668
- lg: "h1-lg",
669
- xl: "h1-xl"
670
- };
671
- // h2 class
672
- heading2 = {
673
- sm: "h2-sm",
674
- md: "h2-md",
675
- lg: "h2-lg",
676
- xl: "h2-xl"
677
- };
678
- // h3 class
679
- heading3 = {
680
- sm: "h3-sm",
681
- md: "h3-md",
682
- lg: "h3-lg",
683
- xl: "h3-xl"
684
- };
685
- // h4 class
686
- heading4 = {
687
- sm: "h4-sm",
688
- md: "h4-md",
689
- lg: "h4-lg",
690
- xl: "h4-xl"
691
- };
692
- }
693
- let F = class {
694
- // opacity
695
- backgroundOpacity = {
696
- 10: "bg-opacity-10",
697
- 20: "bg-opacity-20",
698
- 30: "bg-opacity-30",
699
- 40: "bg-opacity-40",
700
- 50: "bg-opacity-50",
701
- 60: "bg-opacity-60",
702
- 70: "bg-opacity-70",
703
- 80: "bg-opacity-80",
704
- 90: "bg-opacity-90",
705
- 100: "bg-opacity-100"
706
- };
707
- opacity = {
708
- 10: "opacity-10",
709
- 20: "opacity-20",
710
- 30: "opacity-30",
711
- 40: "opacity-40",
712
- 50: "opacity-50",
713
- 60: "opacity-60",
714
- 70: "opacity-70",
715
- 80: "opacity-80",
716
- 90: "opacity-90",
717
- 100: "opacity-100"
718
- };
719
- outlineOpacity = {
720
- 10: "outline-opacity-10",
721
- 20: "outline-opacity-20",
722
- 30: "outline-opacity-30",
723
- 40: "outline-opacity-40",
724
- 50: "outline-opacity-50",
725
- 60: "outline-opacity-60",
726
- 70: "outline-opacity-70",
727
- 80: "outline-opacity-80",
728
- 90: "outline-opacity-90",
729
- 100: "outline-opacity-100"
730
- };
731
- }, P = class {
732
- // spacing: margin
733
- margin = {
734
- 0: "m-0",
735
- "3xs": "m-3xs",
736
- "2xs": "m-2xs",
737
- xs: "m-xs",
738
- sm: "m-sm",
739
- md: "m-md",
740
- lg: "m-lg",
741
- xl: "m-xl",
742
- "2xl": "m-2xl",
743
- "3xl": "m-3xl"
744
- };
745
- marginX = {
746
- 0: "mx-0",
747
- "3xs": "mx-3xs",
748
- "2xs": "mx-2xs",
749
- xs: "mx-xs",
750
- sm: "mx-sm",
751
- md: "mx-md",
752
- lg: "mx-lg",
753
- xl: "mx-xl",
754
- "2xl": "mx-2xl",
755
- "3xl": "mx-3xl"
756
- };
757
- marginY = {
758
- 0: "my-0",
759
- "3xs": "my-3xs",
760
- "2xs": "my-2xs",
761
- xs: "my-xs",
762
- sm: "my-sm",
763
- md: "my-md",
764
- lg: "my-lg",
765
- xl: "my-xl",
766
- "2xl": "my-2xl",
767
- "3xl": "my-3xl"
768
- };
769
- marginTop = {
770
- 0: "mt-0",
771
- "3xs": "mt-3xs",
772
- "2xs": "mt-2xs",
773
- xs: "mt-xs",
774
- sm: "mt-sm",
775
- md: "mt-md",
776
- lg: "mt-lg",
777
- xl: "mt-xl",
778
- "2xl": "mt-2xl",
779
- "3xl": "mt-3xl"
780
- };
781
- marginBottom = {
782
- 0: "mb-0",
783
- "3xs": "mb-3xs",
784
- "2xs": "mb-2xs",
785
- xs: "mb-xs",
786
- sm: "mb-sm",
787
- md: "mb-md",
788
- lg: "mb-lg",
789
- xl: "mb-xl",
790
- "2xl": "mb-2xl",
791
- "3xl": "mb-3xl"
792
- };
793
- marginLeft = {
794
- 0: "ml-0",
795
- "3xs": "ml-3xs",
796
- "2xs": "ml-2xs",
797
- xs: "ml-xs",
798
- sm: "ml-sm",
799
- md: "ml-md",
800
- lg: "ml-lg",
801
- xl: "ml-xl",
802
- "2xl": "ml-2xl",
803
- "3xl": "ml-3xl"
804
- };
805
- marginRight = {
806
- 0: "mr-0",
807
- "3xs": "mr-3xs",
808
- "2xs": "mr-2xs",
809
- xs: "mr-xs",
810
- sm: "mr-sm",
811
- md: "mr-md",
812
- lg: "mr-lg",
813
- xl: "mr-xl",
814
- "2xl": "mr-2xl",
815
- "3xl": "mr-3xl"
816
- };
817
- // spacing: padding
818
- padding = {
819
- 0: "p-0",
820
- "3xs": "p-3xs",
821
- "2xs": "p-2xs",
822
- xs: "p-xs",
823
- sm: "p-sm",
824
- md: "p-md",
825
- lg: "p-lg",
826
- xl: "p-xl",
827
- "2xl": "p-2xl",
828
- "3xl": "p-3xl"
829
- };
830
- paddingX = {
831
- 0: "px-0",
832
- "3xs": "px-3xs",
833
- "2xs": "px-2xs",
834
- xs: "px-xs",
835
- sm: "px-sm",
836
- md: "px-md",
837
- lg: "px-lg",
838
- xl: "px-xl",
839
- "2xl": "px-2xl",
840
- "3xl": "px-3xl"
841
- };
842
- paddingY = {
843
- 0: "py-0",
844
- "3xs": "py-3xs",
845
- "2xs": "py-2xs",
846
- xs: "py-xs",
847
- sm: "py-sm",
848
- md: "py-md",
849
- lg: "py-lg",
850
- xl: "py-xl",
851
- "2xl": "py-2xl",
852
- "3xl": "py-3xl"
853
- };
854
- paddingTop = {
855
- 0: "pt-0",
856
- "3xs": "pt-3xs",
857
- "2xs": "pt-2xs",
858
- xs: "pt-xs",
859
- sm: "pt-sm",
860
- md: "pt-md",
861
- lg: "pt-lg",
862
- xl: "pt-xl",
863
- "2xl": "pt-2xl",
864
- "3xl": "pt-3xl"
865
- };
866
- paddingBottom = {
867
- 0: "pb-0",
868
- "3xs": "pb-3xs",
869
- "2xs": "pb-2xs",
870
- xs: "pb-xs",
871
- sm: "pb-sm",
872
- md: "pb-md",
873
- lg: "pb-lg",
874
- xl: "pb-xl",
875
- "2xl": "pb-2xl",
876
- "3xl": "pb-3xl"
877
- };
878
- paddingLeft = {
879
- 0: "pl-0",
880
- "3xs": "pl-3xs",
881
- "2xs": "pl-2xs",
882
- xs: "pl-xs",
883
- sm: "pl-sm",
884
- md: "pl-md",
885
- lg: "pl-lg",
886
- xl: "pl-xl",
887
- "2xl": "pl-2xl",
888
- "3xl": "pl-3xl"
889
- };
890
- paddingRight = {
891
- 0: "pr-0",
892
- "3xs": "pr-3xs",
893
- "2xs": "pr-2xs",
894
- xs: "pr-xs",
895
- sm: "pr-sm",
896
- md: "pr-md",
897
- lg: "pr-lg",
898
- xl: "pr-xl",
899
- "2xl": "pr-2xl",
900
- "3xl": "pr-3xl"
901
- };
902
- // spacing gap class for flex/grid
903
- gap = {
904
- 0: "gap-0",
905
- "3xs": "gap-3xs",
906
- "2xs": "gap-2xs",
907
- xs: "gap-xs",
908
- sm: "gap-sm",
909
- md: "gap-md",
910
- lg: "gap-lg",
911
- xl: "gap-xl",
912
- "2xl": "gap-2xl",
913
- "3xl": "gap-3xl"
914
- };
915
- }, Y = class {
916
- classType;
917
- constructor(r) {
918
- this.classType = r;
919
- }
920
- validateColorType(r) {
921
- return typeof r != "string" || !/(primary|secondary|success|info|warning|danger|light-1|light-2|light-3|light-4|dark-1|dark-2|dark-3|dark-4|black|white|transparent)/.test(r) ? !1 : k.colorType.includes(this.classType);
922
- }
923
- validateSpaceType(r) {
924
- return typeof r != "string" || !/(0|3xs|2xs|xs|sm|md|lg|xl|2xl|3xl)/.test(r) ? !1 : k.spacingType.includes(this.classType);
925
- }
926
- validateHeadingTextSizeType(r) {
927
- return typeof r != "string" || !/(sm|md|lg|xl)/.test(r) ? !1 : k.headingSizeType.includes(
928
- this.classType
929
- );
930
- }
931
- validateBodyTextSizeType(r) {
932
- return typeof r != "string" || !/(xs|sm|md|lg|xl)/.test(r) ? !1 : k.textType.includes(this.classType);
933
- }
934
- validateFontWeightType(r) {
935
- return typeof r != "string" || !/(light|normal|bold)/.test(r) ? !1 : k.fontWeightType.includes(
936
- this.classType
937
- );
938
- }
939
- validateOpacityType(r) {
940
- return typeof r != "number" || !/\b(0|[1-9]0|100)\b/.test(r.toString()) ? !1 : k.scaleType.includes(this.classType);
941
- }
942
- validateRangeType(r) {
943
- return typeof r != "number" || !/\b([1-9]|1[0-2])\b/.test(r.toString()) ? !1 : k.borderWidthType.includes(
944
- this.classType
945
- );
946
- }
947
- validateAlignment(r) {
948
- return typeof r != "string" || !/(left|center|right)/.test(r) ? !1 : k.textAlignType.includes(
949
- this.classType
950
- );
951
- }
952
- };
953
- const k = {
954
- colorType: [
955
- "BGCOLOR",
956
- "BEFOREBG",
957
- "AFTERBG",
958
- "HVBGCOLOR",
959
- "FCBGCOLOR",
960
- "ACTIVEBG",
961
- "TEXTCOLOR",
962
- "HVTEXTCOLOR",
963
- "FCTEXTCOLOR",
964
- "DISABLEDTEXTCOLOR",
965
- "SVGFILL",
966
- "RINGCOLOR",
967
- "FOCUSRING",
968
- "ACTIVERING",
969
- "OUTLINE",
970
- "FOCUSOUTLINE",
971
- "ACTIVEOUTLINE",
972
- "OFFSETRING",
973
- "BTNCOLOR",
974
- "LISTCOLOR",
975
- "BORDER",
976
- "BORDERX",
977
- "BORDERY",
978
- "BORDERT",
979
- "BORDERB",
980
- "BORDERL",
981
- "BORDERR"
982
- ],
983
- textType: ["BODYTEXT"],
984
- fontWeightType: ["FONTWEIGHT"],
985
- textAlignType: ["TEXTALIGN"],
986
- headingSizeType: ["H1", "H2", "H3", "H4"],
987
- borderWidthType: [
988
- "BORDERW",
989
- "BORDERXW",
990
- "BORDERYW",
991
- "BORDERTW",
992
- "BORDERBW",
993
- "BORDERLW",
994
- "BORDERRW"
995
- ],
996
- scaleType: ["BGOPACITY", "OPACITY", "OUTLINEOPACITY"],
997
- spacingType: [
998
- "MARGIN",
999
- "MARGINX",
1000
- "MARGINY",
1001
- "MARGINT",
1002
- "MARGINB",
1003
- "MARGINL",
1004
- "MARGINR",
1005
- "PADDING",
1006
- "PADDINGX",
1007
- "PADDINGY",
1008
- "PADDINGT",
1009
- "PADDINGB",
1010
- "PADDINGL",
1011
- "PADDINGR",
1012
- "GAP"
1013
- ]
1014
- };
1015
- class z {
1016
- classType;
1017
- classValue;
1018
- colorClass;
1019
- headingSizeClass;
1020
- borderWidthClass;
1021
- opacityClass;
1022
- spacingClass;
1023
- textClass;
1024
- validator;
1025
- constructor(r, e) {
1026
- this.classType = r, this.classValue = e, this.colorClass = new M(), this.headingSizeClass = new X(), this.borderWidthClass = new H(), this.opacityClass = new F(), this.spacingClass = new P(), this.textClass = new N(), this.validator = new Y(r);
1027
- }
1028
- generateClass() {
1029
- switch (this.classType) {
1030
- // case: color classes
1031
- case "BGCOLOR":
1032
- return this.getBgColorClass();
1033
- case "HVBGCOLOR":
1034
- return this.getHoverBgColorClass();
1035
- case "FCBGCOLOR":
1036
- return this.getFocusBgColorClass();
1037
- case "BEFOREBG":
1038
- return this.getBeforeBgColorClass();
1039
- case "AFTERBG":
1040
- return this.getAfterBgColorClass();
1041
- case "ACTIVEBG":
1042
- return this.getActiveBgColorClass();
1043
- case "TEXTCOLOR":
1044
- return this.getTextColorClass();
1045
- case "HVTEXTCOLOR":
1046
- return this.getHoverTextColorClass();
1047
- case "FCTEXTCOLOR":
1048
- return this.getFocusTextColorClass();
1049
- case "DISABLEDTEXTCOLOR":
1050
- return this.getDisabledTextColorClass();
1051
- case "SVGFILL":
1052
- return this.getSvgFillColorClass();
1053
- case "RINGCOLOR":
1054
- return this.getRingColorClass();
1055
- case "FOCUSRING":
1056
- return this.getFocusRingColorClass();
1057
- case "ACTIVERING":
1058
- return this.getActiveRingColorClass();
1059
- case "OFFSETRING":
1060
- return this.getRingOffsetColorClass();
1061
- case "OUTLINE":
1062
- return this.getOutlineColorClass();
1063
- case "FOCUSOUTLINE":
1064
- return this.getFocusOutlineColorClass();
1065
- case "ACTIVEOUTLINE":
1066
- return this.getActiveOutlineColorClass();
1067
- case "BTNCOLOR":
1068
- return this.getBtnColorClass();
1069
- case "LISTCOLOR":
1070
- return this.getListColorClass();
1071
- case "BORDER":
1072
- return this.getBorderColorClass();
1073
- case "BORDERX":
1074
- return this.getBorderXColorClass();
1075
- case "BORDERY":
1076
- return this.getBorderYColorClass();
1077
- case "BORDERT":
1078
- return this.getBorderTopColorClass();
1079
- case "BORDERB":
1080
- return this.getBorderBottomColorClass();
1081
- case "BORDERL":
1082
- return this.getBorderLeftColorClass();
1083
- case "BORDERR":
1084
- return this.getBorderRightColorClass();
1085
- // case: heading classes
1086
- case "H1":
1087
- return this.getH1Class();
1088
- case "H2":
1089
- return this.getH2Class();
1090
- case "H3":
1091
- return this.getH3Class();
1092
- case "H4":
1093
- return this.getH4Class();
1094
- // case: body text class
1095
- case "BODYTEXT":
1096
- return this.getBodyTextSizeClass();
1097
- // case: font weight class
1098
- case "FONTWEIGHT":
1099
- return this.getFontWeightClass();
1100
- // case: text alignment class
1101
- case "TEXTALIGN":
1102
- return this.getTextAlignClass();
1103
- // case: border width classes
1104
- case "BORDERW":
1105
- return this.getBorderWidthClass();
1106
- case "BORDERXW":
1107
- return this.getBorderXWidthClass();
1108
- case "BORDERYW":
1109
- return this.getBorderYWidthClass();
1110
- case "BORDERTW":
1111
- return this.getBorderTopWidthClass();
1112
- case "BORDERBW":
1113
- return this.getBorderBottomWidthClass();
1114
- case "BORDERLW":
1115
- return this.getBorderLeftWidthClass();
1116
- case "BORDERRW":
1117
- return this.getBorderRightWidthClass();
1118
- // case: opacity classes
1119
- case "OPACITY":
1120
- return this.getOpacityClass();
1121
- case "BGOPACITY":
1122
- return this.getBgOpacityClass();
1123
- case "OUTLINEOPACITY":
1124
- return this.getOutlineOpacityClass();
1125
- // case: margins
1126
- case "MARGIN":
1127
- return this.getMarginClass();
1128
- case "MARGINX":
1129
- return this.getMarginXClass();
1130
- case "MARGINY":
1131
- return this.getMarginYClass();
1132
- case "MARGINT":
1133
- return this.getMarginTopClass();
1134
- case "MARGINB":
1135
- return this.getMarginBottomClass();
1136
- case "MARGINL":
1137
- return this.getMarginLeftClass();
1138
- case "MARGINR":
1139
- return this.getMarginRightClass();
1140
- // case: paddings
1141
- case "PADDING":
1142
- return this.getPaddingClass();
1143
- case "PADDINGX":
1144
- return this.getPaddingXClass();
1145
- case "PADDINGY":
1146
- return this.getPaddingYClass();
1147
- case "PADDINGT":
1148
- return this.getPaddingTopClass();
1149
- case "PADDINGB":
1150
- return this.getPaddingBottomClass();
1151
- case "PADDINGL":
1152
- return this.getPaddingLeftClass();
1153
- case "PADDINGR":
1154
- return this.getPaddingRightClass();
1155
- // case: gap
1156
- case "GAP":
1157
- return this.getGapClass();
1158
- default:
1159
- return " ";
17
+ const M = (r) => typeof r == "boolean" ? `${r}` : r === 0 ? "0" : r, O = I, t = (r, n) => (a) => {
18
+ var i;
19
+ if (n?.variants == null) return O(r, a?.class, a?.className);
20
+ const { variants: m, defaultVariants: x } = n, v = Object.keys(m).map((c) => {
21
+ const e = a?.[c], o = x?.[c];
22
+ if (e === null) return null;
23
+ const l = M(e) || M(o);
24
+ return m[c][l];
25
+ }), w = a && Object.entries(a).reduce((c, e) => {
26
+ let [o, l] = e;
27
+ return l === void 0 || (c[o] = l), c;
28
+ }, {}), d = n == null || (i = n.compoundVariants) === null || i === void 0 ? void 0 : i.reduce((c, e) => {
29
+ let { class: o, className: l, ...s } = e;
30
+ return Object.entries(s).every((p) => {
31
+ let [u, C] = p;
32
+ return Array.isArray(C) ? C.includes({
33
+ ...x,
34
+ ...w
35
+ }[u]) : {
36
+ ...x,
37
+ ...w
38
+ }[u] === C;
39
+ }) ? [
40
+ ...c,
41
+ o,
42
+ l
43
+ ] : c;
44
+ }, []);
45
+ return O(r, v, d, a?.class, a?.className);
46
+ }, N = t("", {
47
+ variants: {
48
+ color: {
49
+ primary: "mcl-bg-primary",
50
+ secondary: "mcl-bg-secondary",
51
+ success: "mcl-bg-success",
52
+ danger: "mcl-bg-danger",
53
+ info: "mcl-bg-info",
54
+ warning: "mcl-bg-warning",
55
+ "light-1": "mcl-bg-light-1",
56
+ "light-2": "mcl-bg-light-2",
57
+ "light-3": "mcl-bg-light-3",
58
+ "light-4": "mcl-bg-light-4",
59
+ "dark-1": "mcl-bg-dark-1",
60
+ "dark-2": "mcl-bg-dark-2",
61
+ "dark-3": "mcl-bg-dark-3",
62
+ "dark-4": "mcl-bg-dark-4",
63
+ black: "mcl-bg-black",
64
+ white: "mcl-bg-white",
65
+ transparent: "mcl-bg-transparent"
1160
66
  }
1161
67
  }
1162
- // handle color class
1163
- // bg color
1164
- getBgColorClass() {
1165
- return this.validator.validateColorType(this.classValue) ? this.colorClass.bgColor[this.classValue] : " ";
1166
- }
1167
- getHoverBgColorClass() {
1168
- return this.validator.validateColorType(this.classValue) ? this.colorClass.hoverBgColor[this.classValue] : " ";
1169
- }
1170
- getFocusBgColorClass() {
1171
- return this.validator.validateColorType(this.classValue) ? this.colorClass.focusBgColor[this.classValue] : " ";
1172
- }
1173
- getBeforeBgColorClass() {
1174
- return this.validator.validateColorType(this.classValue) ? this.colorClass.beforeBgColor[this.classValue] : " ";
1175
- }
1176
- getAfterBgColorClass() {
1177
- return this.validator.validateColorType(this.classValue) ? this.colorClass.afterBgColor[this.classValue] : " ";
1178
- }
1179
- getActiveBgColorClass() {
1180
- return this.validator.validateColorType(this.classValue) ? this.colorClass.bgActiveColor[this.classValue] : " ";
1181
- }
1182
- // text color
1183
- getTextColorClass() {
1184
- return this.validator.validateColorType(this.classValue) ? this.colorClass.textColor[this.classValue] : " ";
1185
- }
1186
- getHoverTextColorClass() {
1187
- return this.validator.validateColorType(this.classValue) ? this.colorClass.hoverTextColor[this.classValue] : " ";
1188
- }
1189
- getFocusTextColorClass() {
1190
- return this.validator.validateColorType(this.classValue) ? this.colorClass.focusTextColor[this.classValue] : " ";
1191
- }
1192
- getDisabledTextColorClass() {
1193
- return this.validator.validateColorType(this.classValue) ? this.colorClass.disabledTextColor[this.classValue] : " ";
1194
- }
1195
- // svg color
1196
- getSvgFillColorClass() {
1197
- return this.validator.validateColorType(this.classValue) ? this.colorClass.svgFillColor[this.classValue] : " ";
1198
- }
1199
- // ring color
1200
- getRingColorClass() {
1201
- return this.validator.validateColorType(this.classValue) ? this.colorClass.ringColor[this.classValue] : " ";
68
+ }), X = t("", {
69
+ variants: {
70
+ color: {
71
+ primary: "hover:bg-primary",
72
+ secondary: "hover:bg-secondary",
73
+ success: "hover:bg-success",
74
+ danger: "hover:bg-danger",
75
+ info: "hover:bg-info",
76
+ warning: "hover:bg-warning",
77
+ "light-1": "hover:bg-light-1",
78
+ "light-2": "hover:bg-light-2",
79
+ "light-3": "hover:bg-light-3",
80
+ "light-4": "hover:bg-light-4",
81
+ "dark-1": "hover:bg-dark-1",
82
+ "dark-2": "hover:bg-dark-2",
83
+ "dark-3": "hover:bg-dark-3",
84
+ "dark-4": "hover:bg-dark-4",
85
+ black: "hover:bg-black",
86
+ white: "hover:bg-white",
87
+ transparent: "hover:bg-transparent"
88
+ }
1202
89
  }
1203
- getFocusRingColorClass() {
1204
- return this.validator.validateColorType(this.classValue) ? this.colorClass.ringFocusColor[this.classValue] : " ";
90
+ }), Y = t("", {
91
+ variants: {
92
+ color: {
93
+ primary: "focus:bg-primary",
94
+ secondary: "focus:bg-secondary",
95
+ success: "focus:bg-success",
96
+ danger: "focus:bg-danger",
97
+ info: "focus:bg-info",
98
+ warning: "focus:bg-warning",
99
+ "light-1": "focus:bg-light-1",
100
+ "light-2": "focus:bg-light-2",
101
+ "light-3": "focus:bg-light-3",
102
+ "light-4": "focus:bg-light-4",
103
+ "dark-1": "focus:bg-dark-1",
104
+ "dark-2": "focus:bg-dark-2",
105
+ "dark-3": "focus:bg-dark-3",
106
+ "dark-4": "focus:bg-dark-4",
107
+ black: "focus:bg-black",
108
+ white: "focus:bg-white",
109
+ transparent: "focus:bg-transparent"
110
+ }
1205
111
  }
1206
- getActiveRingColorClass() {
1207
- return this.validator.validateColorType(this.classValue) ? this.colorClass.ringActiveColor[this.classValue] : " ";
112
+ }), q = t("", {
113
+ variants: {
114
+ color: {
115
+ primary: "before:bg-primary",
116
+ secondary: "before:bg-secondary",
117
+ success: "before:bg-success",
118
+ danger: "before:bg-danger",
119
+ info: "before:bg-info",
120
+ warning: "before:bg-warning",
121
+ "light-1": "before:bg-light-1",
122
+ "light-2": "before:bg-light-2",
123
+ "light-3": "before:bg-light-3",
124
+ "light-4": "before:bg-light-4",
125
+ "dark-1": "before:bg-dark-1",
126
+ "dark-2": "before:bg-dark-2",
127
+ "dark-3": "before:bg-dark-3",
128
+ "dark-4": "before:bg-dark-4",
129
+ black: "before:bg-black",
130
+ white: "before:bg-white",
131
+ transparent: "before:bg-transparent"
132
+ }
1208
133
  }
1209
- getRingOffsetColorClass() {
1210
- return this.validator.validateColorType(this.classValue) ? this.colorClass.ringOffsetColor[this.classValue] : " ";
134
+ }), F = t("", {
135
+ variants: {
136
+ color: {
137
+ primary: "after:bg-primary",
138
+ secondary: "after:bg-secondary",
139
+ success: "after:bg-success",
140
+ danger: "after:bg-danger",
141
+ info: "after:bg-info",
142
+ warning: "after:bg-warning",
143
+ "light-1": "after:bg-light-1",
144
+ "light-2": "after:bg-light-2",
145
+ "light-3": "after:bg-light-3",
146
+ "light-4": "after:bg-light-4",
147
+ "dark-1": "after:bg-dark-1",
148
+ "dark-2": "after:bg-dark-2",
149
+ "dark-3": "after:bg-dark-3",
150
+ "dark-4": "after:bg-dark-4",
151
+ black: "after:bg-black",
152
+ white: "after:bg-white",
153
+ transparent: "after:bg-transparent"
154
+ }
1211
155
  }
1212
- // outline color
1213
- getOutlineColorClass() {
1214
- return this.validator.validateColorType(this.classValue) ? this.colorClass.outlineColor[this.classValue] : " ";
156
+ }), G = t("", {
157
+ variants: {
158
+ color: {
159
+ primary: "active:bg-primary",
160
+ secondary: "active:bg-secondary",
161
+ success: "active:bg-success",
162
+ danger: "active:bg-danger",
163
+ info: "active:bg-info",
164
+ warning: "active:bg-warning",
165
+ "light-1": "active:bg-light-1",
166
+ "light-2": "active:bg-light-2",
167
+ "light-3": "active:bg-light-3",
168
+ "light-4": "active:bg-light-4",
169
+ "dark-1": "active:bg-dark-1",
170
+ "dark-2": "active:bg-dark-2",
171
+ "dark-3": "active:bg-dark-3",
172
+ "dark-4": "active:bg-dark-4",
173
+ black: "active:bg-black",
174
+ white: "active:bg-white",
175
+ transparent: "active:bg-transparent"
176
+ }
1215
177
  }
1216
- getFocusOutlineColorClass() {
1217
- return this.validator.validateColorType(this.classValue) ? this.colorClass.focusOutlineColor[this.classValue] : " ";
178
+ }), J = t("", {
179
+ variants: {
180
+ color: {
181
+ primary: "text-primary",
182
+ secondary: "text-secondary",
183
+ success: "text-success",
184
+ danger: "text-danger",
185
+ info: "text-info",
186
+ warning: "text-warning",
187
+ "light-1": "text-light-1",
188
+ "light-2": "text-light-2",
189
+ "light-3": "text-light-3",
190
+ "light-4": "text-light-4",
191
+ "dark-1": "text-dark-1",
192
+ "dark-2": "text-dark-2",
193
+ "dark-3": "text-dark-3",
194
+ "dark-4": "text-dark-4",
195
+ black: "text-black",
196
+ white: "text-white",
197
+ transparent: "text-transparent"
198
+ }
1218
199
  }
1219
- getActiveOutlineColorClass() {
1220
- return this.validator.validateColorType(this.classValue) ? this.colorClass.activeOutlineColor[this.classValue] : " ";
200
+ }), K = t("", {
201
+ variants: {
202
+ color: {
203
+ primary: "hover:text-primary",
204
+ secondary: "hover:text-secondary",
205
+ success: "hover:text-success",
206
+ danger: "hover:text-danger",
207
+ info: "hover:text-info",
208
+ warning: "hover:text-warning",
209
+ "light-1": "hover:text-light-1",
210
+ "light-2": "hover:text-light-2",
211
+ "light-3": "hover:text-light-3",
212
+ "light-4": "hover:text-light-4",
213
+ "dark-1": "hover:text-dark-1",
214
+ "dark-2": "hover:text-dark-2",
215
+ "dark-3": "hover:text-dark-3",
216
+ "dark-4": "hover:text-dark-4",
217
+ black: "hover:text-black",
218
+ white: "hover:text-white",
219
+ transparent: "hover:text-transparent"
220
+ }
1221
221
  }
1222
- // btn & list
1223
- getBtnColorClass() {
1224
- return this.validator.validateColorType(this.classValue) ? this.colorClass.btnColor[this.classValue] : " ";
222
+ }), P = t("", {
223
+ variants: {
224
+ color: {
225
+ primary: "focus:text-primary",
226
+ secondary: "focus:text-secondary",
227
+ success: "focus:text-success",
228
+ danger: "focus:text-danger",
229
+ info: "focus:text-info",
230
+ warning: "focus:text-warning",
231
+ "light-1": "focus:text-light-1",
232
+ "light-2": "focus:text-light-2",
233
+ "light-3": "focus:text-light-3",
234
+ "light-4": "focus:text-light-4",
235
+ "dark-1": "focus:text-dark-1",
236
+ "dark-2": "focus:text-dark-2",
237
+ "dark-3": "focus:text-dark-3",
238
+ "dark-4": "focus:text-dark-4",
239
+ black: "focus:text-black",
240
+ white: "focus:text-white",
241
+ transparent: "focus:text-transparent"
242
+ }
1225
243
  }
1226
- getListColorClass() {
1227
- return this.validator.validateColorType(this.classValue) ? this.colorClass.listColor[this.classValue] : " ";
244
+ }), Q = t("", {
245
+ variants: {
246
+ color: {
247
+ primary: "disabled:text-primary",
248
+ secondary: "disabled:text-secondary",
249
+ success: "disabled:text-success",
250
+ danger: "disabled:text-danger",
251
+ info: "disabled:text-info",
252
+ warning: "disabled:text-warning",
253
+ "light-1": "disabled:text-light-1",
254
+ "light-2": "disabled:text-light-2",
255
+ "light-3": "disabled:text-light-3",
256
+ "light-4": "disabled:text-light-4",
257
+ "dark-1": "disabled:text-dark-1",
258
+ "dark-2": "disabled:text-dark-2",
259
+ "dark-3": "disabled:text-dark-3",
260
+ "dark-4": "disabled:text-dark-4",
261
+ black: "disabled:text-black",
262
+ white: "disabled:text-white",
263
+ transparent: "disabled:text-transparent"
264
+ }
1228
265
  }
1229
- // border color
1230
- getBorderColorClass() {
1231
- return this.validator.validateColorType(this.classValue) ? this.colorClass.borderColor[this.classValue] : " ";
266
+ }), U = t("", {
267
+ variants: {
268
+ color: {
269
+ primary: "fill-primary",
270
+ secondary: "fill-secondary",
271
+ success: "fill-success",
272
+ danger: "fill-danger",
273
+ info: "fill-info",
274
+ warning: "fill-warning",
275
+ "light-1": "fill-light-1",
276
+ "light-2": "fill-light-2",
277
+ "light-3": "fill-light-3",
278
+ "light-4": "fill-light-4",
279
+ "dark-1": "fill-dark-1",
280
+ "dark-2": "fill-dark-2",
281
+ "dark-3": "fill-dark-3",
282
+ "dark-4": "fill-dark-4",
283
+ black: "fill-black",
284
+ white: "fill-white",
285
+ transparent: "fill-transparent"
286
+ }
1232
287
  }
1233
- getBorderXColorClass() {
1234
- return this.validator.validateColorType(this.classValue) ? this.colorClass.borderXColor[this.classValue] : " ";
288
+ }), Z = t("", {
289
+ variants: {
290
+ color: {
291
+ primary: "ring-primary",
292
+ secondary: "ring-secondary",
293
+ success: "ring-success",
294
+ danger: "ring-danger",
295
+ info: "ring-info",
296
+ warning: "ring-warning",
297
+ "light-1": "ring-light-1",
298
+ "light-2": "ring-light-2",
299
+ "light-3": "ring-light-3",
300
+ "light-4": "ring-light-4",
301
+ "dark-1": "ring-dark-1",
302
+ "dark-2": "ring-dark-2",
303
+ "dark-3": "ring-dark-3",
304
+ "dark-4": "ring-dark-4",
305
+ black: "ring-black",
306
+ white: "ring-white",
307
+ transparent: "ring-transparent"
308
+ }
1235
309
  }
1236
- getBorderYColorClass() {
1237
- return this.validator.validateColorType(this.classValue) ? this.colorClass.borderYColor[this.classValue] : " ";
310
+ }), _ = t("", {
311
+ variants: {
312
+ color: {
313
+ primary: "focus:ring-primary",
314
+ secondary: "focus:ring-secondary",
315
+ success: "focus:ring-success",
316
+ danger: "focus:ring-danger",
317
+ info: "focus:ring-info",
318
+ warning: "focus:ring-warning",
319
+ "light-1": "focus:ring-light-1",
320
+ "light-2": "focus:ring-light-2",
321
+ "light-3": "focus:ring-light-3",
322
+ "light-4": "focus:ring-light-4",
323
+ "dark-1": "focus:ring-dark-1",
324
+ "dark-2": "focus:ring-dark-2",
325
+ "dark-3": "focus:ring-dark-3",
326
+ "dark-4": "focus:ring-dark-4",
327
+ black: "focus:ring-black",
328
+ white: "focus:ring-white",
329
+ transparent: "focus:ring-transparent"
330
+ }
1238
331
  }
1239
- getBorderTopColorClass() {
1240
- return this.validator.validateColorType(this.classValue) ? this.colorClass.borderTopColor[this.classValue] : " ";
332
+ }), rr = t("", {
333
+ variants: {
334
+ color: {
335
+ primary: "active:ring-primary",
336
+ secondary: "active:ring-secondary",
337
+ success: "active:ring-success",
338
+ danger: "active:ring-danger",
339
+ info: "active:ring-info",
340
+ warning: "active:ring-warning",
341
+ "light-1": "active:ring-light-1",
342
+ "light-2": "active:ring-light-2",
343
+ "light-3": "active:ring-light-3",
344
+ "light-4": "active:ring-light-4",
345
+ "dark-1": "active:ring-dark-1",
346
+ "dark-2": "active:ring-dark-2",
347
+ "dark-3": "active:ring-dark-3",
348
+ "dark-4": "active:ring-dark-4",
349
+ black: "active:ring-black",
350
+ white: "active:ring-white",
351
+ transparent: "active:ring-transparent"
352
+ }
1241
353
  }
1242
- getBorderBottomColorClass() {
1243
- return this.validator.validateColorType(this.classValue) ? this.colorClass.borderBottomColor[this.classValue] : " ";
354
+ }), tr = t("", {
355
+ variants: {
356
+ color: {
357
+ primary: "ring-offset-primary",
358
+ secondary: "ring-offset-secondary",
359
+ success: "ring-offset-success",
360
+ danger: "ring-offset-danger",
361
+ info: "ring-offset-info",
362
+ warning: "ring-offset-warning",
363
+ "light-1": "ring-offset-light-1",
364
+ "light-2": "ring-offset-light-2",
365
+ "light-3": "ring-offset-light-3",
366
+ "light-4": "ring-offset-light-4",
367
+ "dark-1": "ring-offset-dark-1",
368
+ "dark-2": "ring-offset-dark-2",
369
+ "dark-3": "ring-offset-dark-3",
370
+ "dark-4": "ring-offset-dark-4",
371
+ black: "ring-offset-black",
372
+ white: "ring-offset-white",
373
+ transparent: "ring-offset-transparent"
374
+ }
1244
375
  }
1245
- getBorderLeftColorClass() {
1246
- return this.validator.validateColorType(this.classValue) ? this.colorClass.borderLeftColor[this.classValue] : " ";
376
+ }), ar = t("", {
377
+ variants: {
378
+ color: {
379
+ primary: "mcl-outline-primary",
380
+ secondary: "mcl-outline-secondary",
381
+ success: "mcl-outline-success",
382
+ danger: "mcl-outline-danger",
383
+ info: "mcl-outline-info",
384
+ warning: "mcl-outline-warning",
385
+ "light-1": "mcl-outline-light-1",
386
+ "light-2": "mcl-outline-light-2",
387
+ "light-3": "mcl-outline-light-3",
388
+ "light-4": "mcl-outline-light-4",
389
+ "dark-1": "mcl-outline-dark-1",
390
+ "dark-2": "mcl-outline-dark-2",
391
+ "dark-3": "mcl-outline-dark-3",
392
+ "dark-4": "mcl-outline-dark-4",
393
+ black: "mcl-outline-black",
394
+ white: "mcl-outline-white",
395
+ transparent: "mcl-outline-transparent"
396
+ }
1247
397
  }
1248
- getBorderRightColorClass() {
1249
- return this.validator.validateColorType(this.classValue) ? this.colorClass.borderRightColor[this.classValue] : " ";
398
+ }), er = t("", {
399
+ variants: {
400
+ color: {
401
+ primary: "focus:mcl-outline-primary",
402
+ secondary: "focus:mcl-outline-secondary",
403
+ success: "focus:mcl-outline-success",
404
+ danger: "focus:mcl-outline-danger",
405
+ info: "focus:mcl-outline-info",
406
+ warning: "focus:mcl-outline-warning",
407
+ "light-1": "focus:mcl-outline-light-1",
408
+ "light-2": "focus:mcl-outline-light-2",
409
+ "light-3": "focus:mcl-outline-light-3",
410
+ "light-4": "focus:mcl-outline-light-4",
411
+ "dark-1": "focus:mcl-outline-dark-1",
412
+ "dark-2": "focus:mcl-outline-dark-2",
413
+ "dark-3": "focus:mcl-outline-dark-3",
414
+ "dark-4": "focus:mcl-outline-dark-4",
415
+ black: "focus:mcl-outline-black",
416
+ white: "focus:mcl-outline-white",
417
+ transparent: "focus:mcl-outline-transparent"
418
+ }
1250
419
  }
1251
- // handle heading classes
1252
- getH1Class() {
1253
- return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading1[this.classValue] : " ";
420
+ }), lr = t("", {
421
+ variants: {
422
+ color: {
423
+ primary: "active:mcl-outline-primary",
424
+ secondary: "active:mcl-outline-secondary",
425
+ success: "active:mcl-outline-success",
426
+ danger: "active:mcl-outline-danger",
427
+ info: "active:mcl-outline-info",
428
+ warning: "active:mcl-outline-warning",
429
+ "light-1": "active:mcl-outline-light-1",
430
+ "light-2": "active:mcl-outline-light-2",
431
+ "light-3": "active:mcl-outline-light-3",
432
+ "light-4": "active:mcl-outline-light-4",
433
+ "dark-1": "active:mcl-outline-dark-1",
434
+ "dark-2": "active:mcl-outline-dark-2",
435
+ "dark-3": "active:mcl-outline-dark-3",
436
+ "dark-4": "active:mcl-outline-dark-4",
437
+ black: "active:mcl-outline-black",
438
+ white: "active:mcl-outline-white",
439
+ transparent: "active:mcl-outline-transparent"
440
+ }
1254
441
  }
1255
- getH2Class() {
1256
- return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading2[this.classValue] : " ";
442
+ }), ir = t("", {
443
+ variants: {
444
+ color: {
445
+ primary: "btn-primary",
446
+ secondary: "btn-secondary",
447
+ success: "btn-success",
448
+ danger: "btn-danger",
449
+ info: "btn-info",
450
+ warning: "btn-warning",
451
+ "light-1": "btn-light-1",
452
+ "light-2": "btn-light-2",
453
+ "light-3": "btn-light-3",
454
+ "light-4": "btn-light-4",
455
+ "dark-1": "btn-dark-1",
456
+ "dark-2": "btn-dark-2",
457
+ "dark-3": "btn-dark-3",
458
+ "dark-4": "btn-dark-4",
459
+ black: "btn-black",
460
+ white: "btn-white",
461
+ transparent: "btn-transparent"
462
+ }
1257
463
  }
1258
- getH3Class() {
1259
- return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading3[this.classValue] : " ";
464
+ }), or = t("", {
465
+ variants: {
466
+ color: {
467
+ primary: "mcl-list-primary",
468
+ secondary: "mcl-list-secondary",
469
+ success: "mcl-list-success",
470
+ danger: "mcl-list-danger",
471
+ info: "mcl-list-info",
472
+ warning: "mcl-list-warning",
473
+ "light-1": "mcl-list-light-1",
474
+ "light-2": "mcl-list-light-2",
475
+ "light-3": "mcl-list-light-3",
476
+ "light-4": "mcl-list-light-4",
477
+ "dark-1": "mcl-list-dark-1",
478
+ "dark-2": "mcl-list-dark-2",
479
+ "dark-3": "mcl-list-dark-3",
480
+ "dark-4": "mcl-list-dark-4",
481
+ black: "mcl-list-black",
482
+ white: "mcl-list-white",
483
+ transparent: "mcl-list-transparent"
484
+ }
1260
485
  }
1261
- getH4Class() {
1262
- return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading4[this.classValue] : " ";
486
+ }), nr = t("", {
487
+ variants: {
488
+ color: {
489
+ primary: "border-primary",
490
+ secondary: "border-secondary",
491
+ success: "border-success",
492
+ danger: "border-danger",
493
+ info: "border-info",
494
+ warning: "border-warning",
495
+ "light-1": "border-light-1",
496
+ "light-2": "border-light-2",
497
+ "light-3": "border-light-3",
498
+ "light-4": "border-light-4",
499
+ "dark-1": "border-dark-1",
500
+ "dark-2": "border-dark-2",
501
+ "dark-3": "border-dark-3",
502
+ "dark-4": "border-dark-4",
503
+ black: "border-black",
504
+ white: "border-white",
505
+ transparent: "border-transparent"
506
+ }
1263
507
  }
1264
- // handle body text size classes
1265
- getBodyTextSizeClass() {
1266
- return this.validator.validateBodyTextSizeType(this.classValue) ? this.textClass.bodyText[this.classValue] : " ";
508
+ }), sr = t("", {
509
+ variants: {
510
+ color: {
511
+ primary: "border-x-primary",
512
+ secondary: "border-x-secondary",
513
+ success: "border-x-success",
514
+ danger: "border-x-danger",
515
+ info: "border-x-info",
516
+ warning: "border-x-warning",
517
+ "light-1": "border-x-light-1",
518
+ "light-2": "border-x-light-2",
519
+ "light-3": "border-x-light-3",
520
+ "light-4": "border-x-light-4",
521
+ "dark-1": "border-x-dark-1",
522
+ "dark-2": "border-x-dark-2",
523
+ "dark-3": "border-x-dark-3",
524
+ "dark-4": "border-x-dark-4",
525
+ black: "border-x-black",
526
+ white: "border-x-white",
527
+ transparent: "border-x-transparent"
528
+ }
1267
529
  }
1268
- // handle font weight classes
1269
- getFontWeightClass() {
1270
- return this.validator.validateFontWeightType(this.classValue) ? this.textClass.fontweight[this.classValue] : " ";
530
+ }), dr = t("", {
531
+ variants: {
532
+ color: {
533
+ primary: "border-y-primary",
534
+ secondary: "border-y-secondary",
535
+ success: "border-y-success",
536
+ danger: "border-y-danger",
537
+ info: "border-y-info",
538
+ warning: "border-y-warning",
539
+ "light-1": "border-y-light-1",
540
+ "light-2": "border-y-light-2",
541
+ "light-3": "border-y-light-3",
542
+ "light-4": "border-y-light-4",
543
+ "dark-1": "border-y-dark-1",
544
+ "dark-2": "border-y-dark-2",
545
+ "dark-3": "border-y-dark-3",
546
+ "dark-4": "border-y-dark-4",
547
+ black: "border-y-black",
548
+ white: "border-y-white",
549
+ transparent: "border-y-transparent"
550
+ }
1271
551
  }
1272
- // handle text align classes
1273
- getTextAlignClass() {
1274
- return this.validator.validateAlignment(this.classValue) ? this.textClass.textAlign[this.classValue] : " ";
552
+ }), cr = t("", {
553
+ variants: {
554
+ color: {
555
+ primary: "border-t-primary",
556
+ secondary: "border-t-secondary",
557
+ success: "border-t-success",
558
+ danger: "border-t-danger",
559
+ info: "border-t-info",
560
+ warning: "border-t-warning",
561
+ "light-1": "border-t-light-1",
562
+ "light-2": "border-t-light-2",
563
+ "light-3": "border-t-light-3",
564
+ "light-4": "border-t-light-4",
565
+ "dark-1": "border-t-dark-1",
566
+ "dark-2": "border-t-dark-2",
567
+ "dark-3": "border-t-dark-3",
568
+ "dark-4": "border-t-dark-4",
569
+ black: "border-t-black",
570
+ white: "border-t-white",
571
+ transparent: "border-t-transparent"
572
+ }
1275
573
  }
1276
- // handle border width class
1277
- getBorderWidthClass() {
1278
- return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderWidth[this.classValue] : " ";
574
+ }), gr = t("", {
575
+ variants: {
576
+ color: {
577
+ primary: "border-b-primary",
578
+ secondary: "border-b-secondary",
579
+ success: "border-b-success",
580
+ danger: "border-b-danger",
581
+ info: "border-b-info",
582
+ warning: "border-b-warning",
583
+ "light-1": "border-b-light-1",
584
+ "light-2": "border-b-light-2",
585
+ "light-3": "border-b-light-3",
586
+ "light-4": "border-b-light-4",
587
+ "dark-1": "border-b-dark-1",
588
+ "dark-2": "border-b-dark-2",
589
+ "dark-3": "border-b-dark-3",
590
+ "dark-4": "border-b-dark-4",
591
+ black: "border-b-black",
592
+ white: "border-b-white",
593
+ transparent: "border-b-transparent"
594
+ }
1279
595
  }
1280
- getBorderXWidthClass() {
1281
- return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderXWidth[this.classValue] : " ";
596
+ }), br = t("", {
597
+ variants: {
598
+ color: {
599
+ primary: "border-l-primary",
600
+ secondary: "border-l-secondary",
601
+ success: "border-l-success",
602
+ danger: "border-l-danger",
603
+ info: "border-l-info",
604
+ warning: "border-l-warning",
605
+ "light-1": "border-l-light-1",
606
+ "light-2": "border-l-light-2",
607
+ "light-3": "border-l-light-3",
608
+ "light-4": "border-l-light-4",
609
+ "dark-1": "border-l-dark-1",
610
+ "dark-2": "border-l-dark-2",
611
+ "dark-3": "border-l-dark-3",
612
+ "dark-4": "border-l-dark-4",
613
+ black: "border-l-black",
614
+ white: "border-l-white",
615
+ transparent: "border-l-transparent"
616
+ }
1282
617
  }
1283
- getBorderYWidthClass() {
1284
- return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderYWidth[this.classValue] : " ";
618
+ }), hr = t("", {
619
+ variants: {
620
+ color: {
621
+ primary: "border-r-primary",
622
+ secondary: "border-r-secondary",
623
+ success: "border-r-success",
624
+ danger: "border-r-danger",
625
+ info: "border-r-info",
626
+ warning: "border-r-warning",
627
+ "light-1": "border-r-light-1",
628
+ "light-2": "border-r-light-2",
629
+ "light-3": "border-r-light-3",
630
+ "light-4": "border-r-light-4",
631
+ "dark-1": "border-r-dark-1",
632
+ "dark-2": "border-r-dark-2",
633
+ "dark-3": "border-r-dark-3",
634
+ "dark-4": "border-r-dark-4",
635
+ black: "border-r-black",
636
+ white: "border-r-white",
637
+ transparent: "border-r-transparent"
638
+ }
1285
639
  }
1286
- getBorderTopWidthClass() {
1287
- return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderTopWidth[this.classValue] : " ";
640
+ }), xr = t("", {
641
+ variants: {
642
+ size: {
643
+ xs: "text-xs",
644
+ sm: "text-sm",
645
+ md: "text-md",
646
+ lg: "text-lg",
647
+ xl: "text-xl"
648
+ }
1288
649
  }
1289
- getBorderBottomWidthClass() {
1290
- return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderBottomWidth[this.classValue] : " ";
650
+ }), mr = t("", {
651
+ variants: {
652
+ weight: {
653
+ light: "font-light",
654
+ normal: "font-normal",
655
+ bold: "font-bold"
656
+ }
1291
657
  }
1292
- getBorderLeftWidthClass() {
1293
- return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderLeftWidth[this.classValue] : " ";
658
+ }), ur = t("", {
659
+ variants: {
660
+ align: {
661
+ left: "text-left",
662
+ center: "text-center",
663
+ right: "text-right"
664
+ }
1294
665
  }
1295
- getBorderRightWidthClass() {
1296
- return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderRightWidth[this.classValue] : " ";
666
+ }), pr = t("", {
667
+ variants: {
668
+ size: {
669
+ sm: "h1-sm",
670
+ md: "h1-md",
671
+ lg: "h1-lg",
672
+ xl: "h1-xl"
673
+ }
1297
674
  }
1298
- // handle opacity classes
1299
- getOpacityClass() {
1300
- return this.validator.validateOpacityType(this.classValue) ? this.opacityClass.opacity[this.classValue] : " ";
675
+ }), fr = t("", {
676
+ variants: {
677
+ size: {
678
+ sm: "h2-sm",
679
+ md: "h2-md",
680
+ lg: "h2-lg",
681
+ xl: "h2-xl"
682
+ }
1301
683
  }
1302
- getBgOpacityClass() {
1303
- return this.validator.validateOpacityType(this.classValue) ? this.opacityClass.backgroundOpacity[this.classValue] : " ";
684
+ }), kr = t("", {
685
+ variants: {
686
+ size: {
687
+ sm: "h3-sm",
688
+ md: "h3-md",
689
+ lg: "h3-lg",
690
+ xl: "h3-xl"
691
+ }
1304
692
  }
1305
- getOutlineOpacityClass() {
1306
- return this.validator.validateOpacityType(this.classValue) ? this.opacityClass.outlineOpacity[this.classValue] : " ";
693
+ }), yr = t("", {
694
+ variants: {
695
+ size: {
696
+ sm: "h4-sm",
697
+ md: "h4-md",
698
+ lg: "h4-lg",
699
+ xl: "h4-xl"
700
+ }
1307
701
  }
1308
- // spacing classes
1309
- // margins
1310
- getMarginClass() {
1311
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.margin[this.classValue] : " ";
702
+ }), vr = {
703
+ 1: "border-[1px]",
704
+ 2: "border-[2px]",
705
+ 3: "border-[3px]",
706
+ 4: "border-[4px]",
707
+ 5: "border-[5px]",
708
+ 6: "border-[6px]",
709
+ 7: "border-[7px]",
710
+ 8: "border-[8px]",
711
+ 9: "border-[9px]",
712
+ 10: "border-[10px]",
713
+ 11: "border-[11px]",
714
+ 12: "border-[12px]"
715
+ }, wr = {
716
+ 1: "border-x-[1px]",
717
+ 2: "border-x-[2px]",
718
+ 3: "border-x-[3px]",
719
+ 4: "border-x-[4px]",
720
+ 5: "border-x-[5px]",
721
+ 6: "border-x-[6px]",
722
+ 7: "border-x-[7px]",
723
+ 8: "border-x-[8px]",
724
+ 9: "border-x-[9px]",
725
+ 10: "border-x-[10px]",
726
+ 11: "border-x-[11px]",
727
+ 12: "border-x-[12px]"
728
+ }, Cr = {
729
+ 1: "border-y-[1px]",
730
+ 2: "border-y-[2px]",
731
+ 3: "border-y-[3px]",
732
+ 4: "border-y-[4px]",
733
+ 5: "border-y-[5px]",
734
+ 6: "border-y-[6px]",
735
+ 7: "border-y-[7px]",
736
+ 8: "border-y-[8px]",
737
+ 9: "border-y-[9px]",
738
+ 10: "border-y-[10px]",
739
+ 11: "border-y-[11px]",
740
+ 12: "border-y-[12px]"
741
+ }, Vr = {
742
+ 1: "border-t-[1px]",
743
+ 2: "border-t-[2px]",
744
+ 3: "border-t-[3px]",
745
+ 4: "border-t-[4px]",
746
+ 5: "border-t-[5px]",
747
+ 6: "border-t-[6px]",
748
+ 7: "border-t-[7px]",
749
+ 8: "border-t-[8px]",
750
+ 9: "border-t-[9px]",
751
+ 10: "border-t-[10px]",
752
+ 11: "border-t-[11px]",
753
+ 12: "border-t-[12px]"
754
+ }, Br = {
755
+ 1: "border-b-[1px]",
756
+ 2: "border-b-[2px]",
757
+ 3: "border-b-[3px]",
758
+ 4: "border-b-[4px]",
759
+ 5: "border-b-[5px]",
760
+ 6: "border-b-[6px]",
761
+ 7: "border-b-[7px]",
762
+ 8: "border-b-[8px]",
763
+ 9: "border-b-[9px]",
764
+ 10: "border-b-[10px]",
765
+ 11: "border-b-[11px]",
766
+ 12: "border-b-[12px]"
767
+ }, Tr = {
768
+ 1: "border-l-[1px]",
769
+ 2: "border-l-[2px]",
770
+ 3: "border-l-[3px]",
771
+ 4: "border-l-[4px]",
772
+ 5: "border-l-[5px]",
773
+ 6: "border-l-[6px]",
774
+ 7: "border-l-[7px]",
775
+ 8: "border-l-[8px]",
776
+ 9: "border-l-[9px]",
777
+ 10: "border-l-[10px]",
778
+ 11: "border-l-[11px]",
779
+ 12: "border-l-[12px]"
780
+ }, Lr = {
781
+ 1: "border-r-[1px]",
782
+ 2: "border-r-[2px]",
783
+ 3: "border-r-[3px]",
784
+ 4: "border-r-[4px]",
785
+ 5: "border-r-[5px]",
786
+ 6: "border-r-[6px]",
787
+ 7: "border-r-[7px]",
788
+ 8: "border-r-[8px]",
789
+ 9: "border-r-[9px]",
790
+ 10: "border-r-[10px]",
791
+ 11: "border-r-[11px]",
792
+ 12: "border-r-[12px]"
793
+ }, Ar = (r) => vr[r.width] ?? "", jr = (r) => wr[r.width] ?? "", Sr = (r) => Cr[r.width] ?? "", zr = (r) => Vr[r.width] ?? "", Mr = (r) => Br[r.width] ?? "", Or = (r) => Tr[r.width] ?? "", $r = (r) => Lr[r.width] ?? "", Hr = {
794
+ 10: "opacity-10",
795
+ 20: "opacity-20",
796
+ 30: "opacity-30",
797
+ 40: "opacity-40",
798
+ 50: "opacity-50",
799
+ 60: "opacity-60",
800
+ 70: "opacity-70",
801
+ 80: "opacity-80",
802
+ 90: "opacity-90",
803
+ 100: "opacity-100"
804
+ }, Wr = {
805
+ 10: "bg-opacity-10",
806
+ 20: "bg-opacity-20",
807
+ 30: "bg-opacity-30",
808
+ 40: "bg-opacity-40",
809
+ 50: "bg-opacity-50",
810
+ 60: "bg-opacity-60",
811
+ 70: "bg-opacity-70",
812
+ 80: "bg-opacity-80",
813
+ 90: "bg-opacity-90",
814
+ 100: "bg-opacity-100"
815
+ }, Er = {
816
+ 10: "outline-opacity-10",
817
+ 20: "outline-opacity-20",
818
+ 30: "outline-opacity-30",
819
+ 40: "outline-opacity-40",
820
+ 50: "outline-opacity-50",
821
+ 60: "outline-opacity-60",
822
+ 70: "outline-opacity-70",
823
+ 80: "outline-opacity-80",
824
+ 90: "outline-opacity-90",
825
+ 100: "outline-opacity-100"
826
+ }, Rr = (r) => Hr[r.opacity] ?? "", Dr = (r) => Wr[r.opacity] ?? "", Ir = (r) => Er[r.opacity] ?? "", Nr = t("", {
827
+ variants: {
828
+ spacing: {
829
+ 0: "m-0",
830
+ "3xs": "m-3xs",
831
+ "2xs": "m-2xs",
832
+ xs: "m-xs",
833
+ sm: "m-sm",
834
+ md: "m-md",
835
+ lg: "m-lg",
836
+ xl: "m-xl",
837
+ "2xl": "m-2xl",
838
+ "3xl": "m-3xl"
839
+ }
1312
840
  }
1313
- getMarginXClass() {
1314
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginX[this.classValue] : " ";
841
+ }), Xr = t("", {
842
+ variants: {
843
+ spacing: {
844
+ 0: "mx-0",
845
+ "3xs": "mx-3xs",
846
+ "2xs": "mx-2xs",
847
+ xs: "mx-xs",
848
+ sm: "mx-sm",
849
+ md: "mx-md",
850
+ lg: "mx-lg",
851
+ xl: "mx-xl",
852
+ "2xl": "mx-2xl",
853
+ "3xl": "mx-3xl"
854
+ }
1315
855
  }
1316
- getMarginYClass() {
1317
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginY[this.classValue] : " ";
856
+ }), Yr = t("", {
857
+ variants: {
858
+ spacing: {
859
+ 0: "my-0",
860
+ "3xs": "my-3xs",
861
+ "2xs": "my-2xs",
862
+ xs: "my-xs",
863
+ sm: "my-sm",
864
+ md: "my-md",
865
+ lg: "my-lg",
866
+ xl: "my-xl",
867
+ "2xl": "my-2xl",
868
+ "3xl": "my-3xl"
869
+ }
1318
870
  }
1319
- getMarginTopClass() {
1320
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginTop[this.classValue] : " ";
871
+ }), qr = t("", {
872
+ variants: {
873
+ spacing: {
874
+ 0: "mt-0",
875
+ "3xs": "mt-3xs",
876
+ "2xs": "mt-2xs",
877
+ xs: "mt-xs",
878
+ sm: "mt-sm",
879
+ md: "mt-md",
880
+ lg: "mt-lg",
881
+ xl: "mt-xl",
882
+ "2xl": "mt-2xl",
883
+ "3xl": "mt-3xl"
884
+ }
1321
885
  }
1322
- getMarginBottomClass() {
1323
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginBottom[this.classValue] : " ";
886
+ }), Fr = t("", {
887
+ variants: {
888
+ spacing: {
889
+ 0: "mb-0",
890
+ "3xs": "mb-3xs",
891
+ "2xs": "mb-2xs",
892
+ xs: "mb-xs",
893
+ sm: "mb-sm",
894
+ md: "mb-md",
895
+ lg: "mb-lg",
896
+ xl: "mb-xl",
897
+ "2xl": "mb-2xl",
898
+ "3xl": "mb-3xl"
899
+ }
1324
900
  }
1325
- getMarginLeftClass() {
1326
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginLeft[this.classValue] : " ";
901
+ }), Gr = t("", {
902
+ variants: {
903
+ spacing: {
904
+ 0: "ml-0",
905
+ "3xs": "ml-3xs",
906
+ "2xs": "ml-2xs",
907
+ xs: "ml-xs",
908
+ sm: "ml-sm",
909
+ md: "ml-md",
910
+ lg: "ml-lg",
911
+ xl: "ml-xl",
912
+ "2xl": "ml-2xl",
913
+ "3xl": "ml-3xl"
914
+ }
1327
915
  }
1328
- getMarginRightClass() {
1329
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginRight[this.classValue] : " ";
916
+ }), Jr = t("", {
917
+ variants: {
918
+ spacing: {
919
+ 0: "mr-0",
920
+ "3xs": "mr-3xs",
921
+ "2xs": "mr-2xs",
922
+ xs: "mr-xs",
923
+ sm: "mr-sm",
924
+ md: "mr-md",
925
+ lg: "mr-lg",
926
+ xl: "mr-xl",
927
+ "2xl": "mr-2xl",
928
+ "3xl": "mr-3xl"
929
+ }
1330
930
  }
1331
- // paddings
1332
- getPaddingClass() {
1333
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.padding[this.classValue] : " ";
931
+ }), Kr = t("", {
932
+ variants: {
933
+ spacing: {
934
+ 0: "p-0",
935
+ "3xs": "p-3xs",
936
+ "2xs": "p-2xs",
937
+ xs: "p-xs",
938
+ sm: "p-sm",
939
+ md: "p-md",
940
+ lg: "p-lg",
941
+ xl: "p-xl",
942
+ "2xl": "p-2xl",
943
+ "3xl": "p-3xl"
944
+ }
1334
945
  }
1335
- getPaddingXClass() {
1336
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingX[this.classValue] : " ";
946
+ }), Pr = t("", {
947
+ variants: {
948
+ spacing: {
949
+ 0: "px-0",
950
+ "3xs": "px-3xs",
951
+ "2xs": "px-2xs",
952
+ xs: "px-xs",
953
+ sm: "px-sm",
954
+ md: "px-md",
955
+ lg: "px-lg",
956
+ xl: "px-xl",
957
+ "2xl": "px-2xl",
958
+ "3xl": "px-3xl"
959
+ }
1337
960
  }
1338
- getPaddingYClass() {
1339
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingY[this.classValue] : " ";
961
+ }), Qr = t("", {
962
+ variants: {
963
+ spacing: {
964
+ 0: "py-0",
965
+ "3xs": "py-3xs",
966
+ "2xs": "py-2xs",
967
+ xs: "py-xs",
968
+ sm: "py-sm",
969
+ md: "py-md",
970
+ lg: "py-lg",
971
+ xl: "py-xl",
972
+ "2xl": "py-2xl",
973
+ "3xl": "py-3xl"
974
+ }
1340
975
  }
1341
- getPaddingTopClass() {
1342
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingTop[this.classValue] : " ";
976
+ }), Ur = t("", {
977
+ variants: {
978
+ spacing: {
979
+ 0: "pt-0",
980
+ "3xs": "pt-3xs",
981
+ "2xs": "pt-2xs",
982
+ xs: "pt-xs",
983
+ sm: "pt-sm",
984
+ md: "pt-md",
985
+ lg: "pt-lg",
986
+ xl: "pt-xl",
987
+ "2xl": "pt-2xl",
988
+ "3xl": "pt-3xl"
989
+ }
1343
990
  }
1344
- getPaddingBottomClass() {
1345
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingBottom[this.classValue] : " ";
991
+ }), Zr = t("", {
992
+ variants: {
993
+ spacing: {
994
+ 0: "pb-0",
995
+ "3xs": "pb-3xs",
996
+ "2xs": "pb-2xs",
997
+ xs: "pb-xs",
998
+ sm: "pb-sm",
999
+ md: "pb-md",
1000
+ lg: "pb-lg",
1001
+ xl: "pb-xl",
1002
+ "2xl": "pb-2xl",
1003
+ "3xl": "pb-3xl"
1004
+ }
1346
1005
  }
1347
- getPaddingLeftClass() {
1348
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingLeft[this.classValue] : " ";
1006
+ }), _r = t("", {
1007
+ variants: {
1008
+ spacing: {
1009
+ 0: "pl-0",
1010
+ "3xs": "pl-3xs",
1011
+ "2xs": "pl-2xs",
1012
+ xs: "pl-xs",
1013
+ sm: "pl-sm",
1014
+ md: "pl-md",
1015
+ lg: "pl-lg",
1016
+ xl: "pl-xl",
1017
+ "2xl": "pl-2xl",
1018
+ "3xl": "pl-3xl"
1019
+ }
1349
1020
  }
1350
- getPaddingRightClass() {
1351
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingRight[this.classValue] : " ";
1021
+ }), rt = t("", {
1022
+ variants: {
1023
+ spacing: {
1024
+ 0: "pr-0",
1025
+ "3xs": "pr-3xs",
1026
+ "2xs": "pr-2xs",
1027
+ xs: "pr-xs",
1028
+ sm: "pr-sm",
1029
+ md: "pr-md",
1030
+ lg: "pr-lg",
1031
+ xl: "pr-xl",
1032
+ "2xl": "pr-2xl",
1033
+ "3xl": "pr-3xl"
1034
+ }
1352
1035
  }
1353
- // gaps
1354
- getGapClass() {
1355
- return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.gap[this.classValue] : " ";
1036
+ }), tt = t("", {
1037
+ variants: {
1038
+ spacing: {
1039
+ 0: "gap-0",
1040
+ "3xs": "gap-3xs",
1041
+ "2xs": "gap-2xs",
1042
+ xs: "gap-xs",
1043
+ sm: "gap-sm",
1044
+ md: "gap-md",
1045
+ lg: "gap-lg",
1046
+ xl: "gap-xl",
1047
+ "2xl": "gap-2xl",
1048
+ "3xl": "gap-3xl"
1049
+ }
1356
1050
  }
1357
- }
1358
- const j = (t, r) => new z(t, r).generateClass();
1359
- w({
1360
- setup(t, { slots: r }) {
1361
- const e = I(!1);
1362
- return G(() => {
1363
- e.value = !0;
1364
- }), () => e.value && r.default ? r.default() : null;
1051
+ }), at = {
1052
+ // color
1053
+ bgColorVariant: N,
1054
+ hoverBgColorVariant: X,
1055
+ focusBgColorVariant: Y,
1056
+ beforeBgColorVariant: q,
1057
+ afterBgColorVariant: F,
1058
+ activeBgColorVariant: G,
1059
+ textColorVariant: J,
1060
+ hoverTextColorVariant: K,
1061
+ focusTextColorVariant: P,
1062
+ disabledTextColorVariant: Q,
1063
+ svgFillColorVariant: U,
1064
+ ringColorVariant: Z,
1065
+ focusRingColorVariant: _,
1066
+ activeRingColorVariant: rr,
1067
+ ringOffsetColorVariant: tr,
1068
+ outlineColorVariant: ar,
1069
+ focusOutlineColorVariant: er,
1070
+ activeOutlineColorVariant: lr,
1071
+ btnColorVariant: ir,
1072
+ listColorVariant: or,
1073
+ borderColorVariant: nr,
1074
+ borderXColorVariant: sr,
1075
+ borderYColorVariant: dr,
1076
+ borderTopColorVariant: cr,
1077
+ borderBottomColorVariant: gr,
1078
+ borderLeftColorVariant: br,
1079
+ borderRightColorVariant: hr,
1080
+ // typography
1081
+ bodyTextVariant: xr,
1082
+ fontWeightVariant: mr,
1083
+ textAlignVariant: ur,
1084
+ h1Variant: pr,
1085
+ h2Variant: fr,
1086
+ h3Variant: kr,
1087
+ h4Variant: yr,
1088
+ // border width
1089
+ borderWidthVariant: Ar,
1090
+ borderXWidthVariant: jr,
1091
+ borderYWidthVariant: Sr,
1092
+ borderTopWidthVariant: zr,
1093
+ borderBottomWidthVariant: Mr,
1094
+ borderLeftWidthVariant: Or,
1095
+ borderRightWidthVariant: $r,
1096
+ // opacity
1097
+ opacityVariant: Rr,
1098
+ bgOpacityVariant: Dr,
1099
+ outlineOpacityVariant: Ir,
1100
+ // spacing
1101
+ marginVariant: Nr,
1102
+ marginXVariant: Xr,
1103
+ marginYVariant: Yr,
1104
+ marginTopVariant: qr,
1105
+ marginBottomVariant: Fr,
1106
+ marginLeftVariant: Gr,
1107
+ marginRightVariant: Jr,
1108
+ paddingVariant: Kr,
1109
+ paddingXVariant: Pr,
1110
+ paddingYVariant: Qr,
1111
+ paddingTopVariant: Ur,
1112
+ paddingBottomVariant: Zr,
1113
+ paddingLeftVariant: _r,
1114
+ paddingRightVariant: rt,
1115
+ gapVariant: tt
1116
+ };
1117
+ B({
1118
+ setup(r, { slots: n }) {
1119
+ const a = $(!1);
1120
+ return R(() => {
1121
+ a.value = !0;
1122
+ }), () => a.value && n.default ? n.default() : null;
1365
1123
  }
1366
1124
  });
1367
- const $ = {
1125
+ const et = {
1368
1126
  xs: "backdrop-blur-xs",
1369
1127
  sm: "backdrop-blur-sm",
1370
1128
  md: "backdrop-blur-md",
1371
1129
  lg: "backdrop-blur-lg",
1372
1130
  xl: "backdrop-blur-xl"
1373
- }, U = {
1131
+ }, lt = {
1374
1132
  primary: "mcl-glass-primary",
1375
1133
  secondary: "mcl-glass-secondary",
1376
1134
  success: "mcl-glass-success",
@@ -1388,7 +1146,7 @@ const $ = {
1388
1146
  black: "mcl-glass-black",
1389
1147
  white: "mcl-glass-white",
1390
1148
  transparent: "mcl-glass-transparent"
1391
- }, q = {
1149
+ }, it = {
1392
1150
  10: "mcl-depth-10",
1393
1151
  20: "mcl-depth-20",
1394
1152
  30: "mcl-depth-30",
@@ -1399,16 +1157,16 @@ const $ = {
1399
1157
  80: "mcl-depth-80",
1400
1158
  90: "mcl-depth-90",
1401
1159
  100: "mcl-depth-100"
1402
- }, J = (t, r, e, g = 10) => [
1160
+ }, ot = (r, n, a, i = 10) => [
1403
1161
  "mcl-glassmorphism",
1404
- U[t],
1405
- $[r],
1406
- j("BGOPACITY", e),
1407
- q[g]
1408
- ].filter(Boolean).join(" "), K = {
1162
+ lt[r],
1163
+ et[n],
1164
+ at.bgOpacityVariant({ opacity: a }),
1165
+ it[i]
1166
+ ].filter(Boolean).join(" "), nt = {
1409
1167
  key: 0,
1410
1168
  class: "relative"
1411
- }, Q = ["src", "alt"], Z = ["innerHTML"], _ = { class: "flex h-full flex-col justify-between" }, tt = { class: "px-xs pt-sm flex-1" }, rt = ["innerHTML"], et = ["innerHTML"], at = { class: "px-xs w-full" }, st = ["href", "target"], yt = /* @__PURE__ */ w({
1169
+ }, st = ["src", "alt"], dt = ["innerHTML"], ct = { class: "flex h-full flex-col justify-between" }, gt = { class: "flex-1 px-xs pt-sm" }, bt = ["innerHTML"], ht = ["innerHTML"], xt = { class: "w-full px-xs" }, mt = ["href", "target"], At = /* @__PURE__ */ B({
1412
1170
  __name: "MclCardA",
1413
1171
  props: {
1414
1172
  title: {},
@@ -1420,143 +1178,143 @@ const $ = {
1420
1178
  glass: { type: Boolean, default: !1 },
1421
1179
  glassBlur: { default: "sm" },
1422
1180
  glassOpacity: { default: 20 },
1423
- displayImage: { type: Boolean, default: !0 },
1181
+ showImage: { type: Boolean, default: !0 },
1424
1182
  imageSource: {},
1425
1183
  imageAlt: {},
1426
- displayCta: { type: Boolean, default: !0 },
1184
+ showCta: { type: Boolean, default: !0 },
1427
1185
  ctaAsLink: { type: Boolean, default: !1 },
1428
1186
  ctaText: { default: "cta text" },
1429
1187
  ctaColor: { default: "primary" },
1430
1188
  ctaLink: { default: "#" },
1431
1189
  ctaTarget: { default: "_self" },
1432
- displayLabel: { type: Boolean, default: !0 },
1190
+ showLabel: { type: Boolean, default: !0 },
1433
1191
  labelText: { default: "Lorem ipsum" },
1434
1192
  labelTextColor: { default: "light-1" },
1435
1193
  labelColor: { default: "dark-4" },
1436
1194
  enlargeOnHover: { type: Boolean, default: !1 },
1437
- displayHighlight: { type: Boolean, default: !0 },
1195
+ showHighlight: { type: Boolean, default: !0 },
1438
1196
  highlightColor: { default: "primary" },
1439
1197
  rounded: { type: Boolean, default: !0 },
1440
- displayShadow: { type: Boolean, default: !0 }
1198
+ showShadow: { type: Boolean, default: !0 }
1441
1199
  },
1442
1200
  emits: ["card-click", "card-btn-click"],
1443
- setup(t, { emit: r }) {
1444
- const e = t;
1445
- R();
1446
- const g = r, m = p(() => {
1201
+ setup(r, { emit: n }) {
1202
+ const a = r;
1203
+ L();
1204
+ const i = n, m = f(() => {
1447
1205
  const {
1448
- borderColor: a,
1449
- bgColor: l,
1450
- rounded: s,
1451
- enlargeOnHover: i,
1452
- displayShadow: f,
1453
- glass: b,
1454
- glassBlur: B,
1455
- glassOpacity: L,
1456
- fullWidth: S
1457
- } = e;
1206
+ borderColor: e,
1207
+ bgColor: o,
1208
+ rounded: l,
1209
+ enlargeOnHover: s,
1210
+ showShadow: p,
1211
+ glass: u,
1212
+ glassBlur: C,
1213
+ glassOpacity: j,
1214
+ fullWidth: E
1215
+ } = a;
1458
1216
  return [
1459
- d("BORDER", a),
1460
- d("BGCOLOR", l),
1461
- !S && "max-w-[450px] sm:max-w-[350px]",
1462
- s ? "rounded-lg" : "rounded-sm",
1463
- i && "hover:scale-105 transition ease-in duration-300",
1464
- f && "drop-shadow-md",
1465
- b && J(l, B, L)
1217
+ g.borderColorVariant({ color: e }),
1218
+ g.bgColorVariant({ color: o }),
1219
+ !E && "max-w-[450px] sm:max-w-[350px]",
1220
+ l ? "rounded-lg" : "rounded-sm",
1221
+ s && "hover:scale-105 transition ease-in duration-300",
1222
+ p && "drop-shadow-md",
1223
+ u && ot(o, C, j)
1466
1224
  ].filter(Boolean).join(" ");
1467
- }), u = p(() => {
1468
- const { titleSize: a, titleColor: l, displayHighlight: s } = e;
1225
+ }), x = f(() => {
1226
+ const { titleSize: e, titleColor: o, showHighlight: l } = a;
1469
1227
  return [
1470
- d("H3", a),
1471
- d("TEXTCOLOR", l),
1472
- s ? "mb-2xs" : "mb-xs"
1228
+ g.h3Variant({ size: e }),
1229
+ g.textColorVariant({ color: o }),
1230
+ l ? "mb-2xs" : "mb-xs"
1473
1231
  ].filter(Boolean).join(" ");
1474
- }), y = p(() => {
1475
- const { labelTextColor: a, labelColor: l } = e;
1232
+ }), v = f(() => {
1233
+ const { labelTextColor: e, labelColor: o } = a;
1476
1234
  return [
1477
- d("TEXTCOLOR", a),
1478
- d("BGCOLOR", l)
1235
+ g.textColorVariant({ color: e }),
1236
+ g.bgColorVariant({ color: o })
1479
1237
  ].filter(Boolean).join(" ");
1480
- }), T = p(() => {
1481
- const { ctaColor: a, rounded: l } = e, s = ["light-1", "light-2", "light-3", "light-4"];
1238
+ }), w = f(() => {
1239
+ const { ctaColor: e, rounded: o } = a, l = ["light-1", "light-2", "light-3", "light-4"];
1482
1240
  return [
1483
- d("BTNCOLOR", a),
1484
- s.includes(a) ? "text-black" : "text-white",
1485
- l && "btn-round"
1241
+ g.btnColorVariant({ color: e }),
1242
+ l.includes(e) ? "text-black" : "text-white",
1243
+ o && "btn-round"
1486
1244
  ].filter(Boolean).join(" ");
1487
- }), o = (a) => {
1488
- const { title: l, ctaLink: s, ctaTarget: i, ctaAsLink: f } = e, b = {
1489
- title: l,
1490
- url: s,
1491
- target: i || "_self"
1245
+ }), d = (e) => {
1246
+ const { title: o, ctaLink: l, ctaTarget: s, ctaAsLink: p } = a, u = {
1247
+ title: o,
1248
+ url: l,
1249
+ target: s || "_self"
1492
1250
  };
1493
- !f && a.preventDefault(), g("card-btn-click", a, b);
1494
- }, h = (a) => {
1495
- const { title: l, ctaLink: s, ctaTarget: i } = e;
1496
- g("card-click", a, {
1497
- title: l,
1498
- url: s,
1499
- target: i || "_self"
1251
+ !p && e.preventDefault(), i("card-btn-click", e, u);
1252
+ }, c = (e) => {
1253
+ const { title: o, ctaLink: l, ctaTarget: s } = a;
1254
+ i("card-click", e, {
1255
+ title: o,
1256
+ url: l,
1257
+ target: s || "_self"
1500
1258
  });
1501
1259
  };
1502
- return (a, l) => (x(), C("div", {
1503
- class: c(["xs:w-auto flex w-full flex-shrink-0 flex-grow cursor-pointer flex-col overflow-hidden border", m.value]),
1504
- onClick: h
1260
+ return (e, o) => (k(), y("div", {
1261
+ class: h(["xs:w-auto flex w-full flex-shrink-0 flex-grow cursor-pointer flex-col overflow-hidden border", m.value]),
1262
+ onClick: c
1505
1263
  }, [
1506
- t.displayImage ? (x(), C("div", K, [
1507
- n("img", {
1508
- src: t.imageSource,
1509
- alt: t.imageAlt,
1264
+ r.showImage ? (k(), y("div", nt, [
1265
+ b("img", {
1266
+ src: r.imageSource,
1267
+ alt: r.imageAlt,
1510
1268
  class: "aspect-video min-w-full object-cover object-top"
1511
- }, null, 8, Q),
1512
- t.displayLabel ? (x(), C("span", {
1269
+ }, null, 8, st),
1270
+ r.showLabel ? (k(), y("span", {
1513
1271
  key: 0,
1514
- class: c(["py-3xs px-2xs ml-xs absolute bottom-0 inline-block translate-y-[50%] text-xs font-bold", y.value]),
1515
- innerHTML: t.labelText
1516
- }, null, 10, Z)) : v("", !0)
1517
- ])) : v("", !0),
1518
- n("div", _, [
1519
- n("div", tt, [
1520
- !t.displayImage && t.displayLabel ? (x(), C("span", {
1272
+ class: h(["absolute bottom-0 ml-xs inline-block translate-y-[50%] px-2xs py-3xs text-xs font-bold", v.value]),
1273
+ innerHTML: r.labelText
1274
+ }, null, 10, dt)) : V("", !0)
1275
+ ])) : V("", !0),
1276
+ b("div", ct, [
1277
+ b("div", gt, [
1278
+ !r.showImage && r.showLabel ? (k(), y("span", {
1521
1279
  key: 0,
1522
- class: c(["py-3xs px-2xs mb-2xs inline-block text-xs font-bold", y.value]),
1523
- innerHTML: t.labelText
1524
- }, null, 10, rt)) : v("", !0),
1525
- n("h3", {
1526
- class: c(u.value),
1527
- innerHTML: t.title
1528
- }, null, 10, et),
1529
- t.displayHighlight ? (x(), C("div", {
1280
+ class: h(["mb-2xs inline-block px-2xs py-3xs text-xs font-bold", v.value]),
1281
+ innerHTML: r.labelText
1282
+ }, null, 10, bt)) : V("", !0),
1283
+ b("h3", {
1284
+ class: h(x.value),
1285
+ innerHTML: r.title
1286
+ }, null, 10, ht),
1287
+ r.showHighlight ? (k(), y("div", {
1530
1288
  key: 1,
1531
- class: c(["mb-xs h-3xs w-md", A(d)("BGCOLOR", t.highlightColor)])
1532
- }, null, 2)) : v("", !0),
1533
- n("div", {
1289
+ class: h(["mb-xs h-3xs w-md", S(g).bgColorVariant({ color: r.highlightColor })])
1290
+ }, null, 2)) : V("", !0),
1291
+ b("div", {
1534
1292
  class: "mb-sm cursor-default",
1535
- onClick: l[0] || (l[0] = E(() => {
1293
+ onClick: o[0] || (o[0] = z(() => {
1536
1294
  }, ["stop"]))
1537
1295
  }, [
1538
- V(a.$slots, "default")
1296
+ A(e.$slots, "default")
1539
1297
  ])
1540
1298
  ]),
1541
- t.displayCta ? (x(), C("div", {
1299
+ r.showCta ? (k(), y("div", {
1542
1300
  key: 0,
1543
- class: "pb-sm cursor-default border-0",
1544
- onClick: l[2] || (l[2] = E(() => {
1301
+ class: "cursor-default border-0 pb-sm",
1302
+ onClick: o[2] || (o[2] = z(() => {
1545
1303
  }, ["stop"]))
1546
1304
  }, [
1547
- n("div", at, [
1548
- n("a", {
1549
- href: t.ctaLink,
1550
- target: t.ctaTarget,
1551
- class: c(["btn btn-full", T.value]),
1552
- onClick: l[1] || (l[1] = (s) => o(s))
1553
- }, O(t.ctaText), 11, st)
1305
+ b("div", xt, [
1306
+ b("a", {
1307
+ href: r.ctaLink,
1308
+ target: r.ctaTarget,
1309
+ class: h(["btn btn-full", w.value]),
1310
+ onClick: o[1] || (o[1] = (l) => d(l))
1311
+ }, T(r.ctaText), 11, mt)
1554
1312
  ])
1555
- ])) : v("", !0)
1313
+ ])) : V("", !0)
1556
1314
  ])
1557
1315
  ], 2));
1558
1316
  }
1559
- }), lt = ["href", "target"], it = { class: "z-15 p-xs peer absolute inset-0 flex flex-col items-start justify-end transition-opacity duration-200 hover:opacity-100 [@media(hover:hover)]:opacity-0" }, ot = ["innerHTML"], dt = ["src", "alt"], kt = /* @__PURE__ */ w({
1317
+ }), ut = ["href", "target"], pt = { class: "peer absolute inset-0 z-15 flex flex-col items-start justify-end p-xs transition-opacity duration-200 hover:opacity-100 [@media(hover:hover)]:opacity-0" }, ft = ["innerHTML"], kt = ["src", "alt"], jt = /* @__PURE__ */ B({
1560
1318
  __name: "MclCardB",
1561
1319
  props: {
1562
1320
  title: {},
@@ -1566,63 +1324,65 @@ const $ = {
1566
1324
  borderColor: { default: "light-3" },
1567
1325
  imageSource: {},
1568
1326
  imageAlt: {},
1569
- displayGrayScale: { type: Boolean, default: !0 },
1327
+ showGrayScale: { type: Boolean, default: !0 },
1570
1328
  ctaAsLink: { type: Boolean, default: !1 },
1571
1329
  ctaLink: { default: "#" },
1572
1330
  ctaTarget: { default: "_self" },
1573
1331
  rounded: { type: Boolean, default: !1 }
1574
1332
  },
1575
1333
  emits: ["card-click"],
1576
- setup(t, { emit: r }) {
1577
- const e = t;
1578
- R();
1579
- const g = r, m = p(() => {
1580
- const { borderColor: o, rounded: h } = e, a = [d("BORDER", o)];
1581
- return a.push(h ? "rounded-md" : "rounded-sm"), a.join(" ");
1582
- }), u = p(() => {
1583
- const { displayGrayScale: o } = e;
1584
- return o ? "[@media(hover:hover)]:grayscale peer-hover:grayscale-0" : "";
1585
- }), y = p(() => {
1586
- const { titleSize: o, titleColor: h, titleBlockColor: a } = e;
1334
+ setup(r, { emit: n }) {
1335
+ const a = r;
1336
+ L();
1337
+ const i = n, m = f(() => {
1338
+ const { borderColor: d, rounded: c } = a, e = [
1339
+ g.borderColorVariant({ color: d })
1340
+ ];
1341
+ return e.push(c ? "rounded-md" : "rounded-sm"), e.join(" ");
1342
+ }), x = f(() => {
1343
+ const { showGrayScale: d } = a;
1344
+ return d ? "[@media(hover:hover)]:grayscale peer-hover:grayscale-0" : "";
1345
+ }), v = f(() => {
1346
+ const { titleSize: d, titleColor: c, titleBlockColor: e } = a;
1587
1347
  return [
1588
- d("H3", o),
1589
- d("TEXTCOLOR", h),
1590
- d("BGCOLOR", a)
1348
+ g.h3Variant({ size: d }),
1349
+ g.textColorVariant({ color: c }),
1350
+ g.bgColorVariant({ color: e })
1591
1351
  ].join(" ");
1592
- }), T = (o) => {
1593
- const { title: h, ctaLink: a, ctaTarget: l, ctaAsLink: s } = e;
1594
- !s && o.preventDefault();
1595
- const i = {
1596
- title: h,
1597
- url: a,
1598
- target: l || "_self"
1352
+ }), w = (d) => {
1353
+ const { title: c, ctaLink: e, ctaTarget: o, ctaAsLink: l } = a;
1354
+ !l && d.preventDefault();
1355
+ const s = {
1356
+ title: c,
1357
+ url: e,
1358
+ target: o || "_self"
1599
1359
  };
1600
- console.log(i), g("card-click", o, i);
1360
+ console.log(s), i("card-click", d, s);
1601
1361
  };
1602
- return (o, h) => (x(), C("div", {
1603
- class: c(["max-w-112.5 sm:max-w-87.5 xs:w-auto relative w-full shrink-0 grow cursor-pointer overflow-hidden border", m.value])
1362
+ return (d, c) => (k(), y("div", {
1363
+ class: h(["xs:w-auto relative w-full max-w-112.5 shrink-0 grow cursor-pointer overflow-hidden border sm:max-w-87.5", m.value])
1604
1364
  }, [
1605
- n("a", {
1606
- href: t.ctaLink,
1607
- target: t.ctaTarget,
1608
- onClick: h[0] || (h[0] = (a) => T(a))
1365
+ b("a", {
1366
+ href: r.ctaLink,
1367
+ target: r.ctaTarget,
1368
+ onClick: c[0] || (c[0] = (e) => w(e))
1609
1369
  }, [
1610
- n("div", it, [
1611
- n("h3", {
1612
- innerHTML: t.title,
1613
- class: c(["px-xs py-2xs mb-2xs pointer-events-none inline-block tracking-wide", y.value])
1614
- }, null, 10, ot),
1615
- V(o.$slots, "default")
1370
+ b("div", pt, [
1371
+ b("h3", {
1372
+ innerHTML: r.title,
1373
+ class: h(["pointer-events-none mb-2xs inline-block px-xs py-2xs tracking-wide", v.value])
1374
+ }, null, 10, ft),
1375
+ A(d.$slots, "default")
1616
1376
  ]),
1617
- n("img", {
1618
- src: t.imageSource,
1619
- alt: t.imageAlt,
1620
- class: c(["aspect-3/4 relative z-10 h-full w-full object-cover object-center transition-all duration-200", u.value])
1621
- }, null, 10, dt)
1622
- ], 8, lt)
1377
+ b("img", {
1378
+ src: r.imageSource,
1379
+ alt: r.imageAlt,
1380
+ class: h(["relative z-10 aspect-3/4 h-full w-full object-cover object-center transition-all duration-200", x.value])
1381
+ }, null, 10, kt)
1382
+ ], 8, ut)
1623
1383
  ], 2));
1624
1384
  }
1625
- }), nt = ["src", "alt"], ct = /* @__PURE__ */ w({
1385
+ }), yt = ["src", "alt"], vt = /* @__PURE__ */ B({
1626
1386
  __name: "MclCardC",
1627
1387
  props: {
1628
1388
  imageSource: {},
@@ -1630,78 +1390,82 @@ const $ = {
1630
1390
  title: {},
1631
1391
  titleSize: { default: "md" },
1632
1392
  titleColor: { default: "dark-3" },
1633
- displayHighlight: { type: Boolean, default: !1 },
1393
+ showHighlight: { type: Boolean, default: !1 },
1634
1394
  highlightColor: { default: "light-3" },
1635
1395
  highlightOpacity: { default: 80 },
1636
- displayTitle: { type: Boolean, default: !1 },
1396
+ showTitle: { type: Boolean, default: !1 },
1637
1397
  cardColor: { default: "primary" }
1638
1398
  },
1639
1399
  emits: ["card-click"],
1640
- setup(t, { emit: r }) {
1641
- const e = t;
1642
- R();
1643
- const g = I(!1), m = r, u = p(() => {
1644
- const o = [d("BGCOLOR", e.cardColor)];
1645
- return g.value && o.push("flip-card"), o.join(" ");
1646
- }), y = p(() => {
1400
+ setup(r, { emit: n }) {
1401
+ const a = r;
1402
+ L();
1403
+ const i = $(!1), m = n, x = f(() => {
1404
+ const d = [
1405
+ g.bgColorVariant({ color: a.cardColor })
1406
+ ];
1407
+ return i.value && d.push("flip-card"), d.join(" ");
1408
+ }), v = f(() => {
1647
1409
  const {
1648
- titleSize: o,
1649
- titleColor: h,
1650
- displayHighlight: a,
1651
- highlightColor: l,
1652
- highlightOpacity: s
1653
- } = e, i = [
1654
- d("H3", o),
1655
- d("TEXTCOLOR", h)
1410
+ titleSize: d,
1411
+ titleColor: c,
1412
+ showHighlight: e,
1413
+ highlightColor: o,
1414
+ highlightOpacity: l
1415
+ } = a, s = [
1416
+ g.h3Variant({ size: d }),
1417
+ g.textColorVariant({ color: c })
1656
1418
  ];
1657
- return a && (i.push("px-xs py-2xs mb-2xs rounded"), i.push(d("BGCOLOR", l)), i.push(d("BGOPACITY", s))), i.join(" ");
1658
- }), T = (o) => {
1659
- o.preventDefault(), g.value && m("card-click", o), g.value = !0;
1419
+ return e && (s.push("px-xs py-2xs mb-2xs rounded"), s.push(g.bgColorVariant({ color: o })), s.push(
1420
+ g.bgOpacityVariant({ opacity: l })
1421
+ )), s.join(" ");
1422
+ }), w = (d) => {
1423
+ d.preventDefault(), i.value && m("card-click", d), i.value = !0;
1660
1424
  };
1661
- return (o, h) => (x(), C("div", {
1662
- class: c(["card duration-1600 max-h-100 relative aspect-square overflow-hidden transition", u.value]),
1663
- onClick: T
1425
+ return (d, c) => (k(), y("div", {
1426
+ class: h(["card relative aspect-square max-h-100 overflow-hidden transition duration-1600", x.value]),
1427
+ onClick: w
1664
1428
  }, [
1665
- n("img", {
1666
- src: t.imageSource,
1667
- alt: t.imageAlt,
1668
- class: c([
1669
- g.value ? "opacity-100" : "opacity-0",
1670
- "duration-800 absolute aspect-square h-full w-full object-cover object-center transition-opacity delay-500"
1429
+ b("img", {
1430
+ src: r.imageSource,
1431
+ alt: r.imageAlt,
1432
+ class: h([
1433
+ i.value ? "opacity-100" : "opacity-0",
1434
+ "absolute aspect-square h-full w-full object-cover object-center transition-opacity delay-500 duration-800"
1671
1435
  ])
1672
- }, null, 10, nt),
1673
- n("div", {
1674
- class: c([
1675
- g.value ? "cursor-pointer opacity-100" : "opacity-0",
1676
- "p-sm duration-800 relative flex h-full flex-col justify-end transition delay-500"
1436
+ }, null, 10, yt),
1437
+ b("div", {
1438
+ class: h([
1439
+ i.value ? "cursor-pointer opacity-100" : "opacity-0",
1440
+ "relative flex h-full flex-col justify-end p-sm transition delay-500 duration-800"
1677
1441
  ])
1678
1442
  }, [
1679
- t.displayTitle ? (x(), C("h3", {
1443
+ r.showTitle ? (k(), y("h3", {
1680
1444
  key: 0,
1681
- class: c(["relative self-start", y.value])
1445
+ class: h(["relative self-start", v.value])
1682
1446
  }, [
1683
- n("span", null, O(t.title), 1)
1684
- ], 2)) : v("", !0),
1685
- V(o.$slots, "card-body", {}, void 0, !0)
1447
+ b("span", null, T(r.title), 1)
1448
+ ], 2)) : V("", !0),
1449
+ A(d.$slots, "card-body", {}, void 0, !0)
1686
1450
  ], 2)
1687
1451
  ], 2));
1688
1452
  }
1689
- }), D = (t, r) => {
1690
- const e = t.__vccOpts || t;
1691
- for (const [g, m] of r)
1692
- e[g] = m;
1693
- return e;
1694
- }, vt = /* @__PURE__ */ D(ct, [["__scopeId", "data-v-f748c495"]]), gt = { class: "flex flex-col overflow-hidden rounded-md" }, ht = ["src", "alt"], ut = ["href", "target"], bt = /* @__PURE__ */ w({
1453
+ }), W = (r, n) => {
1454
+ const a = r.__vccOpts || r;
1455
+ for (const [i, m] of n)
1456
+ a[i] = m;
1457
+ return a;
1458
+ }, St = /* @__PURE__ */ W(vt, [["__scopeId", "data-v-eac7e2f0"]]), wt = { class: "flex flex-col overflow-hidden rounded-md" }, Ct = ["src", "alt"], Vt = ["href", "target"], Bt = /* @__PURE__ */ B({
1695
1459
  __name: "MclCardD",
1696
1460
  props: {
1697
- displayImage: { type: Boolean, default: !0 },
1461
+ showImage: { type: Boolean, default: !0 },
1698
1462
  imageSource: {},
1699
1463
  imageAlt: { default: "" },
1700
1464
  title: {},
1701
1465
  titleSize: { default: "md" },
1702
1466
  titleColor: { default: "dark-4" },
1703
1467
  bgColor: { default: "light-1" },
1704
- displayHighlight: { type: Boolean, default: !0 },
1468
+ showHighlight: { type: Boolean, default: !0 },
1705
1469
  highlightColor: { default: "primary" },
1706
1470
  ctaText: { default: "Read more" },
1707
1471
  ctaLink: {},
@@ -1717,8 +1481,8 @@ const $ = {
1717
1481
  customColor: {}
1718
1482
  },
1719
1483
  emits: ["card-click"],
1720
- setup(t, { emit: r }) {
1721
- const e = {
1484
+ setup(r, { emit: n }) {
1485
+ const a = {
1722
1486
  primary: "from-primary",
1723
1487
  secondary: "from-secondary",
1724
1488
  success: "from-success",
@@ -1736,7 +1500,7 @@ const $ = {
1736
1500
  black: "from-black",
1737
1501
  white: "from-white",
1738
1502
  transparent: "from-transparent"
1739
- }, g = {
1503
+ }, i = {
1740
1504
  primary: "via-primary",
1741
1505
  secondary: "via-secondary",
1742
1506
  success: "via-success",
@@ -1772,77 +1536,80 @@ const $ = {
1772
1536
  black: "to-black",
1773
1537
  white: "to-white",
1774
1538
  transparent: "to-transparent"
1775
- }, u = t;
1776
- R();
1777
- const y = r, T = p(() => {
1778
- const { titleSize: s, titleColor: i } = u;
1539
+ }, x = r;
1540
+ L();
1541
+ const v = n, w = f(() => {
1542
+ const { titleSize: l, titleColor: s } = x;
1779
1543
  return [
1780
- d("H2", s),
1781
- d("TEXTCOLOR", i)
1544
+ g.h2Variant({ size: l }),
1545
+ g.textColorVariant({ color: s })
1782
1546
  ].join(" ");
1783
- }), o = p(() => {
1784
- const { ctaButton: s, ctaButtonColor: i, ctaButtonBlock: f } = u, b = [], B = ["light-1", "light-2", "light-3", "light-4"];
1785
- return s ? b.push("btn", d("BTNCOLOR", i)) : b.push("mcl-link"), s && f && b.push("btn-full"), s && !B.includes(i) && b.push("text-white"), b.join(" ");
1786
- }), h = p(() => ({
1787
- "--border-width": `${u.borderWidth}px`
1788
- })), a = p(() => {
1789
- const s = e[u.borderColor], i = g[u.gradient1], f = m[u.gradient2];
1547
+ }), d = f(() => {
1548
+ const { ctaButton: l, ctaButtonColor: s, ctaButtonBlock: p } = x, u = [], C = ["light-1", "light-2", "light-3", "light-4"];
1549
+ return l ? u.push(
1550
+ "btn",
1551
+ g.btnColorVariant({ color: s })
1552
+ ) : u.push("mcl-link"), l && p && u.push("btn-full"), l && !C.includes(s) && u.push("text-white"), u.join(" ");
1553
+ }), c = f(() => ({
1554
+ "--border-width": `${x.borderWidth}px`
1555
+ })), e = f(() => {
1556
+ const l = a[x.borderColor], s = i[x.gradient1], p = m[x.gradient2];
1790
1557
  return [
1791
- d("BORDER", u.borderColor),
1558
+ g.borderColorVariant({ color: x.borderColor }),
1559
+ l,
1792
1560
  s,
1793
- i,
1794
- f
1561
+ p
1795
1562
  ].join(" ");
1796
- }), l = (s) => {
1797
- const { title: i, ctaLink: f, ctaLinkTarget: b, ctaAsLink: B } = u, L = {
1798
- title: i,
1799
- url: f,
1800
- target: b || "_self"
1563
+ }), o = (l) => {
1564
+ const { title: s, ctaLink: p, ctaLinkTarget: u, ctaAsLink: C } = x, j = {
1565
+ title: s,
1566
+ url: p,
1567
+ target: u || "_self"
1801
1568
  };
1802
- !B && s.preventDefault(), y("card-click", s, L);
1569
+ !C && l.preventDefault(), v("card-click", l, j);
1803
1570
  };
1804
- return (s, i) => (x(), C("div", {
1805
- class: c(["card xs:w-auto max-w-112.5 sm:max-w-87.5 w-full shrink-0 grow overflow-hidden rounded-md border from-20%", a.value]),
1806
- style: W(h.value)
1571
+ return (l, s) => (k(), y("div", {
1572
+ class: h(["card xs:w-auto w-full max-w-112.5 shrink-0 grow overflow-hidden rounded-md border from-20% sm:max-w-87.5", e.value]),
1573
+ style: D(c.value)
1807
1574
  }, [
1808
- n("div", gt, [
1809
- t.displayImage ? (x(), C("img", {
1575
+ b("div", wt, [
1576
+ r.showImage ? (k(), y("img", {
1810
1577
  key: 0,
1811
- src: t.imageSource,
1578
+ src: r.imageSource,
1812
1579
  class: "max-h-50 min-w-full object-cover object-top",
1813
- alt: t.imageAlt
1814
- }, null, 8, ht)) : v("", !0),
1815
- n("div", {
1816
- class: c(["p-xs", A(d)("BGCOLOR", t.bgColor)])
1580
+ alt: r.imageAlt
1581
+ }, null, 8, Ct)) : V("", !0),
1582
+ b("div", {
1583
+ class: h(["p-xs", S(g).bgColorVariant({ color: r.bgColor })])
1817
1584
  }, [
1818
- n("h3", {
1819
- class: c(["mb-xs", T.value])
1820
- }, O(t.title), 3),
1821
- t.displayHighlight ? (x(), C("div", {
1585
+ b("h3", {
1586
+ class: h(["mb-xs", w.value])
1587
+ }, T(r.title), 3),
1588
+ r.showHighlight ? (k(), y("div", {
1822
1589
  key: 0,
1823
- class: c(["mb-xs h-3xs w-md", A(d)("BGCOLOR", t.highlightColor)])
1824
- }, null, 2)) : v("", !0),
1825
- n("div", null, [
1826
- V(s.$slots, "default", {}, void 0, !0)
1590
+ class: h(["mb-xs h-3xs w-md", S(g).bgColorVariant({ color: r.highlightColor })])
1591
+ }, null, 2)) : V("", !0),
1592
+ b("div", null, [
1593
+ A(l.$slots, "default", {}, void 0, !0)
1827
1594
  ]),
1828
- n("div", {
1829
- class: c(["mt-xs", { "mb-2xs": !t.ctaButton }])
1595
+ b("div", {
1596
+ class: h(["mt-xs", { "mb-2xs": !r.ctaButton }])
1830
1597
  }, [
1831
- n("a", {
1832
- href: t.ctaLink,
1833
- target: t.ctaLinkTarget,
1834
- class: c(o.value),
1835
- onClick: l
1836
- }, O(t.ctaText), 11, ut)
1598
+ b("a", {
1599
+ href: r.ctaLink,
1600
+ target: r.ctaLinkTarget,
1601
+ class: h(d.value),
1602
+ onClick: o
1603
+ }, T(r.ctaText), 11, Vt)
1837
1604
  ], 2)
1838
1605
  ], 2)
1839
1606
  ])
1840
1607
  ], 6));
1841
1608
  }
1842
- }), Tt = /* @__PURE__ */ D(bt, [["__scopeId", "data-v-09214c6f"]]);
1609
+ }), zt = /* @__PURE__ */ W(Bt, [["__scopeId", "data-v-8bf2cac0"]]);
1843
1610
  export {
1844
- yt as MclCardA,
1845
- kt as MclCardB,
1846
- vt as MclCardC,
1847
- Tt as MclCardD
1611
+ At as MclCardA,
1612
+ jt as MclCardB,
1613
+ St as MclCardC,
1614
+ zt as MclCardD
1848
1615
  };