@dmsi/wedgekit-react 0.0.37 → 0.0.38
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.
- package/dist/{chunk-5POWRPIO.js → chunk-IOSLZ3WW.js} +29 -6
- package/dist/components/MobileDataGrid.cjs +29 -6
- package/dist/components/MobileDataGrid.js +1 -1
- package/dist/components/Notification.cjs +29 -6
- package/dist/components/Notification.js +1 -1
- package/dist/components/SideMenuGroup.cjs +29 -6
- package/dist/components/SideMenuGroup.js +1 -1
- package/dist/components/SideMenuItem.cjs +29 -6
- package/dist/components/SideMenuItem.js +1 -1
- package/dist/components/Stack.cjs +29 -6
- package/dist/components/Stack.js +1 -1
- package/dist/components/Swatch.cjs +29 -6
- package/dist/components/Swatch.js +1 -1
- package/dist/components/Time.cjs +29 -6
- package/dist/components/Time.js +1 -1
- package/dist/index.css +40 -0
- package/package.json +1 -1
- package/src/components/Stack.tsx +42 -8
|
@@ -22,6 +22,14 @@ var getFlexClassNames = ({ items, justify, grow }) => clsx(
|
|
|
22
22
|
justify === "between" && "justify-between",
|
|
23
23
|
justify === "around" && "justify-around"
|
|
24
24
|
);
|
|
25
|
+
var useGapClassNames = (sizing) => {
|
|
26
|
+
return clsx(
|
|
27
|
+
sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
|
|
28
|
+
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
29
|
+
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
30
|
+
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
|
|
31
|
+
);
|
|
32
|
+
};
|
|
25
33
|
var Stack = (_a) => {
|
|
26
34
|
var _b = _a, {
|
|
27
35
|
children,
|
|
@@ -30,6 +38,9 @@ var Stack = (_a) => {
|
|
|
30
38
|
grow,
|
|
31
39
|
padding,
|
|
32
40
|
paddingX,
|
|
41
|
+
margin,
|
|
42
|
+
marginX,
|
|
43
|
+
marginY,
|
|
33
44
|
horizontal,
|
|
34
45
|
horizontalMobile,
|
|
35
46
|
elevation = 0,
|
|
@@ -50,7 +61,10 @@ var Stack = (_a) => {
|
|
|
50
61
|
position,
|
|
51
62
|
top,
|
|
52
63
|
left,
|
|
53
|
-
id
|
|
64
|
+
id,
|
|
65
|
+
noGap,
|
|
66
|
+
marginTop,
|
|
67
|
+
marginBottom
|
|
54
68
|
} = _b, props = __objRest(_b, [
|
|
55
69
|
"children",
|
|
56
70
|
"items",
|
|
@@ -58,6 +72,9 @@ var Stack = (_a) => {
|
|
|
58
72
|
"grow",
|
|
59
73
|
"padding",
|
|
60
74
|
"paddingX",
|
|
75
|
+
"margin",
|
|
76
|
+
"marginX",
|
|
77
|
+
"marginY",
|
|
61
78
|
"horizontal",
|
|
62
79
|
"horizontalMobile",
|
|
63
80
|
"elevation",
|
|
@@ -78,9 +95,13 @@ var Stack = (_a) => {
|
|
|
78
95
|
"position",
|
|
79
96
|
"top",
|
|
80
97
|
"left",
|
|
81
|
-
"id"
|
|
98
|
+
"id",
|
|
99
|
+
"noGap",
|
|
100
|
+
"marginTop",
|
|
101
|
+
"marginBottom"
|
|
82
102
|
]);
|
|
83
103
|
const flexClassNames = getFlexClassNames({ items, justify, grow });
|
|
104
|
+
const gapClassNames = useGapClassNames(sizing);
|
|
84
105
|
return /* @__PURE__ */ jsx(
|
|
85
106
|
"div",
|
|
86
107
|
__spreadProps(__spreadValues({
|
|
@@ -120,13 +141,15 @@ var Stack = (_a) => {
|
|
|
120
141
|
paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
|
|
121
142
|
paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
|
|
122
143
|
paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
|
|
144
|
+
margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
|
|
145
|
+
marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
|
|
146
|
+
marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
|
|
147
|
+
marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
|
|
148
|
+
marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
|
|
123
149
|
horizontal ? "desktop:flex-row" : "desktop:flex-col",
|
|
124
150
|
horizontalMobile ? "flex-row" : "flex-col",
|
|
125
151
|
flexClassNames,
|
|
126
|
-
|
|
127
|
-
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
128
|
-
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
129
|
-
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
|
|
152
|
+
!noGap && gapClassNames,
|
|
130
153
|
elevation === 0 && "shadow-none",
|
|
131
154
|
elevation === 2 && "shadow-2",
|
|
132
155
|
elevation === 4 && "shadow-4",
|
|
@@ -114,6 +114,14 @@ var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx2.default)(
|
|
|
114
114
|
justify === "between" && "justify-between",
|
|
115
115
|
justify === "around" && "justify-around"
|
|
116
116
|
);
|
|
117
|
+
var useGapClassNames = (sizing) => {
|
|
118
|
+
return (0, import_clsx2.default)(
|
|
119
|
+
sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
|
|
120
|
+
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
121
|
+
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
122
|
+
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
|
|
123
|
+
);
|
|
124
|
+
};
|
|
117
125
|
var Stack = (_a) => {
|
|
118
126
|
var _b = _a, {
|
|
119
127
|
children,
|
|
@@ -122,6 +130,9 @@ var Stack = (_a) => {
|
|
|
122
130
|
grow,
|
|
123
131
|
padding,
|
|
124
132
|
paddingX,
|
|
133
|
+
margin,
|
|
134
|
+
marginX,
|
|
135
|
+
marginY,
|
|
125
136
|
horizontal,
|
|
126
137
|
horizontalMobile,
|
|
127
138
|
elevation = 0,
|
|
@@ -142,7 +153,10 @@ var Stack = (_a) => {
|
|
|
142
153
|
position,
|
|
143
154
|
top,
|
|
144
155
|
left,
|
|
145
|
-
id
|
|
156
|
+
id,
|
|
157
|
+
noGap,
|
|
158
|
+
marginTop,
|
|
159
|
+
marginBottom
|
|
146
160
|
} = _b, props = __objRest(_b, [
|
|
147
161
|
"children",
|
|
148
162
|
"items",
|
|
@@ -150,6 +164,9 @@ var Stack = (_a) => {
|
|
|
150
164
|
"grow",
|
|
151
165
|
"padding",
|
|
152
166
|
"paddingX",
|
|
167
|
+
"margin",
|
|
168
|
+
"marginX",
|
|
169
|
+
"marginY",
|
|
153
170
|
"horizontal",
|
|
154
171
|
"horizontalMobile",
|
|
155
172
|
"elevation",
|
|
@@ -170,9 +187,13 @@ var Stack = (_a) => {
|
|
|
170
187
|
"position",
|
|
171
188
|
"top",
|
|
172
189
|
"left",
|
|
173
|
-
"id"
|
|
190
|
+
"id",
|
|
191
|
+
"noGap",
|
|
192
|
+
"marginTop",
|
|
193
|
+
"marginBottom"
|
|
174
194
|
]);
|
|
175
195
|
const flexClassNames = getFlexClassNames({ items, justify, grow });
|
|
196
|
+
const gapClassNames = useGapClassNames(sizing);
|
|
176
197
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
177
198
|
"div",
|
|
178
199
|
__spreadProps(__spreadValues({
|
|
@@ -212,13 +233,15 @@ var Stack = (_a) => {
|
|
|
212
233
|
paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
|
|
213
234
|
paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
|
|
214
235
|
paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
|
|
236
|
+
margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
|
|
237
|
+
marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
|
|
238
|
+
marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
|
|
239
|
+
marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
|
|
240
|
+
marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
|
|
215
241
|
horizontal ? "desktop:flex-row" : "desktop:flex-col",
|
|
216
242
|
horizontalMobile ? "flex-row" : "flex-col",
|
|
217
243
|
flexClassNames,
|
|
218
|
-
|
|
219
|
-
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
220
|
-
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
221
|
-
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
|
|
244
|
+
!noGap && gapClassNames,
|
|
222
245
|
elevation === 0 && "shadow-none",
|
|
223
246
|
elevation === 2 && "shadow-2",
|
|
224
247
|
elevation === 4 && "shadow-4",
|
|
@@ -481,6 +481,14 @@ var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx6.default)(
|
|
|
481
481
|
justify === "between" && "justify-between",
|
|
482
482
|
justify === "around" && "justify-around"
|
|
483
483
|
);
|
|
484
|
+
var useGapClassNames = (sizing) => {
|
|
485
|
+
return (0, import_clsx6.default)(
|
|
486
|
+
sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
|
|
487
|
+
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
488
|
+
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
489
|
+
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
|
|
490
|
+
);
|
|
491
|
+
};
|
|
484
492
|
var Stack = (_a) => {
|
|
485
493
|
var _b = _a, {
|
|
486
494
|
children,
|
|
@@ -489,6 +497,9 @@ var Stack = (_a) => {
|
|
|
489
497
|
grow,
|
|
490
498
|
padding,
|
|
491
499
|
paddingX,
|
|
500
|
+
margin,
|
|
501
|
+
marginX,
|
|
502
|
+
marginY,
|
|
492
503
|
horizontal,
|
|
493
504
|
horizontalMobile,
|
|
494
505
|
elevation = 0,
|
|
@@ -509,7 +520,10 @@ var Stack = (_a) => {
|
|
|
509
520
|
position,
|
|
510
521
|
top,
|
|
511
522
|
left,
|
|
512
|
-
id
|
|
523
|
+
id,
|
|
524
|
+
noGap,
|
|
525
|
+
marginTop,
|
|
526
|
+
marginBottom
|
|
513
527
|
} = _b, props = __objRest(_b, [
|
|
514
528
|
"children",
|
|
515
529
|
"items",
|
|
@@ -517,6 +531,9 @@ var Stack = (_a) => {
|
|
|
517
531
|
"grow",
|
|
518
532
|
"padding",
|
|
519
533
|
"paddingX",
|
|
534
|
+
"margin",
|
|
535
|
+
"marginX",
|
|
536
|
+
"marginY",
|
|
520
537
|
"horizontal",
|
|
521
538
|
"horizontalMobile",
|
|
522
539
|
"elevation",
|
|
@@ -537,9 +554,13 @@ var Stack = (_a) => {
|
|
|
537
554
|
"position",
|
|
538
555
|
"top",
|
|
539
556
|
"left",
|
|
540
|
-
"id"
|
|
557
|
+
"id",
|
|
558
|
+
"noGap",
|
|
559
|
+
"marginTop",
|
|
560
|
+
"marginBottom"
|
|
541
561
|
]);
|
|
542
562
|
const flexClassNames = getFlexClassNames({ items, justify, grow });
|
|
563
|
+
const gapClassNames = useGapClassNames(sizing);
|
|
543
564
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
544
565
|
"div",
|
|
545
566
|
__spreadProps(__spreadValues({
|
|
@@ -579,13 +600,15 @@ var Stack = (_a) => {
|
|
|
579
600
|
paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
|
|
580
601
|
paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
|
|
581
602
|
paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
|
|
603
|
+
margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
|
|
604
|
+
marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
|
|
605
|
+
marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
|
|
606
|
+
marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
|
|
607
|
+
marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
|
|
582
608
|
horizontal ? "desktop:flex-row" : "desktop:flex-col",
|
|
583
609
|
horizontalMobile ? "flex-row" : "flex-col",
|
|
584
610
|
flexClassNames,
|
|
585
|
-
|
|
586
|
-
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
587
|
-
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
588
|
-
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
|
|
611
|
+
!noGap && gapClassNames,
|
|
589
612
|
elevation === 0 && "shadow-none",
|
|
590
613
|
elevation === 2 && "shadow-2",
|
|
591
614
|
elevation === 4 && "shadow-4",
|
|
@@ -253,6 +253,14 @@ var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx3.default)(
|
|
|
253
253
|
justify === "between" && "justify-between",
|
|
254
254
|
justify === "around" && "justify-around"
|
|
255
255
|
);
|
|
256
|
+
var useGapClassNames = (sizing) => {
|
|
257
|
+
return (0, import_clsx3.default)(
|
|
258
|
+
sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
|
|
259
|
+
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
260
|
+
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
261
|
+
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
|
|
262
|
+
);
|
|
263
|
+
};
|
|
256
264
|
var Stack = (_a) => {
|
|
257
265
|
var _b = _a, {
|
|
258
266
|
children,
|
|
@@ -261,6 +269,9 @@ var Stack = (_a) => {
|
|
|
261
269
|
grow,
|
|
262
270
|
padding,
|
|
263
271
|
paddingX,
|
|
272
|
+
margin,
|
|
273
|
+
marginX,
|
|
274
|
+
marginY,
|
|
264
275
|
horizontal,
|
|
265
276
|
horizontalMobile,
|
|
266
277
|
elevation = 0,
|
|
@@ -281,7 +292,10 @@ var Stack = (_a) => {
|
|
|
281
292
|
position,
|
|
282
293
|
top,
|
|
283
294
|
left,
|
|
284
|
-
id
|
|
295
|
+
id,
|
|
296
|
+
noGap,
|
|
297
|
+
marginTop,
|
|
298
|
+
marginBottom
|
|
285
299
|
} = _b, props = __objRest(_b, [
|
|
286
300
|
"children",
|
|
287
301
|
"items",
|
|
@@ -289,6 +303,9 @@ var Stack = (_a) => {
|
|
|
289
303
|
"grow",
|
|
290
304
|
"padding",
|
|
291
305
|
"paddingX",
|
|
306
|
+
"margin",
|
|
307
|
+
"marginX",
|
|
308
|
+
"marginY",
|
|
292
309
|
"horizontal",
|
|
293
310
|
"horizontalMobile",
|
|
294
311
|
"elevation",
|
|
@@ -309,9 +326,13 @@ var Stack = (_a) => {
|
|
|
309
326
|
"position",
|
|
310
327
|
"top",
|
|
311
328
|
"left",
|
|
312
|
-
"id"
|
|
329
|
+
"id",
|
|
330
|
+
"noGap",
|
|
331
|
+
"marginTop",
|
|
332
|
+
"marginBottom"
|
|
313
333
|
]);
|
|
314
334
|
const flexClassNames = getFlexClassNames({ items, justify, grow });
|
|
335
|
+
const gapClassNames = useGapClassNames(sizing);
|
|
315
336
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
316
337
|
"div",
|
|
317
338
|
__spreadProps(__spreadValues({
|
|
@@ -351,13 +372,15 @@ var Stack = (_a) => {
|
|
|
351
372
|
paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
|
|
352
373
|
paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
|
|
353
374
|
paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
|
|
375
|
+
margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
|
|
376
|
+
marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
|
|
377
|
+
marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
|
|
378
|
+
marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
|
|
379
|
+
marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
|
|
354
380
|
horizontal ? "desktop:flex-row" : "desktop:flex-col",
|
|
355
381
|
horizontalMobile ? "flex-row" : "flex-col",
|
|
356
382
|
flexClassNames,
|
|
357
|
-
|
|
358
|
-
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
359
|
-
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
360
|
-
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
|
|
383
|
+
!noGap && gapClassNames,
|
|
361
384
|
elevation === 0 && "shadow-none",
|
|
362
385
|
elevation === 2 && "shadow-2",
|
|
363
386
|
elevation === 4 && "shadow-4",
|
|
@@ -208,6 +208,14 @@ var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx2.default)(
|
|
|
208
208
|
justify === "between" && "justify-between",
|
|
209
209
|
justify === "around" && "justify-around"
|
|
210
210
|
);
|
|
211
|
+
var useGapClassNames = (sizing) => {
|
|
212
|
+
return (0, import_clsx2.default)(
|
|
213
|
+
sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
|
|
214
|
+
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
215
|
+
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
216
|
+
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
|
|
217
|
+
);
|
|
218
|
+
};
|
|
211
219
|
var Stack = (_a) => {
|
|
212
220
|
var _b = _a, {
|
|
213
221
|
children,
|
|
@@ -216,6 +224,9 @@ var Stack = (_a) => {
|
|
|
216
224
|
grow,
|
|
217
225
|
padding,
|
|
218
226
|
paddingX,
|
|
227
|
+
margin,
|
|
228
|
+
marginX,
|
|
229
|
+
marginY,
|
|
219
230
|
horizontal,
|
|
220
231
|
horizontalMobile,
|
|
221
232
|
elevation = 0,
|
|
@@ -236,7 +247,10 @@ var Stack = (_a) => {
|
|
|
236
247
|
position,
|
|
237
248
|
top,
|
|
238
249
|
left,
|
|
239
|
-
id
|
|
250
|
+
id,
|
|
251
|
+
noGap,
|
|
252
|
+
marginTop,
|
|
253
|
+
marginBottom
|
|
240
254
|
} = _b, props = __objRest(_b, [
|
|
241
255
|
"children",
|
|
242
256
|
"items",
|
|
@@ -244,6 +258,9 @@ var Stack = (_a) => {
|
|
|
244
258
|
"grow",
|
|
245
259
|
"padding",
|
|
246
260
|
"paddingX",
|
|
261
|
+
"margin",
|
|
262
|
+
"marginX",
|
|
263
|
+
"marginY",
|
|
247
264
|
"horizontal",
|
|
248
265
|
"horizontalMobile",
|
|
249
266
|
"elevation",
|
|
@@ -264,9 +281,13 @@ var Stack = (_a) => {
|
|
|
264
281
|
"position",
|
|
265
282
|
"top",
|
|
266
283
|
"left",
|
|
267
|
-
"id"
|
|
284
|
+
"id",
|
|
285
|
+
"noGap",
|
|
286
|
+
"marginTop",
|
|
287
|
+
"marginBottom"
|
|
268
288
|
]);
|
|
269
289
|
const flexClassNames = getFlexClassNames({ items, justify, grow });
|
|
290
|
+
const gapClassNames = useGapClassNames(sizing);
|
|
270
291
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
271
292
|
"div",
|
|
272
293
|
__spreadProps(__spreadValues({
|
|
@@ -306,13 +327,15 @@ var Stack = (_a) => {
|
|
|
306
327
|
paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
|
|
307
328
|
paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
|
|
308
329
|
paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
|
|
330
|
+
margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
|
|
331
|
+
marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
|
|
332
|
+
marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
|
|
333
|
+
marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
|
|
334
|
+
marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
|
|
309
335
|
horizontal ? "desktop:flex-row" : "desktop:flex-col",
|
|
310
336
|
horizontalMobile ? "flex-row" : "flex-col",
|
|
311
337
|
flexClassNames,
|
|
312
|
-
|
|
313
|
-
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
314
|
-
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
315
|
-
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
|
|
338
|
+
!noGap && gapClassNames,
|
|
316
339
|
elevation === 0 && "shadow-none",
|
|
317
340
|
elevation === 2 && "shadow-2",
|
|
318
341
|
elevation === 4 && "shadow-4",
|
|
@@ -79,6 +79,14 @@ var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx.default)(
|
|
|
79
79
|
justify === "between" && "justify-between",
|
|
80
80
|
justify === "around" && "justify-around"
|
|
81
81
|
);
|
|
82
|
+
var useGapClassNames = (sizing) => {
|
|
83
|
+
return (0, import_clsx.default)(
|
|
84
|
+
sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
|
|
85
|
+
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
86
|
+
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
87
|
+
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
|
|
88
|
+
);
|
|
89
|
+
};
|
|
82
90
|
var Stack = (_a) => {
|
|
83
91
|
var _b = _a, {
|
|
84
92
|
children,
|
|
@@ -87,6 +95,9 @@ var Stack = (_a) => {
|
|
|
87
95
|
grow,
|
|
88
96
|
padding,
|
|
89
97
|
paddingX,
|
|
98
|
+
margin,
|
|
99
|
+
marginX,
|
|
100
|
+
marginY,
|
|
90
101
|
horizontal,
|
|
91
102
|
horizontalMobile,
|
|
92
103
|
elevation = 0,
|
|
@@ -107,7 +118,10 @@ var Stack = (_a) => {
|
|
|
107
118
|
position,
|
|
108
119
|
top,
|
|
109
120
|
left,
|
|
110
|
-
id
|
|
121
|
+
id,
|
|
122
|
+
noGap,
|
|
123
|
+
marginTop,
|
|
124
|
+
marginBottom
|
|
111
125
|
} = _b, props = __objRest(_b, [
|
|
112
126
|
"children",
|
|
113
127
|
"items",
|
|
@@ -115,6 +129,9 @@ var Stack = (_a) => {
|
|
|
115
129
|
"grow",
|
|
116
130
|
"padding",
|
|
117
131
|
"paddingX",
|
|
132
|
+
"margin",
|
|
133
|
+
"marginX",
|
|
134
|
+
"marginY",
|
|
118
135
|
"horizontal",
|
|
119
136
|
"horizontalMobile",
|
|
120
137
|
"elevation",
|
|
@@ -135,9 +152,13 @@ var Stack = (_a) => {
|
|
|
135
152
|
"position",
|
|
136
153
|
"top",
|
|
137
154
|
"left",
|
|
138
|
-
"id"
|
|
155
|
+
"id",
|
|
156
|
+
"noGap",
|
|
157
|
+
"marginTop",
|
|
158
|
+
"marginBottom"
|
|
139
159
|
]);
|
|
140
160
|
const flexClassNames = getFlexClassNames({ items, justify, grow });
|
|
161
|
+
const gapClassNames = useGapClassNames(sizing);
|
|
141
162
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
142
163
|
"div",
|
|
143
164
|
__spreadProps(__spreadValues({
|
|
@@ -177,13 +198,15 @@ var Stack = (_a) => {
|
|
|
177
198
|
paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
|
|
178
199
|
paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
|
|
179
200
|
paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
|
|
201
|
+
margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
|
|
202
|
+
marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
|
|
203
|
+
marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
|
|
204
|
+
marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
|
|
205
|
+
marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
|
|
180
206
|
horizontal ? "desktop:flex-row" : "desktop:flex-col",
|
|
181
207
|
horizontalMobile ? "flex-row" : "flex-col",
|
|
182
208
|
flexClassNames,
|
|
183
|
-
|
|
184
|
-
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
185
|
-
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
186
|
-
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
|
|
209
|
+
!noGap && gapClassNames,
|
|
187
210
|
elevation === 0 && "shadow-none",
|
|
188
211
|
elevation === 2 && "shadow-2",
|
|
189
212
|
elevation === 4 && "shadow-4",
|
package/dist/components/Stack.js
CHANGED
|
@@ -258,6 +258,14 @@ var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx3.default)(
|
|
|
258
258
|
justify === "between" && "justify-between",
|
|
259
259
|
justify === "around" && "justify-around"
|
|
260
260
|
);
|
|
261
|
+
var useGapClassNames = (sizing) => {
|
|
262
|
+
return (0, import_clsx3.default)(
|
|
263
|
+
sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
|
|
264
|
+
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
265
|
+
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
266
|
+
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
|
|
267
|
+
);
|
|
268
|
+
};
|
|
261
269
|
var Stack = (_a) => {
|
|
262
270
|
var _b = _a, {
|
|
263
271
|
children,
|
|
@@ -266,6 +274,9 @@ var Stack = (_a) => {
|
|
|
266
274
|
grow,
|
|
267
275
|
padding,
|
|
268
276
|
paddingX,
|
|
277
|
+
margin,
|
|
278
|
+
marginX,
|
|
279
|
+
marginY,
|
|
269
280
|
horizontal,
|
|
270
281
|
horizontalMobile,
|
|
271
282
|
elevation = 0,
|
|
@@ -286,7 +297,10 @@ var Stack = (_a) => {
|
|
|
286
297
|
position,
|
|
287
298
|
top,
|
|
288
299
|
left,
|
|
289
|
-
id
|
|
300
|
+
id,
|
|
301
|
+
noGap,
|
|
302
|
+
marginTop,
|
|
303
|
+
marginBottom
|
|
290
304
|
} = _b, props = __objRest(_b, [
|
|
291
305
|
"children",
|
|
292
306
|
"items",
|
|
@@ -294,6 +308,9 @@ var Stack = (_a) => {
|
|
|
294
308
|
"grow",
|
|
295
309
|
"padding",
|
|
296
310
|
"paddingX",
|
|
311
|
+
"margin",
|
|
312
|
+
"marginX",
|
|
313
|
+
"marginY",
|
|
297
314
|
"horizontal",
|
|
298
315
|
"horizontalMobile",
|
|
299
316
|
"elevation",
|
|
@@ -314,9 +331,13 @@ var Stack = (_a) => {
|
|
|
314
331
|
"position",
|
|
315
332
|
"top",
|
|
316
333
|
"left",
|
|
317
|
-
"id"
|
|
334
|
+
"id",
|
|
335
|
+
"noGap",
|
|
336
|
+
"marginTop",
|
|
337
|
+
"marginBottom"
|
|
318
338
|
]);
|
|
319
339
|
const flexClassNames = getFlexClassNames({ items, justify, grow });
|
|
340
|
+
const gapClassNames = useGapClassNames(sizing);
|
|
320
341
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
321
342
|
"div",
|
|
322
343
|
__spreadProps(__spreadValues({
|
|
@@ -356,13 +377,15 @@ var Stack = (_a) => {
|
|
|
356
377
|
paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
|
|
357
378
|
paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
|
|
358
379
|
paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
|
|
380
|
+
margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
|
|
381
|
+
marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
|
|
382
|
+
marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
|
|
383
|
+
marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
|
|
384
|
+
marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
|
|
359
385
|
horizontal ? "desktop:flex-row" : "desktop:flex-col",
|
|
360
386
|
horizontalMobile ? "flex-row" : "flex-col",
|
|
361
387
|
flexClassNames,
|
|
362
|
-
|
|
363
|
-
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
364
|
-
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
365
|
-
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
|
|
388
|
+
!noGap && gapClassNames,
|
|
366
389
|
elevation === 0 && "shadow-none",
|
|
367
390
|
elevation === 2 && "shadow-2",
|
|
368
391
|
elevation === 4 && "shadow-4",
|
package/dist/components/Time.cjs
CHANGED
|
@@ -727,6 +727,14 @@ var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx5.default)(
|
|
|
727
727
|
justify === "between" && "justify-between",
|
|
728
728
|
justify === "around" && "justify-around"
|
|
729
729
|
);
|
|
730
|
+
var useGapClassNames = (sizing) => {
|
|
731
|
+
return (0, import_clsx5.default)(
|
|
732
|
+
sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
|
|
733
|
+
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
734
|
+
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
735
|
+
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
|
|
736
|
+
);
|
|
737
|
+
};
|
|
730
738
|
var Stack = (_a) => {
|
|
731
739
|
var _b = _a, {
|
|
732
740
|
children,
|
|
@@ -735,6 +743,9 @@ var Stack = (_a) => {
|
|
|
735
743
|
grow,
|
|
736
744
|
padding,
|
|
737
745
|
paddingX,
|
|
746
|
+
margin,
|
|
747
|
+
marginX,
|
|
748
|
+
marginY,
|
|
738
749
|
horizontal,
|
|
739
750
|
horizontalMobile,
|
|
740
751
|
elevation = 0,
|
|
@@ -755,7 +766,10 @@ var Stack = (_a) => {
|
|
|
755
766
|
position,
|
|
756
767
|
top,
|
|
757
768
|
left,
|
|
758
|
-
id
|
|
769
|
+
id,
|
|
770
|
+
noGap,
|
|
771
|
+
marginTop,
|
|
772
|
+
marginBottom
|
|
759
773
|
} = _b, props = __objRest(_b, [
|
|
760
774
|
"children",
|
|
761
775
|
"items",
|
|
@@ -763,6 +777,9 @@ var Stack = (_a) => {
|
|
|
763
777
|
"grow",
|
|
764
778
|
"padding",
|
|
765
779
|
"paddingX",
|
|
780
|
+
"margin",
|
|
781
|
+
"marginX",
|
|
782
|
+
"marginY",
|
|
766
783
|
"horizontal",
|
|
767
784
|
"horizontalMobile",
|
|
768
785
|
"elevation",
|
|
@@ -783,9 +800,13 @@ var Stack = (_a) => {
|
|
|
783
800
|
"position",
|
|
784
801
|
"top",
|
|
785
802
|
"left",
|
|
786
|
-
"id"
|
|
803
|
+
"id",
|
|
804
|
+
"noGap",
|
|
805
|
+
"marginTop",
|
|
806
|
+
"marginBottom"
|
|
787
807
|
]);
|
|
788
808
|
const flexClassNames = getFlexClassNames({ items, justify, grow });
|
|
809
|
+
const gapClassNames = useGapClassNames(sizing);
|
|
789
810
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
790
811
|
"div",
|
|
791
812
|
__spreadProps(__spreadValues({
|
|
@@ -825,13 +846,15 @@ var Stack = (_a) => {
|
|
|
825
846
|
paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
|
|
826
847
|
paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
|
|
827
848
|
paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
|
|
849
|
+
margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
|
|
850
|
+
marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
|
|
851
|
+
marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
|
|
852
|
+
marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
|
|
853
|
+
marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
|
|
828
854
|
horizontal ? "desktop:flex-row" : "desktop:flex-col",
|
|
829
855
|
horizontalMobile ? "flex-row" : "flex-col",
|
|
830
856
|
flexClassNames,
|
|
831
|
-
|
|
832
|
-
sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
833
|
-
sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
834
|
-
sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
|
|
857
|
+
!noGap && gapClassNames,
|
|
835
858
|
elevation === 0 && "shadow-none",
|
|
836
859
|
elevation === 2 && "shadow-2",
|
|
837
860
|
elevation === 4 && "shadow-4",
|
package/dist/components/Time.js
CHANGED
package/dist/index.css
CHANGED
|
@@ -592,15 +592,24 @@
|
|
|
592
592
|
.m-4 {
|
|
593
593
|
margin: calc(var(--spacing) * 4);
|
|
594
594
|
}
|
|
595
|
+
.m-mobile-container-padding {
|
|
596
|
+
margin: var(--spacing-mobile-container-padding);
|
|
597
|
+
}
|
|
595
598
|
.mx-0 {
|
|
596
599
|
margin-inline: calc(var(--spacing) * 0);
|
|
597
600
|
}
|
|
598
601
|
.mx-auto {
|
|
599
602
|
margin-inline: auto;
|
|
600
603
|
}
|
|
604
|
+
.mx-mobile-container-padding {
|
|
605
|
+
margin-inline: var(--spacing-mobile-container-padding);
|
|
606
|
+
}
|
|
601
607
|
.my-4 {
|
|
602
608
|
margin-block: calc(var(--spacing) * 4);
|
|
603
609
|
}
|
|
610
|
+
.my-mobile-container-padding {
|
|
611
|
+
margin-block: var(--spacing-mobile-container-padding);
|
|
612
|
+
}
|
|
604
613
|
.mt-2 {
|
|
605
614
|
margin-top: calc(var(--spacing) * 2);
|
|
606
615
|
}
|
|
@@ -613,6 +622,9 @@
|
|
|
613
622
|
.mt-mobile-component-gap {
|
|
614
623
|
margin-top: var(--spacing-mobile-component-gap);
|
|
615
624
|
}
|
|
625
|
+
.mt-mobile-container-padding {
|
|
626
|
+
margin-top: var(--spacing-mobile-container-padding);
|
|
627
|
+
}
|
|
616
628
|
.\!mr-6 {
|
|
617
629
|
margin-right: calc(var(--spacing) * 6) !important;
|
|
618
630
|
}
|
|
@@ -631,6 +643,9 @@
|
|
|
631
643
|
.mb-3 {
|
|
632
644
|
margin-bottom: calc(var(--spacing) * 3);
|
|
633
645
|
}
|
|
646
|
+
.mb-mobile-container-padding {
|
|
647
|
+
margin-bottom: var(--spacing-mobile-container-padding);
|
|
648
|
+
}
|
|
634
649
|
.-ml-px {
|
|
635
650
|
margin-left: -1px;
|
|
636
651
|
}
|
|
@@ -3703,6 +3718,21 @@
|
|
|
3703
3718
|
}
|
|
3704
3719
|
}
|
|
3705
3720
|
}
|
|
3721
|
+
.desktop\:m-desktop-container-padding {
|
|
3722
|
+
@container root (width >= 48rem) {
|
|
3723
|
+
margin: var(--spacing-desktop-container-padding);
|
|
3724
|
+
}
|
|
3725
|
+
}
|
|
3726
|
+
.desktop\:mx-desktop-container-padding {
|
|
3727
|
+
@container root (width >= 48rem) {
|
|
3728
|
+
margin-inline: var(--spacing-desktop-container-padding);
|
|
3729
|
+
}
|
|
3730
|
+
}
|
|
3731
|
+
.desktop\:my-desktop-container-padding {
|
|
3732
|
+
@container root (width >= 48rem) {
|
|
3733
|
+
margin-block: var(--spacing-desktop-container-padding);
|
|
3734
|
+
}
|
|
3735
|
+
}
|
|
3706
3736
|
.desktop\:mt-0 {
|
|
3707
3737
|
@container root (width >= 48rem) {
|
|
3708
3738
|
margin-top: calc(var(--spacing) * 0);
|
|
@@ -3713,6 +3743,16 @@
|
|
|
3713
3743
|
margin-top: var(--spacing-desktop-component-gap);
|
|
3714
3744
|
}
|
|
3715
3745
|
}
|
|
3746
|
+
.desktop\:mt-desktop-container-padding {
|
|
3747
|
+
@container root (width >= 48rem) {
|
|
3748
|
+
margin-top: var(--spacing-desktop-container-padding);
|
|
3749
|
+
}
|
|
3750
|
+
}
|
|
3751
|
+
.desktop\:mb-desktop-container-padding {
|
|
3752
|
+
@container root (width >= 48rem) {
|
|
3753
|
+
margin-bottom: var(--spacing-desktop-container-padding);
|
|
3754
|
+
}
|
|
3755
|
+
}
|
|
3716
3756
|
.desktop\:block {
|
|
3717
3757
|
@container root (width >= 48rem) {
|
|
3718
3758
|
display: block;
|
package/package.json
CHANGED
package/src/components/Stack.tsx
CHANGED
|
@@ -15,6 +15,9 @@ type StackProps = {
|
|
|
15
15
|
horizontalMobile?: boolean;
|
|
16
16
|
padding?: boolean;
|
|
17
17
|
paddingX?: boolean;
|
|
18
|
+
margin?: boolean;
|
|
19
|
+
marginX?: boolean;
|
|
20
|
+
marginY?: boolean;
|
|
18
21
|
sizing?: Sizing;
|
|
19
22
|
flexShrink?: number;
|
|
20
23
|
flexGrow?: number;
|
|
@@ -35,6 +38,9 @@ type StackProps = {
|
|
|
35
38
|
top?: number;
|
|
36
39
|
left?: number;
|
|
37
40
|
id?: string;
|
|
41
|
+
noGap?: boolean;
|
|
42
|
+
marginTop?: boolean;
|
|
43
|
+
marginBottom?: boolean;
|
|
38
44
|
} & FlexProps &
|
|
39
45
|
Omit<ComponentProps<"div">, "className" | "id">;
|
|
40
46
|
|
|
@@ -63,6 +69,19 @@ const getFlexClassNames = ({ items, justify, grow }: FlexProps) =>
|
|
|
63
69
|
justify === "around" && "justify-around",
|
|
64
70
|
);
|
|
65
71
|
|
|
72
|
+
const useGapClassNames = (sizing: Sizing) => {
|
|
73
|
+
return clsx(
|
|
74
|
+
sizing === "layout-group" &&
|
|
75
|
+
"gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
|
|
76
|
+
sizing === "layout" &&
|
|
77
|
+
"gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
78
|
+
sizing === "container" &&
|
|
79
|
+
"gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
80
|
+
sizing === "component" &&
|
|
81
|
+
"gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
|
|
82
|
+
);
|
|
83
|
+
};
|
|
84
|
+
|
|
66
85
|
export const Stack = ({
|
|
67
86
|
children,
|
|
68
87
|
items,
|
|
@@ -70,6 +89,9 @@ export const Stack = ({
|
|
|
70
89
|
grow,
|
|
71
90
|
padding,
|
|
72
91
|
paddingX,
|
|
92
|
+
margin,
|
|
93
|
+
marginX,
|
|
94
|
+
marginY,
|
|
73
95
|
horizontal,
|
|
74
96
|
horizontalMobile,
|
|
75
97
|
elevation = 0,
|
|
@@ -91,9 +113,13 @@ export const Stack = ({
|
|
|
91
113
|
top,
|
|
92
114
|
left,
|
|
93
115
|
id,
|
|
116
|
+
noGap,
|
|
117
|
+
marginTop,
|
|
118
|
+
marginBottom,
|
|
94
119
|
...props
|
|
95
120
|
}: StackProps) => {
|
|
96
121
|
const flexClassNames = getFlexClassNames({ items, justify, grow });
|
|
122
|
+
const gapClassNames = useGapClassNames(sizing);
|
|
97
123
|
|
|
98
124
|
return (
|
|
99
125
|
<div
|
|
@@ -162,17 +188,25 @@ export const Stack = ({
|
|
|
162
188
|
paddingX &&
|
|
163
189
|
sizing === "component" &&
|
|
164
190
|
"px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
|
|
191
|
+
margin &&
|
|
192
|
+
sizing === "container" &&
|
|
193
|
+
"m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
|
|
194
|
+
marginX &&
|
|
195
|
+
sizing === "container" &&
|
|
196
|
+
"mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
|
|
197
|
+
marginTop &&
|
|
198
|
+
sizing === "container" &&
|
|
199
|
+
"mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
|
|
200
|
+
marginBottom &&
|
|
201
|
+
sizing === "container" &&
|
|
202
|
+
"mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
|
|
203
|
+
marginY &&
|
|
204
|
+
sizing === "container" &&
|
|
205
|
+
"my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
|
|
165
206
|
horizontal ? "desktop:flex-row" : "desktop:flex-col",
|
|
166
207
|
horizontalMobile ? "flex-row" : "flex-col",
|
|
167
208
|
flexClassNames,
|
|
168
|
-
|
|
169
|
-
"gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
|
|
170
|
-
sizing === "layout" &&
|
|
171
|
-
"gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
|
|
172
|
-
sizing === "container" &&
|
|
173
|
-
"gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
|
|
174
|
-
sizing === "component" &&
|
|
175
|
-
"gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
|
|
209
|
+
!noGap && gapClassNames,
|
|
176
210
|
elevation === 0 && "shadow-none",
|
|
177
211
|
elevation === 2 && "shadow-2",
|
|
178
212
|
elevation === 4 && "shadow-4",
|