@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.
Files changed (51) hide show
  1. package/dist/_chunks-cjs/_visual-editing.js +81 -31
  2. package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
  3. package/dist/_chunks-es/_visual-editing.mjs +82 -32
  4. package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
  5. package/dist/_visual-editing.d.mts +14 -11
  6. package/dist/_visual-editing.d.ts +14 -11
  7. package/dist/cli.js +1 -1
  8. package/dist/css.d.mts +144 -852
  9. package/dist/css.d.ts +144 -852
  10. package/dist/css.js +155 -141
  11. package/dist/css.js.map +1 -1
  12. package/dist/css.mjs +154 -141
  13. package/dist/css.mjs.map +1 -1
  14. package/dist/index.d.mts +14 -11
  15. package/dist/index.d.ts +14 -11
  16. package/dist/index.js +2 -4
  17. package/dist/index.js.map +1 -1
  18. package/dist/index.mjs +4 -6
  19. package/dist/index.mjs.map +1 -1
  20. package/dist/sanity-theme.css +1 -1
  21. package/dist/system.css +54 -49
  22. package/dist/theme.js +271 -33
  23. package/dist/theme.js.map +1 -1
  24. package/dist/theme.mjs +252 -16
  25. package/dist/theme.mjs.map +1 -1
  26. package/package.json +2 -2
  27. package/src/css/aspects/flex/flexJustify.style.ts +3 -3
  28. package/src/css/aspects/grid/types.ts +2 -2
  29. package/src/css/index.ts +2 -2
  30. package/src/css/primitives/_input/__workshop__/index.ts +1 -1
  31. package/src/css/primitives/button/button.style.ts +6 -4
  32. package/src/css/primitives/stack/index.ts +1 -0
  33. package/src/css/primitives/stack/stack.style.ts +9 -0
  34. package/src/css/primitives/stack/stack.ts +6 -0
  35. package/src/css/system.style.ts +2 -0
  36. package/src/theme/v3/defaults.ts +1 -1
  37. package/src/ui/components/autocomplete/__workshop__/index.ts +1 -1
  38. package/src/ui/components/dialog/dialog.tsx +3 -4
  39. package/src/ui/constants.ts +6 -0
  40. package/src/ui/hooks/useMediaIndex/useMediaIndex.ts +0 -2
  41. package/src/ui/primitives/box/box.tsx +6 -0
  42. package/src/ui/primitives/button/button.tsx +11 -10
  43. package/src/ui/primitives/code/code.tsx +1 -1
  44. package/src/ui/primitives/popover/popover.tsx +5 -75
  45. package/src/ui/primitives/stack/stack.tsx +10 -5
  46. package/src/ui/primitives/textInput/textInput.tsx +1 -1
  47. package/src/ui/primitives/tooltip/tooltip.tsx +2 -3
  48. package/dist/_chunks-cjs/v3_v2.js +0 -251
  49. package/dist/_chunks-cjs/v3_v2.js.map +0 -1
  50. package/dist/_chunks-es/v3_v2.mjs +0 -252
  51. 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 v3_v2 = require("./_chunks-cjs/v3_v2.js"), color = require("@sanity/color"), theme = require("@sanity/ui/theme");
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$o = {
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$o
2256
+ primitive: primitive$p
2173
2257
  }
2174
- }, primitive$n = {
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$n[`.input-${textSize}`] = {
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$n[`.input-p-${space}`] = {
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$n[`.input-g-${space}`] = {
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$n
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$m = {
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$m
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$l = {
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$l, `avatar-${size}`, {
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$l
2635
+ primitive: primitive$m
2552
2636
  }
2553
- }, primitive$k = {
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$k[`.badge-${tone}`] = {
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$k
2651
+ primitive: primitive$l
2568
2652
  }
2569
- }, primitive$j = {
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$j
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$i = {
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$i[`.button.${variantMap.default}.${toneMap$1[tone]}`] = {
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$i[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
2770
+ }, primitive$j[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
2685
2771
  [varNames.color.bg]: tinted.bg[1],
2686
- [varNames.color.border]: tinted.border[1],
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[2],
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[3],
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[3],
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$i[`.button.${variantMap.bleed}.${toneMap$1[tone]}`] = {
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$i
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$h = {
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$h[`.card.${scheme}`] = schemeProps;
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$h[`.card.${toneMap[tone]}`] = toneProps;
2916
+ }), primitive$i[`.card.${toneMap[tone]}`] = toneProps;
2831
2917
  }
2832
2918
  const cardStyle = {
2833
2919
  layers: {
2834
- primitive: primitive$h
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$g = {
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$g
3126
+ primitive: primitive$h
3041
3127
  }
3042
- }, primitive$f = {
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$f, `code-${size}`, {
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$f
3175
+ primitive: primitive$g
3090
3176
  }
3091
- }, primitive$e = {
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$e
3184
+ primitive: primitive$f
3099
3185
  }
3100
- }, primitive$d = {
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$d, `heading-${size}`, {
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$d
3221
+ primitive: primitive$e
3136
3222
  }
3137
- }, primitive$c = {
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$c
3240
+ primitive: primitive$d
3155
3241
  }
3156
- }, primitive$b = {
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$b, `label-${size}`, {
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$b
3278
+ primitive: primitive$c
3193
3279
  }
3194
- }, primitive$a = {}, popoverStyle = {
3280
+ }, primitive$b = {}, popoverStyle = {
3195
3281
  layers: {
3196
- primitive: primitive$a
3282
+ primitive: primitive$b
3197
3283
  }
3198
- }, primitive$9 = {
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$9
3390
+ primitive: primitive$a
3305
3391
  }
3306
- }, primitive$8 = {
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$8
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$7 = {
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;