@nimbus-ds/components 4.4.0-rc.1 → 5.0.0-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 (4) hide show
  1. package/CHANGELOG.md +3 -12
  2. package/dist/index.d.ts +313 -353
  3. package/dist/index.js +1 -1
  4. package/package.json +3 -3
package/dist/index.d.ts CHANGED
@@ -102,16 +102,22 @@ export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" |
102
102
  export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end";
103
103
  declare const propertiesBox: {
104
104
  gap: {
105
- none: string;
106
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
105
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
107
106
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
108
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
107
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
109
108
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
110
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
109
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
110
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
111
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
111
112
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
113
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
114
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
112
115
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
116
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
113
117
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
118
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
114
119
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
120
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
115
121
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
116
122
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
117
123
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -119,16 +125,22 @@ declare const propertiesBox: {
119
125
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
120
126
  };
121
127
  gridGap: {
122
- none: string;
123
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
128
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
124
129
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
125
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
130
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
126
131
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
127
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
132
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
133
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
134
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
128
135
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
136
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
137
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
129
138
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
139
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
130
140
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
141
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
131
142
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
143
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
132
144
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
133
145
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
134
146
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -140,10 +152,6 @@ declare const propertiesBox: {
140
152
  flexWrap: FlexWrap[];
141
153
  justifyContent: JustifyContent[];
142
154
  alignItems: AlignItems[];
143
- /**
144
- * The boxSizing property sets how the total width and height of an box is calculated.
145
- * @default border-box
146
- */
147
155
  alignSelf: AlignSelf[];
148
156
  pointerEvents: PointerEvents[];
149
157
  backgroundColor: {
@@ -158,15 +166,15 @@ declare const propertiesBox: {
158
166
  "warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
159
167
  "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
160
168
  "warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
161
- "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
162
- * The min width property specifies the width of a box's content area.
163
- */
169
+ "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
164
170
  "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
165
171
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
166
172
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
167
173
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
168
174
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
169
- "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
175
+ "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
176
+ * The bottom property participates in setting the vertical position of a positioned box.
177
+ */
170
178
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
171
179
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
172
180
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -186,15 +194,15 @@ declare const propertiesBox: {
186
194
  "warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
187
195
  "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
188
196
  "warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
- "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
190
- * The min width property specifies the width of a box's content area.
191
- */
197
+ "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
192
198
  "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
193
199
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
194
200
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
195
201
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
202
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
- "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
203
+ "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
204
+ * The bottom property participates in setting the vertical position of a positioned box.
205
+ */
198
206
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
199
207
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
208
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -219,19 +227,48 @@ declare const propertiesBox: {
219
227
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
220
228
  transparent: string;
221
229
  };
230
+ borderRadius: {
231
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
233
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
234
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
235
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
236
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
237
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
238
+ full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
239
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
240
+ half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
241
+ none: string;
242
+ };
243
+ borderWidth: {
244
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
245
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
246
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
247
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
248
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
249
+ none: string;
250
+ };
222
251
  borderStyle: BorderStyle[];
223
252
  boxSizing: BoxSizing[];
224
253
  cursor: Cursor[];
225
- space: {
254
+ spacing: {
226
255
  none: string;
227
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
256
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
228
257
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
258
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
229
259
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
230
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
260
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
261
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
262
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
263
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
264
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
265
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
266
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
267
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
233
268
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
269
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
234
270
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
271
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
235
272
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
236
273
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
237
274
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -239,15 +276,22 @@ declare const propertiesBox: {
239
276
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
240
277
  };
241
278
  margin: {
242
- none: string;
243
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
279
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
244
280
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
281
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
245
282
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
246
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
283
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
284
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
285
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
247
286
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
287
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
288
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
248
289
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
290
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
249
291
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
292
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
250
293
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
294
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
251
295
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
252
296
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
253
297
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -260,12 +304,12 @@ declare const propertiesBox: {
260
304
  overflowX: Overflow[];
261
305
  overflowY: Overflow[];
262
306
  boxShadow: {
263
- "level-0": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
264
- "level-1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
265
- "level-2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
266
- "level-3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
267
- "level-4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
268
- "level-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
307
+ "0": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
308
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
309
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
310
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
311
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
312
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
269
313
  focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
270
314
  };
271
315
  transitionDuration: {
@@ -276,16 +320,30 @@ declare const propertiesBox: {
276
320
  };
277
321
  transitionTimingFunction: TransitionTiming[];
278
322
  textDecoration: TextDecoration[];
323
+ zIndex: {
324
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
325
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
326
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
327
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
328
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
329
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
330
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
331
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
332
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
333
+ };
279
334
  };
280
335
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
336
+ export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
337
+ export type BoxBorderWidthProperties = keyof typeof propertiesBox.borderWidth;
281
338
  export type BoxBackgroundColorProperties = keyof typeof propertiesBox.backgroundColor;
282
339
  export type BoxColorProperties = keyof typeof propertiesBox.color;
283
340
  export type BoxShadowProperties = keyof typeof propertiesBox.boxShadow;
284
- export type BoxSpaceProperties = keyof typeof propertiesBox.space;
341
+ export type BoxSpacingProperties = keyof typeof propertiesBox.spacing;
285
342
  export type BoxMarginProperties = keyof typeof propertiesBox.margin;
286
343
  export type BoxGapProperties = keyof typeof propertiesBox.gap;
287
344
  export type BoxGridGapProperties = keyof typeof propertiesBox.gridGap;
288
- export type TransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
345
+ export type BoxZIndexProperties = keyof typeof propertiesBox.zIndex;
346
+ export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
289
347
  export interface BoxConditions<T> extends Conditions<T> {
290
348
  focus?: T;
291
349
  focusWithin?: T;
@@ -440,11 +498,19 @@ export interface BoxSprinkle {
440
498
  /**
441
499
  * The borderRadius property rounds the corners of an box's outer border edge.
442
500
  */
443
- borderRadius?: string | BoxConditions<string>;
501
+ borderRadius?: BoxBorderRadiusProperties | BoxConditions<BoxBorderRadiusProperties>;
444
502
  /**
445
503
  * The borderWidth property sets the width of an box's border.
446
504
  */
447
- borderWidth?: string | BoxConditions<string>;
505
+ borderWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
506
+ /**
507
+ * The borderWidthX shorthand property defines the width of the element's border on the left and right.
508
+ */
509
+ borderWidthX?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
510
+ /**
511
+ * The borderWidthY shorthand property defines the width of the element's border on the top and bottom.
512
+ */
513
+ borderWidthY?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
448
514
  /**
449
515
  * The borderColor property sets the color of the box's four borders.
450
516
  */
@@ -465,23 +531,23 @@ export interface BoxSprinkle {
465
531
  /**
466
532
  * The padding properties are used to generate space around an box's content area.
467
533
  */
468
- padding?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
534
+ padding?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
469
535
  /**
470
536
  * The paddingTop property sets the height of the padding area on the top of an box.
471
537
  */
472
- paddingTop?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
538
+ paddingTop?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
473
539
  /**
474
540
  * The paddingBottom property sets the height of the padding area on the bottom of an box.
475
541
  */
476
- paddingBottom?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
542
+ paddingBottom?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
477
543
  /**
478
544
  * The paddingLeft property sets the width of the padding area to the left of an box.
479
545
  */
480
- paddingLeft?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
546
+ paddingLeft?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
481
547
  /**
482
548
  * The paddingLeft property sets the width of the padding area to the right of an box.
483
549
  */
484
- paddingRight?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
550
+ paddingRight?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
485
551
  /**
486
552
  * The margin shorthand property sets the margin area on all four sides of an box.
487
553
  */
@@ -517,11 +583,11 @@ export interface BoxSprinkle {
517
583
  /**
518
584
  * The transitionDuration property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.
519
585
  */
520
- transitionDuration?: TransitionDurationProperties | BoxConditions<TransitionDurationProperties>;
586
+ transitionDuration?: BoxTransitionDurationProperties | BoxConditions<BoxTransitionDurationProperties>;
521
587
  /**
522
588
  * The zIndex property specifies the stack order of the box.
523
589
  */
524
- zIndex?: number | BoxConditions<number>;
590
+ zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
525
591
  /**
526
592
  * The backgroundImage property sets one or more background images on an element.
527
593
  */
@@ -551,39 +617,39 @@ export interface BoxSprinkle {
551
617
  /**
552
618
  * The p shorthand property sets the margin area on all four sides of an box.
553
619
  */
554
- p?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
620
+ p?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
555
621
  /**
556
622
  * The pl shorthand property sets the width of the padding area to the left of an box.
557
623
  */
558
- pl?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
624
+ pl?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
559
625
  /**
560
626
  * The pl shorthand property sets the width of the padding area to the right of an box.
561
627
  */
562
- pr?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
628
+ pr?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
563
629
  /**
564
630
  * The pt shorthand property sets the height of the padding area on the top of an box.
565
631
  */
566
- pt?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
632
+ pt?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
567
633
  /**
568
634
  * The pb shorthand property sets the height of the padding area on the botton of an box.
569
635
  */
570
- pb?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
636
+ pb?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
571
637
  /**
572
638
  * The px shorthand property defines the width of the left and right padding area of a box.
573
639
  */
574
- px?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
640
+ px?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
575
641
  /**
576
642
  * The py pt shorthand property sets the height of the padding area at the top and bottom of a box.
577
643
  */
578
- py?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
644
+ py?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
579
645
  /**
580
646
  * The paddingX shorthand property defines the width of the left and right padding area of a box.
581
647
  */
582
- paddingX?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
648
+ paddingX?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
583
649
  /**
584
650
  * The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.
585
651
  */
586
- paddingY?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
652
+ paddingY?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
587
653
  /**
588
654
  * The m shorthand property sets the margin area on all four sides of an box.
589
655
  */
@@ -649,7 +715,7 @@ declare const fileUploader: {
649
715
  };
650
716
  declare const icon: {
651
717
  sprinkle: ((props: {
652
- color?: "primary-surface" | "primary-interactive" | "primary-textLow" | "primary-textHigh" | "success-surface" | "success-interactive" | "success-textLow" | "success-textHigh" | "warning-surface" | "warning-interactive" | "warning-textLow" | "warning-textHigh" | "danger-surface" | "danger-interactive" | "danger-textLow" | "danger-textHigh" | "neutral-background" | "neutral-surface" | "neutral-interactive" | "neutral-textDisabled" | "neutral-textLow" | "neutral-textHigh" | "currentColor" | undefined;
718
+ color?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | undefined;
653
719
  cursor?: Cursor | undefined;
654
720
  }) => string) & {
655
721
  properties: Set<"color" | "cursor">;
@@ -733,7 +799,10 @@ declare const propertiesText: {
733
799
  "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
734
800
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
735
801
  "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
736
- "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
802
+ "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
803
+ * The color property is used to set the color of the text.
804
+ * @default neutral-textLow
805
+ */
737
806
  "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
738
807
  "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
739
808
  "success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -801,265 +870,42 @@ export interface TextSprinkle {
801
870
  * @default neutral-textLow
802
871
  */
803
872
  color?: TextColorProperties | TextConditions<TextColorProperties>;
804
- /**
805
- * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
806
- */
807
- lineClamp?: number | TextConditions<number>;
808
- /**
809
- * The amount of lines at which the text will be trimmed, showing an ellipsis when overflowed.
810
- */
811
- WebkitLineClamp?: number | TextConditions<number>;
812
873
  }
813
874
  declare const text: {
814
- sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
815
- {
816
- config: {
817
- color: {
818
- values: {
819
- "primary-surface": {
820
- default: string;
821
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
822
- };
823
- "primary-interactive": {
824
- default: string;
825
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
826
- };
827
- "primary-textLow": {
828
- default: string;
829
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
830
- };
831
- "primary-textHigh": {
832
- default: string;
833
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
834
- };
835
- "success-surface": {
836
- default: string;
837
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
838
- };
839
- "success-interactive": {
840
- default: string;
841
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
842
- };
843
- "success-textLow": {
844
- default: string;
845
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
846
- };
847
- "success-textHigh": {
848
- default: string;
849
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
850
- };
851
- "warning-surface": {
852
- default: string;
853
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
854
- };
855
- "warning-interactive": {
856
- default: string;
857
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
858
- };
859
- "warning-textLow": {
860
- default: string;
861
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
862
- };
863
- "warning-textHigh": {
864
- default: string;
865
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
866
- };
867
- "danger-surface": {
868
- default: string;
869
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
870
- };
871
- "danger-interactive": {
872
- default: string;
873
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
874
- };
875
- "danger-textLow": {
876
- default: string;
877
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
878
- };
879
- "danger-textHigh": {
880
- default: string;
881
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
882
- };
883
- "neutral-background": {
884
- default: string;
885
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
886
- };
887
- "neutral-surface": {
888
- default: string;
889
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
890
- };
891
- "neutral-interactive": {
892
- default: string;
893
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
894
- };
895
- "neutral-textDisabled": {
896
- default: string;
897
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
898
- };
899
- "neutral-textLow": {
900
- default: string;
901
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
902
- };
903
- "neutral-textHigh": {
904
- default: string;
905
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
906
- };
907
- currentColor: {
908
- default: string;
909
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
910
- };
911
- };
912
- staticScale: {
913
- currentColor: string;
914
- "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
915
- "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
916
- "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
917
- "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
918
- "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
919
- "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
920
- "success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
921
- "success-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
922
- "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
923
- "warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
924
- "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
925
- "warning-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
926
- "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
927
- "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
928
- "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
929
- "danger-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
930
- "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
931
- "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
932
- "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
933
- "neutral-textDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
934
- "neutral-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
935
- "neutral-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
936
- };
937
- name: "color";
938
- };
939
- textAlign: {
940
- values: {
941
- left: {
942
- default: string;
943
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
944
- };
945
- right: {
946
- default: string;
947
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
948
- };
949
- center: {
950
- default: string;
951
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
952
- };
953
- justify: {
954
- default: string;
955
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
956
- };
957
- };
958
- staticScale: TextAlign[];
959
- name: "textAlign";
960
- };
961
- lineHeight: {
962
- values: {
963
- caption: {
964
- default: string;
965
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
966
- };
967
- base: {
968
- default: string;
969
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
970
- };
971
- highlight: {
972
- default: string;
973
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
974
- };
975
- };
976
- staticScale: {
977
- readonly caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
978
- readonly base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
979
- readonly highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
980
- };
981
- name: "lineHeight";
982
- };
983
- fontWeight: {
984
- values: {
985
- regular: {
986
- default: string;
987
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
988
- };
989
- medium: {
990
- default: string;
991
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
992
- };
993
- bold: {
994
- default: string;
995
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
996
- };
997
- };
998
- staticScale: {
999
- regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1000
- medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1001
- bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1002
- };
1003
- name: "fontWeight";
1004
- };
1005
- fontSize: {
1006
- values: {
1007
- caption: {
1008
- default: string;
1009
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1010
- };
1011
- base: {
1012
- default: string;
1013
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1014
- };
1015
- highlight: {
1016
- default: string;
1017
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1018
- };
1019
- };
1020
- staticScale: {
1021
- caption: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1022
- base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1023
- highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1024
- };
1025
- name: "fontSize";
1026
- };
1027
- };
1028
- } & {
1029
- config: {
1030
- lineClamp: {
1031
- dynamic: {
1032
- default: string;
1033
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1034
- };
1035
- dynamicScale: true;
1036
- name: "lineClamp";
1037
- vars: {
1038
- default: string;
1039
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1040
- };
1041
- };
1042
- WebkitLineClamp: {
1043
- dynamic: {
1044
- default: string;
1045
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1046
- };
1047
- dynamicScale: boolean;
1048
- name: "WebkitLineClamp";
1049
- vars: {
1050
- default: string;
1051
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1052
- };
1053
- };
1054
- };
1055
- } & {
1056
- config: {
1057
- [x: string]: {
1058
- mappings: ("fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign" | "lineClamp" | "WebkitLineClamp")[];
1059
- };
1060
- };
1061
- }
1062
- ]>;
875
+ sprinkle: ((props: {
876
+ color?: ("currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | {
877
+ xs?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | undefined;
878
+ md?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | undefined;
879
+ lg?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | undefined;
880
+ xl?: "currentColor" | "primary-interactive" | "primary-surface" | "primary-textLow" | "success-textLow" | "success-surface" | "warning-interactive" | "warning-surface" | "warning-textLow" | "danger-interactive" | "danger-surface" | "danger-textLow" | "neutral-background" | "neutral-interactive" | "neutral-surface" | "neutral-textLow" | "success-interactive" | "primary-textHigh" | "success-textHigh" | "warning-textHigh" | "danger-textHigh" | "neutral-textDisabled" | "neutral-textHigh" | undefined;
881
+ }) | undefined;
882
+ textAlign?: (TextAlign | {
883
+ xs?: TextAlign | undefined;
884
+ md?: TextAlign | undefined;
885
+ lg?: TextAlign | undefined;
886
+ xl?: TextAlign | undefined;
887
+ }) | undefined;
888
+ lineHeight?: ("caption" | "base" | "highlight" | {
889
+ xs?: "caption" | "base" | "highlight" | undefined;
890
+ md?: "caption" | "base" | "highlight" | undefined;
891
+ lg?: "caption" | "base" | "highlight" | undefined;
892
+ xl?: "caption" | "base" | "highlight" | undefined;
893
+ }) | undefined;
894
+ fontWeight?: ("regular" | "medium" | "bold" | {
895
+ xs?: "regular" | "medium" | "bold" | undefined;
896
+ md?: "regular" | "medium" | "bold" | undefined;
897
+ lg?: "regular" | "medium" | "bold" | undefined;
898
+ xl?: "regular" | "medium" | "bold" | undefined;
899
+ }) | undefined;
900
+ fontSize?: ("caption" | "base" | "highlight" | {
901
+ xs?: "caption" | "base" | "highlight" | undefined;
902
+ md?: "caption" | "base" | "highlight" | undefined;
903
+ lg?: "caption" | "base" | "highlight" | undefined;
904
+ xl?: "caption" | "base" | "highlight" | undefined;
905
+ }) | undefined;
906
+ }) => string) & {
907
+ properties: Set<"fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign">;
908
+ };
1063
909
  properties: {
1064
910
  color: {
1065
911
  currentColor: string;
@@ -1105,7 +951,6 @@ declare const text: {
1105
951
  };
1106
952
  classnames: {
1107
953
  base: string;
1108
- trim: string;
1109
954
  };
1110
955
  };
1111
956
  declare const propertiesTitle: {
@@ -1123,15 +968,15 @@ declare const propertiesTitle: {
1123
968
  };
1124
969
  textAlign: TextAlign[];
1125
970
  fontSize: {
1126
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
971
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1127
972
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1128
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
973
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1129
974
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1130
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
975
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1131
976
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1132
- "3,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
977
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1133
978
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1134
- "4,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
979
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1135
980
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1136
981
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1137
982
  "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -1157,15 +1002,15 @@ declare const propertiesTitle: {
1157
1002
  bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1158
1003
  };
1159
1004
  lineHeight: {
1160
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1005
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1161
1006
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1162
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1007
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1163
1008
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1164
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1009
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1165
1010
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1166
- "3,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1011
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1167
1012
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1168
- "4,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1013
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1169
1014
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1170
1015
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1171
1016
  "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -1242,10 +1087,22 @@ declare const propertiesPopover: {
1242
1087
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1243
1088
  none: string;
1244
1089
  };
1090
+ zIndex: {
1091
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1092
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1093
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1094
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1095
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1096
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1097
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1098
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1099
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1100
+ };
1245
1101
  };
1246
1102
  export type PopoverColorProperties = keyof typeof propertiesPopover.color;
1247
1103
  export type PopoverBackgroundColorProperties = keyof typeof propertiesPopover.backgroundColor;
1248
1104
  export type PopoverPaddingProperties = keyof typeof propertiesPopover.padding;
1105
+ export type PopoverZIndexProperties = keyof typeof propertiesPopover.zIndex;
1249
1106
  export interface PopoverSprinkle {
1250
1107
  /**
1251
1108
  * The width property specifies the width of a popover's content area.
@@ -1259,7 +1116,7 @@ export interface PopoverSprinkle {
1259
1116
  /**
1260
1117
  * The zIndex property specifies the stack order of the popover.
1261
1118
  */
1262
- zIndex?: number | Conditions<number>;
1119
+ zIndex?: PopoverZIndexProperties | Conditions<PopoverZIndexProperties>;
1263
1120
  /**
1264
1121
  * The backgroundColor property sets the background color of the popover.
1265
1122
  * @default neutral-background
@@ -1279,7 +1136,7 @@ export interface PopoverSprinkle {
1279
1136
  }
1280
1137
  declare const spinner: {
1281
1138
  sprinkle: ((props: {
1282
- color?: "primary-surface" | "primary-interactive" | "primary-textLow" | "success-surface" | "success-interactive" | "success-textLow" | "danger-surface" | "danger-interactive" | "danger-textLow" | "neutral-background" | "neutral-surface" | "neutral-interactive" | "neutral-textLow" | "currentColor" | undefined;
1139
+ 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;
1283
1140
  }) => string) & {
1284
1141
  properties: Set<"color">;
1285
1142
  };
@@ -1491,6 +1348,58 @@ declare const sidebarSprinkle: {
1491
1348
  sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
1492
1349
  {
1493
1350
  config: {
1351
+ zIndex: {
1352
+ values: {
1353
+ 100: {
1354
+ default: string;
1355
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1356
+ };
1357
+ 200: {
1358
+ default: string;
1359
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1360
+ };
1361
+ 300: {
1362
+ default: string;
1363
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1364
+ };
1365
+ 400: {
1366
+ default: string;
1367
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1368
+ };
1369
+ 500: {
1370
+ default: string;
1371
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1372
+ };
1373
+ 600: {
1374
+ default: string;
1375
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1376
+ };
1377
+ 700: {
1378
+ default: string;
1379
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1380
+ };
1381
+ 800: {
1382
+ default: string;
1383
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1384
+ };
1385
+ 900: {
1386
+ default: string;
1387
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1388
+ };
1389
+ };
1390
+ staticScale: {
1391
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1392
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1393
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1394
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1395
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1396
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1397
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1398
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1399
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1400
+ };
1401
+ name: "zIndex";
1402
+ };
1494
1403
  padding: {
1495
1404
  values: {
1496
1405
  base: {
@@ -1528,28 +1437,27 @@ declare const sidebarSprinkle: {
1528
1437
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1529
1438
  };
1530
1439
  };
1531
- zIndex: {
1532
- dynamic: {
1533
- default: string;
1534
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1535
- };
1536
- dynamicScale: true;
1537
- name: "zIndex";
1538
- vars: {
1539
- default: string;
1540
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1541
- };
1542
- };
1543
1440
  };
1544
1441
  } & {
1545
1442
  config: {
1546
1443
  [x: string]: {
1547
- mappings: ("maxWidth" | "zIndex" | "padding")[];
1444
+ mappings: ("zIndex" | "maxWidth" | "padding")[];
1548
1445
  };
1549
1446
  };
1550
1447
  }
1551
1448
  ]>;
1552
1449
  properties: {
1450
+ zIndex: {
1451
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1452
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1453
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1454
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1455
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1456
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1457
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1458
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1459
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1460
+ };
1553
1461
  padding: {
1554
1462
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1555
1463
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -1558,6 +1466,7 @@ declare const sidebarSprinkle: {
1558
1466
  };
1559
1467
  };
1560
1468
  export type SidebarPaddingProperties = keyof typeof sidebarSprinkle.properties.padding;
1469
+ export type SidebarZIndexProperties = keyof typeof sidebarSprinkle.properties.zIndex;
1561
1470
  export interface SidebarSprinkle {
1562
1471
  /**
1563
1472
  * The maxWidth property specifies the maxWidth of a sidebar's content area.
@@ -1567,7 +1476,7 @@ export interface SidebarSprinkle {
1567
1476
  /**
1568
1477
  * The zIndex property specifies the stack order of the sidebar.
1569
1478
  */
1570
- zIndex?: number | Conditions<number>;
1479
+ zIndex?: SidebarZIndexProperties | Conditions<SidebarZIndexProperties>;
1571
1480
  /**
1572
1481
  * The padding properties are used to generate space around an sidebar's content area.
1573
1482
  * @default base
@@ -1578,6 +1487,58 @@ declare const sidebar: {
1578
1487
  sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
1579
1488
  {
1580
1489
  config: {
1490
+ zIndex: {
1491
+ values: {
1492
+ 100: {
1493
+ default: string;
1494
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1495
+ };
1496
+ 200: {
1497
+ default: string;
1498
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1499
+ };
1500
+ 300: {
1501
+ default: string;
1502
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1503
+ };
1504
+ 400: {
1505
+ default: string;
1506
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1507
+ };
1508
+ 500: {
1509
+ default: string;
1510
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1511
+ };
1512
+ 600: {
1513
+ default: string;
1514
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1515
+ };
1516
+ 700: {
1517
+ default: string;
1518
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1519
+ };
1520
+ 800: {
1521
+ default: string;
1522
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1523
+ };
1524
+ 900: {
1525
+ default: string;
1526
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1527
+ };
1528
+ };
1529
+ staticScale: {
1530
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1531
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1532
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1533
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1534
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1535
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1536
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1537
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1538
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1539
+ };
1540
+ name: "zIndex";
1541
+ };
1581
1542
  padding: {
1582
1543
  values: {
1583
1544
  base: {
@@ -1615,28 +1576,27 @@ declare const sidebar: {
1615
1576
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1616
1577
  };
1617
1578
  };
1618
- zIndex: {
1619
- dynamic: {
1620
- default: string;
1621
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1622
- };
1623
- dynamicScale: true;
1624
- name: "zIndex";
1625
- vars: {
1626
- default: string;
1627
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1628
- };
1629
- };
1630
1579
  };
1631
1580
  } & {
1632
1581
  config: {
1633
1582
  [x: string]: {
1634
- mappings: ("maxWidth" | "zIndex" | "padding")[];
1583
+ mappings: ("zIndex" | "maxWidth" | "padding")[];
1635
1584
  };
1636
1585
  };
1637
1586
  }
1638
1587
  ]>;
1639
1588
  properties: {
1589
+ zIndex: {
1590
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1591
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1592
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1593
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1594
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1595
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1596
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1597
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1598
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1599
+ };
1640
1600
  padding: {
1641
1601
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1642
1602
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -2245,7 +2205,7 @@ declare const TextSkeleton: React.FC<TextSkeletonProps>;
2245
2205
  export interface TextComponents {
2246
2206
  Skeleton: typeof TextSkeleton;
2247
2207
  }
2248
- export interface TextProperties extends Omit<TextSprinkle, "WebkitLineClamp"> {
2208
+ export interface TextProperties extends TextSprinkle {
2249
2209
  /**
2250
2210
  * The content of the link.
2251
2211
  * @TJS-type React.ReactNode
@@ -2257,7 +2217,7 @@ export interface TextProperties extends Omit<TextSprinkle, "WebkitLineClamp"> {
2257
2217
  */
2258
2218
  as?: "p" | "span";
2259
2219
  }
2260
- export type TextProps = TextProperties & Omit<TextSprinkle, "WebkitLineClamp"> & HTMLAttributes<HTMLParagraphElement>;
2220
+ export type TextProps = TextProperties & TextSprinkle & HTMLAttributes<HTMLParagraphElement>;
2261
2221
  export declare const Text: React.FC<TextProps> & TextComponents;
2262
2222
  export type TextareaSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
2263
2223
  export type TextareaSkeletonProps = TextareaSkeletonProperties;