@nimbus-ds/components 4.3.0 → 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 (3) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/index.d.ts +278 -97
  3. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
4
4
 
5
+ ## 2023-05-23 `5.0.0`
6
+
7
+ #### 🛠 Breaking changes
8
+
9
+ - Changed the dynamic sending option of the `zIndex` property to use `zIndex` in the `Popover` component API. ([#162](https://github.com/TiendaNube/nimbus-design-system/pull/162) by [@juniorconquista](https://github.com/juniorconquista))
10
+
5
11
  ## 2023-05-08 `4.3.0`
6
12
 
7
13
  ### 🎉 New features
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">;
@@ -807,11 +873,11 @@ export interface TextSprinkle {
807
873
  }
808
874
  declare const text: {
809
875
  sprinkle: ((props: {
810
- 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" | {
811
- xs?: "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;
812
- md?: "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;
813
- lg?: "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;
814
- xl?: "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;
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;
815
881
  }) | undefined;
816
882
  textAlign?: (TextAlign | {
817
883
  xs?: TextAlign | undefined;
@@ -902,15 +968,15 @@ declare const propertiesTitle: {
902
968
  };
903
969
  textAlign: TextAlign[];
904
970
  fontSize: {
905
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
971
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
906
972
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
907
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
973
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
908
974
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
909
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
975
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
910
976
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
911
- "3,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
977
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
912
978
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
913
- "4,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
979
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
914
980
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
915
981
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
916
982
  "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -936,15 +1002,15 @@ declare const propertiesTitle: {
936
1002
  bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
937
1003
  };
938
1004
  lineHeight: {
939
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1005
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
940
1006
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
941
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1007
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
942
1008
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
943
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1009
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
944
1010
  "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
945
- "3,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1011
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
946
1012
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
947
- "4,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1013
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
948
1014
  "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
949
1015
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
950
1016
  "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -1021,10 +1087,22 @@ declare const propertiesPopover: {
1021
1087
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1022
1088
  none: string;
1023
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
+ };
1024
1101
  };
1025
1102
  export type PopoverColorProperties = keyof typeof propertiesPopover.color;
1026
1103
  export type PopoverBackgroundColorProperties = keyof typeof propertiesPopover.backgroundColor;
1027
1104
  export type PopoverPaddingProperties = keyof typeof propertiesPopover.padding;
1105
+ export type PopoverZIndexProperties = keyof typeof propertiesPopover.zIndex;
1028
1106
  export interface PopoverSprinkle {
1029
1107
  /**
1030
1108
  * The width property specifies the width of a popover's content area.
@@ -1038,7 +1116,7 @@ export interface PopoverSprinkle {
1038
1116
  /**
1039
1117
  * The zIndex property specifies the stack order of the popover.
1040
1118
  */
1041
- zIndex?: number | Conditions<number>;
1119
+ zIndex?: PopoverZIndexProperties | Conditions<PopoverZIndexProperties>;
1042
1120
  /**
1043
1121
  * The backgroundColor property sets the background color of the popover.
1044
1122
  * @default neutral-background
@@ -1058,7 +1136,7 @@ export interface PopoverSprinkle {
1058
1136
  }
1059
1137
  declare const spinner: {
1060
1138
  sprinkle: ((props: {
1061
- 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;
1062
1140
  }) => string) & {
1063
1141
  properties: Set<"color">;
1064
1142
  };
@@ -1270,6 +1348,58 @@ declare const sidebarSprinkle: {
1270
1348
  sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
1271
1349
  {
1272
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
+ };
1273
1403
  padding: {
1274
1404
  values: {
1275
1405
  base: {
@@ -1307,28 +1437,27 @@ declare const sidebarSprinkle: {
1307
1437
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1308
1438
  };
1309
1439
  };
1310
- zIndex: {
1311
- dynamic: {
1312
- default: string;
1313
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1314
- };
1315
- dynamicScale: true;
1316
- name: "zIndex";
1317
- vars: {
1318
- default: string;
1319
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1320
- };
1321
- };
1322
1440
  };
1323
1441
  } & {
1324
1442
  config: {
1325
1443
  [x: string]: {
1326
- mappings: ("maxWidth" | "zIndex" | "padding")[];
1444
+ mappings: ("zIndex" | "maxWidth" | "padding")[];
1327
1445
  };
1328
1446
  };
1329
1447
  }
1330
1448
  ]>;
1331
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
+ };
1332
1461
  padding: {
1333
1462
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1334
1463
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -1337,6 +1466,7 @@ declare const sidebarSprinkle: {
1337
1466
  };
1338
1467
  };
1339
1468
  export type SidebarPaddingProperties = keyof typeof sidebarSprinkle.properties.padding;
1469
+ export type SidebarZIndexProperties = keyof typeof sidebarSprinkle.properties.zIndex;
1340
1470
  export interface SidebarSprinkle {
1341
1471
  /**
1342
1472
  * The maxWidth property specifies the maxWidth of a sidebar's content area.
@@ -1346,7 +1476,7 @@ export interface SidebarSprinkle {
1346
1476
  /**
1347
1477
  * The zIndex property specifies the stack order of the sidebar.
1348
1478
  */
1349
- zIndex?: number | Conditions<number>;
1479
+ zIndex?: SidebarZIndexProperties | Conditions<SidebarZIndexProperties>;
1350
1480
  /**
1351
1481
  * The padding properties are used to generate space around an sidebar's content area.
1352
1482
  * @default base
@@ -1357,6 +1487,58 @@ declare const sidebar: {
1357
1487
  sprinkle: import("rainbow-sprinkles/dist/declarations/src/createRuntimeFn").SprinklesFn<[
1358
1488
  {
1359
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
+ };
1360
1542
  padding: {
1361
1543
  values: {
1362
1544
  base: {
@@ -1394,28 +1576,27 @@ declare const sidebar: {
1394
1576
  conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1395
1577
  };
1396
1578
  };
1397
- zIndex: {
1398
- dynamic: {
1399
- default: string;
1400
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1401
- };
1402
- dynamicScale: true;
1403
- name: "zIndex";
1404
- vars: {
1405
- default: string;
1406
- conditions: Record<"xs" | "md" | "lg" | "xl", string>;
1407
- };
1408
- };
1409
1579
  };
1410
1580
  } & {
1411
1581
  config: {
1412
1582
  [x: string]: {
1413
- mappings: ("maxWidth" | "zIndex" | "padding")[];
1583
+ mappings: ("zIndex" | "maxWidth" | "padding")[];
1414
1584
  };
1415
1585
  };
1416
1586
  }
1417
1587
  ]>;
1418
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
+ };
1419
1600
  padding: {
1420
1601
  base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
1421
1602
  small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/components",
3
- "version": "4.3.0",
3
+ "version": "5.0.0-rc.1",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -31,5 +31,6 @@
31
31
  },
32
32
  "devDependencies": {
33
33
  "@nimbus-ds/webpack": "^1.3.0"
34
- }
34
+ },
35
+ "stableVersion": "4.3.0"
35
36
  }