@nimbus-ds/box 4.0.0 → 4.2.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.
- package/CHANGELOG.md +9 -0
- package/dist/CHANGELOG.md +146 -0
- package/dist/README.md +65 -0
- package/dist/index.d.ts +100 -12
- package/dist/index.js +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
A low-level utility component that accepts styled system props to enable custom theme-aware styling
|
|
4
4
|
|
|
5
|
+
## 2023-08-04 `4.1.0`
|
|
6
|
+
|
|
7
|
+
#### 🎉 New features
|
|
8
|
+
|
|
9
|
+
- Added `fontSize` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
|
|
10
|
+
- Added `fontWeight` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
|
|
11
|
+
- Added `lineHeight` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
|
|
12
|
+
- Added `textAlign` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
|
|
13
|
+
|
|
5
14
|
## 2023-05-18 `4.0.0`
|
|
6
15
|
|
|
7
16
|
#### 🛠 Breaking changes
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
A low-level utility component that accepts styled system props to enable custom theme-aware styling
|
|
4
|
+
|
|
5
|
+
## 2023-08-04 `4.1.0`
|
|
6
|
+
|
|
7
|
+
#### 🎉 New features
|
|
8
|
+
|
|
9
|
+
- Added `fontSize` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
|
|
10
|
+
- Added `fontWeight` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
|
|
11
|
+
- Added `lineHeight` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
|
|
12
|
+
- Added `textAlign` property to the Component `Box` API. ([#184](https://github.com/TiendaNube/nimbus-design-system/pull/184) by [@juniorconquista](https://github.com/juniorconquista))
|
|
13
|
+
|
|
14
|
+
## 2023-05-18 `4.0.0`
|
|
15
|
+
|
|
16
|
+
#### 🛠 Breaking changes
|
|
17
|
+
|
|
18
|
+
- Removed `level-` prefix from `boxShadow` component API property. ([#162](https://github.com/TiendaNube/nimbus-design-system/pull/162) by [@juniorconquista](https://github.com/juniorconquista))
|
|
19
|
+
|
|
20
|
+
## 2023-03-31 `3.2.0`
|
|
21
|
+
|
|
22
|
+
### 🎉 New features
|
|
23
|
+
|
|
24
|
+
- Added `textDecoration` property to the Component. ([#136](https://github.com/TiendaNube/nimbus-design-system/pull/136) by [@juniorconquista](https://github.com/juniorconquista))
|
|
25
|
+
|
|
26
|
+
## 2023-03-24 `3.1.0`
|
|
27
|
+
|
|
28
|
+
### 💡 Others
|
|
29
|
+
|
|
30
|
+
- Adjusted the component properties interface to use `ComponentPropsWithRef` and include the `as` prop in the output interface. ([#134](https://github.com/TiendaNube/nimbus-design-system/pull/134) by [@juniorconquista](https://github.com/juniorconquista))
|
|
31
|
+
|
|
32
|
+
## 2023-03-13 `3.0.0`
|
|
33
|
+
|
|
34
|
+
### 🛠 Breaking changes
|
|
35
|
+
|
|
36
|
+
- Changed the `backgroundColor` properties to `primary-interactive`, `primary-surface`, `primary-surfaceHighlight`, `primary-textLow`, `success-interactive`, `success-surface`, `success-surfaceHighlight`, `success-textLow`, `warning-interactive`, `warning-surface`, `warning-surfaceHighlight`, `warning-textLow`, `danger-interactive`, `danger-surface`, `danger-surfaceHighlight`, `danger-textLow`, `neutral-background`, `neutral-interactive`, `neutral-surface`, `neutral-surfaceHighlight`, `neutral-surfaceDisabled` and `neutral-textLow`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
37
|
+
- Changed the `color` properties to `primary-interactive`, `primary-surface`, `primary-surfaceHighlight`, `primary-textLow`, `success-interactive`, `success-surface`, `success-surfaceHighlight`, `success-textLow`, `warning-interactive`, `warning-surface`, `warning-surfaceHighlight`, `warning-textLow`, `danger-interactive`, `danger-surface`, `danger-surfaceHighlight`, `danger-textLow`, `neutral-background`, `neutral-interactive`, `neutral-surface`, `neutral-surfaceHighlight`, `neutral-surfaceDisabled` and `neutral-textLow`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
38
|
+
- Changed the `borderColor` properties to `primary-interactive`, `primary-surface`, `primary-surfaceHighlight`, `success-interactive`, `success-surface`, `success-surfaceHighlight`, `warning-interactive`, `warning-surface`, `warning-surfaceHighlight`, `danger-interactive`, `danger-surface`, `danger-surfaceHighlight`, `neutral-interactive`, `neutral-surface` and `neutral-surfaceHighlight`. ([#110](https://github.com/TiendaNube/nimbus-design-system/pull/110) by [@juniorconquista](https://github.com/juniorconquista))
|
|
39
|
+
|
|
40
|
+
## 2023-02-23 `2.7.0`
|
|
41
|
+
|
|
42
|
+
### 🎉 New features
|
|
43
|
+
|
|
44
|
+
- Added server side-rendering support to component. ([#105](https://github.com/TiendaNube/nimbus-design-system/pull/105) by [@juniorconquista](https://github.com/juniorconquista))
|
|
45
|
+
- Added `"border-box"` as default value for `boxSizing` property. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
|
|
46
|
+
- Added `backgroundImage`, `zIndex`, `backgroundPosition`, `backgroundBlendMode`, `backgroundRepeat`, `backgroundSize`, `color`, `minHeight`, `minWidth`, `flexGrow`, `order` and `alignSelf` properties to component sprinkles. ([#106](https://github.com/TiendaNube/nimbus-design-system/pull/106) by [@juanchigallego](https://github.com/juanchigallego))
|
|
47
|
+
|
|
48
|
+
## 2023-02-13 `2.6.0`
|
|
49
|
+
|
|
50
|
+
### 💡 Others
|
|
51
|
+
|
|
52
|
+
- Adjusted component typing and documentation. ([#89](https://github.com/TiendaNube/nimbus-design-system/pull/89) by [@juanchigallego](https://github.com/juanchigallego))
|
|
53
|
+
|
|
54
|
+
## 2023-02-10 `2.5.0`
|
|
55
|
+
|
|
56
|
+
### 🎉 New features
|
|
57
|
+
|
|
58
|
+
- Added `none` as option in `display` sprinkles type. ([#88](https://github.com/TiendaNube/nimbus-design-system/pull/88) by [@juanchigallego](https://github.com/juanchigallego))
|
|
59
|
+
|
|
60
|
+
## 2023-02-10 `2.4.0`
|
|
61
|
+
|
|
62
|
+
### 🎉 New features
|
|
63
|
+
|
|
64
|
+
- Added `boxShadow`, `transitionDuration`, `transitionDelay`, `transitionTimingFunction` and `transitionProperty` to component sprinkles. ([#87](https://github.com/TiendaNube/nimbus-design-system/pull/87) by [@juanchigallego](https://github.com/juanchigallego))
|
|
65
|
+
- Added `not-allowed` and `grab` options to `cursor` property. ([#87](https://github.com/TiendaNube/nimbus-design-system/pull/87) by [@juanchigallego](https://github.com/juanchigallego))
|
|
66
|
+
- Added `disabled` state to conditions. ([#87](https://github.com/TiendaNube/nimbus-design-system/pull/87) by [@juanchigallego](https://github.com/juanchigallego))
|
|
67
|
+
- Added `transparent` option to `backgroundColor` and `borderColor` sprinkles. ([#87](https://github.com/TiendaNube/nimbus-design-system/pull/87) by [@juanchigallego](https://github.com/juanchigallego))
|
|
68
|
+
|
|
69
|
+
## 2023-02-09 `2.3.0`
|
|
70
|
+
|
|
71
|
+
### 🎉 New features
|
|
72
|
+
|
|
73
|
+
- Added properties present in the `@nimbus-ds/stack` package to the component because `Stack` has been deprecated. ([#83](https://github.com/TiendaNube/nimbus-design-system/pull/83) by [@juniorconquista](https://github.com/juniorconquista))
|
|
74
|
+
|
|
75
|
+
## 2023-02-08 `2.2.0`
|
|
76
|
+
|
|
77
|
+
### 🎉 New features
|
|
78
|
+
|
|
79
|
+
- Added polymorphic typing support to component. ([#81](https://github.com/TiendaNube/nimbus-design-system/pull/81) by [@juniorconquista](https://github.com/juniorconquista))
|
|
80
|
+
- Added `as` property to the Component. ([#81](https://github.com/TiendaNube/nimbus-design-system/pull/81) by [@juniorconquista](https://github.com/juniorconquista))
|
|
81
|
+
- Added `auto` margin properties to the Component. ([#81](https://github.com/TiendaNube/nimbus-design-system/pull/81) by [@juniorconquista](https://github.com/juniorconquista))
|
|
82
|
+
|
|
83
|
+
## 2023-01-31 `2.1.0`
|
|
84
|
+
|
|
85
|
+
### 🎉 New features
|
|
86
|
+
|
|
87
|
+
- Add new sprinkles properties `overflow`, `position`, `maxHeight`, `maxWidth`, `top`, `bottom`, `left` and `right` to Component Story. ([#76](https://github.com/TiendaNube/nimbus-design-system/pull/76) by [@juanchigallego](https://github.com/juanchigallego))
|
|
88
|
+
|
|
89
|
+
## 2022-12-22 `2.0.0`
|
|
90
|
+
|
|
91
|
+
### 💡 Others
|
|
92
|
+
|
|
93
|
+
- Removed direct dependency on `nimbus-ds/styles` package from component build. ([#69](https://github.com/TiendaNube/nimbus-design-system/pull/69) by [@juniorconquista](https://github.com/juniorconquista))
|
|
94
|
+
|
|
95
|
+
## 2022-12-07 `1.2.0`
|
|
96
|
+
|
|
97
|
+
### 🎉 New features
|
|
98
|
+
|
|
99
|
+
- Changed build build to consume inner package `@nimbus-ds/webpack`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
100
|
+
|
|
101
|
+
### 📚 3rd party library updates
|
|
102
|
+
|
|
103
|
+
- Removed `terser-webpack-plugin@5.3.5`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
104
|
+
- Removed `ts-loader@9.3.1`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
105
|
+
- Removed `webpack-cli@4.10.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
106
|
+
- Removed `webpack@5.74.0`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
107
|
+
- Removed `typescript@4.7.4`. ([#63](https://github.com/TiendaNube/nimbus-design-system/pull/63) by [@juniorconquista](https://github.com/juniorconquista))
|
|
108
|
+
|
|
109
|
+
## 2022-11-24 `1.1.0`
|
|
110
|
+
|
|
111
|
+
### 🎉 New features
|
|
112
|
+
|
|
113
|
+
- Added `boxSizing` property to the Component. ([#58](https://github.com/TiendaNube/nimbus-design-system/pull/#58) by [@juniorconquista](https://github.com/juniorconquista))
|
|
114
|
+
|
|
115
|
+
### 💡 Others
|
|
116
|
+
|
|
117
|
+
- Fixed component documentation and typing. ([#58](https://github.com/TiendaNube/nimbus-design-system/pull/#58) by [@juniorconquista](https://github.com/juniorconquista))
|
|
118
|
+
|
|
119
|
+
## 2022-11-16 `1.0.2`
|
|
120
|
+
|
|
121
|
+
### 🐛 Bug fixes
|
|
122
|
+
|
|
123
|
+
- Added `box-sizing` to component styling. ([#56](https://github.com/TiendaNube/nimbus-design-system/pull/#56) by [@juniorconquista](https://github.com/juniorconquista))
|
|
124
|
+
|
|
125
|
+
## 2022-11-09 `1.0.1`
|
|
126
|
+
|
|
127
|
+
### 🐛 Bug fixes
|
|
128
|
+
|
|
129
|
+
- Fixed component property typing. ([#53](https://github.com/TiendaNube/nimbus-design-system/pull/#53) by [@juniorconquista](https://github.com/juniorconquista))
|
|
130
|
+
|
|
131
|
+
## 2022-10-11 `1.0.0`
|
|
132
|
+
|
|
133
|
+
### 📚 3rd party library updates
|
|
134
|
+
|
|
135
|
+
- Added `@vanilla-extract/dynamic@2.0.2`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
136
|
+
- Added `@vanilla-extract/webpack-plugin@2.1.11`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
137
|
+
- Added `terser-webpack-plugin@5.3.5`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
138
|
+
- Added `ts-loader@9.3.1`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
139
|
+
- Added `typescript@4.7.4`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
140
|
+
- Added `webpack@5.74.0`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
141
|
+
- Added `webpack-cli@4.10.0`. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
142
|
+
|
|
143
|
+
### 🎉 New features
|
|
144
|
+
|
|
145
|
+
- Added `width`, `height`, `borderRadius`, `borderWidth`, `backgroundColor`, `borderColor`, `paddings`and `margins` properties to the Component. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
|
146
|
+
- Added stories on Component. ([#38](https://github.com/TiendaNube/nimbus-design-system/pull/38) by [@juniorconquista](https://github.com/juniorconquista))
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# `@nimbus-ds/box`
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@nimbus-ds/box)
|
|
4
|
+
|
|
5
|
+
The Box component allows us to group and space elements or other components.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
$ yarn add @nimbus-ds/box
|
|
11
|
+
# or
|
|
12
|
+
$ npm install @nimbus-ds/box
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Anatomia do componente
|
|
16
|
+
|
|
17
|
+
O componente é composto por uma container com múltiplas propriedades visuais e de posicionamento.
|
|
18
|
+
|
|
19
|
+
## Guidelines
|
|
20
|
+
|
|
21
|
+
Utilizamos esse componente para agrupar outros componentes, delimitar tamanhos e posicionamentos, controlar propriedades visuais e de espaçamento.
|
|
22
|
+
|
|
23
|
+
### Controle visual
|
|
24
|
+
|
|
25
|
+
É possível controlar os aspectos visuais do box, modificando a cor de background, espessura, radius, estilo e cor da borda. O componente também possui um controle visual responsivo, que possibilita a definição de propriedades visuais diferentes para distintas resolução.
|
|
26
|
+
|
|
27
|
+
### Controle de posicionamento
|
|
28
|
+
|
|
29
|
+
Também é possível controlar os espaçamentos internos (paddings) e os espaçamentos externos (margens) em relação a elementos que estão ao redor.
|
|
30
|
+
|
|
31
|
+
### Recomendações de uso
|
|
32
|
+
|
|
33
|
+
- Construir containers
|
|
34
|
+
- Agrupar componentes
|
|
35
|
+
- Personalizar fundos e bordas
|
|
36
|
+
- Posicionar componentes
|
|
37
|
+
|
|
38
|
+
### Suporte polimórfico
|
|
39
|
+
|
|
40
|
+
Esse componente pode ser renderizado como qualquer elemento HTML ou componente React, usando a propriedade `as`. Essa funcção permite construir diferentes elementos aproveitando a flexibilidade do componente Box e mantendo um bom nível de semántica HTML.
|
|
41
|
+
|
|
42
|
+
### Property abbreviations
|
|
43
|
+
|
|
44
|
+
Component properties have abbreviations to make them easier to use, they
|
|
45
|
+
are applicable on paddings, margins and their positioning.
|
|
46
|
+
|
|
47
|
+
- m = margin
|
|
48
|
+
- p = padding
|
|
49
|
+
- r = right
|
|
50
|
+
- l = left
|
|
51
|
+
- t = top
|
|
52
|
+
- b = bottom
|
|
53
|
+
- x = left and right
|
|
54
|
+
- y = top and bottom
|
|
55
|
+
|
|
56
|
+
### Examples of use:
|
|
57
|
+
|
|
58
|
+
- ml = marginLeft
|
|
59
|
+
- pb = paddingBottom
|
|
60
|
+
- py = paddingY
|
|
61
|
+
- mx = marginX
|
|
62
|
+
|
|
63
|
+
## Usage
|
|
64
|
+
|
|
65
|
+
View docs [here](https://nimbus.nuvemshop.com.br/documentation/atomic-components/box).
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// Generated by dts-bundle-generator v7.
|
|
1
|
+
// Generated by dts-bundle-generator v7.2.0
|
|
2
2
|
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { ComponentPropsWithRef, HTMLAttributes, ReactNode } from 'react';
|
|
@@ -44,6 +44,7 @@ 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 TextAlign = "left" | "right" | "center" | "justify";
|
|
47
48
|
export type TextDecoration = "none" | "underline";
|
|
48
49
|
export type Position = "absolute" | "fixed" | "relative" | "static" | "sticky";
|
|
49
50
|
export type Overflow = "visible" | "hidden" | "scroll" | "auto";
|
|
@@ -98,9 +99,7 @@ declare const propertiesBox: {
|
|
|
98
99
|
"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
99
100
|
"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
100
101
|
};
|
|
101
|
-
display: Display[];
|
|
102
|
-
* The borderBottomWidth property defines the width of the border at the bottom of a box.
|
|
103
|
-
*/
|
|
102
|
+
display: Display[];
|
|
104
103
|
flexDirection: FlexDirection[];
|
|
105
104
|
flexWrap: FlexWrap[];
|
|
106
105
|
justifyContent: JustifyContent[];
|
|
@@ -125,9 +124,7 @@ declare const propertiesBox: {
|
|
|
125
124
|
"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
126
125
|
"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
127
126
|
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
128
|
-
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
129
|
-
* The bottom property participates in setting the vertical position of a positioned box.
|
|
130
|
-
*/
|
|
127
|
+
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
131
128
|
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
132
129
|
"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
133
130
|
"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -153,9 +150,7 @@ declare const propertiesBox: {
|
|
|
153
150
|
"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
154
151
|
"danger-textLow": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
155
152
|
"neutral-background": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
156
|
-
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
157
|
-
* The bottom property participates in setting the vertical position of a positioned box.
|
|
158
|
-
*/
|
|
153
|
+
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
159
154
|
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
160
155
|
"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
161
156
|
"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
@@ -177,6 +172,7 @@ declare const propertiesBox: {
|
|
|
177
172
|
"danger-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
178
173
|
"neutral-interactive": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
179
174
|
"neutral-surface": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
175
|
+
"neutral-surfaceDisabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
180
176
|
"neutral-surfaceHighlight": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
181
177
|
transparent: string;
|
|
182
178
|
};
|
|
@@ -281,10 +277,79 @@ declare const propertiesBox: {
|
|
|
281
277
|
"400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
282
278
|
"500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
283
279
|
"600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
284
|
-
"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
280
|
+
"700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`; /**
|
|
281
|
+
* The pointerEvents property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
|
|
282
|
+
*/
|
|
285
283
|
"800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
286
284
|
"900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
287
285
|
};
|
|
286
|
+
textAlign: TextAlign[];
|
|
287
|
+
fontWeight: {
|
|
288
|
+
regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
289
|
+
medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
290
|
+
bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
291
|
+
};
|
|
292
|
+
fontSize: {
|
|
293
|
+
"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
294
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
295
|
+
"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
296
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
297
|
+
"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
298
|
+
"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
299
|
+
"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
300
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
301
|
+
"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
302
|
+
"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
303
|
+
"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
304
|
+
"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
305
|
+
"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
306
|
+
"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
307
|
+
"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
308
|
+
"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
309
|
+
"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
310
|
+
"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
311
|
+
"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
312
|
+
"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
313
|
+
"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
314
|
+
h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
315
|
+
h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
316
|
+
h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
317
|
+
h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
318
|
+
h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
319
|
+
h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
320
|
+
};
|
|
321
|
+
lineHeight: {
|
|
322
|
+
"0-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
323
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
324
|
+
"1-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
325
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
326
|
+
"2-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
327
|
+
"3": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
328
|
+
"3-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
329
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
330
|
+
"4-5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
331
|
+
"5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
332
|
+
"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
333
|
+
"7": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
334
|
+
"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
335
|
+
"9": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
336
|
+
"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
337
|
+
"11": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
338
|
+
"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
339
|
+
"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
340
|
+
"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
341
|
+
"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
342
|
+
"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
343
|
+
h1: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
344
|
+
h2: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
345
|
+
h3: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
346
|
+
h4: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
347
|
+
h5: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
348
|
+
h6: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
349
|
+
}; /**
|
|
350
|
+
* The boxSizing property sets how the total width and height of an box is calculated.
|
|
351
|
+
* @default border-box
|
|
352
|
+
*/
|
|
288
353
|
};
|
|
289
354
|
export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
|
|
290
355
|
export type BoxBorderRadiusProperties = keyof typeof propertiesBox.borderRadius;
|
|
@@ -298,6 +363,9 @@ export type BoxGapProperties = keyof typeof propertiesBox.gap;
|
|
|
298
363
|
export type BoxGridGapProperties = keyof typeof propertiesBox.gridGap;
|
|
299
364
|
export type BoxZIndexProperties = keyof typeof propertiesBox.zIndex;
|
|
300
365
|
export type BoxTransitionDurationProperties = keyof typeof propertiesBox.transitionDuration;
|
|
366
|
+
export type BoxFontSizeProperties = keyof typeof propertiesBox.fontSize;
|
|
367
|
+
export type BoxFontWeightProperties = keyof typeof propertiesBox.fontWeight;
|
|
368
|
+
export type BoxLineHeightProperties = keyof typeof propertiesBox.lineHeight;
|
|
301
369
|
export interface BoxConditions<T> extends Conditions<T> {
|
|
302
370
|
focus?: T;
|
|
303
371
|
focusWithin?: T;
|
|
@@ -656,10 +724,30 @@ export interface BoxSprinkle {
|
|
|
656
724
|
* The marginY property defines the margin area on the top and bottom of a box
|
|
657
725
|
*/
|
|
658
726
|
marginY?: BoxMarginProperties | BoxConditions<BoxMarginProperties>;
|
|
727
|
+
/**
|
|
728
|
+
* The fontSize property sets the size of the box.
|
|
729
|
+
* @default base
|
|
730
|
+
*/
|
|
731
|
+
fontSize?: BoxFontSizeProperties | BoxConditions<BoxFontSizeProperties>;
|
|
732
|
+
/**
|
|
733
|
+
* The fontWeight property sets how thick or thin characters in box should be displayed.
|
|
734
|
+
* @default regular
|
|
735
|
+
*/
|
|
736
|
+
fontWeight?: BoxFontWeightProperties | BoxConditions<BoxFontWeightProperties>;
|
|
737
|
+
/**
|
|
738
|
+
* The lineHeight property specifies the line height of the box.
|
|
739
|
+
* @default base
|
|
740
|
+
*/
|
|
741
|
+
lineHeight?: BoxLineHeightProperties | BoxConditions<BoxLineHeightProperties>;
|
|
742
|
+
/**
|
|
743
|
+
* The textAlign property specifies the horizontal alignment of box.
|
|
744
|
+
* @default left
|
|
745
|
+
*/
|
|
746
|
+
textAlign?: TextAlign | BoxConditions<TextAlign>;
|
|
659
747
|
}
|
|
660
748
|
export interface BoxProperties extends BoxSprinkle {
|
|
661
749
|
/**
|
|
662
|
-
* Element to be rendered inside the Box component.
|
|
750
|
+
* Element to be rendered inside the Box component.
|
|
663
751
|
* @TJS-type React.ReactNode
|
|
664
752
|
*/
|
|
665
753
|
children?: ReactNode;
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/styles")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/styles"],t):"object"==typeof exports?exports["@nimbus-ds/box"]=t(require("react"),require("@nimbus-ds/styles")):e["@nimbus-ds/box"]=t(e.react,e["@nimbus-ds/styles"])}(global,((e,t)=>(()=>{"use strict";var r={521:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Box=void 0;const n=r(15).__importStar(r(156)),o=r(990),a=(0,n.forwardRef)((({className:e,style:t,as:r="div",boxSizing:a="border-box",...i},c)=>{const{className:u,style:l,otherProps:f}=o.box.sprinkle({...i,boxSizing:a});return n.default.createElement(r,{ref:c,className:u,style:l,...f})}));t.Box=a,a.displayName="Box"},15:(e,t,r)=>{r.r(t),r.d(t,{__assign:()=>a,__asyncDelegator:()=>O,__asyncGenerator:()=>m,__asyncValues:()=>g,__await:()=>w,__awaiter:()=>f,__classPrivateFieldGet:()=>T,__classPrivateFieldIn:()=>I,__classPrivateFieldSet:()=>E,__createBinding:()=>p,__decorate:()=>c,__exportStar:()=>y,__extends:()=>o,__generator:()=>s,__importDefault:()=>S,__importStar:()=>P,__makeTemplateObject:()=>x,__metadata:()=>l,__param:()=>u,__read:()=>b,__rest:()=>i,__spread:()=>v,__spreadArray:()=>_,__spreadArrays:()=>h,__values:()=>d});var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},n(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function i(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}function c(e,t,r,n){var o,a=arguments.length,i=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,n);else for(var c=e.length-1;c>=0;c--)(o=e[c])&&(i=(a<3?o(i):a>3?o(t,r,i):o(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i}function u(e,t){return function(r,n){t(r,n,e)}}function l(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function f(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{u(n.next(e))}catch(e){a(e)}}function c(e){try{u(n.throw(e))}catch(e){a(e)}}function u(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,c)}u((n=n.apply(e,t||[])).next())}))}function s(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(a){return function(c){return function(a){if(r)throw new TypeError("Generator is already executing.");for(;i;)try{if(r=1,n&&(o=2&a[0]?n.return:a[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,a[1])).done)return o;switch(n=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,n=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(6===a[0]&&i.label<o[1]){i.label=o[1],o=a;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(a);break}o[2]&&i.ops.pop(),i.trys.pop();continue}a=t.call(e,i)}catch(e){a=[6,e],n=0}finally{r=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}}var p=Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function y(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||p(t,e,r)}function d(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function b(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)i.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return i}function v(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(b(arguments[t]));return e}function h(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var a=arguments[t],i=0,c=a.length;i<c;i++,o++)n[o]=a[i];return n}function _(e,t,r){if(r||2===arguments.length)for(var n,o=0,a=t.length;o<a;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))}function w(e){return this instanceof w?(this.v=e,this):new w(e)}function m(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=r.apply(e,t||[]),a=[];return n={},i("next"),i("throw"),i("return"),n[Symbol.asyncIterator]=function(){return this},n;function i(e){o[e]&&(n[e]=function(t){return new Promise((function(r,n){a.push([e,t,r,n])>1||c(e,t)}))})}function c(e,t){try{(r=o[e](t)).value instanceof w?Promise.resolve(r.value.v).then(u,l):f(a[0][2],r)}catch(e){f(a[0][3],e)}var r}function u(e){c("next",e)}function l(e){c("throw",e)}function f(e,t){e(t),a.shift(),a.length&&c(a[0][0],a[0][1])}}function O(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,o){t[n]=e[n]?function(t){return(r=!r)?{value:w(e[n](t)),done:"return"===n}:o?o(t):t}:o}}function g(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=d(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,o){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,o,(t=e[r](t)).done,t.value)}))}}}function x(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var j=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function P(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&p(t,e,r);return j(t,e),t}function S(e){return e&&e.__esModule?e:{default:e}}function T(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function E(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}function I(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}},990:e=>{e.exports=t},156:t=>{t.exports=e}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={exports:{}};return r[e](a,a.exports,o),a.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{var e=a;Object.defineProperty(e,"__esModule",{value:!0}),e.Box=void 0;const t=o(521);var r=o(521);Object.defineProperty(e,"Box",{enumerable:!0,get:function(){return r.Box}}),e.default=t.Box})(),a})()));
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/styles")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/styles"],t):"object"==typeof exports?exports["@nimbus-ds/box"]=t(require("react"),require("@nimbus-ds/styles")):e["@nimbus-ds/box"]=t(e.react,e["@nimbus-ds/styles"])}(global,((e,t)=>(()=>{"use strict";var r={971:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Box=void 0;const n=r(769).__importStar(r(155)),o=r(367),a=(0,n.forwardRef)((({className:e,style:t,as:r="div",boxSizing:a="border-box",...i},c)=>{const{className:s,style:u,otherProps:l}=o.box.sprinkle({...i,boxSizing:a});return n.default.createElement(r,{ref:c,className:s,style:u,...l})}));t.Box=a,a.displayName="Box"},367:e=>{e.exports=t},155:t=>{t.exports=e},769:(e,t,r)=>{r.r(t),r.d(t,{__addDisposableResource:()=>B,__assign:()=>a,__asyncDelegator:()=>P,__asyncGenerator:()=>x,__asyncValues:()=>S,__await:()=>j,__awaiter:()=>d,__classPrivateFieldGet:()=>I,__classPrivateFieldIn:()=>A,__classPrivateFieldSet:()=>R,__createBinding:()=>b,__decorate:()=>c,__disposeResources:()=>M,__esDecorate:()=>u,__exportStar:()=>v,__extends:()=>o,__generator:()=>_,__importDefault:()=>k,__importStar:()=>D,__makeTemplateObject:()=>E,__metadata:()=>y,__param:()=>s,__propKey:()=>f,__read:()=>w,__rest:()=>i,__runInitializers:()=>l,__setFunctionName:()=>p,__spread:()=>m,__spreadArray:()=>O,__spreadArrays:()=>g,__values:()=>h,default:()=>z});var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},n(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function i(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}function c(e,t,r,n){var o,a=arguments.length,i=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,n);else for(var c=e.length-1;c>=0;c--)(o=e[c])&&(i=(a<3?o(i):a>3?o(t,r,i):o(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i}function s(e,t){return function(r,n){t(r,n,e)}}function u(e,t,r,n,o,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var c,s=n.kind,u="getter"===s?"get":"setter"===s?"set":"value",l=!t&&e?n.static?e:e.prototype:null,f=t||(l?Object.getOwnPropertyDescriptor(l,n.name):{}),p=!1,y=r.length-1;y>=0;y--){var d={};for(var _ in n)d[_]="access"===_?{}:n[_];for(var _ in n.access)d.access[_]=n.access[_];d.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var b=(0,r[y])("accessor"===s?{get:f.get,set:f.set}:f[u],d);if("accessor"===s){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(c=i(b.get))&&(f.get=c),(c=i(b.set))&&(f.set=c),(c=i(b.init))&&o.unshift(c)}else(c=i(b))&&("field"===s?o.unshift(c):f[u]=c)}l&&Object.defineProperty(l,n.name,f),p=!0}function l(e,t,r){for(var n=arguments.length>2,o=0;o<t.length;o++)r=n?t[o].call(e,r):t[o].call(e);return n?r:void 0}function f(e){return"symbol"==typeof e?e:"".concat(e)}function p(e,t,r){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:r?"".concat(r," ",t):t})}function y(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function d(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{s(n.next(e))}catch(e){a(e)}}function c(e){try{s(n.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,c)}s((n=n.apply(e,t||[])).next())}))}function _(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(c){return function(s){return function(c){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,c[0]&&(i=0)),i;)try{if(r=1,n&&(o=2&c[0]?n.return:c[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,c[1])).done)return o;switch(n=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return i.label++,{value:c[1],done:!1};case 5:i.label++,n=c[1],c=[0];continue;case 7:c=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){i=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){i.label=c[1];break}if(6===c[0]&&i.label<o[1]){i.label=o[1],o=c;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(c);break}o[2]&&i.ops.pop(),i.trys.pop();continue}c=t.call(e,i)}catch(e){c=[6,e],n=0}finally{r=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,s])}}}var b=Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function v(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||b(t,e,r)}function h(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function w(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)i.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return i}function m(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(w(arguments[t]));return e}function g(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var a=arguments[t],i=0,c=a.length;i<c;i++,o++)n[o]=a[i];return n}function O(e,t,r){if(r||2===arguments.length)for(var n,o=0,a=t.length;o<a;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))}function j(e){return this instanceof j?(this.v=e,this):new j(e)}function x(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=r.apply(e,t||[]),a=[];return n={},i("next"),i("throw"),i("return"),n[Symbol.asyncIterator]=function(){return this},n;function i(e){o[e]&&(n[e]=function(t){return new Promise((function(r,n){a.push([e,t,r,n])>1||c(e,t)}))})}function c(e,t){try{(r=o[e](t)).value instanceof j?Promise.resolve(r.value.v).then(s,u):l(a[0][2],r)}catch(e){l(a[0][3],e)}var r}function s(e){c("next",e)}function u(e){c("throw",e)}function l(e,t){e(t),a.shift(),a.length&&c(a[0][0],a[0][1])}}function P(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,o){t[n]=e[n]?function(t){return(r=!r)?{value:j(e[n](t)),done:!1}:o?o(t):t}:o}}function S(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=h(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,o){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,o,(t=e[r](t)).done,t.value)}))}}}function E(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var T=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function D(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&b(t,e,r);return T(t,e),t}function k(e){return e&&e.__esModule?e:{default:e}}function I(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function R(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}function A(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function B(e,t,r){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var n;if(r){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");n=t[Symbol.asyncDispose]}if(void 0===n){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");n=t[Symbol.dispose]}if("function"!=typeof n)throw new TypeError("Object not disposable.");e.stack.push({value:t,dispose:n,async:r})}else r&&e.stack.push({async:!0});return t}var F="function"==typeof SuppressedError?SuppressedError:function(e,t,r){var n=new Error(r);return n.name="SuppressedError",n.error=e,n.suppressed=t,n};function M(e){function t(t){e.error=e.hasError?new F(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}return function r(){for(;e.stack.length;){var n=e.stack.pop();try{var o=n.dispose&&n.dispose.call(n.value);if(n.async)return Promise.resolve(o).then(r,(function(e){return t(e),r()}))}catch(e){t(e)}}if(e.hasError)throw e.error}()}const z={__extends:o,__assign:a,__rest:i,__decorate:c,__param:s,__metadata:y,__awaiter:d,__generator:_,__createBinding:b,__exportStar:v,__values:h,__read:w,__spread:m,__spreadArrays:g,__spreadArray:O,__await:j,__asyncGenerator:x,__asyncDelegator:P,__asyncValues:S,__makeTemplateObject:E,__importStar:D,__importDefault:k,__classPrivateFieldGet:I,__classPrivateFieldSet:R,__classPrivateFieldIn:A,__addDisposableResource:B,__disposeResources:M}}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={exports:{}};return r[e](a,a.exports,o),a.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{var e=a;Object.defineProperty(e,"__esModule",{value:!0}),e.Box=void 0;const t=o(971);var r=o(971);Object.defineProperty(e,"Box",{enumerable:!0,get:function(){return r.Box}}),e.default=t.Box})(),a})()));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nimbus-ds/box",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.2.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"url": "https://github.com/TiendaNube/nimbus-design-system/issues"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@nimbus-ds/webpack": "^1.3
|
|
30
|
-
"@vanilla-extract/dynamic": "^2.0.
|
|
29
|
+
"@nimbus-ds/webpack": "^1.5.0-rc.3",
|
|
30
|
+
"@vanilla-extract/dynamic": "^2.0.3"
|
|
31
31
|
}
|
|
32
32
|
}
|