@nimbus-ds/box 3.2.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 +6 -0
  2. package/dist/index.d.ts +118 -49
  3. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -2,6 +2,12 @@
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
+
5
11
  ## 2023-03-31 `3.2.0`
6
12
 
7
13
  ### 🎉 New features
package/dist/index.d.ts CHANGED
@@ -51,16 +51,22 @@ export type PointerEvents = "auto" | "none" | "visiblePainted" | "visibleFill" |
51
51
  export type TransitionTiming = "ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end";
52
52
  declare const propertiesBox: {
53
53
  gap: {
54
- none: string;
55
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
54
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
56
55
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
57
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
56
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
57
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
- "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})`;
60
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})`;
61
64
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
65
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
66
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
67
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
63
68
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
69
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
64
70
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
65
71
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
66
72
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -68,16 +74,22 @@ declare const propertiesBox: {
68
74
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
69
75
  };
70
76
  gridGap: {
71
- none: string;
72
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
77
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
73
78
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
74
- "1,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
79
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
75
80
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
76
- "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})`;
77
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})`;
78
87
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
88
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
79
89
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
90
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
80
91
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
92
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
81
93
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
82
94
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
83
95
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -89,10 +101,6 @@ declare const propertiesBox: {
89
101
  flexWrap: FlexWrap[];
90
102
  justifyContent: JustifyContent[];
91
103
  alignItems: AlignItems[];
92
- /**
93
- * The boxSizing property sets how the total width and height of an box is calculated.
94
- * @default border-box
95
- */
96
104
  alignSelf: AlignSelf[];
97
105
  pointerEvents: PointerEvents[];
98
106
  backgroundColor: {
@@ -107,15 +115,15 @@ declare const propertiesBox: {
107
115
  "warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
108
116
  "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
109
117
  "warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
110
- "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
111
- * The min width property specifies the width of a box's content area.
112
- */
118
+ "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
113
119
  "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
114
120
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
115
121
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
116
122
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
117
123
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
118
- "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
+ */
119
127
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
120
128
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
121
129
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -135,15 +143,15 @@ declare const propertiesBox: {
135
143
  "warning-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
136
144
  "warning-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
137
145
  "warning-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
138
- "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
139
- * The min width property specifies the width of a box's content area.
140
- */
146
+ "warning-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
141
147
  "danger-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
142
148
  "danger-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
143
149
  "danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
144
150
  "danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
145
151
  "neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
146
- "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
+ */
147
155
  "neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
148
156
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
149
157
  "neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -168,19 +176,48 @@ declare const propertiesBox: {
168
176
  "neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
169
177
  transparent: string;
170
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
+ };
171
200
  borderStyle: BorderStyle[];
172
201
  boxSizing: BoxSizing[];
173
202
  cursor: Cursor[];
174
- space: {
203
+ spacing: {
175
204
  none: string;
176
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
205
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
177
206
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
207
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
178
208
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
179
- "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})`;
180
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})`;
181
215
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
216
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
182
217
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
218
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
183
219
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
220
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
184
221
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
185
222
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
186
223
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -188,15 +225,22 @@ declare const propertiesBox: {
188
225
  "20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
189
226
  };
190
227
  margin: {
191
- none: string;
192
- "0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
228
+ "0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
193
229
  "1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
230
+ "1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
194
231
  "2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
195
- "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})`;
196
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})`;
197
238
  "6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
239
+ "7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
198
240
  "8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
241
+ "9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
199
242
  "10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
243
+ "11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
200
244
  "12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
201
245
  "14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
202
246
  "16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -209,9 +253,12 @@ declare const propertiesBox: {
209
253
  overflowX: Overflow[];
210
254
  overflowY: Overflow[];
211
255
  boxShadow: {
212
- card: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
213
- popover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
214
- 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})`;
215
262
  focusRing: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
216
263
  };
217
264
  transitionDuration: {
@@ -222,16 +269,30 @@ declare const propertiesBox: {
222
269
  };
223
270
  transitionTimingFunction: TransitionTiming[];
224
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
+ };
225
283
  };
226
284
  export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
285
+ export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
286
+ export type BoxBorderWidthProperties = keyof typeof propertiesBox.borderWidth;
227
287
  export type BoxBackgroundColorProperties = keyof typeof propertiesBox.backgroundColor;
228
288
  export type BoxColorProperties = keyof typeof propertiesBox.color;
229
289
  export type BoxShadowProperties = keyof typeof propertiesBox.boxShadow;
230
- export type BoxSpaceProperties = keyof typeof propertiesBox.space;
290
+ export type BoxSpacingProperties = keyof typeof propertiesBox.spacing;
231
291
  export type BoxMarginProperties = keyof typeof propertiesBox.margin;
232
292
  export type BoxGapProperties = keyof typeof propertiesBox.gap;
233
293
  export type BoxGridGapProperties = keyof typeof propertiesBox.gridGap;
234
- export type TransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
294
+ export type BoxZIndexProperties = keyof typeof propertiesBox.zIndex;
295
+ export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
235
296
  export interface BoxConditions<T> extends Conditions<T> {
236
297
  focus?: T;
237
298
  focusWithin?: T;
@@ -386,11 +447,19 @@ export interface BoxSprinkle {
386
447
  /**
387
448
  * The borderRadius property rounds the corners of an box's outer border edge.
388
449
  */
389
- borderRadius?: string | BoxConditions<string>;
450
+ borderRadius?: BoxBorderRadiusProperties | BoxConditions<BoxBorderRadiusProperties>;
390
451
  /**
391
452
  * The borderWidth property sets the width of an box's border.
392
453
  */
393
- 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>;
394
463
  /**
395
464
  * The borderColor property sets the color of the box's four borders.
396
465
  */
@@ -411,23 +480,23 @@ export interface BoxSprinkle {
411
480
  /**
412
481
  * The padding properties are used to generate space around an box's content area.
413
482
  */
414
- padding?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
483
+ padding?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
415
484
  /**
416
485
  * The paddingTop property sets the height of the padding area on the top of an box.
417
486
  */
418
- paddingTop?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
487
+ paddingTop?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
419
488
  /**
420
489
  * The paddingBottom property sets the height of the padding area on the bottom of an box.
421
490
  */
422
- paddingBottom?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
491
+ paddingBottom?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
423
492
  /**
424
493
  * The paddingLeft property sets the width of the padding area to the left of an box.
425
494
  */
426
- paddingLeft?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
495
+ paddingLeft?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
427
496
  /**
428
497
  * The paddingLeft property sets the width of the padding area to the right of an box.
429
498
  */
430
- paddingRight?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
499
+ paddingRight?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
431
500
  /**
432
501
  * The margin shorthand property sets the margin area on all four sides of an box.
433
502
  */
@@ -463,11 +532,11 @@ export interface BoxSprinkle {
463
532
  /**
464
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.
465
534
  */
466
- transitionDuration?: TransitionDurationProperties | BoxConditions<TransitionDurationProperties>;
535
+ transitionDuration?: BoxTransitionDurationProperties | BoxConditions<BoxTransitionDurationProperties>;
467
536
  /**
468
537
  * The zIndex property specifies the stack order of the box.
469
538
  */
470
- zIndex?: number | BoxConditions<number>;
539
+ zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
471
540
  /**
472
541
  * The backgroundImage property sets one or more background images on an element.
473
542
  */
@@ -497,39 +566,39 @@ export interface BoxSprinkle {
497
566
  /**
498
567
  * The p shorthand property sets the margin area on all four sides of an box.
499
568
  */
500
- p?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
569
+ p?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
501
570
  /**
502
571
  * The pl shorthand property sets the width of the padding area to the left of an box.
503
572
  */
504
- pl?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
573
+ pl?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
505
574
  /**
506
575
  * The pl shorthand property sets the width of the padding area to the right of an box.
507
576
  */
508
- pr?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
577
+ pr?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
509
578
  /**
510
579
  * The pt shorthand property sets the height of the padding area on the top of an box.
511
580
  */
512
- pt?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
581
+ pt?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
513
582
  /**
514
583
  * The pb shorthand property sets the height of the padding area on the botton of an box.
515
584
  */
516
- pb?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
585
+ pb?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
517
586
  /**
518
587
  * The px shorthand property defines the width of the left and right padding area of a box.
519
588
  */
520
- px?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
589
+ px?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
521
590
  /**
522
591
  * The py pt shorthand property sets the height of the padding area at the top and bottom of a box.
523
592
  */
524
- py?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
593
+ py?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
525
594
  /**
526
595
  * The paddingX shorthand property defines the width of the left and right padding area of a box.
527
596
  */
528
- paddingX?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
597
+ paddingX?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
529
598
  /**
530
599
  * The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.
531
600
  */
532
- paddingY?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
601
+ paddingY?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
533
602
  /**
534
603
  * The m shorthand property sets the margin area on all four sides of an box.
535
604
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nimbus-ds/box",
3
- "version": "3.2.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
  }