feat: up emotion 11

packages/core/package.json

@@ -21,21 +21,25 @@
     "lib"
   ],
   "dependencies": {
-    "@emotion/core": "^10.0.16",
-    "@emotion/styled": "^10.0.15",
+    "@emotion/core": "^11.0.0",
+    "@emotion/server": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "@emotion/css": "^11.5.0",
+    "@emotion/react": "^11.5.0",
     "@types/dom-helpers": "^3.4.1",
+    "@types/markdown-to-jsx": "^6.9.0",
     "@types/react": ">=16.8.23 <17.1.0",
     "@types/react-dom": ">=16.8.4 <17.1.0",
     "@types/react-google-recaptcha": "^1.0.0",
     "@types/react-overlays": "^1.1.3",
+    "@types/react-text-mask": "^5.4.6",
     "@types/react-transition-group": "^4.2.2",
     "dom-helpers": "^3.4.0",
-    "emotion": "^10.0.14",
-    "emotion-theming": "^10.0.14",
     "react": ">=16.8.6 <17.1.0",
     "react-dom": ">=16.8.6 <17.1.0",
     "react-google-recaptcha": "^1.1.0",
     "react-intersection-observer": "^8.24.1",
+    "markdown-to-jsx": "^6.10.3",
     "react-overlays": "^1.2.0",
     "react-text-mask": "^5.4.3",
     "react-transition-group": "^4.2.2",

packages/core/src/Theme.ts

@@ -1,26 +1,32 @@
-export default interface Theme {
-  scale: number,
-  font: {
-    family: string
-    weight: {
-      normal: number
-      strong: number
-      bold: number
-      heavy: number
+import '@emotion/react'
+
+declare module '@emotion/react' {
+
+  export interface Theme {
+    scale: number
+    font: {
+      family: string
+      weight: {
+        normal: number
+        strong: number
+        bold: number
+        heavy: number
+      }
     }
-  }
-  color: {
-    brand: string
-    white: string
-    black: string
-    gray: {
-      darkest: string
-      dark: string
-      normal: string
-      light: string
-      lightest: string
+    color: {
+      brand: string
+      white: string
+      black: string
+      gray: {
+        darkest: string
+        dark: string
+        normal: string
+        light: string
+        lightest: string
+      }
+      error: string
+      success: string
     }
-    error: string
-    success: string
   }
+
 }

packages/core/src/clock/Clock.tsx

@@ -1,16 +1,14 @@
 import React, {FunctionComponent} from 'react'
 
-import {Card, CardOptions, Pos} from '../primitive'
-import styled, {keyframes} from '../styled'
+import {CardPos} from '../primitive'
+import {keyframes} from '../styled'
 
 const rotate = keyframes({
   '100%': {
     transform: 'rotateZ(360deg)',
   },
 })
 
-const CardPos = styled(Card, CardOptions)().withComponent(Pos)
-
 interface ClockProps {
   size?: number
   bg?: string

packages/core/src/field/OptionField.tsx

@@ -1,7 +1,7 @@
 import React, {ReactNode, FocusEventHandler, KeyboardEventHandler} from 'react'
 
-import styled from '../styled'
-import {Typo, Box, Flex, FlexItem, BoxProps} from '../primitive'
+import {styled} from '../styled'
+import {Typo, Box, Flex, FlexItem, BoxProps, BoxNonProps} from '../primitive'
 import {Spacer} from '../spacer'
 
 export interface OptionFieldProps {
@@ -15,8 +15,10 @@ export interface OptionFieldProps {
   onKeyDown: KeyboardEventHandler
 }
 
+const InputProps = BoxNonProps.concat(['autoFocus'])
+
 const Input = styled(Box, {
-  shouldForwardProp: (prop) => !['autoFocus'].includes(prop),
+  shouldForwardProp: (prop) => !InputProps.includes(prop),
 })<BoxProps & Pick<OptionFieldProps, 'autoFocus'>>()
 
 export const OptionField: React.FunctionComponent<OptionFieldProps> = (props) => (

packages/core/src/fonts.ts

@@ -19,6 +19,4 @@ fontWeights.forEach(fontWeight => {
   })
 })
 
-const fonts = fontFaces.join('\n')
-
-export default fonts
+export const fonts = fontFaces.join('\n')

packages/core/src/icon/Icon.md

@@ -32,6 +32,9 @@
 ### Special
 
 ```jsx
+const [filterIconActive, setFilterIconActive] = React.useState(false);
+const [crossBurgerActive, setCrossBurgerActive] = React.useState(false);
+const [feedIconActive, setFeedIconActive] = React.useState(false);
 <Block>
   <BlockContent>
     <Flex>

packages/core/src/image/Image.tsx

@@ -1,7 +1,7 @@
 import React, {FC, ReactNode, Children, isValidElement} from 'react'
 
 import {Img, Box, Pos, Value} from '../primitive'
-import {InView} from '../InView'
+import {InView} from '../inview'
 import {Stub} from '../stub'
 import {ImageControl} from './ImageControl'
 

packages/core/src/index.ts

@@ -1,17 +1,15 @@
-import Theme from './Theme'
+export * from './styled'
 
-import styled from './styled'
+export * from './Theme'
 
-import reset from './reset'
-import fonts from './fonts'
+export * from './reset'
+export * from './fonts'
 
-import * as themes from './themes'
+export * from './themes'
 
-export * from './styled'
-export * from './InView'
 export * from './waypoint'
-
-export {styled, Theme, themes, reset, fonts}
+export * from './inview'
+export * from './markdown'
 
 export * from './primitive'
 export * from './spacer'

packages/core/src/input/BasicInput.tsx

@@ -1,8 +1,13 @@
-import React, {ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, RefObject, forwardRef} from 'react'
-import MaskedInput from 'react-text-mask'
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  KeyboardEventHandler,
+  forwardRef,
+  RefObject,
+} from 'react'
 
 import {MaskInput, Input, Value} from '../primitive'
-import {isMaskDigital, Mask, Pipe} from '../mask'
+import {MaskedInput, isMaskDigital, Mask, Pipe} from '../mask'
 
 export interface BasicInputProps {
   value: string
@@ -27,7 +32,7 @@ export interface BasicInputProps {
   onKeyUp?: KeyboardEventHandler
 }
 
-export const BasicInput = forwardRef<HTMLInputElement | MaskedInput, BasicInputProps>((props, ref) => {
+export const BasicInput = forwardRef<HTMLInputElement, BasicInputProps>((props, ref) => {
   const common = {
     width: 1,
     height: 7,
@@ -57,12 +62,12 @@ export const BasicInput = forwardRef<HTMLInputElement | MaskedInput, BasicInputP
     onBlur: props.onBlur,
     onKeyDown: props.onKeyDown,
     onKeyUp: props.onKeyUp,
+    ref: ref as RefObject<HTMLInputElement & MaskedInput>,
   }
   return (
     props.mask ? (
       <MaskInput
         {...common}
-        ref={ref as RefObject<MaskedInput>}
         type={props.type === undefined ? (isMaskDigital(props.mask) ? 'tel' : 'text') : (['text', 'password', 'tel'].includes(props.type) ? props.type : 'text')}
         mask={props.mask}
         pipe={props.pipe}
@@ -73,7 +78,6 @@ export const BasicInput = forwardRef<HTMLInputElement | MaskedInput, BasicInputP
     ) : (
       <Input
         {...common}
-        ref={ref as RefObject<HTMLInputElement>}
         type={props.type === undefined ? 'text' : props.type}
       />
     )

packages/core/src/input/ContentInput.tsx

@@ -3,13 +3,12 @@ import React, {
   FocusEventHandler,
   MouseEventHandler,
   KeyboardEventHandler,
-  RefObject,
   forwardRef,
+  RefObject,
 } from 'react'
-import MaskedInput from 'react-text-mask'
 
 import {MaskInput, Input, Value} from '../primitive'
-import {isMaskDigital, Mask, Pipe} from '../mask'
+import {isMaskDigital, Mask, MaskedInput, Pipe} from '../mask'
 
 export interface ContentInputProps {
   value: string
@@ -39,7 +38,7 @@ export interface ContentInputProps {
   onKeyUp?: KeyboardEventHandler
 }
 
-export const ContentInput = forwardRef<HTMLInputElement | MaskedInput, ContentInputProps>((props, ref) => {
+export const ContentInput = forwardRef<HTMLInputElement, ContentInputProps>((props, ref) => {
   const common = {
     width: 1,
     height: 12,
@@ -71,12 +70,12 @@ export const ContentInput = forwardRef<HTMLInputElement | MaskedInput, ContentIn
     onKeyUp: props.onKeyUp,
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave,
+    ref: ref as RefObject<HTMLInputElement & MaskedInput>,
   }
   return (
     props.mask ? (
       <MaskInput
         {...common}
-        ref={ref as RefObject<MaskedInput>}
         type={props.type === undefined ? (isMaskDigital(props.mask) ? 'tel' : 'text') : (['text', 'password', 'tel'].includes(props.type) ? props.type : 'text')}
         mask={props.mask}
         pipe={props.pipe}
@@ -87,7 +86,6 @@ export const ContentInput = forwardRef<HTMLInputElement | MaskedInput, ContentIn
     ) : (
       <Input
         {...common}
-        ref={ref as RefObject<HTMLInputElement>}
         type={props.type === undefined ? 'text' : props.type}
       />
     )

packages/core/src/input/SelectInput.tsx

@@ -1,10 +1,9 @@
 import React, {
   ChangeEventHandler,
   FocusEventHandler,
+  MouseEventHandler,
   KeyboardEventHandler,
-  RefObject,
   forwardRef,
-  MouseEventHandler,
 } from 'react'
 
 import {Input, Value} from '../primitive'
@@ -30,6 +29,7 @@ export interface SelectInputProps {
 
 export const SelectInput = forwardRef<HTMLInputElement, SelectInputProps>((props, ref) => {
   const common = {
+    ref,
     width: 1,
     height: 7,
     m: 0,
@@ -62,7 +62,6 @@ export const SelectInput = forwardRef<HTMLInputElement, SelectInputProps>((props
   return (
     <Input
       {...common}
-      ref={ref as RefObject<HTMLInputElement>}
     />
   )
 })

packages/core/src/markdown.ts

@@ -0,0 +1,5 @@
+import MarkdownToJSX from 'markdown-to-jsx'
+
+export {
+  MarkdownToJSX,
+}

packages/core/src/mask/Mask.ts

@@ -1,3 +1,9 @@
-import {MaskedInputProps} from 'react-text-mask'
+import MaskedInput, {MaskedInputProps} from 'react-text-mask'
 
-export type Mask = MaskedInputProps['mask']
+type Mask = MaskedInputProps['mask']
+
+export {
+  Mask,
+  MaskedInput,
+  MaskedInputProps,
+}

packages/core/src/mask/createNumberMask.ts

@@ -12,15 +12,15 @@ const decimalRegExp = /[\.,]/
 const caretTrap = '[]'
 
 export interface NumberMaskOpts {
-  prefix?: string,
-  suffix?: string,
-  includeThousandsSeparator?: boolean,
-  thousandsSeparatorSymbol?: string,
-  allowDecimal?: boolean,
-  decimalLimit?: number,
-  requireDecimal?: boolean,
-  allowNegative?: boolean,
-  allowLeadingZeroes?: boolean,
+  prefix?: string
+  suffix?: string
+  includeThousandsSeparator?: boolean
+  thousandsSeparatorSymbol?: string
+  allowDecimal?: boolean
+  decimalLimit?: number
+  requireDecimal?: boolean
+  allowNegative?: boolean
+  allowLeadingZeroes?: boolean
   integerLimit?: number
 }
 

packages/core/src/offset-scroll/OffsetScrollControl.tsx

@@ -1,5 +1,5 @@
 import React, {RefObject, Component, createRef, ReactNode, FC} from 'react'
-import {InView} from '../InView'
+import {InView} from '../inview'
 import {Box} from '../primitive'
 
 export interface OffsetScrollControlProps {

packages/core/src/option/SwitchControl.tsx

@@ -23,8 +23,7 @@ export interface SwitchControlState {
   focused: boolean
 }
 
-export class SwitchControl extends React.Component<SwitchControlProps,
-  SwitchControlState> {
+export class SwitchControl extends React.Component<SwitchControlProps, SwitchControlState> {
 
   public state: SwitchControlState = {
     focused: false,

packages/core/src/phone-field/PhoneFieldControl.ts

@@ -1,5 +1,4 @@
 import {Component, RefObject, createRef} from 'react'
-import MaskedInput from 'react-text-mask'
 import {findDOMNode} from 'react-dom'
 
 import PhoneFieldControlProps from './PhoneFieldControlProps'
@@ -50,7 +49,7 @@ export default class PhoneFieldControl extends Component<PhoneFieldControlProps,
 
   private containerRef: RefObject<HTMLDivElement> = createRef()
 
-  private inputRef: RefObject<MaskedInput> = createRef()
+  private inputRef: RefObject<HTMLInputElement> = createRef()
 
   private dropdownRef: RefObject<HTMLDivElement> = createRef()
 

packages/core/src/phone-field/PhoneFieldControlProps.ts

@@ -1,5 +1,4 @@
 import React, {RefObject, FC} from 'react'
-import MaskedInput from 'react-text-mask'
 
 import PhoneFieldCountry from './PhoneFieldCountry'
 import {FlagProps} from '../flag'
@@ -28,7 +27,7 @@ export default interface PhoneFieldControlProps {
     focused: boolean
     showCountries: boolean
     containerRef: RefObject<HTMLDivElement>
-    inputRef: RefObject<MaskedInput>
+    inputRef: RefObject<HTMLInputElement>
     dropdownRef: RefObject<HTMLDivElement>
     onChange: React.ChangeEventHandler
     onFocus: React.FocusEventHandler