Stop building the project as a CommonJS library

package.json

@@ -1,6 +1,7 @@
 {
   "name": "@bufferapp/ui-template",
-  "version": "5.48.2",
+  "version": "5.48.2-beta.df91dcb",
+  "sideEffects": false,
   "engines": {
     "node": ">=4.0.0"
   },
@@ -148,9 +149,9 @@
     "predeploy:docs": "npm run gen:docs && npm run build:docs",
     "deploy:docs": "gh-pages -d build",
     "prebuild:lib": "rimraf lib",
-    "build:lib": "npm-run-all --parallel build:commonjs build:copy-files",
+    "build:lib": "npm-run-all --parallel build:esm build:copy-files",
     "build:copy-files": "node scripts/copyBuildFiles.js",
-    "build:commonjs": "cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore index.js",
+    "build:esm": "cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore index.js",
     "publish": "./scripts/publish.sh",
     "beta:publish": "node ./scripts/betaPublish.js",
     "component:new": "node ./scripts/newComponent.js",
@@ -187,12 +188,18 @@
   },
   "babel": {
     "plugins": [
-      "@babel/plugin-transform-modules-commonjs",
       "@babel/plugin-proposal-class-properties",
       "@babel/plugin-proposal-export-default-from"
     ],
     "presets": [
-      "@babel/preset-env",
+      [
+        "@babel/preset-env",
+        {
+          "targets": {
+            "esmodules": true
+          }
+        }
+      ],
       "@babel/react"
     ]
   },

src/components/Avatar/Avatar.jsx

@@ -6,7 +6,12 @@ import styled from 'styled-components';
 import * as Styles from './style';
 // import { socialNetworks } from '../constants';
 import { facebook, googleplus, instagram, linkedin, pinterest, twitter } from '../style/colors';
-import { Instagram, Facebook, Twitter, LinkedIn, Pinterest, GooglePlus } from '../Icon';
+import Instagram from '../Icon/Icons/Instagram'
+import Facebook from '../Icon/Icons/Facebook'
+import Twitter from '../Icon/Icons/Twitter'
+import LinkedIn from '../Icon/Icons/LinkedIn'
+import Pinterest from '../Icon/Icons/Pinterest'
+import GooglePlus from '../Icon/Icons/GooglePlus'
 
 const Wrapper = styled.div`
   ${props => Styles.wrapper[props.size]}

src/components/DropdownMenu/ButtonItem/ButtonItem.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ButtonItemStyled, ButtonLabel } from '../style';
-import { Checkmark as CheckmarkIcon } from '../../Icon';
+import CheckmarkIcon from '../../Icon/Icons/Checkmark'
 import { green } from '../../style/colors';
 import { keyCode } from '../keyCode';
 

src/components/Input/Input.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import PropTypes from 'prop-types';
 import * as Styles from './style';
-import { Warning } from '../Icon';
+import Warning from '../Icon/Icons/Warning';
 import Text from '../Text';
 
 export default class Input extends React.Component {

src/components/Modal/Modal.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as Styles from './style';
 import Button from '../Button';
-import { Cross } from '../Icon';
+import Cross from '../Icon/Icons/Cross';
 
 function setCookie(cookie, cookieKey, days, value) {
   const expiresInDays = days * 24 * 60 * 60;

src/components/NavBar/NavBar.jsx

@@ -1,17 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import {
-  Cross,
-  Info as InfoIcon,
-  ArrowLeft,
-  Person as PersonIcon,
-  Instagram as InstagramIcon,
-  Twitter as TwitterIcon,
-  Facebook as FacebookIcon,
-  Pinterest as PinterestIcon,
-  LinkedIn as LinkedInIcon,
-} from '../Icon';
+import Cross from '../Icon/Icons/Cross'
+import InfoIcon from '../Icon/Icons/Info'
+import ArrowLeft from '../Icon/Icons/ArrowLeft'
+import PersonIcon from '../Icon/Icons/Person'
+import InstagramIcon from '../Icon/Icons/Instagram'
+import TwitterIcon from '../Icon/Icons/Twitter'
+import FacebookIcon from '../Icon/Icons/Facebook'
+import PinterestIcon from '../Icon/Icons/Pinterest'
+import LinkedInIcon from '../Icon/Icons/LinkedIn'
 
 import {
   gray,
@@ -195,7 +193,7 @@ export function appendOrgSwitcher(orgSwitcher) {
     if (!item.subItems || item.subItems.length === 0) {
       item.defaultTooltipMessage = 'No social accounts connected yet.';
     }
-    
+
     return item;
   });
 }

src/components/NavBar/NavBarMenu/NavBarMenu.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ChevronDown } from '../../Icon';
+import ChevronDown from '../../Icon/Icons/ChevronDown';
 import {
   NavBarStyled,
   NavBarEmail,

src/components/Select/SelectItem/SelectItem.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Checkmark } from '../../Icon';
+import Checkmark from '../../Icon/Icons/Checkmark'
 import {
   SelectItemStyled,
   SelectItemLabel,

src/components/SocialButton/SocialButton.jsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Twitter, Instagram, Facebook, Pinterest, LinkedIn } from '../Icon';
+import Instagram from '../Icon/Icons/Instagram'
+import Facebook from '../Icon/Icons/Facebook'
+import Twitter from '../Icon/Icons/Twitter'
+import LinkedIn from '../Icon/Icons/LinkedIn'
+import Pinterest from '../Icon/Icons/Pinterest'
 import Text from '../Text/Text';
 
 import {

src/components/TextArea/TextArea.jsx

@@ -2,23 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Text from '../Text';
 import {HelpTextWrapper, HelpText} from '../Input/style';
-import { Warning } from '../Icon';
+import Warning from '../Icon/Icons/Warning';
 import {Container, StyledTextArea} from './style';
 
 export default class TextArea extends React.Component {
   render() {
     const {
-      value, 
-      label, 
-      hasError, 
-      help, 
-      disabled, 
-      rows, 
-      onChange, 
-      id, 
+      value,
+      label,
+      hasError,
+      help,
+      disabled,
+      rows,
+      onChange,
+      id,
       fullHeight,
-      forwardRef, 
-      ...props 
+      forwardRef,
+      ...props
     } = this.props;
     return (
       <Container>
@@ -69,12 +69,12 @@ TextArea.propTypes = {
   id: PropTypes.string.isRequired,
   /** If the textarea should take the height of the parent div */
   fullHeight: PropTypes.bool,
-  /** 
+  /**
    * this consumed by the default export that is wrapping the component into a ForwardRef
    * @ignore
    */
   forwardRef: PropTypes.oneOfType([
-    PropTypes.func, 
+    PropTypes.func,
     PropTypes.shape({ current: PropTypes.instanceOf(Element) })
   ]),
 };
@@ -86,4 +86,4 @@ TextArea.defaultProps = {
   rows: 4,
   fullHeight: false,
   forwardRef: undefined,
-}
+}

src/documentation/app/layout/sidebar/Sidebar.jsx

@@ -3,7 +3,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
-import { ChevronDown, ChevronUp } from '@bufferapp/ui/Icon';
+import ChevronDown from '@bufferapp/ui/Icon/Icons/ChevronDown';
+import ChevronUp from '@bufferapp/ui/Icon/Icons/ChevronUp';
 import helper from 'immutability-helper';
 
 const SidebarWrapper = styled.div`

src/documentation/examples/AppShell/AppShell.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import AppShell from '@bufferapp/ui/AppShell';
-import { Gear } from '@bufferapp/ui/Icon';
+import Gear from '@bufferapp/ui/Icon/Icons/Gear';
 
 import { gray } from '@bufferapp/ui/style/colors';
 

src/documentation/examples/AppShell/WithEngageEnabled.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import AppShell from '@bufferapp/ui/AppShell';
-import {
-  Gear,
-} from '@bufferapp/ui/Icon';
+import Gear from '@bufferapp/ui/Icon/Icons/Gear';
 
 import { gray } from '@bufferapp/ui/style/colors';
 

src/documentation/examples/AppShell/WithImpersonationSession.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import AppShell from '@bufferapp/ui/AppShell';
-import {
-  Gear,
-} from '@bufferapp/ui/Icon';
+import Gear from '@bufferapp/ui/Icon/Icons/Gear';
 
 import { gray } from '@bufferapp/ui/style/colors';
 

src/documentation/examples/AppShell/WithOrgSwitcher.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import AppShell from '@bufferapp/ui/AppShell';
-import { Gear } from '@bufferapp/ui/Icon';
+import Gear from '@bufferapp/ui/Icon/Icons/Gear';
 
 import { gray } from '@bufferapp/ui/style/colors';
 

src/documentation/examples/Button/Type/TypeIcon.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@bufferapp/ui/Button';
-import { Folder } from '@bufferapp/ui/Icon';
+import Folder from '@bufferapp/ui/Icon/Icons/Folder';
 
 /** Secondary Icon */
 export default function ExampleButton() {

src/documentation/examples/Button/Type/TypeIconEnd.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@bufferapp/ui/Button';
-import { Folder } from '@bufferapp/ui/Icon';
+import Folder from '@bufferapp/ui/Icon/Icons/Folder';
 
 /** Secondary with Icon at End */
 export default function ExampleButton() {

src/documentation/examples/Button/Type/TypePrimaryIcon.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@bufferapp/ui/Button';
-import { Message } from '@bufferapp/ui/Icon';
+import Message from '@bufferapp/ui/Icon/Icons/Message';
 
 /** Primary with Icon */
 export default function ExampleButton() {

src/documentation/examples/Button/Type/TypePrimaryIconEnd.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@bufferapp/ui/Button';
-import { Message } from '@bufferapp/ui/Icon';
+import Message from '@bufferapp/ui/Icon/Icons/Message';
 
 /** Primary with Icon */
 export default function ExampleButton() {

src/documentation/examples/Button/Type/TypeSecondaryIcon.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@bufferapp/ui/Button';
-import { Folder } from '@bufferapp/ui/Icon';
+import Folder from '@bufferapp/ui/Icon/Icons/Folder';
 
 /** Secondary with Icon */
 export default function ExampleButton() {

src/documentation/examples/Select/SelectWithIcon.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import Select from '@bufferapp/ui/Select';
-import { Person } from '@bufferapp/ui/Icon';
-
+import Person from '@bufferapp/ui/Icon/Icons/Person';
 
 /** With Icon */
 export default function ExampleSelect() {

src/documentation/examples/Select/SelectWithInputSearch.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Select from '@bufferapp/ui/Select';
 import Search from '@bufferapp/ui/Search';
-import { Search as SearchIcon } from '@bufferapp/ui/Icon';
+import SearchIcon from '@bufferapp/ui/Icon/Icons/Search';
 
 const searchBarWrapperStyle = {
   width: '100%',

src/documentation/examples/Select/SelectWithMenuAndCustomItem.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import Select from '@bufferapp/ui/Select';
-import { Person, People, Gear, ArrowLeft } from '@bufferapp/ui/Icon';
+import Person from '@bufferapp/ui/Icon/Icons/Person'
+import People from '@bufferapp/ui/Icon/Icons/People'
+import Gear from '@bufferapp/ui/Icon/Icons/Gear'
+import ArrowLeft from '@bufferapp/ui/Icon/Icons/ArrowLeft'
 import { NavBarMenu } from '@bufferapp/ui/NavBar';
 
 /** With Custom Component and Custom Items */

src/documentation/examples/Select/SelectWithSearch.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Select from '@bufferapp/ui/Select';
-import { Flag } from '@bufferapp/ui/Icon';
+import Flag from '@bufferapp/ui/Icon/Icons/Flag';
 
 /** With Search */
 export default function ExampleSelectWithSearch() {

src/documentation/examples/SidebarListItem/SidebarListItem.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import SidebarListItem from '@bufferapp/ui/SidebarListItem';
-import { Person } from '@bufferapp/ui/Icon';
+import Person from '@bufferapp/ui/Icon/Icons/Person';
 
 /** SidebarListItem Example */
 export default function ExampleSidebarListItem() {

src/documentation/examples/SidebarListItem/SidebarListItemSelected.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import SidebarListItem from '@bufferapp/ui/SidebarListItem';
-import { Person } from '@bufferapp/ui/Icon';
+import Person from '@bufferapp/ui/Icon/Icons/Person';
 
 /** SidebarListItem Selected Example */
 export default function ExampleSidebarListItem() {

src/documentation/examples/SidebarListItem/SidebarListItemWithIcon.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import SidebarListItem from '@bufferapp/ui/SidebarListItem';
-import { Warning } from '@bufferapp/ui/Icon';
+import Warning from '@bufferapp/ui/Icon/Icons/Warning'
 
 /** SidebarListItem With Badge Icon Example */
 export default function ExampleSidebarListItem() {