@sproutsocial/seeds-react-box 1.0.0 → 1.0.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.
@@ -3,14 +3,15 @@ $ tsup
3
3
  CLI Using tsconfig: tsconfig.json
4
4
  CLI tsup v8.0.2
5
5
  CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-box/tsup.config.ts
6
- CLI Target: es2020
6
+ CLI Target: es2022
7
+ CLI Cleaning output folder
7
8
  CJS Build start
8
9
  ESM Build start
9
- CJS dist/index.js 21.53 KB
10
- CJS ⚡️ Build success in 74ms
11
- ESM dist/index.mjs 19.91 KB
12
- ESM ⚡️ Build success in 75ms
10
+ CJS dist/index.js 2.58 KB
11
+ CJS ⚡️ Build success in 96ms
12
+ ESM dist/esm/index.js 816.00 B
13
+ ESM ⚡️ Build success in 92ms
13
14
  DTS Build start
14
- DTS ⚡️ Build success in 5541ms
15
+ DTS ⚡️ Build success in 11499ms
15
16
  DTS dist/index.d.ts 800.00 B
16
17
  DTS dist/index.d.mts 800.00 B
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @sproutsocial/seeds-react-box
2
2
 
3
+ ## 1.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - c7b905b: - Update `module` field to point to correct ES Module entry point
8
+ - Fix package build so ESM exports are imported properly by web pack
9
+
10
+ ## 1.0.1
11
+
12
+ ### Patch Changes
13
+
14
+ - 6fac0bd: Update dependency resolutions
15
+
3
16
  ## 1.0.0
4
17
 
5
18
  ### Major Changes
@@ -0,0 +1,48 @@
1
+ // src/Box.tsx
2
+ import * as React from "react";
3
+
4
+ // src/styles.tsx
5
+ import styled from "styled-components";
6
+ import {
7
+ COMMON,
8
+ BORDER,
9
+ LAYOUT,
10
+ POSITION,
11
+ FLEXBOX,
12
+ GRID
13
+ } from "@sproutsocial/seeds-react-system-props";
14
+ var Container = styled.div`
15
+ box-sizing: border-box;
16
+ font-family: ${({ theme }) => theme.fontFamily};
17
+
18
+ ${COMMON}
19
+ ${BORDER}
20
+ ${LAYOUT}
21
+ ${POSITION}
22
+ ${FLEXBOX}
23
+ ${GRID}
24
+ `;
25
+ var styles_default = Container;
26
+
27
+ // src/Box.tsx
28
+ var Box = React.forwardRef(
29
+ ({ color, ...props }, ref) => {
30
+ return /* @__PURE__ */ React.createElement(
31
+ styles_default,
32
+ {
33
+ ...props,
34
+ ref,
35
+ color
36
+ }
37
+ );
38
+ }
39
+ );
40
+ Box.displayName = "Box";
41
+ var Box_default = Box;
42
+
43
+ // src/index.ts
44
+ var src_default = Box_default;
45
+ export {
46
+ Box_default as Box,
47
+ src_default as default
48
+ };
package/dist/index.js CHANGED
@@ -40,452 +40,17 @@ var React = __toESM(require("react"));
40
40
 
41
41
  // src/styles.tsx
42
42
  var import_styled_components = __toESM(require("styled-components"));
43
-
44
- // ../seeds-react-system-props/dist/index.mjs
45
- var _r = Object.create;
46
- var q = Object.defineProperty;
47
- var re = Object.getOwnPropertyDescriptor;
48
- var ee = Object.getOwnPropertyNames;
49
- var te = Object.getPrototypeOf;
50
- var oe = Object.prototype.hasOwnProperty;
51
- var ae = (a3, r) => () => (r || a3((r = { exports: {} }).exports, r), r.exports);
52
- var ie = (a3, r, e, o) => {
53
- if (r && typeof r == "object" || typeof r == "function")
54
- for (let t of ee(r))
55
- !oe.call(a3, t) && t !== e && q(a3, t, { get: () => r[t], enumerable: !(o = re(r, t)) || o.enumerable });
56
- return a3;
57
- };
58
- var se = (a3, r, e) => (e = a3 != null ? _r(te(a3)) : {}, ie(r || !a3 || !a3.__esModule ? q(e, "default", { value: a3, enumerable: true }) : e, a3));
59
- var K = ae((Ve, J) => {
60
- var Q = Object.getOwnPropertySymbols, ne = Object.prototype.hasOwnProperty, pe = Object.prototype.propertyIsEnumerable;
61
- function de(a3) {
62
- if (a3 == null)
63
- throw new TypeError("Object.assign cannot be called with null or undefined");
64
- return Object(a3);
65
- }
66
- function le() {
67
- try {
68
- if (!Object.assign)
69
- return false;
70
- var a3 = new String("abc");
71
- if (a3[5] = "de", Object.getOwnPropertyNames(a3)[0] === "5")
72
- return false;
73
- for (var r = {}, e = 0; e < 10; e++)
74
- r["_" + String.fromCharCode(e)] = e;
75
- var o = Object.getOwnPropertyNames(r).map(function(i) {
76
- return r[i];
77
- });
78
- if (o.join("") !== "0123456789")
79
- return false;
80
- var t = {};
81
- return "abcdefghijklmnopqrst".split("").forEach(function(i) {
82
- t[i] = i;
83
- }), Object.keys(Object.assign({}, t)).join("") === "abcdefghijklmnopqrst";
84
- } catch {
85
- return false;
86
- }
87
- }
88
- J.exports = le() ? Object.assign : function(a3, r) {
89
- for (var e, o = de(a3), t, i = 1; i < arguments.length; i++) {
90
- e = Object(arguments[i]);
91
- for (var s in e)
92
- ne.call(e, s) && (o[s] = e[s]);
93
- if (Q) {
94
- t = Q(e);
95
- for (var n = 0; n < t.length; n++)
96
- pe.call(e, t[n]) && (o[t[n]] = e[t[n]]);
97
- }
98
- }
99
- return o;
100
- };
101
- });
102
- var S = se(K());
103
- var Z = function(r, e) {
104
- var o = (0, S.default)({}, r, e);
105
- for (var t in r) {
106
- var i;
107
- !r[t] || typeof e[t] != "object" || (0, S.default)(o, (i = {}, i[t] = (0, S.default)(r[t], e[t]), i));
108
- }
109
- return o;
110
- };
111
- var ce = function(r) {
112
- var e = {};
113
- return Object.keys(r).sort(function(o, t) {
114
- return o.localeCompare(t, void 0, { numeric: true, sensitivity: "base" });
115
- }).forEach(function(o) {
116
- e[o] = r[o];
117
- }), e;
118
- };
119
- var ge = { breakpoints: [40, 52, 64].map(function(a3) {
120
- return a3 + "em";
121
- }) };
122
- var _ = function(r) {
123
- return "@media screen and (min-width: " + r + ")";
124
- };
125
- var fe = function(r, e) {
126
- return R(e, r, r);
127
- };
128
- var R = function(r, e, o, t, i) {
129
- for (e = e && e.split ? e.split(".") : [e], t = 0; t < e.length; t++)
130
- r = r ? r[e[t]] : i;
131
- return r === i ? o : r;
132
- };
133
- var j = function a(r) {
134
- var e = {}, o = function(s) {
135
- var n = {}, c = false, d = s.theme && s.theme.disableStyledSystemCache;
136
- for (var f in s)
137
- if (r[f]) {
138
- var g = r[f], u = s[f], x = R(s.theme, g.scale, g.defaults);
139
- if (typeof u == "object") {
140
- if (e.breakpoints = !d && e.breakpoints || R(s.theme, "breakpoints", ge.breakpoints), Array.isArray(u)) {
141
- e.media = !d && e.media || [null].concat(e.breakpoints.map(_)), n = Z(n, me(e.media, g, x, u, s));
142
- continue;
143
- }
144
- u !== null && (n = Z(n, ue(e.breakpoints, g, x, u, s)), c = true);
145
- continue;
146
- }
147
- (0, S.default)(n, g(u, x, s));
148
- }
149
- return c && (n = ce(n)), n;
150
- };
151
- o.config = r, o.propNames = Object.keys(r), o.cache = e;
152
- var t = Object.keys(r).filter(function(i) {
153
- return i !== "config";
154
- });
155
- return t.length > 1 && t.forEach(function(i) {
156
- var s;
157
- o[i] = a((s = {}, s[i] = r[i], s));
158
- }), o;
159
- };
160
- var me = function(r, e, o, t, i) {
161
- var s = {};
162
- return t.slice(0, r.length).forEach(function(n, c) {
163
- var d = r[c], f = e(n, o, i);
164
- if (!d)
165
- (0, S.default)(s, f);
166
- else {
167
- var g;
168
- (0, S.default)(s, (g = {}, g[d] = (0, S.default)({}, s[d], f), g));
169
- }
170
- }), s;
171
- };
172
- var ue = function(r, e, o, t, i) {
173
- var s = {};
174
- for (var n in t) {
175
- var c = r[n], d = t[n], f = e(d, o, i);
176
- if (!c)
177
- (0, S.default)(s, f);
178
- else {
179
- var g, u = _(c);
180
- (0, S.default)(s, (g = {}, g[u] = (0, S.default)({}, s[u], f), g));
181
- }
182
- }
183
- return s;
184
- };
185
- var H = function(r) {
186
- var e = r.properties, o = r.property, t = r.scale, i = r.transform, s = i === void 0 ? fe : i, n = r.defaultScale;
187
- e = e || [o];
188
- var c = function(f, g, u) {
189
- var x = {}, B = s(f, g, u);
190
- if (B !== null)
191
- return e.forEach(function(z) {
192
- x[z] = B;
193
- }), x;
194
- };
195
- return c.scale = t, c.defaults = n, c;
196
- };
197
- var l = function(r) {
198
- r === void 0 && (r = {});
199
- var e = {};
200
- Object.keys(r).forEach(function(t) {
201
- var i = r[t];
202
- if (i === true) {
203
- e[t] = H({ property: t, scale: t });
204
- return;
205
- }
206
- if (typeof i == "function") {
207
- e[t] = i;
208
- return;
209
- }
210
- e[t] = H(i);
211
- });
212
- var o = j(e);
213
- return o;
214
- };
215
- var w = function() {
216
- for (var r = {}, e = arguments.length, o = new Array(e), t = 0; t < e; t++)
217
- o[t] = arguments[t];
218
- o.forEach(function(s) {
219
- !s || !s.config || (0, S.default)(r, s.config);
220
- });
221
- var i = j(r);
222
- return i;
223
- };
224
- var be = function(r) {
225
- return typeof r == "number" && !isNaN(r);
226
- };
227
- var ye = function(r, e) {
228
- return R(e, r, !be(r) || r > 1 ? r : r * 100 + "%");
229
- };
230
- var he = { width: { property: "width", scale: "sizes", transform: ye }, height: { property: "height", scale: "sizes" }, minWidth: { property: "minWidth", scale: "sizes" }, minHeight: { property: "minHeight", scale: "sizes" }, maxWidth: { property: "maxWidth", scale: "sizes" }, maxHeight: { property: "maxHeight", scale: "sizes" }, size: { properties: ["width", "height"], scale: "sizes" }, overflow: true, overflowX: true, overflowY: true, display: true, verticalAlign: true };
231
- var rr = l(he);
232
- var h = rr;
233
- var D = { color: { property: "color", scale: "colors" }, backgroundColor: { property: "backgroundColor", scale: "colors" }, opacity: true };
234
- D.bg = D.backgroundColor;
235
- var Y = l(D);
236
- var er = Y;
237
- var ve = { fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72] };
238
- var xe = { fontFamily: { property: "fontFamily", scale: "fonts" }, fontSize: { property: "fontSize", scale: "fontSizes", defaultScale: ve.fontSizes }, fontWeight: { property: "fontWeight", scale: "fontWeights" }, lineHeight: { property: "lineHeight", scale: "lineHeights" }, letterSpacing: { property: "letterSpacing", scale: "letterSpacings" }, textAlign: true, fontStyle: true };
239
- var tr = l(xe);
240
- var O = tr;
241
- var Se = { alignItems: true, alignContent: true, justifyItems: true, justifyContent: true, flexWrap: true, flexDirection: true, flex: true, flexGrow: true, flexShrink: true, flexBasis: true, justifySelf: true, alignSelf: true, order: true };
242
- var or = l(Se);
243
- var b = or;
244
- var V = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512] };
245
- var Re = { gridGap: { property: "gridGap", scale: "space", defaultScale: V.space }, gridColumnGap: { property: "gridColumnGap", scale: "space", defaultScale: V.space }, gridRowGap: { property: "gridRowGap", scale: "space", defaultScale: V.space }, gridColumn: true, gridRow: true, gridAutoFlow: true, gridAutoColumns: true, gridAutoRows: true, gridTemplateColumns: true, gridTemplateRows: true, gridTemplateAreas: true, gridArea: true };
246
- var N = l(Re);
247
- var v = N;
248
- var m = { border: { property: "border", scale: "borders" }, borderWidth: { property: "borderWidth", scale: "borderWidths" }, borderStyle: { property: "borderStyle", scale: "borderStyles" }, borderColor: { property: "borderColor", scale: "colors" }, borderRadius: { property: "borderRadius", scale: "radii" }, borderTop: { property: "borderTop", scale: "borders" }, borderTopLeftRadius: { property: "borderTopLeftRadius", scale: "radii" }, borderTopRightRadius: { property: "borderTopRightRadius", scale: "radii" }, borderRight: { property: "borderRight", scale: "borders" }, borderBottom: { property: "borderBottom", scale: "borders" }, borderBottomLeftRadius: { property: "borderBottomLeftRadius", scale: "radii" }, borderBottomRightRadius: { property: "borderBottomRightRadius", scale: "radii" }, borderLeft: { property: "borderLeft", scale: "borders" }, borderX: { properties: ["borderLeft", "borderRight"], scale: "borders" }, borderY: { properties: ["borderTop", "borderBottom"], scale: "borders" } };
249
- m.borderTopWidth = { property: "borderTopWidth", scale: "borderWidths" };
250
- m.borderTopColor = { property: "borderTopColor", scale: "colors" };
251
- m.borderTopStyle = { property: "borderTopStyle", scale: "borderStyles" };
252
- m.borderTopLeftRadius = { property: "borderTopLeftRadius", scale: "radii" };
253
- m.borderTopRightRadius = { property: "borderTopRightRadius", scale: "radii" };
254
- m.borderBottomWidth = { property: "borderBottomWidth", scale: "borderWidths" };
255
- m.borderBottomColor = { property: "borderBottomColor", scale: "colors" };
256
- m.borderBottomStyle = { property: "borderBottomStyle", scale: "borderStyles" };
257
- m.borderBottomLeftRadius = { property: "borderBottomLeftRadius", scale: "radii" };
258
- m.borderBottomRightRadius = { property: "borderBottomRightRadius", scale: "radii" };
259
- m.borderLeftWidth = { property: "borderLeftWidth", scale: "borderWidths" };
260
- m.borderLeftColor = { property: "borderLeftColor", scale: "colors" };
261
- m.borderLeftStyle = { property: "borderLeftStyle", scale: "borderStyles" };
262
- m.borderRightWidth = { property: "borderRightWidth", scale: "borderWidths" };
263
- m.borderRightColor = { property: "borderRightColor", scale: "colors" };
264
- m.borderRightStyle = { property: "borderRightStyle", scale: "borderStyles" };
265
- var X = l(m);
266
- var T = X;
267
- var C = { background: true, backgroundImage: true, backgroundSize: true, backgroundPosition: true, backgroundRepeat: true };
268
- C.bgImage = C.backgroundImage;
269
- C.bgSize = C.backgroundSize;
270
- C.bgPosition = C.backgroundPosition;
271
- C.bgRepeat = C.backgroundRepeat;
272
- var ar = l(C);
273
- var I = ar;
274
- var F = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512] };
275
- var we = { position: true, zIndex: { property: "zIndex", scale: "zIndices" }, top: { property: "top", scale: "space", defaultScale: F.space }, right: { property: "right", scale: "space", defaultScale: F.space }, bottom: { property: "bottom", scale: "space", defaultScale: F.space }, left: { property: "left", scale: "space", defaultScale: F.space } };
276
- var E = l(we);
277
- var A = E;
278
- var y = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512] };
279
- var ir = function(r) {
280
- return typeof r == "number" && !isNaN(r);
281
- };
282
- var L = function(r, e) {
283
- if (!ir(r))
284
- return R(e, r, r);
285
- var o = r < 0, t = Math.abs(r), i = R(e, t, t);
286
- return ir(i) ? i * (o ? -1 : 1) : o ? "-" + i : i;
287
- };
288
- var p = {};
289
- p.margin = { margin: { property: "margin", scale: "space", transform: L, defaultScale: y.space }, marginTop: { property: "marginTop", scale: "space", transform: L, defaultScale: y.space }, marginRight: { property: "marginRight", scale: "space", transform: L, defaultScale: y.space }, marginBottom: { property: "marginBottom", scale: "space", transform: L, defaultScale: y.space }, marginLeft: { property: "marginLeft", scale: "space", transform: L, defaultScale: y.space }, marginX: { properties: ["marginLeft", "marginRight"], scale: "space", transform: L, defaultScale: y.space }, marginY: { properties: ["marginTop", "marginBottom"], scale: "space", transform: L, defaultScale: y.space } };
290
- p.margin.m = p.margin.margin;
291
- p.margin.mt = p.margin.marginTop;
292
- p.margin.mr = p.margin.marginRight;
293
- p.margin.mb = p.margin.marginBottom;
294
- p.margin.ml = p.margin.marginLeft;
295
- p.margin.mx = p.margin.marginX;
296
- p.margin.my = p.margin.marginY;
297
- p.padding = { padding: { property: "padding", scale: "space", defaultScale: y.space }, paddingTop: { property: "paddingTop", scale: "space", defaultScale: y.space }, paddingRight: { property: "paddingRight", scale: "space", defaultScale: y.space }, paddingBottom: { property: "paddingBottom", scale: "space", defaultScale: y.space }, paddingLeft: { property: "paddingLeft", scale: "space", defaultScale: y.space }, paddingX: { properties: ["paddingLeft", "paddingRight"], scale: "space", defaultScale: y.space }, paddingY: { properties: ["paddingTop", "paddingBottom"], scale: "space", defaultScale: y.space } };
298
- p.padding.p = p.padding.padding;
299
- p.padding.pt = p.padding.paddingTop;
300
- p.padding.pr = p.padding.paddingRight;
301
- p.padding.pb = p.padding.paddingBottom;
302
- p.padding.pl = p.padding.paddingLeft;
303
- p.padding.px = p.padding.paddingX;
304
- p.padding.py = p.padding.paddingY;
305
- var sr = l(p.margin);
306
- var nr = l(p.padding);
307
- var U = w(sr, nr);
308
- var pr = l({ boxShadow: { property: "boxShadow", scale: "shadows" }, textShadow: { property: "textShadow", scale: "shadows" } });
309
- var k = pr;
310
- function P() {
311
- return P = Object.assign || function(a3) {
312
- for (var r = 1; r < arguments.length; r++) {
313
- var e = arguments[r];
314
- for (var o in e)
315
- Object.prototype.hasOwnProperty.call(e, o) && (a3[o] = e[o]);
316
- }
317
- return a3;
318
- }, P.apply(this, arguments);
319
- }
320
- var W = function(r, e, o, t, i) {
321
- for (e = e && e.split ? e.split(".") : [e], t = 0; t < e.length; t++)
322
- r = r ? r[e[t]] : i;
323
- return r === i ? o : r;
324
- };
325
- var Te = [40, 52, 64].map(function(a3) {
326
- return a3 + "em";
327
- });
328
- var We = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512], fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72] };
329
- var Ce = { bg: "backgroundColor", m: "margin", mt: "marginTop", mr: "marginRight", mb: "marginBottom", ml: "marginLeft", mx: "marginX", my: "marginY", p: "padding", pt: "paddingTop", pr: "paddingRight", pb: "paddingBottom", pl: "paddingLeft", px: "paddingX", py: "paddingY" };
330
- var dr = { marginX: ["marginLeft", "marginRight"], marginY: ["marginTop", "marginBottom"], paddingX: ["paddingLeft", "paddingRight"], paddingY: ["paddingTop", "paddingBottom"], size: ["width", "height"] };
331
- var Be = { color: "colors", backgroundColor: "colors", borderColor: "colors", margin: "space", marginTop: "space", marginRight: "space", marginBottom: "space", marginLeft: "space", marginX: "space", marginY: "space", padding: "space", paddingTop: "space", paddingRight: "space", paddingBottom: "space", paddingLeft: "space", paddingX: "space", paddingY: "space", top: "space", right: "space", bottom: "space", left: "space", gridGap: "space", gridColumnGap: "space", gridRowGap: "space", gap: "space", columnGap: "space", rowGap: "space", fontFamily: "fonts", fontSize: "fontSizes", fontWeight: "fontWeights", lineHeight: "lineHeights", letterSpacing: "letterSpacings", border: "borders", borderTop: "borders", borderRight: "borders", borderBottom: "borders", borderLeft: "borders", borderWidth: "borderWidths", borderStyle: "borderStyles", borderRadius: "radii", borderTopRightRadius: "radii", borderTopLeftRadius: "radii", borderBottomRightRadius: "radii", borderBottomLeftRadius: "radii", borderTopWidth: "borderWidths", borderTopColor: "colors", borderTopStyle: "borderStyles", borderBottomWidth: "borderWidths", borderBottomColor: "colors", borderBottomStyle: "borderStyles", borderLeftWidth: "borderWidths", borderLeftColor: "colors", borderLeftStyle: "borderStyles", borderRightWidth: "borderWidths", borderRightColor: "colors", borderRightStyle: "borderStyles", outlineColor: "colors", boxShadow: "shadows", textShadow: "shadows", zIndex: "zIndices", width: "sizes", minWidth: "sizes", maxWidth: "sizes", height: "sizes", minHeight: "sizes", maxHeight: "sizes", flexBasis: "sizes", size: "sizes", fill: "colors", stroke: "colors" };
332
- var Oe = function(r, e) {
333
- if (typeof e != "number" || e >= 0)
334
- return W(r, e, e);
335
- var o = Math.abs(e), t = W(r, o, o);
336
- return typeof t == "string" ? "-" + t : t * -1;
337
- };
338
- var Le = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(a3, r) {
339
- var e;
340
- return P({}, a3, (e = {}, e[r] = Oe, e));
341
- }, {});
342
- var ze = function(r) {
343
- return function(e) {
344
- var o = {}, t = W(e, "breakpoints", Te), i = [null].concat(t.map(function(f) {
345
- return "@media screen and (min-width: " + f + ")";
346
- }));
347
- for (var s in r) {
348
- var n = typeof r[s] == "function" ? r[s](e) : r[s];
349
- if (n != null) {
350
- if (!Array.isArray(n)) {
351
- o[s] = n;
352
- continue;
353
- }
354
- for (var c = 0; c < n.slice(0, i.length).length; c++) {
355
- var d = i[c];
356
- if (!d) {
357
- o[s] = n[c];
358
- continue;
359
- }
360
- o[d] = o[d] || {}, n[c] != null && (o[d][s] = n[c]);
361
- }
362
- }
363
- }
364
- return o;
365
- };
366
- };
367
- var je = function a2(r) {
368
- return function(e) {
369
- e === void 0 && (e = {});
370
- var o = P({}, We, {}, e.theme || e), t = {}, i = typeof r == "function" ? r(o) : r, s = ze(i)(o);
371
- for (var n in s) {
372
- var c = s[n], d = typeof c == "function" ? c(o) : c;
373
- if (n === "variant") {
374
- var f = a2(W(o, d))(o);
375
- t = P({}, t, {}, f);
376
- continue;
377
- }
378
- if (d && typeof d == "object") {
379
- t[n] = a2(d)(o);
380
- continue;
381
- }
382
- var g = W(Ce, n, n), u = W(Be, g), x = W(o, u, W(o, g, {})), B = W(Le, g, W), z = B(x, d, d);
383
- if (dr[g])
384
- for (var $ = dr[g], M = 0; M < $.length; M++)
385
- t[$[M]] = z;
386
- else
387
- t[g] = z;
388
- }
389
- return t;
390
- };
391
- };
392
- var lr = je;
393
- var G = function(r) {
394
- var e, o = r.scale, t = r.prop, i = t === void 0 ? "variant" : t, s = r.variants, n = s === void 0 ? {} : s, c = r.key, d;
395
- Object.keys(n).length ? d = function(x, B, z) {
396
- return lr(R(B, x, null))(z.theme);
397
- } : d = function(x, B) {
398
- return R(B, x, null);
399
- }, d.scale = o || c, d.defaults = n;
400
- var f = (e = {}, e[i] = d, e), g = j(f);
401
- return g;
402
- };
403
- G({ key: "buttons" });
404
- G({ key: "textStyles", prop: "textStyle" });
405
- G({ key: "colorStyles", prop: "colors" });
406
- var cr = h.width;
407
- var gr = h.height;
408
- var fr = h.minWidth;
409
- var mr = h.minHeight;
410
- var ur = h.maxWidth;
411
- var br = h.maxHeight;
412
- var yr = h.size;
413
- var hr = h.verticalAlign;
414
- var vr = h.display;
415
- var xr = h.overflow;
416
- h.overflowX;
417
- h.overflowY;
418
- er.opacity;
419
- O.fontSize;
420
- var Sr = O.fontFamily;
421
- var Rr = O.fontWeight;
422
- var wr = O.lineHeight;
423
- var Tr = O.textAlign;
424
- var Wr = O.fontStyle;
425
- O.letterSpacing;
426
- var Cr = b.alignItems;
427
- var Br = b.alignContent;
428
- var Or = b.justifyItems;
429
- var Lr = b.justifyContent;
430
- var zr = b.flexWrap;
431
- var jr = b.flexDirection;
432
- var Ar = b.flex;
433
- var Gr = b.flexGrow;
434
- var Ir = b.flexShrink;
435
- var Pr = b.flexBasis;
436
- var Hr = b.justifySelf;
437
- var Yr = b.alignSelf;
438
- var Nr = b.order;
439
- v.gridGap;
440
- v.gridColumnGap;
441
- v.gridRowGap;
442
- v.gridColumn;
443
- v.gridRow;
444
- v.gridAutoFlow;
445
- v.gridAutoColumns;
446
- v.gridAutoRows;
447
- v.gridTemplateColumns;
448
- v.gridTemplateRows;
449
- v.gridTemplateAreas;
450
- v.gridArea;
451
- var Xr = T.borderWidth;
452
- var Fr = T.borderStyle;
453
- var Er = T.borderColor;
454
- var kr = T.borderTop;
455
- var Mr = T.borderRight;
456
- var Dr = T.borderBottom;
457
- var Vr = T.borderLeft;
458
- var Ur = T.borderRadius;
459
- I.backgroundImage;
460
- I.backgroundSize;
461
- I.backgroundPosition;
462
- I.backgroundRepeat;
463
- var $r = A.zIndex;
464
- var qr = A.top;
465
- var Qr = A.right;
466
- var Jr = A.bottom;
467
- var Kr = A.left;
468
- var Zr = l({ gap: { property: "gap", scale: "space" }, rowGap: { property: "rowGap", scale: "space" }, columnGap: { property: "columnGap", scale: "space" } });
469
- var He = G({ key: "typography", prop: "typeScale" });
470
- var Ye = w(Y, U, l({ cursor: true, whiteSpace: true }));
471
- var Ne = w(X, kr, Mr, Dr, Vr, Xr, Fr, Er, Ur, k);
472
- var Xe = w(He, Sr, Wr, Rr, wr, Tr);
473
- var Fe = w(vr, yr, cr, gr, fr, mr, ur, br, xr, hr);
474
- var Ee = w(E, $r, qr, Qr, Jr, Kr);
475
- var ke = w(Pr, jr, zr, Br, Cr, Lr, Or, Nr, Ar, Ir, Gr, Hr, Yr, Zr);
476
- var Me = N;
477
-
478
- // src/styles.tsx
43
+ var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
479
44
  var Container = import_styled_components.default.div`
480
45
  box-sizing: border-box;
481
46
  font-family: ${({ theme }) => theme.fontFamily};
482
47
 
483
- ${Ye}
484
- ${Ne}
485
- ${Fe}
486
- ${Ee}
487
- ${ke}
488
- ${Me}
48
+ ${import_seeds_react_system_props.COMMON}
49
+ ${import_seeds_react_system_props.BORDER}
50
+ ${import_seeds_react_system_props.LAYOUT}
51
+ ${import_seeds_react_system_props.POSITION}
52
+ ${import_seeds_react_system_props.FLEXBOX}
53
+ ${import_seeds_react_system_props.GRID}
489
54
  `;
490
55
  var styles_default = Container;
491
56
 
@@ -511,12 +76,3 @@ var src_default = Box_default;
511
76
  0 && (module.exports = {
512
77
  Box
513
78
  });
514
- /*! Bundled license information:
515
-
516
- object-assign/index.js:
517
- (*
518
- object-assign
519
- (c) Sindre Sorhus
520
- @license MIT
521
- *)
522
- */
package/package.json CHANGED
@@ -1,24 +1,23 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-box",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Seeds React Box",
5
5
  "author": "Sprout Social, Inc.",
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
- "module": "dist/index.mjs",
8
+ "module": "dist/esm/index.js",
9
9
  "types": "dist/index.d.ts",
10
10
  "scripts": {
11
11
  "build": "tsup"
12
12
  },
13
13
  "dependencies": {
14
- "@sproutsocial/seeds-react-utilities": "*"
14
+ "@sproutsocial/seeds-react-theme": "^1.0.0",
15
+ "@sproutsocial/seeds-react-system-props": "^2.2.0"
15
16
  },
16
17
  "devDependencies": {
17
18
  "@types/react": "^17.0.0",
18
19
  "@types/styled-components": "^5.1.26",
19
20
  "@sproutsocial/eslint-config-seeds": "*",
20
- "@sproutsocial/seeds-react-theme": "*",
21
- "@sproutsocial/seeds-react-theme-provider": "*",
22
21
  "react": "^17.0.2",
23
22
  "styled-components": "^5.2.3",
24
23
  "typescript": "^5.1.6"
package/tsup.config.ts CHANGED
@@ -3,7 +3,8 @@ import { defineConfig } from "tsup";
3
3
  export default defineConfig({
4
4
  entry: ["src/index.ts"],
5
5
  format: ["cjs", "esm"],
6
+ clean: true,
7
+ legacyOutput: true,
6
8
  dts: true,
7
- target: "es2020",
8
9
  external: ["react"],
9
10
  });
package/dist/index.mjs DELETED
@@ -1,485 +0,0 @@
1
- // src/Box.tsx
2
- import * as React from "react";
3
-
4
- // src/styles.tsx
5
- import styled from "styled-components";
6
-
7
- // ../seeds-react-system-props/dist/index.mjs
8
- var _r = Object.create;
9
- var q = Object.defineProperty;
10
- var re = Object.getOwnPropertyDescriptor;
11
- var ee = Object.getOwnPropertyNames;
12
- var te = Object.getPrototypeOf;
13
- var oe = Object.prototype.hasOwnProperty;
14
- var ae = (a3, r) => () => (r || a3((r = { exports: {} }).exports, r), r.exports);
15
- var ie = (a3, r, e, o) => {
16
- if (r && typeof r == "object" || typeof r == "function")
17
- for (let t of ee(r))
18
- !oe.call(a3, t) && t !== e && q(a3, t, { get: () => r[t], enumerable: !(o = re(r, t)) || o.enumerable });
19
- return a3;
20
- };
21
- var se = (a3, r, e) => (e = a3 != null ? _r(te(a3)) : {}, ie(r || !a3 || !a3.__esModule ? q(e, "default", { value: a3, enumerable: true }) : e, a3));
22
- var K = ae((Ve, J) => {
23
- var Q = Object.getOwnPropertySymbols, ne = Object.prototype.hasOwnProperty, pe = Object.prototype.propertyIsEnumerable;
24
- function de(a3) {
25
- if (a3 == null)
26
- throw new TypeError("Object.assign cannot be called with null or undefined");
27
- return Object(a3);
28
- }
29
- function le() {
30
- try {
31
- if (!Object.assign)
32
- return false;
33
- var a3 = new String("abc");
34
- if (a3[5] = "de", Object.getOwnPropertyNames(a3)[0] === "5")
35
- return false;
36
- for (var r = {}, e = 0; e < 10; e++)
37
- r["_" + String.fromCharCode(e)] = e;
38
- var o = Object.getOwnPropertyNames(r).map(function(i) {
39
- return r[i];
40
- });
41
- if (o.join("") !== "0123456789")
42
- return false;
43
- var t = {};
44
- return "abcdefghijklmnopqrst".split("").forEach(function(i) {
45
- t[i] = i;
46
- }), Object.keys(Object.assign({}, t)).join("") === "abcdefghijklmnopqrst";
47
- } catch {
48
- return false;
49
- }
50
- }
51
- J.exports = le() ? Object.assign : function(a3, r) {
52
- for (var e, o = de(a3), t, i = 1; i < arguments.length; i++) {
53
- e = Object(arguments[i]);
54
- for (var s in e)
55
- ne.call(e, s) && (o[s] = e[s]);
56
- if (Q) {
57
- t = Q(e);
58
- for (var n = 0; n < t.length; n++)
59
- pe.call(e, t[n]) && (o[t[n]] = e[t[n]]);
60
- }
61
- }
62
- return o;
63
- };
64
- });
65
- var S = se(K());
66
- var Z = function(r, e) {
67
- var o = (0, S.default)({}, r, e);
68
- for (var t in r) {
69
- var i;
70
- !r[t] || typeof e[t] != "object" || (0, S.default)(o, (i = {}, i[t] = (0, S.default)(r[t], e[t]), i));
71
- }
72
- return o;
73
- };
74
- var ce = function(r) {
75
- var e = {};
76
- return Object.keys(r).sort(function(o, t) {
77
- return o.localeCompare(t, void 0, { numeric: true, sensitivity: "base" });
78
- }).forEach(function(o) {
79
- e[o] = r[o];
80
- }), e;
81
- };
82
- var ge = { breakpoints: [40, 52, 64].map(function(a3) {
83
- return a3 + "em";
84
- }) };
85
- var _ = function(r) {
86
- return "@media screen and (min-width: " + r + ")";
87
- };
88
- var fe = function(r, e) {
89
- return R(e, r, r);
90
- };
91
- var R = function(r, e, o, t, i) {
92
- for (e = e && e.split ? e.split(".") : [e], t = 0; t < e.length; t++)
93
- r = r ? r[e[t]] : i;
94
- return r === i ? o : r;
95
- };
96
- var j = function a(r) {
97
- var e = {}, o = function(s) {
98
- var n = {}, c = false, d = s.theme && s.theme.disableStyledSystemCache;
99
- for (var f in s)
100
- if (r[f]) {
101
- var g = r[f], u = s[f], x = R(s.theme, g.scale, g.defaults);
102
- if (typeof u == "object") {
103
- if (e.breakpoints = !d && e.breakpoints || R(s.theme, "breakpoints", ge.breakpoints), Array.isArray(u)) {
104
- e.media = !d && e.media || [null].concat(e.breakpoints.map(_)), n = Z(n, me(e.media, g, x, u, s));
105
- continue;
106
- }
107
- u !== null && (n = Z(n, ue(e.breakpoints, g, x, u, s)), c = true);
108
- continue;
109
- }
110
- (0, S.default)(n, g(u, x, s));
111
- }
112
- return c && (n = ce(n)), n;
113
- };
114
- o.config = r, o.propNames = Object.keys(r), o.cache = e;
115
- var t = Object.keys(r).filter(function(i) {
116
- return i !== "config";
117
- });
118
- return t.length > 1 && t.forEach(function(i) {
119
- var s;
120
- o[i] = a((s = {}, s[i] = r[i], s));
121
- }), o;
122
- };
123
- var me = function(r, e, o, t, i) {
124
- var s = {};
125
- return t.slice(0, r.length).forEach(function(n, c) {
126
- var d = r[c], f = e(n, o, i);
127
- if (!d)
128
- (0, S.default)(s, f);
129
- else {
130
- var g;
131
- (0, S.default)(s, (g = {}, g[d] = (0, S.default)({}, s[d], f), g));
132
- }
133
- }), s;
134
- };
135
- var ue = function(r, e, o, t, i) {
136
- var s = {};
137
- for (var n in t) {
138
- var c = r[n], d = t[n], f = e(d, o, i);
139
- if (!c)
140
- (0, S.default)(s, f);
141
- else {
142
- var g, u = _(c);
143
- (0, S.default)(s, (g = {}, g[u] = (0, S.default)({}, s[u], f), g));
144
- }
145
- }
146
- return s;
147
- };
148
- var H = function(r) {
149
- var e = r.properties, o = r.property, t = r.scale, i = r.transform, s = i === void 0 ? fe : i, n = r.defaultScale;
150
- e = e || [o];
151
- var c = function(f, g, u) {
152
- var x = {}, B = s(f, g, u);
153
- if (B !== null)
154
- return e.forEach(function(z) {
155
- x[z] = B;
156
- }), x;
157
- };
158
- return c.scale = t, c.defaults = n, c;
159
- };
160
- var l = function(r) {
161
- r === void 0 && (r = {});
162
- var e = {};
163
- Object.keys(r).forEach(function(t) {
164
- var i = r[t];
165
- if (i === true) {
166
- e[t] = H({ property: t, scale: t });
167
- return;
168
- }
169
- if (typeof i == "function") {
170
- e[t] = i;
171
- return;
172
- }
173
- e[t] = H(i);
174
- });
175
- var o = j(e);
176
- return o;
177
- };
178
- var w = function() {
179
- for (var r = {}, e = arguments.length, o = new Array(e), t = 0; t < e; t++)
180
- o[t] = arguments[t];
181
- o.forEach(function(s) {
182
- !s || !s.config || (0, S.default)(r, s.config);
183
- });
184
- var i = j(r);
185
- return i;
186
- };
187
- var be = function(r) {
188
- return typeof r == "number" && !isNaN(r);
189
- };
190
- var ye = function(r, e) {
191
- return R(e, r, !be(r) || r > 1 ? r : r * 100 + "%");
192
- };
193
- var he = { width: { property: "width", scale: "sizes", transform: ye }, height: { property: "height", scale: "sizes" }, minWidth: { property: "minWidth", scale: "sizes" }, minHeight: { property: "minHeight", scale: "sizes" }, maxWidth: { property: "maxWidth", scale: "sizes" }, maxHeight: { property: "maxHeight", scale: "sizes" }, size: { properties: ["width", "height"], scale: "sizes" }, overflow: true, overflowX: true, overflowY: true, display: true, verticalAlign: true };
194
- var rr = l(he);
195
- var h = rr;
196
- var D = { color: { property: "color", scale: "colors" }, backgroundColor: { property: "backgroundColor", scale: "colors" }, opacity: true };
197
- D.bg = D.backgroundColor;
198
- var Y = l(D);
199
- var er = Y;
200
- var ve = { fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72] };
201
- var xe = { fontFamily: { property: "fontFamily", scale: "fonts" }, fontSize: { property: "fontSize", scale: "fontSizes", defaultScale: ve.fontSizes }, fontWeight: { property: "fontWeight", scale: "fontWeights" }, lineHeight: { property: "lineHeight", scale: "lineHeights" }, letterSpacing: { property: "letterSpacing", scale: "letterSpacings" }, textAlign: true, fontStyle: true };
202
- var tr = l(xe);
203
- var O = tr;
204
- var Se = { alignItems: true, alignContent: true, justifyItems: true, justifyContent: true, flexWrap: true, flexDirection: true, flex: true, flexGrow: true, flexShrink: true, flexBasis: true, justifySelf: true, alignSelf: true, order: true };
205
- var or = l(Se);
206
- var b = or;
207
- var V = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512] };
208
- var Re = { gridGap: { property: "gridGap", scale: "space", defaultScale: V.space }, gridColumnGap: { property: "gridColumnGap", scale: "space", defaultScale: V.space }, gridRowGap: { property: "gridRowGap", scale: "space", defaultScale: V.space }, gridColumn: true, gridRow: true, gridAutoFlow: true, gridAutoColumns: true, gridAutoRows: true, gridTemplateColumns: true, gridTemplateRows: true, gridTemplateAreas: true, gridArea: true };
209
- var N = l(Re);
210
- var v = N;
211
- var m = { border: { property: "border", scale: "borders" }, borderWidth: { property: "borderWidth", scale: "borderWidths" }, borderStyle: { property: "borderStyle", scale: "borderStyles" }, borderColor: { property: "borderColor", scale: "colors" }, borderRadius: { property: "borderRadius", scale: "radii" }, borderTop: { property: "borderTop", scale: "borders" }, borderTopLeftRadius: { property: "borderTopLeftRadius", scale: "radii" }, borderTopRightRadius: { property: "borderTopRightRadius", scale: "radii" }, borderRight: { property: "borderRight", scale: "borders" }, borderBottom: { property: "borderBottom", scale: "borders" }, borderBottomLeftRadius: { property: "borderBottomLeftRadius", scale: "radii" }, borderBottomRightRadius: { property: "borderBottomRightRadius", scale: "radii" }, borderLeft: { property: "borderLeft", scale: "borders" }, borderX: { properties: ["borderLeft", "borderRight"], scale: "borders" }, borderY: { properties: ["borderTop", "borderBottom"], scale: "borders" } };
212
- m.borderTopWidth = { property: "borderTopWidth", scale: "borderWidths" };
213
- m.borderTopColor = { property: "borderTopColor", scale: "colors" };
214
- m.borderTopStyle = { property: "borderTopStyle", scale: "borderStyles" };
215
- m.borderTopLeftRadius = { property: "borderTopLeftRadius", scale: "radii" };
216
- m.borderTopRightRadius = { property: "borderTopRightRadius", scale: "radii" };
217
- m.borderBottomWidth = { property: "borderBottomWidth", scale: "borderWidths" };
218
- m.borderBottomColor = { property: "borderBottomColor", scale: "colors" };
219
- m.borderBottomStyle = { property: "borderBottomStyle", scale: "borderStyles" };
220
- m.borderBottomLeftRadius = { property: "borderBottomLeftRadius", scale: "radii" };
221
- m.borderBottomRightRadius = { property: "borderBottomRightRadius", scale: "radii" };
222
- m.borderLeftWidth = { property: "borderLeftWidth", scale: "borderWidths" };
223
- m.borderLeftColor = { property: "borderLeftColor", scale: "colors" };
224
- m.borderLeftStyle = { property: "borderLeftStyle", scale: "borderStyles" };
225
- m.borderRightWidth = { property: "borderRightWidth", scale: "borderWidths" };
226
- m.borderRightColor = { property: "borderRightColor", scale: "colors" };
227
- m.borderRightStyle = { property: "borderRightStyle", scale: "borderStyles" };
228
- var X = l(m);
229
- var T = X;
230
- var C = { background: true, backgroundImage: true, backgroundSize: true, backgroundPosition: true, backgroundRepeat: true };
231
- C.bgImage = C.backgroundImage;
232
- C.bgSize = C.backgroundSize;
233
- C.bgPosition = C.backgroundPosition;
234
- C.bgRepeat = C.backgroundRepeat;
235
- var ar = l(C);
236
- var I = ar;
237
- var F = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512] };
238
- var we = { position: true, zIndex: { property: "zIndex", scale: "zIndices" }, top: { property: "top", scale: "space", defaultScale: F.space }, right: { property: "right", scale: "space", defaultScale: F.space }, bottom: { property: "bottom", scale: "space", defaultScale: F.space }, left: { property: "left", scale: "space", defaultScale: F.space } };
239
- var E = l(we);
240
- var A = E;
241
- var y = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512] };
242
- var ir = function(r) {
243
- return typeof r == "number" && !isNaN(r);
244
- };
245
- var L = function(r, e) {
246
- if (!ir(r))
247
- return R(e, r, r);
248
- var o = r < 0, t = Math.abs(r), i = R(e, t, t);
249
- return ir(i) ? i * (o ? -1 : 1) : o ? "-" + i : i;
250
- };
251
- var p = {};
252
- p.margin = { margin: { property: "margin", scale: "space", transform: L, defaultScale: y.space }, marginTop: { property: "marginTop", scale: "space", transform: L, defaultScale: y.space }, marginRight: { property: "marginRight", scale: "space", transform: L, defaultScale: y.space }, marginBottom: { property: "marginBottom", scale: "space", transform: L, defaultScale: y.space }, marginLeft: { property: "marginLeft", scale: "space", transform: L, defaultScale: y.space }, marginX: { properties: ["marginLeft", "marginRight"], scale: "space", transform: L, defaultScale: y.space }, marginY: { properties: ["marginTop", "marginBottom"], scale: "space", transform: L, defaultScale: y.space } };
253
- p.margin.m = p.margin.margin;
254
- p.margin.mt = p.margin.marginTop;
255
- p.margin.mr = p.margin.marginRight;
256
- p.margin.mb = p.margin.marginBottom;
257
- p.margin.ml = p.margin.marginLeft;
258
- p.margin.mx = p.margin.marginX;
259
- p.margin.my = p.margin.marginY;
260
- p.padding = { padding: { property: "padding", scale: "space", defaultScale: y.space }, paddingTop: { property: "paddingTop", scale: "space", defaultScale: y.space }, paddingRight: { property: "paddingRight", scale: "space", defaultScale: y.space }, paddingBottom: { property: "paddingBottom", scale: "space", defaultScale: y.space }, paddingLeft: { property: "paddingLeft", scale: "space", defaultScale: y.space }, paddingX: { properties: ["paddingLeft", "paddingRight"], scale: "space", defaultScale: y.space }, paddingY: { properties: ["paddingTop", "paddingBottom"], scale: "space", defaultScale: y.space } };
261
- p.padding.p = p.padding.padding;
262
- p.padding.pt = p.padding.paddingTop;
263
- p.padding.pr = p.padding.paddingRight;
264
- p.padding.pb = p.padding.paddingBottom;
265
- p.padding.pl = p.padding.paddingLeft;
266
- p.padding.px = p.padding.paddingX;
267
- p.padding.py = p.padding.paddingY;
268
- var sr = l(p.margin);
269
- var nr = l(p.padding);
270
- var U = w(sr, nr);
271
- var pr = l({ boxShadow: { property: "boxShadow", scale: "shadows" }, textShadow: { property: "textShadow", scale: "shadows" } });
272
- var k = pr;
273
- function P() {
274
- return P = Object.assign || function(a3) {
275
- for (var r = 1; r < arguments.length; r++) {
276
- var e = arguments[r];
277
- for (var o in e)
278
- Object.prototype.hasOwnProperty.call(e, o) && (a3[o] = e[o]);
279
- }
280
- return a3;
281
- }, P.apply(this, arguments);
282
- }
283
- var W = function(r, e, o, t, i) {
284
- for (e = e && e.split ? e.split(".") : [e], t = 0; t < e.length; t++)
285
- r = r ? r[e[t]] : i;
286
- return r === i ? o : r;
287
- };
288
- var Te = [40, 52, 64].map(function(a3) {
289
- return a3 + "em";
290
- });
291
- var We = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512], fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72] };
292
- var Ce = { bg: "backgroundColor", m: "margin", mt: "marginTop", mr: "marginRight", mb: "marginBottom", ml: "marginLeft", mx: "marginX", my: "marginY", p: "padding", pt: "paddingTop", pr: "paddingRight", pb: "paddingBottom", pl: "paddingLeft", px: "paddingX", py: "paddingY" };
293
- var dr = { marginX: ["marginLeft", "marginRight"], marginY: ["marginTop", "marginBottom"], paddingX: ["paddingLeft", "paddingRight"], paddingY: ["paddingTop", "paddingBottom"], size: ["width", "height"] };
294
- var Be = { color: "colors", backgroundColor: "colors", borderColor: "colors", margin: "space", marginTop: "space", marginRight: "space", marginBottom: "space", marginLeft: "space", marginX: "space", marginY: "space", padding: "space", paddingTop: "space", paddingRight: "space", paddingBottom: "space", paddingLeft: "space", paddingX: "space", paddingY: "space", top: "space", right: "space", bottom: "space", left: "space", gridGap: "space", gridColumnGap: "space", gridRowGap: "space", gap: "space", columnGap: "space", rowGap: "space", fontFamily: "fonts", fontSize: "fontSizes", fontWeight: "fontWeights", lineHeight: "lineHeights", letterSpacing: "letterSpacings", border: "borders", borderTop: "borders", borderRight: "borders", borderBottom: "borders", borderLeft: "borders", borderWidth: "borderWidths", borderStyle: "borderStyles", borderRadius: "radii", borderTopRightRadius: "radii", borderTopLeftRadius: "radii", borderBottomRightRadius: "radii", borderBottomLeftRadius: "radii", borderTopWidth: "borderWidths", borderTopColor: "colors", borderTopStyle: "borderStyles", borderBottomWidth: "borderWidths", borderBottomColor: "colors", borderBottomStyle: "borderStyles", borderLeftWidth: "borderWidths", borderLeftColor: "colors", borderLeftStyle: "borderStyles", borderRightWidth: "borderWidths", borderRightColor: "colors", borderRightStyle: "borderStyles", outlineColor: "colors", boxShadow: "shadows", textShadow: "shadows", zIndex: "zIndices", width: "sizes", minWidth: "sizes", maxWidth: "sizes", height: "sizes", minHeight: "sizes", maxHeight: "sizes", flexBasis: "sizes", size: "sizes", fill: "colors", stroke: "colors" };
295
- var Oe = function(r, e) {
296
- if (typeof e != "number" || e >= 0)
297
- return W(r, e, e);
298
- var o = Math.abs(e), t = W(r, o, o);
299
- return typeof t == "string" ? "-" + t : t * -1;
300
- };
301
- var Le = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(a3, r) {
302
- var e;
303
- return P({}, a3, (e = {}, e[r] = Oe, e));
304
- }, {});
305
- var ze = function(r) {
306
- return function(e) {
307
- var o = {}, t = W(e, "breakpoints", Te), i = [null].concat(t.map(function(f) {
308
- return "@media screen and (min-width: " + f + ")";
309
- }));
310
- for (var s in r) {
311
- var n = typeof r[s] == "function" ? r[s](e) : r[s];
312
- if (n != null) {
313
- if (!Array.isArray(n)) {
314
- o[s] = n;
315
- continue;
316
- }
317
- for (var c = 0; c < n.slice(0, i.length).length; c++) {
318
- var d = i[c];
319
- if (!d) {
320
- o[s] = n[c];
321
- continue;
322
- }
323
- o[d] = o[d] || {}, n[c] != null && (o[d][s] = n[c]);
324
- }
325
- }
326
- }
327
- return o;
328
- };
329
- };
330
- var je = function a2(r) {
331
- return function(e) {
332
- e === void 0 && (e = {});
333
- var o = P({}, We, {}, e.theme || e), t = {}, i = typeof r == "function" ? r(o) : r, s = ze(i)(o);
334
- for (var n in s) {
335
- var c = s[n], d = typeof c == "function" ? c(o) : c;
336
- if (n === "variant") {
337
- var f = a2(W(o, d))(o);
338
- t = P({}, t, {}, f);
339
- continue;
340
- }
341
- if (d && typeof d == "object") {
342
- t[n] = a2(d)(o);
343
- continue;
344
- }
345
- var g = W(Ce, n, n), u = W(Be, g), x = W(o, u, W(o, g, {})), B = W(Le, g, W), z = B(x, d, d);
346
- if (dr[g])
347
- for (var $ = dr[g], M = 0; M < $.length; M++)
348
- t[$[M]] = z;
349
- else
350
- t[g] = z;
351
- }
352
- return t;
353
- };
354
- };
355
- var lr = je;
356
- var G = function(r) {
357
- var e, o = r.scale, t = r.prop, i = t === void 0 ? "variant" : t, s = r.variants, n = s === void 0 ? {} : s, c = r.key, d;
358
- Object.keys(n).length ? d = function(x, B, z) {
359
- return lr(R(B, x, null))(z.theme);
360
- } : d = function(x, B) {
361
- return R(B, x, null);
362
- }, d.scale = o || c, d.defaults = n;
363
- var f = (e = {}, e[i] = d, e), g = j(f);
364
- return g;
365
- };
366
- G({ key: "buttons" });
367
- G({ key: "textStyles", prop: "textStyle" });
368
- G({ key: "colorStyles", prop: "colors" });
369
- var cr = h.width;
370
- var gr = h.height;
371
- var fr = h.minWidth;
372
- var mr = h.minHeight;
373
- var ur = h.maxWidth;
374
- var br = h.maxHeight;
375
- var yr = h.size;
376
- var hr = h.verticalAlign;
377
- var vr = h.display;
378
- var xr = h.overflow;
379
- h.overflowX;
380
- h.overflowY;
381
- er.opacity;
382
- O.fontSize;
383
- var Sr = O.fontFamily;
384
- var Rr = O.fontWeight;
385
- var wr = O.lineHeight;
386
- var Tr = O.textAlign;
387
- var Wr = O.fontStyle;
388
- O.letterSpacing;
389
- var Cr = b.alignItems;
390
- var Br = b.alignContent;
391
- var Or = b.justifyItems;
392
- var Lr = b.justifyContent;
393
- var zr = b.flexWrap;
394
- var jr = b.flexDirection;
395
- var Ar = b.flex;
396
- var Gr = b.flexGrow;
397
- var Ir = b.flexShrink;
398
- var Pr = b.flexBasis;
399
- var Hr = b.justifySelf;
400
- var Yr = b.alignSelf;
401
- var Nr = b.order;
402
- v.gridGap;
403
- v.gridColumnGap;
404
- v.gridRowGap;
405
- v.gridColumn;
406
- v.gridRow;
407
- v.gridAutoFlow;
408
- v.gridAutoColumns;
409
- v.gridAutoRows;
410
- v.gridTemplateColumns;
411
- v.gridTemplateRows;
412
- v.gridTemplateAreas;
413
- v.gridArea;
414
- var Xr = T.borderWidth;
415
- var Fr = T.borderStyle;
416
- var Er = T.borderColor;
417
- var kr = T.borderTop;
418
- var Mr = T.borderRight;
419
- var Dr = T.borderBottom;
420
- var Vr = T.borderLeft;
421
- var Ur = T.borderRadius;
422
- I.backgroundImage;
423
- I.backgroundSize;
424
- I.backgroundPosition;
425
- I.backgroundRepeat;
426
- var $r = A.zIndex;
427
- var qr = A.top;
428
- var Qr = A.right;
429
- var Jr = A.bottom;
430
- var Kr = A.left;
431
- var Zr = l({ gap: { property: "gap", scale: "space" }, rowGap: { property: "rowGap", scale: "space" }, columnGap: { property: "columnGap", scale: "space" } });
432
- var He = G({ key: "typography", prop: "typeScale" });
433
- var Ye = w(Y, U, l({ cursor: true, whiteSpace: true }));
434
- var Ne = w(X, kr, Mr, Dr, Vr, Xr, Fr, Er, Ur, k);
435
- var Xe = w(He, Sr, Wr, Rr, wr, Tr);
436
- var Fe = w(vr, yr, cr, gr, fr, mr, ur, br, xr, hr);
437
- var Ee = w(E, $r, qr, Qr, Jr, Kr);
438
- var ke = w(Pr, jr, zr, Br, Cr, Lr, Or, Nr, Ar, Ir, Gr, Hr, Yr, Zr);
439
- var Me = N;
440
-
441
- // src/styles.tsx
442
- var Container = styled.div`
443
- box-sizing: border-box;
444
- font-family: ${({ theme }) => theme.fontFamily};
445
-
446
- ${Ye}
447
- ${Ne}
448
- ${Fe}
449
- ${Ee}
450
- ${ke}
451
- ${Me}
452
- `;
453
- var styles_default = Container;
454
-
455
- // src/Box.tsx
456
- var Box = React.forwardRef(
457
- ({ color, ...props }, ref) => {
458
- return /* @__PURE__ */ React.createElement(
459
- styles_default,
460
- {
461
- ...props,
462
- ref,
463
- color
464
- }
465
- );
466
- }
467
- );
468
- Box.displayName = "Box";
469
- var Box_default = Box;
470
-
471
- // src/index.ts
472
- var src_default = Box_default;
473
- export {
474
- Box_default as Box,
475
- src_default as default
476
- };
477
- /*! Bundled license information:
478
-
479
- object-assign/index.js:
480
- (*
481
- object-assign
482
- (c) Sindre Sorhus
483
- @license MIT
484
- *)
485
- */