@strapi/design-system 1.5.0-alpha.0 → 1.6.0-alpha.0

package/dist/BaseRadio/BaseRadio.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),g=require("prop-types"),y=require("styled-components"),R=require("./context.cjs"),t=require("./utils.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=d(s),r=d(g),S=d(y),$=S.default.input`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),a=require("react"),b=require("styled-components"),g=require("./context.cjs"),t=require("./utils.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=r(a),R=r(b),m=R.default.input`
   margin: 0;
   padding: 0;
   background-color: ${({theme:e})=>e.colors.neutral0};
   border: 1px solid ${({theme:e})=>e.colors.primary600};
   border-radius: 50%;
-  height: ${t.getRadioSize};
-  width: ${t.getRadioSize};
+  height: ${({size:e})=>typeof e=="number"?e:t.getRadioSize(e)};
+  width: ${({size:e})=>typeof e=="number"?e:t.getRadioSize(e)};
   -webkit-appearance: none;
 
   &:after {
@@ -14,8 +14,8 @@
     position: relative;
     z-index: 1;
     display: block;
-    height: ${t.getSelectedRadioSize};
-    width: ${t.getSelectedRadioSize};
+    height: ${({size:e})=>typeof e=="number"?e:t.getSelectedRadioSize(e)};
+    width: ${({size:e})=>typeof e=="number"?e:t.getSelectedRadioSize(e)};
     left: ${t.getSelectedRadioPosition};
     top: ${t.getSelectedRadioPosition};
   }
@@ -25,7 +25,7 @@
   }
 
   &:disabled {
-    border: 1px solid ${({theme:e})=>e.colors.carbon300};
+    border: 1px solid ${({theme:e})=>e.colors.neutral300};
     background: ${({theme:e})=>e.colors.neutral200};
   }
-`,o=i.default.forwardRef(({value:e,disabled:c,...l},n)=>{const{onChange:u,selected:p,name:f,size:b}=s.useContext(R.RadioContext),a=p===e;return i.default.createElement($,{ref:n,type:"radio",name:f,value:e,tabIndex:a?0:-1,"aria-checked":a,checked:a,disabled:c,size:b,onChange:u,...l})});o.displayName="Radio";o.defaultProps={disabled:!1};o.propTypes={disabled:r.default.bool,value:r.default.string.isRequired};exports.BaseRadio=o;
+`,d=y.default.forwardRef(({value:e,disabled:n=!1,...i},c)=>{const{onChange:s,selected:l,name:u,size:p}=a.useContext(g.RadioContext),o=l===e;return f.jsx(m,{ref:c,type:"radio",name:u,value:e,tabIndex:o?0:-1,"aria-checked":o,checked:o,disabled:n,size:p,onChange:s,...i})});d.displayName="Radio";exports.BaseRadio=d;

package/dist/BaseRadio/BaseRadio.js

@@ -1,16 +1,24 @@
-import t, { useContext as f } from "react";
-import i from "prop-types";
-import g from "styled-components";
-import { RadioContext as $ } from "./context.js";
-import { getRadioSize as d, getSelectedRadioSize as a, getSelectedRadioPosition as s } from "./utils.js";
-const h = g.input`
+import { jsx as s } from "react/jsx-runtime";
+import f, { useContext as u } from "react";
+import b from "styled-components";
+import { RadioContext as g } from "./context.js";
+import { getRadioSize as r, getSelectedRadioSize as t, getSelectedRadioPosition as a } from "./utils.js";
+const h = b.input`
   margin: 0;
   padding: 0;
-  background-color: ${({ theme: e }) => e.colors.neutral0};
-  border: 1px solid ${({ theme: e }) => e.colors.primary600};
+  background-color: ${({
+  theme: e
+}) => e.colors.neutral0};
+  border: 1px solid ${({
+  theme: e
+}) => e.colors.primary600};
   border-radius: 50%;
-  height: ${d};
-  width: ${d};
+  height: ${({
+  size: e
+}) => typeof e == "number" ? e : r(e)};
+  width: ${({
+  size: e
+}) => typeof e == "number" ? e : r(e)};
   -webkit-appearance: none;
 
   &:after {
@@ -19,44 +27,56 @@ const h = g.input`
     position: relative;
     z-index: 1;
     display: block;
-    height: ${a};
-    width: ${a};
-    left: ${s};
-    top: ${s};
+    height: ${({
+  size: e
+}) => typeof e == "number" ? e : t(e)};
+    width: ${({
+  size: e
+}) => typeof e == "number" ? e : t(e)};
+    left: ${a};
+    top: ${a};
   }
 
   &:checked:after {
-    background: ${({ theme: e }) => e.colors.primary600};
+    background: ${({
+  theme: e
+}) => e.colors.primary600};
   }
 
   &:disabled {
-    border: 1px solid ${({ theme: e }) => e.colors.carbon300};
-    background: ${({ theme: e }) => e.colors.neutral200};
+    border: 1px solid ${({
+  theme: e
+}) => e.colors.neutral300};
+    background: ${({
+  theme: e
+}) => e.colors.neutral200};
   }
-`, r = t.forwardRef(({ value: e, disabled: n, ...c }, l) => {
-  const { onChange: p, selected: m, name: b, size: u } = f($), o = m === e;
-  return /* @__PURE__ */ t.createElement(h, {
-    ref: l,
+`, $ = f.forwardRef(({
+  value: e,
+  disabled: d = !1,
+  ...n
+}, i) => {
+  const {
+    onChange: c,
+    selected: l,
+    name: p,
+    size: m
+  } = u(g), o = l === e;
+  return s(h, {
+    ref: i,
     type: "radio",
-    name: b,
+    name: p,
     value: e,
     tabIndex: o ? 0 : -1,
     "aria-checked": o,
     checked: o,
-    disabled: n,
-    size: u,
-    onChange: p,
-    ...c
+    disabled: d,
+    size: m,
+    onChange: c,
+    ...n
   });
 });
-r.displayName = "Radio";
-r.defaultProps = {
-  disabled: !1
-};
-r.propTypes = {
-  disabled: i.bool,
-  value: i.string.isRequired
-};
+$.displayName = "Radio";
 export {
-  r as BaseRadio
+  $ as BaseRadio
 };

package/dist/BaseRadio/RadioGroup.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),p=require("prop-types"),R=require("./context.cjs"),y=require("../helpers/setTabIndexOnFirstItem.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=n(u),t=n(p),s=({children:e,labelledBy:d,onChange:l,value:r,size:c,name:o,...f})=>{const a=u.useRef(null);return u.useLayoutEffect(()=>{r||y.setTabIndexOnFirstItem(a.current,`[name="${o}"]`)},[r,o]),i.default.createElement(R.RadioContext.Provider,{value:{onChange:l,selected:r,name:o,size:c}},i.default.createElement("div",{ref:a,role:"radiogroup","aria-labelledby":d,...f},e))};s.defaultProps={value:"",size:"M"};s.propTypes={children:t.default.node.isRequired,labelledBy:t.default.string.isRequired,name:t.default.string.isRequired,onChange:t.default.func.isRequired,size:t.default.oneOf(["M","L"]),value:t.default.string};exports.RadioGroup=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),s=require("react"),a=require("./context.cjs"),l=require("../helpers/setTabIndexOnFirstItem.cjs"),x=({children:i,labelledBy:n,onChange:u,value:e="",size:c="M",name:t,...d})=>{const r=s.useRef(null);return s.useLayoutEffect(()=>{e||l.setTabIndexOnFirstItem(r.current,`[name="${t}"]`)},[e,t]),o.jsx(a.RadioContext.Provider,{value:{onChange:u,selected:e,name:t,size:c},children:o.jsx("div",{ref:r,role:"radiogroup","aria-labelledby":n,...d,children:i})})};exports.RadioGroup=x;

package/dist/BaseRadio/RadioGroup.js

@@ -1,32 +1,35 @@
-import t, { useRef as f, useLayoutEffect as p } from "react";
-import e from "prop-types";
-import { RadioContext as m } from "./context.js";
-import { setTabIndexOnFirstItem as c } from "../helpers/setTabIndexOnFirstItem.js";
-const n = ({ children: s, labelledBy: d, onChange: a, value: r, size: u, name: o, ...l }) => {
-  const i = f(null);
+import { jsx as t } from "react/jsx-runtime";
+import { useRef as m, useLayoutEffect as p } from "react";
+import { RadioContext as s } from "./context.js";
+import { setTabIndexOnFirstItem as u } from "../helpers/setTabIndexOnFirstItem.js";
+const b = ({
+  children: i,
+  labelledBy: d,
+  onChange: f,
+  value: r = "",
+  size: n = "M",
+  name: o,
+  ...l
+}) => {
+  const e = m(null);
   return p(() => {
-    r || c(i.current, `[name="${o}"]`);
-  }, [r, o]), /* @__PURE__ */ t.createElement(m.Provider, {
-    value: { onChange: a, selected: r, name: o, size: u }
-  }, /* @__PURE__ */ t.createElement("div", {
-    ref: i,
-    role: "radiogroup",
-    "aria-labelledby": d,
-    ...l
-  }, s));
-};
-n.defaultProps = {
-  value: "",
-  size: "M"
-};
-n.propTypes = {
-  children: e.node.isRequired,
-  labelledBy: e.string.isRequired,
-  name: e.string.isRequired,
-  onChange: e.func.isRequired,
-  size: e.oneOf(["M", "L"]),
-  value: e.string
+    r || u(e.current, `[name="${o}"]`);
+  }, [r, o]), t(s.Provider, {
+    value: {
+      onChange: f,
+      selected: r,
+      name: o,
+      size: n
+    },
+    children: t("div", {
+      ref: e,
+      role: "radiogroup",
+      "aria-labelledby": d,
+      ...l,
+      children: i
+    })
+  });
 };
 export {
-  n as RadioGroup
+  b as RadioGroup
 };

package/dist/BaseRadio/context.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({onChange:()=>{},name:"",size:"M"});exports.RadioContext=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=e.createContext({onChange:void 0,name:"",size:"M",selected:""});exports.RadioContext=t;

package/dist/BaseRadio/context.js

@@ -1,6 +1,10 @@
-import { createContext as o } from "react";
-const t = o({ onChange: () => {
-}, name: "", size: "M" });
+import { createContext as e } from "react";
+const n = e({
+  onChange: void 0,
+  name: "",
+  size: "M",
+  selected: ""
+});
 export {
-  t as RadioContext
+  n as RadioContext
 };

package/dist/BaseRadio/utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=({size:e})=>e==="M"?"18px":"20px",i=({size:e})=>e==="M"?"10px":"12px",o=()=>"3px";exports.getRadioSize=t;exports.getSelectedRadioPosition=o;exports.getSelectedRadioSize=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=e=>e==="M"?"18px":"20px",i=e=>e==="M"?"10px":"12px",o=()=>"3px";exports.getRadioSize=t;exports.getSelectedRadioPosition=o;exports.getSelectedRadioSize=i;

package/dist/BaseRadio/utils.js

@@ -1,4 +1,4 @@
-const t = ({ size: e }) => e === "M" ? "18px" : "20px", r = ({ size: e }) => e === "M" ? "10px" : "12px", i = () => "3px";
+const t = (e) => e === "M" ? "18px" : "20px", r = (e) => e === "M" ? "10px" : "12px", i = () => "3px";
 export {
   t as getRadioSize,
   i as getSelectedRadioPosition,

package/dist/Box/Box.cjs

@@ -1,41 +1,41 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),s=require("../helpers/handleResponsiveValues.cjs"),t=require("./BoxProps.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},$=d(n),l={color:!0},i=$.default.div.withConfig({shouldForwardProp:(e,o)=>!l[e]&&o(e)})`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("styled-components"),o=require("../helpers/handleResponsiveValues.cjs"),r=require("../helpers/theme.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=i(a),l={color:!0},m=d.default.div.withConfig({shouldForwardProp:(e,t)=>!l[e]&&t(e)})`
   // Font
-  font-size: ${({fontSize:e,theme:o})=>o.fontSizes[e]||e};
+  font-size: ${({fontSize:e,theme:t})=>r.extractStyleFromTheme(t.fontSizes,e,e)};
 
   // Colors
-  background: ${({theme:e,background:o})=>e.colors[o]};
-  color: ${({theme:e,color:o})=>e.colors[o]};
+  background: ${({theme:e,background:t})=>r.extractStyleFromTheme(e.colors,t,void 0)};
+  color: ${({theme:e,color:t})=>r.extractStyleFromTheme(e.colors,t,void 0)};
 
   // Spaces
-  ${({theme:e,padding:o})=>s("padding",o,e)}
-  ${({theme:e,paddingTop:o})=>s("padding-top",o,e)}
-  ${({theme:e,paddingRight:o})=>s("padding-right",o,e)}
-  ${({theme:e,paddingBottom:o})=>s("padding-bottom",o,e)}
-  ${({theme:e,paddingLeft:o})=>s("padding-left",o,e)}
-  ${({theme:e,marginLeft:o})=>s("margin-left",o,e)}
-  ${({theme:e,marginRight:o})=>s("margin-right",o,e)}
-  ${({theme:e,marginTop:o})=>s("margin-top",o,e)}
-  ${({theme:e,marginBottom:o})=>s("margin-bottom",o,e)}
+  ${({theme:e,padding:t})=>o("padding",t,e)}
+  ${({theme:e,paddingTop:t})=>o("padding-top",t,e)}
+  ${({theme:e,paddingRight:t})=>o("padding-right",t,e)}
+  ${({theme:e,paddingBottom:t})=>o("padding-bottom",t,e)}
+  ${({theme:e,paddingLeft:t})=>o("padding-left",t,e)}
+  ${({theme:e,marginLeft:t})=>o("margin-left",t,e)}
+  ${({theme:e,marginRight:t})=>o("margin-right",t,e)}
+  ${({theme:e,marginTop:t})=>o("margin-top",t,e)}
+  ${({theme:e,marginBottom:t})=>o("margin-bottom",t,e)}
 
   // Responsive hiding
-  ${({theme:e,hiddenS:o})=>o?`${e.mediaQueries.tablet} { display: none; }`:void 0}
-  ${({theme:e,hiddenXS:o})=>o?`${e.mediaQueries.mobile} { display: none; }`:void 0}
+  ${({theme:e,hiddenS:t})=>t?`${e.mediaQueries.tablet} { display: none; }`:void 0}
+  ${({theme:e,hiddenXS:t})=>t?`${e.mediaQueries.mobile} { display: none; }`:void 0}
   
 
   // Borders
-  border-radius: ${({theme:e,hasRadius:o,borderRadius:r})=>o?e.borderRadius:r};
+  border-radius: ${({theme:e,hasRadius:t,borderRadius:s})=>t?e.borderRadius:s};
   border-style: ${({borderStyle:e})=>e};
   border-width: ${({borderWidth:e})=>e};
-  border-color: ${({borderColor:e,theme:o})=>o.colors[e]};
-  border: ${({theme:e,borderColor:o,borderStyle:r,borderWidth:a})=>{if(o&&!r&&!a)return`1px solid ${e.colors[o]}`}};
+  border-color: ${({borderColor:e,theme:t})=>r.extractStyleFromTheme(t.colors,e,void 0)};
+  border: ${({theme:e,borderColor:t,borderStyle:s,borderWidth:n})=>{if(t&&!s&&!n)return`1px solid ${e.colors[t]}`}};
 
   // Shadows
-  box-shadow: ${({theme:e,shadow:o})=>e.shadows[o]};
+  box-shadow: ${({theme:e,shadow:t})=>r.extractStyleFromTheme(e.shadows,t,void 0)};
 
   // Handlers
   pointer-events: ${({pointerEvents:e})=>e};
   &:hover {
-    ${({_hover:e,theme:o})=>e?e(o):void 0}
+    ${({_hover:e,theme:t})=>e?e(t):void 0}
   }
 
   // Display
@@ -43,21 +43,20 @@
 
   // Position
   position: ${({position:e})=>e};
-  left: ${({left:e,theme:o})=>o.spaces[e]||e};
-  right: ${({right:e,theme:o})=>o.spaces[e]||e};
-  top: ${({top:e,theme:o})=>o.spaces[e]||e};
-  bottom: ${({bottom:e,theme:o})=>o.spaces[e]||e};
+  left: ${({left:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  right: ${({right:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  top: ${({top:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  bottom: ${({bottom:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
   z-index: ${({zIndex:e})=>e};
   overflow: ${({overflow:e})=>e};
-  cursor: ${({cursor:e})=>e};
 
   // Size
-  width: ${({width:e,theme:o})=>o.spaces[e]||e};
-  max-width: ${({maxWidth:e,theme:o})=>o.spaces[e]||e};
-  min-width: ${({minWidth:e,theme:o})=>o.spaces[e]||e};
-  height: ${({height:e,theme:o})=>o.spaces[e]||e};
-  max-height: ${({maxHeight:e,theme:o})=>o.spaces[e]||e};
-  min-height: ${({minHeight:e,theme:o})=>o.spaces[e]||e};
+  width: ${({width:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  max-width: ${({maxWidth:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  min-width: ${({minWidth:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  height: ${({height:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  max-height: ${({maxHeight:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
+  min-height: ${({minHeight:e,theme:t})=>r.extractStyleFromTheme(t.spaces,e,e)};
 
   // Animation
   transition: ${({transition:e})=>e};
@@ -77,4 +76,4 @@
 
   // Cursor
   cursor: ${({cursor:e})=>e};
-`;i.defaultProps=t.boxDefaultProps;i.propTypes=t.boxPropTypes;exports.Box=i;
+`;exports.Box=m;

package/dist/Box/Box.js

@@ -1,95 +1,218 @@
-import a from "styled-components";
-import r from "../helpers/handleResponsiveValues.js";
-import { boxDefaultProps as t, boxPropTypes as n } from "./BoxProps.js";
-const d = {
+import d from "styled-components";
+import i from "../helpers/handleResponsiveValues.js";
+import { extractStyleFromTheme as s } from "../helpers/theme.js";
+const $ = {
   color: !0
-}, i = a.div.withConfig({
-  shouldForwardProp: (o, s) => !d[o] && s(o)
+}, l = d.div.withConfig({
+  shouldForwardProp: (e, o) => !$[e] && o(e)
 })`
   // Font
-  font-size: ${({ fontSize: o, theme: s }) => s.fontSizes[o] || o};
+  font-size: ${({
+  fontSize: e,
+  theme: o
+}) => s(o.fontSizes, e, e)};
 
   // Colors
-  background: ${({ theme: o, background: s }) => o.colors[s]};
-  color: ${({ theme: o, color: s }) => o.colors[s]};
+  background: ${({
+  theme: e,
+  background: o
+}) => s(e.colors, o, void 0)};
+  color: ${({
+  theme: e,
+  color: o
+}) => s(e.colors, o, void 0)};
 
   // Spaces
-  ${({ theme: o, padding: s }) => r("padding", s, o)}
-  ${({ theme: o, paddingTop: s }) => r("padding-top", s, o)}
-  ${({ theme: o, paddingRight: s }) => r("padding-right", s, o)}
-  ${({ theme: o, paddingBottom: s }) => r("padding-bottom", s, o)}
-  ${({ theme: o, paddingLeft: s }) => r("padding-left", s, o)}
-  ${({ theme: o, marginLeft: s }) => r("margin-left", s, o)}
-  ${({ theme: o, marginRight: s }) => r("margin-right", s, o)}
-  ${({ theme: o, marginTop: s }) => r("margin-top", s, o)}
-  ${({ theme: o, marginBottom: s }) => r("margin-bottom", s, o)}
+  ${({
+  theme: e,
+  padding: o
+}) => i("padding", o, e)}
+  ${({
+  theme: e,
+  paddingTop: o
+}) => i("padding-top", o, e)}
+  ${({
+  theme: e,
+  paddingRight: o
+}) => i("padding-right", o, e)}
+  ${({
+  theme: e,
+  paddingBottom: o
+}) => i("padding-bottom", o, e)}
+  ${({
+  theme: e,
+  paddingLeft: o
+}) => i("padding-left", o, e)}
+  ${({
+  theme: e,
+  marginLeft: o
+}) => i("margin-left", o, e)}
+  ${({
+  theme: e,
+  marginRight: o
+}) => i("margin-right", o, e)}
+  ${({
+  theme: e,
+  marginTop: o
+}) => i("margin-top", o, e)}
+  ${({
+  theme: e,
+  marginBottom: o
+}) => i("margin-bottom", o, e)}
 
   // Responsive hiding
-  ${({ theme: o, hiddenS: s }) => s ? `${o.mediaQueries.tablet} { display: none; }` : void 0}
-  ${({ theme: o, hiddenXS: s }) => s ? `${o.mediaQueries.mobile} { display: none; }` : void 0}
+  ${({
+  theme: e,
+  hiddenS: o
+}) => o ? `${e.mediaQueries.tablet} { display: none; }` : void 0}
+  ${({
+  theme: e,
+  hiddenXS: o
+}) => o ? `${e.mediaQueries.mobile} { display: none; }` : void 0}
   
 
   // Borders
-  border-radius: ${({ theme: o, hasRadius: s, borderRadius: e }) => s ? o.borderRadius : e};
-  border-style: ${({ borderStyle: o }) => o};
-  border-width: ${({ borderWidth: o }) => o};
-  border-color: ${({ borderColor: o, theme: s }) => s.colors[o]};
-  border: ${({ theme: o, borderColor: s, borderStyle: e, borderWidth: $ }) => {
-  if (s && !e && !$)
-    return `1px solid ${o.colors[s]}`;
+  border-radius: ${({
+  theme: e,
+  hasRadius: o,
+  borderRadius: r
+}) => o ? e.borderRadius : r};
+  border-style: ${({
+  borderStyle: e
+}) => e};
+  border-width: ${({
+  borderWidth: e
+}) => e};
+  border-color: ${({
+  borderColor: e,
+  theme: o
+}) => s(o.colors, e, void 0)};
+  border: ${({
+  theme: e,
+  borderColor: o,
+  borderStyle: r,
+  borderWidth: n
+}) => {
+  if (o && !r && !n)
+    return `1px solid ${e.colors[o]}`;
 }};
 
   // Shadows
-  box-shadow: ${({ theme: o, shadow: s }) => o.shadows[s]};
+  box-shadow: ${({
+  theme: e,
+  shadow: o
+}) => s(e.shadows, o, void 0)};
 
   // Handlers
-  pointer-events: ${({ pointerEvents: o }) => o};
+  pointer-events: ${({
+  pointerEvents: e
+}) => e};
   &:hover {
-    ${({ _hover: o, theme: s }) => o ? o(s) : void 0}
+    ${({
+  _hover: e,
+  theme: o
+}) => e ? e(o) : void 0}
   }
 
   // Display
-  display: ${({ display: o }) => o};
+  display: ${({
+  display: e
+}) => e};
 
   // Position
-  position: ${({ position: o }) => o};
-  left: ${({ left: o, theme: s }) => s.spaces[o] || o};
-  right: ${({ right: o, theme: s }) => s.spaces[o] || o};
-  top: ${({ top: o, theme: s }) => s.spaces[o] || o};
-  bottom: ${({ bottom: o, theme: s }) => s.spaces[o] || o};
-  z-index: ${({ zIndex: o }) => o};
-  overflow: ${({ overflow: o }) => o};
-  cursor: ${({ cursor: o }) => o};
+  position: ${({
+  position: e
+}) => e};
+  left: ${({
+  left: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  right: ${({
+  right: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  top: ${({
+  top: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  bottom: ${({
+  bottom: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  z-index: ${({
+  zIndex: e
+}) => e};
+  overflow: ${({
+  overflow: e
+}) => e};
 
   // Size
-  width: ${({ width: o, theme: s }) => s.spaces[o] || o};
-  max-width: ${({ maxWidth: o, theme: s }) => s.spaces[o] || o};
-  min-width: ${({ minWidth: o, theme: s }) => s.spaces[o] || o};
-  height: ${({ height: o, theme: s }) => s.spaces[o] || o};
-  max-height: ${({ maxHeight: o, theme: s }) => s.spaces[o] || o};
-  min-height: ${({ minHeight: o, theme: s }) => s.spaces[o] || o};
+  width: ${({
+  width: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  max-width: ${({
+  maxWidth: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  min-width: ${({
+  minWidth: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  height: ${({
+  height: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  max-height: ${({
+  maxHeight: e,
+  theme: o
+}) => s(o.spaces, e, e)};
+  min-height: ${({
+  minHeight: e,
+  theme: o
+}) => s(o.spaces, e, e)};
 
   // Animation
-  transition: ${({ transition: o }) => o};
-  transform: ${({ transform: o }) => o};
-  animation: ${({ animation: o }) => o};
+  transition: ${({
+  transition: e
+}) => e};
+  transform: ${({
+  transform: e
+}) => e};
+  animation: ${({
+  animation: e
+}) => e};
 
   //Flexbox children props
-  flex-shrink: ${({ shrink: o }) => o};
-  flex-grow: ${({ grow: o }) => o};
-  flex-basis: ${({ basis: o }) => o};
-  flex: ${({ flex: o }) => o};
+  flex-shrink: ${({
+  shrink: e
+}) => e};
+  flex-grow: ${({
+  grow: e
+}) => e};
+  flex-basis: ${({
+  basis: e
+}) => e};
+  flex: ${({
+  flex: e
+}) => e};
 
   // Text
-  text-align: ${({ textAlign: o }) => o};
-  text-transform: ${({ textTransform: o }) => o};
-  line-height: ${({ lineHeight: o }) => o};
+  text-align: ${({
+  textAlign: e
+}) => e};
+  text-transform: ${({
+  textTransform: e
+}) => e};
+  line-height: ${({
+  lineHeight: e
+}) => e};
 
   // Cursor
-  cursor: ${({ cursor: o }) => o};
+  cursor: ${({
+  cursor: e
+}) => e};
 `;
-i.defaultProps = t;
-i.propTypes = n;
 export {
-  i as Box
+  l as Box
 };