@marigold/system 0.1.0 → 0.2.0

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/reset.ts","../src/useStyles.ts"],"sourcesContent":["import React, { createContext, useCallback, useContext } from 'react';\nimport { css as themeUi } from '@theme-ui/css';\nimport { Theme } from '@marigold/system';\n\nimport { StyleObject } from './types';\n\nconst Context = createContext<Theme>({});\n\nexport const useTheme = () => {\n  const theme = useContext(Context);\n  const css = useCallback(\n    (style: StyleObject) => themeUi(style)(theme),\n    [theme]\n  );\n  return { theme, css };\n};\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/css';\nimport { StyleObject } from './types';\nimport { useTheme } from './useTheme';\n\n// 🤫 https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object\n// lodash.isEmpty is tooo much KBs!\nconst isEmpty = (val: any) =>\n  val && Object.keys(val).length === 0 && val.constructor === Object;\n\nexport const useClassname = (...styles: StyleObject[]) => {\n  const { css } = useTheme();\n  return styles\n    .map(style => {\n      /**\n       * emotion will create a `css-0` class whenever an empty object is\n       * passed. Since this makes debugging harder we'll do not pass empty\n       * objects to emotion.\n       */\n      const themedStyle = css(style);\n      return isEmpty(themedStyle) ? '' : emotion(themedStyle);\n    })\n    .join(' ');\n};\n","import { css } from '@emotion/css';\n\nconst base = css({\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\n// Content\n// ---------------\nconst block = css({\n  display: 'block',\n});\n\nconst list = css({\n  listStyle: 'none',\n});\n\nconst table = css({\n  borderCollapse: 'collapse',\n  borderSpacing: 0,\n});\n\n// Typography\n// ---------------\nconst a = css({\n  textDecoration: 'none',\n  touchAction: 'manipulation'\n});\n\nconst quote = css({\n  quotes: 'none',\n  selectors: {\n    '&:before, &:after': {\n      content: \"''\",\n    },\n  },\n});\n\n// Form Elements\n// ---------------\nconst button = css({\n  display: 'block',\n  appearance: 'none',\n  background: 'transparent',\n  textAlign: 'center',\n  touchAction: 'manipulation'\n});\n\nconst input = css({\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-clear': {\n      display: 'none',\n    },\n    '&::-webkit-search-cancel-button': {\n      WebkitAppearance: 'none',\n    },\n  },\n});\n\nconst select = css({\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-expand': {\n      display: 'none',\n    },\n  },\n});\n\nconst textarea = css({\n  display: 'block',\n  appearance: 'none',\n});\n\n// Reset\n// ---------------\nexport const reset = {\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  a,\n  base,\n  table,\n  select,\n  button,\n  textarea,\n  input,\n} as const;\n","import { ElementType } from 'react';\nimport { reset } from './reset';\nimport { CSSObject } from './types';\nimport { useClassname } from './useClassname';\n\nexport type UseStyleInput = {\n  element?: ElementType;\n  css?: Omit<CSSObject, 'variant' | 'element'> & {\n    variant?: never;\n    element?: never;\n  };\n  variant?: string | string[];\n  className?: string;\n};\n\n/**\n * Hook that can adds base styles, reset for certain elements, variants and custom styles\n */\nexport const useStyles = ({\n  element,\n  css: styles = {},\n  variant,\n  className = '',\n}: UseStyleInput) => {\n  /**\n   * Get reset styles. Base is always applied. An additional reset maybe applied\n   * based on the passed element.\n   *\n   * We check the passed className if it already includes the reset styles so no\n   * duplicates are applied.\n   */\n  const baseClassName = className.includes(reset.base) ? '' : reset.base;\n  const resetClassName =\n    typeof element === 'string'\n      ? className.includes((reset as { [key: string]: string })[element])\n        ? ''\n        : (reset as { [key: string]: string })[element]\n      : '';\n\n  /**\n   * Get variant styles (from theme).\n   */\n  const variants = Array.isArray(variant)\n    ? variant.map(v => ({ variant: v }))\n    : [{ variant }];\n  const variantsClassName = 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.\n   */\n  const customClassName = useClassname(styles);\n\n  return [\n    baseClassName,\n    resetClassName,\n    variantsClassName,\n    customClassName,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n};\n"],"names":["Context","createContext","useTheme","theme","useContext","css","useCallback","style","themeUi","isEmpty","val","Object","keys","length","constructor","useClassname","styles","map","themedStyle","emotion","join","base","boxSizing","margin","padding","minWidth","fontSize","font","verticalAlign","WebkitTapHighlightColor","block","display","list","listStyle","table","borderCollapse","borderSpacing","a","textDecoration","touchAction","quote","quotes","selectors","content","button","appearance","background","textAlign","input","WebkitAppearance","reset","article","aside","details","figcaption","figure","footer","header","hgroup","menu","nav","section","ul","ol","blockquote","q","select","textarea","React","Provider","value","children","element","variant","className","baseClassName","includes","resetClassName","variants","Array","isArray","v","filter","Boolean"],"mappings":"kJAMMA,EAAUC,gBAAqB,IAExBC,EAAW,eAChBC,EAAQC,aAAWJ,GACnBK,EAAMC,eACV,SAACC,UAAuBC,MAAQD,EAARC,CAAeL,KACvC,CAACA,UAEI,CAAEA,MAAAA,EAAOE,IAAAA,ICRZI,EAAU,SAACC,UACfA,GAAmC,IAA5BC,OAAOC,KAAKF,GAAKG,QAAgBH,EAAII,cAAgBH,QAEjDI,EAAe,qBACVb,IAARG,IAAAA,uBADsBW,2BAAAA,yBAEvBA,EACJC,KAAI,SAAAV,OAMGW,EAAcb,EAAIE,UACjBE,EAAQS,GAAe,GAAKC,MAAQD,MAE5CE,KAAK,MCnBJC,EAAOhB,MAAI,CACfiB,UAAW,aACXC,OAAQ,EACRC,QAAS,EACTC,SAAU,EACVC,SAAU,OACVC,KAAM,UACNC,cAAe,WACfC,wBAAyB,gBAKrBC,EAAQzB,MAAI,CAChB0B,QAAS,UAGLC,EAAO3B,MAAI,CACf4B,UAAW,SAGPC,EAAQ7B,MAAI,CAChB8B,eAAgB,WAChBC,cAAe,IAKXC,EAAIhC,MAAI,CACZiC,eAAgB,OAChBC,YAAa,iBAGTC,EAAQnC,MAAI,CAChBoC,OAAQ,OACRC,UAAW,qBACY,CACnBC,QAAS,SAOTC,EAASvC,MAAI,CACjB0B,QAAS,QACTc,WAAY,OACZC,WAAY,cACZC,UAAW,SACXR,YAAa,iBAGTS,EAAQ3C,MAAI,CAChB0B,QAAS,QACTc,WAAY,OACZH,UAAW,gBACO,CACdX,QAAS,0CAEwB,CACjCkB,iBAAkB,WAsBXC,EAAQ,CACnBC,QAASrB,EACTsB,MAAOtB,EACPuB,QAASvB,EACTwB,WAAYxB,EACZyB,OAAQzB,EACR0B,OAAQ1B,EACR2B,OAAQ3B,EACR4B,OAAQ5B,EACR6B,KAAM7B,EACN8B,IAAK9B,EACL+B,QAAS/B,EACTgC,GAAI9B,EACJ+B,GAAI/B,EACJgC,WAAYxB,EACZyB,EAAGzB,EACHH,EAAAA,EACAhB,KAAAA,EACAa,MAAAA,EACAgC,OApCa7D,MAAI,CACjB0B,QAAS,QACTc,WAAY,OACZH,UAAW,iBACQ,CACfX,QAAS,WAgCba,OAAAA,EACAuB,SA5Be9D,MAAI,CACnB0B,QAAS,QACTc,WAAY,SA2BZG,MAAAA,+GFxFyD,mBAGrDoB,gBAACpE,EAAQqE,UAASC,QAFtBnE,SACAoE,oDGFuB,gBACvBC,IAAAA,YACAnE,IAAKW,aAAS,KACdyD,IAAAA,YACAC,UAAAA,aAAY,KASNC,EAAgBD,EAAUE,SAAS1B,EAAM7B,MAAQ,GAAK6B,EAAM7B,KAC5DwD,EACe,iBAAZL,EACHE,EAAUE,SAAU1B,EAAoCsB,IACtD,GACCtB,EAAoCsB,GACvC,GAKAM,EAAWC,MAAMC,QAAQP,GAC3BA,EAAQxD,KAAI,SAAAgE,SAAM,CAAER,QAASQ,MAC7B,CAAC,CAAER,QAAAA,UASA,CACLE,EACAE,EAVwB9D,eAAgB+D,GAMlB/D,EAAaC,GAOnC0D,GAECQ,OAAOC,SACP/D,KAAK"}
+{"version":3,"file":"system.cjs.production.min.js","sources":["../src/normalize.ts","../src/useTheme.tsx","../src/Element.tsx","../src/useClassname.ts","../src/reset.ts","../src/useStyles.ts"],"sourcesContent":["import { ElementType } from 'react';\n\nconst base = {\n  boxSizing: 'border-box',\n  margin: 0,\n  padding: 0,\n  minWidth: 0,\n  fontSize: '100%',\n  fontFamily: 'inherit',\n  verticalAlign: 'baseline',\n  WebkitTapHighlightColor: 'transparent',\n} as const;\n\n// Content\n// ---------------\nconst block = {\n  display: 'block',\n} as const;\n\nconst list = {\n  // empty\n} as const;\n\nconst table = {\n  borderCollapse: 'collapse',\n  borderSpacing: 0,\n} as const;\n\n// Typography\n// ---------------\nconst a = {\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n} as const;\n\nconst quote = {\n  quotes: 'none',\n  selectors: {\n    '&:before, &:after': {\n      content: \"''\",\n    },\n  },\n} as const;\n\n// Form Elements\n// ---------------\nconst button = {\n  display: 'block',\n  appearance: 'none',\n  background: 'transparent',\n  textAlign: 'center',\n  touchAction: 'manipulation',\n} as const;\n\nconst input = {\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-clear': {\n      display: 'none',\n    },\n    '&::-webkit-search-cancel-button': {\n      WebkitAppearance: 'none',\n    },\n  },\n} as const;\n\nconst select = {\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-expand': {\n      display: 'none',\n    },\n  },\n} as const;\n\nconst textarea = {\n  display: 'block',\n  appearance: 'none',\n} as const;\n\n// Reset\n// ---------------\nconst reset = {\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  a,\n  base,\n  table,\n  select,\n  button,\n  textarea,\n  input,\n} as const;\n\nexport type NormalizedElement = keyof typeof reset;\nconst isKnownElement = (input: string): input is NormalizedElement =>\n  input in reset;\n\n/**\n * Helper to conveniently get reset styles.\n */\nexport const getNormalizedStyles = (input?: ElementType): object => {\n  /**\n   * If a React component is given, we don't apply any reset styles\n   * and return the base reset.\n   */\n  if (typeof input !== 'string') {\n    return reset.base;\n  }\n\n  /**\n   * Try to find the reset style for a HTML element. If the element\n   * is not included return empty styles.\n   */\n  return isKnownElement(input) ? reset[input] : {};\n};\n","import React, { createContext, useCallback, useContext } from 'react';\nimport { css as themeUi } from '@theme-ui/css';\nimport { Theme } from '@marigold/system';\n\nimport { StyleObject } from './types';\n\nconst Context = createContext<Theme>({});\n\nexport const useTheme = () => {\n  const theme = useContext(Context);\n  const css = useCallback(\n    (style: StyleObject) => themeUi(style)(theme),\n    [theme]\n  );\n  return { theme, css };\n};\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 { jsx } from '@emotion/react';\nimport { forwardRef } from 'react';\nimport {\n  PolymorphicPropsWithRef,\n  PolymorphicComponentWithRef,\n} from '@marigold/types';\n\nimport { getNormalizedStyles } from './normalize';\nimport { CSSObject } from './types';\nimport { useTheme } from './useTheme';\n\nexport type ElementOwnProps = {\n  css?: CSSObject;\n  variant?: string | string[];\n};\n\nexport type ElementProps = PolymorphicPropsWithRef<ElementOwnProps, 'div'>;\n\n/**\n * Function expression to 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\n/**\n * Get the normalized base styles\n */\nconst baseStyles = getNormalizedStyles('base');\n\nexport const Element: PolymorphicComponentWithRef<ElementOwnProps, 'div'> =\n  forwardRef(\n    ({ as = 'div', css: styles = {}, variant, children, ...props }, ref) => {\n      const { css } = useTheme();\n\n      /**\n       * Transform variant input for `@theme-ui/css`\n       */\n      const variants = Array.isArray(variant)\n        ? variant.map(v => ({ variant: v }))\n        : [{ variant }];\n\n      return jsx(\n        as,\n        {\n          ...props,\n          ...{\n            css: [\n              baseStyles,\n              getNormalizedStyles(as),\n              ...variants.map(v => css(v)),\n              css(styles),\n            ].filter(isNotEmpty),\n          },\n          ref,\n        },\n        children\n      );\n    }\n  );\n","import { css as emotion } from '@emotion/css';\nimport { StyleObject } from './types';\nimport { useTheme } from './useTheme';\n\n// 🤫 https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object\n// lodash.isEmpty is tooo much KBs!\nconst isEmpty = (val: any) =>\n  val && Object.keys(val).length === 0 && val.constructor === Object;\n\nexport const useClassname = (...styles: StyleObject[]) => {\n  const { css } = useTheme();\n  return styles\n    .map(style => {\n      /**\n       * emotion will create a `css-0` class whenever an empty object is\n       * passed. Since this makes debugging harder we'll do not pass empty\n       * objects to emotion.\n       */\n      const themedStyle = css(style);\n      return isEmpty(themedStyle) ? '' : emotion(themedStyle);\n    })\n    .join(' ');\n};\n","import { css } from '@emotion/css';\n\nconst base = css({\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\n// Content\n// ---------------\nconst block = css({\n  display: 'block',\n});\n\nconst list = css({\n  // empty\n});\n\nconst table = css({\n  borderCollapse: 'collapse',\n  borderSpacing: 0,\n});\n\n// Typography\n// ---------------\nconst a = css({\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n});\n\nconst quote = css({\n  quotes: 'none',\n  selectors: {\n    '&:before, &:after': {\n      content: \"''\",\n    },\n  },\n});\n\n// Form Elements\n// ---------------\nconst button = css({\n  display: 'block',\n  appearance: 'none',\n  background: 'transparent',\n  textAlign: 'center',\n  touchAction: 'manipulation',\n});\n\nconst input = css({\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-clear': {\n      display: 'none',\n    },\n    '&::-webkit-search-cancel-button': {\n      WebkitAppearance: 'none',\n    },\n  },\n});\n\nconst select = css({\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-expand': {\n      display: 'none',\n    },\n  },\n});\n\nconst textarea = css({\n  display: 'block',\n  appearance: 'none',\n});\n\n// Reset\n// ---------------\nexport const reset = {\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  a,\n  base,\n  table,\n  select,\n  button,\n  textarea,\n  input,\n} as const;\n","import { ElementType } from 'react';\nimport { reset } from './reset';\nimport { CSSObject } from './types';\nimport { useClassname } from './useClassname';\n\nexport type UseStyleInput = {\n  element?: ElementType;\n  css?: Omit<CSSObject, 'variant' | 'element'> & {\n    variant?: never;\n    element?: never;\n  };\n  variant?: string | string[];\n  className?: string;\n};\n\n/**\n * Hook that can adds base styles, reset for certain elements, variants and custom styles\n */\nexport const useStyles = ({\n  element,\n  css: styles = {},\n  variant,\n  className = '',\n}: UseStyleInput) => {\n  /**\n   * Get reset styles. Base is always applied. An additional reset maybe applied\n   * based on the passed element.\n   *\n   * We check the passed className if it already includes the reset styles so no\n   * duplicates are applied.\n   */\n  const baseClassName = className.includes(reset.base) ? '' : reset.base;\n  const resetClassName =\n    typeof element === 'string'\n      ? className.includes((reset as { [key: string]: string })[element])\n        ? ''\n        : (reset as { [key: string]: string })[element]\n      : '';\n\n  /**\n   * Get variant styles (from theme).\n   */\n  const variants = Array.isArray(variant)\n    ? variant.map(v => ({ variant: v }))\n    : [{ variant }];\n  const variantsClassName = 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.\n   */\n  const customClassName = useClassname(styles);\n\n  return [\n    baseClassName,\n    resetClassName,\n    variantsClassName,\n    customClassName,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n};\n"],"names":["block","display","list","quote","quotes","selectors","content","reset","article","aside","details","figcaption","figure","footer","header","hgroup","menu","nav","section","ul","ol","blockquote","q","a","textDecoration","touchAction","base","boxSizing","margin","padding","minWidth","fontSize","fontFamily","verticalAlign","WebkitTapHighlightColor","table","borderCollapse","borderSpacing","select","appearance","button","background","textAlign","textarea","input","WebkitAppearance","getNormalizedStyles","isKnownElement","Context","createContext","useTheme","theme","useContext","css","useCallback","style","themeUi","isNotEmpty","val","Object","keys","length","constructor","baseStyles","Element","forwardRef","ref","as","styles","variant","children","props","variants","Array","isArray","map","v","jsx","filter","isEmpty","useClassname","themedStyle","emotion","join","font","React","Provider","value","element","className","baseClassName","includes","resetClassName","Boolean"],"mappings":"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"}

package/dist/system.esm.js

@@ -1,7 +1,162 @@
+import { jsx } from '@emotion/react';
+import React, { useContext, useCallback, createContext, forwardRef } from 'react';
+import { css } from '@theme-ui/css';
 import { css as css$1 } from '@emotion/css';
 export { cache } from '@emotion/css';
-import React, { useContext, useCallback, createContext } from 'react';
-import { css } from '@theme-ui/css';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var base = {
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  minWidth: 0,
+  fontSize: '100%',
+  fontFamily: 'inherit',
+  verticalAlign: 'baseline',
+  WebkitTapHighlightColor: 'transparent'
+}; // Content
+// ---------------
+
+var block = {
+  display: 'block'
+};
+var list = {// empty
+};
+var table = {
+  borderCollapse: 'collapse',
+  borderSpacing: 0
+}; // Typography
+// ---------------
+
+var a = {
+  textDecoration: 'none',
+  touchAction: 'manipulation'
+};
+var quote = {
+  quotes: 'none',
+  selectors: {
+    '&:before, &:after': {
+      content: "''"
+    }
+  }
+}; // Form Elements
+// ---------------
+
+var button = {
+  display: 'block',
+  appearance: 'none',
+  background: 'transparent',
+  textAlign: 'center',
+  touchAction: 'manipulation'
+};
+var input = {
+  display: 'block',
+  appearance: 'none',
+  selectors: {
+    '&::-ms-clear': {
+      display: 'none'
+    },
+    '&::-webkit-search-cancel-button': {
+      WebkitAppearance: 'none'
+    }
+  }
+};
+var select = {
+  display: 'block',
+  appearance: 'none',
+  selectors: {
+    '&::-ms-expand': {
+      display: 'none'
+    }
+  }
+};
+var textarea = {
+  display: 'block',
+  appearance: 'none'
+}; // Reset
+// ---------------
+
+var reset = {
+  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,
+  a: a,
+  base: base,
+  table: table,
+  select: select,
+  button: button,
+  textarea: textarea,
+  input: input
+};
+
+var isKnownElement = function isKnownElement(input) {
+  return input in reset;
+};
+/**
+ * Helper to conveniently get reset styles.
+ */
+
+
+var getNormalizedStyles = function getNormalizedStyles(input) {
+  /**
+   * If a React component is given, we don't apply any reset styles
+   * and return the base reset.
+   */
+  if (typeof input !== 'string') {
+    return reset.base;
+  }
+  /**
+   * Try to find the reset style for a HTML element. If the element
+   * is not included return empty styles.
+   */
+
+
+  return isKnownElement(input) ? reset[input] : {};
+};
 
 var Context = /*#__PURE__*/createContext({});
 var useTheme = function useTheme() {
@@ -22,6 +177,52 @@ var ThemeProvider = function ThemeProvider(_ref) {
   }, children);
 };
 
+var _excluded = ["as", "css", "variant", "children"];
+/**
+ * Function expression to check if there is any falsy value or empty object
+ */
+
+var isNotEmpty = function isNotEmpty(val) {
+  return !(val && Object.keys(val).length === 0 && val.constructor === Object);
+};
+/**
+ * Get the normalized base styles
+ */
+
+
+var baseStyles = /*#__PURE__*/getNormalizedStyles('base');
+var Element = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$as = _ref.as,
+      as = _ref$as === void 0 ? 'div' : _ref$as,
+      _ref$css = _ref.css,
+      styles = _ref$css === void 0 ? {} : _ref$css,
+      variant = _ref.variant,
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _useTheme = useTheme(),
+      css = _useTheme.css;
+  /**
+   * Transform variant input for `@theme-ui/css`
+   */
+
+
+  var variants = Array.isArray(variant) ? variant.map(function (v) {
+    return {
+      variant: v
+    };
+  }) : [{
+    variant: variant
+  }];
+  return jsx(as, _extends({}, props, {
+    css: [baseStyles, getNormalizedStyles(as)].concat(variants.map(function (v) {
+      return css(v);
+    }), [css(styles)]).filter(isNotEmpty)
+  }, {
+    ref: ref
+  }), children);
+});
+
 // lodash.isEmpty is tooo much KBs!
 
 var isEmpty = function isEmpty(val) {
@@ -47,7 +248,7 @@ var useClassname = function useClassname() {
   }).join(' ');
 };
 
-var base = /*#__PURE__*/css$1({
+var base$1 = /*#__PURE__*/css$1({
   boxSizing: 'border-box',
   margin: 0,
   padding: 0,
@@ -59,23 +260,22 @@ var base = /*#__PURE__*/css$1({
 }); // Content
 // ---------------
 
-var block = /*#__PURE__*/css$1({
+var block$1 = /*#__PURE__*/css$1({
   display: 'block'
 });
-var list = /*#__PURE__*/css$1({
-  listStyle: 'none'
+var list$1 = /*#__PURE__*/css$1({// empty
 });
-var table = /*#__PURE__*/css$1({
+var table$1 = /*#__PURE__*/css$1({
   borderCollapse: 'collapse',
   borderSpacing: 0
 }); // Typography
 // ---------------
 
-var a = /*#__PURE__*/css$1({
+var a$1 = /*#__PURE__*/css$1({
   textDecoration: 'none',
   touchAction: 'manipulation'
 });
-var quote = /*#__PURE__*/css$1({
+var quote$1 = /*#__PURE__*/css$1({
   quotes: 'none',
   selectors: {
     '&:before, &:after': {
@@ -85,14 +285,14 @@ var quote = /*#__PURE__*/css$1({
 }); // Form Elements
 // ---------------
 
-var button = /*#__PURE__*/css$1({
+var button$1 = /*#__PURE__*/css$1({
   display: 'block',
   appearance: 'none',
   background: 'transparent',
   textAlign: 'center',
   touchAction: 'manipulation'
 });
-var input = /*#__PURE__*/css$1({
+var input$1 = /*#__PURE__*/css$1({
   display: 'block',
   appearance: 'none',
   selectors: {
@@ -104,7 +304,7 @@ var input = /*#__PURE__*/css$1({
     }
   }
 });
-var select = /*#__PURE__*/css$1({
+var select$1 = /*#__PURE__*/css$1({
   display: 'block',
   appearance: 'none',
   selectors: {
@@ -113,35 +313,35 @@ var select = /*#__PURE__*/css$1({
     }
   }
 });
-var textarea = /*#__PURE__*/css$1({
+var textarea$1 = /*#__PURE__*/css$1({
   display: 'block',
   appearance: 'none'
 }); // Reset
 // ---------------
 
-var reset = {
-  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,
-  a: a,
-  base: base,
-  table: table,
-  select: select,
-  button: button,
-  textarea: textarea,
-  input: input
+var reset$1 = {
+  article: block$1,
+  aside: block$1,
+  details: block$1,
+  figcaption: block$1,
+  figure: block$1,
+  footer: block$1,
+  header: block$1,
+  hgroup: block$1,
+  menu: block$1,
+  nav: block$1,
+  section: block$1,
+  ul: list$1,
+  ol: list$1,
+  blockquote: quote$1,
+  q: quote$1,
+  a: a$1,
+  base: base$1,
+  table: table$1,
+  select: select$1,
+  button: button$1,
+  textarea: textarea$1,
+  input: input$1
 };
 
 /**
@@ -163,8 +363,8 @@ var useStyles = function useStyles(_ref) {
    * We check the passed className if it already includes the reset styles so no
    * duplicates are applied.
    */
-  var baseClassName = className.includes(reset.base) ? '' : reset.base;
-  var resetClassName = typeof element === 'string' ? className.includes(reset[element]) ? '' : reset[element] : '';
+  var baseClassName = className.includes(reset$1.base) ? '' : reset$1.base;
+  var resetClassName = typeof element === 'string' ? className.includes(reset$1[element]) ? '' : reset$1[element] : '';
   /**
    * Get variant styles (from theme).
    */
@@ -186,5 +386,5 @@ var useStyles = function useStyles(_ref) {
   return [baseClassName, resetClassName, variantsClassName, customClassName, className].filter(Boolean).join(' ');
 };
 
-export { ThemeProvider, useClassname, useStyles, useTheme };
+export { Element, ThemeProvider, useClassname, useStyles, useTheme };
 //# sourceMappingURL=system.esm.js.map

package/dist/system.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"system.esm.js","sources":["../src/useTheme.tsx","../src/useClassname.ts","../src/reset.ts","../src/useStyles.ts"],"sourcesContent":["import React, { createContext, useCallback, useContext } from 'react';\nimport { css as themeUi } from '@theme-ui/css';\nimport { Theme } from '@marigold/system';\n\nimport { StyleObject } from './types';\n\nconst Context = createContext<Theme>({});\n\nexport const useTheme = () => {\n  const theme = useContext(Context);\n  const css = useCallback(\n    (style: StyleObject) => themeUi(style)(theme),\n    [theme]\n  );\n  return { theme, css };\n};\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/css';\nimport { StyleObject } from './types';\nimport { useTheme } from './useTheme';\n\n// 🤫 https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object\n// lodash.isEmpty is tooo much KBs!\nconst isEmpty = (val: any) =>\n  val && Object.keys(val).length === 0 && val.constructor === Object;\n\nexport const useClassname = (...styles: StyleObject[]) => {\n  const { css } = useTheme();\n  return styles\n    .map(style => {\n      /**\n       * emotion will create a `css-0` class whenever an empty object is\n       * passed. Since this makes debugging harder we'll do not pass empty\n       * objects to emotion.\n       */\n      const themedStyle = css(style);\n      return isEmpty(themedStyle) ? '' : emotion(themedStyle);\n    })\n    .join(' ');\n};\n","import { css } from '@emotion/css';\n\nconst base = css({\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\n// Content\n// ---------------\nconst block = css({\n  display: 'block',\n});\n\nconst list = css({\n  listStyle: 'none',\n});\n\nconst table = css({\n  borderCollapse: 'collapse',\n  borderSpacing: 0,\n});\n\n// Typography\n// ---------------\nconst a = css({\n  textDecoration: 'none',\n  touchAction: 'manipulation'\n});\n\nconst quote = css({\n  quotes: 'none',\n  selectors: {\n    '&:before, &:after': {\n      content: \"''\",\n    },\n  },\n});\n\n// Form Elements\n// ---------------\nconst button = css({\n  display: 'block',\n  appearance: 'none',\n  background: 'transparent',\n  textAlign: 'center',\n  touchAction: 'manipulation'\n});\n\nconst input = css({\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-clear': {\n      display: 'none',\n    },\n    '&::-webkit-search-cancel-button': {\n      WebkitAppearance: 'none',\n    },\n  },\n});\n\nconst select = css({\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-expand': {\n      display: 'none',\n    },\n  },\n});\n\nconst textarea = css({\n  display: 'block',\n  appearance: 'none',\n});\n\n// Reset\n// ---------------\nexport const reset = {\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  a,\n  base,\n  table,\n  select,\n  button,\n  textarea,\n  input,\n} as const;\n","import { ElementType } from 'react';\nimport { reset } from './reset';\nimport { CSSObject } from './types';\nimport { useClassname } from './useClassname';\n\nexport type UseStyleInput = {\n  element?: ElementType;\n  css?: Omit<CSSObject, 'variant' | 'element'> & {\n    variant?: never;\n    element?: never;\n  };\n  variant?: string | string[];\n  className?: string;\n};\n\n/**\n * Hook that can adds base styles, reset for certain elements, variants and custom styles\n */\nexport const useStyles = ({\n  element,\n  css: styles = {},\n  variant,\n  className = '',\n}: UseStyleInput) => {\n  /**\n   * Get reset styles. Base is always applied. An additional reset maybe applied\n   * based on the passed element.\n   *\n   * We check the passed className if it already includes the reset styles so no\n   * duplicates are applied.\n   */\n  const baseClassName = className.includes(reset.base) ? '' : reset.base;\n  const resetClassName =\n    typeof element === 'string'\n      ? className.includes((reset as { [key: string]: string })[element])\n        ? ''\n        : (reset as { [key: string]: string })[element]\n      : '';\n\n  /**\n   * Get variant styles (from theme).\n   */\n  const variants = Array.isArray(variant)\n    ? variant.map(v => ({ variant: v }))\n    : [{ variant }];\n  const variantsClassName = 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.\n   */\n  const customClassName = useClassname(styles);\n\n  return [\n    baseClassName,\n    resetClassName,\n    variantsClassName,\n    customClassName,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n};\n"],"names":["Context","createContext","useTheme","theme","useContext","css","useCallback","style","themeUi","ThemeProvider","children","React","Provider","value","isEmpty","val","Object","keys","length","constructor","useClassname","styles","map","themedStyle","emotion","join","base","boxSizing","margin","padding","minWidth","fontSize","font","verticalAlign","WebkitTapHighlightColor","block","display","list","listStyle","table","borderCollapse","borderSpacing","a","textDecoration","touchAction","quote","quotes","selectors","content","button","appearance","background","textAlign","input","WebkitAppearance","select","textarea","reset","article","aside","details","figcaption","figure","footer","header","hgroup","menu","nav","section","ul","ol","blockquote","q","useStyles","element","variant","className","baseClassName","includes","resetClassName","variants","Array","isArray","v","variantsClassName","customClassName","filter","Boolean"],"mappings":"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"}
+{"version":3,"file":"system.esm.js","sources":["../src/normalize.ts","../src/useTheme.tsx","../src/Element.tsx","../src/useClassname.ts","../src/reset.ts","../src/useStyles.ts"],"sourcesContent":["import { ElementType } from 'react';\n\nconst base = {\n  boxSizing: 'border-box',\n  margin: 0,\n  padding: 0,\n  minWidth: 0,\n  fontSize: '100%',\n  fontFamily: 'inherit',\n  verticalAlign: 'baseline',\n  WebkitTapHighlightColor: 'transparent',\n} as const;\n\n// Content\n// ---------------\nconst block = {\n  display: 'block',\n} as const;\n\nconst list = {\n  // empty\n} as const;\n\nconst table = {\n  borderCollapse: 'collapse',\n  borderSpacing: 0,\n} as const;\n\n// Typography\n// ---------------\nconst a = {\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n} as const;\n\nconst quote = {\n  quotes: 'none',\n  selectors: {\n    '&:before, &:after': {\n      content: \"''\",\n    },\n  },\n} as const;\n\n// Form Elements\n// ---------------\nconst button = {\n  display: 'block',\n  appearance: 'none',\n  background: 'transparent',\n  textAlign: 'center',\n  touchAction: 'manipulation',\n} as const;\n\nconst input = {\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-clear': {\n      display: 'none',\n    },\n    '&::-webkit-search-cancel-button': {\n      WebkitAppearance: 'none',\n    },\n  },\n} as const;\n\nconst select = {\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-expand': {\n      display: 'none',\n    },\n  },\n} as const;\n\nconst textarea = {\n  display: 'block',\n  appearance: 'none',\n} as const;\n\n// Reset\n// ---------------\nconst reset = {\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  a,\n  base,\n  table,\n  select,\n  button,\n  textarea,\n  input,\n} as const;\n\nexport type NormalizedElement = keyof typeof reset;\nconst isKnownElement = (input: string): input is NormalizedElement =>\n  input in reset;\n\n/**\n * Helper to conveniently get reset styles.\n */\nexport const getNormalizedStyles = (input?: ElementType): object => {\n  /**\n   * If a React component is given, we don't apply any reset styles\n   * and return the base reset.\n   */\n  if (typeof input !== 'string') {\n    return reset.base;\n  }\n\n  /**\n   * Try to find the reset style for a HTML element. If the element\n   * is not included return empty styles.\n   */\n  return isKnownElement(input) ? reset[input] : {};\n};\n","import React, { createContext, useCallback, useContext } from 'react';\nimport { css as themeUi } from '@theme-ui/css';\nimport { Theme } from '@marigold/system';\n\nimport { StyleObject } from './types';\n\nconst Context = createContext<Theme>({});\n\nexport const useTheme = () => {\n  const theme = useContext(Context);\n  const css = useCallback(\n    (style: StyleObject) => themeUi(style)(theme),\n    [theme]\n  );\n  return { theme, css };\n};\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 { jsx } from '@emotion/react';\nimport { forwardRef } from 'react';\nimport {\n  PolymorphicPropsWithRef,\n  PolymorphicComponentWithRef,\n} from '@marigold/types';\n\nimport { getNormalizedStyles } from './normalize';\nimport { CSSObject } from './types';\nimport { useTheme } from './useTheme';\n\nexport type ElementOwnProps = {\n  css?: CSSObject;\n  variant?: string | string[];\n};\n\nexport type ElementProps = PolymorphicPropsWithRef<ElementOwnProps, 'div'>;\n\n/**\n * Function expression to 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\n/**\n * Get the normalized base styles\n */\nconst baseStyles = getNormalizedStyles('base');\n\nexport const Element: PolymorphicComponentWithRef<ElementOwnProps, 'div'> =\n  forwardRef(\n    ({ as = 'div', css: styles = {}, variant, children, ...props }, ref) => {\n      const { css } = useTheme();\n\n      /**\n       * Transform variant input for `@theme-ui/css`\n       */\n      const variants = Array.isArray(variant)\n        ? variant.map(v => ({ variant: v }))\n        : [{ variant }];\n\n      return jsx(\n        as,\n        {\n          ...props,\n          ...{\n            css: [\n              baseStyles,\n              getNormalizedStyles(as),\n              ...variants.map(v => css(v)),\n              css(styles),\n            ].filter(isNotEmpty),\n          },\n          ref,\n        },\n        children\n      );\n    }\n  );\n","import { css as emotion } from '@emotion/css';\nimport { StyleObject } from './types';\nimport { useTheme } from './useTheme';\n\n// 🤫 https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object\n// lodash.isEmpty is tooo much KBs!\nconst isEmpty = (val: any) =>\n  val && Object.keys(val).length === 0 && val.constructor === Object;\n\nexport const useClassname = (...styles: StyleObject[]) => {\n  const { css } = useTheme();\n  return styles\n    .map(style => {\n      /**\n       * emotion will create a `css-0` class whenever an empty object is\n       * passed. Since this makes debugging harder we'll do not pass empty\n       * objects to emotion.\n       */\n      const themedStyle = css(style);\n      return isEmpty(themedStyle) ? '' : emotion(themedStyle);\n    })\n    .join(' ');\n};\n","import { css } from '@emotion/css';\n\nconst base = css({\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\n// Content\n// ---------------\nconst block = css({\n  display: 'block',\n});\n\nconst list = css({\n  // empty\n});\n\nconst table = css({\n  borderCollapse: 'collapse',\n  borderSpacing: 0,\n});\n\n// Typography\n// ---------------\nconst a = css({\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n});\n\nconst quote = css({\n  quotes: 'none',\n  selectors: {\n    '&:before, &:after': {\n      content: \"''\",\n    },\n  },\n});\n\n// Form Elements\n// ---------------\nconst button = css({\n  display: 'block',\n  appearance: 'none',\n  background: 'transparent',\n  textAlign: 'center',\n  touchAction: 'manipulation',\n});\n\nconst input = css({\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-clear': {\n      display: 'none',\n    },\n    '&::-webkit-search-cancel-button': {\n      WebkitAppearance: 'none',\n    },\n  },\n});\n\nconst select = css({\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-expand': {\n      display: 'none',\n    },\n  },\n});\n\nconst textarea = css({\n  display: 'block',\n  appearance: 'none',\n});\n\n// Reset\n// ---------------\nexport const reset = {\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  a,\n  base,\n  table,\n  select,\n  button,\n  textarea,\n  input,\n} as const;\n","import { ElementType } from 'react';\nimport { reset } from './reset';\nimport { CSSObject } from './types';\nimport { useClassname } from './useClassname';\n\nexport type UseStyleInput = {\n  element?: ElementType;\n  css?: Omit<CSSObject, 'variant' | 'element'> & {\n    variant?: never;\n    element?: never;\n  };\n  variant?: string | string[];\n  className?: string;\n};\n\n/**\n * Hook that can adds base styles, reset for certain elements, variants and custom styles\n */\nexport const useStyles = ({\n  element,\n  css: styles = {},\n  variant,\n  className = '',\n}: UseStyleInput) => {\n  /**\n   * Get reset styles. Base is always applied. An additional reset maybe applied\n   * based on the passed element.\n   *\n   * We check the passed className if it already includes the reset styles so no\n   * duplicates are applied.\n   */\n  const baseClassName = className.includes(reset.base) ? '' : reset.base;\n  const resetClassName =\n    typeof element === 'string'\n      ? className.includes((reset as { [key: string]: string })[element])\n        ? ''\n        : (reset as { [key: string]: string })[element]\n      : '';\n\n  /**\n   * Get variant styles (from theme).\n   */\n  const variants = Array.isArray(variant)\n    ? variant.map(v => ({ variant: v }))\n    : [{ variant }];\n  const variantsClassName = 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.\n   */\n  const customClassName = useClassname(styles);\n\n  return [\n    baseClassName,\n    resetClassName,\n    variantsClassName,\n    customClassName,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n};\n"],"names":["base","boxSizing","margin","padding","minWidth","fontSize","fontFamily","verticalAlign","WebkitTapHighlightColor","block","display","list","table","borderCollapse","borderSpacing","a","textDecoration","touchAction","quote","quotes","selectors","content","button","appearance","background","textAlign","input","WebkitAppearance","select","textarea","reset","article","aside","details","figcaption","figure","footer","header","hgroup","menu","nav","section","ul","ol","blockquote","q","isKnownElement","getNormalizedStyles","Context","createContext","useTheme","theme","useContext","css","useCallback","style","themeUi","ThemeProvider","children","React","Provider","value","isNotEmpty","val","Object","keys","length","constructor","baseStyles","Element","forwardRef","ref","as","styles","variant","props","variants","Array","isArray","map","v","jsx","filter","isEmpty","useClassname","themedStyle","emotion","join","font","useStyles","element","className","baseClassName","includes","resetClassName","variantsClassName","customClassName","Boolean"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG;AACXC,EAAAA,SAAS,EAAE,YADA;AAEXC,EAAAA,MAAM,EAAE,CAFG;AAGXC,EAAAA,OAAO,EAAE,CAHE;AAIXC,EAAAA,QAAQ,EAAE,CAJC;AAKXC,EAAAA,QAAQ,EAAE,MALC;AAMXC,EAAAA,UAAU,EAAE,SAND;AAOXC,EAAAA,aAAa,EAAE,UAPJ;AAQXC,EAAAA,uBAAuB,EAAE;AARd,CAAb;AAYA;;AACA,IAAMC,KAAK,GAAG;AACZC,EAAAA,OAAO,EAAE;AADG,CAAd;AAIA,IAAMC,IAAI,GAAG;AAAA,CAAb;AAIA,IAAMC,KAAK,GAAG;AACZC,EAAAA,cAAc,EAAE,UADJ;AAEZC,EAAAA,aAAa,EAAE;AAFH,CAAd;AAMA;;AACA,IAAMC,CAAC,GAAG;AACRC,EAAAA,cAAc,EAAE,MADR;AAERC,EAAAA,WAAW,EAAE;AAFL,CAAV;AAKA,IAAMC,KAAK,GAAG;AACZC,EAAAA,MAAM,EAAE,MADI;AAEZC,EAAAA,SAAS,EAAE;AACT,yBAAqB;AACnBC,MAAAA,OAAO,EAAE;AADU;AADZ;AAFC,CAAd;AAUA;;AACA,IAAMC,MAAM,GAAG;AACbZ,EAAAA,OAAO,EAAE,OADI;AAEba,EAAAA,UAAU,EAAE,MAFC;AAGbC,EAAAA,UAAU,EAAE,aAHC;AAIbC,EAAAA,SAAS,EAAE,QAJE;AAKbR,EAAAA,WAAW,EAAE;AALA,CAAf;AAQA,IAAMS,KAAK,GAAG;AACZhB,EAAAA,OAAO,EAAE,OADG;AAEZa,EAAAA,UAAU,EAAE,MAFA;AAGZH,EAAAA,SAAS,EAAE;AACT,oBAAgB;AACdV,MAAAA,OAAO,EAAE;AADK,KADP;AAIT,uCAAmC;AACjCiB,MAAAA,gBAAgB,EAAE;AADe;AAJ1B;AAHC,CAAd;AAaA,IAAMC,MAAM,GAAG;AACblB,EAAAA,OAAO,EAAE,OADI;AAEba,EAAAA,UAAU,EAAE,MAFC;AAGbH,EAAAA,SAAS,EAAE;AACT,qBAAiB;AACfV,MAAAA,OAAO,EAAE;AADM;AADR;AAHE,CAAf;AAUA,IAAMmB,QAAQ,GAAG;AACfnB,EAAAA,OAAO,EAAE,OADM;AAEfa,EAAAA,UAAU,EAAE;AAFG,CAAjB;AAMA;;AACA,IAAMO,KAAK,GAAG;AACZC,EAAAA,OAAO,EAAEtB,KADG;AAEZuB,EAAAA,KAAK,EAAEvB,KAFK;AAGZwB,EAAAA,OAAO,EAAExB,KAHG;AAIZyB,EAAAA,UAAU,EAAEzB,KAJA;AAKZ0B,EAAAA,MAAM,EAAE1B,KALI;AAMZ2B,EAAAA,MAAM,EAAE3B,KANI;AAOZ4B,EAAAA,MAAM,EAAE5B,KAPI;AAQZ6B,EAAAA,MAAM,EAAE7B,KARI;AASZ8B,EAAAA,IAAI,EAAE9B,KATM;AAUZ+B,EAAAA,GAAG,EAAE/B,KAVO;AAWZgC,EAAAA,OAAO,EAAEhC,KAXG;AAYZiC,EAAAA,EAAE,EAAE/B,IAZQ;AAaZgC,EAAAA,EAAE,EAAEhC,IAbQ;AAcZiC,EAAAA,UAAU,EAAE1B,KAdA;AAeZ2B,EAAAA,CAAC,EAAE3B,KAfS;AAgBZH,EAAAA,CAAC,EAADA,CAhBY;AAiBZf,EAAAA,IAAI,EAAJA,IAjBY;AAkBZY,EAAAA,KAAK,EAALA,KAlBY;AAmBZgB,EAAAA,MAAM,EAANA,MAnBY;AAoBZN,EAAAA,MAAM,EAANA,MApBY;AAqBZO,EAAAA,QAAQ,EAARA,QArBY;AAsBZH,EAAAA,KAAK,EAALA;AAtBY,CAAd;;AA0BA,IAAMoB,cAAc,GAAG,SAAjBA,cAAiB,CAACpB,KAAD;AAAA,SACrBA,KAAK,IAAII,KADY;AAAA,CAAvB;AAGA;;;;;AAGO,IAAMiB,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACrB,KAAD;AACjC;;;;AAIA,MAAI,OAAOA,KAAP,KAAiB,QAArB,EAA+B;AAC7B,WAAOI,KAAK,CAAC9B,IAAb;AACD;AAED;;;;;;AAIA,SAAO8C,cAAc,CAACpB,KAAD,CAAd,GAAwBI,KAAK,CAACJ,KAAD,CAA7B,GAAuC,EAA9C;AACD,CAdM;;AC9GP,IAAMsB,OAAO,gBAAGC,aAAa,CAAQ,EAAR,CAA7B;AAEA,IAAaC,QAAQ,GAAG,SAAXA,QAAW;AACtB,MAAMC,KAAK,GAAGC,UAAU,CAACJ,OAAD,CAAxB;AACA,MAAMK,KAAG,GAAGC,WAAW,CACrB,UAACC,KAAD;AAAA,WAAwBC,GAAO,CAACD,KAAD,CAAP,CAAeJ,KAAf,CAAxB;AAAA,GADqB,EAErB,CAACA,KAAD,CAFqB,CAAvB;AAIA,SAAO;AAAEA,IAAAA,KAAK,EAALA,KAAF;AAASE,IAAAA,GAAG,EAAHA;AAAT,GAAP;AACD,CAPM;AAUP,IAAaI,aAAa,GAAiC,SAA9CA,aAA8C;AAAA,MACzDN,KADyD,QACzDA,KADyD;AAAA,MAEzDO,QAFyD,QAEzDA,QAFyD;AAAA,SAGrDC,mBAAA,CAACX,OAAO,CAACY,QAAT;AAAkBC,IAAAA,KAAK,EAAEV;GAAzB,EAAiCO,QAAjC,CAHqD;AAAA,CAApD;;;AClBP,AAkBA;;;;AAGA,IAAMI,UAAU,GAAG,SAAbA,UAAa,CAACC,GAAD;AAAA,SACjB,EAAEA,GAAG,IAAIC,MAAM,CAACC,IAAP,CAAYF,GAAZ,EAAiBG,MAAjB,KAA4B,CAAnC,IAAwCH,GAAG,CAACI,WAAJ,KAAoBH,MAA9D,CADiB;AAAA,CAAnB;AAGA;;;;;AAGA,IAAMI,UAAU,gBAAGrB,mBAAmB,CAAC,MAAD,CAAtC;AAEA,IAAasB,OAAO,gBAClBC,UAAU,CACR,gBAAgEC,GAAhE;qBAAGC;MAAAA,0BAAK;sBAAOnB;MAAKoB,+BAAS;MAAIC,eAAAA;MAAShB,gBAAAA;MAAaiB;;AACrD,kBAAgBzB,QAAQ,EAAxB;AAAA,MAAQG,GAAR,aAAQA,GAAR;AAEA;;;;;AAGA,MAAMuB,QAAQ,GAAGC,KAAK,CAACC,OAAN,CAAcJ,OAAd,IACbA,OAAO,CAACK,GAAR,CAAY,UAAAC,CAAC;AAAA,WAAK;AAAEN,MAAAA,OAAO,EAAEM;AAAX,KAAL;AAAA,GAAb,CADa,GAEb,CAAC;AAAEN,IAAAA,OAAO,EAAPA;AAAF,GAAD,CAFJ;AAIA,SAAOO,GAAG,CACRT,EADQ,eAGHG,KAHG,EAIH;AACDtB,IAAAA,GAAG,EAAE,CACHe,UADG,EAEHrB,mBAAmB,CAACyB,EAAD,CAFhB,SAGAI,QAAQ,CAACG,GAAT,CAAa,UAAAC,CAAC;AAAA,aAAI3B,GAAG,CAAC2B,CAAD,CAAP;AAAA,KAAd,CAHA,GAIH3B,GAAG,CAACoB,MAAD,CAJA,GAKHS,MALG,CAKIpB,UALJ;AADJ,GAJG;AAYNS,IAAAA,GAAG,EAAHA;AAZM,MAcRb,QAdQ,CAAV;AAgBD,CA3BO,CADL;;ACxBP;;AACA,IAAMyB,OAAO,GAAG,SAAVA,OAAU,CAACpB,GAAD;AAAA,SACdA,GAAG,IAAIC,MAAM,CAACC,IAAP,CAAYF,GAAZ,EAAiBG,MAAjB,KAA4B,CAAnC,IAAwCH,GAAG,CAACI,WAAJ,KAAoBH,MAD9C;AAAA,CAAhB;;AAGA,IAAaoB,YAAY,GAAG,SAAfA,YAAe;AAC1B,kBAAgBlC,QAAQ,EAAxB;AAAA,MAAQG,GAAR,aAAQA,GAAR;;oCAD8BoB;AAAAA,IAAAA;;;AAE9B,SAAOA,MAAM,CACVM,GADI,CACA,UAAAxB,KAAK;AACR;;;;;AAKA,QAAM8B,WAAW,GAAGhC,GAAG,CAACE,KAAD,CAAvB;AACA,WAAO4B,OAAO,CAACE,WAAD,CAAP,GAAuB,EAAvB,GAA4BC,KAAO,CAACD,WAAD,CAA1C;AACD,GATI,EAUJE,IAVI,CAUC,GAVD,CAAP;AAWD,CAbM;;ACPP,IAAMvF,MAAI,gBAAGqD,KAAG,CAAC;AACfpD,EAAAA,SAAS,EAAE,YADI;AAEfC,EAAAA,MAAM,EAAE,CAFO;AAGfC,EAAAA,OAAO,EAAE,CAHM;AAIfC,EAAAA,QAAQ,EAAE,CAJK;AAKfC,EAAAA,QAAQ,EAAE,MALK;AAMfmF,EAAAA,IAAI,EAAE,SANS;AAOfjF,EAAAA,aAAa,EAAE,UAPA;AAQfC,EAAAA,uBAAuB,EAAE;AARV,CAAD,CAAhB;AAYA;;AACA,IAAMC,OAAK,gBAAG4C,KAAG,CAAC;AAChB3C,EAAAA,OAAO,EAAE;AADO,CAAD,CAAjB;AAIA,IAAMC,MAAI,gBAAG0C,KAAG,CAAC;AAAA,CAAD,CAAhB;AAIA,IAAMzC,OAAK,gBAAGyC,KAAG,CAAC;AAChBxC,EAAAA,cAAc,EAAE,UADA;AAEhBC,EAAAA,aAAa,EAAE;AAFC,CAAD,CAAjB;AAMA;;AACA,IAAMC,GAAC,gBAAGsC,KAAG,CAAC;AACZrC,EAAAA,cAAc,EAAE,MADJ;AAEZC,EAAAA,WAAW,EAAE;AAFD,CAAD,CAAb;AAKA,IAAMC,OAAK,gBAAGmC,KAAG,CAAC;AAChBlC,EAAAA,MAAM,EAAE,MADQ;AAEhBC,EAAAA,SAAS,EAAE;AACT,yBAAqB;AACnBC,MAAAA,OAAO,EAAE;AADU;AADZ;AAFK,CAAD,CAAjB;AAUA;;AACA,IAAMC,QAAM,gBAAG+B,KAAG,CAAC;AACjB3C,EAAAA,OAAO,EAAE,OADQ;AAEjBa,EAAAA,UAAU,EAAE,MAFK;AAGjBC,EAAAA,UAAU,EAAE,aAHK;AAIjBC,EAAAA,SAAS,EAAE,QAJM;AAKjBR,EAAAA,WAAW,EAAE;AALI,CAAD,CAAlB;AAQA,IAAMS,OAAK,gBAAG2B,KAAG,CAAC;AAChB3C,EAAAA,OAAO,EAAE,OADO;AAEhBa,EAAAA,UAAU,EAAE,MAFI;AAGhBH,EAAAA,SAAS,EAAE;AACT,oBAAgB;AACdV,MAAAA,OAAO,EAAE;AADK,KADP;AAIT,uCAAmC;AACjCiB,MAAAA,gBAAgB,EAAE;AADe;AAJ1B;AAHK,CAAD,CAAjB;AAaA,IAAMC,QAAM,gBAAGyB,KAAG,CAAC;AACjB3C,EAAAA,OAAO,EAAE,OADQ;AAEjBa,EAAAA,UAAU,EAAE,MAFK;AAGjBH,EAAAA,SAAS,EAAE;AACT,qBAAiB;AACfV,MAAAA,OAAO,EAAE;AADM;AADR;AAHM,CAAD,CAAlB;AAUA,IAAMmB,UAAQ,gBAAGwB,KAAG,CAAC;AACnB3C,EAAAA,OAAO,EAAE,OADU;AAEnBa,EAAAA,UAAU,EAAE;AAFO,CAAD,CAApB;AAMA;;AACA,AAAO,IAAMO,OAAK,GAAG;AACnBC,EAAAA,OAAO,EAAEtB,OADU;AAEnBuB,EAAAA,KAAK,EAAEvB,OAFY;AAGnBwB,EAAAA,OAAO,EAAExB,OAHU;AAInByB,EAAAA,UAAU,EAAEzB,OAJO;AAKnB0B,EAAAA,MAAM,EAAE1B,OALW;AAMnB2B,EAAAA,MAAM,EAAE3B,OANW;AAOnB4B,EAAAA,MAAM,EAAE5B,OAPW;AAQnB6B,EAAAA,MAAM,EAAE7B,OARW;AASnB8B,EAAAA,IAAI,EAAE9B,OATa;AAUnB+B,EAAAA,GAAG,EAAE/B,OAVc;AAWnBgC,EAAAA,OAAO,EAAEhC,OAXU;AAYnBiC,EAAAA,EAAE,EAAE/B,MAZe;AAanBgC,EAAAA,EAAE,EAAEhC,MAbe;AAcnBiC,EAAAA,UAAU,EAAE1B,OAdO;AAenB2B,EAAAA,CAAC,EAAE3B,OAfgB;AAgBnBH,EAAAA,CAAC,EAADA,GAhBmB;AAiBnBf,EAAAA,IAAI,EAAJA,MAjBmB;AAkBnBY,EAAAA,KAAK,EAALA,OAlBmB;AAmBnBgB,EAAAA,MAAM,EAANA,QAnBmB;AAoBnBN,EAAAA,MAAM,EAANA,QApBmB;AAqBnBO,EAAAA,QAAQ,EAARA,UArBmB;AAsBnBH,EAAAA,KAAK,EAALA;AAtBmB,CAAd;;ACrEP;;;;AAGA,IAAa+D,SAAS,GAAG,SAAZA,SAAY;MACvBC,eAAAA;sBACArC;MAAKoB,+BAAS;MACdC,eAAAA;4BACAiB;MAAAA,wCAAY;;AAEZ;;;;;;;AAOA,MAAMC,aAAa,GAAGD,SAAS,CAACE,QAAV,CAAmB/D,OAAK,CAAC9B,IAAzB,IAAiC,EAAjC,GAAsC8B,OAAK,CAAC9B,IAAlE;AACA,MAAM8F,cAAc,GAClB,OAAOJ,OAAP,KAAmB,QAAnB,GACIC,SAAS,CAACE,QAAV,CAAoB/D,OAAmC,CAAC4D,OAAD,CAAvD,IACE,EADF,GAEG5D,OAAmC,CAAC4D,OAAD,CAH1C,GAII,EALN;AAOA;;;;AAGA,MAAMd,QAAQ,GAAGC,KAAK,CAACC,OAAN,CAAcJ,OAAd,IACbA,OAAO,CAACK,GAAR,CAAY,UAAAC,CAAC;AAAA,WAAK;AAAEN,MAAAA,OAAO,EAAEM;AAAX,KAAL;AAAA,GAAb,CADa,GAEb,CAAC;AAAEN,IAAAA,OAAO,EAAPA;AAAF,GAAD,CAFJ;AAGA,MAAMqB,iBAAiB,GAAGX,YAAY,MAAZ,SAAgBR,QAAhB,CAA1B;AAEA;;;;;AAIA,MAAMoB,eAAe,GAAGZ,YAAY,CAACX,MAAD,CAApC;AAEA,SAAO,CACLmB,aADK,EAELE,cAFK,EAGLC,iBAHK,EAILC,eAJK,EAKLL,SALK,EAOJT,MAPI,CAOGe,OAPH,EAQJV,IARI,CAQC,GARD,CAAP;AASD,CA5CM;;;;"}

package/package.json

@@ -1,22 +1,21 @@
 {
   "name": "@marigold/system",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Marigold System Library",
   "main": "dist/index.js",
   "module": "dist/system.esm.js",
   "typings": "dist/index.d.ts",
   "license": "MIT",
   "dependencies": {
-    "@emotion/css": "11.1.3",
-    "@theme-ui/css": "0.10.1"
+    "@emotion/css": "11.5.0",
+    "@emotion/react": "11.5.0",
+    "@theme-ui/css": "0.12.0",
+    "csstype": "3.0.9"
   },
   "peerDependencies": {
     "react": "^16.x || ^17.0.0",
     "react-dom": "^16.x || ^17.0.0"
   },
-  "devDependencies": {
-    "csstype": "3.0.8"
-  },
   "scripts": {
     "build": "tsdx build --tsconfig tsconfig.build.json --transpileOnly",
     "watch": "tsdx watch --tsconfig tsconfig.build.json --transpileOnly"