@marigold/system 0.1.0 → 0.2.0

package/dist/Element.d.ts

@@ -0,0 +1,8 @@
+import { PolymorphicPropsWithRef, PolymorphicComponentWithRef } from '@marigold/types';
+import { CSSObject } from './types';
+export declare type ElementOwnProps = {
+    css?: CSSObject;
+    variant?: string | string[];
+};
+export declare type ElementProps = PolymorphicPropsWithRef<ElementOwnProps, 'div'>;
+export declare const Element: PolymorphicComponentWithRef<ElementOwnProps, 'div'>;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './Element';
 export * from './cache';
 export * from './types';
 export * from './useClassname';

package/dist/normalize.d.ts

@@ -0,0 +1,110 @@
+/// <reference types="react" />
+declare const reset: {
+    readonly article: {
+        readonly display: "block";
+    };
+    readonly aside: {
+        readonly display: "block";
+    };
+    readonly details: {
+        readonly display: "block";
+    };
+    readonly figcaption: {
+        readonly display: "block";
+    };
+    readonly figure: {
+        readonly display: "block";
+    };
+    readonly footer: {
+        readonly display: "block";
+    };
+    readonly header: {
+        readonly display: "block";
+    };
+    readonly hgroup: {
+        readonly display: "block";
+    };
+    readonly menu: {
+        readonly display: "block";
+    };
+    readonly nav: {
+        readonly display: "block";
+    };
+    readonly section: {
+        readonly display: "block";
+    };
+    readonly ul: {};
+    readonly ol: {};
+    readonly blockquote: {
+        readonly quotes: "none";
+        readonly selectors: {
+            readonly '&:before, &:after': {
+                readonly content: "''";
+            };
+        };
+    };
+    readonly q: {
+        readonly quotes: "none";
+        readonly selectors: {
+            readonly '&:before, &:after': {
+                readonly content: "''";
+            };
+        };
+    };
+    readonly a: {
+        readonly textDecoration: "none";
+        readonly touchAction: "manipulation";
+    };
+    readonly base: {
+        readonly boxSizing: "border-box";
+        readonly margin: 0;
+        readonly padding: 0;
+        readonly minWidth: 0;
+        readonly fontSize: "100%";
+        readonly fontFamily: "inherit";
+        readonly verticalAlign: "baseline";
+        readonly WebkitTapHighlightColor: "transparent";
+    };
+    readonly table: {
+        readonly borderCollapse: "collapse";
+        readonly borderSpacing: 0;
+    };
+    readonly select: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly selectors: {
+            readonly '&::-ms-expand': {
+                readonly display: "none";
+            };
+        };
+    };
+    readonly button: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly background: "transparent";
+        readonly textAlign: "center";
+        readonly touchAction: "manipulation";
+    };
+    readonly textarea: {
+        readonly display: "block";
+        readonly appearance: "none";
+    };
+    readonly input: {
+        readonly display: "block";
+        readonly appearance: "none";
+        readonly selectors: {
+            readonly '&::-ms-clear': {
+                readonly display: "none";
+            };
+            readonly '&::-webkit-search-cancel-button': {
+                readonly WebkitAppearance: "none";
+            };
+        };
+    };
+};
+export declare type NormalizedElement = keyof typeof reset;
+/**
+ * Helper to conveniently get reset styles.
+ */
+export declare const getNormalizedStyles: (input?: "symbol" | "object" | "article" | "aside" | "details" | "figcaption" | "figure" | "footer" | "header" | "hgroup" | "menu" | "nav" | "section" | "ul" | "ol" | "blockquote" | "q" | "a" | "base" | "table" | "select" | "button" | "textarea" | "input" | "abbr" | "address" | "area" | "audio" | "b" | "bdi" | "bdo" | "big" | "body" | "br" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "hr" | "html" | "i" | "iframe" | "img" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menuitem" | "meta" | "meter" | "noindex" | "noscript" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined) => object;
+export {};

package/dist/system.cjs.development.js

@@ -2,20 +2,175 @@
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var css = require('@emotion/css');
+var react = require('@emotion/react');
 var React = require('react');
 var React__default = _interopDefault(React);
-var css$1 = require('@theme-ui/css');
+var css = require('@theme-ui/css');
+var css$1 = require('@emotion/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__*/React.createContext({});
 var useTheme = function useTheme() {
   var theme = React.useContext(Context);
-  var css = React.useCallback(function (style) {
-    return css$1.css(style)(theme);
+  var css$1 = React.useCallback(function (style) {
+    return css.css(style)(theme);
   }, [theme]);
   return {
     theme: theme,
-    css: css
+    css: css$1
   };
 };
 var ThemeProvider = function ThemeProvider(_ref) {
@@ -26,6 +181,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__*/React.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 react.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) {
@@ -34,7 +235,7 @@ var isEmpty = function isEmpty(val) {
 
 var useClassname = function useClassname() {
   var _useTheme = useTheme(),
-      css$1 = _useTheme.css;
+      css = _useTheme.css;
 
   for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
     styles[_key] = arguments[_key];
@@ -46,12 +247,12 @@ var useClassname = function useClassname() {
      * passed. Since this makes debugging harder we'll do not pass empty
      * objects to emotion.
      */
-    var themedStyle = css$1(style);
-    return isEmpty(themedStyle) ? '' : css.css(themedStyle);
+    var themedStyle = css(style);
+    return isEmpty(themedStyle) ? '' : css$1.css(themedStyle);
   }).join(' ');
 };
 
-var base = /*#__PURE__*/css.css({
+var base$1 = /*#__PURE__*/css$1.css({
   boxSizing: 'border-box',
   margin: 0,
   padding: 0,
@@ -63,23 +264,22 @@ var base = /*#__PURE__*/css.css({
 }); // Content
 // ---------------
 
-var block = /*#__PURE__*/css.css({
+var block$1 = /*#__PURE__*/css$1.css({
   display: 'block'
 });
-var list = /*#__PURE__*/css.css({
-  listStyle: 'none'
+var list$1 = /*#__PURE__*/css$1.css({// empty
 });
-var table = /*#__PURE__*/css.css({
+var table$1 = /*#__PURE__*/css$1.css({
   borderCollapse: 'collapse',
   borderSpacing: 0
 }); // Typography
 // ---------------
 
-var a = /*#__PURE__*/css.css({
+var a$1 = /*#__PURE__*/css$1.css({
   textDecoration: 'none',
   touchAction: 'manipulation'
 });
-var quote = /*#__PURE__*/css.css({
+var quote$1 = /*#__PURE__*/css$1.css({
   quotes: 'none',
   selectors: {
     '&:before, &:after': {
@@ -89,14 +289,14 @@ var quote = /*#__PURE__*/css.css({
 }); // Form Elements
 // ---------------
 
-var button = /*#__PURE__*/css.css({
+var button$1 = /*#__PURE__*/css$1.css({
   display: 'block',
   appearance: 'none',
   background: 'transparent',
   textAlign: 'center',
   touchAction: 'manipulation'
 });
-var input = /*#__PURE__*/css.css({
+var input$1 = /*#__PURE__*/css$1.css({
   display: 'block',
   appearance: 'none',
   selectors: {
@@ -108,7 +308,7 @@ var input = /*#__PURE__*/css.css({
     }
   }
 });
-var select = /*#__PURE__*/css.css({
+var select$1 = /*#__PURE__*/css$1.css({
   display: 'block',
   appearance: 'none',
   selectors: {
@@ -117,35 +317,35 @@ var select = /*#__PURE__*/css.css({
     }
   }
 });
-var textarea = /*#__PURE__*/css.css({
+var textarea$1 = /*#__PURE__*/css$1.css({
   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
 };
 
 /**
@@ -167,8 +367,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).
    */
@@ -193,9 +393,10 @@ var useStyles = function useStyles(_ref) {
 Object.defineProperty(exports, 'cache', {
   enumerable: true,
   get: function () {
-    return css.cache;
+    return css$1.cache;
   }
 });
+exports.Element = Element;
 exports.ThemeProvider = ThemeProvider;
 exports.useClassname = useClassname;
 exports.useStyles = useStyles;

package/dist/system.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"system.cjs.development.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.cjs.development.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":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e,n=require("@emotion/css"),t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("@theme-ui/css"),s=t.createContext({}),o=function(){var e=t.useContext(s),n=t.useCallback((function(n){return a.css(n)(e)}),[e]);return{theme:e,css:n}},c=function(e){return e&&0===Object.keys(e).length&&e.constructor===Object},i=function(){for(var e=o(),t=e.css,r=arguments.length,a=new Array(r),s=0;s<r;s++)a[s]=arguments[s];return a.map((function(e){var r=t(e);return c(r)?"":n.css(r)})).join(" ")},l=n.css({boxSizing:"border-box",margin:0,padding:0,minWidth:0,fontSize:"100%",font:"inherit",verticalAlign:"baseline",WebkitTapHighlightColor:"transparent"}),u=n.css({display:"block"}),p=n.css({listStyle:"none"}),b=n.css({borderCollapse:"collapse",borderSpacing:0}),d=n.css({textDecoration:"none",touchAction:"manipulation"}),f=n.css({quotes:"none",selectors:{"&:before, &:after":{content:"''"}}}),m=n.css({display:"block",appearance:"none",background:"transparent",textAlign:"center",touchAction:"manipulation"}),h=n.css({display:"block",appearance:"none",selectors:{"&::-ms-clear":{display:"none"},"&::-webkit-search-cancel-button":{WebkitAppearance:"none"}}}),y={article:u,aside:u,details:u,figcaption:u,figure:u,footer:u,header:u,hgroup:u,menu:u,nav:u,section:u,ul:p,ol:p,blockquote:f,q:f,a:d,base:l,table:b,select:n.css({display:"block",appearance:"none",selectors:{"&::-ms-expand":{display:"none"}}}),button:m,textarea:n.css({display:"block",appearance:"none"}),input:h};Object.defineProperty(exports,"cache",{enumerable:!0,get:function(){return n.cache}}),exports.ThemeProvider=function(e){return r.createElement(s.Provider,{value:e.theme},e.children)},exports.useClassname=i,exports.useStyles=function(e){var n=e.element,t=e.css,r=void 0===t?{}:t,a=e.variant,s=e.className,o=void 0===s?"":s,c=o.includes(y.base)?"":y.base,l="string"==typeof n?o.includes(y[n])?"":y[n]:"",u=Array.isArray(a)?a.map((function(e){return{variant:e}})):[{variant:a}];return[c,l,i.apply(void 0,u),i(r),o].filter(Boolean).join(" ")},exports.useTheme=o;
+"use strict";var e,n=require("@emotion/react"),t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("@theme-ui/css"),o=require("@emotion/css");function i(){return(i=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 c={display:"block"},s={},l={quotes:"none",selectors:{"&:before, &:after":{content:"''"}}},u={article:c,aside:c,details:c,figcaption:c,figure:c,footer:c,header:c,hgroup:c,menu:c,nav:c,section:c,ul:s,ol:s,blockquote:l,q:l,a:{textDecoration:"none",touchAction:"manipulation"},base:{boxSizing:"border-box",margin:0,padding:0,minWidth:0,fontSize:"100%",fontFamily:"inherit",verticalAlign:"baseline",WebkitTapHighlightColor:"transparent"},table:{borderCollapse:"collapse",borderSpacing:0},select:{display:"block",appearance:"none",selectors:{"&::-ms-expand":{display:"none"}}},button:{display:"block",appearance:"none",background:"transparent",textAlign:"center",touchAction:"manipulation"},textarea:{display:"block",appearance:"none"},input:{display:"block",appearance:"none",selectors:{"&::-ms-clear":{display:"none"},"&::-webkit-search-cancel-button":{WebkitAppearance:"none"}}}},p=function(e){return"string"!=typeof e?u.base:function(e){return e in u}(e)?u[e]:{}},b=t.createContext({}),d=function(){var e=t.useContext(b),n=t.useCallback((function(n){return a.css(n)(e)}),[e]);return{theme:e,css:n}},f=["as","css","variant","children"],h=function(e){return!(e&&0===Object.keys(e).length&&e.constructor===Object)},g=p("base"),m=t.forwardRef((function(e,t){var r=e.as,a=void 0===r?"div":r,o=e.css,c=void 0===o?{}:o,s=e.variant,l=e.children,u=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,f),b=d().css,m=Array.isArray(s)?s.map((function(e){return{variant:e}})):[{variant:s}];return n.jsx(a,i({},u,{css:[g,p(a)].concat(m.map((function(e){return b(e)})),[b(c)]).filter(h)},{ref:t}),l)})),y=function(e){return e&&0===Object.keys(e).length&&e.constructor===Object},v=function(){for(var e=d(),n=e.css,t=arguments.length,r=new Array(t),a=0;a<t;a++)r[a]=arguments[a];return r.map((function(e){var t=n(e);return y(t)?"":o.css(t)})).join(" ")},k=o.css({boxSizing:"border-box",margin:0,padding:0,minWidth:0,fontSize:"100%",font:"inherit",verticalAlign:"baseline",WebkitTapHighlightColor:"transparent"}),x=o.css({display:"block"}),A=o.css({}),j=o.css({borderCollapse:"collapse",borderSpacing:0}),q=o.css({textDecoration:"none",touchAction:"manipulation"}),O=o.css({quotes:"none",selectors:{"&:before, &:after":{content:"''"}}}),C=o.css({display:"block",appearance:"none",background:"transparent",textAlign:"center",touchAction:"manipulation"}),S=o.css({display:"block",appearance:"none",selectors:{"&::-ms-clear":{display:"none"},"&::-webkit-search-cancel-button":{WebkitAppearance:"none"}}}),W={article:x,aside:x,details:x,figcaption:x,figure:x,footer:x,header:x,hgroup:x,menu:x,nav:x,section:x,ul:A,ol:A,blockquote:O,q:O,a:q,base:k,table:j,select:o.css({display:"block",appearance:"none",selectors:{"&::-ms-expand":{display:"none"}}}),button:C,textarea:o.css({display:"block",appearance:"none"}),input:S};Object.defineProperty(exports,"cache",{enumerable:!0,get:function(){return o.cache}}),exports.Element=m,exports.ThemeProvider=function(e){return r.createElement(b.Provider,{value:e.theme},e.children)},exports.useClassname=v,exports.useStyles=function(e){var n=e.element,t=e.css,r=void 0===t?{}:t,a=e.variant,o=e.className,i=void 0===o?"":o,c=i.includes(W.base)?"":W.base,s="string"==typeof n?i.includes(W[n])?"":W[n]:"",l=Array.isArray(a)?a.map((function(e){return{variant:e}})):[{variant:a}];return[c,s,v.apply(void 0,l),v(r),i].filter(Boolean).join(" ")},exports.useTheme=d;
 //# sourceMappingURL=system.cjs.production.min.js.map