@nimbus-ds/components 5.57.2-rc.8 → 5.57.3-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/Box/index.d.ts +19 -4
  3. package/dist/CHANGELOG.md +6 -0
  4. package/dist/Card/index.d.ts +4 -4
  5. package/dist/ScrollPane/index.d.ts +19 -4
  6. package/dist/SegmentedControl/index.d.ts +19 -4
  7. package/dist/Sidebar/index.d.ts +4 -4
  8. package/dist/Spinner/index.d.ts +2 -1
  9. package/dist/SplitButton/index.d.ts +19 -4
  10. package/dist/Stepper/index.d.ts +19 -4
  11. package/dist/Text/index.d.ts +5 -5
  12. package/dist/Toast/index.js +1 -1
  13. package/dist/Toggle/index.js +1 -1
  14. package/dist/index.d.ts +37 -21
  15. package/dist/index.js +1 -1
  16. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  Nimbus is an open-source Design System created by Tiendanube / Nuvemshop's team to empower and enhance more stories
4
4
  every day, with simplicity, accessibility, consistency and performance.
5
5
 
6
+ ## 2026-04-07 `5.57.2`
7
+
8
+ #### 🎉 New features
9
+
10
+ - Storybook: Added **Tokens / Motion** overview with duration and easing tables, interactive previews, legacy `speed.*` reference, and reduced-motion snippet. ([#455](https://github.com/TiendaNube/nimbus-design-system/pull/455) by [@noecondoleo](https://github.com/noecondoleo))
11
+
6
12
  ## 2026-03-04 `5.56.0`
7
13
 
8
14
  #### 🎉 New features
package/dist/Box/index.d.ts CHANGED
@@ -58,6 +58,9 @@ declare const propertiesBox: {
58
58
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
59
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
60
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
+ /**
62
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
63
+ */
61
64
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
65
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
66
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -82,6 +85,9 @@ declare const propertiesBox: {
82
85
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
83
86
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
84
87
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
88
+ /**
89
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
90
+ */
85
91
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
86
92
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
87
93
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -198,10 +204,7 @@ declare const propertiesBox: {
198
204
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
199
205
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
206
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
201
- "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
202
- * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
203
- * In Flexbox, it aligns the item on the cross axis.
204
- */
207
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
205
208
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
206
209
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
207
210
  full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -227,6 +230,9 @@ declare const propertiesBox: {
227
230
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
228
231
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
229
232
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
233
+ /**
234
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
235
+ */
230
236
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
237
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
238
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -250,6 +256,9 @@ declare const propertiesBox: {
250
256
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
251
257
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
252
258
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
259
+ /**
260
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
261
+ */
253
262
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
254
263
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
255
264
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -314,6 +323,9 @@ declare const propertiesBox: {
314
323
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
315
324
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
316
325
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
326
+ /**
327
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
328
+ */
317
329
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
330
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
319
331
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -343,6 +355,9 @@ declare const propertiesBox: {
343
355
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
344
356
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
345
357
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
358
+ /**
359
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
360
+ */
346
361
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
347
362
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
348
363
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
package/dist/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  Nimbus is an open-source Design System created by Tiendanube / Nuvemshop's team to empower and enhance more stories
4
4
  every day, with simplicity, accessibility, consistency and performance.
5
5
 
6
+ ## 2026-04-07 `5.57.2`
7
+
8
+ #### 🎉 New features
9
+
10
+ - Storybook: Added **Tokens / Motion** overview with duration and easing tables, interactive previews, legacy `speed.*` reference, and reduced-motion snippet. ([#455](https://github.com/TiendaNube/nimbus-design-system/pull/455) by [@noecondoleo](https://github.com/noecondoleo))
11
+
6
12
  ## 2026-03-04 `5.56.0`
7
13
 
8
14
  #### 🎉 New features
package/dist/Card/index.d.ts CHANGED
@@ -11,7 +11,7 @@ declare const card: {
11
11
  subComponents: {
12
12
  header: {
13
13
  sprinkle: ((props: {
14
- padding?: "base" | "small" | "none" | undefined;
14
+ padding?: "base" | "none" | "small" | undefined;
15
15
  }) => string) & {
16
16
  properties: Set<"padding">;
17
17
  };
@@ -25,7 +25,7 @@ declare const card: {
25
25
  };
26
26
  body: {
27
27
  sprinkle: ((props: {
28
- padding?: "base" | "small" | "none" | undefined;
28
+ padding?: "base" | "none" | "small" | undefined;
29
29
  }) => string) & {
30
30
  properties: Set<"padding">;
31
31
  };
@@ -39,7 +39,7 @@ declare const card: {
39
39
  };
40
40
  footer: {
41
41
  sprinkle: ((props: {
42
- padding?: "base" | "small" | "none" | undefined;
42
+ padding?: "base" | "none" | "small" | undefined;
43
43
  }) => string) & {
44
44
  properties: Set<"padding">;
45
45
  };
@@ -54,7 +54,7 @@ declare const card: {
54
54
  };
55
55
  sprinkle: ((props: {
56
56
  backgroundColor?: "primary-surface" | "primary-surfaceHighlight" | "success-surface" | "success-surfaceHighlight" | "warning-surface" | "warning-surfaceHighlight" | "danger-surface" | "danger-surfaceHighlight" | "neutral-background" | "neutral-surface" | "neutral-surfaceHighlight" | undefined;
57
- padding?: "base" | "small" | "none" | undefined;
57
+ padding?: "base" | "none" | "small" | undefined;
58
58
  }) => string) & {
59
59
  properties: Set<"backgroundColor" | "padding">;
60
60
  };
package/dist/ScrollPane/index.d.ts CHANGED
@@ -58,6 +58,9 @@ declare const propertiesBox: {
58
58
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
59
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
60
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
+ /**
62
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
63
+ */
61
64
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
65
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
66
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -82,6 +85,9 @@ declare const propertiesBox: {
82
85
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
83
86
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
84
87
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
88
+ /**
89
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
90
+ */
85
91
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
86
92
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
87
93
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -198,10 +204,7 @@ declare const propertiesBox: {
198
204
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
199
205
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
206
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
201
- "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
202
- * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
203
- * In Flexbox, it aligns the item on the cross axis.
204
- */
207
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
205
208
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
206
209
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
207
210
  full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -227,6 +230,9 @@ declare const propertiesBox: {
227
230
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
228
231
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
229
232
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
233
+ /**
234
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
235
+ */
230
236
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
237
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
238
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -250,6 +256,9 @@ declare const propertiesBox: {
250
256
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
251
257
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
252
258
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
259
+ /**
260
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
261
+ */
253
262
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
254
263
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
255
264
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -314,6 +323,9 @@ declare const propertiesBox: {
314
323
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
315
324
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
316
325
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
326
+ /**
327
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
328
+ */
317
329
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
330
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
319
331
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -343,6 +355,9 @@ declare const propertiesBox: {
343
355
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
344
356
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
345
357
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
358
+ /**
359
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
360
+ */
346
361
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
347
362
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
348
363
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
package/dist/SegmentedControl/index.d.ts CHANGED
@@ -58,6 +58,9 @@ declare const propertiesBox: {
58
58
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
59
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
60
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
+ /**
62
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
63
+ */
61
64
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
65
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
66
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -82,6 +85,9 @@ declare const propertiesBox: {
82
85
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
83
86
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
84
87
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
88
+ /**
89
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
90
+ */
85
91
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
86
92
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
87
93
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -198,10 +204,7 @@ declare const propertiesBox: {
198
204
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
199
205
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
206
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
201
- "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
202
- * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
203
- * In Flexbox, it aligns the item on the cross axis.
204
- */
207
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
205
208
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
206
209
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
207
210
  full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -227,6 +230,9 @@ declare const propertiesBox: {
227
230
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
228
231
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
229
232
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
233
+ /**
234
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
235
+ */
230
236
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
237
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
238
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -250,6 +256,9 @@ declare const propertiesBox: {
250
256
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
251
257
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
252
258
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
259
+ /**
260
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
261
+ */
253
262
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
254
263
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
255
264
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -314,6 +323,9 @@ declare const propertiesBox: {
314
323
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
315
324
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
316
325
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
326
+ /**
327
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
328
+ */
317
329
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
330
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
319
331
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -343,6 +355,9 @@ declare const propertiesBox: {
343
355
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
344
356
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
345
357
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
358
+ /**
359
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
360
+ */
346
361
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
347
362
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
348
363
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
package/dist/Sidebar/index.d.ts CHANGED
@@ -72,11 +72,11 @@ declare const sidebarSprinkle: {
72
72
  default: string;
73
73
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
74
74
  };
75
- small: {
75
+ none: {
76
76
  default: string;
77
77
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
78
78
  };
79
- none: {
79
+ small: {
80
80
  default: string;
81
81
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
82
82
  };
@@ -211,11 +211,11 @@ declare const sidebar: {
211
211
  default: string;
212
212
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
213
213
  };
214
- small: {
214
+ none: {
215
215
  default: string;
216
216
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
217
217
  };
218
- none: {
218
+ small: {
219
219
  default: string;
220
220
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
221
221
  };
package/dist/Spinner/index.d.ts CHANGED
@@ -5,7 +5,7 @@ import { SVGAttributes } from 'react';
5
5
 
6
6
  declare const spinner: {
7
7
  sprinkle: ((props: {
8
- color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | undefined;
8
+ color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "neutral-textHigh" | "success-interactive" | undefined;
9
9
  }) => string) & {
10
10
  properties: Set<"color">;
11
11
  };
@@ -25,6 +25,7 @@ declare const spinner: {
25
25
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
26
26
  "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
27
27
  "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
+ "neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
29
  };
29
30
  };
30
31
  classnames: {
package/dist/SplitButton/index.d.ts CHANGED
@@ -58,6 +58,9 @@ declare const propertiesBox: {
58
58
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
59
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
60
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
+ /**
62
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
63
+ */
61
64
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
65
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
66
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -82,6 +85,9 @@ declare const propertiesBox: {
82
85
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
83
86
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
84
87
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
88
+ /**
89
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
90
+ */
85
91
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
86
92
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
87
93
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -198,10 +204,7 @@ declare const propertiesBox: {
198
204
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
199
205
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
206
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
201
- "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
202
- * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
203
- * In Flexbox, it aligns the item on the cross axis.
204
- */
207
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
205
208
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
206
209
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
207
210
  full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -227,6 +230,9 @@ declare const propertiesBox: {
227
230
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
228
231
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
229
232
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
233
+ /**
234
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
235
+ */
230
236
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
237
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
238
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -250,6 +256,9 @@ declare const propertiesBox: {
250
256
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
251
257
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
252
258
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
259
+ /**
260
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
261
+ */
253
262
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
254
263
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
255
264
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -314,6 +323,9 @@ declare const propertiesBox: {
314
323
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
315
324
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
316
325
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
326
+ /**
327
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
328
+ */
317
329
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
330
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
319
331
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -343,6 +355,9 @@ declare const propertiesBox: {
343
355
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
344
356
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
345
357
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
358
+ /**
359
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
360
+ */
346
361
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
347
362
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
348
363
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
package/dist/Stepper/index.d.ts CHANGED
@@ -58,6 +58,9 @@ declare const propertiesBox: {
58
58
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
59
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
60
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
+ /**
62
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
63
+ */
61
64
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
65
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
66
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -82,6 +85,9 @@ declare const propertiesBox: {
82
85
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
83
86
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
84
87
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
88
+ /**
89
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
90
+ */
85
91
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
86
92
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
87
93
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -198,10 +204,7 @@ declare const propertiesBox: {
198
204
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
199
205
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
206
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
201
- "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
202
- * The alignSelf property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
203
- * In Flexbox, it aligns the item on the cross axis.
204
- */
207
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
205
208
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
206
209
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
207
210
  full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -227,6 +230,9 @@ declare const propertiesBox: {
227
230
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
228
231
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
229
232
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
233
+ /**
234
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
235
+ */
230
236
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
237
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
238
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -250,6 +256,9 @@ declare const propertiesBox: {
250
256
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
251
257
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
252
258
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
259
+ /**
260
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
261
+ */
253
262
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
254
263
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
255
264
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -314,6 +323,9 @@ declare const propertiesBox: {
314
323
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
315
324
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
316
325
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
326
+ /**
327
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
328
+ */
317
329
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
318
330
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
319
331
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -343,6 +355,9 @@ declare const propertiesBox: {
343
355
  "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
344
356
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
345
357
  "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
358
+ /**
359
+ * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
360
+ */
346
361
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
347
362
  "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
348
363
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
package/dist/Text/index.d.ts CHANGED
@@ -276,15 +276,15 @@ declare const text: {
276
276
  };
277
277
  textAlign: {
278
278
  values: {
279
- center: {
279
+ left: {
280
280
  default: string;
281
281
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
282
282
  };
283
- left: {
283
+ right: {
284
284
  default: string;
285
285
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
286
286
  };
287
- right: {
287
+ center: {
288
288
  default: string;
289
289
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
290
290
  };
@@ -418,11 +418,11 @@ declare const text: {
418
418
  };
419
419
  whiteSpace: {
420
420
  values: {
421
- pre: {
421
+ normal: {
422
422
  default: string;
423
423
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
424
424
  };
425
- normal: {
425
+ pre: {
426
426
  default: string;
427
427
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
428
428
  };