@nimbus-ds/box 3.1.0 → 4.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 +12 -0
  2. package/dist/index.d.ts +122 -43
  3. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  A low-level utility component that accepts styled system props to enable custom theme-aware styling
4
4
 
5
+ ## 2023-05-18 `4.0.0`
6
+
7
+ #### 🛠 Breaking changes
8
+
9
+ - Removed `level-` prefix from `boxShadow` component API property. ([#162](https://github.com/TiendaNube/nimbus-design-system/pull/162) by [@juniorconquista](https://github.com/juniorconquista))
10
+
11
+ ## 2023-03-31 `3.2.0`
12
+
13
+ ### 🎉 New features
14
+
15
+ - Added `textDecoration` property to the Component. ([#136](https://github.com/TiendaNube/nimbus-design-system/pull/136) by [@juniorconquista](https://github.com/juniorconquista))
16
+
5
17
  ## 2023-03-24 `3.1.0`
6
18
 
7
19
  ### 💡 Others
package/dist/index.d.ts CHANGED
@@ -44,24 +44,29 @@ export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
44
44
  export type JustifyContent = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
45
45
  export type AlignItems = "stretch" | "flex-start" | "flex-end" | "center" | "baseline";
46
46
  export type AlignSelf = "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
47
+ export type TextDecoration = "none" | "underline";
47
48
  export type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
48
49
  export type Overflow = "visible" | "hidden" | "scroll" | "auto";
49
50
  export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" | "visibleStroke" | "visible" | "painted" | "fill" | "stroke" | "all" | "inherit";
50
51
  export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end";
51
52
  declare const propertiesBox: {
52
53
  gap: {
53
- none: string; /**
54
- * The gridTemplateRows property defines the line names and track sizing functions of the grid rows.
55
- */
56
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
54
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
57
55
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
56
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
57
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
60
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
61
61
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
64
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
65
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
66
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
67
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
64
68
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
69
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
65
70
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
66
71
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
67
72
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -69,18 +74,22 @@ declare const propertiesBox: {
69
74
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
70
75
  };
71
76
  gridGap: {
72
- none: string; /**
73
- * The gridTemplateRows property defines the line names and track sizing functions of the grid rows.
74
- */
75
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
77
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
76
78
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
77
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
79
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
78
80
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
79
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
81
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
82
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
83
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
80
84
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
85
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
86
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
81
87
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
88
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
82
89
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
90
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
83
91
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
92
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
84
93
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
85
94
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
86
95
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -112,7 +121,9 @@ declare const propertiesBox: {
112
121
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
113
122
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
114
123
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
115
- "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
124
+ "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
125
+ * The bottom property participates in setting the vertical position of a positioned box.
126
+ */
116
127
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
117
128
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
118
129
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -138,7 +149,9 @@ declare const propertiesBox: {
138
149
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
139
150
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
140
151
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
141
- "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
152
+ "neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
153
+ * The bottom property participates in setting the vertical position of a positioned box.
154
+ */
142
155
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
143
156
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
144
157
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -163,19 +176,48 @@ declare const propertiesBox: {
163
176
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
164
177
  transparent: string;
165
178
  };
179
+ borderRadius: {
180
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
181
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
182
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
183
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
184
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
185
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
186
+ "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
187
+ full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
188
+ base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
+ half: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
190
+ none: string;
191
+ };
192
+ borderWidth: {
193
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
194
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
195
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
198
+ none: string;
199
+ };
166
200
  borderStyle: BorderStyle[];
167
201
  boxSizing: BoxSizing[];
168
202
  cursor: Cursor[];
169
- space: {
203
+ spacing: {
170
204
  none: string;
171
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
205
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
172
206
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
207
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
173
208
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
174
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
209
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
210
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
211
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
175
212
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
213
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
214
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
176
215
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
216
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
177
217
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
218
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
178
219
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
220
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
179
221
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
180
222
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
181
223
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -183,15 +225,22 @@ declare const propertiesBox: {
183
225
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
184
226
  };
185
227
  margin: {
186
- none: string;
187
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
228
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
188
229
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
230
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
231
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
190
- "2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
+ "2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
233
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
234
+ "3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
191
235
  "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
236
+ "4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
237
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
192
238
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
239
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
193
240
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
241
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
194
242
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
243
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
195
244
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
196
245
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
197
246
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -204,9 +253,12 @@ declare const propertiesBox: {
204
253
  overflowX: Overflow[];
205
254
  overflowY: Overflow[];
206
255
  boxShadow: {
207
- card: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
208
- popover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
209
- modal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
256
+ "0": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
257
+ "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
258
+ "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
259
+ "3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
260
+ "4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
261
+ "5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
210
262
  focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
211
263
  };
212
264
  transitionDuration: {
@@ -216,16 +268,31 @@ declare const propertiesBox: {
216
268
  slower: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
217
269
  };
218
270
  transitionTimingFunction: TransitionTiming[];
271
+ textDecoration: TextDecoration[];
272
+ zIndex: {
273
+ "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
274
+ "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
275
+ "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
276
+ "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
277
+ "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
278
+ "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
279
+ "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
280
+ "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
281
+ "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
282
+ };
219
283
  };
220
284
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
285
+ export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
286
+ export type BoxBorderWidthProperties = keyof typeof propertiesBox.borderWidth;
221
287
  export type BoxBackgroundColorProperties = keyof typeof propertiesBox.backgroundColor;
222
288
  export type BoxColorProperties = keyof typeof propertiesBox.color;
223
289
  export type BoxShadowProperties = keyof typeof propertiesBox.boxShadow;
224
- export type BoxSpaceProperties = keyof typeof propertiesBox.space;
290
+ export type BoxSpacingProperties = keyof typeof propertiesBox.spacing;
225
291
  export type BoxMarginProperties = keyof typeof propertiesBox.margin;
226
292
  export type BoxGapProperties = keyof typeof propertiesBox.gap;
227
293
  export type BoxGridGapProperties = keyof typeof propertiesBox.gridGap;
228
- export type TransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
294
+ export type BoxZIndexProperties = keyof typeof propertiesBox.zIndex;
295
+ export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
229
296
  export interface BoxConditions<T> extends Conditions<T> {
230
297
  focus?: T;
231
298
  focusWithin?: T;
@@ -380,11 +447,19 @@ export interface BoxSprinkle {
380
447
  /**
381
448
  * The borderRadius property rounds the corners of an box's outer border edge.
382
449
  */
383
- borderRadius?: string | BoxConditions<string>;
450
+ borderRadius?: BoxBorderRadiusProperties | BoxConditions<BoxBorderRadiusProperties>;
384
451
  /**
385
452
  * The borderWidth property sets the width of an box's border.
386
453
  */
387
- borderWidth?: string | BoxConditions<string>;
454
+ borderWidth?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
455
+ /**
456
+ * The borderWidthX shorthand property defines the width of the element's border on the left and right.
457
+ */
458
+ borderWidthX?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
459
+ /**
460
+ * The borderWidthY shorthand property defines the width of the element's border on the top and bottom.
461
+ */
462
+ borderWidthY?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
388
463
  /**
389
464
  * The borderColor property sets the color of the box's four borders.
390
465
  */
@@ -405,23 +480,23 @@ export interface BoxSprinkle {
405
480
  /**
406
481
  * The padding properties are used to generate space around an box's content area.
407
482
  */
408
- padding?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
483
+ padding?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
409
484
  /**
410
485
  * The paddingTop property sets the height of the padding area on the top of an box.
411
486
  */
412
- paddingTop?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
487
+ paddingTop?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
413
488
  /**
414
489
  * The paddingBottom property sets the height of the padding area on the bottom of an box.
415
490
  */
416
- paddingBottom?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
491
+ paddingBottom?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
417
492
  /**
418
493
  * The paddingLeft property sets the width of the padding area to the left of an box.
419
494
  */
420
- paddingLeft?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
495
+ paddingLeft?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
421
496
  /**
422
497
  * The paddingLeft property sets the width of the padding area to the right of an box.
423
498
  */
424
- paddingRight?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
499
+ paddingRight?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
425
500
  /**
426
501
  * The margin shorthand property sets the margin area on all four sides of an box.
427
502
  */
@@ -457,11 +532,11 @@ export interface BoxSprinkle {
457
532
  /**
458
533
  * 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.
459
534
  */
460
- transitionDuration?: TransitionDurationProperties | BoxConditions<TransitionDurationProperties>;
535
+ transitionDuration?: BoxTransitionDurationProperties | BoxConditions<BoxTransitionDurationProperties>;
461
536
  /**
462
537
  * The zIndex property specifies the stack order of the box.
463
538
  */
464
- zIndex?: number | BoxConditions<number>;
539
+ zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
465
540
  /**
466
541
  * The backgroundImage property sets one or more background images on an element.
467
542
  */
@@ -480,6 +555,10 @@ export interface BoxSprinkle {
480
555
  * The backgroundRepeat property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
481
556
  */
482
557
  backgroundRepeat?: string | BoxConditions<string>;
558
+ /**
559
+ * The textDecoration shorthand property sets the appearance of decorative lines on text.
560
+ */
561
+ textDecoration?: TextDecoration | BoxConditions<TextDecoration>;
483
562
  /**
484
563
  * The backgroundSize property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
485
564
  */
@@ -487,39 +566,39 @@ export interface BoxSprinkle {
487
566
  /**
488
567
  * The p shorthand property sets the margin area on all four sides of an box.
489
568
  */
490
- p?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
569
+ p?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
491
570
  /**
492
571
  * The pl shorthand property sets the width of the padding area to the left of an box.
493
572
  */
494
- pl?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
573
+ pl?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
495
574
  /**
496
575
  * The pl shorthand property sets the width of the padding area to the right of an box.
497
576
  */
498
- pr?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
577
+ pr?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
499
578
  /**
500
579
  * The pt shorthand property sets the height of the padding area on the top of an box.
501
580
  */
502
- pt?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
581
+ pt?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
503
582
  /**
504
583
  * The pb shorthand property sets the height of the padding area on the botton of an box.
505
584
  */
506
- pb?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
585
+ pb?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
507
586
  /**
508
587
  * The px shorthand property defines the width of the left and right padding area of a box.
509
588
  */
510
- px?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
589
+ px?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
511
590
  /**
512
591
  * The py pt shorthand property sets the height of the padding area at the top and bottom of a box.
513
592
  */
514
- py?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
593
+ py?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
515
594
  /**
516
595
  * The paddingX shorthand property defines the width of the left and right padding area of a box.
517
596
  */
518
- paddingX?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
597
+ paddingX?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
519
598
  /**
520
599
  * The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.
521
600
  */
522
- paddingY?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
601
+ paddingY?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
523
602
  /**
524
603
  * The m shorthand property sets the margin area on all four sides of an box.
525
604
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/box",
3
- "version": "3.1.0",
3
+ "version": "4.0.0-rc.1",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -26,7 +26,8 @@
26
26
  "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
27
27
  },
28
28
  "devDependencies": {
29
- "@nimbus-ds/webpack": "^1.1.0",
29
+ "@nimbus-ds/webpack": "^1.3.0",
30
30
  "@vanilla-extract/dynamic": "^2.0.2"
31
- }
31
+ },
32
+ "stableVersion": "3.2.0"
32
33
  }