@marigold/system 1.2.0 → 1.3.0
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/dist/index.js +115 -152
- package/dist/index.mjs +110 -154
- package/package.json +10 -11
package/dist/index.js
CHANGED
|
@@ -1,38 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
9
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __objRest = (source, exclude) => {
|
|
25
|
-
var target = {};
|
|
26
|
-
for (var prop in source)
|
|
27
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
if (source != null && __getOwnPropSymbols)
|
|
30
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
}
|
|
34
|
-
return target;
|
|
35
|
-
};
|
|
36
8
|
var __export = (target, all) => {
|
|
37
9
|
for (var name in all)
|
|
38
10
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -45,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
45
17
|
}
|
|
46
18
|
return to;
|
|
47
19
|
};
|
|
48
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
49
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
50
25
|
|
|
51
26
|
// src/index.ts
|
|
@@ -71,7 +46,9 @@ var import_deepmerge = __toESM(require("deepmerge"));
|
|
|
71
46
|
|
|
72
47
|
// src/components/Box/selector.ts
|
|
73
48
|
var createteSelector = (selectors, states, suffix = "") => {
|
|
74
|
-
return selectors.map(
|
|
49
|
+
return selectors.map(
|
|
50
|
+
(selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)
|
|
51
|
+
).flat().join(", ");
|
|
75
52
|
};
|
|
76
53
|
var selector = {
|
|
77
54
|
self: "&",
|
|
@@ -104,10 +81,26 @@ var pseudos = {
|
|
|
104
81
|
"&:error": createteSelector([selector.self], state.error),
|
|
105
82
|
"&:expanded": createteSelector([selector.self], state.expanded),
|
|
106
83
|
"&:in-group": createteSelector(selector.grouped, state.none, selector.self),
|
|
107
|
-
"&:hover-group": createteSelector(
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
84
|
+
"&:hover-group": createteSelector(
|
|
85
|
+
selector.grouped,
|
|
86
|
+
state.hover,
|
|
87
|
+
selector.self
|
|
88
|
+
),
|
|
89
|
+
"&:focus-group": createteSelector(
|
|
90
|
+
selector.grouped,
|
|
91
|
+
state.focus,
|
|
92
|
+
selector.self
|
|
93
|
+
),
|
|
94
|
+
"&:active-group": createteSelector(
|
|
95
|
+
selector.grouped,
|
|
96
|
+
state.active,
|
|
97
|
+
selector.self
|
|
98
|
+
),
|
|
99
|
+
"&:error-group": createteSelector(
|
|
100
|
+
selector.grouped,
|
|
101
|
+
state.error,
|
|
102
|
+
selector.self
|
|
103
|
+
)
|
|
111
104
|
};
|
|
112
105
|
var transformPseudos = (styles) => {
|
|
113
106
|
let result = {};
|
|
@@ -134,8 +127,8 @@ var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
|
|
|
134
127
|
]);
|
|
135
128
|
return transformPseudos(themedStyles);
|
|
136
129
|
};
|
|
137
|
-
var Box = (0, import_react.forwardRef)(
|
|
138
|
-
|
|
130
|
+
var Box = (0, import_react.forwardRef)(
|
|
131
|
+
({
|
|
139
132
|
as = "div",
|
|
140
133
|
children,
|
|
141
134
|
__baseCSS,
|
|
@@ -177,100 +170,62 @@ var Box = (0, import_react.forwardRef)((_a, ref) => {
|
|
|
177
170
|
boxShadow,
|
|
178
171
|
opacity,
|
|
179
172
|
overflow,
|
|
180
|
-
transition
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
position,
|
|
237
|
-
top,
|
|
238
|
-
bottom,
|
|
239
|
-
right,
|
|
240
|
-
left,
|
|
241
|
-
zIndex,
|
|
242
|
-
p,
|
|
243
|
-
px,
|
|
244
|
-
py,
|
|
245
|
-
pt,
|
|
246
|
-
pb,
|
|
247
|
-
pl,
|
|
248
|
-
pr,
|
|
249
|
-
m,
|
|
250
|
-
mx,
|
|
251
|
-
my,
|
|
252
|
-
mt,
|
|
253
|
-
mb,
|
|
254
|
-
ml,
|
|
255
|
-
mr,
|
|
256
|
-
flexDirection,
|
|
257
|
-
flexWrap,
|
|
258
|
-
flexShrink,
|
|
259
|
-
flexGrow,
|
|
260
|
-
alignItems,
|
|
261
|
-
justifyContent,
|
|
262
|
-
bg,
|
|
263
|
-
border,
|
|
264
|
-
borderRadius,
|
|
265
|
-
boxShadow,
|
|
266
|
-
opacity,
|
|
267
|
-
overflow,
|
|
268
|
-
transition
|
|
269
|
-
}
|
|
270
|
-
}),
|
|
271
|
-
ref
|
|
272
|
-
}), children);
|
|
273
|
-
});
|
|
173
|
+
transition,
|
|
174
|
+
...props
|
|
175
|
+
}, ref) => (0, import_react2.jsx)(
|
|
176
|
+
as,
|
|
177
|
+
{
|
|
178
|
+
...props,
|
|
179
|
+
css: createThemedStyle({
|
|
180
|
+
as,
|
|
181
|
+
__baseCSS,
|
|
182
|
+
css,
|
|
183
|
+
styles: {
|
|
184
|
+
display,
|
|
185
|
+
height,
|
|
186
|
+
width,
|
|
187
|
+
minWidth,
|
|
188
|
+
maxWidth,
|
|
189
|
+
position,
|
|
190
|
+
top,
|
|
191
|
+
bottom,
|
|
192
|
+
right,
|
|
193
|
+
left,
|
|
194
|
+
zIndex,
|
|
195
|
+
p,
|
|
196
|
+
px,
|
|
197
|
+
py,
|
|
198
|
+
pt,
|
|
199
|
+
pb,
|
|
200
|
+
pl,
|
|
201
|
+
pr,
|
|
202
|
+
m,
|
|
203
|
+
mx,
|
|
204
|
+
my,
|
|
205
|
+
mt,
|
|
206
|
+
mb,
|
|
207
|
+
ml,
|
|
208
|
+
mr,
|
|
209
|
+
flexDirection,
|
|
210
|
+
flexWrap,
|
|
211
|
+
flexShrink,
|
|
212
|
+
flexGrow,
|
|
213
|
+
alignItems,
|
|
214
|
+
justifyContent,
|
|
215
|
+
bg,
|
|
216
|
+
border,
|
|
217
|
+
borderRadius,
|
|
218
|
+
boxShadow,
|
|
219
|
+
opacity,
|
|
220
|
+
overflow,
|
|
221
|
+
transition
|
|
222
|
+
}
|
|
223
|
+
}),
|
|
224
|
+
ref
|
|
225
|
+
},
|
|
226
|
+
children
|
|
227
|
+
)
|
|
228
|
+
);
|
|
274
229
|
|
|
275
230
|
// src/components/Global/Global.tsx
|
|
276
231
|
var import_react5 = __toESM(require("react"));
|
|
@@ -284,7 +239,10 @@ var __defaultTheme = {};
|
|
|
284
239
|
var InternalContext = (0, import_react3.createContext)(__defaultTheme);
|
|
285
240
|
var useTheme = () => {
|
|
286
241
|
const theme = (0, import_react3.useContext)(InternalContext);
|
|
287
|
-
const css = (0, import_react3.useCallback)(
|
|
242
|
+
const css = (0, import_react3.useCallback)(
|
|
243
|
+
(style) => (0, import_css2.css)(style)(theme),
|
|
244
|
+
[theme]
|
|
245
|
+
);
|
|
288
246
|
const get2 = (0, import_react3.useCallback)((path) => (0, import_css2.get)(theme, path), [theme]);
|
|
289
247
|
return { theme, css, get: get2 };
|
|
290
248
|
};
|
|
@@ -431,11 +389,15 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
|
|
|
431
389
|
const { theme } = useTheme();
|
|
432
390
|
const breakpoints = theme.breakpoints || emptyBreakpoints;
|
|
433
391
|
if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
|
|
434
|
-
throw new RangeError(
|
|
392
|
+
throw new RangeError(
|
|
393
|
+
`Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`
|
|
394
|
+
);
|
|
435
395
|
}
|
|
436
396
|
const [index, setIndex] = (0, import_react8.useState)(defaultIndex);
|
|
437
397
|
(0, import_react8.useEffect)(() => {
|
|
438
|
-
const getIndex = () => breakpoints.filter(
|
|
398
|
+
const getIndex = () => breakpoints.filter(
|
|
399
|
+
(breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches
|
|
400
|
+
).length;
|
|
439
401
|
const handleResize = () => {
|
|
440
402
|
const newIndex = getIndex();
|
|
441
403
|
if (index !== newIndex) {
|
|
@@ -472,25 +434,26 @@ var useStateProps = (states) => {
|
|
|
472
434
|
// src/components/SVG/SVG.tsx
|
|
473
435
|
var toDimension = (value) => Array.isArray(value) ? value.map(ensureNumberOrToken) : ensureNumberOrToken(value);
|
|
474
436
|
var ensureNumberOrToken = (value) => typeof value === "string" && /[0-9]+/.test(value) ? Number(value) : value;
|
|
475
|
-
var SVG = (
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
"size",
|
|
482
|
-
"fill",
|
|
483
|
-
"children"
|
|
484
|
-
]);
|
|
437
|
+
var SVG = ({
|
|
438
|
+
size = 24,
|
|
439
|
+
fill = "currentcolor",
|
|
440
|
+
children,
|
|
441
|
+
...props
|
|
442
|
+
}) => {
|
|
485
443
|
const { css } = useTheme();
|
|
486
|
-
return (0, import_react10.jsx)(
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
444
|
+
return (0, import_react10.jsx)(
|
|
445
|
+
"svg",
|
|
446
|
+
{
|
|
447
|
+
viewBox: "0 0 24 24",
|
|
448
|
+
css: css({
|
|
449
|
+
fill,
|
|
450
|
+
width: toDimension(props.width || size),
|
|
451
|
+
height: toDimension(props.height || size)
|
|
452
|
+
}),
|
|
453
|
+
...props
|
|
454
|
+
},
|
|
455
|
+
children
|
|
456
|
+
);
|
|
494
457
|
};
|
|
495
458
|
// Annotate the CommonJS export names for ESM import in node:
|
|
496
459
|
0 && (module.exports = {
|
package/dist/index.mjs
CHANGED
|
@@ -1,35 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
|
-
|
|
33
1
|
// src/components/Box/Box.tsx
|
|
34
2
|
import { forwardRef } from "react";
|
|
35
3
|
import { jsx } from "@emotion/react";
|
|
@@ -38,7 +6,9 @@ import merge from "deepmerge";
|
|
|
38
6
|
|
|
39
7
|
// src/components/Box/selector.ts
|
|
40
8
|
var createteSelector = (selectors, states, suffix = "") => {
|
|
41
|
-
return selectors.map(
|
|
9
|
+
return selectors.map(
|
|
10
|
+
(selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)
|
|
11
|
+
).flat().join(", ");
|
|
42
12
|
};
|
|
43
13
|
var selector = {
|
|
44
14
|
self: "&",
|
|
@@ -71,10 +41,26 @@ var pseudos = {
|
|
|
71
41
|
"&:error": createteSelector([selector.self], state.error),
|
|
72
42
|
"&:expanded": createteSelector([selector.self], state.expanded),
|
|
73
43
|
"&:in-group": createteSelector(selector.grouped, state.none, selector.self),
|
|
74
|
-
"&:hover-group": createteSelector(
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
44
|
+
"&:hover-group": createteSelector(
|
|
45
|
+
selector.grouped,
|
|
46
|
+
state.hover,
|
|
47
|
+
selector.self
|
|
48
|
+
),
|
|
49
|
+
"&:focus-group": createteSelector(
|
|
50
|
+
selector.grouped,
|
|
51
|
+
state.focus,
|
|
52
|
+
selector.self
|
|
53
|
+
),
|
|
54
|
+
"&:active-group": createteSelector(
|
|
55
|
+
selector.grouped,
|
|
56
|
+
state.active,
|
|
57
|
+
selector.self
|
|
58
|
+
),
|
|
59
|
+
"&:error-group": createteSelector(
|
|
60
|
+
selector.grouped,
|
|
61
|
+
state.error,
|
|
62
|
+
selector.self
|
|
63
|
+
)
|
|
78
64
|
};
|
|
79
65
|
var transformPseudos = (styles) => {
|
|
80
66
|
let result = {};
|
|
@@ -101,8 +87,8 @@ var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
|
|
|
101
87
|
]);
|
|
102
88
|
return transformPseudos(themedStyles);
|
|
103
89
|
};
|
|
104
|
-
var Box = forwardRef(
|
|
105
|
-
|
|
90
|
+
var Box = forwardRef(
|
|
91
|
+
({
|
|
106
92
|
as = "div",
|
|
107
93
|
children,
|
|
108
94
|
__baseCSS,
|
|
@@ -144,100 +130,62 @@ var Box = forwardRef((_a, ref) => {
|
|
|
144
130
|
boxShadow,
|
|
145
131
|
opacity,
|
|
146
132
|
overflow,
|
|
147
|
-
transition
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
position,
|
|
204
|
-
top,
|
|
205
|
-
bottom,
|
|
206
|
-
right,
|
|
207
|
-
left,
|
|
208
|
-
zIndex,
|
|
209
|
-
p,
|
|
210
|
-
px,
|
|
211
|
-
py,
|
|
212
|
-
pt,
|
|
213
|
-
pb,
|
|
214
|
-
pl,
|
|
215
|
-
pr,
|
|
216
|
-
m,
|
|
217
|
-
mx,
|
|
218
|
-
my,
|
|
219
|
-
mt,
|
|
220
|
-
mb,
|
|
221
|
-
ml,
|
|
222
|
-
mr,
|
|
223
|
-
flexDirection,
|
|
224
|
-
flexWrap,
|
|
225
|
-
flexShrink,
|
|
226
|
-
flexGrow,
|
|
227
|
-
alignItems,
|
|
228
|
-
justifyContent,
|
|
229
|
-
bg,
|
|
230
|
-
border,
|
|
231
|
-
borderRadius,
|
|
232
|
-
boxShadow,
|
|
233
|
-
opacity,
|
|
234
|
-
overflow,
|
|
235
|
-
transition
|
|
236
|
-
}
|
|
237
|
-
}),
|
|
238
|
-
ref
|
|
239
|
-
}), children);
|
|
240
|
-
});
|
|
133
|
+
transition,
|
|
134
|
+
...props
|
|
135
|
+
}, ref) => jsx(
|
|
136
|
+
as,
|
|
137
|
+
{
|
|
138
|
+
...props,
|
|
139
|
+
css: createThemedStyle({
|
|
140
|
+
as,
|
|
141
|
+
__baseCSS,
|
|
142
|
+
css,
|
|
143
|
+
styles: {
|
|
144
|
+
display,
|
|
145
|
+
height,
|
|
146
|
+
width,
|
|
147
|
+
minWidth,
|
|
148
|
+
maxWidth,
|
|
149
|
+
position,
|
|
150
|
+
top,
|
|
151
|
+
bottom,
|
|
152
|
+
right,
|
|
153
|
+
left,
|
|
154
|
+
zIndex,
|
|
155
|
+
p,
|
|
156
|
+
px,
|
|
157
|
+
py,
|
|
158
|
+
pt,
|
|
159
|
+
pb,
|
|
160
|
+
pl,
|
|
161
|
+
pr,
|
|
162
|
+
m,
|
|
163
|
+
mx,
|
|
164
|
+
my,
|
|
165
|
+
mt,
|
|
166
|
+
mb,
|
|
167
|
+
ml,
|
|
168
|
+
mr,
|
|
169
|
+
flexDirection,
|
|
170
|
+
flexWrap,
|
|
171
|
+
flexShrink,
|
|
172
|
+
flexGrow,
|
|
173
|
+
alignItems,
|
|
174
|
+
justifyContent,
|
|
175
|
+
bg,
|
|
176
|
+
border,
|
|
177
|
+
borderRadius,
|
|
178
|
+
boxShadow,
|
|
179
|
+
opacity,
|
|
180
|
+
overflow,
|
|
181
|
+
transition
|
|
182
|
+
}
|
|
183
|
+
}),
|
|
184
|
+
ref
|
|
185
|
+
},
|
|
186
|
+
children
|
|
187
|
+
)
|
|
188
|
+
);
|
|
241
189
|
|
|
242
190
|
// src/components/Global/Global.tsx
|
|
243
191
|
import React2 from "react";
|
|
@@ -258,7 +206,10 @@ var __defaultTheme = {};
|
|
|
258
206
|
var InternalContext = createContext(__defaultTheme);
|
|
259
207
|
var useTheme = () => {
|
|
260
208
|
const theme = useContext(InternalContext);
|
|
261
|
-
const css = useCallback(
|
|
209
|
+
const css = useCallback(
|
|
210
|
+
(style) => transformStyleObject2(style)(theme),
|
|
211
|
+
[theme]
|
|
212
|
+
);
|
|
262
213
|
const get2 = useCallback((path) => getfromTheme(theme, path), [theme]);
|
|
263
214
|
return { theme, css, get: get2 };
|
|
264
215
|
};
|
|
@@ -405,11 +356,15 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
|
|
|
405
356
|
const { theme } = useTheme();
|
|
406
357
|
const breakpoints = theme.breakpoints || emptyBreakpoints;
|
|
407
358
|
if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
|
|
408
|
-
throw new RangeError(
|
|
359
|
+
throw new RangeError(
|
|
360
|
+
`Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`
|
|
361
|
+
);
|
|
409
362
|
}
|
|
410
363
|
const [index, setIndex] = useState(defaultIndex);
|
|
411
364
|
useEffect(() => {
|
|
412
|
-
const getIndex = () => breakpoints.filter(
|
|
365
|
+
const getIndex = () => breakpoints.filter(
|
|
366
|
+
(breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches
|
|
367
|
+
).length;
|
|
413
368
|
const handleResize = () => {
|
|
414
369
|
const newIndex = getIndex();
|
|
415
370
|
if (index !== newIndex) {
|
|
@@ -446,25 +401,26 @@ var useStateProps = (states) => {
|
|
|
446
401
|
// src/components/SVG/SVG.tsx
|
|
447
402
|
var toDimension = (value) => Array.isArray(value) ? value.map(ensureNumberOrToken) : ensureNumberOrToken(value);
|
|
448
403
|
var ensureNumberOrToken = (value) => typeof value === "string" && /[0-9]+/.test(value) ? Number(value) : value;
|
|
449
|
-
var SVG = (
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
"size",
|
|
456
|
-
"fill",
|
|
457
|
-
"children"
|
|
458
|
-
]);
|
|
404
|
+
var SVG = ({
|
|
405
|
+
size = 24,
|
|
406
|
+
fill = "currentcolor",
|
|
407
|
+
children,
|
|
408
|
+
...props
|
|
409
|
+
}) => {
|
|
459
410
|
const { css } = useTheme();
|
|
460
|
-
return jsx2(
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
411
|
+
return jsx2(
|
|
412
|
+
"svg",
|
|
413
|
+
{
|
|
414
|
+
viewBox: "0 0 24 24",
|
|
415
|
+
css: css({
|
|
416
|
+
fill,
|
|
417
|
+
width: toDimension(props.width || size),
|
|
418
|
+
height: toDimension(props.height || size)
|
|
419
|
+
}),
|
|
420
|
+
...props
|
|
421
|
+
},
|
|
422
|
+
children
|
|
423
|
+
);
|
|
468
424
|
};
|
|
469
425
|
export {
|
|
470
426
|
Box,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@marigold/system",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "Marigold System Library",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"keywords": [
|
|
@@ -26,27 +26,26 @@
|
|
|
26
26
|
"directory": "packages/system"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@emotion/react": "11.9.
|
|
30
|
-
"@marigold/types": "0.5.
|
|
31
|
-
"@theme-ui/css": "0.14.
|
|
29
|
+
"@emotion/react": "11.9.3",
|
|
30
|
+
"@marigold/types": "0.5.2",
|
|
31
|
+
"@theme-ui/css": "0.14.6",
|
|
32
32
|
"csstype": "3.1.0",
|
|
33
33
|
"deepmerge": "^4.2.2",
|
|
34
34
|
"react-fast-compare": "^3.2.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
|
-
"react": "
|
|
38
|
-
"react-dom": "
|
|
37
|
+
"react": "16.x || 17.x || 18.x",
|
|
38
|
+
"react-dom": "16.x || 17.x || 18.x"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@babel/core": "7.
|
|
41
|
+
"@babel/core": "7.18.9",
|
|
42
42
|
"@marigold/tsconfig": "0.3.0",
|
|
43
|
-
"react": "
|
|
44
|
-
"tsup": "6.
|
|
43
|
+
"react": "18.2.0",
|
|
44
|
+
"tsup": "6.1.3"
|
|
45
45
|
},
|
|
46
46
|
"scripts": {
|
|
47
47
|
"build": "tsup src/index.ts",
|
|
48
48
|
"watch": "tsup src/index.ts --watch",
|
|
49
49
|
"clean": "rm -rf node_modules && rm -rf dist"
|
|
50
|
-
}
|
|
51
|
-
"readme": "# `@marigold/system`\n\n> Marigold system\n"
|
|
50
|
+
}
|
|
52
51
|
}
|