@marigold/system 1.2.1 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +102 -177
  2. package/dist/index.mjs +101 -180
  3. package/package.json +6 -6
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 });
@@ -134,143 +106,99 @@ var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
134
106
  ]);
135
107
  return transformPseudos(themedStyles);
136
108
  };
137
- var Box = (0, import_react.forwardRef)((_a, ref) => {
138
- var _b = _a, {
139
- as = "div",
140
- children,
109
+ var Box = (0, import_react.forwardRef)(({
110
+ as = "div",
111
+ children,
112
+ __baseCSS,
113
+ css,
114
+ display,
115
+ height,
116
+ width,
117
+ minWidth,
118
+ maxWidth,
119
+ position,
120
+ top,
121
+ bottom,
122
+ right,
123
+ left,
124
+ zIndex,
125
+ p,
126
+ px,
127
+ py,
128
+ pt,
129
+ pb,
130
+ pl,
131
+ pr,
132
+ m,
133
+ mx,
134
+ my,
135
+ mt,
136
+ mb,
137
+ ml,
138
+ mr,
139
+ flexDirection,
140
+ flexWrap,
141
+ flexShrink,
142
+ flexGrow,
143
+ alignItems,
144
+ justifyContent,
145
+ bg,
146
+ border,
147
+ borderRadius,
148
+ boxShadow,
149
+ opacity,
150
+ overflow,
151
+ transition,
152
+ ...props
153
+ }, ref) => (0, import_react2.jsx)(as, {
154
+ ...props,
155
+ css: createThemedStyle({
156
+ as,
141
157
  __baseCSS,
142
158
  css,
143
- display,
144
- height,
145
- width,
146
- minWidth,
147
- maxWidth,
148
- position,
149
- top,
150
- bottom,
151
- right,
152
- left,
153
- zIndex,
154
- p,
155
- px,
156
- py,
157
- pt,
158
- pb,
159
- pl,
160
- pr,
161
- m,
162
- mx,
163
- my,
164
- mt,
165
- mb,
166
- ml,
167
- mr,
168
- flexDirection,
169
- flexWrap,
170
- flexShrink,
171
- flexGrow,
172
- alignItems,
173
- justifyContent,
174
- bg,
175
- border,
176
- borderRadius,
177
- boxShadow,
178
- opacity,
179
- overflow,
180
- transition
181
- } = _b, props = __objRest(_b, [
182
- "as",
183
- "children",
184
- "__baseCSS",
185
- "css",
186
- "display",
187
- "height",
188
- "width",
189
- "minWidth",
190
- "maxWidth",
191
- "position",
192
- "top",
193
- "bottom",
194
- "right",
195
- "left",
196
- "zIndex",
197
- "p",
198
- "px",
199
- "py",
200
- "pt",
201
- "pb",
202
- "pl",
203
- "pr",
204
- "m",
205
- "mx",
206
- "my",
207
- "mt",
208
- "mb",
209
- "ml",
210
- "mr",
211
- "flexDirection",
212
- "flexWrap",
213
- "flexShrink",
214
- "flexGrow",
215
- "alignItems",
216
- "justifyContent",
217
- "bg",
218
- "border",
219
- "borderRadius",
220
- "boxShadow",
221
- "opacity",
222
- "overflow",
223
- "transition"
224
- ]);
225
- return (0, import_react2.jsx)(as, __spreadProps(__spreadValues({}, props), {
226
- css: createThemedStyle({
227
- as,
228
- __baseCSS,
229
- css,
230
- styles: {
231
- display,
232
- height,
233
- width,
234
- minWidth,
235
- maxWidth,
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
- });
159
+ styles: {
160
+ display,
161
+ height,
162
+ width,
163
+ minWidth,
164
+ maxWidth,
165
+ position,
166
+ top,
167
+ bottom,
168
+ right,
169
+ left,
170
+ zIndex,
171
+ p,
172
+ px,
173
+ py,
174
+ pt,
175
+ pb,
176
+ pl,
177
+ pr,
178
+ m,
179
+ mx,
180
+ my,
181
+ mt,
182
+ mb,
183
+ ml,
184
+ mr,
185
+ flexDirection,
186
+ flexWrap,
187
+ flexShrink,
188
+ flexGrow,
189
+ alignItems,
190
+ justifyContent,
191
+ bg,
192
+ border,
193
+ borderRadius,
194
+ boxShadow,
195
+ opacity,
196
+ overflow,
197
+ transition
198
+ }
199
+ }),
200
+ ref
201
+ }, children));
274
202
 
275
203
  // src/components/Global/Global.tsx
276
204
  var import_react5 = __toESM(require("react"));
@@ -472,25 +400,22 @@ var useStateProps = (states) => {
472
400
  // src/components/SVG/SVG.tsx
473
401
  var toDimension = (value) => Array.isArray(value) ? value.map(ensureNumberOrToken) : ensureNumberOrToken(value);
474
402
  var ensureNumberOrToken = (value) => typeof value === "string" && /[0-9]+/.test(value) ? Number(value) : value;
475
- var SVG = (_a) => {
476
- var _b = _a, {
477
- size = 24,
478
- fill = "currentcolor",
479
- children
480
- } = _b, props = __objRest(_b, [
481
- "size",
482
- "fill",
483
- "children"
484
- ]);
403
+ var SVG = ({
404
+ size = 24,
405
+ fill = "currentcolor",
406
+ children,
407
+ ...props
408
+ }) => {
485
409
  const { css } = useTheme();
486
- return (0, import_react10.jsx)("svg", __spreadValues({
410
+ return (0, import_react10.jsx)("svg", {
487
411
  viewBox: "0 0 24 24",
488
412
  css: css({
489
413
  fill,
490
414
  width: toDimension(props.width || size),
491
415
  height: toDimension(props.height || size)
492
- })
493
- }, props), children);
416
+ }),
417
+ ...props
418
+ }, children);
494
419
  };
495
420
  // Annotate the CommonJS export names for ESM import in node:
496
421
  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";
@@ -101,143 +69,99 @@ var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
101
69
  ]);
102
70
  return transformPseudos(themedStyles);
103
71
  };
104
- var Box = forwardRef((_a, ref) => {
105
- var _b = _a, {
106
- as = "div",
107
- children,
72
+ var Box = forwardRef(({
73
+ as = "div",
74
+ children,
75
+ __baseCSS,
76
+ css,
77
+ display,
78
+ height,
79
+ width,
80
+ minWidth,
81
+ maxWidth,
82
+ position,
83
+ top,
84
+ bottom,
85
+ right,
86
+ left,
87
+ zIndex,
88
+ p,
89
+ px,
90
+ py,
91
+ pt,
92
+ pb,
93
+ pl,
94
+ pr,
95
+ m,
96
+ mx,
97
+ my,
98
+ mt,
99
+ mb,
100
+ ml,
101
+ mr,
102
+ flexDirection,
103
+ flexWrap,
104
+ flexShrink,
105
+ flexGrow,
106
+ alignItems,
107
+ justifyContent,
108
+ bg,
109
+ border,
110
+ borderRadius,
111
+ boxShadow,
112
+ opacity,
113
+ overflow,
114
+ transition,
115
+ ...props
116
+ }, ref) => jsx(as, {
117
+ ...props,
118
+ css: createThemedStyle({
119
+ as,
108
120
  __baseCSS,
109
121
  css,
110
- display,
111
- height,
112
- width,
113
- minWidth,
114
- maxWidth,
115
- position,
116
- top,
117
- bottom,
118
- right,
119
- left,
120
- zIndex,
121
- p,
122
- px,
123
- py,
124
- pt,
125
- pb,
126
- pl,
127
- pr,
128
- m,
129
- mx,
130
- my,
131
- mt,
132
- mb,
133
- ml,
134
- mr,
135
- flexDirection,
136
- flexWrap,
137
- flexShrink,
138
- flexGrow,
139
- alignItems,
140
- justifyContent,
141
- bg,
142
- border,
143
- borderRadius,
144
- boxShadow,
145
- opacity,
146
- overflow,
147
- transition
148
- } = _b, props = __objRest(_b, [
149
- "as",
150
- "children",
151
- "__baseCSS",
152
- "css",
153
- "display",
154
- "height",
155
- "width",
156
- "minWidth",
157
- "maxWidth",
158
- "position",
159
- "top",
160
- "bottom",
161
- "right",
162
- "left",
163
- "zIndex",
164
- "p",
165
- "px",
166
- "py",
167
- "pt",
168
- "pb",
169
- "pl",
170
- "pr",
171
- "m",
172
- "mx",
173
- "my",
174
- "mt",
175
- "mb",
176
- "ml",
177
- "mr",
178
- "flexDirection",
179
- "flexWrap",
180
- "flexShrink",
181
- "flexGrow",
182
- "alignItems",
183
- "justifyContent",
184
- "bg",
185
- "border",
186
- "borderRadius",
187
- "boxShadow",
188
- "opacity",
189
- "overflow",
190
- "transition"
191
- ]);
192
- return jsx(as, __spreadProps(__spreadValues({}, props), {
193
- css: createThemedStyle({
194
- as,
195
- __baseCSS,
196
- css,
197
- styles: {
198
- display,
199
- height,
200
- width,
201
- minWidth,
202
- maxWidth,
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
- });
122
+ styles: {
123
+ display,
124
+ height,
125
+ width,
126
+ minWidth,
127
+ maxWidth,
128
+ position,
129
+ top,
130
+ bottom,
131
+ right,
132
+ left,
133
+ zIndex,
134
+ p,
135
+ px,
136
+ py,
137
+ pt,
138
+ pb,
139
+ pl,
140
+ pr,
141
+ m,
142
+ mx,
143
+ my,
144
+ mt,
145
+ mb,
146
+ ml,
147
+ mr,
148
+ flexDirection,
149
+ flexWrap,
150
+ flexShrink,
151
+ flexGrow,
152
+ alignItems,
153
+ justifyContent,
154
+ bg,
155
+ border,
156
+ borderRadius,
157
+ boxShadow,
158
+ opacity,
159
+ overflow,
160
+ transition
161
+ }
162
+ }),
163
+ ref
164
+ }, children));
241
165
 
242
166
  // src/components/Global/Global.tsx
243
167
  import React2 from "react";
@@ -446,25 +370,22 @@ var useStateProps = (states) => {
446
370
  // src/components/SVG/SVG.tsx
447
371
  var toDimension = (value) => Array.isArray(value) ? value.map(ensureNumberOrToken) : ensureNumberOrToken(value);
448
372
  var ensureNumberOrToken = (value) => typeof value === "string" && /[0-9]+/.test(value) ? Number(value) : value;
449
- var SVG = (_a) => {
450
- var _b = _a, {
451
- size = 24,
452
- fill = "currentcolor",
453
- children
454
- } = _b, props = __objRest(_b, [
455
- "size",
456
- "fill",
457
- "children"
458
- ]);
373
+ var SVG = ({
374
+ size = 24,
375
+ fill = "currentcolor",
376
+ children,
377
+ ...props
378
+ }) => {
459
379
  const { css } = useTheme();
460
- return jsx2("svg", __spreadValues({
380
+ return jsx2("svg", {
461
381
  viewBox: "0 0 24 24",
462
382
  css: css({
463
383
  fill,
464
384
  width: toDimension(props.width || size),
465
385
  height: toDimension(props.height || size)
466
- })
467
- }, props), children);
386
+ }),
387
+ ...props
388
+ }, children);
468
389
  };
469
390
  export {
470
391
  Box,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marigold/system",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "description": "Marigold System Library",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -26,9 +26,9 @@
26
26
  "directory": "packages/system"
27
27
  },
28
28
  "dependencies": {
29
- "@emotion/react": "11.9.0",
29
+ "@emotion/react": "11.9.3",
30
30
  "@marigold/types": "0.5.2",
31
- "@theme-ui/css": "0.14.5",
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"
@@ -38,10 +38,10 @@
38
38
  "react-dom": "16.x || 17.x || 18.x"
39
39
  },
40
40
  "devDependencies": {
41
- "@babel/core": "7.17.12",
41
+ "@babel/core": "7.18.6",
42
42
  "@marigold/tsconfig": "0.3.0",
43
- "react": "18.1.0",
44
- "tsup": "6.0.1"
43
+ "react": "18.2.0",
44
+ "tsup": "6.1.3"
45
45
  },
46
46
  "scripts": {
47
47
  "build": "tsup src/index.ts",