@nimbus-ds/components 4.4.0-rc.1 → 5.0.0-rc.2

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 +335 -355
  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,12 +152,10 @@ 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
- pointerEvents: PointerEvents[];
156
+ pointerEvents: PointerEvents[]; /**
157
+ * The borderLeftWidth property defines the width of the border at the left of a box.
158
+ */
149
159
  backgroundColor: {
150
160
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
151
161
  "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -158,15 +168,15 @@ declare const propertiesBox: {
158
168
  "warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
159
169
  "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
160
170
  "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
- */
171
+ "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
164
172
  "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
165
173
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
166
174
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
167
175
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
168
176
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
169
- "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
177
+ "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
178
+ * The bottom property participates in setting the vertical position of a positioned box.
179
+ */
170
180
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
171
181
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
172
182
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -186,15 +196,15 @@ declare const propertiesBox: {
186
196
  "warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
187
197
  "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
188
198
  "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
- */
199
+ "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
192
200
  "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
193
201
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
194
202
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
195
203
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
204
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
- "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
205
+ "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
206
+ * The bottom property participates in setting the vertical position of a positioned box.
207
+ */
198
208
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
199
209
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
210
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -219,19 +229,48 @@ declare const propertiesBox: {
219
229
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
220
230
  transparent: string;
221
231
  };
232
+ borderRadius: {
233
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
234
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
235
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
236
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
237
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
238
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
239
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
240
+ full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
241
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
242
+ half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
243
+ none: string;
244
+ };
245
+ borderWidth: {
246
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
247
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
248
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
249
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
250
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
251
+ none: string;
252
+ };
222
253
  borderStyle: BorderStyle[];
223
254
  boxSizing: BoxSizing[];
224
255
  cursor: Cursor[];
225
- space: {
256
+ spacing: {
226
257
  none: string;
227
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
258
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
228
259
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
260
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
229
261
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
230
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
262
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
263
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
264
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
265
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
266
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
267
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
268
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
269
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
233
270
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
271
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
234
272
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
273
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
235
274
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
236
275
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
237
276
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -239,15 +278,22 @@ declare const propertiesBox: {
239
278
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
240
279
  };
241
280
  margin: {
242
- none: string;
243
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
281
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
244
282
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
283
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
245
284
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
246
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
285
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
286
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
287
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
247
288
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
289
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
290
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
248
291
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
292
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
249
293
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
294
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
250
295
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
296
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
251
297
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
252
298
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
253
299
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -255,17 +301,19 @@ declare const propertiesBox: {
255
301
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
256
302
  auto: string;
257
303
  };
258
- position: Position[];
304
+ position: Position[]; /**
305
+ * The borderWidthX shorthand property defines the width of the element's border on the left and right.
306
+ */
259
307
  overflow: Overflow[];
260
308
  overflowX: Overflow[];
261
309
  overflowY: Overflow[];
262
310
  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})`;
311
+ "0": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
312
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
313
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
314
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
315
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
316
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
269
317
  focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
270
318
  };
271
319
  transitionDuration: {
@@ -276,16 +324,30 @@ declare const propertiesBox: {
276
324
  };
277
325
  transitionTimingFunction: TransitionTiming[];
278
326
  textDecoration: TextDecoration[];
327
+ zIndex: {
328
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
329
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
330
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
331
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
332
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
333
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
334
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
335
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
336
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
337
+ };
279
338
  };
280
339
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
340
+ export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
341
+ export type BoxBorderWidthProperties = keyof typeof propertiesBox.borderWidth;
281
342
  export type BoxBackgroundColorProperties = keyof typeof propertiesBox.backgroundColor;
282
343
  export type BoxColorProperties = keyof typeof propertiesBox.color;
283
344
  export type BoxShadowProperties = keyof typeof propertiesBox.boxShadow;
284
- export type BoxSpaceProperties = keyof typeof propertiesBox.space;
345
+ export type BoxSpacingProperties = keyof typeof propertiesBox.spacing;
285
346
  export type BoxMarginProperties = keyof typeof propertiesBox.margin;
286
347
  export type BoxGapProperties = keyof typeof propertiesBox.gap;
287
348
  export type BoxGridGapProperties = keyof typeof propertiesBox.gridGap;
288
- export type TransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
349
+ export type BoxZIndexProperties = keyof typeof propertiesBox.zIndex;
350
+ export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
289
351
  export interface BoxConditions<T> extends Conditions<T> {
290
352
  focus?: T;
291
353
  focusWithin?: T;
@@ -440,11 +502,35 @@ export interface BoxSprinkle {
440
502
  /**
441
503
  * The borderRadius property rounds the corners of an box's outer border edge.
442
504
  */
443
- borderRadius?: string | BoxConditions<string>;
505
+ borderRadius?: BoxBorderRadiusProperties | BoxConditions<BoxBorderRadiusProperties>;
444
506
  /**
445
507
  * The borderWidth property sets the width of an box's border.
446
508
  */
447
- borderWidth?: string | BoxConditions<string>;
509
+ borderWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
510
+ /**
511
+ * The borderTopWidth property defines the width of the border at the top of a box.
512
+ */
513
+ borderTopWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
514
+ /**
515
+ * The borderBottomWidth property defines the width of the border at the bottom of a box.
516
+ */
517
+ borderBottomWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
518
+ /**
519
+ * The borderLeftWidth property defines the width of the border at the left of a box.
520
+ */
521
+ borderLeftWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
522
+ /**
523
+ * The borderRightWidth property defines the width of the border at the right of a box.
524
+ */
525
+ borderRightWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
526
+ /**
527
+ * The borderWidthX shorthand property defines the width of the element's border on the left and right.
528
+ */
529
+ borderWidthX?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
530
+ /**
531
+ * The borderWidthY shorthand property defines the width of the element's border on the top and bottom.
532
+ */
533
+ borderWidthY?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
448
534
  /**
449
535
  * The borderColor property sets the color of the box's four borders.
450
536
  */
@@ -465,23 +551,23 @@ export interface BoxSprinkle {
465
551
  /**
466
552
  * The padding properties are used to generate space around an box's content area.
467
553
  */
468
- padding?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
554
+ padding?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
469
555
  /**
470
556
  * The paddingTop property sets the height of the padding area on the top of an box.
471
557
  */
472
- paddingTop?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
558
+ paddingTop?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
473
559
  /**
474
560
  * The paddingBottom property sets the height of the padding area on the bottom of an box.
475
561
  */
476
- paddingBottom?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
562
+ paddingBottom?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
477
563
  /**
478
564
  * The paddingLeft property sets the width of the padding area to the left of an box.
479
565
  */
480
- paddingLeft?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
566
+ paddingLeft?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
481
567
  /**
482
568
  * The paddingLeft property sets the width of the padding area to the right of an box.
483
569
  */
484
- paddingRight?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
570
+ paddingRight?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
485
571
  /**
486
572
  * The margin shorthand property sets the margin area on all four sides of an box.
487
573
  */
@@ -517,11 +603,11 @@ export interface BoxSprinkle {
517
603
  /**
518
604
  * 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
605
  */
520
- transitionDuration?: TransitionDurationProperties | BoxConditions<TransitionDurationProperties>;
606
+ transitionDuration?: BoxTransitionDurationProperties | BoxConditions<BoxTransitionDurationProperties>;
521
607
  /**
522
608
  * The zIndex property specifies the stack order of the box.
523
609
  */
524
- zIndex?: number | BoxConditions<number>;
610
+ zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
525
611
  /**
526
612
  * The backgroundImage property sets one or more background images on an element.
527
613
  */
@@ -551,39 +637,39 @@ export interface BoxSprinkle {
551
637
  /**
552
638
  * The p shorthand property sets the margin area on all four sides of an box.
553
639
  */
554
- p?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
640
+ p?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
555
641
  /**
556
642
  * The pl shorthand property sets the width of the padding area to the left of an box.
557
643
  */
558
- pl?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
644
+ pl?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
559
645
  /**
560
646
  * The pl shorthand property sets the width of the padding area to the right of an box.
561
647
  */
562
- pr?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
648
+ pr?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
563
649
  /**
564
650
  * The pt shorthand property sets the height of the padding area on the top of an box.
565
651
  */
566
- pt?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
652
+ pt?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
567
653
  /**
568
654
  * The pb shorthand property sets the height of the padding area on the botton of an box.
569
655
  */
570
- pb?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
656
+ pb?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
571
657
  /**
572
658
  * The px shorthand property defines the width of the left and right padding area of a box.
573
659
  */
574
- px?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
660
+ px?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
575
661
  /**
576
662
  * The py pt shorthand property sets the height of the padding area at the top and bottom of a box.
577
663
  */
578
- py?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
664
+ py?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
579
665
  /**
580
666
  * The paddingX shorthand property defines the width of the left and right padding area of a box.
581
667
  */
582
- paddingX?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
668
+ paddingX?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
583
669
  /**
584
670
  * The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.
585
671
  */
586
- paddingY?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
672
+ paddingY?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
587
673
  /**
588
674
  * The m shorthand property sets the margin area on all four sides of an box.
589
675
  */
@@ -649,7 +735,7 @@ declare const fileUploader: {
649
735
  };
650
736
  declare const icon: {
651
737
  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;
738
+ 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
739
  cursor?: Cursor | undefined;
654
740
  }) => string) & {
655
741
  properties: Set<"color" | "cursor">;
@@ -733,7 +819,10 @@ declare const propertiesText: {
733
819
  "primary-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
734
820
  "primary-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
735
821
  "primary-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
736
- "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
822
+ "primary-textHigh": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
823
+ * The color property is used to set the color of the text.
824
+ * @default neutral-textLow
825
+ */
737
826
  "success-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
738
827
  "success-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
739
828
  "success-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -801,265 +890,42 @@ export interface TextSprinkle {
801
890
  * @default neutral-textLow
802
891
  */
803
892
  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
893
  }
813
894
  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
- ]>;
895
+ sprinkle: ((props: {
896
+ 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" | {
897
+ 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;
898
+ 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;
899
+ 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;
900
+ 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;
901
+ }) | undefined;
902
+ textAlign?: (TextAlign | {
903
+ xs?: TextAlign | undefined;
904
+ md?: TextAlign | undefined;
905
+ lg?: TextAlign | undefined;
906
+ xl?: TextAlign | undefined;
907
+ }) | undefined;
908
+ lineHeight?: ("caption" | "base" | "highlight" | {
909
+ xs?: "caption" | "base" | "highlight" | undefined;
910
+ md?: "caption" | "base" | "highlight" | undefined;
911
+ lg?: "caption" | "base" | "highlight" | undefined;
912
+ xl?: "caption" | "base" | "highlight" | undefined;
913
+ }) | undefined;
914
+ fontWeight?: ("regular" | "medium" | "bold" | {
915
+ xs?: "regular" | "medium" | "bold" | undefined;
916
+ md?: "regular" | "medium" | "bold" | undefined;
917
+ lg?: "regular" | "medium" | "bold" | undefined;
918
+ xl?: "regular" | "medium" | "bold" | undefined;
919
+ }) | undefined;
920
+ fontSize?: ("caption" | "base" | "highlight" | {
921
+ xs?: "caption" | "base" | "highlight" | undefined;
922
+ md?: "caption" | "base" | "highlight" | undefined;
923
+ lg?: "caption" | "base" | "highlight" | undefined;
924
+ xl?: "caption" | "base" | "highlight" | undefined;
925
+ }) | undefined;
926
+ }) => string) & {
927
+ properties: Set<"fontSize" | "fontWeight" | "color" | "lineHeight" | "textAlign">;
928
+ };
1063
929
  properties: {
1064
930
  color: {
1065
931
  currentColor: string;
@@ -1105,7 +971,6 @@ declare const text: {
1105
971
  };
1106
972
  classnames: {
1107
973
  base: string;
1108
- trim: string;
1109
974
  };
1110
975
  };
1111
976
  declare const propertiesTitle: {
@@ -1123,15 +988,15 @@ declare const propertiesTitle: {
1123
988
  };
1124
989
  textAlign: TextAlign[];
1125
990
  fontSize: {
1126
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
991
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1127
992
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1128
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
993
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1129
994
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1130
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
995
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1131
996
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1132
- "3,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
997
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1133
998
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1134
- "4,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
999
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1135
1000
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1136
1001
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1137
1002
  "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -1157,15 +1022,15 @@ declare const propertiesTitle: {
1157
1022
  bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1158
1023
  };
1159
1024
  lineHeight: {
1160
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1025
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1161
1026
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1162
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1027
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1163
1028
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1164
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1029
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1165
1030
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1166
- "3,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1031
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1167
1032
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1168
- "4,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1033
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1169
1034
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1170
1035
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1171
1036
  "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -1242,10 +1107,22 @@ declare const propertiesPopover: {
1242
1107
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1243
1108
  none: string;
1244
1109
  };
1110
+ zIndex: {
1111
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1112
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1113
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1114
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1115
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1116
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1117
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1118
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1119
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1120
+ };
1245
1121
  };
1246
1122
  export type PopoverColorProperties = keyof typeof propertiesPopover.color;
1247
1123
  export type PopoverBackgroundColorProperties = keyof typeof propertiesPopover.backgroundColor;
1248
1124
  export type PopoverPaddingProperties = keyof typeof propertiesPopover.padding;
1125
+ export type PopoverZIndexProperties = keyof typeof propertiesPopover.zIndex;
1249
1126
  export interface PopoverSprinkle {
1250
1127
  /**
1251
1128
  * The width property specifies the width of a popover's content area.
@@ -1259,7 +1136,7 @@ export interface PopoverSprinkle {
1259
1136
  /**
1260
1137
  * The zIndex property specifies the stack order of the popover.
1261
1138
  */
1262
- zIndex?: number | Conditions<number>;
1139
+ zIndex?: PopoverZIndexProperties | Conditions<PopoverZIndexProperties>;
1263
1140
  /**
1264
1141
  * The backgroundColor property sets the background color of the popover.
1265
1142
  * @default neutral-background
@@ -1279,7 +1156,7 @@ export interface PopoverSprinkle {
1279
1156
  }
1280
1157
  declare const spinner: {
1281
1158
  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;
1159
+ 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
1160
  }) => string) & {
1284
1161
  properties: Set<"color">;
1285
1162
  };
@@ -1491,6 +1368,58 @@ declare const sidebarSprinkle: {
1491
1368
  sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
1492
1369
  {
1493
1370
  config: {
1371
+ zIndex: {
1372
+ values: {
1373
+ 100: {
1374
+ default: string;
1375
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1376
+ };
1377
+ 200: {
1378
+ default: string;
1379
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1380
+ };
1381
+ 300: {
1382
+ default: string;
1383
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1384
+ };
1385
+ 400: {
1386
+ default: string;
1387
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1388
+ };
1389
+ 500: {
1390
+ default: string;
1391
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1392
+ };
1393
+ 600: {
1394
+ default: string;
1395
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1396
+ };
1397
+ 700: {
1398
+ default: string;
1399
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1400
+ };
1401
+ 800: {
1402
+ default: string;
1403
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1404
+ };
1405
+ 900: {
1406
+ default: string;
1407
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1408
+ };
1409
+ };
1410
+ staticScale: {
1411
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1412
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1413
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1414
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1415
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1416
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1417
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1418
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1419
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1420
+ };
1421
+ name: "zIndex";
1422
+ };
1494
1423
  padding: {
1495
1424
  values: {
1496
1425
  base: {
@@ -1528,28 +1457,27 @@ declare const sidebarSprinkle: {
1528
1457
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1529
1458
  };
1530
1459
  };
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
1460
  };
1544
1461
  } & {
1545
1462
  config: {
1546
1463
  [x: string]: {
1547
- mappings: ("maxWidth" | "zIndex" | "padding")[];
1464
+ mappings: ("zIndex" | "maxWidth" | "padding")[];
1548
1465
  };
1549
1466
  };
1550
1467
  }
1551
1468
  ]>;
1552
1469
  properties: {
1470
+ zIndex: {
1471
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1472
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1473
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1474
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1475
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1476
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1477
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1478
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1479
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1480
+ };
1553
1481
  padding: {
1554
1482
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1555
1483
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -1558,6 +1486,7 @@ declare const sidebarSprinkle: {
1558
1486
  };
1559
1487
  };
1560
1488
  export type SidebarPaddingProperties = keyof typeof sidebarSprinkle.properties.padding;
1489
+ export type SidebarZIndexProperties = keyof typeof sidebarSprinkle.properties.zIndex;
1561
1490
  export interface SidebarSprinkle {
1562
1491
  /**
1563
1492
  * The maxWidth property specifies the maxWidth of a sidebar's content area.
@@ -1567,7 +1496,7 @@ export interface SidebarSprinkle {
1567
1496
  /**
1568
1497
  * The zIndex property specifies the stack order of the sidebar.
1569
1498
  */
1570
- zIndex?: number | Conditions<number>;
1499
+ zIndex?: SidebarZIndexProperties | Conditions<SidebarZIndexProperties>;
1571
1500
  /**
1572
1501
  * The padding properties are used to generate space around an sidebar's content area.
1573
1502
  * @default base
@@ -1578,6 +1507,58 @@ declare const sidebar: {
1578
1507
  sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
1579
1508
  {
1580
1509
  config: {
1510
+ zIndex: {
1511
+ values: {
1512
+ 100: {
1513
+ default: string;
1514
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1515
+ };
1516
+ 200: {
1517
+ default: string;
1518
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1519
+ };
1520
+ 300: {
1521
+ default: string;
1522
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1523
+ };
1524
+ 400: {
1525
+ default: string;
1526
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1527
+ };
1528
+ 500: {
1529
+ default: string;
1530
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1531
+ };
1532
+ 600: {
1533
+ default: string;
1534
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1535
+ };
1536
+ 700: {
1537
+ default: string;
1538
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1539
+ };
1540
+ 800: {
1541
+ default: string;
1542
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1543
+ };
1544
+ 900: {
1545
+ default: string;
1546
+ conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1547
+ };
1548
+ };
1549
+ staticScale: {
1550
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1551
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1552
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1553
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1554
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1555
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1556
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1557
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1558
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1559
+ };
1560
+ name: "zIndex";
1561
+ };
1581
1562
  padding: {
1582
1563
  values: {
1583
1564
  base: {
@@ -1615,28 +1596,27 @@ declare const sidebar: {
1615
1596
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1616
1597
  };
1617
1598
  };
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
1599
  };
1631
1600
  } & {
1632
1601
  config: {
1633
1602
  [x: string]: {
1634
- mappings: ("maxWidth" | "zIndex" | "padding")[];
1603
+ mappings: ("zIndex" | "maxWidth" | "padding")[];
1635
1604
  };
1636
1605
  };
1637
1606
  }
1638
1607
  ]>;
1639
1608
  properties: {
1609
+ zIndex: {
1610
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1611
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1612
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1613
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1614
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1615
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1616
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1617
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1618
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1619
+ };
1640
1620
  padding: {
1641
1621
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1642
1622
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -2245,7 +2225,7 @@ declare const TextSkeleton: React.FC<TextSkeletonProps>;
2245
2225
  export interface TextComponents {
2246
2226
  Skeleton: typeof TextSkeleton;
2247
2227
  }
2248
- export interface TextProperties extends Omit<TextSprinkle, "WebkitLineClamp"> {
2228
+ export interface TextProperties extends TextSprinkle {
2249
2229
  /**
2250
2230
  * The content of the link.
2251
2231
  * @TJS-type React.ReactNode
@@ -2257,7 +2237,7 @@ export interface TextProperties extends Omit<TextSprinkle, "WebkitLineClamp"> {
2257
2237
  */
2258
2238
  as?: "p" | "span";
2259
2239
  }
2260
- export type TextProps = TextProperties & Omit<TextSprinkle, "WebkitLineClamp"> & HTMLAttributes<HTMLParagraphElement>;
2240
+ export type TextProps = TextProperties & TextSprinkle & HTMLAttributes<HTMLParagraphElement>;
2261
2241
  export declare const Text: React.FC<TextProps> & TextComponents;
2262
2242
  export type TextareaSkeletonProperties = Partial<Pick<SkeletonProps, "width" | "data-testid">>;
2263
2243
  export type TextareaSkeletonProps = TextareaSkeletonProperties;