Merge pull request #153 from unix/dislay-name

chore: avoid memo override exported component displayName

components/avatar/avatar.tsx

@@ -39,7 +39,7 @@ const safeText = (text: string): string => {
   return text.slice(0, 3)
 }
 
-const Avatar: React.FC<AvatarProps> = React.memo(({
+const Avatar: React.FC<AvatarProps> = ({
   src, stacked, text, size, isSquare, className, ...props
 }) => {
   const theme = useTheme()
@@ -91,14 +91,14 @@ const Avatar: React.FC<AvatarProps> = React.memo(({
       `}</style>
     </span>
   )
-})
+}
 
-type AvatarComponent<P = {}> = React.FC<P> & {
+type MemoAvatarComponent<P = {}> = React.NamedExoticComponent<P> & {
   Group: typeof AvatarGroup
 }
 
 type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
 
-(Avatar as AvatarComponent<ComponentProps>).defaultProps = defaultProps
+Avatar.defaultProps = defaultProps
 
-export default Avatar as AvatarComponent<ComponentProps>
+export default React.memo(Avatar) as MemoAvatarComponent<ComponentProps>

components/badge/badge.tsx

@@ -40,7 +40,7 @@ const getBgColor = (type: NormalTypes, palette: ZeitUIThemesPalette) => {
   return colors[type]
 }
 
-const Badge: React.FC<React.PropsWithChildren<BadgeProps>> = React.memo(({
+const Badge: React.FC<React.PropsWithChildren<BadgeProps>> = ({
   type, size, className, children, ...props
 }) => {
   const theme = useTheme()
@@ -70,6 +70,8 @@ const Badge: React.FC<React.PropsWithChildren<BadgeProps>> = React.memo(({
       `}</style>
     </span>
   )
-})
+}
 
-export default withDefaults(Badge, defaultProps)
+const MemoBadge = React.memo<React.PropsWithChildren<BadgeProps>>(Badge)
+
+export default withDefaults(MemoBadge, defaultProps)

components/button-dropdown/button-dropdown-item.tsx

@@ -24,7 +24,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>
 export type ButtonDropdownItemProps = Props & typeof defaultProps & NativeAttrs
 
-const ButtonDropdownItem: React.FC<React.PropsWithChildren<ButtonDropdownItemProps>> = React.memo(({
+const ButtonDropdownItem: React.FC<React.PropsWithChildren<ButtonDropdownItemProps>> = ({
   children, onClick, className, main, type: selfType, ...props
 }) => {
   const theme = useTheme()
@@ -76,6 +76,8 @@ const ButtonDropdownItem: React.FC<React.PropsWithChildren<ButtonDropdownItemPro
       `}</style>
     </button>
   )
-})
+}
 
-export default withDefaults(ButtonDropdownItem, defaultProps)
+const MemoButtonDropdownItem = React.memo(ButtonDropdownItem)
+
+export default withDefaults(MemoButtonDropdownItem, defaultProps)

components/button-dropdown/button-dropdown.tsx

@@ -35,7 +35,7 @@ const stopPropagation = (event: MouseEvent<HTMLElement>) => {
   event.nativeEvent.stopImmediatePropagation()
 }
 
-const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = React.memo(({
+const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = ({
   children, type, size, auto, className, disabled, loading, ...props
 }) => {
   const ref = useRef<HTMLDivElement>(null)
@@ -137,15 +137,14 @@ const ButtonDropdown: React.FC<React.PropsWithChildren<ButtonDropdownProps>> = R
       </div>
     </ButtonDropdownContext.Provider>
   )
-})
+}
+
+type MemoButtonDropdownComponent<P = {}> = React.NamedExoticComponent<P> & {
+  Item: typeof ButtonDropdownItem
+}
+type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
 
 ButtonDropdown.defaultProps = defaultProps
 
-type ButtonDropdownComponent<P = {}> = React.FC<P> & {
-  Item: typeof ButtonDropdownItem
-}
-
-type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
-
-export default ButtonDropdown as ButtonDropdownComponent<ComponentProps>
+export default React.memo(ButtonDropdown) as MemoButtonDropdownComponent<ComponentProps>
 

components/button-dropdown/icon.tsx

@@ -5,7 +5,7 @@ interface Props {
   height?: string
 }
 
-const ButtonDropdownIcon: React.FC<Props> = React.memo(({
+const ButtonDropdownIcon: React.FC<Props> = ({
   color, height,
 }) => {
   return (
@@ -20,6 +20,8 @@ const ButtonDropdownIcon: React.FC<Props> = React.memo(({
       `}</style>
     </svg>
   )
-})
+}
 
-export default ButtonDropdownIcon
+const MemoButtonDropdownIcon = React.memo(ButtonDropdownIcon)
+
+export default MemoButtonDropdownIcon

components/button/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button should render empty button correctly 1`] = `
-<Memo
+<Memo(Button)
   auto={false}
   className=""
   disabled={false}
@@ -17,7 +17,7 @@ exports[`Button should render empty button correctly 1`] = `
 exports[`Button should render special styles 1`] = `ReactWrapper {}`;
 
 exports[`Button should render special styles 2`] = `
-<Memo
+<Memo(Button)
   auto={false}
   className=""
   disabled={false}
@@ -29,5 +29,5 @@ exports[`Button should render special styles 2`] = `
   type="default"
 >
   button
-</Memo>
+</Memo(Button)>
 `;

components/button/button.drip.tsx

@@ -15,7 +15,7 @@ const defaultProps = {
 
 export type ButtonDrip = Props & typeof defaultProps
 
-const ButtonDrip: React.FC<ButtonDrip> = React.memo(({
+const ButtonDrip: React.FC<ButtonDrip> = ({
   x, y, color, onCompleted
 }) => {
   const dripRef = useRef<HTMLDivElement>(null)
@@ -80,7 +80,9 @@ const ButtonDrip: React.FC<ButtonDrip> = React.memo(({
       `}</style>
     </div>
   )
-})
+}
 
-export default withDefaults(ButtonDrip, defaultProps)
+const MemoButtonDrip = React.memo<ButtonDrip>(ButtonDrip)
+
+export default withDefaults(MemoButtonDrip, defaultProps)
 

components/button/button.tsx

@@ -34,7 +34,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>
 export type ButtonProps = Props & typeof defaultProps & NativeAttrs
 
-const Button: React.FC<React.PropsWithChildren<ButtonProps>> = React.memo(({
+const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
   children, disabled, type, loading, shadow, ghost, effect, onClick,
   auto, size, className, ...props
 }) => {
@@ -145,6 +145,8 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = React.memo(({
       `}</style>
     </button>
   )
-})
+}
 
-export default withDefaults(Button, defaultProps)
+const MemoButton = React.memo<React.PropsWithChildren<ButtonProps>>(Button)
+
+export default withDefaults(MemoButton, defaultProps)

components/capacity/capacity.tsx

@@ -27,7 +27,7 @@ const getColor = (val: number, palette: ZeitUIThemesPalette): string => {
   return palette.errorDark
 }
 
-const Capacity: React.FC<CapacityProps> = React.memo(({
+const Capacity: React.FC<CapacityProps> = ({
   value, limit, color: userColor, className, ...props
 }) => {
   const theme = useTheme()
@@ -60,6 +60,8 @@ const Capacity: React.FC<CapacityProps> = React.memo(({
       `}</style>
     </div>
   )
-})
+}
 
-export default withDefaults(Capacity, defaultProps)
+const MemoCapacity = React.memo(Capacity)
+
+export default withDefaults(MemoCapacity, defaultProps)

components/card/card-content.tsx

@@ -31,4 +31,6 @@ const CardContent: React.FC<React.PropsWithChildren<CardContentProps>> = ({
   )
 }
 
-export default withDefaults(CardContent, defaultProps)
+const MemoCardContent = React.memo(CardContent)
+
+export default withDefaults(MemoCardContent, defaultProps)

components/card/card-footer.tsx

@@ -49,4 +49,6 @@ const CardFooter: React.FC<React.PropsWithChildren<CardFooterProps>> = ({
   )
 }
 
-export default withDefaults(CardFooter, defaultProps)
+const MemoCardFooter = React.memo(CardFooter)
+
+export default withDefaults(MemoCardFooter, defaultProps)

components/card/card.tsx

@@ -26,7 +26,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type CardProps = Props & typeof defaultProps & NativeAttrs
 
-const Card: React.FC<React.PropsWithChildren<CardProps>> = React.memo(({
+const Card: React.FC<React.PropsWithChildren<CardProps>> = ({
   children, hoverable, className, shadow, type, width, ...props
 }) => {
   const theme = useTheme()
@@ -88,17 +88,16 @@ const Card: React.FC<React.PropsWithChildren<CardProps>> = React.memo(({
       `}</style>
     </div>
   )
-})
+}
 
-type CardComponent<P = {}> = React.FC<P> & {
+type MemoCardComponent<P = {}> = React.NamedExoticComponent<P> & {
   Footer: typeof CardFooter
   Actions: typeof CardFooter
   Content: typeof CardContent
   Body: typeof CardContent
 }
-
 type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
 
-(Card as CardComponent<ComponentProps>).defaultProps = defaultProps
+Card.defaultProps = defaultProps
 
-export default Card as CardComponent<ComponentProps>
+export default React.memo(Card) as MemoCardComponent<ComponentProps>

components/checkbox/checkbox-group.tsx

@@ -18,7 +18,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type CheckboxGroupProps = Props & typeof defaultProps & NativeAttrs
 
-const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = React.memo(({
+const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = ({
   disabled, onChange, value, children, className, ...props
 }) => {
   const [selfVal, setSelfVal] = useState<string[]>([])
@@ -59,6 +59,6 @@ const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = Rea
       </div>
     </CheckboxContext.Provider>
   )
-})
+}
 
 export default withDefaults(CheckboxGroup, defaultProps)

components/checkbox/checkbox.icon.tsx

@@ -6,7 +6,7 @@ interface Props {
   checked?: boolean
 }
 
-const CheckboxIcon: React.FC<Props> = React.memo(({
+const CheckboxIcon: React.FC<Props> = ({
   disabled, checked,
 }) => {
   const theme = useTheme()
@@ -47,6 +47,8 @@ const CheckboxIcon: React.FC<Props> = React.memo(({
       `}</style>
     </>
   )
-})
+}
 
-export default CheckboxIcon
+const MemoCheckboxIcon = React.memo(CheckboxIcon)
+
+export default MemoCheckboxIcon

components/checkbox/checkbox.tsx

@@ -34,7 +34,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.LabelHTMLAttributes<any>, keyof Props>
 export type CheckboxProps = Props & typeof defaultProps & NativeAttrs
 
-const Checkbox: React.FC<CheckboxProps> = React.memo(({
+const Checkbox: React.FC<CheckboxProps> = ({
   checked, initialChecked, disabled, onChange, className, children, value, ...props
 }) => {
   const [selfChecked, setSelfChecked] = useState<boolean>(initialChecked)
@@ -119,8 +119,7 @@ const Checkbox: React.FC<CheckboxProps> = React.memo(({
       `}</style>
     </label>
   )
-})
-
+}
 
 Checkbox.defaultProps = defaultProps
 

components/code/code.tsx

@@ -20,7 +20,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type CodeProps = Props & typeof defaultProps & NativeAttrs
 
-const Code: React.FC<React.PropsWithChildren<CodeProps>> = React.memo(({
+const Code: React.FC<React.PropsWithChildren<CodeProps>> = ({
   children, block, bash, darkBash, className, width, ...props
 }) => {
   if (bash) {
@@ -65,6 +65,8 @@ const Code: React.FC<React.PropsWithChildren<CodeProps>> = React.memo(({
       `}</style>
     </>
   )
-})
+}
 
-export default withDefaults(Code, defaultProps)
+const MemoCode = React.memo(Code)
+
+export default withDefaults(MemoCode, defaultProps)

components/col/col.tsx

@@ -18,7 +18,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type ColProps = Props & typeof defaultProps & NativeAttrs
 
-const Col: React.FC<React.PropsWithChildren<ColProps>> = React.memo(({
+const Col: React.FC<React.PropsWithChildren<ColProps>> = ({
   component, children, span, offset, className, ...props
 }) => {
   const Component = component
@@ -38,6 +38,8 @@ const Col: React.FC<React.PropsWithChildren<ColProps>> = React.memo(({
       `}</style>
     </Component>
   )
-})
+}
 
-export default withDefaults(Col, defaultProps)
+const MemoCol = React.memo(Col)
+
+export default withDefaults(MemoCol, defaultProps)

components/collapse/collapse-icon.tsx

@@ -20,4 +20,6 @@ const CollapseIcon: React.FC<Props> = ({ active }) => {
   )
 }
 
-export default CollapseIcon
+const MemoCollapseIcon = React.memo(CollapseIcon)
+
+export default MemoCollapseIcon

components/description/description.tsx

@@ -17,7 +17,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type DescriptionProps = Props & typeof defaultProps & NativeAttrs
 
-const Description: React.FC<DescriptionProps> = React.memo(({
+const Description: React.FC<DescriptionProps> = ({
   title, content, className, ...props
 }) => {
   const theme = useTheme()
@@ -56,6 +56,8 @@ const Description: React.FC<DescriptionProps> = React.memo(({
       `}</style>
     </dl>
   )
-})
+}
 
-export default withDefaults(Description, defaultProps)
+const MemoDescription = React.memo(Description)
+
+export default withDefaults(MemoDescription, defaultProps)

components/display/display.tsx

@@ -18,7 +18,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type DisplayProps = Props & typeof defaultProps & NativeAttrs
 
-const Display: React.FC<React.PropsWithChildren<DisplayProps>> = React.memo(({
+const Display: React.FC<React.PropsWithChildren<DisplayProps>> = ({
   children, caption, shadow, className, width, ...props
 }) => {
   const theme = useTheme()
@@ -66,6 +66,8 @@ const Display: React.FC<React.PropsWithChildren<DisplayProps>> = React.memo(({
       `}</style>
     </div>
   )
-})
+}
 
-export default withDefaults(Display, defaultProps)
+const MemoDisplay = React.memo(Display)
+
+export default withDefaults(MemoDisplay, defaultProps)

components/divider/divider.tsx

@@ -101,4 +101,6 @@ const Divider: React.FC<React.PropsWithChildren<DividerProps>> = ({
   )
 }
 
-export default withDefaults(Divider, defaultProps)
+const MemoDivider = React.memo(Divider)
+
+export default withDefaults(MemoDivider, defaultProps)

components/dot/dot.tsx

@@ -27,7 +27,7 @@ const getColor = (type: NormalTypes, theme: ZeitUIThemes): string => {
   return colors[type] || colors.default as string
 }
 
-const Dot: React.FC<React.PropsWithChildren<DotProps>> = React.memo(({
+const Dot: React.FC<React.PropsWithChildren<DotProps>> = ({
   type, children, className, ...props
 }) => {
   const theme = useTheme()
@@ -62,6 +62,8 @@ const Dot: React.FC<React.PropsWithChildren<DotProps>> = React.memo(({
       `}</style>
     </span>
   )
-})
+}
 
-export default withDefaults(Dot, defaultProps)
+const MemoDot = React.memo(Dot)
+
+export default withDefaults(MemoDot, defaultProps)

components/fieldset/fieldset-footer-actions.tsx

@@ -12,7 +12,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type FieldsetFooterActionsProps = Props & typeof defaultProps & NativeAttrs
 
-const FieldsetFooterActions: React.FC<FieldsetFooterActionsProps> = React.memo(({
+const FieldsetFooterActions: React.FC<FieldsetFooterActionsProps> = ({
   className, children, ...props
 }) => {
   return (
@@ -26,6 +26,8 @@ const FieldsetFooterActions: React.FC<FieldsetFooterActionsProps> = React.memo((
       `}</style>
     </>
   )
-})
+}
 
-export default withDefaults(FieldsetFooterActions, defaultProps)
+const MemoFieldsetFooterActions = React.memo(FieldsetFooterActions)
+
+export default withDefaults(MemoFieldsetFooterActions, defaultProps)

components/fieldset/fieldset-footer-status.tsx

@@ -12,7 +12,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type FieldsetFooterStatusProps = Props & typeof defaultProps & NativeAttrs
 
-const FieldsetFooterStatus: React.FC<FieldsetFooterStatusProps> = React.memo(({
+const FieldsetFooterStatus: React.FC<FieldsetFooterStatusProps> = ({
   className, children, ...props
 }) => {
   return (
@@ -33,6 +33,8 @@ const FieldsetFooterStatus: React.FC<FieldsetFooterStatusProps> = React.memo(({
       `}</style>
     </>
   )
-})
+}
 
-export default withDefaults(FieldsetFooterStatus, defaultProps)
+const MemoFieldsetFooterStatus = React.memo(FieldsetFooterStatus)
+
+export default withDefaults(MemoFieldsetFooterStatus, defaultProps)

components/fieldset/fieldset-footer.tsx

@@ -14,7 +14,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type FieldsetFooterProps = Props & typeof defaultProps & NativeAttrs
 
-const FieldsetFooter: React.FC<React.PropsWithChildren<FieldsetFooterProps>> = React.memo(({
+const FieldsetFooter: React.FC<React.PropsWithChildren<FieldsetFooterProps>> = ({
   className, children, ...props
 }) => {
   const theme = useTheme()
@@ -41,7 +41,7 @@ const FieldsetFooter: React.FC<React.PropsWithChildren<FieldsetFooterProps>> = R
       `}</style>
     </footer>
   )
-})
+}
 
 FieldsetFooter.defaultProps = defaultProps
 

components/fieldset/fieldset-group.tsx

@@ -18,7 +18,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type FieldsetGroupProps = Props & typeof defaultProps & NativeAttrs
 
-const FieldsetGroup: React.FC<React.PropsWithChildren<FieldsetGroupProps>> = React.memo(({
+const FieldsetGroup: React.FC<React.PropsWithChildren<FieldsetGroupProps>> = ({
   className, children, value, onChange, ...props
 }) => {
   const theme = useTheme()
@@ -118,6 +118,6 @@ const FieldsetGroup: React.FC<React.PropsWithChildren<FieldsetGroupProps>> = Rea
       </div>
     </FieldsetContext.Provider>
   )
-})
+}
 
 export default withDefaults(FieldsetGroup, defaultProps)

components/fieldset/fieldset-subtitle.tsx

@@ -13,7 +13,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<HTMLHeadingElement>, keyof Props>
 export type FieldsetSubtitleProps = Props & typeof defaultProps & NativeAttrs
 
-const FieldsetSubtitle: React.FC<FieldsetSubtitleProps> = React.memo(({
+const FieldsetSubtitle: React.FC<FieldsetSubtitleProps> = ({
   className, children, ...props
 }) => {
   const theme = useTheme()
@@ -30,6 +30,8 @@ const FieldsetSubtitle: React.FC<FieldsetSubtitleProps> = React.memo(({
       `}</style>
     </>
   )
-})
+}
 
-export default withDefaults(FieldsetSubtitle, defaultProps)
+const MemoFieldsetSubtitle = React.memo(FieldsetSubtitle)
+
+export default withDefaults(MemoFieldsetSubtitle, defaultProps)

components/fieldset/fieldset-title.tsx

@@ -12,7 +12,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<HTMLHeadingElement>, keyof Props>
 export type FieldsetTitleProps = Props & typeof defaultProps & NativeAttrs
 
-const FieldsetTitle: React.FC<FieldsetTitleProps> = React.memo(({
+const FieldsetTitle: React.FC<FieldsetTitleProps> = ({
   className, children, ...props
 }) => {
   return (
@@ -29,6 +29,8 @@ const FieldsetTitle: React.FC<FieldsetTitleProps> = React.memo(({
       `}</style>
     </>
   )
-})
+}
 
-export default withDefaults(FieldsetTitle, defaultProps)
+const MemoFieldsetTitle = React.memo(FieldsetTitle)
+
+export default withDefaults(MemoFieldsetTitle, defaultProps)

components/fieldset/fieldset.tsx

@@ -29,7 +29,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.FieldsetHTMLAttributes<any>, keyof Props>
 export type FieldsetProps = Props & typeof defaultProps & NativeAttrs
 
-const Fieldset: React.FC<React.PropsWithChildren<FieldsetProps>> = React.memo(({
+const Fieldset: React.FC<React.PropsWithChildren<FieldsetProps>> = ({
   className, title, subtitle, children, value, label, ...props
 }) => {
   const theme = useTheme()
@@ -91,7 +91,7 @@ const Fieldset: React.FC<React.PropsWithChildren<FieldsetProps>> = React.memo(({
       `}</style>
     </div>
   )
-})
+}
 
 Fieldset.defaultProps = defaultProps
 

components/file-tree/tree-file-icon.tsx

@@ -33,4 +33,6 @@ const TreeFileIcon: React.FC<TreeFileIconProps> = ({
   )
 }
 
-export default withDefaults(TreeFileIcon, defaultProps)
+const MemoTreeFileIcon = React.memo(TreeFileIcon)
+
+export default withDefaults(MemoTreeFileIcon, defaultProps)

components/file-tree/tree-folder-icon.tsx

@@ -33,4 +33,6 @@ const TreeFolderIcon: React.FC<TreeFolderIconProps> = ({
   )
 }
 
-export default withDefaults(TreeFolderIcon, defaultProps)
+const MemoTreeFolderIcon = React.memo(TreeFolderIcon)
+
+export default withDefaults(MemoTreeFolderIcon, defaultProps)

components/file-tree/tree-status-icon.tsx

@@ -37,4 +37,6 @@ const TreeStatusIcon: React.FC<TreeStatusIconProps> = ({
   )
 }
 
-export default withDefaults(TreeStatusIcon, defaultProps)
+const MemoTreeStatusIcon = React.memo(TreeStatusIcon)
+
+export default withDefaults(MemoTreeStatusIcon, defaultProps)

components/image/image-browser-https-icon.tsx

@@ -10,4 +10,6 @@ const ImageBrowserHttpsIcon = () => {
   )
 }
 
-export default ImageBrowserHttpsIcon
+const MemoImageBrowserHttpsIcon = React.memo(ImageBrowserHttpsIcon)
+
+export default MemoImageBrowserHttpsIcon

components/image/image-browser.tsx

@@ -97,7 +97,7 @@ const getAddressInput = (
   </div>
 )
 
-const ImageBrowser = React.memo(React.forwardRef<HTMLDivElement, React.PropsWithChildren<ImageBrowserProps>>(({
+const ImageBrowser = React.forwardRef<HTMLDivElement, React.PropsWithChildren<ImageBrowserProps>>(({
   url, title, children, showFullLink, invert, className, ...props
 }, ref: React.Ref<HTMLDivElement>) => {
   const theme = useTheme()
@@ -185,6 +185,6 @@ const ImageBrowser = React.memo(React.forwardRef<HTMLDivElement, React.PropsWith
       `}</style>
     </div>
   )
-}))
+})
 
 export default withDefaults(ImageBrowser, defaultProps)

components/image/image.tsx

@@ -28,7 +28,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.ImgHTMLAttributes<any>, keyof Props>
 export type ImageProps = Props & typeof defaultProps & NativeAttrs
 
-const Image: React.FC<ImageProps> = React.memo(({
+const Image: React.FC<ImageProps> = ({
   src, width, height, disableSkeleton, className, scale, maxDelay,
   disableAutoResize, ...props
 }) => {
@@ -115,14 +115,13 @@ const Image: React.FC<ImageProps> = React.memo(({
       `}</style>
     </div>
   )
-})
-
-type ImageComponent<P = {}> = React.FC<P> & {
-  Browser: typeof ImageBrowser
 }
 
+type MemoImageComponent<P = {}> = React.NamedExoticComponent<P> & {
+  Browser: typeof ImageBrowser
+}
 type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
 
-(Image as ImageComponent<ComponentProps>).defaultProps = defaultProps
+Image.defaultProps = defaultProps
 
-export default Image as ImageComponent<ComponentProps>
+export default React.memo(Image) as MemoImageComponent<ComponentProps>

components/input/input-block-label.tsx

@@ -4,7 +4,7 @@ import useTheme from '../styles/use-theme'
 export interface InputBlockLabelLabel {
 }
 
-const InputBlockLabel: React.FC<React.PropsWithChildren<InputBlockLabelLabel>> = React.memo(({
+const InputBlockLabel: React.FC<React.PropsWithChildren<InputBlockLabelLabel>> = ({
   children,
 }) => {
   const theme = useTheme()
@@ -33,6 +33,8 @@ const InputBlockLabel: React.FC<React.PropsWithChildren<InputBlockLabelLabel>> =
       `}</style>
     </label>
   )
-})
+}
 
-export default InputBlockLabel
+const MemoInputBlockLabel = React.memo(InputBlockLabel)
+
+export default MemoInputBlockLabel

components/input/input-icon-clear.tsx

@@ -63,4 +63,6 @@ const InputIconClear: React.FC<Props> = ({
   )
 }
 
-export default InputIconClear
+const MemoInputIconClear = React.memo(InputIconClear)
+
+export default MemoInputIconClear

components/input/input-icon.tsx

@@ -8,7 +8,7 @@ export interface InputIconProps {
   onClick: (e: React.MouseEvent<HTMLDivElement>) => void
 }
 
-const InputIcon: React.FC<InputIconProps> = React.memo(({
+const InputIcon: React.FC<InputIconProps> = ({
   icon, ratio, clickable, onClick,
 }) => {
   const theme = useTheme()
@@ -40,6 +40,8 @@ const InputIcon: React.FC<InputIconProps> = React.memo(({
       `}</style>
     </span>
   )
-})
+}
 
-export default InputIcon
+const MemoInputIcon = React.memo(InputIcon)
+
+export default MemoInputIcon

components/input/input-label.tsx

@@ -6,7 +6,7 @@ export interface InputLabel {
   fontSize: string
 }
 
-const InputLabel: React.FC<React.PropsWithChildren<InputLabel>> = React.memo(({
+const InputLabel: React.FC<React.PropsWithChildren<InputLabel>> = ({
   children, isRight, fontSize,
 }) => {
   const theme = useTheme()
@@ -45,6 +45,8 @@ const InputLabel: React.FC<React.PropsWithChildren<InputLabel>> = React.memo(({
       `}</style>
     </span>
   )
-})
+}
 
-export default InputLabel
+const MemoInputLabel = React.memo(InputLabel)
+
+export default MemoInputLabel

components/input/input.tsx

@@ -212,9 +212,8 @@ type InputComponent<P = {}> = React.ForwardRefExoticComponent<P> & {
   Textarea: typeof Textarea
   Password: typeof InputPassword
 }
-
 type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
 
-(Input as InputComponent<ComponentProps>).defaultProps = defaultProps
+Input.defaultProps = defaultProps
 
 export default Input as InputComponent<ComponentProps>

components/input/password-icon.tsx

@@ -24,4 +24,6 @@ const PasswordIcon: React.FC<Props> = ({ visible }) => {
   )
 }
 
-export default PasswordIcon
+const MemoPasswordIcon = React.memo(PasswordIcon)
+
+export default MemoPasswordIcon

components/keyboard/keyboard.tsx

@@ -43,7 +43,7 @@ const getLayout = (small: boolean, theme: ZeitUIThemes): CustomLayout => {
   }
 }
 
-const Keyboard: React.FC<React.PropsWithChildren<KeyboardProps>> = React.memo(({
+const Keyboard: React.FC<React.PropsWithChildren<KeyboardProps>> = ({
   command, shift, option, ctrl, small, children, className, ...props
 }) => {
   const theme = useTheme()
@@ -92,6 +92,8 @@ const Keyboard: React.FC<React.PropsWithChildren<KeyboardProps>> = React.memo(({
       `}</style>
     </kbd>
   )
-})
+}
 
-export default withDefaults(Keyboard, defaultProps)
+const MemoKeyboard = React.memo(Keyboard)
+
+export default withDefaults(MemoKeyboard, defaultProps)

components/link/icon.tsx

@@ -4,7 +4,7 @@ interface Props {
   color?: string
 }
 
-export const LinkIcon: React.FC<Props> = React.memo(({ color }) => {
+export const LinkIcon: React.FC<Props> = ({ color }) => {
   return (
     <svg viewBox="0 0 24 24" width="1em" height="1em" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
       strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision" style={{ color }} className="icon">
@@ -21,6 +21,6 @@ export const LinkIcon: React.FC<Props> = React.memo(({ color }) => {
       `}</style>
     </svg>
   )
-})
+}
 
-export default LinkIcon
+export default React.memo(LinkIcon)

components/link/link.tsx

@@ -24,7 +24,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>
 export type LinkProps = Props & typeof defaultProps & NativeAttrs
 
-const Link = React.memo(React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>(({
+const Link = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>(({
   href, color, underline, pure, children, className, block, ...props
 }, ref: React.Ref<HTMLAnchorElement>) => {
   const theme = useTheme()
@@ -58,6 +58,8 @@ const Link = React.memo(React.forwardRef<HTMLAnchorElement, React.PropsWithChild
       `}</style>
     </a>
   )
-}))
+})
 
-export default withDefaults(Link, defaultProps)
+const MemoLink = React.memo(Link)
+
+export default withDefaults(MemoLink, defaultProps)

components/loading/loading.tsx

@@ -46,7 +46,7 @@ const getIconBgColor = (
   return color ? color : colors[type]
 }
 
-const Loading: React.FC<React.PropsWithChildren<LoadingProps>> = React.memo(({
+const Loading: React.FC<React.PropsWithChildren<LoadingProps>> = ({
   children, size, type, color,
 }) => {
   const theme = useTheme()
@@ -134,6 +134,8 @@ const Loading: React.FC<React.PropsWithChildren<LoadingProps>> = React.memo(({
       `}</style>
     </div>
   )
-})
+}
 
-export default withDefaults(Loading, defaultProps)
+const MemoLoading = React.memo(Loading)
+
+export default withDefaults(MemoLoading, defaultProps)

components/modal/modal-action.tsx

@@ -23,7 +23,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>
 export type ModalActionProps = Props & typeof defaultProps & NativeAttrs
 
-const ModalAction: React.FC<ModalActionProps> = React.memo(({
+const ModalAction: React.FC<ModalActionProps> = ({
   className, children, onClick, passive, disabled, ...props
 }) => {
   const theme = useTheme()
@@ -73,6 +73,6 @@ const ModalAction: React.FC<ModalActionProps> = React.memo(({
       `}</style>
     </>
   )
-})
+}
 
 export default withDefaults(ModalAction, defaultProps)

components/modal/modal-actions.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import useTheme from '../styles/use-theme'
 
-const ModalActions: React.FC<React.PropsWithChildren<{}>> = React.memo(({
+const ModalActions: React.FC<React.PropsWithChildren<{}>> = ({
   children, ...props
 }) => {
   const theme = useTheme()
@@ -10,7 +10,6 @@ const ModalActions: React.FC<React.PropsWithChildren<{}>> = React.memo(({
       <div />
       <footer {...props}>
         {children}
-        
       </footer>
       <style jsx>{`
         footer {
@@ -37,6 +36,8 @@ const ModalActions: React.FC<React.PropsWithChildren<{}>> = React.memo(({
       `}</style>
     </>
   )
-})
+}
 
-export default ModalActions
+const MemoModalActions = React.memo(ModalActions)
+
+export default MemoModalActions

components/modal/modal-content.tsx

@@ -13,7 +13,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<HTMLElement>, keyof Props>
 export type ModalContentProps = Props & typeof defaultProps & NativeAttrs
 
-const ModalContent: React.FC<ModalContentProps> = React.memo(({
+const ModalContent: React.FC<ModalContentProps> = ({
   className, children, ...props
 }) => {
   const theme = useTheme()
@@ -33,6 +33,8 @@ const ModalContent: React.FC<ModalContentProps> = React.memo(({
       `}</style>
     </>
   )
-})
+}
 
-export default withDefaults(ModalContent, defaultProps)
+const MemoModalContent = React.memo(ModalContent)
+
+export default withDefaults(MemoModalContent, defaultProps)

components/modal/modal-subtitle.tsx

@@ -13,7 +13,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<HTMLHeadingElement>, keyof Props>
 export type ModalSubtitleProps = Props & typeof defaultProps & NativeAttrs
 
-const ModalSubtitle: React.FC<ModalSubtitleProps> = React.memo(({
+const ModalSubtitle: React.FC<ModalSubtitleProps> = ({
   className, children, ...props
 }) => {
   const theme = useTheme()
@@ -38,6 +38,8 @@ const ModalSubtitle: React.FC<ModalSubtitleProps> = React.memo(({
       `}</style>
     </>
   )
-})
+}
 
-export default withDefaults(ModalSubtitle, defaultProps)
+const MemoModalSubtitle = React.memo(ModalSubtitle)
+
+export default withDefaults(MemoModalSubtitle, defaultProps)

components/modal/modal-title.tsx

@@ -13,7 +13,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type ModalTitleProps = Props & typeof defaultProps & NativeAttrs
 
-const ModalTitle: React.FC<ModalTitleProps> = React.memo(({
+const ModalTitle: React.FC<ModalTitleProps> = ({
   className, children, ...props
 }) => {
   const theme = useTheme()
@@ -38,6 +38,8 @@ const ModalTitle: React.FC<ModalTitleProps> = React.memo(({
       `}</style>
     </>
   )
-})
+}
 
-export default withDefaults(ModalTitle, defaultProps)
+const MemoModalTitle = React.memo(ModalTitle)
+
+export default withDefaults(MemoModalTitle, defaultProps)

components/modal/modal-wrapper.tsx

@@ -17,7 +17,7 @@ const defaultProps = {
 
 export type ModalWrapperProps = Props & typeof defaultProps
 
-const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = React.memo(({
+const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
   className, width, children, visible, ...props
 }) => {
   const theme = useTheme()
@@ -68,6 +68,6 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = React
       </div>
     </CSSTransition>
   )
-})
+}
 
 export default withDefaults(ModalWrapper, defaultProps)

components/modal/modal.tsx

@@ -26,7 +26,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type ModalProps = Props & typeof defaultProps & NativeAttrs
 
-const Modal: React.FC<React.PropsWithChildren<ModalProps>> = React.memo(({
+const Modal: React.FC<React.PropsWithChildren<ModalProps>> = ({
   children, disableBackdropClick, onClose, onOpen, open
 }) => {
   const portal = usePortal('modal')
@@ -74,9 +74,7 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> = React.memo(({
       </ModalContext.Provider>
     ), portal
   )
-})
-
-Modal.defaultProps = defaultProps
+}
 
 type ModalComponent<P = {}> = React.FC<P> & {
   Title: typeof ModalTitle
@@ -84,7 +82,8 @@ type ModalComponent<P = {}> = React.FC<P> & {
   Content: typeof ModalContent
   Action: typeof ModalAction
 }
-
 type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
 
+Modal.defaultProps = defaultProps
+
 export default Modal as ModalComponent<ComponentProps>

components/note/note.tsx

@@ -45,7 +45,7 @@ const getStatusColor = (type: NormalTypes, filled: boolean, theme: ZeitUIThemes)
   }
 }
 
-export const Note: React.FC<React.PropsWithChildren<NoteProps>> = React.memo(({
+export const Note: React.FC<React.PropsWithChildren<NoteProps>> = ({
   children, type, label, filled, small, className, ...props
 }) => {
   const theme = useTheme()
@@ -88,7 +88,9 @@ export const Note: React.FC<React.PropsWithChildren<NoteProps>> = React.memo(({
     </div>
   )
 
-})
+}
 
-export default withDefaults(Note, defaultProps)
+const MemoNote = React.memo(Note)
+
+export default withDefaults(MemoNote, defaultProps)
 

components/popover/popover-item.tsx

@@ -15,7 +15,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type PopoverItemProps = Props & typeof defaultProps & NativeAttrs
 
-const PopoverItem: React.FC<React.PropsWithChildren<PopoverItemProps>> = React.memo(({
+const PopoverItem: React.FC<React.PropsWithChildren<PopoverItemProps>> = ({
   children, line, title, className, ...props
 }) => {
   const theme = useTheme()
@@ -70,6 +70,8 @@ const PopoverItem: React.FC<React.PropsWithChildren<PopoverItemProps>> = React.m
       {title && <PopoverItem line title={false} />}
     </>
   )
-})
+}
 
-export default withDefaults(PopoverItem, defaultProps)
+const MemoPopoverItem = React.memo(PopoverItem)
+
+export default withDefaults(MemoPopoverItem, defaultProps)

components/popover/popover.tsx

@@ -51,11 +51,10 @@ type PopoverComponent<P = {}> = React.FC<P> & {
   Item: typeof PopoverItem
   Option: typeof PopoverItem
 }
-
 type ComponentProps = Partial<typeof defaultProps>
 & Omit<Props, keyof typeof defaultProps>
 & Partial<Omit<TooltipProps, keyof ExcludeTooltipProps>>
 
-(Popover as PopoverComponent<ComponentProps>).defaultProps = defaultProps
+Popover.defaultProps = defaultProps
 
 export default Popover as PopoverComponent<ComponentProps>

components/radio/radio-description.tsx

@@ -13,7 +13,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type RadioDescriptionProps = Props & typeof defaultProps & NativeAttrs
 
-const RadioDescription: React.FC<React.PropsWithChildren<RadioDescriptionProps>> = React.memo(({
+const RadioDescription: React.FC<React.PropsWithChildren<RadioDescriptionProps>> = ({
   className, children, ...props
 }) => {
   const theme = useTheme()
@@ -29,6 +29,8 @@ const RadioDescription: React.FC<React.PropsWithChildren<RadioDescriptionProps>>
       `}</style>
     </span>
   )
-})
+}
 
-export default withDefaults(RadioDescription, defaultProps)
+const MemoRadioDescription = React.memo(RadioDescription)
+
+export default withDefaults(MemoRadioDescription, defaultProps)

components/radio/radio-group.tsx

@@ -21,7 +21,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
 export type RadioGroupProps = Props & typeof defaultProps & NativeAttrs
 
-const RadioGroup: React.FC<React.PropsWithChildren<RadioGroupProps>> = React.memo(({
+const RadioGroup: React.FC<React.PropsWithChildren<RadioGroupProps>> = ({
   disabled, onChange, value, children, className, initialValue, useRow, ...props
 }) => {
   const theme = useTheme()
@@ -68,6 +68,6 @@ const RadioGroup: React.FC<React.PropsWithChildren<RadioGroupProps>> = React.mem
       `}</style>
     </RadioContext.Provider>
   )
-})
+}
 
 export default withDefaults(RadioGroup, defaultProps)

components/radio/radio.tsx

@@ -33,7 +33,7 @@ const defaultProps = {
 type NativeAttrs = Omit<React.InputHTMLAttributes<any>, keyof Props>
 export type RadioProps = Props & typeof defaultProps & NativeAttrs
 
-const Radio: React.FC<React.PropsWithChildren<RadioProps>> = React.memo(({
+const Radio: React.FC<React.PropsWithChildren<RadioProps>> = ({
   className, checked, onChange, disabled, value: radioValue,
   children, ...props
 }) => {
@@ -150,17 +150,15 @@ const Radio: React.FC<React.PropsWithChildren<RadioProps>> = React.memo(({
       `}</style>
     </div>
   )
-})
-
-
-Radio.defaultProps = defaultProps
+}
 
 type RadioComponent<P = {}> = React.FC<P> & {
   Group: typeof RadioGroup
   Desc: typeof RadioDescription
   Description: typeof RadioDescription
 }
-
 type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
 
+Radio.defaultProps = defaultProps
+
 export default Radio as RadioComponent<ComponentProps>

components/row/row.tsx

@@ -41,7 +41,7 @@ const getFlexAlignment = (justify: Justify, align: Align) => {
   }
 }
 
-const Container: React.FC<React.PropsWithChildren<RowProps>> = React.memo(({
+const Container: React.FC<React.PropsWithChildren<RowProps>> = ({
   children, component, gap, justify, align, className, ...props
 }) => {
   const Component = component
@@ -68,6 +68,8 @@ const Container: React.FC<React.PropsWithChildren<RowProps>> = React.memo(({
     `}</style>
     </Component>
   )
-})
+}
 
-export default withDefaults(Container, defaultProps)
+const MemoContainer = React.memo(Container)
+
+export default withDefaults(MemoContainer, defaultProps)

components/select/select-icon.tsx

@@ -11,10 +11,9 @@ const defaultProps = {
 
 export type SelectIconProps = Props & typeof defaultProps
 
-const SelectIcon: React.FC<SelectIconProps> = React.memo(({
+const SelectIcon: React.FC<SelectIconProps> = ({
   width,
 }) => {
-  
   return (
     <svg viewBox="0 0 24 24" width={width} height={width} strokeWidth="1" strokeLinecap="round"
       strokeLinejoin="round" fill="none" shapeRendering="geometricPrecision">
@@ -28,6 +27,8 @@ const SelectIcon: React.FC<SelectIconProps> = React.memo(({
       `}</style>
     </svg>
   )
-})
+}
 
-export default withDefaults(SelectIcon, defaultProps)
+const MemoSelectIcon = React.memo(SelectIcon)
+
+export default withDefaults(MemoSelectIcon, defaultProps)

components/snippet/snippet-icon.tsx

@@ -10,4 +10,4 @@ const SnippetIcon: React.FC<{}> = () => {
   )
 }
 
-export default SnippetIcon
+export default React.memo(SnippetIcon)

components/snippet/snippet.tsx

@@ -34,7 +34,7 @@ const textArrayToString = (text: string[]): string => {
   }, '')
 }
 
-const Snippet: React.FC<React.PropsWithChildren<SnippetProps>> = React.memo(({
+const Snippet: React.FC<React.PropsWithChildren<SnippetProps>> = ({
   type, filled, children, text, width, copy: copyType, className, ...props
 }) => {
   const theme = useTheme()
@@ -122,6 +122,8 @@ const Snippet: React.FC<React.PropsWithChildren<SnippetProps>> = React.memo(({
       `}</style>
     </div>
   )
-})
+}
 
-export default withDefaults(Snippet, defaultProps)
+const MemoSnippet = React.memo(Snippet)
+
+export default withDefaults(MemoSnippet, defaultProps)

components/spacer/spacer.tsx

@@ -22,7 +22,7 @@ export const getMargin = (num: number): string => {
   return `calc(${num * 15.25}pt + 1px * ${num - 1})`
 }
 
-const Spacer: React.FC<SpacerProps> = React.memo(({
+const Spacer: React.FC<SpacerProps> = ({
   x, y, inline, className, ...props
 }) => {
   const left = getMargin(x)
@@ -41,6 +41,8 @@ const Spacer: React.FC<SpacerProps> = React.memo(({
       `}</style>
     </span>
   )
-})
+}
 
-export default withDefaults(Spacer, defaultProps)
+const MemoSpacer = React.memo(Spacer)
+
+export default withDefaults(MemoSpacer, defaultProps)

components/spinner/spinner.tsx

@@ -116,7 +116,7 @@ const getWidth = (size: NormalSizes) => {
   return widths[size]
 }
 
-const Spinner: React.FC<SpinnerProps> = React.memo(({
+const Spinner: React.FC<SpinnerProps> = ({
   size, className, ...props
 }) => {
   const theme = useTheme()
@@ -145,6 +145,8 @@ const Spinner: React.FC<SpinnerProps> = React.memo(({
       `}</style>
     </div>
   )
-})
+}
 
-export default withDefaults(Spinner, defaultProps)
+const MemoSpinner = React.memo(Spinner)
+
+export default withDefaults(MemoSpinner, defaultProps)

components/styles/css-baseline/css-baseline.tsx

@@ -3,7 +3,7 @@ import useTheme from '../use-theme'
 import flush from 'styled-jsx/server'
 import flushToReact from 'styled-jsx/server'
 
-const CSSBaseline: React.FC<React.PropsWithChildren<{}>> = React.memo(({
+const CSSBaseline: React.FC<React.PropsWithChildren<{}>> = ({
   children,
 }) => {
   const theme = useTheme()
@@ -277,12 +277,13 @@ const CSSBaseline: React.FC<React.PropsWithChildren<{}>> = React.memo(({
       `}</style>
     </>
   )
-})
+}
 
-type CssBaselineComponent<P = {}> = React.FC<P> & {
+type MemoCssBaselineComponent<P = {}> = React.NamedExoticComponent<P> & {
   flush: typeof flushToReact
 }
 
-(CSSBaseline as CssBaselineComponent<React.PropsWithChildren<{}>>).flush = flush
+const MemoCSSBaseline = React.memo(CSSBaseline) as MemoCssBaselineComponent<React.PropsWithChildren<{}>>
+MemoCSSBaseline.flush = flush
 
-export default CSSBaseline as CssBaselineComponent<React.PropsWithChildren<{}>>
+export default MemoCSSBaseline

components/table/table-body.tsx

@@ -30,7 +30,7 @@ export type cellData = {
   value: any
 }
 
-const TableBody: React.FC<TableBodyProps> = React.memo(({
+const TableBody: React.FC<TableBodyProps> = ({
   data, hover, emptyText, onRow, onCell
 }) => {
   const theme = useTheme()
@@ -80,6 +80,8 @@ const TableBody: React.FC<TableBodyProps> = React.memo(({
       `}</style>
     </tbody>
   )
-})
+}
 
-export default withDefaults(TableBody, defaultProps)
+const MemoTableBody = React.memo(TableBody)
+
+export default withDefaults(MemoTableBody, defaultProps)

components/table/table-cell.tsx

@@ -19,7 +19,7 @@ export type cellData = {
   rowValue: any
 }
 
-const TableCell: React.FC<Props> = React.memo(({
+const TableCell: React.FC<Props> = ({
   columns, row, rowIndex, emptyText, onCellClick,
 }) => {
   const { removeRow } = useTableContext()
@@ -51,6 +51,6 @@ const TableCell: React.FC<Props> = React.memo(({
     </>
   )
   /* eslint-enable */
-})
+}
 
-export default TableCell
+export default React.memo(TableCell)

components/table/table-head.tsx

@@ -32,7 +32,7 @@ const makeColgroup = (width: number, columns: Array<TableColumnItem>) => {
   )
 }
 
-const TableHead: React.FC<TableHeadProps> = React.memo(({
+const TableHead: React.FC<TableHeadProps> = ({
   columns, width,
 }) => {
   const theme = useTheme()
@@ -101,6 +101,8 @@ const TableHead: React.FC<TableHeadProps> = React.memo(({
       `}</style>
     </>
   )
-})
+}
 
-export default withDefaults(TableHead, defaultProps)
+const MemoTableHead = React.memo(TableHead)
+
+export default withDefaults(MemoTableHead, defaultProps)

components/tabs/tabs.tsx

@@ -143,13 +143,12 @@ const Tabs: React.FC<React.PropsWithChildren<TabsProps>> = ({
   )
 }
 
-Tabs.defaultProps = defaultProps
-
 type TabsComponent<P = {}> = React.FC<P> & {
   Item: typeof TabsItem
   Tab: typeof TabsItem
 }
-
 type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
 
+Tabs.defaultProps = defaultProps
+
 export default Tabs as TabsComponent<ComponentProps>

components/tag/tag.tsx

@@ -70,7 +70,7 @@ const getColors = (
   }
 }
 
-const Tag: React.FC<React.PropsWithChildren<TagProps>> = React.memo(({
+const Tag: React.FC<React.PropsWithChildren<TagProps>> = ({
   type, children, className, invert, ...props
 }) => {
   const theme = useTheme()
@@ -98,6 +98,8 @@ const Tag: React.FC<React.PropsWithChildren<TagProps>> = React.memo(({
       `}</style>
     </span>
   )
-})
+}
 
-export default withDefaults(Tag, defaultProps)
+const MemoTag = React.memo(Tag)
+
+export default withDefaults(MemoTag, defaultProps)

components/text/child.tsx

@@ -31,7 +31,7 @@ const getTypeColor = (type: NormalTypes, palette: ZeitUIThemesPalette) => {
 type NativeAttrs = Omit<React.DetailsHTMLAttributes<any>, keyof Props>
 export type TextChildProps = Props & typeof defaultProps & NativeAttrs
 
-const TextChild: React.FC<React.PropsWithChildren<TextChildProps>> = React.memo(({
+const TextChild: React.FC<React.PropsWithChildren<TextChildProps>> = ({
   children, tag, className, type, size, ...props
 }) => {
   const theme = useTheme()
@@ -63,7 +63,9 @@ const TextChild: React.FC<React.PropsWithChildren<TextChildProps>> = React.memo(
       `}</style>
     </>
   )
-})
+}
 
-export default withDefaults(TextChild, defaultProps)
+const MemoTextChild = React.memo(TextChild)
+
+export default withDefaults(MemoTextChild, defaultProps)
 

components/text/text.tsx

@@ -63,7 +63,7 @@ const getModifierChild = (
   )
 }
 
-const Text: React.FC<React.PropsWithChildren<TextProps>> = React.memo(({
+const Text: React.FC<React.PropsWithChildren<TextProps>> = ({
   h1, h2, h3, h4, h5, h6, p, b, small, i, span, del, em, blockquote,
   size, children, className, ...props
 }) => {
@@ -101,7 +101,9 @@ const Text: React.FC<React.PropsWithChildren<TextProps>> = React.memo(({
   return (
     <TextChild className={className} tag={tag} size={size} {...props}>{modifers}</TextChild>
   )
-})
+}
 
-export default withDefaults(Text, defaultProps)
+const MemoText = React.memo(Text)
+
+export default withDefaults(MemoText, defaultProps)
 

components/toggle/toggle.tsx

@@ -56,7 +56,7 @@ const getSizes = (size: NormalSizes) => {
   return sizes[size]
 }
 
-const Toggle: React.FC<ToggleProps> = React.memo(({
+const Toggle: React.FC<ToggleProps> = ({
   initialChecked, checked, disabled, onChange, size, className, ...props
 }) => {
   const theme = useTheme()
@@ -164,6 +164,8 @@ const Toggle: React.FC<ToggleProps> = React.memo(({
       `}</style>
     </label>
   )
-})
+}
 
-export default withDefaults(Toggle, defaultProps)
+const MemoToggle = React.memo(Toggle)
+
+export default withDefaults(MemoToggle, defaultProps)

components/tooltip/tooltip-content.tsx

@@ -52,7 +52,7 @@ const getRect = (ref: MutableRefObject<HTMLElement | null>): ReactiveDomReact =>
   }
 }
 
-const TooltipContent: React.FC<React.PropsWithChildren<Props>> = React.memo(({
+const TooltipContent: React.FC<React.PropsWithChildren<Props>> = ({
   children, parent, visible, offset, placement, type, className, hideArrow,
 }) => {
   const theme = useTheme()
@@ -112,6 +112,6 @@ const TooltipContent: React.FC<React.PropsWithChildren<Props>> = React.memo(({
       </div>
     </CSSTransition>
   ), el)
-})
+}
 
 export default TooltipContent

components/tooltip/tooltip-icon.tsx

@@ -42,4 +42,4 @@ const TooltipIcon: React.FC<Props> = ({
   )
 }
 
-export default TooltipIcon
+export default React.memo(TooltipIcon)

components/user/user-link.tsx

@@ -14,24 +14,23 @@ const defaultProps = {
 type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>
 export type UserLinkProps = Props & typeof defaultProps & NativeAttrs
 
-const UserLink = React.memo(
-  React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<UserLinkProps>>(({
-    href, className, children, ...props
-  }, ref: React.Ref<HTMLAnchorElement>) => {
-  
-    return (
-      <div className={className} {...props}>
-        <Link ref={ref} href={href} pure color target="_blank" rel="noopener">
-          {children}
-        </Link>
-        <style jsx>{`
-          div :global(a:hover) {
-            opacity: .7;
-          }
-        `}</style>
-      </div>
-    )
-  })
-)
+const UserLink = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<UserLinkProps>>(({
+  href, className, children, ...props
+}, ref: React.Ref<HTMLAnchorElement>) => {
+  return (
+    <div className={className} {...props}>
+      <Link ref={ref} href={href} pure color target="_blank" rel="noopener">
+        {children}
+      </Link>
+      <style jsx>{`
+        div :global(a:hover) {
+          opacity: .7;
+        }
+      `}</style>
+    </div>
+  )
+})
 
-export default withDefaults(UserLink, defaultProps)
+const MemoUserLink = React.memo(UserLink)
+
+export default withDefaults(MemoUserLink, defaultProps)

components/user/user.tsx

@@ -75,12 +75,11 @@ const User: React.FC<React.PropsWithChildren<UserProps>> = ({
   )
 }
 
-type UserComponent<P = {}> = React.FC<P> & {
+type MemoUserComponent<P = {}> = React.NamedExoticComponent<P> & {
   Link: typeof UserLink
 }
-
 type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & NativeAttrs
 
-(User as UserComponent<ComponentProps>).defaultProps = defaultProps
+User.defaultProps = defaultProps
 
-export default User as UserComponent<ComponentProps>
+export default React.memo(User) as MemoUserComponent<ComponentProps>

components/utils/with-defaults.ts

@@ -6,7 +6,6 @@ const withDefaults = <P, DP>(
 ) => {
   type Props = Partial<DP> & Omit<P, keyof DP>
   component.defaultProps = defaultProps
-  
   return component as React.ComponentType<Props>
 }