@nimbus-ds/box 3.2.0 → 4.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/index.d.ts +134 -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,35 @@ 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 borderTopWidth property defines the width of the border at the top of a box.
457
+ */
458
+ borderTopWidth: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
459
+ /**
460
+ * The borderBottomWidth property defines the width of the border at the bottom of a box.
461
+ */
462
+ borderBottomWidth: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
463
+ /**
464
+ * The borderLeftWidth property defines the width of the border at the left of a box.
465
+ */
466
+ borderLeftWidth: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
467
+ /**
468
+ * The borderRightWidth property defines the width of the border at the right of a box.
469
+ */
470
+ borderRightWidth: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
471
+ /**
472
+ * The borderWidthX shorthand property defines the width of the element's border on the left and right.
473
+ */
474
+ borderWidthX?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
475
+ /**
476
+ * The borderWidthY shorthand property defines the width of the element's border on the top and bottom.
477
+ */
478
+ borderWidthY?: BoxBorderWidthProperties | BoxConditions<BoxBorderWidthProperties>;
394
479
  /**
395
480
  * The borderColor property sets the color of the box's four borders.
396
481
  */
@@ -411,23 +496,23 @@ export interface BoxSprinkle {
411
496
  /**
412
497
  * The padding properties are used to generate space around an box's content area.
413
498
  */
414
- padding?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
499
+ padding?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
415
500
  /**
416
501
  * The paddingTop property sets the height of the padding area on the top of an box.
417
502
  */
418
- paddingTop?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
503
+ paddingTop?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
419
504
  /**
420
505
  * The paddingBottom property sets the height of the padding area on the bottom of an box.
421
506
  */
422
- paddingBottom?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
507
+ paddingBottom?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
423
508
  /**
424
509
  * The paddingLeft property sets the width of the padding area to the left of an box.
425
510
  */
426
- paddingLeft?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
511
+ paddingLeft?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
427
512
  /**
428
513
  * The paddingLeft property sets the width of the padding area to the right of an box.
429
514
  */
430
- paddingRight?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
515
+ paddingRight?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
431
516
  /**
432
517
  * The margin shorthand property sets the margin area on all four sides of an box.
433
518
  */
@@ -463,11 +548,11 @@ export interface BoxSprinkle {
463
548
  /**
464
549
  * 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
550
  */
466
- transitionDuration?: TransitionDurationProperties | BoxConditions<TransitionDurationProperties>;
551
+ transitionDuration?: BoxTransitionDurationProperties | BoxConditions<BoxTransitionDurationProperties>;
467
552
  /**
468
553
  * The zIndex property specifies the stack order of the box.
469
554
  */
470
- zIndex?: number | BoxConditions<number>;
555
+ zIndex?: BoxZIndexProperties | BoxConditions<BoxZIndexProperties>;
471
556
  /**
472
557
  * The backgroundImage property sets one or more background images on an element.
473
558
  */
@@ -497,39 +582,39 @@ export interface BoxSprinkle {
497
582
  /**
498
583
  * The p shorthand property sets the margin area on all four sides of an box.
499
584
  */
500
- p?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
585
+ p?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
501
586
  /**
502
587
  * The pl shorthand property sets the width of the padding area to the left of an box.
503
588
  */
504
- pl?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
589
+ pl?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
505
590
  /**
506
591
  * The pl shorthand property sets the width of the padding area to the right of an box.
507
592
  */
508
- pr?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
593
+ pr?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
509
594
  /**
510
595
  * The pt shorthand property sets the height of the padding area on the top of an box.
511
596
  */
512
- pt?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
597
+ pt?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
513
598
  /**
514
599
  * The pb shorthand property sets the height of the padding area on the botton of an box.
515
600
  */
516
- pb?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
601
+ pb?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
517
602
  /**
518
603
  * The px shorthand property defines the width of the left and right padding area of a box.
519
604
  */
520
- px?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
605
+ px?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
521
606
  /**
522
607
  * The py pt shorthand property sets the height of the padding area at the top and bottom of a box.
523
608
  */
524
- py?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
609
+ py?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
525
610
  /**
526
611
  * The paddingX shorthand property defines the width of the left and right padding area of a box.
527
612
  */
528
- paddingX?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
613
+ paddingX?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
529
614
  /**
530
615
  * The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.
531
616
  */
532
- paddingY?: BoxSpaceProperties | BoxConditions<BoxSpaceProperties>;
617
+ paddingY?: BoxSpacingProperties | BoxConditions<BoxSpacingProperties>;
533
618
  /**
534
619
  * The m shorthand property sets the margin area on all four sides of an box.
535
620
  */
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.2",
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
  }