@sproutsocial/seeds-react-box 1.0.0

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: "",
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,16 @@
+$ tsup
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-box/tsup.config.ts
+CLI Target: es2020
+CJS Build start
+ESM Build start
+CJS dist/index.js 21.53 KB
+CJS ⚡️ Build success in 74ms
+ESM dist/index.mjs 19.91 KB
+ESM ⚡️ Build success in 75ms
+DTS Build start
+DTS ⚡️ Build success in 5541ms
+DTS dist/index.d.ts  800.00 B
+DTS dist/index.d.mts 800.00 B

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-box
+
+## 1.0.0
+
+### Major Changes
+
+- 75aa221: `Box`, `ThemeProvider`, and `react-testing-library` are now a standalone packages.

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import * as React$1 from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemBorderProps, TypeSystemLayoutProps, TypeSystemPositionProps, TypeSystemFlexboxProps, TypeSystemGridProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeContainerProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemBorderProps, TypeSystemLayoutProps, TypeSystemPositionProps, TypeSystemFlexboxProps, TypeSystemGridProps {
+}
+interface TypeBoxProps extends TypeContainerProps, Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeContainerProps> {
+}
+
+declare const Box: React$1.ForwardRefExoticComponent<Omit<TypeBoxProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+export { Box, type TypeBoxProps, type TypeContainerProps, Box as default };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import * as React$1 from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemBorderProps, TypeSystemLayoutProps, TypeSystemPositionProps, TypeSystemFlexboxProps, TypeSystemGridProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeContainerProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemBorderProps, TypeSystemLayoutProps, TypeSystemPositionProps, TypeSystemFlexboxProps, TypeSystemGridProps {
+}
+interface TypeBoxProps extends TypeContainerProps, Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeContainerProps> {
+}
+
+declare const Box: React$1.ForwardRefExoticComponent<Omit<TypeBoxProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+export { Box, type TypeBoxProps, type TypeContainerProps, Box as default };

package/dist/index.js

@@ -0,0 +1,522 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Box: () => Box_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Box.tsx
+var React = __toESM(require("react"));
+
+// src/styles.tsx
+var import_styled_components = __toESM(require("styled-components"));
+
+// ../seeds-react-system-props/dist/index.mjs
+var _r = Object.create;
+var q = Object.defineProperty;
+var re = Object.getOwnPropertyDescriptor;
+var ee = Object.getOwnPropertyNames;
+var te = Object.getPrototypeOf;
+var oe = Object.prototype.hasOwnProperty;
+var ae = (a3, r) => () => (r || a3((r = { exports: {} }).exports, r), r.exports);
+var ie = (a3, r, e, o) => {
+  if (r && typeof r == "object" || typeof r == "function")
+    for (let t of ee(r))
+      !oe.call(a3, t) && t !== e && q(a3, t, { get: () => r[t], enumerable: !(o = re(r, t)) || o.enumerable });
+  return a3;
+};
+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));
+var K = ae((Ve, J) => {
+  var Q = Object.getOwnPropertySymbols, ne = Object.prototype.hasOwnProperty, pe = Object.prototype.propertyIsEnumerable;
+  function de(a3) {
+    if (a3 == null)
+      throw new TypeError("Object.assign cannot be called with null or undefined");
+    return Object(a3);
+  }
+  function le() {
+    try {
+      if (!Object.assign)
+        return false;
+      var a3 = new String("abc");
+      if (a3[5] = "de", Object.getOwnPropertyNames(a3)[0] === "5")
+        return false;
+      for (var r = {}, e = 0; e < 10; e++)
+        r["_" + String.fromCharCode(e)] = e;
+      var o = Object.getOwnPropertyNames(r).map(function(i) {
+        return r[i];
+      });
+      if (o.join("") !== "0123456789")
+        return false;
+      var t = {};
+      return "abcdefghijklmnopqrst".split("").forEach(function(i) {
+        t[i] = i;
+      }), Object.keys(Object.assign({}, t)).join("") === "abcdefghijklmnopqrst";
+    } catch {
+      return false;
+    }
+  }
+  J.exports = le() ? Object.assign : function(a3, r) {
+    for (var e, o = de(a3), t, i = 1; i < arguments.length; i++) {
+      e = Object(arguments[i]);
+      for (var s in e)
+        ne.call(e, s) && (o[s] = e[s]);
+      if (Q) {
+        t = Q(e);
+        for (var n = 0; n < t.length; n++)
+          pe.call(e, t[n]) && (o[t[n]] = e[t[n]]);
+      }
+    }
+    return o;
+  };
+});
+var S = se(K());
+var Z = function(r, e) {
+  var o = (0, S.default)({}, r, e);
+  for (var t in r) {
+    var i;
+    !r[t] || typeof e[t] != "object" || (0, S.default)(o, (i = {}, i[t] = (0, S.default)(r[t], e[t]), i));
+  }
+  return o;
+};
+var ce = function(r) {
+  var e = {};
+  return Object.keys(r).sort(function(o, t) {
+    return o.localeCompare(t, void 0, { numeric: true, sensitivity: "base" });
+  }).forEach(function(o) {
+    e[o] = r[o];
+  }), e;
+};
+var ge = { breakpoints: [40, 52, 64].map(function(a3) {
+  return a3 + "em";
+}) };
+var _ = function(r) {
+  return "@media screen and (min-width: " + r + ")";
+};
+var fe = function(r, e) {
+  return R(e, r, r);
+};
+var R = function(r, e, o, t, i) {
+  for (e = e && e.split ? e.split(".") : [e], t = 0; t < e.length; t++)
+    r = r ? r[e[t]] : i;
+  return r === i ? o : r;
+};
+var j = function a(r) {
+  var e = {}, o = function(s) {
+    var n = {}, c = false, d = s.theme && s.theme.disableStyledSystemCache;
+    for (var f in s)
+      if (r[f]) {
+        var g = r[f], u = s[f], x = R(s.theme, g.scale, g.defaults);
+        if (typeof u == "object") {
+          if (e.breakpoints = !d && e.breakpoints || R(s.theme, "breakpoints", ge.breakpoints), Array.isArray(u)) {
+            e.media = !d && e.media || [null].concat(e.breakpoints.map(_)), n = Z(n, me(e.media, g, x, u, s));
+            continue;
+          }
+          u !== null && (n = Z(n, ue(e.breakpoints, g, x, u, s)), c = true);
+          continue;
+        }
+        (0, S.default)(n, g(u, x, s));
+      }
+    return c && (n = ce(n)), n;
+  };
+  o.config = r, o.propNames = Object.keys(r), o.cache = e;
+  var t = Object.keys(r).filter(function(i) {
+    return i !== "config";
+  });
+  return t.length > 1 && t.forEach(function(i) {
+    var s;
+    o[i] = a((s = {}, s[i] = r[i], s));
+  }), o;
+};
+var me = function(r, e, o, t, i) {
+  var s = {};
+  return t.slice(0, r.length).forEach(function(n, c) {
+    var d = r[c], f = e(n, o, i);
+    if (!d)
+      (0, S.default)(s, f);
+    else {
+      var g;
+      (0, S.default)(s, (g = {}, g[d] = (0, S.default)({}, s[d], f), g));
+    }
+  }), s;
+};
+var ue = function(r, e, o, t, i) {
+  var s = {};
+  for (var n in t) {
+    var c = r[n], d = t[n], f = e(d, o, i);
+    if (!c)
+      (0, S.default)(s, f);
+    else {
+      var g, u = _(c);
+      (0, S.default)(s, (g = {}, g[u] = (0, S.default)({}, s[u], f), g));
+    }
+  }
+  return s;
+};
+var H = function(r) {
+  var e = r.properties, o = r.property, t = r.scale, i = r.transform, s = i === void 0 ? fe : i, n = r.defaultScale;
+  e = e || [o];
+  var c = function(f, g, u) {
+    var x = {}, B = s(f, g, u);
+    if (B !== null)
+      return e.forEach(function(z) {
+        x[z] = B;
+      }), x;
+  };
+  return c.scale = t, c.defaults = n, c;
+};
+var l = function(r) {
+  r === void 0 && (r = {});
+  var e = {};
+  Object.keys(r).forEach(function(t) {
+    var i = r[t];
+    if (i === true) {
+      e[t] = H({ property: t, scale: t });
+      return;
+    }
+    if (typeof i == "function") {
+      e[t] = i;
+      return;
+    }
+    e[t] = H(i);
+  });
+  var o = j(e);
+  return o;
+};
+var w = function() {
+  for (var r = {}, e = arguments.length, o = new Array(e), t = 0; t < e; t++)
+    o[t] = arguments[t];
+  o.forEach(function(s) {
+    !s || !s.config || (0, S.default)(r, s.config);
+  });
+  var i = j(r);
+  return i;
+};
+var be = function(r) {
+  return typeof r == "number" && !isNaN(r);
+};
+var ye = function(r, e) {
+  return R(e, r, !be(r) || r > 1 ? r : r * 100 + "%");
+};
+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 };
+var rr = l(he);
+var h = rr;
+var D = { color: { property: "color", scale: "colors" }, backgroundColor: { property: "backgroundColor", scale: "colors" }, opacity: true };
+D.bg = D.backgroundColor;
+var Y = l(D);
+var er = Y;
+var ve = { fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72] };
+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 };
+var tr = l(xe);
+var O = tr;
+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 };
+var or = l(Se);
+var b = or;
+var V = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512] };
+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 };
+var N = l(Re);
+var v = N;
+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" } };
+m.borderTopWidth = { property: "borderTopWidth", scale: "borderWidths" };
+m.borderTopColor = { property: "borderTopColor", scale: "colors" };
+m.borderTopStyle = { property: "borderTopStyle", scale: "borderStyles" };
+m.borderTopLeftRadius = { property: "borderTopLeftRadius", scale: "radii" };
+m.borderTopRightRadius = { property: "borderTopRightRadius", scale: "radii" };
+m.borderBottomWidth = { property: "borderBottomWidth", scale: "borderWidths" };
+m.borderBottomColor = { property: "borderBottomColor", scale: "colors" };
+m.borderBottomStyle = { property: "borderBottomStyle", scale: "borderStyles" };
+m.borderBottomLeftRadius = { property: "borderBottomLeftRadius", scale: "radii" };
+m.borderBottomRightRadius = { property: "borderBottomRightRadius", scale: "radii" };
+m.borderLeftWidth = { property: "borderLeftWidth", scale: "borderWidths" };
+m.borderLeftColor = { property: "borderLeftColor", scale: "colors" };
+m.borderLeftStyle = { property: "borderLeftStyle", scale: "borderStyles" };
+m.borderRightWidth = { property: "borderRightWidth", scale: "borderWidths" };
+m.borderRightColor = { property: "borderRightColor", scale: "colors" };
+m.borderRightStyle = { property: "borderRightStyle", scale: "borderStyles" };
+var X = l(m);
+var T = X;
+var C = { background: true, backgroundImage: true, backgroundSize: true, backgroundPosition: true, backgroundRepeat: true };
+C.bgImage = C.backgroundImage;
+C.bgSize = C.backgroundSize;
+C.bgPosition = C.backgroundPosition;
+C.bgRepeat = C.backgroundRepeat;
+var ar = l(C);
+var I = ar;
+var F = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512] };
+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 } };
+var E = l(we);
+var A = E;
+var y = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512] };
+var ir = function(r) {
+  return typeof r == "number" && !isNaN(r);
+};
+var L = function(r, e) {
+  if (!ir(r))
+    return R(e, r, r);
+  var o = r < 0, t = Math.abs(r), i = R(e, t, t);
+  return ir(i) ? i * (o ? -1 : 1) : o ? "-" + i : i;
+};
+var p = {};
+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 } };
+p.margin.m = p.margin.margin;
+p.margin.mt = p.margin.marginTop;
+p.margin.mr = p.margin.marginRight;
+p.margin.mb = p.margin.marginBottom;
+p.margin.ml = p.margin.marginLeft;
+p.margin.mx = p.margin.marginX;
+p.margin.my = p.margin.marginY;
+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 } };
+p.padding.p = p.padding.padding;
+p.padding.pt = p.padding.paddingTop;
+p.padding.pr = p.padding.paddingRight;
+p.padding.pb = p.padding.paddingBottom;
+p.padding.pl = p.padding.paddingLeft;
+p.padding.px = p.padding.paddingX;
+p.padding.py = p.padding.paddingY;
+var sr = l(p.margin);
+var nr = l(p.padding);
+var U = w(sr, nr);
+var pr = l({ boxShadow: { property: "boxShadow", scale: "shadows" }, textShadow: { property: "textShadow", scale: "shadows" } });
+var k = pr;
+function P() {
+  return P = Object.assign || function(a3) {
+    for (var r = 1; r < arguments.length; r++) {
+      var e = arguments[r];
+      for (var o in e)
+        Object.prototype.hasOwnProperty.call(e, o) && (a3[o] = e[o]);
+    }
+    return a3;
+  }, P.apply(this, arguments);
+}
+var W = function(r, e, o, t, i) {
+  for (e = e && e.split ? e.split(".") : [e], t = 0; t < e.length; t++)
+    r = r ? r[e[t]] : i;
+  return r === i ? o : r;
+};
+var Te = [40, 52, 64].map(function(a3) {
+  return a3 + "em";
+});
+var We = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512], fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72] };
+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" };
+var dr = { marginX: ["marginLeft", "marginRight"], marginY: ["marginTop", "marginBottom"], paddingX: ["paddingLeft", "paddingRight"], paddingY: ["paddingTop", "paddingBottom"], size: ["width", "height"] };
+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" };
+var Oe = function(r, e) {
+  if (typeof e != "number" || e >= 0)
+    return W(r, e, e);
+  var o = Math.abs(e), t = W(r, o, o);
+  return typeof t == "string" ? "-" + t : t * -1;
+};
+var Le = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(a3, r) {
+  var e;
+  return P({}, a3, (e = {}, e[r] = Oe, e));
+}, {});
+var ze = function(r) {
+  return function(e) {
+    var o = {}, t = W(e, "breakpoints", Te), i = [null].concat(t.map(function(f) {
+      return "@media screen and (min-width: " + f + ")";
+    }));
+    for (var s in r) {
+      var n = typeof r[s] == "function" ? r[s](e) : r[s];
+      if (n != null) {
+        if (!Array.isArray(n)) {
+          o[s] = n;
+          continue;
+        }
+        for (var c = 0; c < n.slice(0, i.length).length; c++) {
+          var d = i[c];
+          if (!d) {
+            o[s] = n[c];
+            continue;
+          }
+          o[d] = o[d] || {}, n[c] != null && (o[d][s] = n[c]);
+        }
+      }
+    }
+    return o;
+  };
+};
+var je = function a2(r) {
+  return function(e) {
+    e === void 0 && (e = {});
+    var o = P({}, We, {}, e.theme || e), t = {}, i = typeof r == "function" ? r(o) : r, s = ze(i)(o);
+    for (var n in s) {
+      var c = s[n], d = typeof c == "function" ? c(o) : c;
+      if (n === "variant") {
+        var f = a2(W(o, d))(o);
+        t = P({}, t, {}, f);
+        continue;
+      }
+      if (d && typeof d == "object") {
+        t[n] = a2(d)(o);
+        continue;
+      }
+      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);
+      if (dr[g])
+        for (var $ = dr[g], M = 0; M < $.length; M++)
+          t[$[M]] = z;
+      else
+        t[g] = z;
+    }
+    return t;
+  };
+};
+var lr = je;
+var G = function(r) {
+  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;
+  Object.keys(n).length ? d = function(x, B, z) {
+    return lr(R(B, x, null))(z.theme);
+  } : d = function(x, B) {
+    return R(B, x, null);
+  }, d.scale = o || c, d.defaults = n;
+  var f = (e = {}, e[i] = d, e), g = j(f);
+  return g;
+};
+G({ key: "buttons" });
+G({ key: "textStyles", prop: "textStyle" });
+G({ key: "colorStyles", prop: "colors" });
+var cr = h.width;
+var gr = h.height;
+var fr = h.minWidth;
+var mr = h.minHeight;
+var ur = h.maxWidth;
+var br = h.maxHeight;
+var yr = h.size;
+var hr = h.verticalAlign;
+var vr = h.display;
+var xr = h.overflow;
+h.overflowX;
+h.overflowY;
+er.opacity;
+O.fontSize;
+var Sr = O.fontFamily;
+var Rr = O.fontWeight;
+var wr = O.lineHeight;
+var Tr = O.textAlign;
+var Wr = O.fontStyle;
+O.letterSpacing;
+var Cr = b.alignItems;
+var Br = b.alignContent;
+var Or = b.justifyItems;
+var Lr = b.justifyContent;
+var zr = b.flexWrap;
+var jr = b.flexDirection;
+var Ar = b.flex;
+var Gr = b.flexGrow;
+var Ir = b.flexShrink;
+var Pr = b.flexBasis;
+var Hr = b.justifySelf;
+var Yr = b.alignSelf;
+var Nr = b.order;
+v.gridGap;
+v.gridColumnGap;
+v.gridRowGap;
+v.gridColumn;
+v.gridRow;
+v.gridAutoFlow;
+v.gridAutoColumns;
+v.gridAutoRows;
+v.gridTemplateColumns;
+v.gridTemplateRows;
+v.gridTemplateAreas;
+v.gridArea;
+var Xr = T.borderWidth;
+var Fr = T.borderStyle;
+var Er = T.borderColor;
+var kr = T.borderTop;
+var Mr = T.borderRight;
+var Dr = T.borderBottom;
+var Vr = T.borderLeft;
+var Ur = T.borderRadius;
+I.backgroundImage;
+I.backgroundSize;
+I.backgroundPosition;
+I.backgroundRepeat;
+var $r = A.zIndex;
+var qr = A.top;
+var Qr = A.right;
+var Jr = A.bottom;
+var Kr = A.left;
+var Zr = l({ gap: { property: "gap", scale: "space" }, rowGap: { property: "rowGap", scale: "space" }, columnGap: { property: "columnGap", scale: "space" } });
+var He = G({ key: "typography", prop: "typeScale" });
+var Ye = w(Y, U, l({ cursor: true, whiteSpace: true }));
+var Ne = w(X, kr, Mr, Dr, Vr, Xr, Fr, Er, Ur, k);
+var Xe = w(He, Sr, Wr, Rr, wr, Tr);
+var Fe = w(vr, yr, cr, gr, fr, mr, ur, br, xr, hr);
+var Ee = w(E, $r, qr, Qr, Jr, Kr);
+var ke = w(Pr, jr, zr, Br, Cr, Lr, Or, Nr, Ar, Ir, Gr, Hr, Yr, Zr);
+var Me = N;
+
+// src/styles.tsx
+var Container = import_styled_components.default.div`
+  box-sizing: border-box;
+  font-family: ${({ theme }) => theme.fontFamily};
+
+  ${Ye}
+  ${Ne}
+  ${Fe}
+  ${Ee}
+  ${ke}
+  ${Me}
+`;
+var styles_default = Container;
+
+// src/Box.tsx
+var Box = React.forwardRef(
+  ({ color, ...props }, ref) => {
+    return /* @__PURE__ */ React.createElement(
+      styles_default,
+      {
+        ...props,
+        ref,
+        color
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+var Box_default = Box;
+
+// src/index.ts
+var src_default = Box_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Box
+});
+/*! Bundled license information:
+
+object-assign/index.js:
+  (*
+  object-assign
+  (c) Sindre Sorhus
+  @license MIT
+  *)
+*/

package/dist/index.mjs

@@ -0,0 +1,485 @@
+// src/Box.tsx
+import * as React from "react";
+
+// src/styles.tsx
+import styled from "styled-components";
+
+// ../seeds-react-system-props/dist/index.mjs
+var _r = Object.create;
+var q = Object.defineProperty;
+var re = Object.getOwnPropertyDescriptor;
+var ee = Object.getOwnPropertyNames;
+var te = Object.getPrototypeOf;
+var oe = Object.prototype.hasOwnProperty;
+var ae = (a3, r) => () => (r || a3((r = { exports: {} }).exports, r), r.exports);
+var ie = (a3, r, e, o) => {
+  if (r && typeof r == "object" || typeof r == "function")
+    for (let t of ee(r))
+      !oe.call(a3, t) && t !== e && q(a3, t, { get: () => r[t], enumerable: !(o = re(r, t)) || o.enumerable });
+  return a3;
+};
+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));
+var K = ae((Ve, J) => {
+  var Q = Object.getOwnPropertySymbols, ne = Object.prototype.hasOwnProperty, pe = Object.prototype.propertyIsEnumerable;
+  function de(a3) {
+    if (a3 == null)
+      throw new TypeError("Object.assign cannot be called with null or undefined");
+    return Object(a3);
+  }
+  function le() {
+    try {
+      if (!Object.assign)
+        return false;
+      var a3 = new String("abc");
+      if (a3[5] = "de", Object.getOwnPropertyNames(a3)[0] === "5")
+        return false;
+      for (var r = {}, e = 0; e < 10; e++)
+        r["_" + String.fromCharCode(e)] = e;
+      var o = Object.getOwnPropertyNames(r).map(function(i) {
+        return r[i];
+      });
+      if (o.join("") !== "0123456789")
+        return false;
+      var t = {};
+      return "abcdefghijklmnopqrst".split("").forEach(function(i) {
+        t[i] = i;
+      }), Object.keys(Object.assign({}, t)).join("") === "abcdefghijklmnopqrst";
+    } catch {
+      return false;
+    }
+  }
+  J.exports = le() ? Object.assign : function(a3, r) {
+    for (var e, o = de(a3), t, i = 1; i < arguments.length; i++) {
+      e = Object(arguments[i]);
+      for (var s in e)
+        ne.call(e, s) && (o[s] = e[s]);
+      if (Q) {
+        t = Q(e);
+        for (var n = 0; n < t.length; n++)
+          pe.call(e, t[n]) && (o[t[n]] = e[t[n]]);
+      }
+    }
+    return o;
+  };
+});
+var S = se(K());
+var Z = function(r, e) {
+  var o = (0, S.default)({}, r, e);
+  for (var t in r) {
+    var i;
+    !r[t] || typeof e[t] != "object" || (0, S.default)(o, (i = {}, i[t] = (0, S.default)(r[t], e[t]), i));
+  }
+  return o;
+};
+var ce = function(r) {
+  var e = {};
+  return Object.keys(r).sort(function(o, t) {
+    return o.localeCompare(t, void 0, { numeric: true, sensitivity: "base" });
+  }).forEach(function(o) {
+    e[o] = r[o];
+  }), e;
+};
+var ge = { breakpoints: [40, 52, 64].map(function(a3) {
+  return a3 + "em";
+}) };
+var _ = function(r) {
+  return "@media screen and (min-width: " + r + ")";
+};
+var fe = function(r, e) {
+  return R(e, r, r);
+};
+var R = function(r, e, o, t, i) {
+  for (e = e && e.split ? e.split(".") : [e], t = 0; t < e.length; t++)
+    r = r ? r[e[t]] : i;
+  return r === i ? o : r;
+};
+var j = function a(r) {
+  var e = {}, o = function(s) {
+    var n = {}, c = false, d = s.theme && s.theme.disableStyledSystemCache;
+    for (var f in s)
+      if (r[f]) {
+        var g = r[f], u = s[f], x = R(s.theme, g.scale, g.defaults);
+        if (typeof u == "object") {
+          if (e.breakpoints = !d && e.breakpoints || R(s.theme, "breakpoints", ge.breakpoints), Array.isArray(u)) {
+            e.media = !d && e.media || [null].concat(e.breakpoints.map(_)), n = Z(n, me(e.media, g, x, u, s));
+            continue;
+          }
+          u !== null && (n = Z(n, ue(e.breakpoints, g, x, u, s)), c = true);
+          continue;
+        }
+        (0, S.default)(n, g(u, x, s));
+      }
+    return c && (n = ce(n)), n;
+  };
+  o.config = r, o.propNames = Object.keys(r), o.cache = e;
+  var t = Object.keys(r).filter(function(i) {
+    return i !== "config";
+  });
+  return t.length > 1 && t.forEach(function(i) {
+    var s;
+    o[i] = a((s = {}, s[i] = r[i], s));
+  }), o;
+};
+var me = function(r, e, o, t, i) {
+  var s = {};
+  return t.slice(0, r.length).forEach(function(n, c) {
+    var d = r[c], f = e(n, o, i);
+    if (!d)
+      (0, S.default)(s, f);
+    else {
+      var g;
+      (0, S.default)(s, (g = {}, g[d] = (0, S.default)({}, s[d], f), g));
+    }
+  }), s;
+};
+var ue = function(r, e, o, t, i) {
+  var s = {};
+  for (var n in t) {
+    var c = r[n], d = t[n], f = e(d, o, i);
+    if (!c)
+      (0, S.default)(s, f);
+    else {
+      var g, u = _(c);
+      (0, S.default)(s, (g = {}, g[u] = (0, S.default)({}, s[u], f), g));
+    }
+  }
+  return s;
+};
+var H = function(r) {
+  var e = r.properties, o = r.property, t = r.scale, i = r.transform, s = i === void 0 ? fe : i, n = r.defaultScale;
+  e = e || [o];
+  var c = function(f, g, u) {
+    var x = {}, B = s(f, g, u);
+    if (B !== null)
+      return e.forEach(function(z) {
+        x[z] = B;
+      }), x;
+  };
+  return c.scale = t, c.defaults = n, c;
+};
+var l = function(r) {
+  r === void 0 && (r = {});
+  var e = {};
+  Object.keys(r).forEach(function(t) {
+    var i = r[t];
+    if (i === true) {
+      e[t] = H({ property: t, scale: t });
+      return;
+    }
+    if (typeof i == "function") {
+      e[t] = i;
+      return;
+    }
+    e[t] = H(i);
+  });
+  var o = j(e);
+  return o;
+};
+var w = function() {
+  for (var r = {}, e = arguments.length, o = new Array(e), t = 0; t < e; t++)
+    o[t] = arguments[t];
+  o.forEach(function(s) {
+    !s || !s.config || (0, S.default)(r, s.config);
+  });
+  var i = j(r);
+  return i;
+};
+var be = function(r) {
+  return typeof r == "number" && !isNaN(r);
+};
+var ye = function(r, e) {
+  return R(e, r, !be(r) || r > 1 ? r : r * 100 + "%");
+};
+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 };
+var rr = l(he);
+var h = rr;
+var D = { color: { property: "color", scale: "colors" }, backgroundColor: { property: "backgroundColor", scale: "colors" }, opacity: true };
+D.bg = D.backgroundColor;
+var Y = l(D);
+var er = Y;
+var ve = { fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72] };
+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 };
+var tr = l(xe);
+var O = tr;
+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 };
+var or = l(Se);
+var b = or;
+var V = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512] };
+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 };
+var N = l(Re);
+var v = N;
+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" } };
+m.borderTopWidth = { property: "borderTopWidth", scale: "borderWidths" };
+m.borderTopColor = { property: "borderTopColor", scale: "colors" };
+m.borderTopStyle = { property: "borderTopStyle", scale: "borderStyles" };
+m.borderTopLeftRadius = { property: "borderTopLeftRadius", scale: "radii" };
+m.borderTopRightRadius = { property: "borderTopRightRadius", scale: "radii" };
+m.borderBottomWidth = { property: "borderBottomWidth", scale: "borderWidths" };
+m.borderBottomColor = { property: "borderBottomColor", scale: "colors" };
+m.borderBottomStyle = { property: "borderBottomStyle", scale: "borderStyles" };
+m.borderBottomLeftRadius = { property: "borderBottomLeftRadius", scale: "radii" };
+m.borderBottomRightRadius = { property: "borderBottomRightRadius", scale: "radii" };
+m.borderLeftWidth = { property: "borderLeftWidth", scale: "borderWidths" };
+m.borderLeftColor = { property: "borderLeftColor", scale: "colors" };
+m.borderLeftStyle = { property: "borderLeftStyle", scale: "borderStyles" };
+m.borderRightWidth = { property: "borderRightWidth", scale: "borderWidths" };
+m.borderRightColor = { property: "borderRightColor", scale: "colors" };
+m.borderRightStyle = { property: "borderRightStyle", scale: "borderStyles" };
+var X = l(m);
+var T = X;
+var C = { background: true, backgroundImage: true, backgroundSize: true, backgroundPosition: true, backgroundRepeat: true };
+C.bgImage = C.backgroundImage;
+C.bgSize = C.backgroundSize;
+C.bgPosition = C.backgroundPosition;
+C.bgRepeat = C.backgroundRepeat;
+var ar = l(C);
+var I = ar;
+var F = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512] };
+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 } };
+var E = l(we);
+var A = E;
+var y = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512] };
+var ir = function(r) {
+  return typeof r == "number" && !isNaN(r);
+};
+var L = function(r, e) {
+  if (!ir(r))
+    return R(e, r, r);
+  var o = r < 0, t = Math.abs(r), i = R(e, t, t);
+  return ir(i) ? i * (o ? -1 : 1) : o ? "-" + i : i;
+};
+var p = {};
+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 } };
+p.margin.m = p.margin.margin;
+p.margin.mt = p.margin.marginTop;
+p.margin.mr = p.margin.marginRight;
+p.margin.mb = p.margin.marginBottom;
+p.margin.ml = p.margin.marginLeft;
+p.margin.mx = p.margin.marginX;
+p.margin.my = p.margin.marginY;
+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 } };
+p.padding.p = p.padding.padding;
+p.padding.pt = p.padding.paddingTop;
+p.padding.pr = p.padding.paddingRight;
+p.padding.pb = p.padding.paddingBottom;
+p.padding.pl = p.padding.paddingLeft;
+p.padding.px = p.padding.paddingX;
+p.padding.py = p.padding.paddingY;
+var sr = l(p.margin);
+var nr = l(p.padding);
+var U = w(sr, nr);
+var pr = l({ boxShadow: { property: "boxShadow", scale: "shadows" }, textShadow: { property: "textShadow", scale: "shadows" } });
+var k = pr;
+function P() {
+  return P = Object.assign || function(a3) {
+    for (var r = 1; r < arguments.length; r++) {
+      var e = arguments[r];
+      for (var o in e)
+        Object.prototype.hasOwnProperty.call(e, o) && (a3[o] = e[o]);
+    }
+    return a3;
+  }, P.apply(this, arguments);
+}
+var W = function(r, e, o, t, i) {
+  for (e = e && e.split ? e.split(".") : [e], t = 0; t < e.length; t++)
+    r = r ? r[e[t]] : i;
+  return r === i ? o : r;
+};
+var Te = [40, 52, 64].map(function(a3) {
+  return a3 + "em";
+});
+var We = { space: [0, 4, 8, 16, 32, 64, 128, 256, 512], fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72] };
+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" };
+var dr = { marginX: ["marginLeft", "marginRight"], marginY: ["marginTop", "marginBottom"], paddingX: ["paddingLeft", "paddingRight"], paddingY: ["paddingTop", "paddingBottom"], size: ["width", "height"] };
+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" };
+var Oe = function(r, e) {
+  if (typeof e != "number" || e >= 0)
+    return W(r, e, e);
+  var o = Math.abs(e), t = W(r, o, o);
+  return typeof t == "string" ? "-" + t : t * -1;
+};
+var Le = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "top", "bottom", "left", "right"].reduce(function(a3, r) {
+  var e;
+  return P({}, a3, (e = {}, e[r] = Oe, e));
+}, {});
+var ze = function(r) {
+  return function(e) {
+    var o = {}, t = W(e, "breakpoints", Te), i = [null].concat(t.map(function(f) {
+      return "@media screen and (min-width: " + f + ")";
+    }));
+    for (var s in r) {
+      var n = typeof r[s] == "function" ? r[s](e) : r[s];
+      if (n != null) {
+        if (!Array.isArray(n)) {
+          o[s] = n;
+          continue;
+        }
+        for (var c = 0; c < n.slice(0, i.length).length; c++) {
+          var d = i[c];
+          if (!d) {
+            o[s] = n[c];
+            continue;
+          }
+          o[d] = o[d] || {}, n[c] != null && (o[d][s] = n[c]);
+        }
+      }
+    }
+    return o;
+  };
+};
+var je = function a2(r) {
+  return function(e) {
+    e === void 0 && (e = {});
+    var o = P({}, We, {}, e.theme || e), t = {}, i = typeof r == "function" ? r(o) : r, s = ze(i)(o);
+    for (var n in s) {
+      var c = s[n], d = typeof c == "function" ? c(o) : c;
+      if (n === "variant") {
+        var f = a2(W(o, d))(o);
+        t = P({}, t, {}, f);
+        continue;
+      }
+      if (d && typeof d == "object") {
+        t[n] = a2(d)(o);
+        continue;
+      }
+      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);
+      if (dr[g])
+        for (var $ = dr[g], M = 0; M < $.length; M++)
+          t[$[M]] = z;
+      else
+        t[g] = z;
+    }
+    return t;
+  };
+};
+var lr = je;
+var G = function(r) {
+  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;
+  Object.keys(n).length ? d = function(x, B, z) {
+    return lr(R(B, x, null))(z.theme);
+  } : d = function(x, B) {
+    return R(B, x, null);
+  }, d.scale = o || c, d.defaults = n;
+  var f = (e = {}, e[i] = d, e), g = j(f);
+  return g;
+};
+G({ key: "buttons" });
+G({ key: "textStyles", prop: "textStyle" });
+G({ key: "colorStyles", prop: "colors" });
+var cr = h.width;
+var gr = h.height;
+var fr = h.minWidth;
+var mr = h.minHeight;
+var ur = h.maxWidth;
+var br = h.maxHeight;
+var yr = h.size;
+var hr = h.verticalAlign;
+var vr = h.display;
+var xr = h.overflow;
+h.overflowX;
+h.overflowY;
+er.opacity;
+O.fontSize;
+var Sr = O.fontFamily;
+var Rr = O.fontWeight;
+var wr = O.lineHeight;
+var Tr = O.textAlign;
+var Wr = O.fontStyle;
+O.letterSpacing;
+var Cr = b.alignItems;
+var Br = b.alignContent;
+var Or = b.justifyItems;
+var Lr = b.justifyContent;
+var zr = b.flexWrap;
+var jr = b.flexDirection;
+var Ar = b.flex;
+var Gr = b.flexGrow;
+var Ir = b.flexShrink;
+var Pr = b.flexBasis;
+var Hr = b.justifySelf;
+var Yr = b.alignSelf;
+var Nr = b.order;
+v.gridGap;
+v.gridColumnGap;
+v.gridRowGap;
+v.gridColumn;
+v.gridRow;
+v.gridAutoFlow;
+v.gridAutoColumns;
+v.gridAutoRows;
+v.gridTemplateColumns;
+v.gridTemplateRows;
+v.gridTemplateAreas;
+v.gridArea;
+var Xr = T.borderWidth;
+var Fr = T.borderStyle;
+var Er = T.borderColor;
+var kr = T.borderTop;
+var Mr = T.borderRight;
+var Dr = T.borderBottom;
+var Vr = T.borderLeft;
+var Ur = T.borderRadius;
+I.backgroundImage;
+I.backgroundSize;
+I.backgroundPosition;
+I.backgroundRepeat;
+var $r = A.zIndex;
+var qr = A.top;
+var Qr = A.right;
+var Jr = A.bottom;
+var Kr = A.left;
+var Zr = l({ gap: { property: "gap", scale: "space" }, rowGap: { property: "rowGap", scale: "space" }, columnGap: { property: "columnGap", scale: "space" } });
+var He = G({ key: "typography", prop: "typeScale" });
+var Ye = w(Y, U, l({ cursor: true, whiteSpace: true }));
+var Ne = w(X, kr, Mr, Dr, Vr, Xr, Fr, Er, Ur, k);
+var Xe = w(He, Sr, Wr, Rr, wr, Tr);
+var Fe = w(vr, yr, cr, gr, fr, mr, ur, br, xr, hr);
+var Ee = w(E, $r, qr, Qr, Jr, Kr);
+var ke = w(Pr, jr, zr, Br, Cr, Lr, Or, Nr, Ar, Ir, Gr, Hr, Yr, Zr);
+var Me = N;
+
+// src/styles.tsx
+var Container = styled.div`
+  box-sizing: border-box;
+  font-family: ${({ theme }) => theme.fontFamily};
+
+  ${Ye}
+  ${Ne}
+  ${Fe}
+  ${Ee}
+  ${ke}
+  ${Me}
+`;
+var styles_default = Container;
+
+// src/Box.tsx
+var Box = React.forwardRef(
+  ({ color, ...props }, ref) => {
+    return /* @__PURE__ */ React.createElement(
+      styles_default,
+      {
+        ...props,
+        ref,
+        color
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+var Box_default = Box;
+
+// src/index.ts
+var src_default = Box_default;
+export {
+  Box_default as Box,
+  src_default as default
+};
+/*! Bundled license information:
+
+object-assign/index.js:
+  (*
+  object-assign
+  (c) Sindre Sorhus
+  @license MIT
+  *)
+*/

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@sproutsocial/seeds-react-box",
+  "version": "1.0.0",
+  "description": "Seeds React Box",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-utilities": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "@sproutsocial/seeds-react-theme": "*",
+    "@sproutsocial/seeds-react-theme-provider": "*",
+    "react": "^17.0.2",
+    "styled-components": "^5.2.3",
+    "typescript": "^5.1.6"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Box.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import Container from "./styles";
+import type { TypeBoxProps } from "./BoxTypes";
+
+const Box = React.forwardRef<HTMLDivElement, TypeBoxProps>(
+  ({ color, ...props }, ref) => {
+    return (
+      <Container
+        {...props}
+        ref={ref}
+        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        color={color}
+      />
+    );
+  }
+);
+
+Box.displayName = "Box";
+
+export default Box;

package/src/BoxTypes.ts

@@ -0,0 +1,22 @@
+import type { TypeStyledComponentsCommonProps } from "@sproutsocial/seeds-react-system-props";
+import type {
+  TypeSystemCommonProps,
+  TypeSystemBorderProps,
+  TypeSystemLayoutProps,
+  TypeSystemPositionProps,
+  TypeSystemFlexboxProps,
+  TypeSystemGridProps,
+} from "@sproutsocial/seeds-react-system-props";
+
+export interface TypeContainerProps
+  extends TypeStyledComponentsCommonProps,
+    TypeSystemCommonProps,
+    TypeSystemBorderProps,
+    TypeSystemLayoutProps,
+    TypeSystemPositionProps,
+    TypeSystemFlexboxProps,
+    TypeSystemGridProps {}
+
+export interface TypeBoxProps
+  extends TypeContainerProps,
+    Omit<React.ComponentPropsWithoutRef<"div">, keyof TypeContainerProps> {}

package/src/index.ts

@@ -0,0 +1,5 @@
+import Box from "./Box";
+
+export default Box;
+export { Box };
+export * from "./BoxTypes";

package/src/styles.tsx

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import {
+  COMMON,
+  BORDER,
+  LAYOUT,
+  POSITION,
+  FLEXBOX,
+  GRID,
+} from "@sproutsocial/seeds-react-system-props";
+import { TypeContainerProps } from "./BoxTypes";
+
+const Container = styled.div<TypeContainerProps>`
+  box-sizing: border-box;
+  font-family: ${({ theme }) => theme.fontFamily};
+
+  ${COMMON}
+  ${BORDER}
+  ${LAYOUT}
+  ${POSITION}
+  ${FLEXBOX}
+  ${GRID}
+`;
+
+export default Container;

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/react-library.json",
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "noUncheckedIndexedAccess": false,
+    "baseUrl": ".",
+    "paths": {
+      "@src": ["src"],
+      "@src*": ["src*"]
+    },
+    "jsx": "react"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsup.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  dts: true,
+  target: "es2020",
+  external: ["react"],
+});