@telefonica/mistica 14.36.0 → 14.37.0

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 (190) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/accordion.css-mistica.js +5 -5
  3. package/dist/avatar.css-mistica.js +1 -1
  4. package/dist/badge.css-mistica.js +3 -3
  5. package/dist/boxed.css-mistica.js +1 -1
  6. package/dist/button-group.css-mistica.js +1 -1
  7. package/dist/button-layout.css-mistica.js +10 -10
  8. package/dist/button.css-mistica.js +40 -32
  9. package/dist/button.css.d.ts +7 -4
  10. package/dist/button.d.ts +4 -2
  11. package/dist/button.js +176 -148
  12. package/dist/callout.css-mistica.js +1 -1
  13. package/dist/card.css-mistica.js +22 -22
  14. package/dist/card.js +10 -10
  15. package/dist/carousel.css-mistica.js +18 -18
  16. package/dist/checkbox.css-mistica.js +10 -10
  17. package/dist/checkbox.css.d.ts +1 -1
  18. package/dist/chip.css-mistica.js +8 -8
  19. package/dist/circle.css-mistica.js +2 -2
  20. package/dist/community/advanced-data-card.css-mistica.js +13 -13
  21. package/dist/community/blocks.css-mistica.js +1 -1
  22. package/dist/counter.css-mistica.js +7 -7
  23. package/dist/credit-card-number-field.css-mistica.js +3 -3
  24. package/dist/dialog.css-mistica.js +11 -11
  25. package/dist/double-field.css-mistica.js +4 -4
  26. package/dist/empty-state-card.css-mistica.js +2 -2
  27. package/dist/empty-state.css-mistica.js +6 -6
  28. package/dist/feedback.css-mistica.js +6 -6
  29. package/dist/fixed-footer-layout.css-mistica.js +2 -2
  30. package/dist/grid.css-mistica.js +118 -120
  31. package/dist/grid.css.d.ts +0 -2
  32. package/dist/grid.d.ts +2 -2
  33. package/dist/grid.js +41 -26
  34. package/dist/header.css-mistica.js +1 -1
  35. package/dist/hero.css-mistica.js +5 -5
  36. package/dist/highlighted-card.css-mistica.js +7 -7
  37. package/dist/horizontal-scroll.css-mistica.js +3 -3
  38. package/dist/icon-button.css-mistica.js +2 -2
  39. package/dist/image.css-mistica.js +3 -3
  40. package/dist/image.d.ts +1 -1
  41. package/dist/image.js +24 -24
  42. package/dist/index.d.ts +2 -1
  43. package/dist/index.js +10 -0
  44. package/dist/list.css-mistica.js +16 -16
  45. package/dist/loading-bar.css-mistica.js +7 -7
  46. package/dist/maybe-dismissable.css-mistica.js +1 -1
  47. package/dist/menu.css-mistica.js +1 -1
  48. package/dist/mosaic.css-mistica.js +23 -0
  49. package/dist/mosaic.css.d.ts +6 -0
  50. package/dist/mosaic.css.ts.vanilla.css-mistica.js +11 -0
  51. package/dist/mosaic.d.ts +15 -0
  52. package/dist/mosaic.js +206 -0
  53. package/dist/navigation-bar.css-mistica.js +24 -24
  54. package/dist/navigation-breadcrumbs.css-mistica.js +5 -5
  55. package/dist/package-version.js +1 -1
  56. package/dist/password-field.css-mistica.js +1 -1
  57. package/dist/pin-field.css-mistica.js +6 -6
  58. package/dist/popover.css-mistica.js +10 -10
  59. package/dist/progress-bar.css-mistica.js +5 -5
  60. package/dist/radio-button.css-mistica.js +11 -11
  61. package/dist/responsive-layout.css-mistica.js +3 -3
  62. package/dist/screen-reader-only.css-mistica.js +2 -2
  63. package/dist/select.css-mistica.js +14 -14
  64. package/dist/sheet.css-mistica.js +11 -11
  65. package/dist/sheet.js +8 -8
  66. package/dist/skeletons.css-mistica.js +3 -3
  67. package/dist/skins/blau.js +8 -2
  68. package/dist/skins/movistar-legacy.js +6 -0
  69. package/dist/skins/movistar.js +6 -0
  70. package/dist/skins/o2-classic.js +6 -0
  71. package/dist/skins/o2.js +6 -0
  72. package/dist/skins/skin-contract.css-mistica.js +205 -199
  73. package/dist/skins/skin-contract.css.d.ts +6 -0
  74. package/dist/skins/telefonica.js +6 -0
  75. package/dist/skins/types/colors.d.ts +3 -0
  76. package/dist/skins/vivo-new.js +6 -0
  77. package/dist/skins/vivo.js +6 -0
  78. package/dist/slider.css-mistica.js +7 -7
  79. package/dist/snackbar.css-mistica.js +14 -14
  80. package/dist/spinner.css-mistica.js +1 -1
  81. package/dist/sprinkles.css-mistica.js +921 -407
  82. package/dist/sprinkles.css.d.ts +21 -1
  83. package/dist/stacking-group.css-mistica.js +2 -2
  84. package/dist/stepper.css-mistica.js +9 -9
  85. package/dist/switch-component.css-mistica.js +23 -23
  86. package/dist/tabs.css-mistica.js +12 -12
  87. package/dist/tag.css-mistica.js +1 -1
  88. package/dist/text-field-base.css-mistica.js +9 -9
  89. package/dist/text-field-components.css-mistica.js +11 -11
  90. package/dist/text-field-components.js +30 -26
  91. package/dist/text-link.css-mistica.js +3 -3
  92. package/dist/theme.d.ts +1 -1
  93. package/dist/theme.js +1 -0
  94. package/dist/tooltip.css-mistica.js +6 -6
  95. package/dist/touchable.css-mistica.js +3 -3
  96. package/dist/utils/aspect-ratio-support.css-mistica.js +4 -4
  97. package/dist/utils/aspect-ratio-support.d.ts +1 -1
  98. package/dist/utils/aspect-ratio-support.js +2 -1
  99. package/dist/utils/css.d.ts +1 -0
  100. package/dist/utils/css.js +15 -5
  101. package/dist/video.css-mistica.js +2 -2
  102. package/dist/video.js +30 -30
  103. package/dist-es/accordion.css-mistica.js +3 -3
  104. package/dist-es/avatar.css-mistica.js +1 -1
  105. package/dist-es/badge.css-mistica.js +2 -2
  106. package/dist-es/boxed.css-mistica.js +1 -1
  107. package/dist-es/button-group.css-mistica.js +1 -1
  108. package/dist-es/button-layout.css-mistica.js +7 -7
  109. package/dist-es/button.css-mistica.js +18 -10
  110. package/dist-es/button.js +213 -188
  111. package/dist-es/callout.css-mistica.js +1 -1
  112. package/dist-es/card.css-mistica.js +2 -2
  113. package/dist-es/card.js +10 -10
  114. package/dist-es/carousel.css-mistica.js +2 -2
  115. package/dist-es/checkbox.css-mistica.js +6 -6
  116. package/dist-es/chip.css-mistica.js +7 -7
  117. package/dist-es/circle.css-mistica.js +2 -2
  118. package/dist-es/community/advanced-data-card.css-mistica.js +3 -3
  119. package/dist-es/community/blocks.css-mistica.js +1 -1
  120. package/dist-es/counter.css-mistica.js +2 -2
  121. package/dist-es/credit-card-number-field.css-mistica.js +3 -3
  122. package/dist-es/dialog.css-mistica.js +5 -5
  123. package/dist-es/double-field.css-mistica.js +4 -4
  124. package/dist-es/empty-state-card.css-mistica.js +2 -2
  125. package/dist-es/empty-state.css-mistica.js +3 -3
  126. package/dist-es/feedback.css-mistica.js +2 -2
  127. package/dist-es/fixed-footer-layout.css-mistica.js +2 -2
  128. package/dist-es/grid.css-mistica.js +117 -119
  129. package/dist-es/grid.js +44 -29
  130. package/dist-es/header.css-mistica.js +1 -1
  131. package/dist-es/hero.css-mistica.js +2 -2
  132. package/dist-es/highlighted-card.css-mistica.js +5 -5
  133. package/dist-es/horizontal-scroll.css-mistica.js +2 -2
  134. package/dist-es/icon-button.css-mistica.js +2 -2
  135. package/dist-es/image.css-mistica.js +2 -2
  136. package/dist-es/image.js +47 -47
  137. package/dist-es/index.js +1794 -1793
  138. package/dist-es/list.css-mistica.js +2 -2
  139. package/dist-es/loading-bar.css-mistica.js +2 -2
  140. package/dist-es/maybe-dismissable.css-mistica.js +1 -1
  141. package/dist-es/menu.css-mistica.js +1 -1
  142. package/dist-es/mosaic.css-mistica.js +3 -0
  143. package/dist-es/mosaic.css.ts.vanilla.css-mistica.js +2 -0
  144. package/dist-es/mosaic.js +189 -0
  145. package/dist-es/navigation-bar.css-mistica.js +12 -12
  146. package/dist-es/navigation-breadcrumbs.css-mistica.js +2 -2
  147. package/dist-es/package-version.js +1 -1
  148. package/dist-es/password-field.css-mistica.js +1 -1
  149. package/dist-es/pin-field.css-mistica.js +2 -2
  150. package/dist-es/popover.css-mistica.js +2 -2
  151. package/dist-es/progress-bar.css-mistica.js +2 -2
  152. package/dist-es/radio-button.css-mistica.js +6 -6
  153. package/dist-es/responsive-layout.css-mistica.js +3 -3
  154. package/dist-es/screen-reader-only.css-mistica.js +2 -2
  155. package/dist-es/select.css-mistica.js +11 -11
  156. package/dist-es/sheet.css-mistica.js +2 -2
  157. package/dist-es/sheet.js +8 -8
  158. package/dist-es/skeletons.css-mistica.js +2 -2
  159. package/dist-es/skins/blau.js +8 -2
  160. package/dist-es/skins/movistar-legacy.js +8 -2
  161. package/dist-es/skins/movistar.js +6 -0
  162. package/dist-es/skins/o2-classic.js +6 -0
  163. package/dist-es/skins/o2.js +6 -0
  164. package/dist-es/skins/skin-contract.css-mistica.js +205 -199
  165. package/dist-es/skins/telefonica.js +6 -0
  166. package/dist-es/skins/vivo-new.js +6 -0
  167. package/dist-es/skins/vivo.js +6 -0
  168. package/dist-es/slider.css-mistica.js +2 -2
  169. package/dist-es/snackbar.css-mistica.js +5 -5
  170. package/dist-es/spinner.css-mistica.js +1 -1
  171. package/dist-es/sprinkles.css-mistica.js +921 -407
  172. package/dist-es/stacking-group.css-mistica.js +2 -2
  173. package/dist-es/stepper.css-mistica.js +2 -2
  174. package/dist-es/style.css +1 -1
  175. package/dist-es/switch-component.css-mistica.js +18 -18
  176. package/dist-es/tabs.css-mistica.js +7 -7
  177. package/dist-es/tag.css-mistica.js +1 -1
  178. package/dist-es/text-field-base.css-mistica.js +2 -2
  179. package/dist-es/text-field-components.css-mistica.js +2 -2
  180. package/dist-es/text-field-components.js +49 -44
  181. package/dist-es/text-link.css-mistica.js +3 -3
  182. package/dist-es/theme.js +1 -0
  183. package/dist-es/tooltip.css-mistica.js +2 -2
  184. package/dist-es/touchable.css-mistica.js +2 -2
  185. package/dist-es/utils/aspect-ratio-support.css-mistica.js +3 -3
  186. package/dist-es/utils/aspect-ratio-support.js +2 -1
  187. package/dist-es/utils/css.js +15 -8
  188. package/dist-es/video.css-mistica.js +2 -2
  189. package/dist-es/video.js +31 -31
  190. package/package.json +1 -1
@@ -30,7 +30,7 @@ _export(exports, {
30
30
  });
31
31
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
32
32
  require("./fixed-footer-layout.css.ts.vanilla.css-mistica.js");
33
- var v = "p5j8j58", a = "p5j8j56 _1y2v1nf33", j = "p5j8j54", t = "p5j8j53 _1y2v1nfbx _1y2v1nf32", e = {
33
+ var v = "p5j8j58", a = "p5j8j56 _1y2v1nf36", j = "p5j8j54", t = "p5j8j53 _1y2v1nfh3 _1y2v1nf35", e = {
34
34
  footerHeight: "var(--p5j8j50)",
35
35
  backgroundColor: "var(--p5j8j51)"
36
- }, p = "_1y2v1nfb9";
36
+ }, p = "_1y2v1nfgf";
@@ -31,10 +31,10 @@ _export(exports, {
31
31
  return r;
32
32
  },
33
33
  gridAutoFlow: function() {
34
- return a;
34
+ return t;
35
35
  },
36
36
  gridJustifyContent: function() {
37
- return t;
37
+ return a;
38
38
  },
39
39
  gridJustifyItems: function() {
40
40
  return n;
@@ -69,131 +69,129 @@ _export(exports, {
69
69
  });
70
70
  require("./grid.css.ts.vanilla.css-mistica.js");
71
71
  var i = {
72
- start: "mfyikv36",
73
- end: "mfyikv37",
74
- center: "mfyikv38",
75
- stretch: "mfyikv39",
76
- baseline: "mfyikv3a"
72
+ start: "mfyikv34",
73
+ end: "mfyikv35",
74
+ center: "mfyikv36",
75
+ stretch: "mfyikv37",
76
+ baseline: "mfyikv38"
77
77
  }, m = {
78
- 1: "mfyikv2e",
79
- 2: "mfyikv2f",
80
- 3: "mfyikv2g",
81
- 4: "mfyikv2h",
82
- 5: "mfyikv2i",
83
- 6: "mfyikv2j",
84
- 7: "mfyikv2k",
85
- 8: "mfyikv2l",
86
- 9: "mfyikv2m",
87
- 10: "mfyikv2n",
88
- 11: "mfyikv2o",
89
- 12: "mfyikv2p"
90
- }, f = "mfyikv1o", y = "mfyikv1p", k = "mfyikv6", e = {
91
- start: "mfyikv1h",
92
- end: "mfyikv1i",
93
- center: "mfyikv1j",
94
- stretch: "mfyikv1k",
95
- "space-between": "mfyikv1l",
96
- "space-around": "mfyikv1m",
97
- "space-evenly": "mfyikv1n"
78
+ 1: "mfyikv2c",
79
+ 2: "mfyikv2d",
80
+ 3: "mfyikv2e",
81
+ 4: "mfyikv2f",
82
+ 5: "mfyikv2g",
83
+ 6: "mfyikv2h",
84
+ 7: "mfyikv2i",
85
+ 8: "mfyikv2j",
86
+ 9: "mfyikv2k",
87
+ 10: "mfyikv2l",
88
+ 11: "mfyikv2m",
89
+ 12: "mfyikv2n"
90
+ }, f = "mfyikv1m", y = "mfyikv1n", k = "mfyikv4", e = {
91
+ start: "mfyikv1f",
92
+ end: "mfyikv1g",
93
+ center: "mfyikv1h",
94
+ stretch: "mfyikv1i",
95
+ "space-between": "mfyikv1j",
96
+ "space-around": "mfyikv1k",
97
+ "space-evenly": "mfyikv1l"
98
98
  }, r = {
99
- start: "mfyikv15",
100
- end: "mfyikv16",
101
- center: "mfyikv17",
102
- stretch: "mfyikv18",
103
- baseline: "mfyikv19"
104
- }, a = {
105
- column: "mfyikvx",
106
- row: "mfyikvy",
107
- "row dense": "mfyikvz",
108
- "column dense": "mfyikv10"
99
+ start: "mfyikv13",
100
+ end: "mfyikv14",
101
+ center: "mfyikv15",
102
+ stretch: "mfyikv16",
103
+ baseline: "mfyikv17"
109
104
  }, t = {
110
- start: "mfyikv1a",
111
- end: "mfyikv1b",
112
- center: "mfyikv1c",
113
- stretch: "mfyikv1d",
114
- "space-between": "mfyikv1e",
115
- "space-around": "mfyikv1f",
116
- "space-evenly": "mfyikv1g"
105
+ column: "mfyikvv",
106
+ row: "mfyikvw",
107
+ "row dense": "mfyikvx",
108
+ "column dense": "mfyikvy"
109
+ }, a = {
110
+ start: "mfyikv18",
111
+ end: "mfyikv19",
112
+ center: "mfyikv1a",
113
+ stretch: "mfyikv1b",
114
+ "space-between": "mfyikv1c",
115
+ "space-around": "mfyikv1d",
116
+ "space-evenly": "mfyikv1e"
117
117
  }, n = {
118
- start: "mfyikv11",
119
- end: "mfyikv12",
120
- center: "mfyikv13",
121
- stretch: "mfyikv14"
118
+ start: "mfyikvz",
119
+ end: "mfyikv10",
120
+ center: "mfyikv11",
121
+ stretch: "mfyikv12"
122
122
  }, s = {
123
- 1: "mfyikv9",
124
- 2: "mfyikva",
125
- 3: "mfyikvb",
126
- 4: "mfyikvc",
127
- 5: "mfyikvd",
128
- 6: "mfyikve",
129
- 7: "mfyikvf",
130
- 8: "mfyikvg",
131
- 9: "mfyikvh",
132
- 10: "mfyikvi",
133
- 11: "mfyikvj",
134
- 12: "mfyikvk"
135
- }, o = "mfyikv7", l = {
136
- 1: "mfyikvl",
137
- 2: "mfyikvm",
138
- 3: "mfyikvn",
139
- 4: "mfyikvo",
140
- 5: "mfyikvp",
141
- 6: "mfyikvq",
142
- 7: "mfyikvr",
143
- 8: "mfyikvs",
144
- 9: "mfyikvt",
145
- 10: "mfyikvu",
146
- 11: "mfyikvv",
147
- 12: "mfyikvw"
148
- }, c = "mfyikv8", d = {
149
- start: "mfyikv32",
150
- end: "mfyikv33",
151
- center: "mfyikv34",
152
- stretch: "mfyikv35"
123
+ 1: "mfyikv7",
124
+ 2: "mfyikv8",
125
+ 3: "mfyikv9",
126
+ 4: "mfyikva",
127
+ 5: "mfyikvb",
128
+ 6: "mfyikvc",
129
+ 7: "mfyikvd",
130
+ 8: "mfyikve",
131
+ 9: "mfyikvf",
132
+ 10: "mfyikvg",
133
+ 11: "mfyikvh",
134
+ 12: "mfyikvi"
135
+ }, o = "mfyikv5", l = {
136
+ 1: "mfyikvj",
137
+ 2: "mfyikvk",
138
+ 3: "mfyikvl",
139
+ 4: "mfyikvm",
140
+ 5: "mfyikvn",
141
+ 6: "mfyikvo",
142
+ 7: "mfyikvp",
143
+ 8: "mfyikvq",
144
+ 9: "mfyikvr",
145
+ 10: "mfyikvs",
146
+ 11: "mfyikvt",
147
+ 12: "mfyikvu"
148
+ }, c = "mfyikv6", d = {
149
+ start: "mfyikv30",
150
+ end: "mfyikv31",
151
+ center: "mfyikv32",
152
+ stretch: "mfyikv33"
153
153
  }, u = {
154
- 1: "mfyikv2q",
155
- 2: "mfyikv2r",
156
- 3: "mfyikv2s",
157
- 4: "mfyikv2t",
158
- 5: "mfyikv2u",
159
- 6: "mfyikv2v",
160
- 7: "mfyikv2w",
161
- 8: "mfyikv2x",
162
- 9: "mfyikv2y",
163
- 10: "mfyikv2z",
164
- 11: "mfyikv30",
165
- 12: "mfyikv31"
154
+ 1: "mfyikv2o",
155
+ 2: "mfyikv2p",
156
+ 3: "mfyikv2q",
157
+ 4: "mfyikv2r",
158
+ 5: "mfyikv2s",
159
+ 6: "mfyikv2t",
160
+ 7: "mfyikv2u",
161
+ 8: "mfyikv2v",
162
+ 9: "mfyikv2w",
163
+ 10: "mfyikv2x",
164
+ 11: "mfyikv2y",
165
+ 12: "mfyikv2z"
166
166
  }, p = {
167
- 1: "mfyikv1q",
168
- 2: "mfyikv1r",
169
- 3: "mfyikv1s",
170
- 4: "mfyikv1t",
171
- 5: "mfyikv1u",
172
- 6: "mfyikv1v",
173
- 7: "mfyikv1w",
174
- 8: "mfyikv1x",
175
- 9: "mfyikv1y",
176
- 10: "mfyikv1z",
177
- 11: "mfyikv20",
178
- 12: "mfyikv21"
167
+ 1: "mfyikv1o",
168
+ 2: "mfyikv1p",
169
+ 3: "mfyikv1q",
170
+ 4: "mfyikv1r",
171
+ 5: "mfyikv1s",
172
+ 6: "mfyikv1t",
173
+ 7: "mfyikv1u",
174
+ 8: "mfyikv1v",
175
+ 9: "mfyikv1w",
176
+ 10: "mfyikv1x",
177
+ 11: "mfyikv1y",
178
+ 12: "mfyikv1z"
179
179
  }, g = {
180
- 1: "mfyikv22",
181
- 2: "mfyikv23",
182
- 3: "mfyikv24",
183
- 4: "mfyikv25",
184
- 5: "mfyikv26",
185
- 6: "mfyikv27",
186
- 7: "mfyikv28",
187
- 8: "mfyikv29",
188
- 9: "mfyikv2a",
189
- 10: "mfyikv2b",
190
- 11: "mfyikv2c",
191
- 12: "mfyikv2d"
180
+ 1: "mfyikv20",
181
+ 2: "mfyikv21",
182
+ 3: "mfyikv22",
183
+ 4: "mfyikv23",
184
+ 5: "mfyikv24",
185
+ 6: "mfyikv25",
186
+ 7: "mfyikv26",
187
+ 8: "mfyikv27",
188
+ 9: "mfyikv28",
189
+ 10: "mfyikv29",
190
+ 11: "mfyikv2a",
191
+ 12: "mfyikv2b"
192
192
  }, w = {
193
- rowGap: "var(--mfyikv0)",
194
- columnGap: "var(--mfyikv1)",
195
- rowMinSize: "var(--mfyikv2)",
196
- rowMaxSize: "var(--mfyikv3)",
197
- columnMinSize: "var(--mfyikv4)",
198
- columnMaxSize: "var(--mfyikv5)"
193
+ rowMinSize: "var(--mfyikv0)",
194
+ rowMaxSize: "var(--mfyikv1)",
195
+ columnMinSize: "var(--mfyikv2)",
196
+ columnMaxSize: "var(--mfyikv3)"
199
197
  };
@@ -1,6 +1,4 @@
1
1
  export declare const vars: {
2
- rowGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3
- columnGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4
2
  rowMinSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
5
3
  rowMaxSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6
4
  columnMinSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
package/dist/grid.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import type { DataAttributes } from './utils/types';
2
+ import type { ByBreakpoint, DataAttributes } from './utils/types';
3
3
  type RowsColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
4
4
  type Gap = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80;
5
5
  type AutoFillConfig = {
@@ -12,7 +12,7 @@ type AutoFillConfig = {
12
12
  type GridProps = {
13
13
  rows?: RowsColumns | AutoFillConfig;
14
14
  columns?: RowsColumns | AutoFillConfig;
15
- gap?: Gap | [Gap, Gap];
15
+ gap?: ByBreakpoint<Gap> | [ByBreakpoint<Gap>, ByBreakpoint<Gap>];
16
16
  flow?: 'column' | 'row' | 'column dense' | 'row dense';
17
17
  justifyItems?: 'start' | 'end' | 'center' | 'stretch';
18
18
  alignItems?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
package/dist/grid.js CHANGED
@@ -10,10 +10,10 @@ function _export(target, all) {
10
10
  }
11
11
  _export(exports, {
12
12
  Grid: function() {
13
- return Q;
13
+ return Y;
14
14
  },
15
15
  GridItem: function() {
16
- return U;
16
+ return Z;
17
17
  }
18
18
  });
19
19
  const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
@@ -21,6 +21,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
21
21
  const _gridcssmistica = require("./grid.css-mistica.js");
22
22
  const _css = require("./utils/css.js");
23
23
  const _dom = require("./utils/dom.js");
24
+ const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
24
25
  function _interop_require_default(obj) {
25
26
  return obj && obj.__esModule ? obj : {
26
27
  default: obj
@@ -95,30 +96,44 @@ function _object_spread(target) {
95
96
  }
96
97
  return target;
97
98
  }
98
- const B = (t, e)=>{
99
- const r = {}, m = (i)=>typeof i == "number" ? `min(${i}px, 100%)` : i, f = (i)=>typeof i == "number" ? `${i}px` : i;
100
- return t && typeof t != "number" && (typeof t.minSize < "u" && (r[_gridcssmistica.vars.rowMinSize] = m(t.minSize)), typeof t.maxSize < "u" && (r[_gridcssmistica.vars.rowMaxSize] = f(t.maxSize))), e && typeof e != "number" && (typeof e.minSize < "u" && (r[_gridcssmistica.vars.columnMinSize] = m(e.minSize)), typeof e.maxSize < "u" && (r[_gridcssmistica.vars.columnMaxSize] = f(e.maxSize))), r;
101
- }, Q = /*#__PURE__*/ _react.forwardRef((param, g)=>{
102
- let { rows: t, columns: e, gap: r = 0, flow: m, justifyItems: f, alignItems: i, justifyContent: o, alignContent: n, height: u, minHeight: l, children: p, as: A = "div", dataAttributes: R } = param;
103
- const [y, x] = Array.isArray(r) ? r : [
104
- r,
105
- r
106
- ];
107
- return /*#__PURE__*/ _react.createElement(A, _object_spread({
108
- ref: g,
109
- className: (0, _classnames.default)(_gridcssmistica.grid, e ? typeof e == "number" ? _gridcssmistica.gridTemplateColumns[e] : _gridcssmistica.gridTemplateColumnsAutoRepeat : "", t ? typeof t == "number" ? _gridcssmistica.gridTemplateRows[t] : _gridcssmistica.gridTemplateRowsAutoRepeat : "", m ? _gridcssmistica.gridAutoFlow[m] : "", f ? _gridcssmistica.gridJustifyItems[f] : "", i ? _gridcssmistica.gridAlignItems[i] : "", o ? _gridcssmistica.gridJustifyContent[o] : "", n ? _gridcssmistica.gridAlignContent[n] : ""),
99
+ const K = (t, e)=>{
100
+ const i = {}, f = (r)=>typeof r == "number" ? `min(${r}px, 100%)` : r, o = (r)=>typeof r == "number" ? `${r}px` : r;
101
+ return t && typeof t != "number" && (typeof t.minSize < "u" && (i[_gridcssmistica.vars.rowMinSize] = f(t.minSize)), typeof t.maxSize < "u" && (i[_gridcssmistica.vars.rowMaxSize] = o(t.maxSize))), e && typeof e != "number" && (typeof e.minSize < "u" && (i[_gridcssmistica.vars.columnMinSize] = f(e.minSize)), typeof e.maxSize < "u" && (i[_gridcssmistica.vars.columnMaxSize] = o(e.maxSize))), i;
102
+ }, Y = /*#__PURE__*/ _react.forwardRef((param, x)=>{
103
+ let { rows: t, columns: e, gap: i = 0, flow: f, justifyItems: o, alignItems: r, justifyContent: l, alignContent: n, height: u, minHeight: y, children: s, as: z = "div", dataAttributes: S } = param;
104
+ const [m, a] = Array.isArray(i) ? i : [
105
+ i,
106
+ i
107
+ ], A = {
108
+ columnGap: m,
109
+ rowGap: a,
110
+ gridColumnGap: m,
111
+ gridRowGap: a
112
+ };
113
+ let b = {}, g = "";
114
+ try {
115
+ g = (0, _sprinklescssmistica.sprinkles)(A);
116
+ } catch (e) {
117
+ b = {
118
+ columnGap: typeof m == "object" ? m.mobile : m,
119
+ rowGap: typeof a == "object" ? a.mobile : a,
120
+ // Chrome 57-65 support
121
+ gridColumnGap: typeof m == "object" ? m.mobile : m,
122
+ gridRowGap: typeof a == "object" ? a.mobile : a
123
+ };
124
+ }
125
+ return /*#__PURE__*/ _react.createElement(z, _object_spread({
126
+ ref: x,
127
+ className: (0, _classnames.default)(_gridcssmistica.grid, g, e ? typeof e == "number" ? _gridcssmistica.gridTemplateColumns[e] : _gridcssmistica.gridTemplateColumnsAutoRepeat : "", t ? typeof t == "number" ? _gridcssmistica.gridTemplateRows[t] : _gridcssmistica.gridTemplateRowsAutoRepeat : "", f ? _gridcssmistica.gridAutoFlow[f] : "", o ? _gridcssmistica.gridJustifyItems[o] : "", r ? _gridcssmistica.gridAlignItems[r] : "", l ? _gridcssmistica.gridJustifyContent[l] : "", n ? _gridcssmistica.gridAlignContent[n] : ""),
110
128
  style: _object_spread({
111
129
  height: u,
112
- minHeight: l
113
- }, (0, _css.applyCssVars)(_object_spread({
114
- [_gridcssmistica.vars.columnGap]: y ? `${y}px` : "",
115
- [_gridcssmistica.vars.rowGap]: x ? `${x}px` : ""
116
- }, B(t, e))))
117
- }, (0, _dom.getPrefixedDataAttributes)(R)), p);
118
- }), U = /*#__PURE__*/ _react.forwardRef((param, p)=>{
119
- let { rowStart: t, rowSpan: e, columnStart: r, columnSpan: m, span: f, justifySelf: i, alignSelf: o, children: n, as: u = "div", dataAttributes: l } = param;
120
- return f && (Array.isArray(f) ? (m = f[0], e = f[1]) : (m = f, e = f)), /*#__PURE__*/ _react.createElement(u, _object_spread({
121
- ref: p,
122
- className: (0, _classnames.default)(m ? m === "full" ? _gridcssmistica.fullColumns : _gridcssmistica.spanColumns[m] : "", e ? e === "full" ? _gridcssmistica.fullRows : _gridcssmistica.spanRows[e] : "", r ? _gridcssmistica.columnStart[r] : "", t ? _gridcssmistica.rowStart[t] : "", i ? _gridcssmistica.justifySelf[i] : "", o ? _gridcssmistica.alignSelf[o] : "")
123
- }, (0, _dom.getPrefixedDataAttributes)(l)), n);
130
+ minHeight: y
131
+ }, g ? {} : b, (0, _css.applyCssVars)(_object_spread({}, K(t, e))))
132
+ }, (0, _dom.getPrefixedDataAttributes)(S)), s);
133
+ }), Z = /*#__PURE__*/ _react.forwardRef((param, s)=>{
134
+ let { rowStart: t, rowSpan: e, columnStart: i, columnSpan: f, span: o, justifySelf: r, alignSelf: l, children: n, as: u = "div", dataAttributes: y } = param;
135
+ return o && (Array.isArray(o) ? (f = o[0], e = o[1]) : (f = o, e = o)), /*#__PURE__*/ _react.createElement(u, _object_spread({
136
+ ref: s,
137
+ className: (0, _classnames.default)(f ? f === "full" ? _gridcssmistica.fullColumns : _gridcssmistica.spanColumns[f] : "", e ? e === "full" ? _gridcssmistica.fullRows : _gridcssmistica.spanRows[e] : "", i ? _gridcssmistica.columnStart[i] : "", t ? _gridcssmistica.rowStart[t] : "", r ? _gridcssmistica.justifySelf[r] : "", l ? _gridcssmistica.alignSelf[l] : "")
138
+ }, (0, _dom.getPrefixedDataAttributes)(y)), n);
124
139
  });
@@ -21,4 +21,4 @@ _export(exports, {
21
21
  });
22
22
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
23
23
  require("./header.css.ts.vanilla.css-mistica.js");
24
- var t = "mtk7e90 _1y2v1nf82", m = "mtk7e93", a = "mtk7e90";
24
+ var t = "mtk7e90 _1y2v1nf88", m = "mtk7e93", a = "mtk7e90";
@@ -13,16 +13,16 @@ _export(exports, {
13
13
  return t;
14
14
  },
15
15
  container: function() {
16
- return v;
16
+ return n;
17
17
  },
18
18
  containerDesktop: function() {
19
- return n;
19
+ return a;
20
20
  },
21
21
  containerMobile: function() {
22
- return b;
22
+ return _;
23
23
  },
24
24
  layout: function() {
25
- return _;
25
+ return i;
26
26
  },
27
27
  vars: function() {
28
28
  return p;
@@ -31,6 +31,6 @@ _export(exports, {
31
31
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
32
32
  require("./responsive-layout.css.ts.vanilla.css-mistica.js");
33
33
  require("./hero.css.ts.vanilla.css-mistica.js");
34
- var t = "_16rbpto6 _1y2v1nfba _1y2v1nfbw _1y2v1nfbq", v = "_16rbpto2 _1y2v1nfba", n = "_1y2v1nfbp _1y2v1nfce", b = "_1y2v1nfbg", _ = "_16rbpto7", p = {
34
+ var t = "_16rbpto6 _1y2v1nfgg _1y2v1nfh2 _1y2v1nfgw", n = "_16rbpto2 _1y2v1nfgg", a = "_1y2v1nfgv _1y2v1nfhk", _ = "_1y2v1nfgm", i = "_16rbpto7", p = {
35
35
  height: "var(--_16rbpto0)"
36
36
  };
@@ -10,21 +10,21 @@ function _export(target, all) {
10
10
  }
11
11
  _export(exports, {
12
12
  container: function() {
13
- return f;
13
+ return y;
14
14
  },
15
15
  imageContent: function() {
16
- return y;
16
+ return f;
17
17
  },
18
18
  textContainerVariant: function() {
19
19
  return _;
20
20
  },
21
21
  touchableContainer: function() {
22
- return b;
22
+ return g;
23
23
  }
24
24
  });
25
25
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
26
26
  require("./highlighted-card.css.ts.vanilla.css-mistica.js");
27
- var f = "wrb8722 _1y2v1nfba _1y2v1nfbf _1y2v1nfbm _1y2v1nfbs", y = "wrb8725 _1y2v1nfba", _ = {
28
- withImage: "wrb8728 wrb8727 _1y2v1nfba _1y2v1nfbg _1y2v1nfbo _1y2v1nf6o _1y2v1nf7x _1y2v1nf90",
29
- withoutImage: "wrb8729 wrb8727 _1y2v1nfba _1y2v1nfbg _1y2v1nfbo _1y2v1nf6o _1y2v1nf7x _1y2v1nf90"
30
- }, b = "_1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfba _1y2v1nfbs _1y2v1nfds _1y2v1nfbx _1y2v1nf62";
27
+ var y = "wrb8722 _1y2v1nfgg _1y2v1nfgl _1y2v1nfgs _1y2v1nfgy", f = "wrb8725 _1y2v1nfgg", _ = {
28
+ withImage: "wrb8728 wrb8727 _1y2v1nfgg _1y2v1nfgm _1y2v1nfgu _1y2v1nf6u _1y2v1nf83 _1y2v1nf96",
29
+ withoutImage: "wrb8729 wrb8727 _1y2v1nfgg _1y2v1nfgm _1y2v1nfgu _1y2v1nf6u _1y2v1nf83 _1y2v1nf96"
30
+ }, g = "_1y2v1nf69 _1y2v1nf7i _1y2v1nf8r _1y2v1nfa0 _1y2v1nfgg _1y2v1nfgy _1y2v1nfiy _1y2v1nfh3 _1y2v1nf68";
@@ -10,13 +10,13 @@ function _export(target, all) {
10
10
  }
11
11
  _export(exports, {
12
12
  noScrollbar: function() {
13
- return m;
13
+ return l;
14
14
  },
15
15
  scroll: function() {
16
- return v;
16
+ return m;
17
17
  }
18
18
  });
19
19
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
20
20
  require("./responsive-layout.css.ts.vanilla.css-mistica.js");
21
21
  require("./horizontal-scroll.css.ts.vanilla.css-mistica.js");
22
- var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfba";
22
+ var l = "_1gl3gmv2", m = "_1gl3gmv1 _1y2v1nfgg";
@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
5
5
  Object.defineProperty(exports, "base", {
6
6
  enumerable: true,
7
7
  get: function() {
8
- return r;
8
+ return t;
9
9
  }
10
10
  });
11
11
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
12
12
  require("./icon-button.css.ts.vanilla.css-mistica.js");
13
- var r = "yqt1oe1 _1y2v1nfbe";
13
+ var t = "yqt1oe1 _1y2v1nfgk";
@@ -13,14 +13,14 @@ _export(exports, {
13
13
  return r;
14
14
  },
15
15
  image: function() {
16
- return f;
16
+ return n;
17
17
  },
18
18
  vars: function() {
19
- return n;
19
+ return f;
20
20
  }
21
21
  });
22
22
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
23
23
  require("./image.css.ts.vanilla.css-mistica.js");
24
- var r = 300, f = "_17tt25r2 _1y2v1nfeh _1y2v1nfew _1y2v1nfbc _1y2v1nfbx _1y2v1nfce _1y2v1nfg5 _1y2v1nfdp _1y2v1nfdq _1y2v1nfe1", n = {
24
+ var r = 300, n = "_17tt25r2 _1y2v1nfjn _1y2v1nfk2 _1y2v1nfgi _1y2v1nfh3 _1y2v1nfhk _1y2v1nflb _1y2v1nfiv _1y2v1nfiw _1y2v1nfj7", f = {
25
25
  mediaBorderRadius: "var(--_17tt25r0)"
26
26
  };
package/dist/image.d.ts CHANGED
@@ -7,7 +7,7 @@ type ImageErrorProps = {
7
7
  border?: boolean;
8
8
  };
9
9
  export declare const ImageError: React.ForwardRefExoticComponent<ImageErrorProps & React.RefAttributes<HTMLDivElement>>;
10
- export type AspectRatio = '1:1' | '16:9' | '7:10' | '4:3';
10
+ export type AspectRatio = '1:1' | '16:9' | '7:10' | '4:3' | undefined;
11
11
  export declare const RATIO: {
12
12
  '1:1': number;
13
13
  '16:9': number;