@sanity/ui 3.0.0-static.4 → 3.0.0-static.6
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/_chunks-cjs/_visual-editing.js +81 -31
- package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
- package/dist/_chunks-es/_visual-editing.mjs +82 -32
- package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
- package/dist/_visual-editing.d.mts +14 -11
- package/dist/_visual-editing.d.ts +14 -11
- package/dist/cli.js +1 -1
- package/dist/css.d.mts +144 -852
- package/dist/css.d.ts +144 -852
- package/dist/css.js +155 -141
- package/dist/css.js.map +1 -1
- package/dist/css.mjs +154 -141
- package/dist/css.mjs.map +1 -1
- package/dist/index.d.mts +14 -11
- package/dist/index.d.ts +14 -11
- package/dist/index.js +2 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4 -6
- package/dist/index.mjs.map +1 -1
- package/dist/sanity-theme.css +1 -1
- package/dist/system.css +54 -49
- package/dist/theme.js +271 -33
- package/dist/theme.js.map +1 -1
- package/dist/theme.mjs +252 -16
- package/dist/theme.mjs.map +1 -1
- package/package.json +2 -2
- package/src/css/aspects/flex/flexJustify.style.ts +3 -3
- package/src/css/aspects/grid/types.ts +2 -2
- package/src/css/index.ts +2 -2
- package/src/css/primitives/_input/__workshop__/index.ts +1 -1
- package/src/css/primitives/button/button.style.ts +6 -4
- package/src/css/primitives/stack/index.ts +1 -0
- package/src/css/primitives/stack/stack.style.ts +9 -0
- package/src/css/primitives/stack/stack.ts +6 -0
- package/src/css/system.style.ts +2 -0
- package/src/theme/v3/defaults.ts +1 -1
- package/src/ui/components/autocomplete/__workshop__/index.ts +1 -1
- package/src/ui/components/dialog/dialog.tsx +3 -4
- package/src/ui/constants.ts +6 -0
- package/src/ui/hooks/useMediaIndex/useMediaIndex.ts +0 -2
- package/src/ui/primitives/box/box.tsx +6 -0
- package/src/ui/primitives/button/button.tsx +11 -10
- package/src/ui/primitives/code/code.tsx +1 -1
- package/src/ui/primitives/popover/popover.tsx +5 -75
- package/src/ui/primitives/stack/stack.tsx +10 -5
- package/src/ui/primitives/textInput/textInput.tsx +1 -1
- package/src/ui/primitives/tooltip/tooltip.tsx +2 -3
- package/dist/_chunks-cjs/v3_v2.js +0 -251
- package/dist/_chunks-cjs/v3_v2.js.map +0 -1
- package/dist/_chunks-es/v3_v2.mjs +0 -252
- package/dist/_chunks-es/v3_v2.mjs.map +0 -1
package/dist/css.js
CHANGED
|
@@ -1,7 +1,91 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: !0 });
|
|
3
|
-
var
|
|
3
|
+
var color = require("@sanity/color"), theme = require("@sanity/ui/theme");
|
|
4
|
+
function _resp(prefix, prop) {
|
|
5
|
+
if (!(prop === void 0 || prop === !1))
|
|
6
|
+
return Array.isArray(prop) ? prop.map((value, index) => {
|
|
7
|
+
if (value === void 0 || typeof prop == "boolean" && prop === !1) return;
|
|
8
|
+
const className = (typeof value == "boolean" ? [prefix] : [prefix, value]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
|
|
9
|
+
return index === 0 ? className : `${index}:${className}`;
|
|
10
|
+
}).filter(Boolean).join(" ") : (typeof prop == "boolean" ? [prefix] : [prefix, prop]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
|
|
11
|
+
}
|
|
12
|
+
function getClassNames(...classNames) {
|
|
13
|
+
return classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean).join(" ").split(" ");
|
|
14
|
+
}
|
|
15
|
+
function composeClassNames(...classNames) {
|
|
16
|
+
return unique(getClassNames(...classNames)).join(" ") || void 0;
|
|
17
|
+
}
|
|
18
|
+
function unique(array) {
|
|
19
|
+
return Array.from(new Set(array));
|
|
20
|
+
}
|
|
21
|
+
function border(props) {
|
|
22
|
+
return composeClassNames(_resp("border", props.border), _resp("border-t", props.borderTop), _resp("border-r", props.borderRight), _resp("border-b", props.borderBottom), _resp("border-l", props.borderLeft));
|
|
23
|
+
}
|
|
24
|
+
function display(props) {
|
|
25
|
+
return composeClassNames(_resp(void 0, props.display));
|
|
26
|
+
}
|
|
27
|
+
function flex(props) {
|
|
28
|
+
return composeClassNames(_resp("flex-align", props.align), _resp("f", props.direction), _resp("flex-justify", props.justify), _resp("flex", props.wrap));
|
|
29
|
+
}
|
|
30
|
+
function flexItem(props) {
|
|
31
|
+
return composeClassNames(_resp("f", props.flex));
|
|
32
|
+
}
|
|
33
|
+
function font(props) {
|
|
34
|
+
return composeClassNames("font", props.weight && `font-${props.weight}`, _resp("text-align", props.align));
|
|
35
|
+
}
|
|
36
|
+
function gap(props) {
|
|
37
|
+
return composeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
|
|
38
|
+
}
|
|
39
|
+
function grid(props) {
|
|
40
|
+
return composeClassNames(_resp("auto-cols", props.autoCols), _resp("auto-flow", props.autoFlow), _resp("auto-rows", props.autoRows), _resp("cols", props.columns), _resp("rows", props.rows));
|
|
41
|
+
}
|
|
42
|
+
function gridItem(props) {
|
|
43
|
+
return composeClassNames(_resp("col", props.column), _resp("col-start", props.columnStart), _resp("col-end", props.columnEnd), _resp("row", props.row), _resp("row-start", props.rowStart), _resp("row-end", props.rowEnd));
|
|
44
|
+
}
|
|
45
|
+
function height(props) {
|
|
46
|
+
return composeClassNames(_resp("h", props.height));
|
|
47
|
+
}
|
|
48
|
+
function inset(props) {
|
|
49
|
+
return composeClassNames(_resp("inset", props.inset), _resp("top", props.insetTop), _resp("right", props.insetRight), _resp("bottom", props.insetBottom), _resp("left", props.insetLeft));
|
|
50
|
+
}
|
|
51
|
+
function margin(props) {
|
|
52
|
+
return composeClassNames(_resp("m", props.margin), _resp("mx", props.marginX), _resp("my", props.marginY), _resp("mt", props.marginTop), _resp("mr", props.marginRight), _resp("mb", props.marginBottom), _resp("ml", props.marginLeft));
|
|
53
|
+
}
|
|
54
|
+
function maxWidth(props) {
|
|
55
|
+
return _resp("max-w", props.maxWidth) ?? "";
|
|
56
|
+
}
|
|
57
|
+
function overflow(props) {
|
|
58
|
+
return composeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
|
|
59
|
+
}
|
|
60
|
+
function padding(props) {
|
|
61
|
+
return composeClassNames(_resp("p", props.padding), _resp("px", props.paddingX), _resp("py", props.paddingY), _resp("pt", props.paddingTop), _resp("pr", props.paddingRight), _resp("pb", props.paddingBottom), _resp("pl", props.paddingLeft));
|
|
62
|
+
}
|
|
63
|
+
function pointerEvents(props) {
|
|
64
|
+
return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
|
|
65
|
+
}
|
|
66
|
+
function position(props) {
|
|
67
|
+
return composeClassNames(_resp("position", props.position));
|
|
68
|
+
}
|
|
69
|
+
function radius(props) {
|
|
70
|
+
return composeClassNames(_resp("r", props.radius));
|
|
71
|
+
}
|
|
72
|
+
function shadow(props) {
|
|
73
|
+
return composeClassNames(_resp("shadow", props.shadow));
|
|
74
|
+
}
|
|
4
75
|
const PREFIX = "s-";
|
|
76
|
+
function scopeClassName(className) {
|
|
77
|
+
if (className !== void 0)
|
|
78
|
+
return `${PREFIX}${className.trim()}`;
|
|
79
|
+
}
|
|
80
|
+
function _comp(...classNames) {
|
|
81
|
+
return getClassNames(...classNames).filter(Boolean).map(scopeClassName).join(" ") || void 0;
|
|
82
|
+
}
|
|
83
|
+
function textOverflow(props) {
|
|
84
|
+
return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`);
|
|
85
|
+
}
|
|
86
|
+
function width(props) {
|
|
87
|
+
return _resp("w", props.width) ?? "";
|
|
88
|
+
}
|
|
5
89
|
function compileRule(selector, props, context) {
|
|
6
90
|
let css = compileProperties$1(selector, props);
|
|
7
91
|
if (props["@nest"] && (css += compileNestedRules(selector, props["@nest"], context)), props["@keyframes"])
|
|
@@ -1065,13 +1149,13 @@ _responsiveRule(util$o, "flex-justify-flex-end", {
|
|
|
1065
1149
|
_responsiveRule(util$o, "flex-justify-center", {
|
|
1066
1150
|
justifyContent: "center"
|
|
1067
1151
|
});
|
|
1068
|
-
_responsiveRule(util$o, "flex-justify-between", {
|
|
1152
|
+
_responsiveRule(util$o, "flex-justify-space-between", {
|
|
1069
1153
|
justifyContent: "space-between"
|
|
1070
1154
|
});
|
|
1071
|
-
_responsiveRule(util$o, "flex-justify-around", {
|
|
1155
|
+
_responsiveRule(util$o, "flex-justify-space-around", {
|
|
1072
1156
|
justifyContent: "space-around"
|
|
1073
1157
|
});
|
|
1074
|
-
_responsiveRule(util$o, "flex-justify-evenly", {
|
|
1158
|
+
_responsiveRule(util$o, "flex-justify-space-evenly", {
|
|
1075
1159
|
justifyContent: "space-evenly"
|
|
1076
1160
|
});
|
|
1077
1161
|
const flexJustifyStyle = {
|
|
@@ -2117,7 +2201,7 @@ const skeletonStyle = {
|
|
|
2117
2201
|
layers: {
|
|
2118
2202
|
component
|
|
2119
2203
|
}
|
|
2120
|
-
}, primitive$
|
|
2204
|
+
}, primitive$p = {
|
|
2121
2205
|
".arrow": {
|
|
2122
2206
|
position: "absolute",
|
|
2123
2207
|
// todo: replace with vars?
|
|
@@ -2169,9 +2253,9 @@ const skeletonStyle = {
|
|
|
2169
2253
|
}
|
|
2170
2254
|
}, _arrowStyle = {
|
|
2171
2255
|
layers: {
|
|
2172
|
-
primitive: primitive$
|
|
2256
|
+
primitive: primitive$p
|
|
2173
2257
|
}
|
|
2174
|
-
}, primitive$
|
|
2258
|
+
}, primitive$o = {
|
|
2175
2259
|
".input": {
|
|
2176
2260
|
position: "relative"
|
|
2177
2261
|
},
|
|
@@ -2275,7 +2359,7 @@ const skeletonStyle = {
|
|
|
2275
2359
|
};
|
|
2276
2360
|
for (const textSize of theme.FONT_TEXT_SIZE) {
|
|
2277
2361
|
const source = vars.font.text.sizes[textSize];
|
|
2278
|
-
primitive$
|
|
2362
|
+
primitive$o[`.input-${textSize}`] = {
|
|
2279
2363
|
[varNames.input.fontSize]: source.fontSize,
|
|
2280
2364
|
[varNames.input.lineHeight]: source.lineHeight,
|
|
2281
2365
|
[varNames.input.letterSpacing]: source.letterSpacing,
|
|
@@ -2284,16 +2368,16 @@ for (const textSize of theme.FONT_TEXT_SIZE) {
|
|
|
2284
2368
|
};
|
|
2285
2369
|
}
|
|
2286
2370
|
for (const space of theme.SPACE)
|
|
2287
|
-
primitive$
|
|
2371
|
+
primitive$o[`.input-p-${space}`] = {
|
|
2288
2372
|
[varNames.input.padding]: vars.space[space]
|
|
2289
2373
|
};
|
|
2290
2374
|
for (const space of theme.SPACE)
|
|
2291
|
-
primitive$
|
|
2375
|
+
primitive$o[`.input-g-${space}`] = {
|
|
2292
2376
|
[varNames.input.gap]: vars.space[space]
|
|
2293
2377
|
};
|
|
2294
2378
|
const _inputStyle = {
|
|
2295
2379
|
layers: {
|
|
2296
|
-
primitive: primitive$
|
|
2380
|
+
primitive: primitive$o
|
|
2297
2381
|
}
|
|
2298
2382
|
}, toneMap$2 = {
|
|
2299
2383
|
default: "default",
|
|
@@ -2303,7 +2387,7 @@ const _inputStyle = {
|
|
|
2303
2387
|
positive: "positive",
|
|
2304
2388
|
caution: "caution",
|
|
2305
2389
|
critical: "critical"
|
|
2306
|
-
}, primitive$
|
|
2390
|
+
}, primitive$n = {
|
|
2307
2391
|
".selectable": {
|
|
2308
2392
|
backgroundColor: vars.color.bg,
|
|
2309
2393
|
color: vars.color.fg,
|
|
@@ -2368,7 +2452,7 @@ const _inputStyle = {
|
|
|
2368
2452
|
}
|
|
2369
2453
|
}, _selectableStyle = {
|
|
2370
2454
|
layers: {
|
|
2371
|
-
primitive: primitive$
|
|
2455
|
+
primitive: primitive$n
|
|
2372
2456
|
}
|
|
2373
2457
|
};
|
|
2374
2458
|
function buildSelectableTones() {
|
|
@@ -2410,7 +2494,7 @@ function buildSelectableTones() {
|
|
|
2410
2494
|
}
|
|
2411
2495
|
return rules2;
|
|
2412
2496
|
}
|
|
2413
|
-
const primitive$
|
|
2497
|
+
const primitive$m = {
|
|
2414
2498
|
".avatar": {
|
|
2415
2499
|
backgroundColor: vars.color.avatar.bg,
|
|
2416
2500
|
position: "relative",
|
|
@@ -2542,15 +2626,15 @@ const primitive$l = {
|
|
|
2542
2626
|
}
|
|
2543
2627
|
};
|
|
2544
2628
|
for (const size of theme.AVATAR_SIZE)
|
|
2545
|
-
_responsiveRule(primitive$
|
|
2629
|
+
_responsiveRule(primitive$m, `avatar-${size}`, {
|
|
2546
2630
|
[varNames.avatar.distance]: vars.avatar.sizes[size].distance,
|
|
2547
2631
|
[varNames.avatar.size]: vars.avatar.sizes[size].size
|
|
2548
2632
|
});
|
|
2549
2633
|
const avatarStyle = {
|
|
2550
2634
|
layers: {
|
|
2551
|
-
primitive: primitive$
|
|
2635
|
+
primitive: primitive$m
|
|
2552
2636
|
}
|
|
2553
|
-
}, primitive$
|
|
2637
|
+
}, primitive$l = {
|
|
2554
2638
|
".badge": {
|
|
2555
2639
|
backgroundColor: vars.color.bg,
|
|
2556
2640
|
color: vars.color.fg,
|
|
@@ -2558,15 +2642,15 @@ const avatarStyle = {
|
|
|
2558
2642
|
}
|
|
2559
2643
|
};
|
|
2560
2644
|
for (const tone of theme.THEME_COLOR_STATE_TONES)
|
|
2561
|
-
primitive$
|
|
2645
|
+
primitive$l[`.badge-${tone}`] = {
|
|
2562
2646
|
[varNames.color.bg]: vars.color.tinted[tone].bg[4],
|
|
2563
2647
|
[varNames.color.fg]: vars.color.tinted[tone].fg[1]
|
|
2564
2648
|
};
|
|
2565
2649
|
const badgeStyle = {
|
|
2566
2650
|
layers: {
|
|
2567
|
-
primitive: primitive$
|
|
2651
|
+
primitive: primitive$l
|
|
2568
2652
|
}
|
|
2569
|
-
}, primitive$
|
|
2653
|
+
}, primitive$k = {
|
|
2570
2654
|
".box": {
|
|
2571
2655
|
minWidth: 0,
|
|
2572
2656
|
minHeight: 0,
|
|
@@ -2588,7 +2672,7 @@ const badgeStyle = {
|
|
|
2588
2672
|
}
|
|
2589
2673
|
}, boxStyle = {
|
|
2590
2674
|
layers: {
|
|
2591
|
-
primitive: primitive$
|
|
2675
|
+
primitive: primitive$k
|
|
2592
2676
|
}
|
|
2593
2677
|
}, toneMap$1 = {
|
|
2594
2678
|
default: "default",
|
|
@@ -2602,7 +2686,7 @@ const badgeStyle = {
|
|
|
2602
2686
|
default: "solid",
|
|
2603
2687
|
ghost: "ghost",
|
|
2604
2688
|
bleed: "tinted"
|
|
2605
|
-
}, primitive$
|
|
2689
|
+
}, primitive$j = {
|
|
2606
2690
|
".button": {
|
|
2607
2691
|
WebkitFontSmoothing: "inherit",
|
|
2608
2692
|
appearance: "none",
|
|
@@ -2621,6 +2705,8 @@ const badgeStyle = {
|
|
|
2621
2705
|
backgroundColor: vars.color.bg,
|
|
2622
2706
|
color: vars.color.fg,
|
|
2623
2707
|
boxShadow: "var(--button-box-shadow)",
|
|
2708
|
+
alignItems: "center",
|
|
2709
|
+
// 'justifyContent': 'center',
|
|
2624
2710
|
"@nest": {
|
|
2625
2711
|
"&::-moz-focus-inner": {
|
|
2626
2712
|
border: 0,
|
|
@@ -2649,7 +2735,7 @@ const badgeStyle = {
|
|
|
2649
2735
|
};
|
|
2650
2736
|
for (const tone of theme.THEME_COLOR_STATE_TONES) {
|
|
2651
2737
|
const solid = vars.color.solid[tone], tinted = vars.color.tinted[tone];
|
|
2652
|
-
primitive$
|
|
2738
|
+
primitive$j[`.button.${variantMap.default}.${toneMap$1[tone]}`] = {
|
|
2653
2739
|
[varNames.color.bg]: solid.bg[0],
|
|
2654
2740
|
[varNames.color.border]: solid.border[1],
|
|
2655
2741
|
[varNames.color.fg]: solid.fg[0],
|
|
@@ -2681,27 +2767,27 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
|
|
|
2681
2767
|
[varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
|
|
2682
2768
|
}
|
|
2683
2769
|
}
|
|
2684
|
-
}, primitive$
|
|
2770
|
+
}, primitive$j[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
|
|
2685
2771
|
[varNames.color.bg]: tinted.bg[1],
|
|
2686
|
-
[varNames.color.border]: tinted.border[
|
|
2772
|
+
[varNames.color.border]: tinted.border[0],
|
|
2687
2773
|
[varNames.color.fg]: tinted.fg[2],
|
|
2688
2774
|
"--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)",
|
|
2689
2775
|
"@nest": {
|
|
2690
2776
|
"&:not([data-disabled]):hover": {
|
|
2691
2777
|
[varNames.color.bg]: tinted.bg[2],
|
|
2692
|
-
[varNames.color.border]: tinted.border[
|
|
2778
|
+
[varNames.color.border]: tinted.border[1],
|
|
2693
2779
|
[varNames.color.fg]: tinted.fg[1]
|
|
2694
2780
|
// '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
|
|
2695
2781
|
},
|
|
2696
2782
|
"&:not([data-disabled]):active": {
|
|
2697
2783
|
[varNames.color.bg]: tinted.bg[3],
|
|
2698
|
-
[varNames.color.border]: tinted.border[
|
|
2784
|
+
[varNames.color.border]: tinted.border[2],
|
|
2699
2785
|
[varNames.color.fg]: tinted.fg[1],
|
|
2700
2786
|
"--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
|
|
2701
2787
|
},
|
|
2702
2788
|
"&:not([data-disabled])[data-selected]": {
|
|
2703
2789
|
[varNames.color.bg]: tinted.bg[3],
|
|
2704
|
-
[varNames.color.border]: tinted.border[
|
|
2790
|
+
[varNames.color.border]: tinted.border[2],
|
|
2705
2791
|
[varNames.color.fg]: tinted.fg[1],
|
|
2706
2792
|
"--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
|
|
2707
2793
|
},
|
|
@@ -2711,7 +2797,7 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
|
|
|
2711
2797
|
[varNames.color.fg]: vars.color.default.tinted.fg[2]
|
|
2712
2798
|
}
|
|
2713
2799
|
}
|
|
2714
|
-
}, primitive$
|
|
2800
|
+
}, primitive$j[`.button.${variantMap.bleed}.${toneMap$1[tone]}`] = {
|
|
2715
2801
|
boxShadow: "none",
|
|
2716
2802
|
[varNames.color.bg]: tinted.bg[0],
|
|
2717
2803
|
[varNames.color.border]: tinted.border[1],
|
|
@@ -2748,7 +2834,7 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
|
|
|
2748
2834
|
}
|
|
2749
2835
|
const buttonStyle = {
|
|
2750
2836
|
layers: {
|
|
2751
|
-
primitive: primitive$
|
|
2837
|
+
primitive: primitive$j
|
|
2752
2838
|
}
|
|
2753
2839
|
}, toneMap = {
|
|
2754
2840
|
transparent: "transparent",
|
|
@@ -2760,7 +2846,7 @@ const buttonStyle = {
|
|
|
2760
2846
|
caution: "caution",
|
|
2761
2847
|
critical: "critical",
|
|
2762
2848
|
inherit: void 0
|
|
2763
|
-
}, primitive$
|
|
2849
|
+
}, primitive$i = {
|
|
2764
2850
|
".card": {
|
|
2765
2851
|
backgroundColor: vars.color.bg,
|
|
2766
2852
|
color: vars.color.fg,
|
|
@@ -2799,7 +2885,7 @@ for (const scheme of theme.THEME_COLOR_SCHEMES) {
|
|
|
2799
2885
|
const _varNames = varNames.color[tone], _vars = vars.color[scheme][tone];
|
|
2800
2886
|
_assignToneProps(schemeProps, _varNames, _vars);
|
|
2801
2887
|
}
|
|
2802
|
-
primitive$
|
|
2888
|
+
primitive$i[`.card.${scheme}`] = schemeProps;
|
|
2803
2889
|
}
|
|
2804
2890
|
for (const tone of theme.THEME_COLOR_CARD_TONES) {
|
|
2805
2891
|
const _varNames = varNames.color, _vars = vars.color[tone], toneProps = {};
|
|
@@ -2827,11 +2913,11 @@ for (const tone of theme.THEME_COLOR_CARD_TONES) {
|
|
|
2827
2913
|
// '--card-skeleton-to-color': 'var(--color-skeleton-to)',
|
|
2828
2914
|
"--card-hairline-soft-color": vars.color.tinted.default.border[1],
|
|
2829
2915
|
"--card-hairline-hard-color": vars.color.tinted.default.border[2]
|
|
2830
|
-
}), primitive$
|
|
2916
|
+
}), primitive$i[`.card.${toneMap[tone]}`] = toneProps;
|
|
2831
2917
|
}
|
|
2832
2918
|
const cardStyle = {
|
|
2833
2919
|
layers: {
|
|
2834
|
-
primitive: primitive$
|
|
2920
|
+
primitive: primitive$i
|
|
2835
2921
|
}
|
|
2836
2922
|
};
|
|
2837
2923
|
function _assignToneProps(toneProps, _varNames, _vars) {
|
|
@@ -2907,7 +2993,7 @@ function _assignToneProps(toneProps, _varNames, _vars) {
|
|
|
2907
2993
|
});
|
|
2908
2994
|
}
|
|
2909
2995
|
}
|
|
2910
|
-
const primitive$
|
|
2996
|
+
const primitive$h = {
|
|
2911
2997
|
".checkbox": {
|
|
2912
2998
|
position: "relative",
|
|
2913
2999
|
display: "inline-block"
|
|
@@ -3037,9 +3123,9 @@ const primitive$g = {
|
|
|
3037
3123
|
}
|
|
3038
3124
|
}, checkboxStyle = {
|
|
3039
3125
|
layers: {
|
|
3040
|
-
primitive: primitive$
|
|
3126
|
+
primitive: primitive$h
|
|
3041
3127
|
}
|
|
3042
|
-
}, primitive$
|
|
3128
|
+
}, primitive$g = {
|
|
3043
3129
|
".code": {
|
|
3044
3130
|
"--font-weight-regular": "var(--font-code-weight-regular)",
|
|
3045
3131
|
"--font-weight-medium": "var(--font-code-weight-medium)",
|
|
@@ -3075,7 +3161,7 @@ const primitive$g = {
|
|
|
3075
3161
|
}
|
|
3076
3162
|
};
|
|
3077
3163
|
for (const size of theme.FONT_CODE_SIZE)
|
|
3078
|
-
_responsiveRule(primitive$
|
|
3164
|
+
_responsiveRule(primitive$g, `code-${size}`, {
|
|
3079
3165
|
"--font-size": `var(--font-code-${size}-size)`,
|
|
3080
3166
|
"--font-line-height": `var(--font-code-${size}-line-height)`,
|
|
3081
3167
|
"--font-letter-spacing": `var(--font-code-${size}-letter-spacing)`,
|
|
@@ -3086,18 +3172,18 @@ for (const size of theme.FONT_CODE_SIZE)
|
|
|
3086
3172
|
});
|
|
3087
3173
|
const codeStyle = {
|
|
3088
3174
|
layers: {
|
|
3089
|
-
primitive: primitive$
|
|
3175
|
+
primitive: primitive$g
|
|
3090
3176
|
}
|
|
3091
|
-
}, primitive$
|
|
3177
|
+
}, primitive$f = {
|
|
3092
3178
|
".container": {
|
|
3093
3179
|
margin: "0 auto",
|
|
3094
3180
|
width: "100%"
|
|
3095
3181
|
}
|
|
3096
3182
|
}, containerStyle = {
|
|
3097
3183
|
layers: {
|
|
3098
|
-
primitive: primitive$
|
|
3184
|
+
primitive: primitive$f
|
|
3099
3185
|
}
|
|
3100
|
-
}, primitive$
|
|
3186
|
+
}, primitive$e = {
|
|
3101
3187
|
".heading": {
|
|
3102
3188
|
"--font-weight-regular": "var(--font-heading-weight-regular)",
|
|
3103
3189
|
"--font-weight-medium": "var(--font-heading-weight-medium)",
|
|
@@ -3121,7 +3207,7 @@ const codeStyle = {
|
|
|
3121
3207
|
}
|
|
3122
3208
|
};
|
|
3123
3209
|
for (const size of theme.FONT_HEADING_SIZE)
|
|
3124
|
-
_responsiveRule(primitive$
|
|
3210
|
+
_responsiveRule(primitive$e, `heading-${size}`, {
|
|
3125
3211
|
"--font-size": `var(--font-heading-${size}-size)`,
|
|
3126
3212
|
"--font-line-height": `var(--font-heading-${size}-line-height)`,
|
|
3127
3213
|
"--font-letter-spacing": `var(--font-heading-${size}-letter-spacing)`,
|
|
@@ -3132,9 +3218,9 @@ for (const size of theme.FONT_HEADING_SIZE)
|
|
|
3132
3218
|
});
|
|
3133
3219
|
const headingStyle = {
|
|
3134
3220
|
layers: {
|
|
3135
|
-
primitive: primitive$
|
|
3221
|
+
primitive: primitive$e
|
|
3136
3222
|
}
|
|
3137
|
-
}, primitive$
|
|
3223
|
+
}, primitive$d = {
|
|
3138
3224
|
".kbd": {
|
|
3139
3225
|
// '--color-bg': 'var(--color-tinted-default-bg-1)',
|
|
3140
3226
|
// '--color-border': 'var(--color-tinted-default-border-2)',
|
|
@@ -3151,9 +3237,9 @@ const headingStyle = {
|
|
|
3151
3237
|
}
|
|
3152
3238
|
}, kbdStyle = {
|
|
3153
3239
|
layers: {
|
|
3154
|
-
primitive: primitive$
|
|
3240
|
+
primitive: primitive$d
|
|
3155
3241
|
}
|
|
3156
|
-
}, primitive$
|
|
3242
|
+
}, primitive$c = {
|
|
3157
3243
|
".label": {
|
|
3158
3244
|
"--font-weight-regular": "var(--font-label-weight-regular)",
|
|
3159
3245
|
"--font-weight-medium": "var(--font-label-weight-medium)",
|
|
@@ -3178,7 +3264,7 @@ const headingStyle = {
|
|
|
3178
3264
|
}
|
|
3179
3265
|
};
|
|
3180
3266
|
for (const size of theme.FONT_LABEL_SIZE)
|
|
3181
|
-
_responsiveRule(primitive$
|
|
3267
|
+
_responsiveRule(primitive$c, `label-${size}`, {
|
|
3182
3268
|
"--font-size": `var(--font-label-${size}-size)`,
|
|
3183
3269
|
"--font-line-height": `var(--font-label-${size}-line-height)`,
|
|
3184
3270
|
"--font-letter-spacing": `var(--font-label-${size}-letter-spacing)`,
|
|
@@ -3189,13 +3275,13 @@ for (const size of theme.FONT_LABEL_SIZE)
|
|
|
3189
3275
|
});
|
|
3190
3276
|
const labelStyle = {
|
|
3191
3277
|
layers: {
|
|
3192
|
-
primitive: primitive$
|
|
3278
|
+
primitive: primitive$c
|
|
3193
3279
|
}
|
|
3194
|
-
}, primitive$
|
|
3280
|
+
}, primitive$b = {}, popoverStyle = {
|
|
3195
3281
|
layers: {
|
|
3196
|
-
primitive: primitive$
|
|
3282
|
+
primitive: primitive$b
|
|
3197
3283
|
}
|
|
3198
|
-
}, primitive$
|
|
3284
|
+
}, primitive$a = {
|
|
3199
3285
|
".radio": {
|
|
3200
3286
|
position: "relative",
|
|
3201
3287
|
"@nest": {
|
|
@@ -3301,9 +3387,9 @@ const labelStyle = {
|
|
|
3301
3387
|
}
|
|
3302
3388
|
}, radioStyle = {
|
|
3303
3389
|
layers: {
|
|
3304
|
-
primitive: primitive$
|
|
3390
|
+
primitive: primitive$a
|
|
3305
3391
|
}
|
|
3306
|
-
}, primitive$
|
|
3392
|
+
}, primitive$9 = {
|
|
3307
3393
|
".select": {
|
|
3308
3394
|
"@nest": {
|
|
3309
3395
|
"& > select:disabled": {
|
|
@@ -3323,7 +3409,7 @@ const labelStyle = {
|
|
|
3323
3409
|
}
|
|
3324
3410
|
}, selectStyle = {
|
|
3325
3411
|
layers: {
|
|
3326
|
-
primitive: primitive$
|
|
3412
|
+
primitive: primitive$9
|
|
3327
3413
|
}
|
|
3328
3414
|
}, keyframes = {
|
|
3329
3415
|
"spinner-rotate": {
|
|
@@ -3334,13 +3420,21 @@ const labelStyle = {
|
|
|
3334
3420
|
transform: "rotate(360deg)"
|
|
3335
3421
|
}
|
|
3336
3422
|
}
|
|
3337
|
-
}, primitive$
|
|
3423
|
+
}, primitive$8 = {
|
|
3338
3424
|
".spinner": {},
|
|
3339
3425
|
".animated-spinner-icon": {
|
|
3340
3426
|
animation: "spinner-rotate 500ms linear infinite"
|
|
3341
3427
|
}
|
|
3342
3428
|
}, spinnerStyle = {
|
|
3343
3429
|
keyframes,
|
|
3430
|
+
layers: {
|
|
3431
|
+
primitive: primitive$8
|
|
3432
|
+
}
|
|
3433
|
+
}, primitive$7 = {
|
|
3434
|
+
".stack": {
|
|
3435
|
+
gridTemplateColumns: "minmax(0, 1fr)"
|
|
3436
|
+
}
|
|
3437
|
+
}, stackStyle = {
|
|
3344
3438
|
layers: {
|
|
3345
3439
|
primitive: primitive$7
|
|
3346
3440
|
}
|
|
@@ -3926,6 +4020,7 @@ const textStyle = {
|
|
|
3926
4020
|
radioStyle,
|
|
3927
4021
|
selectStyle,
|
|
3928
4022
|
spinnerStyle,
|
|
4023
|
+
stackStyle,
|
|
3929
4024
|
switchStyle,
|
|
3930
4025
|
textAreaStyle,
|
|
3931
4026
|
textInputStyle,
|
|
@@ -4342,93 +4437,9 @@ function compileTheme(theme2) {
|
|
|
4342
4437
|
` : `/* v0 - not supported */
|
|
4343
4438
|
`;
|
|
4344
4439
|
}
|
|
4345
|
-
function getClassNames(...classNames) {
|
|
4346
|
-
return classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean).join(" ").split(" ");
|
|
4347
|
-
}
|
|
4348
|
-
function composeClassNames(...classNames) {
|
|
4349
|
-
return unique(getClassNames(...classNames)).join(" ") || void 0;
|
|
4350
|
-
}
|
|
4351
|
-
function unique(array) {
|
|
4352
|
-
return Array.from(new Set(array));
|
|
4353
|
-
}
|
|
4354
|
-
function scopeClassName(className) {
|
|
4355
|
-
if (className !== void 0)
|
|
4356
|
-
return `${PREFIX}${className.trim()}`;
|
|
4357
|
-
}
|
|
4358
|
-
function _comp(...classNames) {
|
|
4359
|
-
return getClassNames(...classNames).filter(Boolean).map(scopeClassName).join(" ") || void 0;
|
|
4360
|
-
}
|
|
4361
4440
|
function breadcrumbs() {
|
|
4362
4441
|
return _comp("breadcrumbs");
|
|
4363
4442
|
}
|
|
4364
|
-
function _resp(prefix, prop) {
|
|
4365
|
-
if (!(prop === void 0 || prop === !1))
|
|
4366
|
-
return Array.isArray(prop) ? prop.map((value, index) => {
|
|
4367
|
-
if (value === void 0 || typeof prop == "boolean" && prop === !1) return;
|
|
4368
|
-
const className = (typeof value == "boolean" ? [prefix] : [prefix, value]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
|
|
4369
|
-
return index === 0 ? className : `${index}:${className}`;
|
|
4370
|
-
}).filter(Boolean).join(" ") : (typeof prop == "boolean" ? [prefix] : [prefix, prop]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
|
|
4371
|
-
}
|
|
4372
|
-
function border(props) {
|
|
4373
|
-
return composeClassNames(_resp("border", props.border), _resp("border-t", props.borderTop), _resp("border-r", props.borderRight), _resp("border-b", props.borderBottom), _resp("border-l", props.borderLeft));
|
|
4374
|
-
}
|
|
4375
|
-
function display(props) {
|
|
4376
|
-
return composeClassNames(_resp(void 0, props.display));
|
|
4377
|
-
}
|
|
4378
|
-
function flex(props) {
|
|
4379
|
-
return composeClassNames(_resp("flex-align", props.align), _resp("f", props.direction), _resp("flex-justify", props.justify), _resp("flex", props.wrap));
|
|
4380
|
-
}
|
|
4381
|
-
function flexItem(props) {
|
|
4382
|
-
return composeClassNames(_resp("f", props.flex));
|
|
4383
|
-
}
|
|
4384
|
-
function font(props) {
|
|
4385
|
-
return composeClassNames("font", props.weight && `font-${props.weight}`, _resp("text-align", props.align));
|
|
4386
|
-
}
|
|
4387
|
-
function gap(props) {
|
|
4388
|
-
return composeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
|
|
4389
|
-
}
|
|
4390
|
-
function grid(props) {
|
|
4391
|
-
return composeClassNames(_resp("auto-cols", props.autoCols), _resp("auto-flow", props.autoFlow), _resp("auto-rows", props.autoRows), _resp("cols", props.columns), _resp("rows", props.rows));
|
|
4392
|
-
}
|
|
4393
|
-
function gridItem(props) {
|
|
4394
|
-
return composeClassNames(_resp("col", props.column), _resp("col-start", props.columnStart), _resp("col-end", props.columnEnd), _resp("row", props.row), _resp("row-start", props.rowStart), _resp("row-end", props.rowEnd));
|
|
4395
|
-
}
|
|
4396
|
-
function height(props) {
|
|
4397
|
-
return composeClassNames(_resp("h", props.height));
|
|
4398
|
-
}
|
|
4399
|
-
function inset(props) {
|
|
4400
|
-
return composeClassNames(_resp("inset", props.inset), _resp("top", props.insetTop), _resp("right", props.insetRight), _resp("bottom", props.insetBottom), _resp("left", props.insetLeft));
|
|
4401
|
-
}
|
|
4402
|
-
function margin(props) {
|
|
4403
|
-
return composeClassNames(_resp("m", props.margin), _resp("mx", props.marginX), _resp("my", props.marginY), _resp("mt", props.marginTop), _resp("mr", props.marginRight), _resp("mb", props.marginBottom), _resp("ml", props.marginLeft));
|
|
4404
|
-
}
|
|
4405
|
-
function maxWidth(props) {
|
|
4406
|
-
return _resp("max-w", props.maxWidth) ?? "";
|
|
4407
|
-
}
|
|
4408
|
-
function overflow(props) {
|
|
4409
|
-
return composeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
|
|
4410
|
-
}
|
|
4411
|
-
function padding(props) {
|
|
4412
|
-
return composeClassNames(_resp("p", props.padding), _resp("px", props.paddingX), _resp("py", props.paddingY), _resp("pt", props.paddingTop), _resp("pr", props.paddingRight), _resp("pb", props.paddingBottom), _resp("pl", props.paddingLeft));
|
|
4413
|
-
}
|
|
4414
|
-
function pointerEvents(props) {
|
|
4415
|
-
return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
|
|
4416
|
-
}
|
|
4417
|
-
function position(props) {
|
|
4418
|
-
return composeClassNames(_resp("position", props.position));
|
|
4419
|
-
}
|
|
4420
|
-
function radius(props) {
|
|
4421
|
-
return composeClassNames(_resp("r", props.radius));
|
|
4422
|
-
}
|
|
4423
|
-
function shadow(props) {
|
|
4424
|
-
return composeClassNames(_resp("shadow", props.shadow));
|
|
4425
|
-
}
|
|
4426
|
-
function textOverflow(props) {
|
|
4427
|
-
return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`);
|
|
4428
|
-
}
|
|
4429
|
-
function width(props) {
|
|
4430
|
-
return _resp("w", props.width) ?? "";
|
|
4431
|
-
}
|
|
4432
4443
|
function dialog() {
|
|
4433
4444
|
return _comp("dialog", inset({
|
|
4434
4445
|
inset: 0
|
|
@@ -4613,6 +4624,9 @@ function spinner() {
|
|
|
4613
4624
|
function animatedSpinnerIcon() {
|
|
4614
4625
|
return _comp("animated-spinner-icon");
|
|
4615
4626
|
}
|
|
4627
|
+
function stack() {
|
|
4628
|
+
return _comp("stack");
|
|
4629
|
+
}
|
|
4616
4630
|
function _switch() {
|
|
4617
4631
|
return _comp("switch");
|
|
4618
4632
|
}
|
|
@@ -4646,7 +4660,6 @@ function tooltipCard() {
|
|
|
4646
4660
|
function srOnly() {
|
|
4647
4661
|
return composeClassNames("sr-only");
|
|
4648
4662
|
}
|
|
4649
|
-
exports.v3_v2 = v3_v2.v3_v2;
|
|
4650
4663
|
exports._arrow = _arrow;
|
|
4651
4664
|
exports._arrowShape = _arrowShape;
|
|
4652
4665
|
exports._arrowStroke = _arrowStroke;
|
|
@@ -4726,6 +4739,7 @@ exports.shadow = shadow;
|
|
|
4726
4739
|
exports.skeleton = skeleton;
|
|
4727
4740
|
exports.spinner = spinner;
|
|
4728
4741
|
exports.srOnly = srOnly;
|
|
4742
|
+
exports.stack = stack;
|
|
4729
4743
|
exports.text = text;
|
|
4730
4744
|
exports.textArea = textArea;
|
|
4731
4745
|
exports.textInput = textInput;
|