@strapi/design-system 0.0.0-typescript.0 → 0.0.0-typescript.2

package/dist/BaseRadio/BaseRadio.js

@@ -1,16 +1,44 @@
-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`
+var y = Object.defineProperty;
+var a = Object.getOwnPropertySymbols;
+var c = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
+var i = (e, r, o) => r in e ? y(e, r, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[r] = o, p = (e, r) => {
+  for (var o in r || (r = {}))
+    c.call(r, o) && i(e, o, r[o]);
+  if (a)
+    for (var o of a(r))
+      l.call(r, o) && i(e, o, r[o]);
+  return e;
+};
+var m = (e, r) => {
+  var o = {};
+  for (var t in e)
+    c.call(e, t) && r.indexOf(t) < 0 && (o[t] = e[t]);
+  if (e != null && a)
+    for (var t of a(e))
+      r.indexOf(t) < 0 && l.call(e, t) && (o[t] = e[t]);
+  return o;
+};
+import { jsx as R } from "react/jsx-runtime";
+import k, { useContext as x } from "react";
+import S from "styled-components";
+import { RadioContext as w } from "./context.js";
+import { getRadioSize as s, getSelectedRadioSize as f, getSelectedRadioPosition as u } from "./utils.js";
+const C = S.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 : s(e)};
+  width: ${({
+  size: e
+}) => typeof e == "number" ? e : s(e)};
   -webkit-appearance: none;
 
   &:after {
@@ -19,44 +47,58 @@ 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 : f(e)};
+    width: ${({
+  size: e
+}) => typeof e == "number" ? e : f(e)};
+    left: ${u};
+    top: ${u};
   }
 
   &: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,
+`, I = k.forwardRef((_, t) => {
+  var n = _, {
+    value: e,
+    disabled: r = !1
+  } = n, o = m(n, [
+    "value",
+    "disabled"
+  ]);
+  const {
+    onChange: b,
+    selected: g,
+    name: h,
+    size: $
+  } = x(w), d = g === e;
+  return R(C, p({
+    ref: t,
     type: "radio",
-    name: b,
+    name: h,
     value: e,
-    tabIndex: o ? 0 : -1,
-    "aria-checked": o,
-    checked: o,
-    disabled: n,
-    size: u,
-    onChange: p,
-    ...c
-  });
+    tabIndex: d ? 0 : -1,
+    "aria-checked": d,
+    checked: d,
+    disabled: r,
+    size: $,
+    onChange: b
+  }, o));
 });
-r.displayName = "Radio";
-r.defaultProps = {
-  disabled: !1
-};
-r.propTypes = {
-  disabled: i.bool,
-  value: i.string.isRequired
-};
+I.displayName = "Radio";
 export {
-  r as BaseRadio
+  I 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";var I=Object.defineProperty,m=Object.defineProperties;var q=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var d=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;var c=(e,t,r)=>t in e?I(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,l=(e,t)=>{for(var r in t||(t={}))d.call(t,r)&&c(e,r,t[r]);if(s)for(var r of s(t))a.call(t,r)&&c(e,r,t[r]);return e},x=(e,t)=>m(e,q(t));var b=(e,t)=>{var r={};for(var o in e)d.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&s)for(var o of s(e))t.indexOf(o)<0&&a.call(e,o)&&(r[o]=e[o]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),j=require("react"),O=require("./context.cjs"),T=require("../helpers/setTabIndexOnFirstItem.cjs"),g=h=>{var n=h,{children:e,labelledBy:t,onChange:r,value:o="",size:R="M",name:i}=n,p=b(n,["children","labelledBy","onChange","value","size","name"]);const u=j.useRef(null);return j.useLayoutEffect(()=>{o||T.setTabIndexOnFirstItem(u.current,`[name="${i}"]`)},[o,i]),f.jsx(O.RadioContext.Provider,{value:{onChange:r,selected:o,name:i,size:R},children:f.jsx("div",x(l({ref:u,role:"radiogroup","aria-labelledby":t},p),{children:e}))})};exports.RadioGroup=g;

package/dist/BaseRadio/RadioGroup.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEventHandler } from 'react';
+export type RadioGroupSize = 'M' | 'L';
+interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    labelledBy: string;
+    name: string;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    size?: RadioGroupSize;
+    value?: string;
+}
+export declare const RadioGroup: ({ children, labelledBy, onChange, value, size, name, ...props }: RadioGroupProps) => JSX.Element;
+export {};

package/dist/BaseRadio/RadioGroup.js

@@ -1,32 +1,63 @@
-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);
-  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));
+var b = Object.defineProperty, h = Object.defineProperties;
+var y = Object.getOwnPropertyDescriptors;
+var i = Object.getOwnPropertySymbols;
+var m = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var l = (r, o, e) => o in r ? b(r, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[o] = e, s = (r, o) => {
+  for (var e in o || (o = {}))
+    m.call(o, e) && l(r, e, o[e]);
+  if (i)
+    for (var e of i(o))
+      p.call(o, e) && l(r, e, o[e]);
+  return r;
+}, u = (r, o) => h(r, y(o));
+var a = (r, o) => {
+  var e = {};
+  for (var t in r)
+    m.call(r, t) && o.indexOf(t) < 0 && (e[t] = r[t]);
+  if (r != null && i)
+    for (var t of i(r))
+      o.indexOf(t) < 0 && p.call(r, t) && (e[t] = r[t]);
+  return e;
 };
-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
+import { jsx as c } from "react/jsx-runtime";
+import { useRef as G, useLayoutEffect as I } from "react";
+import { RadioContext as g } from "./context.js";
+import { setTabIndexOnFirstItem as j } from "../helpers/setTabIndexOnFirstItem.js";
+const O = (v) => {
+  var f = v, {
+    children: r,
+    labelledBy: o,
+    onChange: e,
+    value: t = "",
+    size: x = "M",
+    name: d
+  } = f, R = a(f, [
+    "children",
+    "labelledBy",
+    "onChange",
+    "value",
+    "size",
+    "name"
+  ]);
+  const n = G(null);
+  return I(() => {
+    t || j(n.current, `[name="${d}"]`);
+  }, [t, d]), c(g.Provider, {
+    value: {
+      onChange: e,
+      selected: t,
+      name: d,
+      size: x
+    },
+    children: c("div", u(s({
+      ref: n,
+      role: "radiogroup",
+      "aria-labelledby": o
+    }, R), {
+      children: r
+    }))
+  });
 };
 export {
-  n as RadioGroup
+  O 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.d.ts

@@ -0,0 +1,9 @@
+import type { ChangeEventHandler } from 'react';
+import type { RadioGroupSize } from './RadioGroup';
+export interface RadioContextValue {
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    name: string;
+    size: RadioGroupSize;
+    selected: string;
+}
+export declare const RadioContext: import("react").Context<RadioContextValue>;

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/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BaseRadio';
+export * from './RadioGroup';

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.d.ts

@@ -0,0 +1,4 @@
+import { RadioGroupSize } from './RadioGroup';
+export declare const getRadioSize: (size: RadioGroupSize) => "20px" | "18px";
+export declare const getSelectedRadioSize: (size: RadioGroupSize) => "12px" | "10px";
+export declare const getSelectedRadioPosition: () => string;

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.d.ts

@@ -0,0 +1,97 @@
+import { HTMLAttributes } from 'react';
+import { CSSProperties, DefaultTheme } from 'styled-components';
+type SpaceProps = keyof DefaultTheme['spaces'] | Array<keyof DefaultTheme['spaces']>;
+type DefaultThemeOrCSSProp<T extends keyof DefaultTheme, K extends keyof CSSProperties> = keyof DefaultTheme[T] | CSSProperties[K];
+export type BoxProps<TElement extends HTMLElement = HTMLDivElement> = Pick<CSSProperties, 'pointerEvents' | 'display' | 'position' | 'zIndex' | 'overflow' | 'cursor' | 'transition' | 'transform' | 'animation' | 'textAlign' | 'textTransform' | 'lineHeight'> & HTMLAttributes<TElement> & {
+    /**
+     * JavaScript hover handler
+     */
+    _hover?: (theme: DefaultTheme) => string;
+    /**
+     * Background color
+     */
+    background?: keyof DefaultTheme['colors'];
+    /**
+     * Flex basis
+     */
+    basis?: CSSProperties['flexBasis'];
+    /**
+     * Border color
+     */
+    borderColor?: keyof DefaultTheme['colors'];
+    /**
+     * Text color
+     */
+    color?: keyof DefaultTheme['colors'];
+    /**
+     * Flex
+     */
+    flex?: CSSProperties['flex'];
+    fontSize?: DefaultThemeOrCSSProp<'fontSizes', 'fontSize'>;
+    /**
+     * Flex grow
+     */
+    grow?: CSSProperties['flexGrow'];
+    /**
+     * If `true`, will add a border radius to the `Box`
+     */
+    hasRadius?: boolean;
+    /**
+     * Responsive hiding. If `true`, will the `Box` for tablet size screens.
+     */
+    hiddenS?: boolean;
+    /**
+     * Responsive hiding. If `true`, will the `Box` for mobile size screens.
+     */
+    hiddenXS?: boolean;
+    /**
+     * Padding. Supports responsive values
+     */
+    padding?: SpaceProps;
+    /**
+     * Padding bottom. Supports responsive values
+     */
+    paddingBottom?: SpaceProps;
+    /**
+     * Padding left. Supports responsive values
+     */
+    paddingLeft?: SpaceProps;
+    /**
+     * Padding right. Supports responsive values
+     */
+    paddingRight?: SpaceProps;
+    /**
+     * Padding top. Supports responsive values
+     */
+    paddingTop?: SpaceProps;
+    marginLeft?: SpaceProps;
+    marginBottom?: SpaceProps;
+    marginRight?: SpaceProps;
+    marginTop?: SpaceProps;
+    /**
+     * Shadow name (see `theme.shadows`)
+     */
+    shadow?: keyof DefaultTheme['shadows'];
+    /**
+     * Flex shrink
+     */
+    shrink?: CSSProperties['flexShrink'];
+    width?: DefaultThemeOrCSSProp<'spaces', 'width'>;
+    minWidth?: DefaultThemeOrCSSProp<'spaces', 'minWidth'>;
+    maxWidth?: DefaultThemeOrCSSProp<'spaces', 'maxWidth'>;
+    height?: DefaultThemeOrCSSProp<'spaces', 'height'>;
+    minHeight?: DefaultThemeOrCSSProp<'spaces', 'minHeight'>;
+    maxHeight?: DefaultThemeOrCSSProp<'spaces', 'maxHeight'>;
+    top?: DefaultThemeOrCSSProp<'spaces', 'top'>;
+    left?: DefaultThemeOrCSSProp<'spaces', 'left'>;
+    bottom?: DefaultThemeOrCSSProp<'spaces', 'bottom'>;
+    right?: DefaultThemeOrCSSProp<'spaces', 'right'>;
+    borderRadius?: CSSProperties['borderRadius'];
+    borderStyle?: CSSProperties['borderStyle'];
+    borderWidth?: CSSProperties['borderWidth'];
+    children?: React.ReactNode;
+    as?: string | React.ComponentType<any>;
+    forwardedAs?: string | React.ComponentType<any>;
+};
+export declare const Box: import("styled-components").StyledComponent<"div", DefaultTheme, BoxProps<HTMLDivElement>, never>;
+export {};