@marigold/system 0.0.2 → 0.3.0

package/dist/system.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";var e,n=require("react"),t=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,r=require("emotion"),a=require("@theme-ui/css");function o(){return(o=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var i=n.createContext({}),s=function(){return n.useContext(i)},c=function(){for(var e=s(),n=arguments.length,t=new Array(n),o=0;o<n;o++)t[o]=arguments[o];return t.map((function(n){return r.css(a.css(n)(e))})).join(" ")},p={display:"block"},l={listStyle:"none"},u={quotes:"none",selectors:{"&:before, &:after":{content:"''"}}},d=[p,{appearance:"none"}],m={article:p,aside:p,details:p,figcaption:p,figure:p,footer:p,header:p,hgroup:p,menu:p,nav:p,section:p,ul:l,ol:l,blockquote:u,q:u,body:{lineHeight:1},a:{textDecoration:"none"},base:{boxSizing:"border-box",margin:0,padding:0,minWidth:0,fontSize:"100%",font:"inherit",verticalAlign:"baseline",WebkitTapHighlightColor:"transparent"},table:{borderCollapse:"collapse",borderSpacing:0},mark:{backgroundColor:"transparent",color:"inherit"},select:[].concat(d,[{selectors:{"&::-ms-expand":{display:"none"}}}]),p:l,button:{background:"none"},textarea:d,input:[].concat(d,[{selectors:{"&::-ms-clear":{display:"none"},"&::-webkit-search-cancel-button":{WebkitAppearance:"none"}}}])};exports.SPACE_PROPS=["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"],exports.ThemeProvider=function(e){return t.createElement(i.Provider,{value:e.theme},e.children)},exports.system=function(e){return n.forwardRef((function(n,t){return e(o({},n,{ref:t}))}))},exports.useClassname=c,exports.useStyles=function(e,n){var t=e.element,r=e.variant,a=function(e,n){if(null==e)return{};var t,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n.indexOf(t=o[r])>=0||(a[t]=e[t]);return a}(e,["element","variant"]),o=[];t?(t.push("base"),o=t):o=["base"];var i=m,s=o.map((function(e){return i[e]})),p=Object.assign.apply(Object,[{}].concat(s)),l=c(p),u=Array.isArray(r)?r.map((function(e){return{variant:e}})):[{variant:r}];return[l,c.apply(void 0,u),c(a),n].join(" ")},exports.useTheme=s;
+"use strict";var e,t=require("@emotion/react"),r=require("@theme-ui/css"),n=require("react"),i=(e=n)&&"object"==typeof e&&"default"in e?e.default:e,o=require("@marigold/system");function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function s(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(i[r]=e[r]);return i}var l={boxSizing:"border-box",margin:0,minWidth:0},c=a({},l,{textDecoration:"none"}),p=a({},l,{overflowWrap:"break-word"}),u=a({},l,{display:"block",maxWidth:"100%"}),d=a({},l,{display:"block",appearance:"none",font:"inherit",background:"transparent",textAlign:"center"}),m=a({},l,{display:"block",appearance:"none",font:"inherit","&::-ms-clear":{display:"none"},"&::-webkit-search-cancel-button":{WebkitAppearance:"none"}}),h={base:l,a:c,p:p,h1:p,h2:p,h3:p,h4:p,h5:p,h6:p,img:u,picture:u,video:u,canvas:u,svg:u,select:a({},l,{display:"block",appearance:"none",font:"inherit","&::-ms-expand":{display:"none"}}),button:d,textarea:a({},l,{display:"block",appearance:"none",font:"inherit"}),input:m},f=function(e){return"string"==typeof e&&e in h?h[e]:h.base},b=["disabled"],x=function(e){return null==e?[]:Array.isArray(e)?e:[e]},y=function(e){return e.replace(/\.$/,"")},v=function(e){return x(e).map(y)},g=function(e,t){return y(e)+".:"+t},S=["as","children","__baseCSS","variant","css","display","height","width","minWidth","maxWidth","position","top","bottom","right","left","zIndex","p","px","py","pt","pb","pl","pr","m","mx","my","mt","mb","ml","mr","flexDirection","flexWrap","flexShrink","flexGrow","alignItems","justifyContent","bg","border","borderRadius","boxShadow","opacity","overflow","transition"],w=function(e){return!(e&&0===Object.keys(e).length&&e.constructor===Object)},k=function(e){var t=e.as,n=e.__baseCSS,i=e.variant,o=e.styles,a=e.css;return function(e){return[f(t),r.css(n)(e)].concat(v(i).map((function(t){return r.css({variant:t})(e)})),[r.css(o)(e),r.css(a)(e)]).filter(w)}},W=n.forwardRef((function(e,r){var n=e.as,i=void 0===n?"div":n,o=e.children,l=e.__baseCSS,c=e.variant,p=e.css,u=void 0===p?{}:p,d=e.display,m=e.height,h=e.width,f=e.minWidth,b=e.maxWidth,x=e.position,y=e.top,v=e.bottom,g=e.right,w=e.left,W=e.zIndex,j=e.p,C=e.px,_=e.py,z=e.pt,O=e.pb,D=e.pl,I=e.pr,A=e.m,G=e.mx,q=e.my,P=e.mt,R=e.mb,T=e.ml,V=e.mr,B=e.flexDirection,E=e.flexWrap,N=e.flexShrink,F=e.flexGrow,H=e.alignItems,M=e.justifyContent,$=e.bg,J=e.border,K=e.borderRadius,L=e.boxShadow,Q=e.opacity,U=e.overflow,X=e.transition,Y=s(e,S);return t.jsx(i,a({},Y,{css:k({as:i,__baseCSS:l,variant:c,css:u,styles:{display:d,height:m,width:h,minWidth:f,maxWidth:b,position:x,top:y,bottom:v,right:g,left:w,zIndex:W,p:j,px:C,py:_,pt:z,pb:O,pl:D,pr:I,m:A,mx:G,my:q,mt:P,mb:R,ml:T,mr:V,flexDirection:B,flexWrap:E,flexShrink:N,flexGrow:F,alignItems:H,justifyContent:M,bg:$,border:J,borderRadius:K,boxShadow:L,opacity:Q,overflow:U,transition:X}}),ref:r}),o)})),j={},C=n.createContext(j),_=function(){var e=n.useContext(C),t=n.useCallback((function(t){return r.css(t)(e)}),[e]);return{theme:e,css:t}},z={"@media screen and (prefers-reduced-motion: reduce), (update: slow)":{"*":{animationDuration:"0.001ms !important",animationIterationCount:"1 !important",transitionDuration:"0.001ms !important"}}},O=["size","children"],D=o.getNormalizedStyles("svg");exports.Box=W,exports.Global=function(){var e=(0,_().css)({html:{height:"100%",variant:"root.html"},body:{height:"100%",lineHeight:1.5,WebkitFontSmoothing:"antialiased",variant:"root.body"}});return i.createElement(t.Global,{styles:a({reduceMotionStyles:z},e)})},exports.SVG=function(e){var r=e.size,n=void 0===r?24:r,i=e.children,o=s(e,O);return t.jsx("svg",a({width:n,height:n,viewBox:"0 0 24 24",fill:"currentcolor"},o,{css:D}),i)},exports.ThemeProvider=function(e){var r=e.theme;return i.createElement(t.ThemeProvider,{theme:r},i.createElement(C.Provider,{value:r},e.children))},exports.__defaultTheme=j,exports.appendVariantState=g,exports.conditional=function(e,t){var r=t.disabled,n=void 0!==r&&r,i=s(t,b),o=[].concat(Object.entries(i),[["disabled",n]]).filter((function(e){return Boolean(e[1])})).map((function(t){return g(e,t[0])}));return[e].concat(o)},exports.ensureArray=x,exports.ensureArrayVariant=v,exports.ensureVariantDefault=y,exports.getNormalizedStyles=f,exports.normalize=h,exports.useTheme=_;
 //# sourceMappingURL=system.cjs.production.min.js.map

package/dist/system.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"system.cjs.production.min.js","sources":["../src/useTheme.tsx","../src/useClassname.ts","../src/normalize.ts","../src/categories.ts","../src/system.tsx","../src/useStyles.ts"],"sourcesContent":["import React, { createContext, useContext } from 'react';\n\nconst Context = createContext({});\n\nexport const useTheme = () => useContext(Context);\n\nexport type ThemeProviderProps = { theme: any };\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n  theme,\n  children,\n}) => <Context.Provider value={theme}>{children}</Context.Provider>;\n","import { css as emotion } from 'emotion';\nimport { css, ThemeUIStyleObject } from '@theme-ui/css';\nimport { useTheme } from './useTheme';\n\nexport const useClassname = (...styles: ThemeUIStyleObject[]) => {\n  const theme = useTheme();\n  return styles.map(style => emotion(css(style)(theme))).join(' ');\n};\n","import { CSSObject } from '@marigold/components/src';\n\nconst base = {\n  boxSizing: 'border-box',\n  margin: 0,\n  padding: 0,\n  minWidth: 0,\n  fontSize: '100%',\n  font: 'inherit',\n  verticalAlign: 'baseline',\n  WebkitTapHighlightColor: 'transparent',\n};\n\nconst block = {\n  display: 'block',\n};\n\nconst body = {\n  lineHeight: 1,\n};\n\nconst list = {\n  listStyle: 'none',\n};\n\nconst quote = {\n  quotes: 'none',\n  selectors: {\n    '&:before, &:after': {\n      content: \"''\",\n    },\n  },\n};\n\nconst table = {\n  borderCollapse: 'collapse',\n  borderSpacing: 0,\n};\n\nconst appearance = {\n  appearance: 'none',\n};\n\nconst field = [block, appearance];\n\nconst mark = {\n  backgroundColor: 'transparent',\n  color: 'inherit',\n};\n\nconst select = [\n  ...field,\n  {\n    selectors: {\n      '&::-ms-expand': {\n        display: 'none',\n      },\n    },\n  },\n];\n\nconst input = [\n  ...field,\n  {\n    selectors: {\n      '&::-ms-clear': {\n        display: 'none',\n      },\n      '&::-webkit-search-cancel-button': {\n        WebkitAppearance: 'none',\n      },\n    },\n  },\n];\n\nconst button = {\n  background: 'none',\n};\n\nconst a = {\n  textDecoration: 'none',\n};\n\nexport const el: BaseNormalization = {\n  article: block,\n  aside: block,\n  details: block,\n  figcaption: block,\n  figure: block,\n  footer: block,\n  header: block,\n  hgroup: block,\n  menu: block,\n  nav: block,\n  section: block,\n  ul: list,\n  ol: list,\n  blockquote: quote,\n  q: quote,\n  body,\n  a,\n  base,\n  table,\n  mark,\n  select,\n  p: list,\n  button,\n  textarea: field,\n  input,\n};\n\ntype BaseNormalization = {\n  [key: string]: CSSObject;\n};\n","import { PropertiesFallback } from 'csstype';\n\n/**\n * System categories are based on https://primer.style/components/docs/system-props\n */\n\n// Spacing\n// ---------------\nexport const SPACE_PROPS = [\n  'm',\n  'margin',\n  'mt',\n  'marginTop',\n  'mr',\n  'marginRight',\n  'mb',\n  'marginBottom',\n  'ml',\n  'marginLeft',\n  'mx',\n  'marginX',\n  'my',\n  'marginY',\n  'p',\n  'padding',\n  'pt',\n  'paddingTop',\n  'pr',\n  'paddingRight',\n  'pb',\n  'paddingBottom',\n  'pl',\n  'paddingLeft',\n  'px',\n  'paddingX',\n  'py',\n  'paddingY',\n];\n\ntype StandardCSSProperties = PropertiesFallback<number | string>;\n\nexport type SpacingProps = {\n  /**\n   * The **`margin`** CSS property sets the margin area on all four sides of an element. It is a shorthand for `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`.\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin\n   */\n  m?: StandardCSSProperties['margin'];\n  /**\n   * The **`margin-top`** CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-top\n   */\n  mt?: StandardCSSProperties['marginTop'];\n  /**\n   * The **`margin-right`** CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-right\n   */\n  mr?: StandardCSSProperties['marginRight'];\n  /**\n   * The **`margin-bottom`** CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom\n   */\n  mb?: StandardCSSProperties['marginBottom'];\n  /**\n   * The **`margin-left`** CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-left\n   */\n  ml?: StandardCSSProperties['marginLeft'];\n  /**\n   * The **`mx`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value placesit\n   * farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#margin-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-left\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-right\n   */\n  mx?: StandardCSSProperties['marginLeft'];\n  /**\n   * The **`marginX`** is shorthand for using both **`margin-left`** and **`margin-right`** CSS properties. They set the margin area on the left and right side of an element. A positive value\n   * places it farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#margin-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-left\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-right\n   */\n  marginX?: StandardCSSProperties['marginLeft'];\n  /**\n   * The **`my`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places it\n   * farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#margin-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-top\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom\n   */\n  my?: StandardCSSProperties['marginTop'];\n  /**\n   * The **`marginY`** is shorthard for using both **`margin-top`** and **`margin-bottom`** CSS properties. They set the margin area on the top and bottom of an element. A positive value places\n   * it farther from its neighbors, while a negative value places it closer.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#margin-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-top\n   * @see https://developer.mozilla.org/docs/Web/CSS/margin-bottom\n   */\n  marginY?: StandardCSSProperties['marginTop'];\n  /**\n   * The **`padding`** CSS property sets the padding area on all four sides of an element. It is a shorthand for `padding-top`, `padding-right`, `padding-bottom`, and `padding-left`.\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding\n   */\n  p?: StandardCSSProperties['padding'];\n  /**\n   * The **`padding-top`** padding area on the top of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-top\n   */\n  pt?: StandardCSSProperties['paddingTop'];\n  /**\n   * The **`padding-right`** CSS property sets the width of the padding area on the right side of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-right\n   */\n  pr?: StandardCSSProperties['paddingRight'];\n  /**\n   * The **`padding-bottom`** CSS property sets the height of the padding area on the bottom of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom\n   */\n  pb?: StandardCSSProperties['paddingBottom'];\n  /**\n   * The **`padding-left`** CSS property sets the width of the padding area on the left side of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-left\n   */\n  pl?: StandardCSSProperties['paddingLeft'];\n  /**\n   * The **`px`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#padding-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-left\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-right\n   */\n  px?: StandardCSSProperties['paddingLeft'];\n  /**\n   * The **`paddingX`** is shorthand property for CSS properties **`padding-left`** and **`padding-right`**. They set the width of the padding area on the left and right side of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#padding-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-left\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-right\n   */\n  paddingX?: StandardCSSProperties['paddingLeft'];\n  /**\n   * The **`py`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#padding-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-top\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom\n   */\n  py?: StandardCSSProperties['paddingTop'];\n  /**\n   * The **`paddingY`** is shorthand property for CSS properties **`padding-top`** and **`padding-bottom`**. They set the width of the padding area on the top and bottom of an element.\n   *\n   * **Initial value**: `0`\n   *\n   * @see https://styled-system.com/#padding-props\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-top\n   * @see https://developer.mozilla.org/docs/Web/CSS/padding-bottom\n   */\n  paddingY?: StandardCSSProperties['paddingTop'];\n};\n","/**\n * Typings are based on [Reach UI](https://github.com/reach/reach-ui/blob/4cb497f530b0f83f80c6f6f2da46ab55b1160cb6/packages/utils/src/types.tsx).\n */\nimport {\n  forwardRef,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactElement,\n  ValidationMap,\n  WeakValidationMap,\n} from 'react';\n\n/**\n * SystemProps support the `as` and `variant` prop. The former\n * is used to changed the rendered root element of a component.\n *\n * These props also infer additional allowed props based on the\n * value of the `as` prop. For example, setting `as=\"button\"` will\n * allow to use HTMLButtonAttributes on the component.\n */\nexport type SystemProps<P, T extends ElementType> = P &\n  Omit<ComponentPropsWithRef<T>, 'as' | keyof P> & {\n    as?: T;\n    variant?: string;\n  };\n\n/**\n * Enhanced version of `React.FunctionComponent` that accepts `SystemProps`\n * and infers allowed properties based on the `as` prop.\n */\nexport interface SystemComponent<P, T extends ElementType> {\n  /**\n   * These types are a bit of a hack, but cover us in cases where the `as` prop\n   * is not a JSX string type. Makes the compiler happy so 🤷‍♂️\n   */\n  <TT extends ElementType>(props: SystemProps<P, TT>): ReactElement | null;\n  (props: SystemProps<P, T>): ReactElement | null;\n\n  displayName?: string;\n  propTypes?: WeakValidationMap<SystemProps<P, T>>;\n  contextTypes?: ValidationMap<any>;\n  defaultProps?: Partial<SystemProps<P, T>>;\n}\n\n/**\n * Helper to write components that adhere to a common design system API,\n * which includes the `as` and `variant` prop.\n */\nexport function system<P, T extends ElementType>(\n  render: (props: SystemProps<P, T>) => ReactElement | null\n) {\n  return forwardRef((props: any, ref) =>\n    render({ ...props, ref })\n  ) as SystemComponent<P, T>;\n}\n","import { useClassname } from './useClassname';\n\nimport * as resetStyleRefs from './normalize';\nimport { ElementType } from 'react';\n\nexport type StylesProps = {\n  element?: ElementType[];\n  variant?: string | string[];\n  [key: string]: any;\n};\n\n/**\n * Hook function that can add base styles, normalization, variant and custom styles\n */\nexport const useStyles = (\n  { element, variant, ...styles }: StylesProps,\n  classNames?: string\n) => {\n  /**\n   * Normalization styles looked up by html tag name(s). Base normalization\n   * is always applied.\n   */\n  var elementArray: ElementType[] = [];\n  if (element) {\n    element.push('base'); // always apply base styles\n    elementArray = element;\n  } else {\n    elementArray = ['base'];\n  }\n  const resetStyles = resetStyleRefs.el;\n  const elements: { [key: string]: any }[] = elementArray.map(\n    styleObject => resetStyles[styleObject as keyof typeof resetStyleRefs.el]\n  );\n\n  const elementObject = Object.assign({}, ...elements);\n\n  const basedOnNormalize = useClassname(elementObject);\n\n  /**\n   * Variants are retrieved from the theme.\n   */\n  const variants = Array.isArray(variant)\n    ? variant.map(v => ({ variant: v }))\n    : [{ variant }];\n\n  const basedOnVariants = useClassname(...variants);\n\n  /**\n   * Custom styles are applied \"on runtime\". They are usually controlled via component\n   * props and can change between component instances. They are more or less the `css`\n   * prop of `emotion`.\n   */\n  const custom = useClassname(styles);\n\n  return [basedOnNormalize, basedOnVariants, custom, classNames].join(' ');\n};\n"],"names":["Context","createContext","useTheme","useContext","useClassname","theme","styles","map","style","emotion","css","join","block","display","list","listStyle","quote","quotes","selectors","content","field","appearance","el","article","aside","details","figcaption","figure","footer","header","hgroup","menu","nav","section","ul","ol","blockquote","q","body","lineHeight","a","textDecoration","base","boxSizing","margin","padding","minWidth","fontSize","font","verticalAlign","WebkitTapHighlightColor","table","borderCollapse","borderSpacing","mark","backgroundColor","color","select","p","button","background","textarea","input","WebkitAppearance","React","Provider","value","children","render","forwardRef","props","ref","classNames","element","variant","elementArray","push","resetStyles","resetStyleRefs","elements","styleObject","elementObject","Object","assign","basedOnNormalize","variants","Array","isArray","v"],"mappings":"4VAEA,IAAMA,EAAUC,gBAAc,IAEjBC,EAAW,kBAAMC,aAAWH,ICA5BI,EAAe,mBACpBC,EAAQH,uBADgBI,2BAAAA,yBAEvBA,EAAOC,KAAI,SAAAC,UAASC,MAAQC,MAAIF,EAAJE,CAAWL,OAASM,KAAK,MCOxDC,EAAQ,CACZC,QAAS,SAOLC,EAAO,CACXC,UAAW,QAGPC,EAAQ,CACZC,OAAQ,OACRC,UAAW,qBACY,CACnBC,QAAS,QAcTC,EAAQ,CAACR,EAJI,CACjBS,WAAY,SA2CDC,EAAwB,CACnCC,QAASX,EACTY,MAAOZ,EACPa,QAASb,EACTc,WAAYd,EACZe,OAAQf,EACRgB,OAAQhB,EACRiB,OAAQjB,EACRkB,OAAQlB,EACRmB,KAAMnB,EACNoB,IAAKpB,EACLqB,QAASrB,EACTsB,GAAIpB,EACJqB,GAAIrB,EACJsB,WAAYpB,EACZqB,EAAGrB,EACHsB,KAlFW,CACXC,WAAY,GAkFZC,EArBQ,CACRC,eAAgB,QAqBhBC,KAnGW,CACXC,UAAW,aACXC,OAAQ,EACRC,QAAS,EACTC,SAAU,EACVC,SAAU,OACVC,KAAM,UACNC,cAAe,WACfC,wBAAyB,eA4FzBC,MApEY,CACZC,eAAgB,WAChBC,cAAe,GAmEfC,KA1DW,CACXC,gBAAiB,cACjBC,MAAO,WAyDPC,iBArDGrC,GACH,CACEF,UAAW,iBACQ,CACfL,QAAS,YAkDf6C,EAAG5C,EACH6C,OA/Ba,CACbC,WAAY,QA+BZC,SAAUzC,EACV0C,gBA9CG1C,GACH,CACEF,UAAW,gBACO,CACdL,QAAS,0CAEwB,CACjCkD,iBAAkB,iCC7DC,CACzB,IACA,SACA,KACA,YACA,KACA,cACA,KACA,eACA,KACA,aACA,KACA,UACA,KACA,UACA,IACA,UACA,KACA,aACA,KACA,eACA,KACA,gBACA,KACA,cACA,KACA,WACA,KACA,kCH7ByD,mBAGrDC,gBAAChE,EAAQiE,UAASC,QAFtB7D,SACA8D,mCIwCAC,UAEOC,cAAW,SAACC,EAAYC,UAC7BH,OAAYE,GAAOC,IAAAA,kDCtCE,WAEvBC,OADEC,IAAAA,QAASC,IAAAA,QAAYpE,8JAOnBqE,EAA8B,GAC9BF,GACFA,EAAQG,KAAK,QACbD,EAAeF,GAEfE,EAAe,CAAC,YAEZE,EAAcC,EACdC,EAAqCJ,EAAapE,KACtD,SAAAyE,UAAeH,EAAYG,MAGvBC,EAAgBC,OAAOC,aAAPD,QAAc,WAAOH,IAErCK,EAAmBhF,EAAa6E,GAKhCI,EAAWC,MAAMC,QAAQb,GAC3BA,EAAQnE,KAAI,SAAAiF,SAAM,CAAEd,QAASc,MAC7B,CAAC,CAAEd,QAAAA,UAWA,CAACU,EATgBhF,eAAgBiF,GAOzBjF,EAAaE,GAEuBkE,GAAY7D,KAAK"}
+{"version":3,"file":"system.cjs.production.min.js","sources":["../src/normalize.ts","../src/variant.ts","../src/Box.tsx","../src/useTheme.tsx","../src/Global.tsx","../src/SVG.tsx"],"sourcesContent":["/**\n * Normalize styling of certain elements between browsers.\n * Based on https://www.joshwcomeau.com/css/custom-css-reset/\n */\nimport { ElementType } from 'react';\n\nconst base = {\n  boxSizing: 'border-box',\n  margin: 0,\n  minWidth: 0,\n} as const;\n\nconst a = {\n  ...base,\n  textDecoration: 'none',\n} as const;\n\nconst text = {\n  ...base,\n  overflowWrap: 'break-word',\n} as const;\n\nconst media = {\n  ...base,\n  display: 'block',\n  maxWidth: '100%',\n} as const;\n\nconst button = {\n  ...base,\n  display: 'block',\n  appearance: 'none',\n  font: 'inherit',\n  background: 'transparent',\n  textAlign: 'center',\n} as const;\n\nconst input = {\n  ...base,\n  display: 'block',\n  appearance: 'none',\n  font: 'inherit',\n  '&::-ms-clear': {\n    display: 'none',\n  },\n  '&::-webkit-search-cancel-button': {\n    WebkitAppearance: 'none',\n  },\n} as const;\n\nconst select = {\n  ...base,\n  display: 'block',\n  appearance: 'none',\n  font: 'inherit',\n  '&::-ms-expand': {\n    display: 'none',\n  },\n} as const;\n\nconst textarea = {\n  ...base,\n  display: 'block',\n  appearance: 'none',\n  font: 'inherit',\n} as const;\n\n// Normalize\n// ---------------\nexport const normalize = {\n  base,\n  a,\n  p: text,\n  h1: text,\n  h2: text,\n  h3: text,\n  h4: text,\n  h5: text,\n  h6: text,\n  img: media,\n  picture: media,\n  video: media,\n  canvas: media,\n  svg: media,\n  select,\n  button,\n  textarea,\n  input,\n} as const;\n\nexport type NormalizedElement = keyof typeof normalize;\n\n/**\n * Type-safe helper to get normalization. If no normalization is found,\n * returns the *base* normalization.\n */\nexport const getNormalizedStyles = (val?: ElementType) =>\n  typeof val === 'string' && val in normalize\n    ? normalize[val as NormalizedElement] // Typescript doesn't infer this correctly\n    : normalize.base;\n","const isNil = (value: any): value is null | undefined =>\n  value === null || value === undefined;\n\n/**\n * Ensures that the `val` is an array. Will return an empty array if `val` is falsy.\n */\nexport const ensureArray = <T>(val?: T | T[]) =>\n  isNil(val) ? [] : Array.isArray(val) ? val : [val];\n\n/**\n * Removes trailing dot from variant, if necessary. This is necessary to support\n * `__default` styles. See https://github.com/system-ui/theme-ui/pull/951\n */\nexport const ensureVariantDefault = (val: string) => val.replace(/\\.$/, '');\n\n/**\n * Ensures that the `variant` is an array and supports the `__default` key.\n */\nexport const ensureArrayVariant = <T extends string>(variant?: T | T[]) =>\n  ensureArray(variant).map(ensureVariantDefault);\n\nexport type State = {\n  checked?: boolean;\n  focus?: boolean;\n  hover?: boolean;\n  disabled?: boolean;\n  error?: boolean;\n};\n\n/**\n * Appends given `state` to a `variant`.\n */\nexport const appendVariantState = (variant: string, state: keyof State) => {\n  return `${ensureVariantDefault(variant)}.:${state}`;\n};\n\n/**\n * Create a variant array from a `variant` and `state` containing\n * passed states, if they are truthy.\n */\nexport const conditional = (\n  variant: string,\n  { disabled = false, ...states }: State\n) => {\n  const entries = [...Object.entries(states), ['disabled', disabled]] as [\n    keyof State,\n    boolean\n  ][];\n  const stateVariants = entries\n    .filter(([, val]) => Boolean(val))\n    .map(([key]) => appendVariantState(variant, key));\n\n  return [variant, ...stateVariants];\n};\n","import { jsx, Theme } from '@emotion/react';\nimport { css as transformStyleObject } from '@theme-ui/css';\nimport { forwardRef } from 'react';\nimport {\n  PolymorphicPropsWithRef,\n  PolymorphicComponentWithRef,\n} from '@marigold/types';\n\nimport { getNormalizedStyles } from './normalize';\nimport { CSSObject } from './types';\nimport { ensureArrayVariant } from './variant';\n\nexport type StyleProps = Pick<\n  CSSObject,\n  | 'display'\n  | 'height'\n  | 'width'\n  | 'minWidth'\n  | 'maxWidth'\n  | 'position'\n  | 'top'\n  | 'bottom'\n  | 'right'\n  | 'left'\n  | 'zIndex'\n  | 'p'\n  | 'px'\n  | 'py'\n  | 'pt'\n  | 'pb'\n  | 'pl'\n  | 'pr'\n  | 'm'\n  | 'mx'\n  | 'my'\n  | 'mt'\n  | 'mb'\n  | 'ml'\n  | 'mr'\n  | 'flexDirection'\n  | 'flexWrap'\n  | 'flexShrink'\n  | 'flexGrow'\n  | 'alignItems'\n  | 'justifyContent'\n  | 'bg'\n  | 'border'\n  | 'borderRadius'\n  | 'boxShadow'\n  | 'opacity'\n  | 'overflow'\n  | 'transition'\n>;\n\nexport type BoxOwnProps = {\n  css?: CSSObject;\n  variant?: string | string[];\n  /**\n   * Use to set base styles for the component\n   * @internal Used to set default styles for Marigold components\n   */\n  __baseCSS?: CSSObject;\n} & StyleProps;\n\nexport type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;\n\n/**\n * Check if there is any falsy value or empty object\n */\nconst isNotEmpty = (val: any) =>\n  !(val && Object.keys(val).length === 0 && val.constructor === Object);\n\ntype CreateStyleProps = {\n  as?: BoxProps['as'];\n  __baseCSS?: BoxOwnProps['__baseCSS'];\n  variant?: BoxOwnProps['variant'];\n  css?: BoxOwnProps['css'];\n  styles?: StyleProps;\n};\n\nconst createThemedStyle =\n  ({ as, __baseCSS, variant, styles, css }: CreateStyleProps) =>\n  (theme: Theme) => {\n    return [\n      getNormalizedStyles(as),\n      transformStyleObject(__baseCSS)(theme),\n      ...ensureArrayVariant(variant).map(v =>\n        transformStyleObject({ variant: v })(theme)\n      ),\n      transformStyleObject(styles)(theme),\n      transformStyleObject(css)(theme),\n    ].filter(isNotEmpty);\n  };\n\nexport const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'> = forwardRef(\n  (\n    {\n      as = 'div',\n      children,\n      __baseCSS,\n      variant,\n      css = {},\n      display,\n      height,\n      width,\n      minWidth,\n      maxWidth,\n      position,\n      top,\n      bottom,\n      right,\n      left,\n      zIndex,\n      p,\n      px,\n      py,\n      pt,\n      pb,\n      pl,\n      pr,\n      m,\n      mx,\n      my,\n      mt,\n      mb,\n      ml,\n      mr,\n      flexDirection,\n      flexWrap,\n      flexShrink,\n      flexGrow,\n      alignItems,\n      justifyContent,\n      bg,\n      border,\n      borderRadius,\n      boxShadow,\n      opacity,\n      overflow,\n      transition,\n      ...props\n    },\n    ref\n  ) =>\n    jsx(\n      as,\n      {\n        ...props,\n        css: createThemedStyle({\n          as,\n          __baseCSS,\n          variant,\n          css,\n          styles: {\n            display,\n            height,\n            width,\n            minWidth,\n            maxWidth,\n            position,\n            top,\n            bottom,\n            right,\n            left,\n            zIndex,\n            p,\n            px,\n            py,\n            pt,\n            pb,\n            pl,\n            pr,\n            m,\n            mx,\n            my,\n            mt,\n            mb,\n            ml,\n            mr,\n            flexDirection,\n            flexWrap,\n            flexShrink,\n            flexGrow,\n            alignItems,\n            justifyContent,\n            bg,\n            border,\n            borderRadius,\n            boxShadow,\n            opacity,\n            overflow,\n            transition,\n          },\n        }),\n        ref,\n      },\n      children\n    )\n);\n","import React, {\n  createContext,\n  ReactNode,\n  useCallback,\n  useContext,\n} from 'react';\nimport { css as transformStyleObject } from '@theme-ui/css';\nimport { ThemeProvider as EmotionProvider } from '@emotion/react';\n\nimport { Theme } from './theme';\nimport { StyleObject } from './types';\n\n/**\n * @internal\n */\nexport const __defaultTheme: Theme = {};\n\nconst InternalContext = createContext<Theme>(__defaultTheme);\n\nexport const useTheme = () => {\n  const theme = useContext(InternalContext);\n  /**\n   * We cast the theme here to `any` since our subset is not\n   * compatible with the typings of `theme-ui`, since they\n   * also support arrays as scale values, while we don't.\n   */\n  const css = useCallback(\n    (style: StyleObject) => transformStyleObject(style)(theme as any),\n    [theme]\n  );\n  return { theme, css };\n};\n\nexport type ThemeProviderProps<T extends Theme> = {\n  theme: T;\n  children: ReactNode;\n};\n\nexport function ThemeProvider<T extends Theme>({\n  theme,\n  children,\n}: ThemeProviderProps<T>) {\n  return (\n    <EmotionProvider theme={theme}>\n      <InternalContext.Provider value={theme}>\n        {children}\n      </InternalContext.Provider>\n    </EmotionProvider>\n  );\n}\n","import React from 'react';\nimport { Global as EmotionGlobal } from '@emotion/react';\nimport { useTheme } from './useTheme';\n\n/**\n * CSS snippet and idea from:\n * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/\n */\nconst reduceMotionStyles = {\n  '@media screen and (prefers-reduced-motion: reduce), (update: slow)': {\n    '*': {\n      animationDuration: '0.001ms !important',\n      animationIterationCount: '1 !important',\n      transitionDuration: '0.001ms !important',\n    },\n  },\n};\n\nexport const Global = () => {\n  const { css } = useTheme();\n  const styles = css({\n    html: {\n      height: '100%',\n      variant: 'root.html',\n    },\n    body: {\n      height: '100%',\n      lineHeight: 1.5,\n      WebkitFontSmoothing: 'antialiased',\n      variant: 'root.body',\n    },\n  });\n  return <EmotionGlobal styles={{ reduceMotionStyles, ...styles }} />;\n};\n","import React from 'react';\nimport { jsx } from '@emotion/react';\nimport { ComponentProps } from '@marigold/types';\nimport { getNormalizedStyles } from '@marigold/system';\n\nconst css = getNormalizedStyles('svg');\n\nexport type SVGProps = {\n  size?: number;\n} & ComponentProps<'svg'>;\n\nexport const SVG: React.FC<SVGProps> = ({ size = 24, children, ...props }) =>\n  jsx(\n    'svg',\n    {\n      width: size,\n      height: size,\n      viewBox: '0 0 24 24',\n      fill: 'currentcolor',\n      ...props,\n      css,\n    },\n    children\n  );\n"],"names":["base","boxSizing","margin","minWidth","a","textDecoration","text","overflowWrap","media","display","maxWidth","button","appearance","font","background","textAlign","input","WebkitAppearance","normalize","p","h1","h2","h3","h4","h5","h6","img","picture","video","canvas","svg","select","textarea","getNormalizedStyles","val","ensureArray","value","Array","isArray","ensureVariantDefault","replace","ensureArrayVariant","variant","map","appendVariantState","state","isNotEmpty","Object","keys","length","constructor","createThemedStyle","as","__baseCSS","styles","css","theme","transformStyleObject","v","filter","Box","forwardRef","ref","children","height","width","position","top","bottom","right","left","zIndex","px","py","pt","pb","pl","pr","m","mx","my","mt","mb","ml","mr","flexDirection","flexWrap","flexShrink","flexGrow","alignItems","justifyContent","bg","border","borderRadius","boxShadow","opacity","overflow","transition","props","jsx","__defaultTheme","InternalContext","createContext","useTheme","useContext","useCallback","style","reduceMotionStyles","animationDuration","animationIterationCount","transitionDuration","html","body","lineHeight","WebkitFontSmoothing","React","EmotionGlobal","size","viewBox","fill","EmotionProvider","Provider","disabled","states","stateVariants","entries","Boolean"],"mappings":"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"}

package/dist/system.esm.js

@@ -1,13 +1,7 @@
-import React, { forwardRef, useContext, createContext } from 'react';
-import { css } from 'emotion';
+import { jsx, ThemeProvider as ThemeProvider$1, Global as Global$1 } from '@emotion/react';
 import { css as css$1 } from '@theme-ui/css';
-
-/**
- * System categories are based on https://primer.style/components/docs/system-props
- */
-// Spacing
-// ---------------
-var SPACE_PROPS = ['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'];
+import React, { forwardRef, useContext, useCallback, createContext } from 'react';
+import { getNormalizedStyles as getNormalizedStyles$1 } from '@marigold/system';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -42,183 +36,357 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-/**
- * Helper to write components that adhere to a common design system API,
- * which includes the `as` and `variant` prop.
- */
+var base = {
+  boxSizing: 'border-box',
+  margin: 0,
+  minWidth: 0
+};
 
-function system(render) {
-  return forwardRef(function (props, ref) {
-    return render(_extends({}, props, {
-      ref: ref
-    }));
-  });
-}
+var a = /*#__PURE__*/_extends({}, base, {
+  textDecoration: 'none'
+});
 
-var Context = /*#__PURE__*/createContext({});
-var useTheme = function useTheme() {
-  return useContext(Context);
-};
-var ThemeProvider = function ThemeProvider(_ref) {
-  var theme = _ref.theme,
-      children = _ref.children;
-  return React.createElement(Context.Provider, {
-    value: theme
-  }, children);
-};
+var text = /*#__PURE__*/_extends({}, base, {
+  overflowWrap: 'break-word'
+});
 
-var useClassname = function useClassname() {
-  var theme = useTheme();
+var media = /*#__PURE__*/_extends({}, base, {
+  display: 'block',
+  maxWidth: '100%'
+});
 
-  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
-    styles[_key] = arguments[_key];
-  }
+var button = /*#__PURE__*/_extends({}, base, {
+  display: 'block',
+  appearance: 'none',
+  font: 'inherit',
+  background: 'transparent',
+  textAlign: 'center'
+});
 
-  return styles.map(function (style) {
-    return css(css$1(style)(theme));
-  }).join(' ');
-};
+var input = /*#__PURE__*/_extends({}, base, {
+  display: 'block',
+  appearance: 'none',
+  font: 'inherit',
+  '&::-ms-clear': {
+    display: 'none'
+  },
+  '&::-webkit-search-cancel-button': {
+    WebkitAppearance: 'none'
+  }
+});
 
-var base = {
-  boxSizing: 'border-box',
-  margin: 0,
-  padding: 0,
-  minWidth: 0,
-  fontSize: '100%',
+var select = /*#__PURE__*/_extends({}, base, {
+  display: 'block',
+  appearance: 'none',
   font: 'inherit',
-  verticalAlign: 'baseline',
-  WebkitTapHighlightColor: 'transparent'
-};
-var block = {
-  display: 'block'
-};
-var body = {
-  lineHeight: 1
-};
-var list = {
-  listStyle: 'none'
-};
-var quote = {
-  quotes: 'none',
-  selectors: {
-    '&:before, &:after': {
-      content: "''"
-    }
+  '&::-ms-expand': {
+    display: 'none'
   }
+});
+
+var textarea = /*#__PURE__*/_extends({}, base, {
+  display: 'block',
+  appearance: 'none',
+  font: 'inherit'
+}); // Normalize
+// ---------------
+
+
+var normalize = {
+  base: base,
+  a: a,
+  p: text,
+  h1: text,
+  h2: text,
+  h3: text,
+  h4: text,
+  h5: text,
+  h6: text,
+  img: media,
+  picture: media,
+  video: media,
+  canvas: media,
+  svg: media,
+  select: select,
+  button: button,
+  textarea: textarea,
+  input: input
 };
-var table = {
-  borderCollapse: 'collapse',
-  borderSpacing: 0
+/**
+ * Type-safe helper to get normalization. If no normalization is found,
+ * returns the *base* normalization.
+ */
+
+var getNormalizedStyles = function getNormalizedStyles(val) {
+  return typeof val === 'string' && val in normalize ? normalize[val] // Typescript doesn't infer this correctly
+  : normalize.base;
 };
-var appearance = {
-  appearance: 'none'
+
+var _excluded = ["disabled"];
+
+var isNil = function isNil(value) {
+  return value === null || value === undefined;
 };
-var field = [block, appearance];
-var mark = {
-  backgroundColor: 'transparent',
-  color: 'inherit'
+/**
+ * Ensures that the `val` is an array. Will return an empty array if `val` is falsy.
+ */
+
+
+var ensureArray = function ensureArray(val) {
+  return isNil(val) ? [] : Array.isArray(val) ? val : [val];
 };
-var select = /*#__PURE__*/[].concat(field, [{
-  selectors: {
-    '&::-ms-expand': {
-      display: 'none'
-    }
-  }
-}]);
-var input = /*#__PURE__*/[].concat(field, [{
-  selectors: {
-    '&::-ms-clear': {
-      display: 'none'
-    },
-    '&::-webkit-search-cancel-button': {
-      WebkitAppearance: 'none'
-    }
-  }
-}]);
-var button = {
-  background: 'none'
+/**
+ * Removes trailing dot from variant, if necessary. This is necessary to support
+ * `__default` styles. See https://github.com/system-ui/theme-ui/pull/951
+ */
+
+var ensureVariantDefault = function ensureVariantDefault(val) {
+  return val.replace(/\.$/, '');
 };
-var a = {
-  textDecoration: 'none'
+/**
+ * Ensures that the `variant` is an array and supports the `__default` key.
+ */
+
+var ensureArrayVariant = function ensureArrayVariant(variant) {
+  return ensureArray(variant).map(ensureVariantDefault);
 };
-var el = {
-  article: block,
-  aside: block,
-  details: block,
-  figcaption: block,
-  figure: block,
-  footer: block,
-  header: block,
-  hgroup: block,
-  menu: block,
-  nav: block,
-  section: block,
-  ul: list,
-  ol: list,
-  blockquote: quote,
-  q: quote,
-  body: body,
-  a: a,
-  base: base,
-  table: table,
-  mark: mark,
-  select: select,
-  p: list,
-  button: button,
-  textarea: field,
-  input: input
+/**
+ * Appends given `state` to a `variant`.
+ */
+
+var appendVariantState = function appendVariantState(variant, state) {
+  return ensureVariantDefault(variant) + ".:" + state;
 };
+/**
+ * Create a variant array from a `variant` and `state` containing
+ * passed states, if they are truthy.
+ */
+
+var conditional = function conditional(variant, _ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      states = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var entries = [].concat(Object.entries(states), [['disabled', disabled]]);
+  var stateVariants = entries.filter(function (_ref2) {
+    var val = _ref2[1];
+    return Boolean(val);
+  }).map(function (_ref3) {
+    var key = _ref3[0];
+    return appendVariantState(variant, key);
+  });
+  return [variant].concat(stateVariants);
+};
+
+var _excluded$1 = ["as", "children", "__baseCSS", "variant", "css", "display", "height", "width", "minWidth", "maxWidth", "position", "top", "bottom", "right", "left", "zIndex", "p", "px", "py", "pt", "pb", "pl", "pr", "m", "mx", "my", "mt", "mb", "ml", "mr", "flexDirection", "flexWrap", "flexShrink", "flexGrow", "alignItems", "justifyContent", "bg", "border", "borderRadius", "boxShadow", "opacity", "overflow", "transition"];
 /**
- * Hook function that can add base styles, normalization, variant and custom styles
+ * Check if there is any falsy value or empty object
  */
 
-var useStyles = function useStyles(_ref, classNames) {
-  var element = _ref.element,
+var isNotEmpty = function isNotEmpty(val) {
+  return !(val && Object.keys(val).length === 0 && val.constructor === Object);
+};
+
+var createThemedStyle = function createThemedStyle(_ref) {
+  var as = _ref.as,
+      __baseCSS = _ref.__baseCSS,
       variant = _ref.variant,
-      styles = _objectWithoutPropertiesLoose(_ref, ["element", "variant"]);
+      styles = _ref.styles,
+      css = _ref.css;
+  return function (theme) {
+    return [getNormalizedStyles(as), css$1(__baseCSS)(theme)].concat(ensureArrayVariant(variant).map(function (v) {
+      return css$1({
+        variant: v
+      })(theme);
+    }), [css$1(styles)(theme), css$1(css)(theme)]).filter(isNotEmpty);
+  };
+};
 
+var Box = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _ref2$as = _ref2.as,
+      as = _ref2$as === void 0 ? 'div' : _ref2$as,
+      children = _ref2.children,
+      __baseCSS = _ref2.__baseCSS,
+      variant = _ref2.variant,
+      _ref2$css = _ref2.css,
+      css = _ref2$css === void 0 ? {} : _ref2$css,
+      display = _ref2.display,
+      height = _ref2.height,
+      width = _ref2.width,
+      minWidth = _ref2.minWidth,
+      maxWidth = _ref2.maxWidth,
+      position = _ref2.position,
+      top = _ref2.top,
+      bottom = _ref2.bottom,
+      right = _ref2.right,
+      left = _ref2.left,
+      zIndex = _ref2.zIndex,
+      p = _ref2.p,
+      px = _ref2.px,
+      py = _ref2.py,
+      pt = _ref2.pt,
+      pb = _ref2.pb,
+      pl = _ref2.pl,
+      pr = _ref2.pr,
+      m = _ref2.m,
+      mx = _ref2.mx,
+      my = _ref2.my,
+      mt = _ref2.mt,
+      mb = _ref2.mb,
+      ml = _ref2.ml,
+      mr = _ref2.mr,
+      flexDirection = _ref2.flexDirection,
+      flexWrap = _ref2.flexWrap,
+      flexShrink = _ref2.flexShrink,
+      flexGrow = _ref2.flexGrow,
+      alignItems = _ref2.alignItems,
+      justifyContent = _ref2.justifyContent,
+      bg = _ref2.bg,
+      border = _ref2.border,
+      borderRadius = _ref2.borderRadius,
+      boxShadow = _ref2.boxShadow,
+      opacity = _ref2.opacity,
+      overflow = _ref2.overflow,
+      transition = _ref2.transition,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$1);
+
+  return jsx(as, _extends({}, props, {
+    css: createThemedStyle({
+      as: as,
+      __baseCSS: __baseCSS,
+      variant: variant,
+      css: css,
+      styles: {
+        display: display,
+        height: height,
+        width: width,
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        position: position,
+        top: top,
+        bottom: bottom,
+        right: right,
+        left: left,
+        zIndex: zIndex,
+        p: p,
+        px: px,
+        py: py,
+        pt: pt,
+        pb: pb,
+        pl: pl,
+        pr: pr,
+        m: m,
+        mx: mx,
+        my: my,
+        mt: mt,
+        mb: mb,
+        ml: ml,
+        mr: mr,
+        flexDirection: flexDirection,
+        flexWrap: flexWrap,
+        flexShrink: flexShrink,
+        flexGrow: flexGrow,
+        alignItems: alignItems,
+        justifyContent: justifyContent,
+        bg: bg,
+        border: border,
+        borderRadius: borderRadius,
+        boxShadow: boxShadow,
+        opacity: opacity,
+        overflow: overflow,
+        transition: transition
+      }
+    }),
+    ref: ref
+  }), children);
+});
+
+/**
+ * @internal
+ */
+
+var __defaultTheme = {};
+var InternalContext = /*#__PURE__*/createContext(__defaultTheme);
+var useTheme = function useTheme() {
+  var theme = useContext(InternalContext);
   /**
-   * Normalization styles looked up by html tag name(s). Base normalization
-   * is always applied.
+   * We cast the theme here to `any` since our subset is not
+   * compatible with the typings of `theme-ui`, since they
+   * also support arrays as scale values, while we don't.
    */
-  var elementArray = [];
 
-  if (element) {
-    element.push('base'); // always apply base styles
+  var css = useCallback(function (style) {
+    return css$1(style)(theme);
+  }, [theme]);
+  return {
+    theme: theme,
+    css: css
+  };
+};
+function ThemeProvider(_ref) {
+  var theme = _ref.theme,
+      children = _ref.children;
+  return React.createElement(ThemeProvider$1, {
+    theme: theme
+  }, React.createElement(InternalContext.Provider, {
+    value: theme
+  }, children));
+}
+
+/**
+ * CSS snippet and idea from:
+ * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
+ */
 
-    elementArray = element;
-  } else {
-    elementArray = ['base'];
+var reduceMotionStyles = {
+  '@media screen and (prefers-reduced-motion: reduce), (update: slow)': {
+    '*': {
+      animationDuration: '0.001ms !important',
+      animationIterationCount: '1 !important',
+      transitionDuration: '0.001ms !important'
+    }
   }
+};
+var Global = function Global() {
+  var _useTheme = useTheme(),
+      css = _useTheme.css;
 
-  var resetStyles = el;
-  var elements = elementArray.map(function (styleObject) {
-    return resetStyles[styleObject];
+  var styles = css({
+    html: {
+      height: '100%',
+      variant: 'root.html'
+    },
+    body: {
+      height: '100%',
+      lineHeight: 1.5,
+      WebkitFontSmoothing: 'antialiased',
+      variant: 'root.body'
+    }
   });
-  var elementObject = Object.assign.apply(Object, [{}].concat(elements));
-  var basedOnNormalize = useClassname(elementObject);
-  /**
-   * Variants are retrieved from the theme.
-   */
+  return React.createElement(Global$1, {
+    styles: _extends({
+      reduceMotionStyles: reduceMotionStyles
+    }, styles)
+  });
+};
 
-  var variants = Array.isArray(variant) ? variant.map(function (v) {
-    return {
-      variant: v
-    };
-  }) : [{
-    variant: variant
-  }];
-  var basedOnVariants = useClassname.apply(void 0, variants);
-  /**
-   * Custom styles are applied "on runtime". They are usually controlled via component
-   * props and can change between component instances. They are more or less the `css`
-   * prop of `emotion`.
-   */
+var _excluded$2 = ["size", "children"];
+var css = /*#__PURE__*/getNormalizedStyles$1('svg');
+var SVG = function SVG(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 24 : _ref$size,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
-  var custom = useClassname(styles);
-  return [basedOnNormalize, basedOnVariants, custom, classNames].join(' ');
+  return jsx('svg', _extends({
+    width: size,
+    height: size,
+    viewBox: '0 0 24 24',
+    fill: 'currentcolor'
+  }, props, {
+    css: css
+  }), children);
 };
 
-export { SPACE_PROPS, ThemeProvider, system, useClassname, useStyles, useTheme };
+export { Box, Global, SVG, ThemeProvider, __defaultTheme, appendVariantState, conditional, ensureArray, ensureArrayVariant, ensureVariantDefault, getNormalizedStyles, normalize, useTheme };
 //# sourceMappingURL=system.esm.js.map