@marigold/system 0.0.1 → 0.2.0

package/dist/system.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"system.esm.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;;;AAIA;AACA;IACaA,WAAW,GAAG,CACzB,GADyB,EAEzB,QAFyB,EAGzB,IAHyB,EAIzB,WAJyB,EAKzB,IALyB,EAMzB,aANyB,EAOzB,IAPyB,EAQzB,cARyB,EASzB,IATyB,EAUzB,YAVyB,EAWzB,IAXyB,EAYzB,SAZyB,EAazB,IAbyB,EAczB,SAdyB,EAezB,GAfyB,EAgBzB,SAhByB,EAiBzB,IAjByB,EAkBzB,YAlByB,EAmBzB,IAnByB,EAoBzB,cApByB,EAqBzB,IArByB,EAsBzB,eAtByB,EAuBzB,IAvByB,EAwBzB,aAxByB,EAyBzB,IAzByB,EA0BzB,UA1ByB,EA2BzB,IA3ByB,EA4BzB,UA5ByB;;ACN3B;;;;;;;;;;;;;;;;;;AAkBA,AASA;;AACA,AAAO,IAAMC,GAAG,GAAGC,KAAZ;AACP,AAIO,IAAMC,YAAY,GAAGC,cAArB;AACP,AAAO,IAAMC,MAAM,GAAGC,QAAf;;ACQP;;;;;AAIA,SAAgBC,OACdC;AAEA,SAAOC,UAAU,CAAC,UAACC,KAAD,EAAaC,GAAb;AAAA,WAChBH,MAAM,cAAME,KAAN;AAAaC,MAAAA,GAAG,EAAHA;AAAb,OADU;AAAA,GAAD,CAAjB;AAGD;;AC1CD;;;;;AAIA,IAAMC,UAAU,iBAAI,KAAJ,EAAW,SAAX,EAAsB,cAAtB,SAAyCZ,WAAzC,CAAhB;AAEA;;;;;;;AAMA,IAAMa,UAAU,GAAG,SAAbA,UAAa,CAACH,KAAD;AACjB,MAAMI,IAAI,GAAQ,EAAlB;AAGA;;AACA,OAAK,IAAIC,GAAT,IAAgBL,KAAhB,EAAuB;AACrB,QAAIE,UAAU,CAACI,QAAX,CAAoBD,GAApB,CAAJ,EAA8B;AAC9BD,IAAAA,IAAI,CAACC,GAAD,CAAJ,GAAYL,KAAK,CAACK,GAAD,CAAjB;AACD;;AAED,MAAME,MAAM,gBACPP,KAAK,CAACQ,GADC,MAEPC,IAAI,CAACT,KAAD,EAAQV,WAAR,CAFG,CAAZ;;AAKA,MAAMoB,OAAO,GACXV,KAAK,CAACW,YAAN,IACAX,KAAK,CAACU,OADN,IAEGV,KAAK,CAACW,YAFT,SAEyBX,KAAK,CAACU,OAHjC;;AAKAN,EAAAA,IAAI,CAACI,GAAL,GAAW,UAACI,KAAD;AACT,WAAO,CACL;AAAEC,MAAAA,SAAS,EAAE,YAAb;AAA2BC,MAAAA,MAAM,EAAE,CAAnC;AAAsCC,MAAAA,QAAQ,EAAE;AAAhD,KADK,EAELP,GAAG,CAACD,MAAD,CAAH,CAAYK,KAAZ,CAFK,EAGLJ,GAAG,CAAC;AAAEE,MAAAA,OAAO,EAAPA;AAAF,KAAD,CAAH,CAAiBE,KAAjB,CAHK,CAAP;AAKD,GAND;;AAQA,SAAOR,IAAP;AACD,CA7BD;;AA+BA,IAAaY,GAAG,gBAAGnB,MAAM,CACvB;AAAA,qBAAGoB,EAAH;AAAA,MAAGA,EAAH,wBAAQ,KAAR;AAAA,MAAeC,QAAf,QAAeA,QAAf;AAAA,MAA4BlB,KAA5B;;AAAA,SAAwCT,GAAG,CAAC0B,EAAD,EAAKd,UAAU,CAACH,KAAD,CAAf,EAAwBkB,QAAxB,CAA3C;AAAA,CADuB,CAAlB;;ACpDP;;;;;AAIA,IAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,SACnBC,mBAAA,CAACzB,MAAD;AACEY,IAAAA,MAAM,EAAE;AACN,4EAAsE;AACpE,aAAK;AACHc,UAAAA,iBAAiB,EAAE,oBADhB;AAEHC,UAAAA,uBAAuB,EAAE,cAFtB;AAGHC,UAAAA,kBAAkB,EAAE;AAHjB;AAD+D;AADhE;GADV,CADmB;AAAA,CAArB;;AAmBA,IAAaC,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAC9BZ,KAD8B,QAC9BA,KAD8B;AAAA,MAE9BM,QAF8B,QAE9BA,QAF8B;AAAA,SAI9BE,mBAAA,CAAC3B,YAAY,CAACgC,QAAd;AAAuBC,IAAAA,KAAK,EAAEd;GAA9B,EACEQ,mBAAA,eAAA,MAAA,EACEA,mBAAA,CAACD,YAAD,MAAA,CADF,EAEGD,QAFH,CADF,CAJ8B;AAAA,CAAzB;;;;"}
+{"version":3,"file":"system.esm.js","sources":["../src/normalize.ts","../src/useTheme.tsx","../src/Element.tsx","../src/useClassname.ts","../src/reset.ts","../src/useStyles.ts"],"sourcesContent":["import { ElementType } from 'react';\n\nconst base = {\n  boxSizing: 'border-box',\n  margin: 0,\n  padding: 0,\n  minWidth: 0,\n  fontSize: '100%',\n  fontFamily: 'inherit',\n  verticalAlign: 'baseline',\n  WebkitTapHighlightColor: 'transparent',\n} as const;\n\n// Content\n// ---------------\nconst block = {\n  display: 'block',\n} as const;\n\nconst list = {\n  // empty\n} as const;\n\nconst table = {\n  borderCollapse: 'collapse',\n  borderSpacing: 0,\n} as const;\n\n// Typography\n// ---------------\nconst a = {\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n} as const;\n\nconst quote = {\n  quotes: 'none',\n  selectors: {\n    '&:before, &:after': {\n      content: \"''\",\n    },\n  },\n} as const;\n\n// Form Elements\n// ---------------\nconst button = {\n  display: 'block',\n  appearance: 'none',\n  background: 'transparent',\n  textAlign: 'center',\n  touchAction: 'manipulation',\n} as const;\n\nconst input = {\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-clear': {\n      display: 'none',\n    },\n    '&::-webkit-search-cancel-button': {\n      WebkitAppearance: 'none',\n    },\n  },\n} as const;\n\nconst select = {\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-expand': {\n      display: 'none',\n    },\n  },\n} as const;\n\nconst textarea = {\n  display: 'block',\n  appearance: 'none',\n} as const;\n\n// Reset\n// ---------------\nconst reset = {\n  article: block,\n  aside: block,\n  details: block,\n  figcaption: block,\n  figure: block,\n  footer: block,\n  header: block,\n  hgroup: block,\n  menu: block,\n  nav: block,\n  section: block,\n  ul: list,\n  ol: list,\n  blockquote: quote,\n  q: quote,\n  a,\n  base,\n  table,\n  select,\n  button,\n  textarea,\n  input,\n} as const;\n\nexport type NormalizedElement = keyof typeof reset;\nconst isKnownElement = (input: string): input is NormalizedElement =>\n  input in reset;\n\n/**\n * Helper to conveniently get reset styles.\n */\nexport const getNormalizedStyles = (input?: ElementType): object => {\n  /**\n   * If a React component is given, we don't apply any reset styles\n   * and return the base reset.\n   */\n  if (typeof input !== 'string') {\n    return reset.base;\n  }\n\n  /**\n   * Try to find the reset style for a HTML element. If the element\n   * is not included return empty styles.\n   */\n  return isKnownElement(input) ? reset[input] : {};\n};\n","import React, { createContext, useCallback, useContext } from 'react';\nimport { css as themeUi } from '@theme-ui/css';\nimport { Theme } from '@marigold/system';\n\nimport { StyleObject } from './types';\n\nconst Context = createContext<Theme>({});\n\nexport const useTheme = () => {\n  const theme = useContext(Context);\n  const css = useCallback(\n    (style: StyleObject) => themeUi(style)(theme),\n    [theme]\n  );\n  return { theme, css };\n};\n\nexport type ThemeProviderProps = { theme: any };\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n  theme,\n  children,\n}) => <Context.Provider value={theme}>{children}</Context.Provider>;\n","import { jsx } from '@emotion/react';\nimport { forwardRef } from 'react';\nimport {\n  PolymorphicPropsWithRef,\n  PolymorphicComponentWithRef,\n} from '@marigold/types';\n\nimport { getNormalizedStyles } from './normalize';\nimport { CSSObject } from './types';\nimport { useTheme } from './useTheme';\n\nexport type ElementOwnProps = {\n  css?: CSSObject;\n  variant?: string | string[];\n};\n\nexport type ElementProps = PolymorphicPropsWithRef<ElementOwnProps, 'div'>;\n\n/**\n * Function expression to check if there is any falsy value or empty object\n */\nconst isNotEmpty = (val: any) =>\n  !(val && Object.keys(val).length === 0 && val.constructor === Object);\n\n/**\n * Get the normalized base styles\n */\nconst baseStyles = getNormalizedStyles('base');\n\nexport const Element: PolymorphicComponentWithRef<ElementOwnProps, 'div'> =\n  forwardRef(\n    ({ as = 'div', css: styles = {}, variant, children, ...props }, ref) => {\n      const { css } = useTheme();\n\n      /**\n       * Transform variant input for `@theme-ui/css`\n       */\n      const variants = Array.isArray(variant)\n        ? variant.map(v => ({ variant: v }))\n        : [{ variant }];\n\n      return jsx(\n        as,\n        {\n          ...props,\n          ...{\n            css: [\n              baseStyles,\n              getNormalizedStyles(as),\n              ...variants.map(v => css(v)),\n              css(styles),\n            ].filter(isNotEmpty),\n          },\n          ref,\n        },\n        children\n      );\n    }\n  );\n","import { css as emotion } from '@emotion/css';\nimport { StyleObject } from './types';\nimport { useTheme } from './useTheme';\n\n// 🤫 https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object\n// lodash.isEmpty is tooo much KBs!\nconst isEmpty = (val: any) =>\n  val && Object.keys(val).length === 0 && val.constructor === Object;\n\nexport const useClassname = (...styles: StyleObject[]) => {\n  const { css } = useTheme();\n  return styles\n    .map(style => {\n      /**\n       * emotion will create a `css-0` class whenever an empty object is\n       * passed. Since this makes debugging harder we'll do not pass empty\n       * objects to emotion.\n       */\n      const themedStyle = css(style);\n      return isEmpty(themedStyle) ? '' : emotion(themedStyle);\n    })\n    .join(' ');\n};\n","import { css } from '@emotion/css';\n\nconst base = css({\n  boxSizing: 'border-box',\n  margin: 0,\n  padding: 0,\n  minWidth: 0,\n  fontSize: '100%',\n  font: 'inherit',\n  verticalAlign: 'baseline',\n  WebkitTapHighlightColor: 'transparent',\n});\n\n// Content\n// ---------------\nconst block = css({\n  display: 'block',\n});\n\nconst list = css({\n  // empty\n});\n\nconst table = css({\n  borderCollapse: 'collapse',\n  borderSpacing: 0,\n});\n\n// Typography\n// ---------------\nconst a = css({\n  textDecoration: 'none',\n  touchAction: 'manipulation',\n});\n\nconst quote = css({\n  quotes: 'none',\n  selectors: {\n    '&:before, &:after': {\n      content: \"''\",\n    },\n  },\n});\n\n// Form Elements\n// ---------------\nconst button = css({\n  display: 'block',\n  appearance: 'none',\n  background: 'transparent',\n  textAlign: 'center',\n  touchAction: 'manipulation',\n});\n\nconst input = css({\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-clear': {\n      display: 'none',\n    },\n    '&::-webkit-search-cancel-button': {\n      WebkitAppearance: 'none',\n    },\n  },\n});\n\nconst select = css({\n  display: 'block',\n  appearance: 'none',\n  selectors: {\n    '&::-ms-expand': {\n      display: 'none',\n    },\n  },\n});\n\nconst textarea = css({\n  display: 'block',\n  appearance: 'none',\n});\n\n// Reset\n// ---------------\nexport const reset = {\n  article: block,\n  aside: block,\n  details: block,\n  figcaption: block,\n  figure: block,\n  footer: block,\n  header: block,\n  hgroup: block,\n  menu: block,\n  nav: block,\n  section: block,\n  ul: list,\n  ol: list,\n  blockquote: quote,\n  q: quote,\n  a,\n  base,\n  table,\n  select,\n  button,\n  textarea,\n  input,\n} as const;\n","import { ElementType } from 'react';\nimport { reset } from './reset';\nimport { CSSObject } from './types';\nimport { useClassname } from './useClassname';\n\nexport type UseStyleInput = {\n  element?: ElementType;\n  css?: Omit<CSSObject, 'variant' | 'element'> & {\n    variant?: never;\n    element?: never;\n  };\n  variant?: string | string[];\n  className?: string;\n};\n\n/**\n * Hook that can adds base styles, reset for certain elements, variants and custom styles\n */\nexport const useStyles = ({\n  element,\n  css: styles = {},\n  variant,\n  className = '',\n}: UseStyleInput) => {\n  /**\n   * Get reset styles. Base is always applied. An additional reset maybe applied\n   * based on the passed element.\n   *\n   * We check the passed className if it already includes the reset styles so no\n   * duplicates are applied.\n   */\n  const baseClassName = className.includes(reset.base) ? '' : reset.base;\n  const resetClassName =\n    typeof element === 'string'\n      ? className.includes((reset as { [key: string]: string })[element])\n        ? ''\n        : (reset as { [key: string]: string })[element]\n      : '';\n\n  /**\n   * Get variant styles (from theme).\n   */\n  const variants = Array.isArray(variant)\n    ? variant.map(v => ({ variant: v }))\n    : [{ variant }];\n  const variantsClassName = useClassname(...variants);\n\n  /**\n   * Custom styles are applied \"on runtime\". They are usually controlled via component\n   * props and can change between component instances.\n   */\n  const customClassName = useClassname(styles);\n\n  return [\n    baseClassName,\n    resetClassName,\n    variantsClassName,\n    customClassName,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n};\n"],"names":["base","boxSizing","margin","padding","minWidth","fontSize","fontFamily","verticalAlign","WebkitTapHighlightColor","block","display","list","table","borderCollapse","borderSpacing","a","textDecoration","touchAction","quote","quotes","selectors","content","button","appearance","background","textAlign","input","WebkitAppearance","select","textarea","reset","article","aside","details","figcaption","figure","footer","header","hgroup","menu","nav","section","ul","ol","blockquote","q","isKnownElement","getNormalizedStyles","Context","createContext","useTheme","theme","useContext","css","useCallback","style","themeUi","ThemeProvider","children","React","Provider","value","isNotEmpty","val","Object","keys","length","constructor","baseStyles","Element","forwardRef","ref","as","styles","variant","props","variants","Array","isArray","map","v","jsx","filter","isEmpty","useClassname","themedStyle","emotion","join","font","useStyles","element","className","baseClassName","includes","resetClassName","variantsClassName","customClassName","Boolean"],"mappings":"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"}

package/dist/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Create type aliases for `theme-ui` so that it doesn't leak too much into our code.
+ */
+import { Theme as ThemeUITheme, ThemeUIStyleObject, ThemeUICSSObject, ThemeUICSSProperties, ResponsiveStyleValue as RSV } from '@theme-ui/css';
+export declare type ResponsiveStyleValue<T> = RSV<T>;
+export declare type StyleObject = ThemeUIStyleObject;
+export declare type CSSObject = ThemeUICSSObject;
+export declare type CSSProperties = ThemeUICSSProperties;
+export declare type Theme = ThemeUITheme;

package/dist/useClassname.d.ts

@@ -0,0 +1,2 @@
+import { StyleObject } from './types';
+export declare const useClassname: (...styles: StyleObject[]) => string;

package/dist/useStyles.d.ts

@@ -0,0 +1,15 @@
+import { ElementType } from 'react';
+import { CSSObject } from './types';
+export declare type UseStyleInput = {
+    element?: ElementType;
+    css?: Omit<CSSObject, 'variant' | 'element'> & {
+        variant?: never;
+        element?: never;
+    };
+    variant?: string | string[];
+    className?: string;
+};
+/**
+ * Hook that can adds base styles, reset for certain elements, variants and custom styles
+ */
+export declare const useStyles: ({ element, css: styles, variant, className, }: UseStyleInput) => string;

package/dist/useTheme.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StyleObject } from './types';
+export declare const useTheme: () => {
+    theme: any;
+    css: (style: StyleObject) => import("@theme-ui/css").CSSObject;
+};
+export declare type ThemeProviderProps = {
+    theme: any;
+};
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/package.json

@@ -1,23 +1,20 @@
 {
   "name": "@marigold/system",
-  "version": "0.0.1",
+  "version": "0.2.0",
   "description": "Marigold System Library",
   "main": "dist/index.js",
   "module": "dist/system.esm.js",
   "typings": "dist/index.d.ts",
   "license": "MIT",
   "dependencies": {
-    "@emotion/core": "10.0.28",
-    "@theme-ui/css": "0.3.1",
-    "lodash.pick": "4.4.0"
+    "@emotion/css": "11.5.0",
+    "@emotion/react": "11.5.0",
+    "@theme-ui/css": "0.12.0",
+    "csstype": "3.0.9"
   },
   "peerDependencies": {
-    "react": "^16.x",
-    "react-dom": "^16.x"
-  },
-  "devDependencies": {
-    "@types/lodash.pick": "4.4.6",
-    "csstype": "2.6.11"
+    "react": "^16.x || ^17.0.0",
+    "react-dom": "^16.x || ^17.0.0"
   },
   "scripts": {
     "build": "tsdx build --tsconfig tsconfig.build.json --transpileOnly",