@hopper-ui/styled-system 2.5.7 → 2.5.9

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 (26) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/dist/StyledSystemProvider.css +34 -34
  3. package/dist/StyledSystemProvider.js +7 -7
  4. package/dist/{chunk-F5OWVDUZ.js → chunk-CFRQACSV.js} +4 -4
  5. package/dist/{chunk-72SNKVM7.js → chunk-DEYOM7RO.js} +1 -1
  6. package/dist/{chunk-5VLOYYF6.js → chunk-FTG44ZZT.js} +1 -1
  7. package/dist/{chunk-ODJM2N7T.js → chunk-IRSZZGRZ.js} +1 -1
  8. package/dist/{chunk-TJAHZ3X2.js → chunk-RCLKEJV6.js} +1 -1
  9. package/dist/{chunk-32QSMUWN.js → chunk-VQE64NVW.js} +2 -1
  10. package/dist/{chunk-UGNCHZWK.js → chunk-W5QUPATS.js} +2 -2
  11. package/dist/global-styles/BodyStyleProvider.js +2 -2
  12. package/dist/html-wrappers/html.css +34 -34
  13. package/dist/html-wrappers/html.js +3 -3
  14. package/dist/html-wrappers/htmlElement.css +34 -34
  15. package/dist/html-wrappers/htmlElement.js +2 -2
  16. package/dist/index.css +34 -34
  17. package/dist/index.d.ts +1 -1
  18. package/dist/index.js +7 -7
  19. package/dist/styledSystemProps.d.ts +40 -38
  20. package/dist/styledSystemRootCssClass.js +1 -1
  21. package/dist/tokens/TokenProvider.js +2 -2
  22. package/dist/tokens/tokenMappings.d.ts +16 -16
  23. package/dist/useStyledSystem.css +31 -31
  24. package/dist/useStyledSystem.d.ts +3 -2
  25. package/dist/useStyledSystem.js +1 -1
  26. package/package.json +1 -1
package/dist/html-wrappers/htmlElement.css CHANGED
@@ -1,132 +1,132 @@
1
1
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/UseStyledSystem.module.css/#css-module-data */
2
- .UseStyledSystem-module__hop-b-hover___yp43p:hover {
2
+ .UseStyledSystem-module__hop-b-hover___-uv5U:hover {
3
3
  --hop-b-hover: initial;
4
4
  border: var(--hop-b-hover) !important;
5
5
  }
6
- .UseStyledSystem-module__hop-bb-hover___RQhQN:hover {
6
+ .UseStyledSystem-module__hop-bb-hover___Nw9pk:hover {
7
7
  --hop-bb-hover: initial;
8
8
  border-bottom: var(--hop-bb-hover) !important;
9
9
  }
10
- .UseStyledSystem-module__hop-bl-hover___7EGi3:hover {
10
+ .UseStyledSystem-module__hop-bl-hover___ScFa8:hover {
11
11
  --hop-bl-hover: initial;
12
12
  border-left: var(--hop-bl-hover) !important;
13
13
  }
14
- .UseStyledSystem-module__hop-br-hover___xgrqz:hover {
14
+ .UseStyledSystem-module__hop-br-hover___nyZRP:hover {
15
15
  --hop-br-hover: initial;
16
16
  border-right: var(--hop-br-hover) !important;
17
17
  }
18
- .UseStyledSystem-module__hop-bt-hover___OHEye:hover {
18
+ .UseStyledSystem-module__hop-bt-hover___mIvCc:hover {
19
19
  --hop-bt-hover: initial;
20
20
  border-top: var(--hop-bt-hover) !important;
21
21
  }
22
- .UseStyledSystem-module__hop-b-focus___VD53A:focus-visible {
22
+ .UseStyledSystem-module__hop-b-focus___QVDv2:focus-visible {
23
23
  --hop-b-focus: initial;
24
24
  border: var(--hop-b-focus) !important;
25
25
  }
26
- .UseStyledSystem-module__hop-bb-focus___XaONh:focus-visible {
26
+ .UseStyledSystem-module__hop-bb-focus___2wtGI:focus-visible {
27
27
  --hop-bb-focus: initial;
28
28
  border-bottom: var(--hop-bb-focus) !important;
29
29
  }
30
- .UseStyledSystem-module__hop-bl-focus___OEuiC:focus-visible {
30
+ .UseStyledSystem-module__hop-bl-focus___DdQyO:focus-visible {
31
31
  --hop-bl-focus: initial;
32
32
  border-left: var(--hop-bl-focus) !important;
33
33
  }
34
- .UseStyledSystem-module__hop-br-focus___fCHZT:focus-visible {
34
+ .UseStyledSystem-module__hop-br-focus___l6hbv:focus-visible {
35
35
  --hop-br-focus: initial;
36
36
  border-right: var(--hop-br-focus) !important;
37
37
  }
38
- .UseStyledSystem-module__hop-bt-focus___vLwaI:focus-visible {
38
+ .UseStyledSystem-module__hop-bt-focus___lIHzR:focus-visible {
39
39
  --hop-bt-focus: initial;
40
40
  border-top: var(--hop-bt-focus) !important;
41
41
  }
42
- .UseStyledSystem-module__hop-b-active___8lbw1:active {
42
+ .UseStyledSystem-module__hop-b-active___FX491:active {
43
43
  --hop-b-active: initial;
44
44
  border: var(--hop-b-active) !important;
45
45
  }
46
- .UseStyledSystem-module__hop-bb-active___0B2qX:active {
46
+ .UseStyledSystem-module__hop-bb-active___3p2de:active {
47
47
  --hop-bb-active: initial;
48
48
  border-bottom: var(--hop-bb-active) !important;
49
49
  }
50
- .UseStyledSystem-module__hop-bl-active___AVGYj:active {
50
+ .UseStyledSystem-module__hop-bl-active___bD5ln:active {
51
51
  --hop-bl-active: initial;
52
52
  border-left: var(--hop-bl-active) !important;
53
53
  }
54
- .UseStyledSystem-module__hop-br-active___SMFXO:active {
54
+ .UseStyledSystem-module__hop-br-active___Z2w-2:active {
55
55
  --hop-br-active: initial;
56
56
  border-right: var(--hop-br-active) !important;
57
57
  }
58
- .UseStyledSystem-module__hop-bt-active___FAWuS:active {
58
+ .UseStyledSystem-module__hop-bt-active___cXrGo:active {
59
59
  --hop-bt-active: initial;
60
60
  border-top: var(--hop-bt-active) !important;
61
61
  }
62
- .UseStyledSystem-module__hop-bg-hover___ejzLg:hover {
62
+ .UseStyledSystem-module__hop-bg-hover___IM2SP:hover {
63
63
  --hop-bg-hover: initial;
64
64
  background-color: var(--hop-bg-hover) !important;
65
65
  }
66
- .UseStyledSystem-module__hop-bg-focus___iOYnm:focus-visible {
66
+ .UseStyledSystem-module__hop-bg-focus___-8NKC:focus-visible {
67
67
  --hop-bg-focus: initial;
68
68
  background-color: var(--hop-bg-focus) !important;
69
69
  }
70
- .UseStyledSystem-module__hop-bg-active___jFl8D:active {
70
+ .UseStyledSystem-module__hop-bg-active___PbRjo:active {
71
71
  --hop-bg-active: initial;
72
72
  background-color: var(--hop-bg-active) !important;
73
73
  }
74
- .UseStyledSystem-module__hop-bs-hover___SyCGY:hover {
74
+ .UseStyledSystem-module__hop-bs-hover___uRazj:hover {
75
75
  --hop-bs-hover: initial;
76
76
  box-shadow: var(--hop-bs-hover) !important;
77
77
  }
78
- .UseStyledSystem-module__hop-bs-focus___SEOtN:focus-visible {
78
+ .UseStyledSystem-module__hop-bs-focus___WPb5b:focus-visible {
79
79
  --hop-bs-focus: initial;
80
80
  box-shadow: var(--hop-bs-focus) !important;
81
81
  }
82
- .UseStyledSystem-module__hop-bs-active___OtVm6:active {
82
+ .UseStyledSystem-module__hop-bs-active___d-Ztc:active {
83
83
  --hop-bs-active: initial;
84
84
  box-shadow: var(--hop-bs-active) !important;
85
85
  }
86
- .UseStyledSystem-module__hop-c-hover___x6iFT:hover {
86
+ .UseStyledSystem-module__hop-c-hover___jWw7H:hover {
87
87
  --hop-c-hover: initial;
88
88
  color: var(--hop-c-hover) !important;
89
89
  }
90
- .UseStyledSystem-module__hop-c-focus___15FZ-:focus-visible {
90
+ .UseStyledSystem-module__hop-c-focus___Y1k28:focus-visible {
91
91
  --hop-c-focus: initial;
92
92
  color: var(--hop-c-focus) !important;
93
93
  }
94
- .UseStyledSystem-module__hop-c-active___Ds0-z:active {
94
+ .UseStyledSystem-module__hop-c-active___9usqR:active {
95
95
  --hop-c-active: initial;
96
96
  color: var(--hop-c-active) !important;
97
97
  }
98
- .UseStyledSystem-module__hop-cs-hover___Ezvlz:hover {
98
+ .UseStyledSystem-module__hop-cs-hover___1iWyj:hover {
99
99
  --hop-cs-hover: initial;
100
100
  cursor: var(--hop-cs-hover) !important;
101
101
  }
102
- .UseStyledSystem-module__hop-f-hover___VwWAU:hover {
102
+ .UseStyledSystem-module__hop-f-hover___G8m3j:hover {
103
103
  --hop-f-hover: initial;
104
104
  fill: var(--hop-f-hover) !important;
105
105
  }
106
- .UseStyledSystem-module__hop-f-focus___GubJH:focus-visible {
106
+ .UseStyledSystem-module__hop-f-focus___S7xBy:focus-visible {
107
107
  --hop-f-focus: initial;
108
108
  fill: var(--hop-f-focus) !important;
109
109
  }
110
- .UseStyledSystem-module__hop-o-hover___nHInD:hover {
110
+ .UseStyledSystem-module__hop-o-hover___TuFfD:hover {
111
111
  --hop-o-hover: initial;
112
112
  opacity: var(--hop-o-hover) !important;
113
113
  }
114
- .UseStyledSystem-module__hop-o-focus___3nox7:focus-visible {
114
+ .UseStyledSystem-module__hop-o-focus___CYGDn:focus-visible {
115
115
  --hop-o-focus: initial;
116
116
  opacity: var(--hop-o-focus) !important;
117
117
  }
118
- .UseStyledSystem-module__hop-o-active___L0QI6:active {
118
+ .UseStyledSystem-module__hop-o-active___z5Riy:active {
119
119
  --hop-o-active: initial;
120
120
  opacity: var(--hop-o-active) !important;
121
121
  }
122
- .UseStyledSystem-module__hop-ol-focus___er-fd:focus-visible {
122
+ .UseStyledSystem-module__hop-ol-focus___-9JTf:focus-visible {
123
123
  --hop-ol-focus: initial;
124
124
  color: var(--hop-ol-focus) !important;
125
125
  }
126
126
 
127
127
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/html-wrappers/htmlElement.module.css/#css-module-data */
128
- :where(.htmlElement-module__hop-HtmlElement___cRYcc),
129
- :where(.htmlElement-module__hop-HtmlElement___cRYcc::after),
130
- :where(.htmlElement-module__hop-HtmlElement___cRYcc::before) {
128
+ :where(.htmlElement-module__hop-HtmlElement___WcrXn),
129
+ :where(.htmlElement-module__hop-HtmlElement___WcrXn::after),
130
+ :where(.htmlElement-module__hop-HtmlElement___WcrXn::before) {
131
131
  box-sizing: border-box;
132
132
  }
package/dist/html-wrappers/htmlElement.js CHANGED
@@ -1,5 +1,5 @@
1
- export { GlobalHtmlElementCssSelector, GlobalHtmlElementSpecificCssSelector, htmlElement } from '../chunk-UGNCHZWK.js';
2
- import '../chunk-32QSMUWN.js';
1
+ export { GlobalHtmlElementCssSelector, GlobalHtmlElementSpecificCssSelector, htmlElement } from '../chunk-W5QUPATS.js';
2
+ import '../chunk-VQE64NVW.js';
3
3
  import '../chunk-7TNCJ3OQ.js';
4
4
  import '../chunk-MSH55T2T.js';
5
5
  import '../chunk-SFOVKOPG.js';
package/dist/index.css CHANGED
@@ -1,132 +1,132 @@
1
1
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/UseStyledSystem.module.css/#css-module-data */
2
- .UseStyledSystem-module__hop-b-hover___yp43p:hover {
2
+ .UseStyledSystem-module__hop-b-hover___-uv5U:hover {
3
3
  --hop-b-hover: initial;
4
4
  border: var(--hop-b-hover) !important;
5
5
  }
6
- .UseStyledSystem-module__hop-bb-hover___RQhQN:hover {
6
+ .UseStyledSystem-module__hop-bb-hover___Nw9pk:hover {
7
7
  --hop-bb-hover: initial;
8
8
  border-bottom: var(--hop-bb-hover) !important;
9
9
  }
10
- .UseStyledSystem-module__hop-bl-hover___7EGi3:hover {
10
+ .UseStyledSystem-module__hop-bl-hover___ScFa8:hover {
11
11
  --hop-bl-hover: initial;
12
12
  border-left: var(--hop-bl-hover) !important;
13
13
  }
14
- .UseStyledSystem-module__hop-br-hover___xgrqz:hover {
14
+ .UseStyledSystem-module__hop-br-hover___nyZRP:hover {
15
15
  --hop-br-hover: initial;
16
16
  border-right: var(--hop-br-hover) !important;
17
17
  }
18
- .UseStyledSystem-module__hop-bt-hover___OHEye:hover {
18
+ .UseStyledSystem-module__hop-bt-hover___mIvCc:hover {
19
19
  --hop-bt-hover: initial;
20
20
  border-top: var(--hop-bt-hover) !important;
21
21
  }
22
- .UseStyledSystem-module__hop-b-focus___VD53A:focus-visible {
22
+ .UseStyledSystem-module__hop-b-focus___QVDv2:focus-visible {
23
23
  --hop-b-focus: initial;
24
24
  border: var(--hop-b-focus) !important;
25
25
  }
26
- .UseStyledSystem-module__hop-bb-focus___XaONh:focus-visible {
26
+ .UseStyledSystem-module__hop-bb-focus___2wtGI:focus-visible {
27
27
  --hop-bb-focus: initial;
28
28
  border-bottom: var(--hop-bb-focus) !important;
29
29
  }
30
- .UseStyledSystem-module__hop-bl-focus___OEuiC:focus-visible {
30
+ .UseStyledSystem-module__hop-bl-focus___DdQyO:focus-visible {
31
31
  --hop-bl-focus: initial;
32
32
  border-left: var(--hop-bl-focus) !important;
33
33
  }
34
- .UseStyledSystem-module__hop-br-focus___fCHZT:focus-visible {
34
+ .UseStyledSystem-module__hop-br-focus___l6hbv:focus-visible {
35
35
  --hop-br-focus: initial;
36
36
  border-right: var(--hop-br-focus) !important;
37
37
  }
38
- .UseStyledSystem-module__hop-bt-focus___vLwaI:focus-visible {
38
+ .UseStyledSystem-module__hop-bt-focus___lIHzR:focus-visible {
39
39
  --hop-bt-focus: initial;
40
40
  border-top: var(--hop-bt-focus) !important;
41
41
  }
42
- .UseStyledSystem-module__hop-b-active___8lbw1:active {
42
+ .UseStyledSystem-module__hop-b-active___FX491:active {
43
43
  --hop-b-active: initial;
44
44
  border: var(--hop-b-active) !important;
45
45
  }
46
- .UseStyledSystem-module__hop-bb-active___0B2qX:active {
46
+ .UseStyledSystem-module__hop-bb-active___3p2de:active {
47
47
  --hop-bb-active: initial;
48
48
  border-bottom: var(--hop-bb-active) !important;
49
49
  }
50
- .UseStyledSystem-module__hop-bl-active___AVGYj:active {
50
+ .UseStyledSystem-module__hop-bl-active___bD5ln:active {
51
51
  --hop-bl-active: initial;
52
52
  border-left: var(--hop-bl-active) !important;
53
53
  }
54
- .UseStyledSystem-module__hop-br-active___SMFXO:active {
54
+ .UseStyledSystem-module__hop-br-active___Z2w-2:active {
55
55
  --hop-br-active: initial;
56
56
  border-right: var(--hop-br-active) !important;
57
57
  }
58
- .UseStyledSystem-module__hop-bt-active___FAWuS:active {
58
+ .UseStyledSystem-module__hop-bt-active___cXrGo:active {
59
59
  --hop-bt-active: initial;
60
60
  border-top: var(--hop-bt-active) !important;
61
61
  }
62
- .UseStyledSystem-module__hop-bg-hover___ejzLg:hover {
62
+ .UseStyledSystem-module__hop-bg-hover___IM2SP:hover {
63
63
  --hop-bg-hover: initial;
64
64
  background-color: var(--hop-bg-hover) !important;
65
65
  }
66
- .UseStyledSystem-module__hop-bg-focus___iOYnm:focus-visible {
66
+ .UseStyledSystem-module__hop-bg-focus___-8NKC:focus-visible {
67
67
  --hop-bg-focus: initial;
68
68
  background-color: var(--hop-bg-focus) !important;
69
69
  }
70
- .UseStyledSystem-module__hop-bg-active___jFl8D:active {
70
+ .UseStyledSystem-module__hop-bg-active___PbRjo:active {
71
71
  --hop-bg-active: initial;
72
72
  background-color: var(--hop-bg-active) !important;
73
73
  }
74
- .UseStyledSystem-module__hop-bs-hover___SyCGY:hover {
74
+ .UseStyledSystem-module__hop-bs-hover___uRazj:hover {
75
75
  --hop-bs-hover: initial;
76
76
  box-shadow: var(--hop-bs-hover) !important;
77
77
  }
78
- .UseStyledSystem-module__hop-bs-focus___SEOtN:focus-visible {
78
+ .UseStyledSystem-module__hop-bs-focus___WPb5b:focus-visible {
79
79
  --hop-bs-focus: initial;
80
80
  box-shadow: var(--hop-bs-focus) !important;
81
81
  }
82
- .UseStyledSystem-module__hop-bs-active___OtVm6:active {
82
+ .UseStyledSystem-module__hop-bs-active___d-Ztc:active {
83
83
  --hop-bs-active: initial;
84
84
  box-shadow: var(--hop-bs-active) !important;
85
85
  }
86
- .UseStyledSystem-module__hop-c-hover___x6iFT:hover {
86
+ .UseStyledSystem-module__hop-c-hover___jWw7H:hover {
87
87
  --hop-c-hover: initial;
88
88
  color: var(--hop-c-hover) !important;
89
89
  }
90
- .UseStyledSystem-module__hop-c-focus___15FZ-:focus-visible {
90
+ .UseStyledSystem-module__hop-c-focus___Y1k28:focus-visible {
91
91
  --hop-c-focus: initial;
92
92
  color: var(--hop-c-focus) !important;
93
93
  }
94
- .UseStyledSystem-module__hop-c-active___Ds0-z:active {
94
+ .UseStyledSystem-module__hop-c-active___9usqR:active {
95
95
  --hop-c-active: initial;
96
96
  color: var(--hop-c-active) !important;
97
97
  }
98
- .UseStyledSystem-module__hop-cs-hover___Ezvlz:hover {
98
+ .UseStyledSystem-module__hop-cs-hover___1iWyj:hover {
99
99
  --hop-cs-hover: initial;
100
100
  cursor: var(--hop-cs-hover) !important;
101
101
  }
102
- .UseStyledSystem-module__hop-f-hover___VwWAU:hover {
102
+ .UseStyledSystem-module__hop-f-hover___G8m3j:hover {
103
103
  --hop-f-hover: initial;
104
104
  fill: var(--hop-f-hover) !important;
105
105
  }
106
- .UseStyledSystem-module__hop-f-focus___GubJH:focus-visible {
106
+ .UseStyledSystem-module__hop-f-focus___S7xBy:focus-visible {
107
107
  --hop-f-focus: initial;
108
108
  fill: var(--hop-f-focus) !important;
109
109
  }
110
- .UseStyledSystem-module__hop-o-hover___nHInD:hover {
110
+ .UseStyledSystem-module__hop-o-hover___TuFfD:hover {
111
111
  --hop-o-hover: initial;
112
112
  opacity: var(--hop-o-hover) !important;
113
113
  }
114
- .UseStyledSystem-module__hop-o-focus___3nox7:focus-visible {
114
+ .UseStyledSystem-module__hop-o-focus___CYGDn:focus-visible {
115
115
  --hop-o-focus: initial;
116
116
  opacity: var(--hop-o-focus) !important;
117
117
  }
118
- .UseStyledSystem-module__hop-o-active___L0QI6:active {
118
+ .UseStyledSystem-module__hop-o-active___z5Riy:active {
119
119
  --hop-o-active: initial;
120
120
  opacity: var(--hop-o-active) !important;
121
121
  }
122
- .UseStyledSystem-module__hop-ol-focus___er-fd:focus-visible {
122
+ .UseStyledSystem-module__hop-ol-focus___-9JTf:focus-visible {
123
123
  --hop-ol-focus: initial;
124
124
  color: var(--hop-ol-focus) !important;
125
125
  }
126
126
 
127
127
  /* css-module:/home/runner/work/wl-hopper/wl-hopper/packages/styled-system/src/html-wrappers/htmlElement.module.css/#css-module-data */
128
- :where(.htmlElement-module__hop-HtmlElement___cRYcc),
129
- :where(.htmlElement-module__hop-HtmlElement___cRYcc::after),
130
- :where(.htmlElement-module__hop-HtmlElement___cRYcc::before) {
128
+ :where(.htmlElement-module__hop-HtmlElement___WcrXn),
129
+ :where(.htmlElement-module__hop-HtmlElement___WcrXn::after),
130
+ :where(.htmlElement-module__hop-HtmlElement___WcrXn::before) {
131
131
  box-sizing: border-box;
132
132
  }
package/dist/index.d.ts CHANGED
@@ -17,7 +17,7 @@ export { useIsomorphicInsertionEffect } from './utils/useIsomorphicInsertionEffe
17
17
  export { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect.js';
18
18
  export { supportsMatchMedia, useMediaQuery } from './utils/useMediaQuery.js';
19
19
  export { ThemeComputedStyle } from './utils/useThemeComputedStyle.js';
20
- export { StyledComponentProps, StyledSystemProps, UnsafePrefix } from './styledSystemProps.js';
20
+ export { StyledComponentProps, StyledSystemProps, UnsafePrefix, UnsafeStyledSystemProps } from './styledSystemProps.js';
21
21
  export { GlobalStyledSystemProviderCssSelector, StyledSystemProvider, StyledSystemProviderProps } from './StyledSystemProvider.js';
22
22
  export { HopperRootCssClass, StyledSystemRootCssClass, getRootCSSClasses } from './styledSystemRootCssClass.js';
23
23
  export { StylingProps, isStyledSystemProp, useStyledSystem } from './useStyledSystem.js';
package/dist/index.js CHANGED
@@ -1,19 +1,19 @@
1
1
  export { slot } from './chunk-7STOSQRA.js';
2
- export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider } from './chunk-F5OWVDUZ.js';
3
- export { BodyStyleProvider } from './chunk-72SNKVM7.js';
2
+ export { GlobalStyledSystemProviderCssSelector, _StyledSystemProvider as StyledSystemProvider } from './chunk-CFRQACSV.js';
3
+ export { BodyStyleProvider } from './chunk-DEYOM7RO.js';
4
4
  export { ThemeComputedStyle } from './chunk-BSIKCABJ.js';
5
5
  export { useIsomorphicLayoutEffect } from './chunk-3YM73BQP.js';
6
- export { A, Address, Article, Aside, Div, HtmlButton, HtmlFooter, HtmlForm, HtmlH1, HtmlH2, HtmlH3, HtmlH4, HtmlH5, HtmlH6, HtmlHeader, HtmlInput, HtmlLabel, HtmlParagraph, HtmlSection, HtmlTextArea, Img, LI, Main, Nav, OL, Span, TBody, TD, TFoot, TH, THead, TR, Table, UL } from './chunk-5VLOYYF6.js';
7
- export { GlobalHtmlElementCssSelector, GlobalHtmlElementSpecificCssSelector, htmlElement } from './chunk-UGNCHZWK.js';
6
+ export { A, Address, Article, Aside, Div, HtmlButton, HtmlFooter, HtmlForm, HtmlH1, HtmlH2, HtmlH3, HtmlH4, HtmlH5, HtmlH6, HtmlHeader, HtmlInput, HtmlLabel, HtmlParagraph, HtmlSection, HtmlTextArea, Img, LI, Main, Nav, OL, Span, TBody, TD, TFoot, TH, THead, TR, Table, UL } from './chunk-FTG44ZZT.js';
7
+ export { GlobalHtmlElementCssSelector, GlobalHtmlElementSpecificCssSelector, htmlElement } from './chunk-W5QUPATS.js';
8
8
  export { BreakpointProvider, DefaultUnsupportedMatchMediaBreakpoint } from './chunk-GXUFWEP5.js';
9
- export { TokenProvider } from './chunk-ODJM2N7T.js';
9
+ export { TokenProvider } from './chunk-IRSZZGRZ.js';
10
10
  export { Tokens } from './chunk-RAWVBWQ4.js';
11
11
  import './chunk-P6FMQKUS.js';
12
12
  import './chunk-K5JIMNDM.js';
13
13
  export { useInsertStyleElement } from './chunk-RIORU7JO.js';
14
14
  export { useIsomorphicInsertionEffect } from './chunk-YPIK2HRL.js';
15
- export { HopperRootCssClass, StyledSystemRootCssClass, getRootCSSClasses } from './chunk-TJAHZ3X2.js';
16
- export { isStyledSystemProp, useStyledSystem } from './chunk-32QSMUWN.js';
15
+ export { HopperRootCssClass, StyledSystemRootCssClass, getRootCSSClasses } from './chunk-RCLKEJV6.js';
16
+ export { isStyledSystemProp, useStyledSystem } from './chunk-VQE64NVW.js';
17
17
  export { BackgroundColorMapping, BorderMapping, BorderRadiusMapping, BoxShadowMapping, ColorExpressionTypes, ColorMapping, ComplexMarginMapping, ComplexPaddingMapping, DataVizColorMapping, DefaultBorderWidthAndStyle, FontFamilyMapping, FontSizeMapping, FontWeightMapping, IconColorMapping, LineHeightMapping, SimpleMarginMapping, SimplePaddingMapping, SizingMapping, SpaceMapping, TextColorMapping, getSizingValue, getSystemValue, parseResponsiveSystemValue } from './chunk-7TNCJ3OQ.js';
18
18
  import './chunk-MSH55T2T.js';
19
19
  export { isResponsiveObject, parseResponsiveValue, useResponsiveValue } from './chunk-SFOVKOPG.js';
package/dist/styledSystemProps.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { Property } from 'csstype';
2
2
  import { JSX, JSXElementConstructor, ComponentProps } from 'react';
3
3
  import { ResponsiveProp } from './responsive/useResponsiveValue.js';
4
- import { BackgroundColorValue, BorderValue, BorderRadiusValue, BoxShadowValue, ColorValue, ColumnGapValue, FillValue, FontFamilyValue, FontSizeValue, FontWeightValue, GapValue, GridAutoColumnsValue, GridAutoRowsValue, GridColumSpanValue, GridRowSpanValue, GridTemplateAreasValue, GridTemplateColumnsValue, GridTemplateRowsValue, HeightValue, LineHeightValue, ComplexMarginValue, SimpleMarginValue, WidthValue, ComplexPaddingValue, SimplePaddingValue, RowGapValue, StrokeValue, UNSAFE_BackgroundColorValue, UNSAFE_BorderValue, UNSAFE_BorderRadiusValue, UNSAFE_BoxShadowValue, UNSAFE_ColorValue, UNSAFE_GapValue, UNSAFE_FillValue, UNSAFE_FontFamilyValue, UNSAFE_FontSizeValue, UNSAFE_FontWeightValue, UNSAFE_GridAutoColumnsValue, UNSAFE_GridAutoRowsValue, UNSAFE_GridTemplateColumnsValue, UNSAFE_GridTemplateRowsValue, UNSAFE_HeightValue, UNSAFE_LineHeightValue, UNSAFE_ComplexMarginValue, UNSAFE_SimpleMarginValue, UNSAFE_WidthValue, UNSAFE_ComplexPaddingValue, UNSAFE_SimplePaddingValue, UNSAFE_RowGapValue, UNSAFE_StrokeValue } from './tokens/tokenMappings.js';
4
+ import { UNSAFE_BackgroundColorValue, UNSAFE_BorderValue, UNSAFE_BorderRadiusValue, UNSAFE_BoxShadowValue, UNSAFE_ColorValue, UNSAFE_GapValue, UNSAFE_FillValue, UNSAFE_FontFamilyValue, UNSAFE_FontSizeValue, UNSAFE_FontWeightValue, UNSAFE_GridAutoColumnsValue, UNSAFE_GridAutoRowsValue, GridColumSpanValue, GridRowSpanValue, UNSAFE_GridTemplateColumnsValue, UNSAFE_GridTemplateRowsValue, UNSAFE_HeightValue, UNSAFE_LineHeightValue, UNSAFE_ComplexMarginValue, UNSAFE_SimpleMarginValue, UNSAFE_WidthValue, UNSAFE_ComplexPaddingValue, UNSAFE_SimplePaddingValue, UNSAFE_RowGapValue, UNSAFE_StrokeValue, BackgroundColorValue, BorderValue, BorderRadiusValue, BoxShadowValue, ColorValue, ColumnGapValue, FillValue, FontFamilyValue, FontSizeValue, FontWeightValue, GapValue, GridAutoColumnsValue, GridAutoRowsValue, GridTemplateAreasValue, GridTemplateColumnsValue, GridTemplateRowsValue, HeightValue, LineHeightValue, ComplexMarginValue, SimpleMarginValue, WidthValue, ComplexPaddingValue, SimplePaddingValue, RowGapValue, StrokeValue } from './tokens/tokenMappings.js';
5
5
  import './responsive/Breakpoints.js';
6
6
 
7
7
  declare const UnsafePrefix = "UNSAFE_";
8
- interface StyledSystemProps {
8
+ interface StyledSystemProps extends UnsafeStyledSystemProps {
9
9
  /**
10
10
  * Sets the `align-content` property.
11
11
  * @see {@link https://developer.mozilla.org/docs/Web/CSS/align-content}
@@ -691,6 +691,43 @@ interface StyledSystemProps {
691
691
  * @see {@link https://developer.mozilla.org/docs/Web/CSS/transition}
692
692
  */
693
693
  transition?: ResponsiveProp<Property.Transition>;
694
+ /**
695
+ * Sets the `vertical-align` property.
696
+ * @see {@link https://developer.mozilla.org/docs/Web/CSS/vertical-align}
697
+ */
698
+ verticalAlign?: ResponsiveProp<Property.VerticalAlign>;
699
+ /**
700
+ * Sets the `visibility` property.
701
+ * @see {@link https://developer.mozilla.org/docs/Web/CSS/visibility}
702
+ */
703
+ visibility?: ResponsiveProp<Property.Visibility>;
704
+ /**
705
+ * Sets the `white-space` property.
706
+ * @see {@link https://developer.mozilla.org/docs/Web/CSS/white-space}
707
+ */
708
+ whiteSpace?: ResponsiveProp<Property.WhiteSpace>;
709
+ /**
710
+ * Sets the `width` property.
711
+ * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_width`** property
712
+ */
713
+ width?: ResponsiveProp<WidthValue>;
714
+ /**
715
+ * Sets the `will-change` property.
716
+ * @see {@link https://developer.mozilla.org/docs/Web/CSS/will-change}
717
+ */
718
+ willChange?: ResponsiveProp<Property.WillChange>;
719
+ /**
720
+ * Sets the `word-break` property.
721
+ * @see {@link https://developer.mozilla.org/docs/Web/CSS/word-break}
722
+ */
723
+ wordBreak?: ResponsiveProp<Property.WordBreak>;
724
+ /**
725
+ * Sets the `z-index` property.
726
+ * @see {@link https://developer.mozilla.org/docs/Web/CSS/z-index}
727
+ */
728
+ zIndex?: ResponsiveProp<Property.ZIndex>;
729
+ }
730
+ interface UnsafeStyledSystemProps {
694
731
  /**
695
732
  * Sets the `background-color` property.
696
733
  *
@@ -1283,42 +1320,7 @@ interface StyledSystemProps {
1283
1320
  * This property is marked as **UNSAFE** because you're opting out of the intended values of the design system.
1284
1321
  */
1285
1322
  UNSAFE_width?: ResponsiveProp<UNSAFE_WidthValue>;
1286
- /**
1287
- * Sets the `vertical-align` property.
1288
- * @see {@link https://developer.mozilla.org/docs/Web/CSS/vertical-align}
1289
- */
1290
- verticalAlign?: ResponsiveProp<Property.VerticalAlign>;
1291
- /**
1292
- * Sets the `visibility` property.
1293
- * @see {@link https://developer.mozilla.org/docs/Web/CSS/visibility}
1294
- */
1295
- visibility?: ResponsiveProp<Property.Visibility>;
1296
- /**
1297
- * Sets the `white-space` property.
1298
- * @see {@link https://developer.mozilla.org/docs/Web/CSS/white-space}
1299
- */
1300
- whiteSpace?: ResponsiveProp<Property.WhiteSpace>;
1301
- /**
1302
- * Sets the `width` property.
1303
- * This property only accept **token values** from the **SCALE**. To specify any other values, use the **`UNSAFE_width`** property
1304
- */
1305
- width?: ResponsiveProp<WidthValue>;
1306
- /**
1307
- * Sets the `will-change` property.
1308
- * @see {@link https://developer.mozilla.org/docs/Web/CSS/will-change}
1309
- */
1310
- willChange?: ResponsiveProp<Property.WillChange>;
1311
- /**
1312
- * Sets the `word-break` property.
1313
- * @see {@link https://developer.mozilla.org/docs/Web/CSS/word-break}
1314
- */
1315
- wordBreak?: ResponsiveProp<Property.WordBreak>;
1316
- /**
1317
- * Sets the `z-index` property.
1318
- * @see {@link https://developer.mozilla.org/docs/Web/CSS/z-index}
1319
- */
1320
- zIndex?: ResponsiveProp<Property.ZIndex>;
1321
1323
  }
1322
1324
  type StyledComponentProps<T> = T extends keyof JSX.IntrinsicElements | JSXElementConstructor<unknown> ? Omit<ComponentProps<T>, keyof StyledSystemProps> & StyledSystemProps : Omit<T, keyof StyledSystemProps> & StyledSystemProps;
1323
1325
 
1324
- export { type StyledComponentProps, type StyledSystemProps, UnsafePrefix };
1326
+ export { type StyledComponentProps, type StyledSystemProps, UnsafePrefix, type UnsafeStyledSystemProps };
package/dist/styledSystemRootCssClass.js CHANGED
@@ -1,2 +1,2 @@
1
- export { HopperRootCssClass, StyledSystemRootCssClass, getRootCSSClasses } from './chunk-TJAHZ3X2.js';
1
+ export { HopperRootCssClass, StyledSystemRootCssClass, getRootCSSClasses } from './chunk-RCLKEJV6.js';
2
2
  import './chunk-AQ5VUG5P.js';
package/dist/tokens/TokenProvider.js CHANGED
@@ -1,9 +1,9 @@
1
- export { TokenProvider } from '../chunk-ODJM2N7T.js';
1
+ export { TokenProvider } from '../chunk-IRSZZGRZ.js';
2
2
  import '../chunk-RAWVBWQ4.js';
3
3
  import '../chunk-P6FMQKUS.js';
4
4
  import '../chunk-K5JIMNDM.js';
5
5
  import '../chunk-RIORU7JO.js';
6
6
  import '../chunk-YPIK2HRL.js';
7
- import '../chunk-TJAHZ3X2.js';
7
+ import '../chunk-RCLKEJV6.js';
8
8
  import '../chunk-U5R6ZXH3.js';
9
9
  import '../chunk-AQ5VUG5P.js';
package/dist/tokens/tokenMappings.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Globals, Property } from 'csstype';
1
+ import { Property, Globals, DataType } from 'csstype';
2
2
  import { Breakpoint } from '../responsive/Breakpoints.js';
3
3
  import { ResponsiveProp } from '../responsive/useResponsiveValue.js';
4
4
 
@@ -2318,8 +2318,8 @@ type CssFill = Globals | "child" | "context-fill" | "context-stroke" | "none" |
2318
2318
  type CssGrid = "auto" | "max-content" | "min-content" | Globals | Percentage | FRValues;
2319
2319
  type CssGridTemplate = "none" | "subgrid" | CssGrid;
2320
2320
  type CssBoxShadow = Globals | "none";
2321
- type CssBorder = Globals | 0;
2322
- type CssBorderRadius = Globals | 0;
2321
+ type CssBorder = Globals | 0 | DataType.LineStyle;
2322
+ type CssBorderRadius = Globals | Percentage | 0;
2323
2323
  type CssGap = Globals | "normal" | 0;
2324
2324
  type CSSSizing = "auto" | "fit-content" | "max-content" | "min-content" | Globals | Percentage;
2325
2325
  type BackgroundColorValue = keyof typeof BackgroundColorMapping | CssColor;
@@ -2344,34 +2344,34 @@ type FontWeightValue = keyof typeof FontWeightMapping | Globals;
2344
2344
  type UNSAFE_FontWeightValue = keyof typeof FontWeightMapping | Property.FontWeight;
2345
2345
  type GapValue = keyof typeof SimpleMarginMapping | CssGap;
2346
2346
  type UNSAFE_GapValue = keyof typeof SimpleMarginMapping | Property.Gap;
2347
- type GridAutoColumnsValue = keyof typeof SizingMapping | CssGrid;
2347
+ type GridAutoColumnsValue = keyof typeof SizingMapping | CssGrid | 0;
2348
2348
  type UNSAFE_GridAutoColumnsValue = keyof typeof SizingMapping | Property.GridAutoColumns;
2349
- type GridAutoRowsValue = keyof typeof SizingMapping | CssGrid;
2349
+ type GridAutoRowsValue = keyof typeof SizingMapping | CssGrid | 0;
2350
2350
  type UNSAFE_GridAutoRowsValue = keyof typeof SizingMapping | Property.GridAutoRows;
2351
2351
  type GridTemplateAreasValue = Property.GridTemplateAreas | Array<string>;
2352
- type GridTemplateColumnsValue = keyof typeof SizingMapping | CssGridTemplate | Array<keyof typeof SizingMapping | CssGridTemplate>;
2352
+ type GridTemplateColumnsValue = keyof typeof SizingMapping | 0 | CssGridTemplate | Array<keyof typeof SizingMapping | CssGridTemplate>;
2353
2353
  type UNSAFE_GridTemplateColumnsValue = keyof typeof SizingMapping | Property.GridTemplateColumns | Array<keyof typeof SizingMapping | Property.GridTemplateColumns>;
2354
- type GridTemplateRowsValue = keyof typeof SizingMapping | CssGridTemplate | Array<keyof typeof SizingMapping | CssGridTemplate>;
2354
+ type GridTemplateRowsValue = keyof typeof SizingMapping | 0 | CssGridTemplate | Array<keyof typeof SizingMapping | CssGridTemplate>;
2355
2355
  type UNSAFE_GridTemplateRowsValue = keyof typeof SizingMapping | Property.GridTemplateRows | Array<keyof typeof SizingMapping | Property.GridTemplateRows>;
2356
- type HeightValue = keyof typeof SizingMapping | CSSSizing;
2356
+ type HeightValue = keyof typeof SizingMapping | CSSSizing | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | 0;
2357
2357
  type UNSAFE_HeightValue = keyof typeof SizingMapping | Property.Height;
2358
- type LineHeightValue = keyof typeof LineHeightMapping | Globals;
2358
+ type LineHeightValue = keyof typeof LineHeightMapping | Globals | "normal" | 0;
2359
2359
  type UNSAFE_LineHeightValue = keyof typeof LineHeightMapping | Property.LineHeight;
2360
- type SimpleMarginValue = keyof typeof SimpleMarginMapping | Globals;
2360
+ type SimpleMarginValue = keyof typeof SimpleMarginMapping | Globals | "auto" | 0;
2361
2361
  type UNSAFE_SimpleMarginValue = keyof typeof SimpleMarginMapping | Property.Margin;
2362
- type ComplexMarginValue = keyof typeof ComplexMarginMapping | Globals;
2362
+ type ComplexMarginValue = keyof typeof ComplexMarginMapping | Globals | "auto" | 0;
2363
2363
  type UNSAFE_ComplexMarginValue = keyof typeof ComplexMarginMapping | Property.Margin;
2364
- type SimplePaddingValue = keyof typeof SimplePaddingMapping | Globals;
2364
+ type SimplePaddingValue = keyof typeof SimplePaddingMapping | Globals | 0;
2365
2365
  type UNSAFE_SimplePaddingValue = keyof typeof SimplePaddingMapping | Property.Padding;
2366
- type ComplexPaddingValue = keyof typeof ComplexPaddingMapping | Globals;
2366
+ type ComplexPaddingValue = keyof typeof ComplexPaddingMapping | Globals | 0;
2367
2367
  type UNSAFE_ComplexPaddingValue = keyof typeof ComplexPaddingMapping | Property.Padding;
2368
- type RowGapValue = keyof typeof SimpleMarginMapping | CssGap;
2368
+ type RowGapValue = keyof typeof SimpleMarginMapping | CssGap | 0;
2369
2369
  type UNSAFE_RowGapValue = keyof typeof SimpleMarginMapping | Property.RowGap;
2370
- type SizingValue = keyof typeof SizingMapping | CSSSizing;
2370
+ type SizingValue = keyof typeof SizingMapping | CSSSizing | "none";
2371
2371
  type UNSAFE_SizingValue = keyof typeof SizingMapping | Property.Scale;
2372
2372
  type StrokeValue = keyof typeof IconColorMapping | CssFill;
2373
2373
  type UNSAFE_StrokeValue = keyof typeof IconColorMapping | Property.Stroke;
2374
- type WidthValue = keyof typeof SizingMapping | CSSSizing;
2374
+ type WidthValue = keyof typeof SizingMapping | CSSSizing | 0 | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-moz-fit-content" | "-webkit-max-content" | "intrinsic" | "min-intrinsic";
2375
2375
  type UNSAFE_WidthValue = keyof typeof SizingMapping | Property.Width;
2376
2376
  type GridColumSpanValue = number;
2377
2377
  type GridRowSpanValue = number;