@marigold/system 0.0.1 → 0.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"system.cjs.development.js","sources":["../src/categories.ts","../src/emotion.ts","../src/system.tsx","../src/Box/Box.tsx","../src/MarigoldProvider.tsx"],"sourcesContent":["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","import React from 'react';\n\n/**\n * Fix until the global JSX augmentation is not included in\n * `@emotion/core`. See https://github.com/emotion-js/emotion/issues/1257\n * for more information.\n *\n * *Why is this a problem?*\n *\n * (1) Every JSX element accepts a `css` prop, but we don't parse that.\n * (2) Every JSX element only accepts a type that is compatible with emotion's\n *     css prop, which we don't care, since we first pass the `css` prop\n *     to styled-system.\n *\n * *The fix consist of two parts:*\n *\n * (1) using `.yarnclean` to remove the `emotion/core` typings completly.\n * (2) having this sink file to re-apply the typings and tell TS to ignore\n *     the untyped import.\n */\nimport {\n  css as cssEmotion,\n  jsx as createElement,\n  Global as EmotionGlobal,\n  ThemeContext as EmotionContext,\n  // @ts-ignore\n} from '@emotion/core';\n\n// Emotion API\n// ---------------\nexport const jsx = createElement as typeof React.createElement;\nexport const css = cssEmotion as (\n  template: TemplateStringsArray,\n  ...args: any[]\n) => object;\nexport const ThemeContext = EmotionContext as React.Context<any>;\nexport const Global = EmotionGlobal as (\n  props: React.PropsWithChildren<{ styles: any }>\n) => React.ReactElement;\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","// @ts-ignore\nimport { css } from '@theme-ui/css';\nimport pick from 'lodash.pick';\nimport { SPACE_PROPS, SpacingProps } from '../categories';\nimport { jsx } from '../emotion';\nimport { system } from '../system';\n\nexport type BoxProps = {\n  css?: Object;\n  themeSection?: string;\n} & SpacingProps;\n\n/**\n * Props that we have to remove (because they are not valid HTML attributes)\n * and want to process (for styling the component).\n */\nconst SKIP_PROPS = ['css', 'variant', 'themeSection', ...SPACE_PROPS];\n\n/**\n * Gather styling related props (css, variant, space props, ...) and put them in a\n * single `css` prop for emotion. All gathered props will be passed to `@theme-ui/css`\n * before emotion will process them. This way CSS properties will interpolated based on\n * the given theme.\n */\nconst parseProps = (props: { [key: string]: any }) => {\n  const next: any = {};\n\n  // TODO: optimize loop such that the style props are picked\n  //       within the loop (and remove lodash.pick!)\n  for (let key in props) {\n    if (SKIP_PROPS.includes(key)) continue;\n    next[key] = props[key];\n  }\n\n  const styles = {\n    ...props.css,\n    ...pick(props, SPACE_PROPS),\n  };\n\n  const variant =\n    props.themeSection &&\n    props.variant &&\n    `${props.themeSection}.${props.variant}`;\n\n  next.css = (theme: any) => {\n    return [\n      { boxSizing: 'border-box', margin: 0, minWidth: 0 },\n      css(styles)(theme),\n      css({ variant })(theme),\n    ];\n  };\n\n  return next;\n};\n\nexport const Box = system<BoxProps, 'div'>(\n  ({ as = 'div', children, ...props }) => jsx(as, parseProps(props), children)\n);\n","import React from 'react';\nimport { Global, ThemeContext } from './emotion';\n\n/**\n * CSS snippet and idea from:\n * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/\n */\nconst ReduceMotion = () => (\n  <Global\n    styles={{\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  />\n);\n\n// TODO: change any to theme when theme component exists\nexport type MarigoldProviderProps<T extends any> = React.PropsWithChildren<{\n  theme: T;\n}>;\n\nexport const MarigoldProvider = <T extends any>({\n  theme,\n  children,\n}: MarigoldProviderProps<T>) => (\n  <ThemeContext.Provider value={theme}>\n    <>\n      <ReduceMotion />\n      {children}\n    </>\n  </ThemeContext.Provider>\n);\n"],"names":["SPACE_PROPS","jsx","createElement","ThemeContext","EmotionContext","Global","EmotionGlobal","system","render","forwardRef","props","ref","SKIP_PROPS","parseProps","next","key","includes","styles","css","pick","variant","themeSection","theme","boxSizing","margin","minWidth","Box","as","children","ReduceMotion","React","animationDuration","animationIterationCount","transitionDuration","MarigoldProvider","Provider","value"],"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";function r(r){return r&&"object"==typeof r&&"default"in r?r.default:r}var e=require("@theme-ui/css"),t=r(require("lodash.pick")),n=require("@emotion/core"),i=require("react"),a=r(i);function o(){return(o=Object.assign||function(r){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(r[n]=t[n])}return r}).apply(this,arguments)}var c=["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"],u=n.jsx,m=n.ThemeContext,s=n.Global;function d(r){return i.forwardRef((function(e,t){return r(o({},e,{ref:t}))}))}var p=["css","variant","themeSection"].concat(c),l=function(){return a.createElement(s,{styles:{"@media screen and (prefers-reduced-motion: reduce), (update: slow)":{"*":{animationDuration:"0.001ms !important",animationIterationCount:"1 !important",transitionDuration:"0.001ms !important"}}}})};exports.Box=d((function(r){var n=r.as,i=void 0===n?"div":n,a=r.children,m=function(r,e){if(null==r)return{};var t,n,i={},a=Object.keys(r);for(n=0;n<a.length;n++)e.indexOf(t=a[n])>=0||(i[t]=r[t]);return i}(r,["as","children"]);return u(i,function(r){var n={};for(var i in r)p.includes(i)||(n[i]=r[i]);var a=o({},r.css,{},t(r,c)),u=r.themeSection&&r.variant&&r.themeSection+"."+r.variant;return n.css=function(r){return[{boxSizing:"border-box",margin:0,minWidth:0},e.css(a)(r),e.css({variant:u})(r)]},n}(m),a)})),exports.MarigoldProvider=function(r){var e=r.children;return a.createElement(m.Provider,{value:r.theme},a.createElement(a.Fragment,null,a.createElement(l,null),e))},exports.SPACE_PROPS=c,exports.system=d;
+"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

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

@@ -1 +1 @@
-{"version":3,"file":"system.cjs.production.min.js","sources":["../src/categories.ts","../src/emotion.ts","../src/system.tsx","../src/Box/Box.tsx","../src/MarigoldProvider.tsx"],"sourcesContent":["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","import React from 'react';\n\n/**\n * Fix until the global JSX augmentation is not included in\n * `@emotion/core`. See https://github.com/emotion-js/emotion/issues/1257\n * for more information.\n *\n * *Why is this a problem?*\n *\n * (1) Every JSX element accepts a `css` prop, but we don't parse that.\n * (2) Every JSX element only accepts a type that is compatible with emotion's\n *     css prop, which we don't care, since we first pass the `css` prop\n *     to styled-system.\n *\n * *The fix consist of two parts:*\n *\n * (1) using `.yarnclean` to remove the `emotion/core` typings completly.\n * (2) having this sink file to re-apply the typings and tell TS to ignore\n *     the untyped import.\n */\nimport {\n  css as cssEmotion,\n  jsx as createElement,\n  Global as EmotionGlobal,\n  ThemeContext as EmotionContext,\n  // @ts-ignore\n} from '@emotion/core';\n\n// Emotion API\n// ---------------\nexport const jsx = createElement as typeof React.createElement;\nexport const css = cssEmotion as (\n  template: TemplateStringsArray,\n  ...args: any[]\n) => object;\nexport const ThemeContext = EmotionContext as React.Context<any>;\nexport const Global = EmotionGlobal as (\n  props: React.PropsWithChildren<{ styles: any }>\n) => React.ReactElement;\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","// @ts-ignore\nimport { css } from '@theme-ui/css';\nimport pick from 'lodash.pick';\nimport { SPACE_PROPS, SpacingProps } from '../categories';\nimport { jsx } from '../emotion';\nimport { system } from '../system';\n\nexport type BoxProps = {\n  css?: Object;\n  themeSection?: string;\n} & SpacingProps;\n\n/**\n * Props that we have to remove (because they are not valid HTML attributes)\n * and want to process (for styling the component).\n */\nconst SKIP_PROPS = ['css', 'variant', 'themeSection', ...SPACE_PROPS];\n\n/**\n * Gather styling related props (css, variant, space props, ...) and put them in a\n * single `css` prop for emotion. All gathered props will be passed to `@theme-ui/css`\n * before emotion will process them. This way CSS properties will interpolated based on\n * the given theme.\n */\nconst parseProps = (props: { [key: string]: any }) => {\n  const next: any = {};\n\n  // TODO: optimize loop such that the style props are picked\n  //       within the loop (and remove lodash.pick!)\n  for (let key in props) {\n    if (SKIP_PROPS.includes(key)) continue;\n    next[key] = props[key];\n  }\n\n  const styles = {\n    ...props.css,\n    ...pick(props, SPACE_PROPS),\n  };\n\n  const variant =\n    props.themeSection &&\n    props.variant &&\n    `${props.themeSection}.${props.variant}`;\n\n  next.css = (theme: any) => {\n    return [\n      { boxSizing: 'border-box', margin: 0, minWidth: 0 },\n      css(styles)(theme),\n      css({ variant })(theme),\n    ];\n  };\n\n  return next;\n};\n\nexport const Box = system<BoxProps, 'div'>(\n  ({ as = 'div', children, ...props }) => jsx(as, parseProps(props), children)\n);\n","import React from 'react';\nimport { Global, ThemeContext } from './emotion';\n\n/**\n * CSS snippet and idea from:\n * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/\n */\nconst ReduceMotion = () => (\n  <Global\n    styles={{\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  />\n);\n\n// TODO: change any to theme when theme component exists\nexport type MarigoldProviderProps<T extends any> = React.PropsWithChildren<{\n  theme: T;\n}>;\n\nexport const MarigoldProvider = <T extends any>({\n  theme,\n  children,\n}: MarigoldProviderProps<T>) => (\n  <ThemeContext.Provider value={theme}>\n    <>\n      <ReduceMotion />\n      {children}\n    </>\n  </ThemeContext.Provider>\n);\n"],"names":["SPACE_PROPS","jsx","createElement","ThemeContext","EmotionContext","Global","EmotionGlobal","system","render","forwardRef","props","ref","SKIP_PROPS","ReduceMotion","React","styles","animationDuration","animationIterationCount","transitionDuration","as","children","next","key","includes","css","pick","variant","themeSection","theme","boxSizing","margin","minWidth","parseProps","Provider","value"],"mappings":"sZAQaA,EAAc,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,YCNWC,EAAMC,MAKNC,EAAeC,eACfC,EAASC,kBCYNC,EACdC,UAEOC,cAAW,SAACC,EAAYC,UAC7BH,OAAYE,GAAOC,IAAAA,QCpCvB,IAAMC,GAAc,MAAO,UAAW,uBAAmBZ,GCTnDa,EAAe,kBACnBC,gBAACT,GACCU,OAAQ,sEACgE,KAC/D,CACHC,kBAAmB,qBACnBC,wBAAyB,eACzBC,mBAAoB,uCDyCXX,GACjB,oBAAGY,GAAAA,aAAK,QAAOC,IAAAA,SAAaV,iKAAYT,EAAIkB,EAhC3B,SAACT,OACZW,EAAY,OAIb,IAAIC,KAAOZ,EACVE,EAAWW,SAASD,KACxBD,EAAKC,GAAOZ,EAAMY,QAGdP,OACDL,EAAMc,OACNC,EAAKf,EAAOV,IAGX0B,EACJhB,EAAMiB,cACNjB,EAAMgB,SACHhB,EAAMiB,iBAAgBjB,EAAMgB,eAEjCL,EAAKG,IAAM,SAACI,SACH,CACL,CAAEC,UAAW,aAAcC,OAAQ,EAAGC,SAAU,GAChDP,MAAIT,EAAJS,CAAYI,GACZJ,MAAI,CAAEE,QAAAA,GAANF,CAAiBI,KAIdP,EAIyCW,CAAWtB,GAAQU,+BC9BrC,gBAE9BA,IAAAA,gBAEAN,gBAACX,EAAa8B,UAASC,QAHvBN,OAIEd,gCACEA,gBAACD,QACAO"}
+{"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,8 @@
+import { jsx } from '@emotion/react';
+import React, { useContext, useCallback, createContext, forwardRef } from 'react';
 import { css } from '@theme-ui/css';
-import pick from 'lodash.pick';
-import { jsx as jsx$1, ThemeContext as ThemeContext$1, Global as Global$1 } from '@emotion/core';
-import React, { forwardRef } from 'react';
+import { css as css$1 } from '@emotion/css';
+export { cache } from '@emotion/css';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -36,124 +37,354 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-/**
- * System categories are based on https://primer.style/components/docs/system-props
- */
-// Spacing
+var base = {
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  minWidth: 0,
+  fontSize: '100%',
+  fontFamily: 'inherit',
+  verticalAlign: 'baseline',
+  WebkitTapHighlightColor: 'transparent'
+}; // Content
 // ---------------
-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'];
 
-/**
- * Fix until the global JSX augmentation is not included in
- * `@emotion/core`. See https://github.com/emotion-js/emotion/issues/1257
- * for more information.
- *
- * *Why is this a problem?*
- *
- * (1) Every JSX element accepts a `css` prop, but we don't parse that.
- * (2) Every JSX element only accepts a type that is compatible with emotion's
- *     css prop, which we don't care, since we first pass the `css` prop
- *     to styled-system.
- *
- * *The fix consist of two parts:*
- *
- * (1) using `.yarnclean` to remove the `emotion/core` typings completly.
- * (2) having this sink file to re-apply the typings and tell TS to ignore
- *     the untyped import.
- */
+var block = {
+  display: 'block'
+};
+var list = {// empty
+};
+var table = {
+  borderCollapse: 'collapse',
+  borderSpacing: 0
+}; // Typography
 // ---------------
 
-var jsx = jsx$1;
-var ThemeContext = ThemeContext$1;
-var Global = Global$1;
-
-/**
- * Helper to write components that adhere to a common design system API,
- * which includes the `as` and `variant` prop.
- */
+var a = {
+  textDecoration: 'none',
+  touchAction: 'manipulation'
+};
+var quote = {
+  quotes: 'none',
+  selectors: {
+    '&:before, &:after': {
+      content: "''"
+    }
+  }
+}; // Form Elements
+// ---------------
 
-function system(render) {
-  return forwardRef(function (props, ref) {
-    return render(_extends({}, props, {
-      ref: ref
-    }));
-  });
-}
+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
+// ---------------
 
-/**
- * Props that we have to remove (because they are not valid HTML attributes)
- * and want to process (for styling the component).
- */
+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 SKIP_PROPS = /*#__PURE__*/['css', 'variant', 'themeSection'].concat(SPACE_PROPS);
+var isKnownElement = function isKnownElement(input) {
+  return input in reset;
+};
 /**
- * Gather styling related props (css, variant, space props, ...) and put them in a
- * single `css` prop for emotion. All gathered props will be passed to `@theme-ui/css`
- * before emotion will process them. This way CSS properties will interpolated based on
- * the given theme.
+ * Helper to conveniently get reset styles.
  */
 
-var parseProps = function parseProps(props) {
-  var next = {}; // TODO: optimize loop such that the style props are picked
-  //       within the loop (and remove lodash.pick!)
 
-  for (var key in props) {
-    if (SKIP_PROPS.includes(key)) continue;
-    next[key] = props[key];
+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.
+   */
 
-  var styles = _extends({}, props.css, {}, pick(props, SPACE_PROPS));
 
-  var variant = props.themeSection && props.variant && props.themeSection + "." + props.variant;
+  return isKnownElement(input) ? reset[input] : {};
+};
 
-  next.css = function (theme) {
-    return [{
-      boxSizing: 'border-box',
-      margin: 0,
-      minWidth: 0
-    }, css(styles)(theme), css({
-      variant: variant
-    })(theme)];
+var Context = /*#__PURE__*/createContext({});
+var useTheme = function useTheme() {
+  var theme = useContext(Context);
+  var css$1 = useCallback(function (style) {
+    return css(style)(theme);
+  }, [theme]);
+  return {
+    theme: theme,
+    css: css$1
   };
+};
+var ThemeProvider = function ThemeProvider(_ref) {
+  var theme = _ref.theme,
+      children = _ref.children;
+  return React.createElement(Context.Provider, {
+    value: theme
+  }, children);
+};
+
+var _excluded = ["as", "css", "variant", "children"];
+/**
+ * Function expression to check if there is any falsy value or empty object
+ */
 
-  return next;
+var isNotEmpty = function isNotEmpty(val) {
+  return !(val && Object.keys(val).length === 0 && val.constructor === Object);
 };
+/**
+ * Get the normalized base styles
+ */
+
 
-var Box = /*#__PURE__*/system(function (_ref) {
+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, ["as", "children"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _useTheme = useTheme(),
+      css = _useTheme.css;
+  /**
+   * Transform variant input for `@theme-ui/css`
+   */
+
 
-  return jsx(as, parseProps(props), children);
+  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);
 });
 
-/**
- * CSS snippet and idea from:
- * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
- */
+// lodash.isEmpty is tooo much KBs!
 
-var ReduceMotion = function ReduceMotion() {
-  return React.createElement(Global, {
-    styles: {
-      '@media screen and (prefers-reduced-motion: reduce), (update: slow)': {
-        '*': {
-          animationDuration: '0.001ms !important',
-          animationIterationCount: '1 !important',
-          transitionDuration: '0.001ms !important'
-        }
-      }
+var isEmpty = function isEmpty(val) {
+  return val && Object.keys(val).length === 0 && val.constructor === Object;
+};
+
+var useClassname = function useClassname() {
+  var _useTheme = useTheme(),
+      css = _useTheme.css;
+
+  for (var _len = arguments.length, styles = new Array(_len), _key = 0; _key < _len; _key++) {
+    styles[_key] = arguments[_key];
+  }
+
+  return styles.map(function (style) {
+    /**
+     * emotion will create a `css-0` class whenever an empty object is
+     * passed. Since this makes debugging harder we'll do not pass empty
+     * objects to emotion.
+     */
+    var themedStyle = css(style);
+    return isEmpty(themedStyle) ? '' : css$1(themedStyle);
+  }).join(' ');
+};
+
+var base$1 = /*#__PURE__*/css$1({
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  minWidth: 0,
+  fontSize: '100%',
+  font: 'inherit',
+  verticalAlign: 'baseline',
+  WebkitTapHighlightColor: 'transparent'
+}); // Content
+// ---------------
+
+var block$1 = /*#__PURE__*/css$1({
+  display: 'block'
+});
+var list$1 = /*#__PURE__*/css$1({// empty
+});
+var table$1 = /*#__PURE__*/css$1({
+  borderCollapse: 'collapse',
+  borderSpacing: 0
+}); // Typography
+// ---------------
+
+var a$1 = /*#__PURE__*/css$1({
+  textDecoration: 'none',
+  touchAction: 'manipulation'
+});
+var quote$1 = /*#__PURE__*/css$1({
+  quotes: 'none',
+  selectors: {
+    '&:before, &:after': {
+      content: "''"
     }
-  });
+  }
+}); // Form Elements
+// ---------------
+
+var button$1 = /*#__PURE__*/css$1({
+  display: 'block',
+  appearance: 'none',
+  background: 'transparent',
+  textAlign: 'center',
+  touchAction: 'manipulation'
+});
+var input$1 = /*#__PURE__*/css$1({
+  display: 'block',
+  appearance: 'none',
+  selectors: {
+    '&::-ms-clear': {
+      display: 'none'
+    },
+    '&::-webkit-search-cancel-button': {
+      WebkitAppearance: 'none'
+    }
+  }
+});
+var select$1 = /*#__PURE__*/css$1({
+  display: 'block',
+  appearance: 'none',
+  selectors: {
+    '&::-ms-expand': {
+      display: 'none'
+    }
+  }
+});
+var textarea$1 = /*#__PURE__*/css$1({
+  display: 'block',
+  appearance: 'none'
+}); // Reset
+// ---------------
+
+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
 };
 
-var MarigoldProvider = function MarigoldProvider(_ref) {
-  var theme = _ref.theme,
-      children = _ref.children;
-  return React.createElement(ThemeContext.Provider, {
-    value: theme
-  }, React.createElement(React.Fragment, null, React.createElement(ReduceMotion, null), children));
+/**
+ * Hook that can adds base styles, reset for certain elements, variants and custom styles
+ */
+
+var useStyles = function useStyles(_ref) {
+  var element = _ref.element,
+      _ref$css = _ref.css,
+      styles = _ref$css === void 0 ? {} : _ref$css,
+      variant = _ref.variant,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className;
+
+  /**
+   * Get reset styles. Base is always applied. An additional reset maybe applied
+   * based on the passed element.
+   *
+   * We check the passed className if it already includes the reset styles so no
+   * duplicates are applied.
+   */
+  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).
+   */
+
+  var variants = Array.isArray(variant) ? variant.map(function (v) {
+    return {
+      variant: v
+    };
+  }) : [{
+    variant: variant
+  }];
+  var variantsClassName = useClassname.apply(void 0, variants);
+  /**
+   * Custom styles are applied "on runtime". They are usually controlled via component
+   * props and can change between component instances.
+   */
+
+  var customClassName = useClassname(styles);
+  return [baseClassName, resetClassName, variantsClassName, customClassName, className].filter(Boolean).join(' ');
 };
 
-export { Box, MarigoldProvider, SPACE_PROPS, system };
+export { Element, ThemeProvider, useClassname, useStyles, useTheme };
 //# sourceMappingURL=system.esm.js.map