From cf5593b6832c7eed1b705260bb8351d39236340a Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Mon, 25 Jul 2022 11:36:03 +0200
Subject: [PATCH] feat(Alert): Add new Alert and AlertTitle components

---
 docs/styleguide.config.js                  |   2 +
 react/Alert/Readme.md                      | 132 ++++
 react/Alert/index.jsx                      | 113 ++++
 react/AlertTitle/Readme.md                 |   1 +
 react/AlertTitle/index.jsx                 |   3 +
 react/MuiCozyTheme/makeOverrides.js        | 110 +++-
 react/__snapshots__/examples.spec.jsx.snap | 704 ++++++++++++---------
 react/examples.spec.jsx                    |   1 +
 react/index.js                             |   2 +
 9 files changed, 765 insertions(+), 303 deletions(-)
 create mode 100644 react/Alert/Readme.md
 create mode 100644 react/Alert/index.jsx
 create mode 100644 react/AlertTitle/Readme.md
 create mode 100644 react/AlertTitle/index.jsx

diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
index 2875aedd2f..26cea62b13 100644
--- a/docs/styleguide.config.js
+++ b/docs/styleguide.config.js
@@ -136,6 +136,8 @@ module.exports = {
     {
       name: 'Special',
       components: () => [
+        '../react/Alert/index.jsx',
+        '../react/AlertTitle/index.jsx',
         '../react/Alerter/index.jsx',
         '../react/AppIcon/index.jsx',
         '../react/AppTile/index.jsx',
diff --git a/react/Alert/Readme.md b/react/Alert/Readme.md
new file mode 100644
index 0000000000..9dcf642f53
--- /dev/null
+++ b/react/Alert/Readme.md
@@ -0,0 +1,132 @@
+```jsx
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Variants from 'cozy-ui/docs/components/Variants'
+import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
+import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
+
+const initialVariants = [{
+  longText: false,
+  title: false,
+  block: false,
+  color: false,
+  largeIcon: false,
+  noIcon: false,
+  square: false,
+  actionOne: false,
+  actionTwo: false,
+  close: false
+}]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Alert
+      color={variant.color ? "#EFA82D" : undefined}
+      block={variant.block}
+      square={variant.square}
+      icon={variant.noIcon ? false : variant.largeIcon ? <Icon icon={DeviceLaptopIcon} color="var(--errorColor)" size={32} /> : undefined}
+      action={(variant.actionOne || variant.actionTwo) ?
+        <>
+          {variant.actionOne &&
+            <Button variant="text" size="small" label="Download" startIcon={<Icon icon={DownloadIcon} />} />
+          }
+          {variant.actionTwo &&
+            <Button variant="text" size="small" label="No, thanks!" />
+          }
+        </>
+        : undefined
+      }
+      onClose={variant.close ? () => {} : undefined}
+    >
+      {variant.title && <AlertTitle>This is the title</AlertTitle>}
+      {variant.longText
+        ? content.ada.short
+        : "Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times."
+      }
+    </Alert>
+  )}
+</Variants>
+```
+
+### Colors
+
+```jsx
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const colors = ['primary', 'secondary','success', 'error', 'warning', 'info']
+const initialVariants = [{ title: true, block: false, close: false }]
+
+const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? undefined : color
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <>
+      {colors.map(color =>
+        <div className="u-mb-1" key={color}>
+          <Alert
+            severity={color}
+            block={variant.block}
+            action={variant.close ? undefined : (
+              <Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" />
+            )}
+            onClose={variant.close ? () => {} : undefined}
+          >
+            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            This is a {color} alert
+          </Alert>
+        </div>
+      )}
+
+      <hr />
+      <Typography variant="h4" paragraph>Filled variant</Typography>
+
+      {colors.map(color =>
+        <div className="u-mb-1" key={color}>
+          <Alert
+            variant="filled"
+            severity={color}
+            block={variant.block}
+            action={variant.close ? undefined : (
+              <Button variant="primary" size="small" color={makeButtonColor(color)} label="ACTION" />
+            )}
+            onClose={variant.close ? () => {} : undefined}
+          >
+            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            This is a {color} alert
+          </Alert>
+        </div>
+      )}
+
+      <hr />
+      <Typography variant="h4" paragraph>Outlined variant</Typography>
+
+      {colors.map(color =>
+        <div className="u-mb-1" key={color}>
+          <Alert
+            variant="outlined"
+            severity={color}
+            block={variant.block}
+            action={variant.close ? undefined : (
+              <Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" />
+            )}
+            onClose={variant.close ? () => {} : undefined}
+          >
+            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            This is a {color} alert
+          </Alert>
+        </div>
+      )}
+    </>
+  )}
+</Variants>
+```
diff --git a/react/Alert/index.jsx b/react/Alert/index.jsx
new file mode 100644
index 0000000000..55a579092c
--- /dev/null
+++ b/react/Alert/index.jsx
@@ -0,0 +1,113 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+import MuiAlert from '@material-ui/lab/Alert'
+import { makeStyles } from '@material-ui/core/styles'
+
+import Icon from '../Icon'
+import CheckCircleIcon from '../Icons/CheckCircle'
+import WarningIcon from '../Icons/Warning'
+import WarningCircleIcon from '../Icons/WarningCircle'
+import InfoIcon from '../Icons/Info'
+
+const DEFAULT_ICON_SIZE = 16
+
+const defaultIconMapping = {
+  success: <Icon icon={CheckCircleIcon} />,
+  warning: <Icon icon={WarningIcon} />,
+  error: <Icon icon={WarningCircleIcon} />,
+  info: <Icon icon={InfoIcon} />
+}
+
+const makeIcon = (icon, severity) => {
+  // used to remove icon
+  if (icon === false) {
+    return false
+  }
+
+  return (
+    icon ||
+    (['primary', 'secondary'].includes(severity) && <Icon icon={InfoIcon} />) ||
+    undefined
+  )
+}
+
+const useStyles = makeStyles({
+  message: {
+    maxWidth: ({ block, iconSize }) =>
+      block && `calc(100% - ${iconSize + 16}px)`
+  }
+})
+
+const Alert = forwardRef(
+  (
+    {
+      className,
+      icon,
+      severity,
+      block,
+      color,
+      square,
+      action,
+      variant,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const madeSeverity = ['primary', 'secondary'].includes(severity)
+      ? 'success'
+      : severity
+    const madeIcon = makeIcon(icon, severity)
+    const iconSize = icon?.props?.size || DEFAULT_ICON_SIZE
+    const styles = useStyles({ iconSize, block })
+
+    return (
+      <MuiAlert
+        ref={ref}
+        style={{ backgroundColor: color, borderRadius: square && 0 }}
+        className={cx(
+          className,
+          `cozyAlert-${severity}-${variant}`,
+          { block },
+          { action: Boolean(action) }
+        )}
+        classes={styles}
+        variant={variant}
+        severity={madeSeverity}
+        iconMapping={defaultIconMapping}
+        icon={madeIcon}
+        action={action}
+        {...props}
+      >
+        {children}
+      </MuiAlert>
+    )
+  }
+)
+
+Alert.propTypes = {
+  className: PropTypes.string,
+  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
+  severity: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'success',
+    'error',
+    'warning',
+    'info'
+  ]),
+  block: PropTypes.bool,
+  color: PropTypes.string,
+  square: PropTypes.bool,
+  variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])
+}
+
+Alert.defaultProps = {
+  severity: 'primary',
+  block: false,
+  square: false,
+  variant: 'standard'
+}
+
+export default Alert
diff --git a/react/AlertTitle/Readme.md b/react/AlertTitle/Readme.md
new file mode 100644
index 0000000000..574b99839a
--- /dev/null
+++ b/react/AlertTitle/Readme.md
@@ -0,0 +1 @@
+Re-export of @material-ui. See [the official API](https://v4.mui.com/api/alert-title/).
diff --git a/react/AlertTitle/index.jsx b/react/AlertTitle/index.jsx
new file mode 100644
index 0000000000..7063c91dc6
--- /dev/null
+++ b/react/AlertTitle/index.jsx
@@ -0,0 +1,3 @@
+import MuiAlertTitle from '@material-ui/lab/AlertTitle'
+
+export default MuiAlertTitle
diff --git a/react/MuiCozyTheme/makeOverrides.js b/react/MuiCozyTheme/makeOverrides.js
index daf31bdcef..364acd5400 100644
--- a/react/MuiCozyTheme/makeOverrides.js
+++ b/react/MuiCozyTheme/makeOverrides.js
@@ -1,4 +1,4 @@
-import { alpha } from '@material-ui/core/styles'
+import { alpha, lighten, darken } from '@material-ui/core/styles'
 
 const SWITCH_BAR_WIDTH = 25
 
@@ -9,6 +9,65 @@ export const makeThemeOverrides = theme => {
   return createOverrides(theme)
 }
 
+const makeAlertColor = (theme, color) => {
+  const themeColorByColor = {
+    primary: theme.palette[color].main,
+    secondary: theme.palette.text.primary
+  }
+
+  // same approach as Mui, see https://github.com/mui/material-ui/blob/v4.x/packages/material-ui-lab/src/Alert/Alert.js#L28
+  return {
+    '&-standard': {
+      color: darken(themeColorByColor[color], 0.6),
+      backgroundColor: lighten(themeColorByColor[color], 0.9),
+      '& $icon': {
+        color: themeColorByColor[color]
+      },
+      '& $action': {
+        '& button[title="Close"]': {
+          color: theme.palette.text.secondary
+        }
+      }
+    },
+    '&-outlined': {
+      color: darken(themeColorByColor[color], 0.6),
+      border: `1px solid ${themeColorByColor[color]}`,
+      '& $icon': {
+        color: themeColorByColor[color]
+      }
+    },
+    '&-filled': {
+      backgroundColor: themeColorByColor[color]
+    }
+  }
+}
+
+const makeAlertInvertedColor = (theme, color) => {
+  return {
+    '&-standard': {
+      color: theme.palette.primary.main,
+      backgroundColor: theme.palette.background.default,
+      '& $icon': {
+        color: theme.palette[color].main
+      }
+    },
+    '&-outlined': {
+      color: theme.palette.primary.main,
+      border: `1px solid ${theme.palette.primary.main}`,
+      '& $icon': {
+        color: theme.palette[color].main
+      }
+    },
+    '&-filled': {
+      color: theme.palette[color].contrastText,
+      backgroundColor: theme.palette[color].main,
+      '& $icon': {
+        color: theme.palette[color].contrastText
+      }
+    }
+  }
+}
+
 const makeChipStyleByColor = (theme, color) => ({
   color: theme.palette.text[color] || theme.palette[color].main,
   borderColor:
@@ -822,6 +881,41 @@ const makeOverrides = theme => ({
         '&-info': makeChipStyleByColor(theme, 'info')
       }
     }
+  },
+  MuiAlert: {
+    root: {
+      padding: '8px 16px',
+      '&.cozyAlert': {
+        '&-primary': makeAlertColor(theme, 'primary'),
+        '&-secondary': makeAlertColor(theme, 'secondary')
+      },
+      '& $icon': {
+        paddingTop: '9px'
+      },
+      '&.block': {
+        flexWrap: 'wrap',
+        '& $action': {
+          display: 'block',
+          width: '100%',
+          paddingLeft: 0,
+          textAlign: 'right'
+        }
+      }
+    },
+    message: {
+      display: 'flex',
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    },
+    action: {
+      marginRight: '-6px'
+    }
+  },
+  MuiAlertTitle: {
+    root: {
+      width: '100%',
+      fontWeight: 'bold'
+    }
   }
 })
 
@@ -883,6 +977,20 @@ const makeInvertedOverrides = invertedTheme => {
           color: invertedTheme.palette.error.main
         }
       }
+    },
+    MuiAlert: {
+      ...makeOverrides(invertedTheme).MuiAlert,
+      root: {
+        ...makeOverrides(invertedTheme).MuiAlert.root,
+        '&.cozyAlert': {
+          '&-primary': makeAlertInvertedColor(invertedTheme, 'primary'),
+          '&-secondary': makeAlertInvertedColor(invertedTheme, 'primary'),
+          '&-success': makeAlertInvertedColor(invertedTheme, 'success'),
+          '&-error': makeAlertInvertedColor(invertedTheme, 'error'),
+          '&-warning': makeAlertInvertedColor(invertedTheme, 'warning'),
+          '&-info': makeAlertInvertedColor(invertedTheme, 'info')
+        }
+      }
     }
   }
 
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
index 94283011a4..03449b2295 100644
--- a/react/__snapshots__/examples.spec.jsx.snap
+++ b/react/__snapshots__/examples.spec.jsx.snap
@@ -1,5 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Alert should render examples: Alert 1`] = `
+"<div>
+  <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
+    <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LONGTEXT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">TITLE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BLOCK</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">COLOR</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ICON</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SQUARE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTIONONE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTIONTWO</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">CLOSE</span></label>
+  </div>
+  <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyAlert-primary MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+        <defs>
+          <path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
+        </defs>
+        <use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
+      </svg></div>
+    <div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-6\\">Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times.</div>
+  </div>
+</div>"
+`;
+
+exports[`Alert should render examples: Alert 2`] = `
+"<div>
+  <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
+    <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">TITLE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BLOCK</span></label>
+  </div>
+  <div class=\\"u-mb-1\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyAlert-primary action MuiPaper-elevation0\\" role=\\"alert\\">
+      <div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <defs>
+            <path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
+          </defs>
+          <use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
+        </svg></div>
+      <div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-7\\">
+        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">PRIMARY</div>This is a primary alert
+      </div>
+      <div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
+    </div>
+  </div>
+  <div class=\\"u-mb-1\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyAlert-secondary action MuiPaper-elevation0\\" role=\\"alert\\">
+      <div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <defs>
+            <path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
+          </defs>
+          <use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
+        </svg></div>
+      <div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-8\\">
+        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">SECONDARY</div>This is a secondary alert
+      </div>
+      <div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
+    </div>
+  </div>
+  <div class=\\"u-mb-1\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyAlert-success action MuiPaper-elevation0\\" role=\\"alert\\">
+      <div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 48 48\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <path fill-rule=\\"evenodd\\" d=\\"M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24zM13.414 24.586a2 2 0 00-2.828 2.828l7 7a2 2 0 002.828 0l15-15a2 2 0 00-2.828-2.828L19 30.172l-5.586-5.586z\\"></path>
+        </svg></div>
+      <div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-9\\">
+        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">SUCCESS</div>This is a success alert
+      </div>
+      <div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-success MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
+    </div>
+  </div>
+  <div class=\\"u-mb-1\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardError cozyAlert-error action MuiPaper-elevation0\\" role=\\"alert\\">
+      <div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <path fill-rule=\\"evenodd\\" d=\\"M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 9.75C7.30964 9.75 6.75 10.3096 6.75 11C6.75 11.6904 7.30964 12.25 8 12.25C8.69036 12.25 9.25 11.6904 9.25 11C9.25 10.3096 8.69036 9.75 8 9.75ZM8 4C7.48716 4 7.06449 4.38604 7.00673 4.88338L7 5V8C7 8.55228 7.44772 9 8 9C8.51284 9 8.93551 8.61396 8.99327 8.11662L9 8V5C9 4.44772 8.55228 4 8 4Z\\"></path>
+        </svg></div>
+      <div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-10\\">
+        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">ERROR</div>This is a error alert
+      </div>
+      <div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-error MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
+    </div>
+  </div>
+  <div class=\\"u-mb-1\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardWarning cozyAlert-warning action MuiPaper-elevation0\\" role=\\"alert\\">
+      <div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
+        </svg></div>
+      <div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-11\\">
+        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">WARNING</div>This is a warning alert
+      </div>
+      <div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-warning MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
+    </div>
+  </div>
+  <div class=\\"u-mb-1\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardInfo cozyAlert-info action MuiPaper-elevation0\\" role=\\"alert\\">
+      <div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+          <defs>
+            <path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
+          </defs>
+          <use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
+        </svg></div>
+      <div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-12\\">
+        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">INFO</div>This is a info alert
+      </div>
+      <div class=\\"MuiAlert-action\\"><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-info MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></div>
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`AppTitle should render examples: AppTitle 1`] = `
 "<div>
   <h1 class=\\"MuiTypography-root styles__c-apptitle___eqV9l MuiTypography-h4\\">Drive</h1>
@@ -107,7 +207,7 @@ exports[`Badge should render examples: Badge 1`] = `
 </div>"
 `;
 
-exports[`Badge should render examples: Badge 2`] = `"<div><span class=\\"MuiBadge-root\\"><div class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(127, 107, 238); --circleSize: 32px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div><span class=\\"MuiBadge-badge Component-qualifier-5 MuiBadge-anchorOriginBottomRightCircular\\"><span class=\\"MuiBadge-root\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\"><path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path></svg><span class=\\"MuiBadge-badge badgeSizeSmall badgeBorder MuiBadge-anchorOriginTopRightCircular MuiBadge-colorError MuiBadge-dot\\"></span></span></span></span></div>"`;
+exports[`Badge should render examples: Badge 2`] = `"<div><span class=\\"MuiBadge-root\\"><div class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna\\" style=\\"background-color: rgb(127, 107, 238); --circleSize: 32px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div><span class=\\"MuiBadge-badge Component-qualifier-13 MuiBadge-anchorOriginBottomRightCircular\\"><span class=\\"MuiBadge-root\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\"><path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path></svg><span class=\\"MuiBadge-badge badgeSizeSmall badgeBorder MuiBadge-anchorOriginTopRightCircular MuiBadge-colorError MuiBadge-dot\\"></span></span></span></span></div>"`;
 
 exports[`Banner should render examples: Banner 1`] = `
 "<div>
@@ -2399,187 +2499,187 @@ exports[`DropdownText should render examples: DropdownText 1`] = `
 "<div>
   <div class=\\"MuiGrid-root MuiGrid-container\\">
     <div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\">Default <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-15\\">
-          <h1 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-16 MuiTypography-h1 MuiTypography-colorTextPrimary\\">h1</h1>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-17 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"24\\" height=\\"24\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-23\\">
+          <h1 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-24 MuiTypography-h1 MuiTypography-colorTextPrimary\\">h1</h1>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-25 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"24\\" height=\\"24\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-18\\">
-          <h2 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-19 MuiTypography-h2 MuiTypography-colorTextPrimary\\">h2</h2>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-20 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"17\\" height=\\"17\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-26\\">
+          <h2 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-27 MuiTypography-h2 MuiTypography-colorTextPrimary\\">h2</h2>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-28 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"17\\" height=\\"17\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-21\\">
-          <h3 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-22 MuiTypography-h3 MuiTypography-colorTextPrimary\\">h3</h3>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-23 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"15\\" height=\\"15\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-29\\">
+          <h3 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-30 MuiTypography-h3 MuiTypography-colorTextPrimary\\">h3</h3>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-31 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"15\\" height=\\"15\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-24\\">
-          <h4 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-25 MuiTypography-h4 MuiTypography-colorTextPrimary\\">h4</h4>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-26 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"14\\" height=\\"14\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-32\\">
+          <h4 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-33 MuiTypography-h4 MuiTypography-colorTextPrimary\\">h4</h4>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-34 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"14\\" height=\\"14\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-27\\">
-          <h5 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-28 MuiTypography-h5 MuiTypography-colorTextPrimary\\">h5</h5>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-29 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"13\\" height=\\"13\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-35\\">
+          <h5 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-36 MuiTypography-h5 MuiTypography-colorTextPrimary\\">h5</h5>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-37 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"13\\" height=\\"13\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-30\\">
-          <h6 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-31 MuiTypography-subtitle1 MuiTypography-colorTextPrimary\\">subtitle1</h6>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-32 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"11\\" height=\\"11\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-38\\">
+          <h6 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-39 MuiTypography-subtitle1 MuiTypography-colorTextPrimary\\">subtitle1</h6>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-40 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"11\\" height=\\"11\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-33\\">
-          <h6 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-34 MuiTypography-subtitle2 MuiTypography-colorTextPrimary\\">subtitle2</h6>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-35 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-41\\">
+          <h6 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-42 MuiTypography-subtitle2 MuiTypography-colorTextPrimary\\">subtitle2</h6>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-43 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-36\\">
-          <p class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-37 MuiTypography-body1 MuiTypography-colorTextPrimary\\">body1</p>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-38 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-44\\">
+          <p class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-45 MuiTypography-body1 MuiTypography-colorTextPrimary\\">body1</p>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-46 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-39\\">
-          <p class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-40 MuiTypography-body2 MuiTypography-colorTextPrimary\\">body2</p>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-41 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"11\\" height=\\"11\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-47\\">
+          <p class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-48 MuiTypography-body2 MuiTypography-colorTextPrimary\\">body2</p>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-49 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"11\\" height=\\"11\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-42\\"><span class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-43 MuiTypography-caption MuiTypography-colorTextSecondary\\">caption</span>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-44 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-50\\"><span class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-51 MuiTypography-caption MuiTypography-colorTextSecondary\\">caption</span>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-52 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
     </div>
     <div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\">Disabled <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-45\\">
-          <h1 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-46 MuiTypography-h1 MuiTypography-colorTextPrimary\\">h1</h1>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-47 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"24\\" height=\\"24\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-53\\">
+          <h1 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-54 MuiTypography-h1 MuiTypography-colorTextPrimary\\">h1</h1>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-55 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"24\\" height=\\"24\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-48\\">
-          <h2 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-49 MuiTypography-h2 MuiTypography-colorTextPrimary\\">h2</h2>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-50 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"17\\" height=\\"17\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-56\\">
+          <h2 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-57 MuiTypography-h2 MuiTypography-colorTextPrimary\\">h2</h2>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-58 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"17\\" height=\\"17\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-51\\">
-          <h3 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-52 MuiTypography-h3 MuiTypography-colorTextPrimary\\">h3</h3>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-53 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"15\\" height=\\"15\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-59\\">
+          <h3 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-60 MuiTypography-h3 MuiTypography-colorTextPrimary\\">h3</h3>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-61 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"15\\" height=\\"15\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-54\\">
-          <h4 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-55 MuiTypography-h4 MuiTypography-colorTextPrimary\\">h4</h4>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-56 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"14\\" height=\\"14\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-62\\">
+          <h4 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-63 MuiTypography-h4 MuiTypography-colorTextPrimary\\">h4</h4>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-64 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"14\\" height=\\"14\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-57\\">
-          <h5 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-58 MuiTypography-h5 MuiTypography-colorTextPrimary\\">h5</h5>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-59 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"13\\" height=\\"13\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-65\\">
+          <h5 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-66 MuiTypography-h5 MuiTypography-colorTextPrimary\\">h5</h5>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-67 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"13\\" height=\\"13\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-60\\">
-          <h6 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-61 MuiTypography-subtitle1 MuiTypography-colorTextPrimary\\">subtitle1</h6>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-62 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"11\\" height=\\"11\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-68\\">
+          <h6 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-69 MuiTypography-subtitle1 MuiTypography-colorTextPrimary\\">subtitle1</h6>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-70 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"11\\" height=\\"11\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-63\\">
-          <h6 class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-64 MuiTypography-subtitle2 MuiTypography-colorTextPrimary\\">subtitle2</h6>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-65 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-71\\">
+          <h6 class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-72 MuiTypography-subtitle2 MuiTypography-colorTextPrimary\\">subtitle2</h6>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-73 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-66\\">
-          <p class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-67 MuiTypography-body1 MuiTypography-colorTextPrimary\\">body1</p>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-68 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-74\\">
+          <p class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-75 MuiTypography-body1 MuiTypography-colorTextPrimary\\">body1</p>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-76 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-69\\">
-          <p class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-70 MuiTypography-body2 MuiTypography-colorTextPrimary\\">body2</p>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-71 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"11\\" height=\\"11\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-77\\">
+          <p class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-78 MuiTypography-body2 MuiTypography-colorTextPrimary\\">body2</p>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-79 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"11\\" height=\\"11\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
       <div class=\\"u-mb-1\\">
-        <div class=\\"makeStyles-container-12 makeStyles-container-72\\"><span class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-73 MuiTypography-caption MuiTypography-colorTextSecondary\\">caption</span>
-          <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-74 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\">
+        <div class=\\"makeStyles-container-20 makeStyles-container-80\\"><span class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-81 MuiTypography-caption MuiTypography-colorTextSecondary\\">caption</span>
+          <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-82 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\">
               <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
             </svg></p>
         </div>
       </div>
     </div>
   </div>
-  <div class=\\"makeStyles-container-12 makeStyles-container-75\\" style=\\"width: 150px; margin-bottom: 1rem;\\">
-    <p class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-76 MuiTypography-body1 MuiTypography-colorTextPrimary\\">This is a long text without ellipsis</p>
-    <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-77 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+  <div class=\\"makeStyles-container-20 makeStyles-container-83\\" style=\\"width: 150px; margin-bottom: 1rem;\\">
+    <p class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-84 MuiTypography-body1 MuiTypography-colorTextPrimary\\">This is a long text without ellipsis</p>
+    <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-85 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
         <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
       </svg></p>
   </div>
-  <div class=\\"makeStyles-container-12 makeStyles-container-78\\" style=\\"width: 150px; margin-bottom: 1rem;\\">
-    <p class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-79 MuiTypography-body1 MuiTypography-colorTextPrimary MuiTypography-noWrap\\">This is a long text with ellipsis</p>
-    <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-80 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+  <div class=\\"makeStyles-container-20 makeStyles-container-86\\" style=\\"width: 150px; margin-bottom: 1rem;\\">
+    <p class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-87 MuiTypography-body1 MuiTypography-colorTextPrimary MuiTypography-noWrap\\">This is a long text with ellipsis</p>
+    <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-88 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
         <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
       </svg></p>
   </div>
-  <div class=\\"makeStyles-container-12 makeStyles-container-81\\" style=\\"width: 100%; margin-bottom: 1rem;\\">
-    <p class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-82 MuiTypography-body1 MuiTypography-colorTextPrimary\\">Space between text and icon</p>
-    <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-83 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+  <div class=\\"makeStyles-container-20 makeStyles-container-89\\" style=\\"width: 100%; margin-bottom: 1rem;\\">
+    <p class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-90 MuiTypography-body1 MuiTypography-colorTextPrimary\\">Space between text and icon</p>
+    <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-91 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
         <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
       </svg></p>
   </div>
-  <div class=\\"makeStyles-container-12 makeStyles-container-84\\">
-    <p class=\\"MuiTypography-root makeStyles-typography-13 makeStyles-typography-85 MuiTypography-body1 MuiTypography-colorTextPrimary\\">Text with<br>breaking spaces<br>inside content</p>
-    <p class=\\"MuiTypography-root makeStyles-endIcon-14 makeStyles-endIcon-86 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+  <div class=\\"makeStyles-container-20 makeStyles-container-92\\">
+    <p class=\\"MuiTypography-root makeStyles-typography-21 makeStyles-typography-93 MuiTypography-body1 MuiTypography-colorTextPrimary\\">Text with<br>breaking spaces<br>inside content</p>
+    <p class=\\"MuiTypography-root makeStyles-endIcon-22 makeStyles-endIcon-94 MuiTypography-body1 MuiTypography-colorTextPrimary\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
         <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
       </svg></p>
   </div>
@@ -2954,98 +3054,98 @@ exports[`Icon should render examples: Icon 1`] = `
 "<div>
   <p class=\\"MuiTypography-root u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">Font size: <input type=\\"range\\" min=\\"8\\" max=\\"48\\" value=\\"16\\"> 16px</p>
   <div style=\\"font-size: 2rem; display: grid; grid-template-columns: repeat(6, 1fr);\\">
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M1 3.01A3.005 3.005 0 014.003 0h9.99C14.55 0 15 .444 15 1c0 .552-.456 1-1.002 1H4.002a1 1 0 00-.012 2H8.51C8.78 4 9 4.228 9 4.491V10l1.5-1 1.5 1V4.491A.49.49 0 0112.495 4h1.506c.552 0 .999.456.999 1.002v9.996C15 15.55 14.55 16 13.993 16h-9.99A3 3 0 011 12.99V3.01z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Album</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M1 3.01A3.005 3.005 0 014.003 0h9.99C14.55 0 15 .444 15 1c0 .552-.456 1-1.002 1H4.002a.999.999 0 100 2h9.996C14.55 4 15 4.456 15 5.002v9.996C15 15.55 14.55 16 13.993 16h-9.99A3 3 0 011 12.99V3.01zM8 6h2v3h3v2h-3v3H8v-3H5V9h3V6z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">AlbumAdd</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M1 3.009A3.004 3.004 0 014.003 0h9.99C14.549 0 15 .444 15 1c0 .552-.456 1-1.002 1H4.002a.999.999 0 100 2h9.996C14.551 4 15 4.456 15 5.002v9.996c0 .553-.45 1.002-1.007 1.002h-9.99A3 3 0 011 12.991V3.009zM8 9h5v2H5V9h3z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">AlbumRemove</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M11.586 7H7a3 3 0 00-3 3v4a1 1 0 01-2 0v-4a5 5 0 015-5h4.586L9.293 2.707a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 11-1.414-1.414L11.586 7z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Answer</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M11.88 8.5c.023 2.422 2.125 3.227 2.148 3.238-.018.056-.336 1.148-1.107 2.275-.667.975-1.36 1.946-2.45 1.966-1.07.02-1.415-.635-2.64-.635s-1.607.615-2.622.655c-1.052.04-1.853-1.054-2.526-2.025C1.31 11.987.26 8.36 1.67 5.912c.7-1.215 1.952-1.985 3.31-2.005 1.034-.02 2.01.695 2.641.695.632 0 1.817-.86 3.063-.733.522.022 1.986.21 2.927 1.587-.076.047-1.748 1.02-1.73 3.044M9.868 2.555c.559-.677.935-1.618.832-2.555-.805.032-1.779.537-2.357 1.213-.517.598-.97 1.556-.848 2.475.897.069 1.814-.457 2.373-1.133\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Apple</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M1 4h14v10.004a1 1 0 01-1.007.996H2.007A1 1 0 011 14.004V4zM0 2c0-.552.445-1 1-1h14c.552 0 1 .444 1 1v1H0V2zm5 4v2h6V6H5z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Archive</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2.43 14.43C.457 12.457.337 9.385 2.16 7.56l6.3-6.3c1.327-1.325 3.563-1.237 4.997.197 1.434 1.434 1.522 3.67.196 4.996l-5.1 5.1c-.828.828-2.227.773-3.123-.123-.895-.895-.95-2.294-.122-3.122l4.5-4.5 1.298 1.298L6.552 9.66c-.33.33.319.979.649.649l5.154-5.154c.66-.66.616-1.784-.098-2.498-.714-.714-1.838-.758-2.498-.098l-6.3 6.3c-1.158 1.158-1.081 3.119.171 4.371 1.253 1.253 3.214 1.33 4.372.172l5.7-5.7L15 9l-5.7 5.7c-1.824 1.824-4.897 1.703-6.87-.27z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Attachment</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 2l8 12H0L8 2zM7 6v4h2V6H7zm0 5v2h2v-2H7z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Attention</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M7.979 0L0 5.066v1.966h15.958V5.066L7.979 0zm4 13.063h2v-5h-2v5zm-5 0h2v-5h-2v5zm-5 0h2v-5h-2v5zm-1.979 3h15.958v-2H0v2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Bank</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 8v5h12V4H2v1h12v3H2zm0-6h12a2 2 0 012 2v9a2 2 0 01-2 2H2a2 2 0 01-2-2V4a2 2 0 012-2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Banking</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 11.003l3-.001c0 .702.127 1.372.35 1.998H1.996A2.003 2.003 0 010 11.003V1.997C0 .898.9 0 1.997 0h12.006C15.101 0 16 .898 16 1.997v5.689a6.031 6.031 0 00-1.999-1.876V6H1.998L2 11.003zM1.997 2v1H14V2H1.997zM11 8h2v3h3v2h-3v3h-2v-3H8v-2h3V8z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">BankingAdd</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M13.993 13H2.007A1.001 1.001 0 112 11V9c0-2.45 1.333-5.566 4-6.627v-.379C6 .893 6.888 0 8 0c1.105 0 2 .895 2 1.994v.38C12.667 3.433 14 6.55 14 9v2c.552 0 1 .444 1 1 0 .552-.45 1-1.007 1zM6 14h4v.006A1.992 1.992 0 018 16c-1.105 0-2-.895-2-1.994V14z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Bell</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M12.5 3a2 2 0 11-4 0 2 2 0 014 0zM8.457 7.543c.182.156.379.309.588.453C9.816 8.53 10.838 9 12 9a1 1 0 100-2c-.62 0-1.25-.257-1.819-.65s-.999-.867-1.204-1.164A1.561 1.561 0 007.701 4.5c-.394 0-.772.156-1.05.435L4.447 7.139a1.527 1.527 0 00.233 2.35L7 11.034V14a1 1 0 102 0v-3.5a1 1 0 00-.445-.832l-1.334-.89 1.236-1.235z\\"></path>
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M16 13a3 3 0 11-6 0 3 3 0 016 0zm-1.5 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM3 16a3 3 0 100-6 3 3 0 000 6zm0-1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Bike</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M13 8a3.99 3.99 0 012.669 1.02l.159.151-1.414 1.415a1.989 1.989 0 00-3.051.28l-.085.134H13v2h-1.722c.347.595.985 1 1.722 1a2 2 0 001.288-.47l.125-.116 1.415 1.415a3.987 3.987 0 01-6.632-1.639L9.142 13H8v-2h1.142A3.99 3.99 0 0113 8zm-8 4a1 1 0 010 2H1a1 1 0 010-2h4zm0-4a1 1 0 010 2H1a1 1 0 010-2h4zm10-8a1 1 0 010 2H1a1 1 0 010-2h14zm0 4a1 1 0 010 2H1a1 1 0 010-2h14z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Bill</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M3.968 6.175a1.571 1.571 0 00-2.222 2.222l9.429 9.428a1.571 1.571 0 002.222 0l9.428-9.428a1.571 1.571 0 00-2.222-2.222l-8.317 8.317-8.318-8.317z\\" fill-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Bottom</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M14.808 5.161l-.314 1.212-1.435 5.491a2.805 2.805 0 01-1.079 1.569s-1.536 1.09-3.482 2.365c-.154.101-.313.17-.483.17-.17 0-.33-.069-.484-.17a124.63 124.63 0 01-3.482-2.36 2.788 2.788 0 01-1.084-1.568L1.519 6.379 1.2 5.172l.489-1.334-.356-.797a.214.214 0 01.048-.234l.946-.957c.41-.42 1.02-.564 1.573-.367l.255.09L5.575.021 7.999 0h.016l2.408.016 1.424 1.541.26-.09a1.507 1.507 0 011.563.362l.93.94a.27.27 0 01.054.293l-.34.765.494 1.334zM8.323 9.823a.648.648 0 00-.154-.048h-.17a.648.648 0 00-.154.048l-.692.287c-.063.027-.17.075-.233.107l-1.042.542c-.064.032-.07.09-.01.133l.919.648c.058.043.149.112.202.16l.409.35.191.17.394.352a.146.146 0 00.191 0l.404-.351.191-.17.41-.357c.053-.047.143-.117.202-.159l.92-.654c.058-.042.052-.1-.011-.133l-1.042-.531a4.547 4.547 0 00-.234-.107l-.691-.287zm4.987-4.425c.02-.069.02-.095.02-.095 0-.07-.004-.186-.015-.255l-.053-.155a1.86 1.86 0 00-.128-.223l-.6-.888a2.608 2.608 0 00-.155-.207l-.776-.973c-.042-.053-.085-.1-.09-.095h-.01l-.128.021-1.186.234c-.069.016-.18.037-.25.048l-.02.005a.662.662 0 01-.25-.016l-.995-.319a5.863 5.863 0 00-.244-.069s-.202-.048-.367-.043c-.165 0-.367.043-.367.043-.069.016-.18.048-.244.07l-.994.318a.662.662 0 01-.25.016l-.021-.005c-.07-.01-.181-.038-.25-.048L4.74 2.539a1.062 1.062 0 00-.128-.022h-.01a.532.532 0 00-.09.096l-.777.973c-.042.053-.111.149-.154.207l-.6.888a3.04 3.04 0 00-.128.223l-.053.154c-.01.07-.022.186-.016.255 0 0 0 .022.021.096a.858.858 0 00.128.245c.042.053.122.143.17.19l1.76 1.872a.22.22 0 01.036.213l-.366.866a.368.368 0 00-.006.24l.101.27c.085.229.229.43.42.585l.356.287a.218.218 0 00.213.027l1.127-.537c.064-.032.16-.096.213-.144l.807-.728a.286.286 0 00.016-.404L6.086 7.248a.148.148 0 01-.048-.186l.744-1.403a.31.31 0 00.01-.229l-.09-.207a.365.365 0 00-.17-.165L4.348 4.24c-.064-.027-.064-.054.005-.059l1.409-.133c.069-.005.18.006.25.021l1.254.351c.069.022.111.09.1.16l-.435 2.386c-.01.07-.01.165.005.218.016.054.085.101.154.117l.872.186c.07.016.18.016.25 0l.813-.186c.07-.016.138-.069.154-.117a.493.493 0 00.006-.218l-.43-2.386c-.011-.07.031-.144.1-.16l1.255-.35a.783.783 0 01.25-.022l1.408.133c.07.005.075.032.005.059l-2.184.829a.342.342 0 00-.17.165l-.09.207c-.027.064-.027.17.01.228l.75 1.404a.15.15 0 01-.048.186L8.345 8.407a.281.281 0 00.016.404l.808.728a.912.912 0 00.212.138l1.133.537c.063.032.16.016.212-.026l.356-.293a1.3 1.3 0 00.415-.584l.101-.271a.369.369 0 00-.005-.24l-.367-.866a.22.22 0 01.037-.213l1.76-1.87.17-.192c-.01-.016.085-.133.117-.26z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">BrowserBrave</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M4.036 6.978l-2.29-3.966A7.985 7.985 0 018 .001a7.996 7.996 0 016.883 3.921H8.356a4.101 4.101 0 00-4.32 3.055zm6.828-1.9h4.585a8 8 0 01-7.359 10.92l3.273-5.665a4.081 4.081 0 00-.498-5.254zm-5.77 2.923A2.91 2.91 0 018 5.094a2.91 2.91 0 012.906 2.907A2.91 2.91 0 018 10.907 2.91 2.91 0 015.094 8zm4.003 3.944l-2.29 3.967a8.002 8.002 0 01-5.78-11.834l3.266 5.657a4.099 4.099 0 004.804 2.21z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">BrowserChrome</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 .013a8 8 0 011.942 15.761l-.223-.43a18.303 18.303 0 01-.7-.256.164.164 0 01-.053.068.491.491 0 01-.06.034c-.016.063-.041.11-.078.134-.216.144-.828.216-1.152.144a.295.295 0 01-.13-.06c-.552.306-1.346.714-1.507.622-.252-.144-.291-2.184-.252-2.521.04-.337.263-.486.317-.501a.102.102 0 00-.053.086c-.036.468 0 2.376.252 2.52.161.093.954-.315 1.506-.621a.295.295 0 00.131.06c.324.072.936 0 1.152-.144.036-.024.061-.072.078-.135a.495.495 0 00.06-.033.164.164 0 00.054-.068 23.637 23.637 0 00.287.109l.024.009.004.002.022.008.007.002a28.042 28.042 0 00.03.011l.019.007.01.004.019.006.011.005.018.006.013.005.017.006.013.004.017.007.013.004.018.006.014.005.016.006.015.005.016.006a9.84 9.84 0 01.03.01l.016.006.029.01.017.006.014.004.018.006.014.005.017.006.014.004.017.006.014.005.017.005.014.005.018.006.013.004.018.005.014.005.017.005a4.139 4.139 0 01.03.01l.014.004.018.006.012.004.019.005.012.004.02.006.01.003.025.007.004.002.03.008.005.002.024.006.01.003.019.005.01.003.018.005.011.003.017.005c.004 0 .007.002.011.003.006 0 .011.002.017.004a4.868 4.868 0 00.115.027l.015.004a1.763 1.763 0 00.025.005l.01.001.016.004.007.001a2 2 0 00.02.004h.003l.022.004h.005l.016.003h.007l.014.003h.007l.013.002h.008l.01.002h.009a.515.515 0 00.018.001h.01a.38.38 0 00.016.001h.03l.006-.001.008-.001h.006l.007-.002h.005l.008-.003h.003a.071.071 0 00.022-.009l.001-.001a.09.09 0 00.01-.008l.002-.001a.122.122 0 00.021-.024.338.338 0 00.04-.077c.183-.488.094-2.305-.193-2.37-.259-.058-1.25.641-1.641.926a1.18 1.18 0 00-.042-.144c-.027-.068-.224-.09-.457-.073-.468-1.098-.832-2.39-.625-3.295l.002.002c.273.19 2.094.804 2.997.787.904-.017 2.39-.571 2.226-1.015-.162-.443-1.637.392-3.175.25-1.139-.107-1.34-.617-1.088-.99.317-.468.895.09 1.848-.196.955-.285 2.29-.794 2.785-1.071 1.145-.638-.48-.903-.863-.726-.363.168-1.63.487-2.216.629.33-1.16-.462-3.18-1.345-4.063-.288-.288-.731-.47-1.23-.565-.192-.263-.502-.515-.94-.748a4.42 4.42 0 00-2.76-.449c-.135.018-.208.067-.31.084.113.01.542.21.811.32-.131.05-.311.08-.452.138a.661.661 0 00-.162.046c-.132.06-.231.288-.23.395.643-.065 1.596-.02 2.292.188-.493.069-.946.197-1.274.37a2.438 2.438 0 00-.047.025.991.991 0 00-.103.047c-1.05.553-1.513 1.844-1.237 3.391.26 1.448 1.344 6.493 1.797 8.668A8.003 8.003 0 010 8.013a8 8 0 018-8zM5.077 5.132c-.425.267-.409.54-.409.54s-.226-.503.376-.75c.602-.246.896.14.896.14s-.438-.197-.863.07zm.805 1.419a.15.15 0 10.3 0 .15.15 0 10-.3 0zm-.107.774a.58.58 0 010-1.16v-.001a.58.58 0 010 1.16zm4.101-1.22a.13.13 0 10.003.26.13.13 0 00.127-.13.129.129 0 00-.13-.13zm-.721.296a.5.5 0 110 .001zm.328-1.749c.347.058.47.37.47.37s-.314-.179-.558-.176c-.5.007-.638.228-.638.228s.085-.528.726-.422z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">BrowserDuckduckgo</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <g fill-rule=\\"evenodd\\">
           <path d=\\"M15.27 7.592c0-1.517-.31-2.831-.928-3.943-.66-1.178-1.534-2.08-2.623-2.708C10.63.313 9.399 0 8.025 0c-.88 0-1.702.128-2.466.383a6.575 6.575 0 00-1.994 1.048 7.578 7.578 0 00-1.494 1.57 8.157 8.157 0 00-1.026 1.936 9.791 9.791 0 00-.52 2.14c.36-.517.768-.998 1.22-1.443.458-.45.981-.867 1.57-1.254a8.07 8.07 0 011.993-.932 8.673 8.673 0 012.316-.397l.196.011c.131.006.298.032.5.076.201.044.425.106.668.183.245.076.484.198.719.365.234.165.444.364.629.593.184.228.324.53.419.905.096.374.12.79.072 1.248H5.162c.095-.558.231-1.034.41-1.423.179-.389.41-.762.696-1.12-1.255.583-2.222 1.38-2.9 2.392-.677 1.01-1.008 2.235-.99 3.675.012 1.165.382 2.273 1.111 3.32.729 1.045 1.655 1.786 2.779 2.22.839.321 1.778.479 2.82.473 1.04-.006 1.97-.12 2.787-.34.817-.22 1.5-.493 2.047-.82v-3.363c-.435.303-.95.554-1.548.753-.598.2-1.216.339-1.856.415a7.04 7.04 0 01-1.9-.027 5.815 5.815 0 01-1.69-.508 2.988 2.988 0 01-1.218-1.092c-.313-.486-.471-1.058-.477-1.718H15.27V7.592z\\"></path>
           <path fill-rule=\\"nonzero\\" d=\\"M.536 7.144h.029l.007-.05-.036.05z\\"></path>
@@ -3053,108 +3153,108 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">BrowserEdge</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M13.497 10.13c-1.596.407-2.663.273-3.33.043a.894.894 0 01-.536-1.2c.376-.895.637-2.568-1.443-4.218l-.003-.002c-.001-.001-.003-.003-.005-.003-3.684-2.316-6.653-.294-7.386.292a.07.07 0 01-.109-.075C1.015 3.952 2.746-.158 9.051.029c4.547.135 7.145 4.274 6.693 7.355a3.525 3.525 0 01-2.247 2.746zM8.34 6.628c.406.086-1.98-1.894-4.916-1.448-1.02.155-3.37 1.041-3.173 4.2.353 5.669 4.952 6.497 6.485 6.615a.178.178 0 00.137-.305c-.113-.108-.253-.228-.409-.36-.972-.832-2.568-2.196-2.136-4.65.452-2.572 2.297-4.413 4.012-4.052zm1.596 9.152c-1.95.103-3.783-1.294-4.278-3.247-.335-1.322-.136-2.56.597-3.71.009-.014.017-.03.025-.046.033-.063.07-.134.159-.112.062.015.064.077.067.135 0 .016 0 .031.003.045.195 1.485 1.042 2.518 2.328 3.192 1.827.956 3.685.909 5.533.023.034-.016.068-.036.102-.055.15-.086.31-.177.463-.012.171.183.05.355-.059.51a2.476 2.476 0 00-.049.073c-.987 1.512-2.254 2.662-4.071 3.091a6.402 6.402 0 01-.525.097c-.098.01-.197.016-.295.016z\\" fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">BrowserEdgeChromium</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M15.79 5.961a.13.13 0 00-.14.075l-.178.395c-.067-.519-.193-1.355-.359-1.903a3.664 3.664 0 00-.812-1.412.13.13 0 00-.22.12l.139.626c-.334-.349-.87-.85-1.4-1.093a9.105 9.105 0 00-.37-.168 6.264 6.264 0 00-4.164-1.588 6.246 6.246 0 00-5.293 2.902 1.16 1.16 0 01-.352-.467c-.16-.393-.241-.834-.242-.838a.13.13 0 00-.219-.072c-.96.921-.865 2.357-.83 2.682a7.072 7.072 0 00-.794 1.048C.134 6.944.006 8.125 0 8.175a.13.13 0 00.225.103l.28-.297c-.03.114-.06.243-.09.388C.29 8.996.328 9.967.33 10.008a.13.13 0 00.249.05l.165-.35c.122.853.59 2.666 2.385 4.337 1.33 1.238 3.179 1.949 5.073 1.949 1.84 0 3.576-.658 5.021-1.902 1.71-1.473 2.347-3.576 2.58-5.08.251-1.625.104-2.885.098-2.937a.13.13 0 00-.11-.114zm-2.919.047c.002.003.18.235.218.83.027.445-.065 1.158-.122 1.547l-.349-.404a.13.13 0 00-.229.101c.002.01.12 1.017-.08 1.891a2.791 2.791 0 01-.369.902l.049-.659a.13.13 0 00-.25-.064c-.005.013-.609 1.31-2.262 1.823a2.49 2.49 0 01-.723.107c-.882 0-1.682-.45-2.136-.766l.116.003c.65 0 1.15-.28 1.552-.505.106-.059.206-.115.302-.162.577-.29.846-.315 1.052-.315a.216.216 0 00.22-.166c.064-.251-.238-.7-.611-.904a1.254 1.254 0 00-.623-.148c-.381 0-.854.12-1.531.304a1.42 1.42 0 01-.365.05c-.415 0-.69-.201-.846-.37-.212-.226-.332-.526-.314-.78.008-.117.053-.236.33-.236.246 0 .52.1.522.102a.13.13 0 00.046.008h.001a.13.13 0 00.13-.151L6.561 6.9c.132-.084.448-.29.751-.51.735-.534.833-.738.755-.893-.104-.212-.379-.246-.696-.286a3.054 3.054 0 01-.573-.11c-.388-.129-.643-.463-.701-.545a.784.784 0 01.073-.499c.123-.216.549-.55.702-.662a.13.13 0 00-.062-.236c-.013-.001-.404-.04-1.042.171-.52.174-.922.456-1.06.56a3.823 3.823 0 00-.332-.045 5.202 5.202 0 013.909-1.762 5.15 5.15 0 013.033.973l-.879.147a.13.13 0 00-.017.254c.012.003 1.182.373 2.055 1.047.195.152.372.349.529.585.145.313.26.635.34.962l-.294-.229a.131.131 0 00-.182.185z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">BrowserFirefox</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M15.826 8.135a7.08 7.08 0 00-.89-3.448c2.417-5.472-2.591-4.67-2.87-4.616a12.737 12.737 0 00-2.949.964A7.114 7.114 0 001.782 6.54C3.563 4.542 4.81 3.736 5.556 3.413c-.119.106-.236.214-.35.323l-.113.108a15.62 15.62 0 00-.225.22l-.13.131-.194.2-.134.143a17.71 17.71 0 00-.89 1.024l-.139.173-.132.167-.12.159-.136.179c-.032.042-.062.084-.093.127-.281.383-.538.76-.77 1.12l-.002.003c-.06.095-.12.189-.177.282l-.01.015a22.37 22.37 0 00-.168.276l-.006.01c-.146.243-.282.479-.404.7-.64 1.16-.952 1.972-.966 2.02-2.022 7.231 4.29 4.177 5.171 3.722a7.114 7.114 0 009.849-3.998H11.68c-.553.934-1.617 1.566-2.84 1.566-1.792 0-3.244-1.357-3.244-3.032h10.172c.038-.3.058-.606.058-.916zm-1.329-6.998c.613.413 1.104 1.062.26 3.248a7.136 7.136 0 00-3.473-2.883c.659-.317 2.288-.99 3.213-.365zM1.482 14.5c-.499-.512-.587-1.758.514-4.028a7.133 7.133 0 003.097 3.785c-.713.392-2.605 1.275-3.61.243zM5.58 7.106c.056-1.628 1.473-2.93 3.213-2.93s3.157 1.302 3.214 2.93H5.58z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">BrowserIe</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8.617 2.144a5.126 5.126 0 012.278-.539 5.16 5.16 0 012.642.737 7.891 7.891 0 012.298 5.576 7.892 7.892 0 01-2.298 5.576 5.16 5.16 0 01-2.642.736 5.124 5.124 0 01-2.279-.54c2.014-.415 3.559-2.841 3.559-5.772 0-2.932-1.545-5.358-3.558-5.774zM7.54 15.826A7.917 7.917 0 017.918 0h.03a7.888 7.888 0 015.247 2.016 5.713 5.713 0 00-3.174-.97c-1.885 0-3.574.935-4.71 2.41-.875 1.033-1.442 2.56-1.48 4.275v.373c.038 1.714.605 3.242 1.48 4.275 1.136 1.475 2.825 2.41 4.71 2.41 1.16 0 2.245-.353 3.173-.969a7.89 7.89 0 01-5.654 2.006z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">BrowserOpera</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8.806 8.806L7.194 7.194l-.807 2.419 2.42-.807zM8 0c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm0 14.667A6.674 6.674 0 0014.667 8 6.674 6.674 0 008 1.333 6.674 6.674 0 001.333 8 6.674 6.674 0 008 14.667zM4.28 11.72l1.86-5.58 5.58-1.86-1.86 5.58-5.58 1.86z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">BrowserSafari</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M0 3c0-.552.445-1 1-1h14c.552 0 1 .444 1 1 0 .552-.445 1-1 1H1c-.552 0-1-.444-1-1zm0 10c0-.552.445-1 1-1h14c.552 0 1 .444 1 1 0 .552-.445 1-1 1H1c-.552 0-1-.444-1-1zm0-5c0-.552.445-1 1-1h14c.552 0 1 .444 1 1 0 .552-.445 1-1 1H1c-.552 0-1-.444-1-1z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Burger</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M1 11c0 .88.39 1.67 1 2.22v1.28c0 .83.67 1.5 1.5 1.5S5 15.33 5 14.5V14h6v.5c0 .82.67 1.5 1.5 1.5.82 0 1.5-.67 1.5-1.5v-1.28c.61-.55 1-1.34 1-2.22V4c0-3-3-4-7-4S1 1 1 4v7zm3.5 1c-.83 0-1.5-.67-1.5-1.5S3.67 9 4.5 9 6 9.67 6 10.5 5.33 12 4.5 12zm7 0c-.83 0-1.5-.67-1.5-1.5S10.67 9 11.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM13 7H3V3h10v4z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Bus</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M13 1h3v2H0V1h3V0h2v1h6V0h2v1zM0 4h16v10.998A1 1 0 0115 16H1c-.552 0-1-.456-1-1.002V4zm2 2v8h12V6H2zm6 3h5v4H8V9z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Calendar</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M5.5 1h5l2 2H14c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h1.5l2-2zM8 13c2.208 0 4-1.792 4-4s-1.792-4-4-4-4 1.792-4 4 1.792 4 4 4zm0-2a2 2 0 110-4 2 2 0 010 4z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Camera</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M13.92 2.01C13.72 1.42 13.16 1 12.5 1h-9c-.66 0-1.21.42-1.42 1.01L.11 6.68c-.07.21-.11.43-.11.66v6.16c0 .83.67 1.5 1.5 1.5S3 14.33 3 13.5V13h10v.5c0 .82.67 1.5 1.5 1.5.82 0 1.5-.67 1.5-1.5V7.34c0-.22-.04-.45-.11-.66l-1.97-4.67zM3.5 11C2.67 11 2 10.33 2 9.5S2.67 8 3.5 8 5 8.67 5 9.5 4.33 11 3.5 11zm9 0c-.83 0-1.5-.67-1.5-1.5S11.67 8 12.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM2 6l1.27-2.82c.14-.4.52-.68.95-.68h7.56c.43 0 .81.28.95.68L14 6H2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Car</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M5.58 1.38a2.8 2.8 0 014.83-.02l.1.18.03.06h.07a2.8 2.8 0 012.93 2.29l.02.17.02.17a2.8 2.8 0 01-.36 1.54l-.1.17-.04.06.13.22a2.8 2.8 0 01-.6 3.5l-.14.12-.15.1c-.4.26-.85.42-1.32.46v5.3a.3.3 0 01-.48.23L8 14l-2.52 1.93a.3.3 0 01-.48-.24v-5.3a2.8 2.8 0 01-2.53-2.27l-.03-.18-.02-.17a2.8 2.8 0 01.36-1.53l.1-.18.04-.06-.04-.06a2.8 2.8 0 01.5-3.66l.15-.12.15-.1c.45-.3.97-.46 1.5-.47h.2l.08.01.12-.22zm2.78.7a.8.8 0 00-1.02.26l-.06.1-.62 1.24-1.4-.08a.8.8 0 00-.76 1.14l.05.1L5.32 6l-.77 1.16a.8.8 0 00.62 1.24h.1l1.39-.08.62 1.25a.8.8 0 00.6.43h.25a.8.8 0 00.53-.33l.06-.1.62-1.25 1.4.08a.8.8 0 00.76-1.14l-.05-.1L10.68 6l.77-1.16a.8.8 0 00-.62-1.24h-.1l-1.39.08-.62-1.25a.8.8 0 00-.36-.36z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">CarbonCopy</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M3.243 6.034L.671 4.842a.779.779 0 01-.396-.397c-.197-.496 0-.894.396-1.093L7.792.075c.198-.1.395-.1.594 0l7.12 3.277a.746.746 0 01.494.696.746.746 0 01-.494.695l-2.67 1.291-.594.298-3.856 1.887a.694.694 0 01-.693 0 840.224 840.224 0 00-3.857-1.887l-.593-.298zm12.03 4.807c.78.4.675 1.345-.086 1.756L8.421 15.9a.985.985 0 01-.864 0L.572 12.49a.779.779 0 01-.396-.397c-.197-.497 0-.894.396-1.093l.89-.397 2.472 1.192 3.627 1.73a.984.984 0 00.857-.005l3.725-1.825 2.373-1.19.756.336zm.53-3.218c.197.397 0 .894-.594 1.192l-2.274 1.092-.594.3-4.058 2.036a.98.98 0 01-.883 0l-4.058-2.037-.594-.299L.474 8.815a.777.777 0 01-.396-.398c-.198-.496 0-.894.396-1.092l1.285-.596 2.176.993 3.626 1.73a.986.986 0 00.858-.005l4.12-2.023 1.582-.794 1.286.596a.771.771 0 01.396.397z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Categories</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M11.806 5.468a.782.782 0 010 1.032l-.714.812a.782.782 0 00-.19.588L11 8.976a.782.782 0 01-.606.835l-1.057.24a.782.782 0 00-.5.363l-.553.93a.782.782 0 01-.98.32l-.995-.427a.782.782 0 00-.619 0l-.993.43a.782.782 0 01-.983-.318l-.553-.929a.782.782 0 00-.499-.363l-1.057-.24A.782.782 0 011 8.982L1.1 7.9a.782.782 0 00-.191-.587l-.715-.814a.782.782 0 010-1.031l.715-.819a.782.782 0 00.19-.587L1 2.988a.782.782 0 01.608-.836l1.054-.236a.782.782 0 00.501-.364l.552-.93a.783.783 0 01.982-.318l.995.427c.197.085.42.085.617 0l.995-.427a.782.782 0 01.981.319l.553.93c.11.185.29.316.5.363l1.057.24a.782.782 0 01.606.835l-.1 1.076c-.02.214.05.427.191.588l.714.813zm-7.526.001a.75.75 0 00-1.06 1.062l1.5 1.497a.75.75 0 001.06 0l3-2.997a.75.75 0 10-1.06-1.062L5.25 6.42l-.97-.95z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Certified</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M1.707 10.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l11-11a1 1 0 00-1.414-1.414L4 12.586l-2.293-2.293z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Check</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M14 14V8.243l2-2V14a2 2 0 01-2 2H2a2 2 0 01-2-2V2a2 2 0 012-2h11.757l-2 2H2v12h12z\\"></path>
         <path d=\\"M4.707 7.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l8-8a1 1 0 00-1.414-1.414L7 9.586 4.707 7.293z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Checkbox</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 48 48\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 48 48\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24zM13.414 24.586a2 2 0 00-2.828 2.828l7 7a2 2 0 002.828 0l15-15a2 2 0 00-2.828-2.828L19 30.172l-5.586-5.586z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">CheckCircle</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M7 1h9v2H7V1zm0 6h9v2H7V7zm0 6h9v2H7v-2zM1.825 3.716L.66 2.72a.918.918 0 01-.017-1.407 1.23 1.23 0 011.587-.014l.372.307L4.085.292a1.223 1.223 0 011.586 0 .915.915 0 010 1.405l-2.269 2.01A1.19 1.19 0 012.61 4a1.2 1.2 0 01-.785-.284zM1 12h4v4H1v-4zm1 1v2h2v-2H2zM1 6h4v4H1V6zm1 1v2h2V7H2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">CheckList</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0114.006 16H1.994A1.995 1.995 0 010 14.006V1.994zm3.707 7.299a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l8-8a1 1 0 00-1.414-1.414L5 10.586 3.707 9.293z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">CheckSquare</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <circle cx=\\"8\\" cy=\\"8\\" r=\\"8\\" fill-rule=\\"evenodd\\"></circle>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">CircleFilled</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 16A8 8 0 108 0a8 8 0 000 16zM7 8a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L9 7.6V4a1 1 0 10-2 0v4z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Clock</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <defs>
           <path d=\\"M164 261a4 4 0 118 0 4 4 0 110 8h-8a4 4 0 110-8zm1.146 3.854c.155.154.423.368.793.58.618.353 1.31.566 2.061.566.75 0 1.443-.213 2.06-.566.371-.212.64-.426.794-.58a.5.5 0 10-.708-.708 2.934 2.934 0 01-.582.42A3.136 3.136 0 01168 265a3.136 3.136 0 01-1.564-.434 2.934 2.934 0 01-.582-.42.5.5 0 10-.708.708z\\" id=\\"cloud_svg__a\\"></path>
         </defs>
@@ -3164,58 +3264,58 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Cloud</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M4 6a4 4 0 118 0 4 4 0 110 8H4a4 4 0 110-8zm1 3s0 2 3 2 3-2 3-2H5z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">CloudHappy</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M14.56 5.575c.279.756.44 1.571.44 2.425 0 .926-.184 1.807-.51 2.616.309.275.51.678.51 1.134 0 .828-.648 1.5-1.448 1.5a1.4 1.4 0 01-.712-.201 6.971 6.971 0 01-3.438 1.81C9.246 15.513 8.68 16 8 16c-.68 0-1.246-.487-1.402-1.141a6.971 6.971 0 01-3.438-1.81 1.4 1.4 0 01-.712.201c-.8 0-1.448-.672-1.448-1.5 0-.456.201-.859.51-1.134A6.979 6.979 0 011 8c0-.854.161-1.669.44-2.425A1.52 1.52 0 011 4.5C1 3.671 1.648 3 2.448 3c.194 0 .377.041.546.112a6.98 6.98 0 013.604-1.971C6.754.487 7.32 0 8 0c.68 0 1.246.487 1.402 1.141a6.98 6.98 0 013.604 1.971c.169-.071.352-.112.546-.112.8 0 1.448.671 1.448 1.5 0 .422-.169.802-.44 1.075zM2 8c0 .797.159 1.555.44 2.251l.008-.001c.8 0 1.448.671 1.448 1.5 0 .188-.037.365-.097.53.01.011.021.019.032.029a6.226 6.226 0 018.338 0l.032-.029a1.544 1.544 0 01-.097-.53c0-.829.648-1.5 1.448-1.5l.008.001a5.952 5.952 0 00.087-4.261c-.032.002-.063.01-.095.01-.8 0-1.448-.672-1.448-1.5 0-.255.067-.492.175-.702a5.98 5.98 0 00-2.977-1.652C9.068 2.649 8.576 3 8 3c-.576 0-1.068-.351-1.302-.854a5.98 5.98 0 00-2.977 1.652c.108.21.175.447.175.702 0 .828-.648 1.5-1.448 1.5-.032 0-.063-.008-.095-.01A5.952 5.952 0 002 8zm6 1.757c-1.439 0-2.607-1.29-2.607-2.878 0-1.59 1.168-2.88 2.607-2.88 1.439 0 2.607 1.29 2.607 2.88 0 1.589-1.168 2.878-2.607 2.878z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Collect</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M0 .999A.997.997 0 011 0h14a1 1 0 011 .999V12c0 .552-.453.999-.997.999H8l-6 3v-3H1A1 1 0 010 12V1zM4 5c0 .556.446 1 .997 1h6.006c.544 0 .997-.448.997-1 0-.556-.446-1-.997-1H4.997C4.453 4 4 4.448 4 5zm0 3c0 .556.444 1 .99 1h4.02A1 1 0 0010 8c0-.556-.444-1-.99-1H4.99A1 1 0 004 8z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Comment</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M10 0v16H0V0h10zM4 12v-2H2v2h2zm0-4V6H2v2h2zm0-4V2H2v2h2zm4 0V2H6v2h2zm0 4V6H6v2h2zm0 4v-2H6v2h2zm3-8h5v12h-5V4zm3.5 8v-2h-2v2h2zm0-4V6h-2v2h2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Company</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M7.864 10.663a2.667 2.667 0 002.8-2.8l1.22-3.175c.197-.51-.058-.77-.572-.573L8.136 5.337a2.667 2.667 0 00-2.8 2.8l-1.22 3.175c-.197.51.058.77.572.573l3.176-1.222zM8 16A8 8 0 118 0a8 8 0 010 16zm0-6.667a1.333 1.333 0 110-2.666 1.333 1.333 0 010 2.666z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Compass</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 20 27\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 20 27\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M9.7 13.45c.1.1.2.1.3.1.1 0 .2 0 .3-.1l6.2-5.8c.1-.1.1-.2.1-.3v-.2c-.1-.2-.2-.3-.4-.3h-3V.65c0-.2-.2-.4-.4-.4H7c-.2 0-.4.2-.4.4v6.2H3.8c-.2 0-.3.1-.4.3v.2c0 .1 0 .2.1.3l6.2 5.8z\\"></path>
         <path d=\\"M19.7 11.75l-3.3-1.6-1.8 1.7 2.9 1.4-7.5 3.7-7.5-3.7 2.9-1.4-1.8-1.8-3.3 1.6c-.2.2-.3.4-.3.6v9.3c0 .2.1.5.3.6l9.4 4.7c.1 0 .2.1.3.1.1 0 .2 0 .3-.1l9.4-4.7c.2-.1.3-.3.3-.6v-9.3c0-.2-.1-.4-.3-.5z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Connector</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M12.5 4h-3a.5.5 0 010-1h3a.5.5 0 010 1zm0 3h-3a.5.5 0 010-1h3a.5.5 0 010 1zm0 3h-9a.5.5 0 010-1h9a.5.5 0 010 1zm0 3h-9a.5.5 0 010-1h9a.5.5 0 010 1zM3 5V2h4v6L5 6 3 8V5zm11-5H2c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Contract</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M12.444 11.111H8v1.333h4.444v-1.333zM14 14H2L14 2v12zM2.222 4H4V2.222h1.333V4h1.778v1.333H5.333v1.778H4V5.333H2.222V4zm12-4H1.778C.79 0 0 .791 0 1.778v12.444C0 15.204.796 16 1.778 16h12.444c.982 0 1.778-.796 1.778-1.778V1.778C16 .79 15.2 0 14.222 0z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Contrast</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M4 6a4 4 0 118 0 4 4 0 110 8H4a4 4 0 110-8zm1 3s0 2 3 2 3-2 3-2H5z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">CozyLaugh</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 52 19\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 52 19\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M10.277 3.262c-.067.084-.143.16-.227.227a.516.516 0 01-.319.085.756.756 0 01-.436-.162 5.113 5.113 0 00-1.404-.702c-.325-.109-.725-.163-1.202-.163-.624 0-1.174.113-1.651.338-.47.219-.878.55-1.19.962-.316.416-.556.923-.721 1.521a7.592 7.592 0 00-.247 2.015c0 .771.087 1.458.26 2.06.173.603.42 1.11.741 1.521.32.412.71.724 1.17.937.46.212.97.318 1.534.318.546 0 .997-.067 1.352-.202.355-.134.65-.279.884-.435a5.93 5.93 0 00.585-.436c.156-.134.316-.201.481-.201.208 0 .368.078.481.234l.728.936a4.903 4.903 0 01-1.02.949 5.85 5.85 0 01-1.203.637c-.43.166-.877.288-1.332.364a8.488 8.488 0 01-1.411.117 5.846 5.846 0 01-2.308-.455 5.228 5.228 0 01-1.858-1.326c-.525-.58-.939-1.293-1.242-2.139C.419 9.417.267 8.458.267 7.383c0-.98.136-1.885.41-2.717a6.046 6.046 0 011.209-2.151 5.588 5.588 0 011.969-1.418C4.635.755 5.528.584 6.533.584c.945 0 1.777.152 2.496.455.72.303 1.36.732 1.924 1.287l-.676.936zM19.091.584c.97 0 1.848.158 2.633.474.76.3 1.444.767 2.001 1.366.55.593.973 1.308 1.268 2.145.295.836.442 1.774.442 2.814s-.147 1.98-.442 2.821c-.295.84-.717 1.556-1.267 2.145a5.527 5.527 0 01-2.002 1.358c-.785.317-1.662.475-2.633.475-.98 0-1.861-.158-2.645-.474a5.59 5.59 0 01-2.009-1.359c-.555-.59-.981-1.304-1.28-2.145-.3-.84-.449-1.781-.449-2.821 0-1.04.15-1.978.449-2.814a6.11 6.11 0 011.28-2.146 5.55 5.55 0 012.008-1.365c.785-.316 1.667-.474 2.646-.474zm0 11.622c1.248 0 2.18-.42 2.795-1.261.615-.84.923-2.024.923-3.549s-.308-2.71-.923-3.556c-.615-.845-1.547-1.267-2.795-1.267-1.265 0-2.208.422-2.828 1.267-.62.846-.929 2.03-.929 3.556 0 1.525.31 2.708.93 3.549.62.84 1.562 1.261 2.827 1.261zM37.46 1.858c0 .182-.032.36-.097.533-.066.173-.15.32-.254.442l-6.929 9.178h7.046V14H27.203v-1.066c0-.121.03-.266.091-.436.06-.169.147-.327.26-.474l6.968-9.243h-6.916V.792h9.854v1.066zM51.604.792l-7.332 17.043a1.07 1.07 0 01-.312.442c-.13.104-.32.156-.572.156h-1.885l2.418-5.265L38.5.792h2.21c.217 0 .386.052.507.156a.906.906 0 01.26.351l3.354 7.93c.07.2.136.4.201.605.064.199.118.4.163.604.12-.413.26-.821.416-1.222l3.237-7.917a.84.84 0 01.286-.364.73.73 0 01.442-.143h2.028z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">CozyText</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <g fill-rule=\\"evenodd\\">
           <path d=\\"M3.414 10H11a1 1 0 010 2H3.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 111.414 1.414L3.414 10z\\" opacity=\\"0.322\\"></path>
           <path d=\\"M12.586 4l-1.293-1.293a1 1 0 111.414-1.414l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L12.586 6H5a1 1 0 110-2h7.586z\\"></path>
@@ -3223,57 +3323,57 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Credit</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 8v5h12V4H2v1h12v3H2zm0-6h12a2 2 0 012 2v9a2 2 0 01-2 2H2a2 2 0 01-2-2V4a2 2 0 012-2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">CreditCard</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 11.003l3-.001c0 .702.127 1.372.35 1.998H1.996A2.003 2.003 0 010 11.003V1.997C0 .898.9 0 1.997 0h12.006C15.101 0 16 .898 16 1.997v5.689a6.031 6.031 0 00-1.999-1.876V6H1.998L2 11.003zM1.997 2v1H14V2H1.997zM11 8h2v3h3v2h-3v3h-2v-3H8v-2h3V8z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">CreditCardAdd</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M4 15v1H0v-4h1V4H0V0h4v1h8V0h4v4h-1v8h1v4h-4v-1H4zm0-2h8v-1h1V4h-1V3H4v1H3v8h1v1zM1 1v2h2V1H1zm12 0v2h2V1h-2zm0 12v2h2v-2h-2zM1 13v2h2v-2H1z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Crop</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M10.586 12L.293 1.707A1 1 0 011.707.293L12 10.586 22.293.293a1 1 0 011.414 1.414L13.414 12l10.293 10.293a1 1 0 01-1.414 1.414L12 13.414 1.707 23.707a1 1 0 01-1.414-1.414L10.586 12z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Cross</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 110 16A8 8 0 018 0zM5.707 4.293l-.094-.083a1 1 0 00-1.226 0l-.094.083-.083.094-.07.102a1 1 0 00.062 1.114l.09.104L6.586 8l-2.292 2.293a1 1 0 001.32 1.497l.094-.083L8 9.415l2.293 2.292.094.083a1 1 0 001.226 0l.094-.083.083-.094a1 1 0 000-1.226l-.083-.094L9.415 8l2.292-2.293a1 1 0 00-1.32-1.497l-.094.083L8 6.585 5.707 4.293l-.094-.083.094.083z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">CrossCircle</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M6 4.59l2.3-2.3a1 1 0 011.4 1.42L7.42 6l2.3 2.3A1 1 0 118.3 9.7L6 7.42l-2.3 2.3A1 1 0 112.3 8.3L4.58 6l-2.3-2.3A1 1 0 013.7 2.3L6 4.58z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">CrossSmall</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M1 11.009V5.5c0-.55.39-.773.872-.498l5.256 3.003c.476.272.872.944.872 1.495v5.508c0 .549-.39.772-.872.497l-5.256-3.003C1.396 12.231 1 11.56 1 11.01zm15 0c0 .55-.396 1.222-.872 1.494l-5.256 3.003c-.481.275-.872.052-.872-.497V9.5c0-.55.396-1.223.872-1.495l5.256-3.003c.481-.275.872-.052.872.498v5.508zM9.35 6.982c-.47.288-1.237.284-1.7 0l-4.8-2.954c-.47-.29-.463-.732.027-.995L7.623.477c.485-.261 1.264-.264 1.754 0l4.746 2.556c.485.26.49.71.027.995l-4.8 2.954z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Cube</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 7h12a1 1 0 010 2H2a1 1 0 110-2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Dash</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M9.118 10h4.532S14 8.722 14 8A6 6 0 102 8c0 .705.345 2 .345 2h4.537l2.224-4.447a1 1 0 011.788.894L9.118 10zM8 16A8 8 0 118 0a8 8 0 010 16z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Dashboard</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M14.792.198A.625.625 0 0115 .667v7.999c0 .598-.122 1.189-.366 1.776a6.574 6.574 0 01-.909 1.564c-.361.454-.79.896-1.289 1.328a14.745 14.745 0 01-2.708 1.88 19.53 19.53 0 01-.979.515c-.193.09-.348.161-.465.208A.646.646 0 018 16a.643.643 0 01-.284-.063 9.866 9.866 0 01-.465-.208 19 19 0 01-.98-.515 14.743 14.743 0 01-2.707-1.88 10.006 10.006 0 01-1.29-1.328 6.538 6.538 0 01-.908-1.564A4.588 4.588 0 011 8.666V.667c0-.181.069-.337.208-.469A.69.69 0 011.7 0h12.6a.69.69 0 01.492.198zM5 6.998a1 1 0 102 0V4.414l.293.293a.997.997 0 001.414 0 .999.999 0 000-1.414l-1.999-2a1 1 0 00-1.416 0l-1.999 2a.999.999 0 101.414 1.414L5 4.413v2.586zm5.708 5.708l1.999-1.999a.999.999 0 10-1.414-1.414L11 9.586V7a1 1 0 10-2 0v2.586l-.293-.293a.999.999 0 10-1.414 1.414l1.999 1.999a.99.99 0 00.326.217.991.991 0 001.09-.217z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">DataControl</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <g fill-rule=\\"evenodd\\">
           <path d=\\"M3.414 10H11a1 1 0 010 2H3.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 1.414L3.414 10z\\"></path>
           <path d=\\"M12.586 4l-1.293-1.293a1 1 0 011.414-1.414l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L12.586 6H5a1 1 0 110-2h7.586z\\" opacity=\\"0.316\\"></path>
@@ -3281,82 +3381,82 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Debit</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M9.734 5.995c0-.55.45-.995.99-.995h4.02a1 1 0 01.99.995v8.01c0 .55-.451.995-.99.995h-4.02a1 1 0 01-.99-.995v-8.01zm2 1.005v6h2V7h-2zm-11-5.002c0-.551.447-.998.998-.998h11.003c.552 0 .999.444.999 1v1h-11v6h5v4H.73c-.55 0-.858-.417-.68-.95L.733 10V1.998z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Devices</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 10a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4zm-6 0a2 2 0 100-4 2 2 0 000 4z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Dots</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M5 0v8H0l8 8 8-8h-5V0z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Down</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M7 9.586L5.707 8.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L9 9.586V2a1 1 0 10-2 0v7.586zM1 14h14a1 1 0 110 2H1a1 1 0 110-2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Download</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 40 36\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 40 36\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M4.008 0l.07.12h.034l.047.016.035.02.029.026L5.945 2.19l1.153 1.326a92.633 92.633 0 002.778 3.052l.676.698.494.5.406.425 1.622 1.768.586.626.526.541c1.012 1.016 1.834 1.682 2.53 2.004.228.105.264.525.03.609-2.223.79-4.188.908-5.798-.02l-.208-.127.126.463c1.819 6.009 6.042 10.741 12.236 14.28 5.583 3.188 11.23 4.584 16.135 3.567l.385-.085.094.014.037.017c.182.106.27.239.242.39a.456.456 0 01-.17.258l-.075.06-.22.096-.571.264-.49.184-.966.352c-8.112 2.89-13.91 3.289-19.627.42-6.312-3.166-11.194-10.25-12.474-17.744l-.066-.409-.059-.41c-.896 1.616-2.631 2.519-4.937 2.987-.242.049-.432-.327-.292-.536.427-.636.768-1.589 1.102-2.989l.072-.307.143-.656.545-2.778.054-.263.101-.469.233-1.004.195-.89c.191-.897.371-1.826.562-2.9l.097-.548.228-1.339.54-3.351.017-.048.007-.011.037-.049.033-.018L4.008 0zm1.885 13.409H5.85l.019.04.015.043.1.364.068.258.218.904.264.778.76 2.311.269.801.296.858c.722 2.046 1.311 3.398 2.093 4.736l.159.268.286.461c2.357 3.705 5.486 6.507 9.028 7.886 5.467 2.129 11.574 1.933 17.96-.202a19.56 19.56 0 01-4.353-.009l-.554-.069 2.21.854-.845.179-2.074-.708-1.449-.507-1.723-.615-1.912-.694-9.578-3.53-4.485-1.636-1.849-.686-.084-.087-.176-.263-.282-.456-.182-.301.799.296 1.26.311c1.263.319 2.533.656 3.807 1.011l1.276.362-1.1-.462-1.531-.651-.596-.248a51.461 51.461 0 00-4.401-1.596 3.325 3.325 0 01-.21-.346l-.056-.107-.186-.395-.136-.299-.236-.541 1.625.525c.909.301 1.81.611 2.703.93l1.335.487 1.324.5-.4-.398c-.392-.4-.766-.806-1.12-1.219a81.77 81.77 0 00-4.845-1.181l-.77-.155-.091-.075-.216-.552.138-.164.692.134c.926.186 1.873.4 2.855.646l.743.19-4.78-1.886-.07-.074-.298-.863 5.155 2.05-.269-.388a17.112 17.112 0 01-.488-.77l-.225-.385-4.295-1.052-.086-.08-.182-.55.147-.158 3.975 1.01-.154-.314-.147-.316L6.76 16l-.072-.075-.317-.928-.017-.071.16-.143 3.877 1.328-.052-.108-.054-.116-.052-.123-4.077-1.816-.068-.08-.102-.377-.02-.042a.114.114 0 00-.074-.041zm5.059 12.397l20.87 8.426-.467.06-.54.064-.175.019.01.002-.328.028-.699.053-.44.025-.448.018-14.502-4.91-.202-.181-.355-.334-.31-.31-.354-.365 15.16 5.138-16.368-6.602a9.298 9.298 0 01-.32-.396l-.145-.194-.387-.54zm3.377 3.921l10.263 4.59-1.006-.185a22.441 22.441 0 01-2.129-.495l-.516-.154-3.883-1.735a17.885 17.885 0 01-1.634-1.13l-.388-.31-.707-.58zm2.994-2.561l3.456 1.309 1.2.445-.55-.337-.537-.343a178.07 178.07 0 00-2.38-.725l-1.189-.35zm-3.95-3.095l1.634.654 1.182.46 1.144.434-.059-.05-1.297-.515-.653-.253-.655-.25-1.296-.48zm2.353.093l.188.179.308.122-.193-.183-.303-.118zm-3.014-2.773l.767.302.217.061-.1-.126-.884-.237zm.181-.703l-.174-.07.11.15.17.069-.106-.15zM4.286.98l.01.736c.025 4.164-.555 8.238-1.67 11.907-.282.93-.622 1.812-.973 2.51l-.132.252-.13.231.07-.112.155-.266.082-.151.083-.16.14-.064.563.142.003-.02c.003-.011.008-.019.022-.029l.075-.043.229-.126.394-.226a6.22 6.22 0 00.74-.501l.125-.104-1.502-.587-.072-.156.106-.304.096-.297.158-.08 1.934.664.133-.184.128-.195.115-.317-2.058-.934-.068-.144.128-.46.016-.007-.01-.02.109-.459.157-.088 5.586 1.78-.676-.332-.256-.123-.823-.386-3.508-1.599-.182-.084-.069-.137.1-.52.173-.088 1.108.509c.61.282 1.227.57 1.853.865l.946.447 1.786.849-.022-.258v-.061l.01-.059-5.666-2.69-.068-.134.088-.462.174-.09 8.563 4.06.21.003.22-.001 1.116-.039.197-.005c.25-.005.46-.003.658.007a11.406 11.406 0 01-1.465-.966l-.266-.206-9.278-2.92-.085-.136.07-.459.158-.099 7.777 2.445-.342-.32-.335-.323L8.732 8.76 4.21 6.73l-.072-.125.05-.466.173-.1 5.495 2.454-.096-.102-.522-.575a38.552 38.552 0 01-1.011-1.183c-.993-.31-2.03-.623-3.085-.919l-.793-.218-.09-.13.031-.457.082-.06-.07-.113.032-.48.17-.107 2.637 1.113-.116-.152-.396-.538-.385-.54-.586-.144-1.2-.306-.093-.124.018-.642.156-.116.854.248.142.042-.273-.421-.255-.02-.256-.036-.253-.042-.103-.122-.004-.337.06-.05-.061-.086-.005-.338.16-.119-.26-.44zm5.632 13.887l.04.13.074.034.032-.011-.032-.1-.114-.053zm-4.894-2.221l4.894 2.22-.026-.084-.085-.316-.077-.322-4.706-1.498zm4.456-.077l.012.12.448.21-.356-.17-.014-.12-.09-.04zm.767-.46l.104.092.233.195.14.11-.121-.098a6.117 6.117 0 01-.307-.27.137.137 0 00-.049-.028z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">DrawingArrowUp</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 5h12l-6 7z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Dropdown</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M0 8c0-4.416 3.584-8 8-8s8 3.584 8 8-3.584 8-8 8-8-3.584-8-8zm6.293 2.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 00-1.414 1.414L8.586 8l-2.293 2.293z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">DropdownClose</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 0c4.416 0 8 3.584 8 8s-3.584 8-8 8-8-3.584-8-8 3.584-8 8-8zM5.707 6.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 10-1.414-1.414L8 8.586 5.707 6.293z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">DropdownOpen</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M14 12H2l6-7z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Dropup</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M0 2.999A.998.998 0 011 2h14c.552 0 1 .443 1 .999V5L8 8 0 5V2.999zM0 7l8 3 8-3v7.003c0 .55-.445.997-1 .997H1c-.552 0-1-.453-1-.997V7z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Email</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M14 5.95V6v-.05zM10.073 4c.222 1.418.95 2.336 2.18 2.748L7 9 0 6V5c0-.552.45-1 1.007-1h9.066zM0 8l7 3 7-3v5.997c0 .554-.45 1.003-1.007 1.003H1.007A.998.998 0 010 13.997V8z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">EmailNotification</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2.343 2.343l1.227.625.974-.973-.216 1.36 1.227.625-1.36.215-.215 1.36-.625-1.227-1.36.216.973-.974-.625-1.227zM8 0l.426 1.31h1.376l-1.114.809.426 1.31L8 2.619l-1.114.81.425-1.31-1.114-.81h1.377L8 0zM1.31 7.574V6.197l.809 1.114 1.31-.425L2.619 8l.81 1.114-1.31-.426-.81 1.114V8.425L0 8l1.31-.426zm1.033 6.083l.625-1.227-.973-.974 1.36.216.625-1.227.215 1.36 1.36.215-1.227.625.216 1.36-.974-.973-1.227.625zm11.314 0l-1.227-.625-.974.973.216-1.36-1.227-.625 1.36-.215.215-1.36.625 1.227 1.36-.216-.973.974.625 1.227zM8 13.38l1.114-.81-.426 1.31 1.114.81H8.425L8 16l-.426-1.31H6.197l1.115-.809-.426-1.31 1.114.81zm5.881-6.07l.81-1.114v1.377L16 8l-1.31.425v1.377l-.809-1.114-1.31.426.81-1.114-.81-1.114 1.31.425zm-.224-4.968l-.625 1.227.973.974-1.36-.216-.625 1.227-.215-1.36-1.36-.215 1.227-.625-.216-1.36.974.973 1.227-.625z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Eu</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M14.684 2.904C13.518 1.232 12 0 9.316 0 6.192 0 3.948 2.134 3.068 5.104H1v1.87h1.716c-.044.33-.044.682-.044 1.012 0 .286 0 .572.022.836H1v1.892h2.002c.858 3.124 3.146 5.214 6.402 5.214 2.508 0 4.07-1.276 5.324-3.102l-1.936-1.43c-1.012 1.342-1.892 2.112-3.366 2.112-1.716 0-2.97-1.056-3.586-2.794h4.752V8.822h-5.17C5.4 8.536 5.4 8.25 5.4 7.942c0-.33 0-.66.044-.968h5.148v-1.87h-4.73C6.478 3.454 7.688 2.42 9.25 2.42c1.54 0 2.442.704 3.388 2.002l2.046-1.518z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Euro</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 20 20\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 20 20\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M4.3 12.5h9.5c.7 0 1.2.6 1.2 1.2s-.6 1.3-1.2 1.3H4.3l1.6 1.6c.5.5.5 1.3 0 1.8s-1.3.5-1.8 0L.3 14.6c-.5-.5-.5-1.3 0-1.8L4.1 9c.5-.5 1.3-.5 1.8 0s.5 1.3 0 1.8l-1.6 1.7zm11.4-5H6.2C5.6 7.5 5 6.9 5 6.2S5.6 5 6.2 5h9.5l-1.6-1.6c-.5-.5-.5-1.3 0-1.8s1.3-.5 1.8 0l3.8 3.8c.5.5.5 1.3 0 1.8L15.9 11c-.5.5-1.3.5-1.8 0s-.5-1.3 0-1.8l1.6-1.7z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Exchange</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 20 20\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 20 20\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M1 10s3-6 9-6 9 6 9 6-3 6-9 6-9-6-9-6zm9 4a4 4 0 100-8 4 4 0 000 8zm0-2a2 2 0 100-4 2 2 0 000 4z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Eye</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 20 20\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 20 20\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <g fill-rule=\\"evenodd\\">
           <path d=\\"M1 10s3-6 9-6 9 6 9 6-3 6-9 6-9-6-9-6zm9 4a4 4 0 100-8 4 4 0 000 8zm0-2a2 2 0 100-4 2 2 0 000 4z\\"></path>
           <path stroke=\\"#FFF\\" stroke-width=\\"4\\" d=\\"M3 17L17 4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></path>
@@ -3365,7 +3465,7 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">EyeClosed</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <defs>
           <path id=\\"file_svg__a\\" d=\\"M1 1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996H2.007A1.002 1.002 0 011 15V1zm10 3V0l4 4h-4z\\"></path>
         </defs>
@@ -3373,12 +3473,12 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">File</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M1 1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996H2.007A1.002 1.002 0 011 15V1zm10 3V0l4 4h-4zM7 6v3H4v2h3v3h2v-3h3V9H9V6H7z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">FileAdd</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 26 32\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 26 32\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <g fill-rule=\\"evenodd\\">
           <path d=\\"M0 2.002C0 .896.89 0 1.997 0H19l7 7v22.996A2 2 0 0124.003 32H1.997A1.995 1.995 0 010 29.998C.048 16 0 16 0 2.002z\\" fill=\\"#FFF\\"></path>
           <path d=\\"M18.5 0c-.276 0-.5.23-.5.5V8h7.5c.276 0 .5-.232.5-.5V7l-7-7h-.5z\\" fill=\\"#FFF\\"></path>
@@ -3388,12 +3488,12 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">FileDuotone</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M1 1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996H2.007A1.002 1.002 0 011 15V1zm10 3V0l4 4h-4zM7 6v3H4v2h3v3h2v-3h3V9H9V6H7z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">FileNew</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <defs>
           <path id=\\"file-none_svg__a\\" d=\\"M10 5.1V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V6h-1.9l.4.4-2.1 2.1 2.1 2.1-1.4 1.4L8 9.9 5.9 12l-1.4-1.4 2.1-2.1-2.1-2.1L5.9 5 8 7.1l2-2zm5-.1v10.004a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4v1z\\"></path>
         </defs>
@@ -3401,47 +3501,47 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">FileNone</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">FileOutline</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 0h12a1 1 0 011 1v.581a1 1 0 01-.299.713L10 6.92V16l-4-3.09v-6L1.3 2.294A1 1 0 011 1.58V1a1 1 0 011-1z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Filter</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M15.904 3.955a.513.513 0 01-.123.72.512.512 0 01-.721-.124 8.208 8.208 0 00-2.958-2.566C9.6.703 6.377.706 3.89 1.995A8.29 8.29 0 00.921 4.578a.455.455 0 01-.404.215.534.534 0 01-.296-.09.504.504 0 01-.213-.33.525.525 0 01.087-.393 9.187 9.187 0 013.33-2.903c2.78-1.435 6.372-1.437 9.15-.009a9.208 9.208 0 013.33 2.886zM7.97 2.091c4.048 0 7.341 3.127 7.341 6.972 0 1.468-1.25 2.663-2.787 2.663s-2.787-1.195-2.787-2.663c0-.902-.789-1.635-1.758-1.635S6.22 8.161 6.22 9.063a5.48 5.48 0 001.625 3.918c.831.822 1.63 1.275 2.848 1.611.13.034.24.118.308.235a.517.517 0 01.052.394.499.499 0 01-.485.39.58.58 0 01-.133-.02c-1.41-.39-2.339-.915-3.31-1.869a6.508 6.508 0 01-1.935-4.65c0-1.469 1.251-2.665 2.788-2.665s2.787 1.196 2.787 2.664c0 .901.79 1.634 1.758 1.634.97 0 1.758-.733 1.758-1.634 0-3.276-2.832-5.94-6.312-5.94-2.479 0-4.738 1.375-5.755 3.505-.34.708-.513 1.527-.513 2.435 0 .684.061 1.754.586 3.154a.507.507 0 01-.013.4.492.492 0 01-.288.26.508.508 0 01-.658-.3A9.877 9.877 0 01.681 9.07c0-1.065.204-2.037.606-2.886C2.473 3.698 5.095 2.091 7.97 2.091zM4.784 12.426c.55.988.933 1.422 1.618 2.116a.53.53 0 010 .728.564.564 0 01-.38.156.487.487 0 01-.363-.158c-.765-.764-1.183-1.259-1.78-2.339-.611-1.089-.934-2.423-.934-3.858 0-2.659 2.27-4.822 5.06-4.822 2.79 0 5.06 2.163 5.06 4.822a.51.51 0 01-.515.515.51.51 0 01-.515-.515c0-2.09-1.808-3.792-4.03-3.792-2.222 0-4.03 1.701-4.03 3.792 0 1.256.279 2.417.809 3.355zm8.458.245a.503.503 0 01.38.082.525.525 0 01.217.338.517.517 0 01-.423.598 6.024 6.024 0 01-1.078.107c-1.069 0-2-.268-2.773-.797-1.332-.904-2.129-2.372-2.129-3.928a.51.51 0 01.515-.515.51.51 0 01.515.515c0 1.22.627 2.37 1.676 3.074.61.413 1.33.613 2.196.613.187 0 .535-.023.904-.087z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Fingerprint</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M14.982 9.273l.72-.72a.996.996 0 000-1.41l-.02-.02a.996.996 0 00-1.41 0l-2.86 2.86-5.4-5.4 2.86-2.86a.996.996 0 000-1.41l-.02-.02a.996.996 0 00-1.41 0l-.72.72-.72-.72c-.39-.39-1.03-.39-1.42 0l-1.43 1.43-.72-.72a1.02 1.02 0 00-1.43 0 1.02 1.02 0 000 1.43l.72.72-1.43 1.43a.996.996 0 000 1.41l.72.72-.72.73a.996.996 0 000 1.41l.02.02c.39.39 1.02.39 1.41 0l2.86-2.86 5.4 5.4-2.86 2.86a.996.996 0 000 1.41l.02.02c.39.39 1.02.39 1.41 0l.72-.72.72.72c.39.39 1.02.39 1.41 0l1.43-1.43.72.72c.39.39 1.04.39 1.43 0 .39-.39.39-1.04 0-1.43l-.72-.72 1.44-1.43a.996.996 0 000-1.41l-.72-.73z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Fitness</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8.98 2L8 0H1v16h2v-6h4.021L8 12h7V2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Flag</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8.98 2H15v10H8l-.979-2H3v6H1V0h7l.98 2zM3 8h5l1.03 2H13V4H8L6.997 2H3v6z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">FlagOutlined</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M13.714 0L16 7h-1.357l-.5-1.556h-2.286L11.357 7H10l2.286-7h1.428zM12.18 4.1h1.642L13 1.453 12.179 4.1zM2 0h7L6 7h3l-5 9V8H2V0z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">FlashAuto</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M6 7.003L3 3h10l-3 4.003H6zM13 2H3V0h10v2zM6 16V7h4v9H6z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Flashlight</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <g fill-rule=\\"evenodd\\">
           <path d=\\"M0 2.007C0 1.45.451 1 .99 1H5.51c.271 0 .648.157.84.348l1.303 1.304c.192.192.579.348.848.348h6.503c.55 0 .997.456.997 1.002v8.99C16 14.1 15.105 15 14.006 15H1.994A2 2 0 010 12.994V2.007zM0 5h16v1H0V5z\\"></path>
           <path d=\\"M0 2.007C0 1.45.451 1 .99 1H5.51c.271 0 .648.157.84.348l1.303 1.304c.192.192.579.348.848.348h6.503c.55 0 .997.456.997 1.002v8.99C16 14.1 15.105 15 14.006 15H1.994A2 2 0 010 12.994V2.007zM0 5h16v1H0V5z\\"></path>
@@ -3449,27 +3549,27 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Folder</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M0 2.007C0 1.45.451 1 .99 1h4.52c.271 0 .648.157.84.348l1.303 1.304c.192.192.579.348.848.348h6.503c.55 0 .997.456.997 1.002v8.99A2.005 2.005 0 0114.006 15H1.994A2 2 0 010 12.994V2.007zM9 5v3H6v2h3v3h2v-3h3V8h-3V5H9z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">FolderAdd</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path clip-rule=\\"evenodd\\" d=\\"M5.509 1c.271 0 .648.157.84.348l1.303 1.304c.192.192.579.348.848.348h6.503c.55 0 .997.456.997 1.002v8.99A2.003 2.003 0 0114.006 15H1.994A2 2 0 010 12.994V2.007C0 1.45.451 1 .99 1h4.52zM11.5 6a1 1 0 00-1.497 1.32l.083.094.5.586H6a1 1 0 00-.117 1.993L6 10h4.586l-.5.586a1 1 0 001.32 1.497L11.5 12l2.207-2.293a1 1 0 00.083-1.32l-.083-.094L11.5 6z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">FolderMoveto</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M3.11 4.523a6 6 0 008.367 8.367L3.109 4.524zM4.522 3.11l8.368 8.368A6 6 0 004.524 3.11zM8 16A8 8 0 118 0a8 8 0 010 16z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Forbidden</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M11 0h5v5l-1.793-1.793-2.451 2.452-.265-.149c-.264 1.889-1.706 3.338-3.46 3.338-1.941 0-3.515-1.771-3.515-3.955C4.516 2.708 6.09.937 8.031.937c.191 0 .373.031.555.063l1 1-1.793 1.793 1.414 1.414 1.995-1.995c.018.041.026.088.041.131l1.55-1.55L11 0zm.547 9.727c1.758 0 3.516 2.637 3.516 3.516s0 1.757-.88 1.757H1.88C1 15 1 14.122 1 13.243c0-.88 1.759-3.516 3.517-3.516s.879.879 3.515.879c2.637 0 1.758-.88 3.516-.88z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">FromUser</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <g fill-rule=\\"evenodd\\">
           <path d=\\"M14.25 7.078c.051.26.077.568.077.926 0 .358-.026.665-.078.925l1.62 1.333c.131.086.163.203.099.352-.325.95-.859 1.826-1.602 2.628-.104.124-.229.155-.37.094l-2.032-.668c-.52.396-1.08.705-1.68.926l-.409 2c-.026.146-.117.233-.273.258-.56.1-1.094.148-1.602.148a9.21 9.21 0 01-1.601-.148c-.157-.024-.248-.11-.274-.259l-.409-1.999a5.98 5.98 0 01-1.68-.926l-2.03.668c-.145.062-.268.03-.372-.094C.892 12.44.359 11.565.032 10.614c-.065-.148-.032-.266.098-.352L1.751 8.93a4.761 4.761 0 01-.078-.925c0-.358.026-.667.078-.926L.131 5.746C0 5.66-.034 5.542.031 5.394c.326-.95.86-1.826 1.602-2.627.104-.123.228-.154.371-.093l2.031.667a5.99 5.99 0 011.68-.926l.41-1.999c.025-.148.116-.234.273-.259a8.221 8.221 0 013.202 0c.156.024.247.111.273.26l.41 1.998c.6.223 1.159.53 1.68.926l2.03-.667c.143-.062.267-.03.371.093.742.802 1.276 1.678 1.602 2.627.064.148.032.266-.098.352l-1.62 1.332zM8 4.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z\\"></path>
           <path d=\\"M14.25 7.078c.051.26.077.568.077.926 0 .358-.026.665-.078.925l1.62 1.333c.131.086.163.203.099.352-.325.95-.859 1.826-1.602 2.628-.104.124-.229.155-.37.094l-2.032-.668c-.52.396-1.08.705-1.68.926l-.409 2c-.026.146-.117.233-.273.258-.56.1-1.094.148-1.602.148a9.21 9.21 0 01-1.601-.148c-.157-.024-.248-.11-.274-.259l-.409-1.999a5.98 5.98 0 01-1.68-.926l-2.03.668c-.145.062-.268.03-.372-.094C.892 12.44.359 11.565.032 10.614c-.065-.148-.032-.266.098-.352L1.751 8.93a4.761 4.761 0 01-.078-.925c0-.358.026-.667.078-.926L.131 5.746C0 5.66-.034 5.542.031 5.394c.326-.95.86-1.826 1.602-2.627.104-.123.228-.154.371-.093l2.031.667a5.99 5.99 0 011.68-.926l.41-1.999c.025-.148.116-.234.273-.259a8.221 8.221 0 013.202 0c.156.024.247.111.273.26l.41 1.998c.6.223 1.159.53 1.68.926l2.03-.667c.143-.062.267-.03.371.093.742.802 1.276 1.678 1.602 2.627.064.148.032.266-.098.352l-1.62 1.332zM8 4.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7z\\"></path>
@@ -3477,57 +3577,57 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Gear</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M7.889 13.999L7 10 6 9 4 6l-.355-2.128A6 6 0 007.888 14zm.238-11.998L10 3.5V5L8 6.5l-1.5 1 .5 1 3 .5 1 1v1.5l-1.549 2.323A6 6 0 008.127 2.001zM8 16A8 8 0 118 0a8 8 0 010 16z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Globe</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M7 16A7 7 0 017 2v7h7a7 7 0 01-7 7zm2-9V0a7 7 0 017 7H9z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">GraphCircle</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M0 0h4v4H0V0zm0 6h4v4H0V6zm0 6h4v4H0v-4zM6 0h4v4H6V0zm0 6h4v4H6V6zm0 6h4v4H6v-4zm6-12h4v4h-4V0zm0 6h4v4h-4V6zm0 6h4v4h-4v-4z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Grid</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M6 1h10v2H6V1zm0 6h10v2H6V7zm0 6h10v2H6v-2zM2 4L.195 1.854a.901.901 0 010-1.121.594.594 0 01.943 0L2 1.758 2.862.733c.26-.31.682-.31.943 0 .26.31.26.81 0 1.12L2 4zm0 6L.195 7.854a.901.901 0 010-1.121.594.594 0 01.943 0L2 7.758l.862-1.025c.26-.31.682-.31.943 0 .26.31.26.81 0 1.12L2 10zm0 6L.195 13.854a.901.901 0 010-1.121.594.594 0 01.943 0L2 13.758l.862-1.025c.26-.31.682-.31.943 0 .26.31.26.81 0 1.12L2 16z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">GroupList</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2.944 3.473a1.473 1.473 0 11-2.946-.002 1.473 1.473 0 012.946.002zM5 4.722v-2.5h11v2.5H5zm0 4.64v-2.5h11v2.5H5zM5 14v-2.5h11V14H5z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Groups</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 15 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 15 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M14.992 8V5a1.001 1.001 0 00-2 0v3h-1V2a1.001 1.001 0 00-2 0v5h-1V1a1.001 1.001 0 00-2 0v6h-1V2c0-.551-.45-1-1-1-.551 0-1 .449-1 1v6.5a.5.5 0 01-.88.325L1.1 6.125c-.222-.182-.64-.166-.897.091a.7.7 0 00-.075.898c.064.117 1.542 4.144 3.227 6.798A4.486 4.486 0 007.156 16h3.336c2.48 0 4.5-2.019 4.5-4.5V8z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Hand</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M1.467 8.096a4.023 4.023 0 01-.699-.738L.724 7.31l.007-.006a4 4 0 117.21-2.994 6.685 6.685 0 01.118 0 4.001 4.001 0 117.21 2.995l.005.005-.036.038a4.023 4.023 0 01-.713.753L8 15 1.467 8.096z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Heart</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zm1-7.198C10.122 8.355 11 7.21 11 6c0-1.552-1.448-3-3-3S5 4.448 5 6h2c0-.448.552-1 1-1 .448 0 1 .552 1 1 0 .448-.552 1-1 1a1 1 0 00-1 1v2h2V8.802zM7 11v2h2v-2H7z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Help</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 0c4.411 0 8 3.589 8 8s-3.589 8-8 8a8.039 8.039 0 01-7.229-4.571 1 1 0 111.806-.858A6.031 6.031 0 008 14c3.309 0 6-2.691 6-6s-2.691-6-6-6c-1.482 0-2.866.571-3.938 1.507a.989.989 0 01.706.353 1 1 0 01-.128 1.408l-3 2.5A1 1 0 010 7V3a1 1 0 011-1c.481 0 .865.348.96.801C3.452 1.08 5.636 0 8 0zm0 4a1 1 0 011 1v2.586l1.707 1.707a.999.999 0 11-1.414 1.414l-2-1.999A1.025 1.025 0 017 8V5a1 1 0 011-1z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">History</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M.416 7.584C-.366 8.366-.105 9 1 9v5.997A.999.999 0 002 16h4v-5h4v5h4c.552 0 1-.438 1-1.003V9c1.105 0 1.367-.633.584-1.416L8 0 .416 7.584z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Home</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <defs>
           <path id=\\"hourglass_svg__a\\" d=\\"M4.5 13c0-.547.34-1.291.76-1.651L8 9l2.74 2.349c.424.363.76 1.098.76 1.651h-7zm7-10c0 .547-.34 1.292-.76 1.651L10.334 5H5.667l-.407-.349C4.836 4.288 4.5 3.552 4.5 3h7zM13 13c0-.557-.316-1.316-.706-1.706L9 8l3.294-3.294c.39-.39.706-1.15.706-1.706V2c.55 0 1-.444 1-1 0-.552-.456-1-1.002-1H3.003a1 1 0 100 2L3 3c0 .552.313 1.312.706 1.706L7 8l-3.294 3.294C3.313 11.688 3 12.447 3 13v1a1 1 0 10.003 2h9.995c.546 0 1.002-.447 1.002-1 0-.557-.45-1-1.002-1L13 13z\\"></path>
         </defs>
@@ -3535,12 +3635,12 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Hourglass</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M1 1c-.552 0-1 .45-1 1.007v11.986C0 14.55.445 15 1 15h14c.552 0 1-.45 1-1.007V2.007C16 1.45 15.555 1 15 1H1zm4 7l2 2 4-4 3 3v2.99A1.01 1.01 0 0112.998 13H3.002A.999.999 0 012 12v-1l3-3zm.5-2a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Image</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <defs>
           <path id=\\"info_svg__a\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM7 4a1 1 0 102 0 1 1 0 10-2 0zm1 2H6v2h1v4a1 1 0 001 1h2v-2H9V7a1 1 0 00-1-1z\\"></path>
         </defs>
@@ -3548,87 +3648,87 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Info</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zm0-1A7 7 0 108 1a7 7 0 000 14zM7 4c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm1.001 2C8.553 6 9 6.444 9 7v4h1v2H7.999A.997.997 0 017 12V8H6V6h2.001z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">InfoOutlined</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M9 9.584V10H7v2H5v2H3v2H0v-3l6.297-6.297A5 5 0 119 9.584zM11 3a2 2 0 100 4 2 2 0 000-4z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Key</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M3 4v5h10V4H3zm11.5 7h-13a.5.5 0 01-.5-.5V4c0-1.103.896-2 2-2h10c1.102 0 2 .897 2 2v6.5a.5.5 0 01-.5.5zm-4 1h5a.5.5 0 01.5.5c0 .827-.674 1.5-1.5 1.5h-13C.673 14 0 13.327 0 12.5a.5.5 0 01.5-.5h5a.5.5 0 01.5.5v.5h4v-.5a.5.5 0 01.5-.5z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Laptop</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M10.707 2.707a.999.999 0 10-1.414-1.414l-6 6a.999.999 0 000 1.414l6 6a.999.999 0 101.414-1.414L5.414 8l5.293-5.293z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Left</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M4.977 12.513s.103-1.083-.956-2.022a6 6 0 117.99-.028c-.674.605-.907 2.05-.907 2.05a.635.635 0 01-.595.487H5.491a.524.524 0 01-.514-.487zM11 14l-1.652 1.652a1.355 1.355 0 01-.853.348h-.99c-.279 0-.662-.157-.853-.348L5 14h6zm1-8a4 4 0 00-4-4 1 1 0 100 2 2 2 0 012 2 1 1 0 002 0z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Lightbulb</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M9.259 4.045a1.043 1.043 0 11-1.475-1.474L9.44.915a3.126 3.126 0 014.417-.002l1.23 1.23a3.126 3.126 0 01-.007 4.422l-3.612 3.612c-1.6 1.6-4.244 1.65-5.77.124a1.043 1.043 0 111.475-1.474c.699.698 2.023.673 2.82-.125l3.613-3.612a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.04 1.04 0 00-1.468.003L9.26 4.045zm-2.518 7.91a1.043 1.043 0 011.475 1.474L6.56 15.085a3.126 3.126 0 01-4.417.002l-1.23-1.23a3.126 3.126 0 01.006-4.422l3.613-3.612c1.6-1.6 4.243-1.65 5.77-.124a1.043 1.043 0 01-1.475 1.474c-.7-.698-2.023-.673-2.82.125L2.393 10.91a1.04 1.04 0 00-.007 1.473l1.23 1.23a1.04 1.04 0 001.469-.003l1.655-1.655z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Link</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">LinkOut</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M0 0h4v4H0V0zm6 0h10v4H6V0zM0 6h4v4H0V6zm6 0h10v4H6V6zm-6 6h4v4H0v-4zm6 0h10v4H6v-4z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">List</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 0c3.99 0 7 2.866 7 6.667 0 4.782-6.508 9.089-6.784 9.27a.398.398 0 01-.432 0C7.507 15.756 1 11.45 1 6.667 1 2.866 4.01 0 8 0zm0 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Location</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M2 15.005c0 .55.456.995 1.002.995h9.996c.553 0 1.002-.456 1.002-.995v-8.01A.995.995 0 0013 6h-1V4c0-2.206-1.795-4-4-4-2.206 0-4 1.794-4 4v2H3c-.552 0-1 .456-1 .995v8.01zM6 4.5C6 3.122 6.897 2 8 2s2 1.122 2 2.5V6H6V4.5zm2 4c.826 0 1.5.672 1.5 1.5 0 .552-.305 1.032-.75 1.29v2.46a.751.751 0 01-1.5 0v-2.46A1.49 1.49 0 016.5 10 1.5 1.5 0 018 8.5z\\" fill-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Lock</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M12.586 9H5a1 1 0 110-2h7.586l-1.293-1.293a1 1 0 111.414-1.414l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L12.586 9zM0 1a1 1 0 112 0v14a1 1 0 01-2 0V1z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Logout</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M16.236 5.87a.631.631 0 00-.893 0L.185 21.026a.631.631 0 000 .893l1.895 1.895a.629.629 0 00.893 0L18.13 8.657a.631.631 0 000-.893l-1.895-1.895zm-1.71 4.605l-1.001-1.001 2.264-2.265 1.002 1.002-2.265 2.264zm-.2-7.981l.648.216.216.647a.631.631 0 001.199 0l.216-.647.648-.216a.631.631 0 000-1.198l-.648-.216-.216-.648a.631.631 0 00-1.199 0l-.216.648-.648.216a.631.631 0 000 1.198zM9.274 5.02l.648.216.216.648a.631.631 0 001.198 0l.216-.648.648-.216a.631.631 0 000-1.198l-.648-.216-.216-.648a.631.631 0 00-1.198 0l-.216.648-.648.216a.631.631 0 000 1.198zm13.031 6.38l-.648-.215-.216-.648a.631.631 0 00-1.198 0l-.216.648-.648.216a.631.631 0 000 1.198l.648.216.216.648a.631.631 0 001.198 0l.216-.648.648-.216a.631.631 0 000-1.198zm1.263-6.946l-1.121-.374-.374-1.122a.631.631 0 00-1.198 0L20.5 4.08l-1.122.374a.631.631 0 000 1.198l1.122.374.374 1.12a.631.631 0 001.198 0l.374-1.12 1.121-.374a.631.631 0 000-1.198z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">MagicTrick</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M11 3h4v6A7 7 0 111 9V3h4v6c0 1.654 1.346 3 3 3s3-1.346 3-3V3zm0-1V0h4.001v2H11zM1 2V0h4v2H1z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Magnet</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M10.472 10H11.5l3.294 3.294a.996.996 0 010 1.412l-.088.088a1 1 0 01-1.412 0L10 11.5v-1.028a6 6 0 11.472-.472zM6 10a4 4 0 100-8 4 4 0 000 8z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Magnifier</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 0L4 3.997h3.064V9.18L2 14.59 3.32 16l5.616-5.999V3.997H12L8 0zm1.488 12.59L12.68 16 14 14.591l-3.191-3.411-1.32 1.41z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Merge</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M6.065 7.66l-.003.005-1.19-2.116a1 1 0 00-1.744 0l-2.79 4.96A1 1 0 001.21 12h13.538a1 1 0 00.86-1.509l-4.747-8.034a1 1 0 00-1.722 0l-2.192 3.71 1.527 2.715a.75.75 0 11-1.308.736L6.065 7.66z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Mountain</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <g fill-rule=\\"evenodd\\">
           <path d=\\"M3.414 10H11a1 1 0 010 2H3.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 111.414 1.414L3.414 10z\\" opacity=\\"0.322\\"></path>
           <path d=\\"M12.586 4l-1.293-1.293a1 1 0 111.414-1.414l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L12.586 6H5a1 1 0 110-2h7.586z\\"></path>
@@ -3636,7 +3736,7 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">MovementIn</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <g fill-rule=\\"evenodd\\">
           <path d=\\"M3.414 10H11a1 1 0 010 2H3.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 1.414L3.414 10z\\"></path>
           <path d=\\"M12.586 4l-1.293-1.293a1 1 0 011.414-1.414l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L12.586 6H5a1 1 0 110-2h7.586z\\" opacity=\\"0.316\\"></path>
@@ -3644,82 +3744,82 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">MovementOut</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M12.585 7.002H1.001a1 1 0 100 2.002l11.582-.002-1.29 1.29a1 1 0 001.414 1.415l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L12.586 7l-.001.002z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Movement</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M9.586 7L8.293 5.707a1 1 0 011.414-1.414l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L9.586 9H2a1 1 0 110-2h7.586zM14 1v14a1 1 0 102 0V1a1 1 0 10-2 0z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Moveto</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M5.007 14A2.006 2.006 0 013 11.999V3H1.998A.999.999 0 001 4.001v10.998A1 1 0 002.007 16h8.986A1 1 0 0012 15.004V14H5.007zM4 1.001A.999.999 0 014.998 0H10v5h5v7.005a1 1 0 01-1.007.995H5.007A1.001 1.001 0 014 11.999V1.001zM11 4V0l4 4h-4z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">MultiFiles</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 12h1.51c.275 0 .49-.228.49-.51V2.838c0-.54.437-1.075.976-1.173L14.024.02c.531-.096.976.271.976.825v10.084a2.997 2.997 0 01-3 3.007h-1.002A2 2 0 019 11.94v.18c0-1.094.895-1.998 2-1.998h1.51a.49.49 0 00.49-.493V5.467c0-.273-.22-.453-.492-.402L6.492 6.193A.62.62 0 006 6.781v6.225A3.004 3.004 0 013 16H1.998A2 2 0 012 12z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Music</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M15.785 9.637a.413.413 0 010 .726L12.28 12.28l-1.917 3.505a.414.414 0 01-.726 0L7.72 12.28l-3.505-1.917a.413.413 0 010-.726L7.72 7.72l1.917-3.505a.414.414 0 01.726 0L12.28 7.72l3.505 1.917zm-8.91-6.349a.241.241 0 010 .424L4.83 4.83 3.712 6.874a.241.241 0 01-.424 0L2.17 4.83.126 3.712a.241.241 0 010-.424L2.17 2.17 3.288.126a.242.242 0 01.424 0L4.83 2.17l2.044 1.118z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">New</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M12.586 7H1.006C.452 7 0 7.444 0 8c0 .552.45 1 1.007 1h11.579l-5.293 5.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7a1 1 0 10-1.414 1.414L12.586 7z\\" fill-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Next</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M14 0a1 1 0 011 1v1.024l-2 2.011V2H3v12h10v-3.05l2-2.011V15a1 1 0 01-1 1H2a1 1 0 01-1-1v-2H.5a.5.5 0 010-1H1v-2H.5a.5.5 0 010-1H1V7H.5a.5.5 0 010-1H1V4H.5a.5.5 0 010-1H1V1a1 1 0 011-1h12zm1.612 4.299l.09.09a1.03 1.03 0 01.002 1.448L9.55 12H8v-1.518l6.17-6.184a1.02 1.02 0 011.442 0zM7 11v1H5v-1h2zm0-2v1H5V9h2zm2-2v1H5V7h4zm2-2v1H5V5h6z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Note</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M14 5.95V6v-.05zM10.073 4c.222 1.418.95 2.336 2.18 2.748L7 9 0 6V5c0-.552.45-1 1.007-1h9.066zM0 8l7 3 7-3v5.997c0 .554-.45 1.003-1.007 1.003H1.007A.998.998 0 010 13.997V8z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">NotificationEmail</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M3.113 2.707l10.61 10.61a.996.996 0 01-1.43 1.39l-2.435-2.435c.09.227.142.471.142.728a2 2 0 11-2-2c.257 0 .501.053.727.142L6.541 8.955a4.123 4.123 0 00-1.627.981 1.085 1.085 0 01-1.532-1.533 6.55 6.55 0 011.492-1.115L3.191 5.605a8.811 8.811 0 00-1.342 1.1A1.083 1.083 0 01.317 5.173a10.92 10.92 0 011.326-1.115L.293 2.707a.999.999 0 111.414-1.414l1.39 1.39c.006.007.008.017.016.024zm4.312 1.484l-1.901-1.9a10.769 10.769 0 0110.115 2.882 1.085 1.085 0 01-1.532 1.532 8.611 8.611 0 00-6.13-2.538c-.185 0-.368.011-.552.024zm5.148 4.212c.317.317.397.783.238 1.175l-2.72-2.72a6.471 6.471 0 012.482 1.545z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Offline</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M10 13a2 2 0 11-4.001-.001A2 2 0 0110 13zm4.873-5.978c-.277 0-.555-.104-.767-.317a8.604 8.604 0 00-6.129-2.538A8.603 8.603 0 001.85 6.704 1.085 1.085 0 01.317 5.173a10.76 10.76 0 017.66-3.172c2.894 0 5.616 1.126 7.662 3.172a1.085 1.085 0 01-.766 1.85zm-3.065 3.23c-.277 0-.555-.104-.766-.316-1.635-1.637-4.492-1.637-6.128 0a1.084 1.084 0 01-1.532-1.532A6.457 6.457 0 017.978 6.5c1.737 0 3.369.676 4.596 1.904a1.083 1.083 0 01-.766 1.849z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Online</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Openwith</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M12.889 8a1.333 1.333 0 110-2.667 1.333 1.333 0 010 2.667zm-2.667-3.556a1.333 1.333 0 110-2.666 1.333 1.333 0 010 2.666zm-4.444 0a1.333 1.333 0 110-2.666 1.333 1.333 0 010 2.666zM3.11 8a1.333 1.333 0 110-2.667A1.333 1.333 0 013.11 8zM8 0a8 8 0 100 16c.736 0 1.333-.597 1.333-1.333a1.31 1.31 0 00-.346-.89 1.333 1.333 0 01.996-2.222h1.573A4.444 4.444 0 0016 7.112C16 3.182 12.418 0 8 0z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Palette</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M2 2a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2H2zm5.5 8.25c0-.375-.75-1.5-1.5-1.5-.337 0-.447.076-.568.16-.148.101-.313.215-.932.215-.62 0-.784-.114-.932-.216-.121-.083-.23-.159-.568-.159-.75 0-1.5 1.125-1.5 1.5s0 .75.375.75h5.25c.309 0 .363-.254.373-.553l.002-.197zM6 6.687C6 5.756 5.328 5 4.5 5S3 5.756 3 6.688c0 .931.672 1.687 1.5 1.687S6 7.619 6 6.687zM14 8.5a.5.5 0 00-.5-.5h-4a.5.5 0 000 1h4a.5.5 0 00.5-.5zm0 2a.5.5 0 00-.5-.5h-4a.5.5 0 000 1h4a.5.5 0 00.5-.5zm0-4a.5.5 0 00-.5-.5h-4a.5.5 0 000 1h4a.5.5 0 00.5-.5z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Paper</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M16 0l-6 15-2.5-2.5L4 15l-1-4 10-8.5-10 6L0 6z\\" fill-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Paperplane</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M30 4a2 2 0 012 2v20a2 2 0 11-4 0V6a2 2 0 012-2zM12.102 14.434a2.002 2.002 0 01-1.284 2.52l-1.582.514.978 1.344a2.001 2.001 0 01-3.238 2.352L6 19.82l-.978 1.344c-.39.538-1 .824-1.62.824a2.002 2.002 0 01-1.616-3.176l.978-1.344-1.582-.514a2.002 2.002 0 01-1.284-2.52 2.002 2.002 0 012.52-1.284L4 13.664V12a2 2 0 114 0v1.664l1.582-.514a2 2 0 012.52 1.284zm14.2 0a2.002 2.002 0 01-1.284 2.52l-1.582.514.978 1.344a2.001 2.001 0 01-3.238 2.352L20.2 19.82l-.978 1.344c-.39.538-1 .824-1.62.824a2.002 2.002 0 01-1.616-3.176l.978-1.344-1.582-.514a2.002 2.002 0 01-1.284-2.52 2.002 2.002 0 012.52-1.284l1.582.514V12a2 2 0 114 0v1.664l1.582-.514a2 2 0 012.52 1.284z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Password</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <defs>
           <path id=\\"pen_svg__a\\" d=\\"M9.5 3.5l3 3L3.04 16H0v-2.97L9.5 3.5zM14.91.92l.18.17c.77.78.78 2.05 0 2.84L14.03 5 11 2 12.09.91a2 2 0 012.82 0z\\"></path>
         </defs>
@@ -3727,57 +3827,57 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Pen</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 9c2.21 0 4-2.015 4-4.5S10.21 0 8 0 4 2.015 4 4.5 5.79 9 8 9zm-8 5c0-1 2-4 4-4s1 1 4 1 2-1 4-1 4 3 4 4 0 2-1 2H1c-1 0-1-1-1-2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">People</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 16A8 8 0 108 0a8 8 0 000 16zM9.9 4h1.2l-5 8H4.9l5-8zm1.704 6.604a.82.82 0 00.25-.604.82.82 0 00-.25-.604.82.82 0 00-.604-.25.821.821 0 00-.605.25.82.82 0 00-.25.604.82.82 0 00.25.604c.166.167.368.25.605.25a.82.82 0 00.604-.25zm.813.81A1.925 1.925 0 0111 12a1.925 1.925 0 01-1.414-.586A1.926 1.926 0 019 10c0-.552.195-1.023.586-1.414C9.976 8.195 10.448 8 11 8c.551 0 1.023.195 1.414.586.39.391.586.862.586 1.414 0 .552-.195 1.023-.583 1.414zm-6.813-4.81A.818.818 0 005.855 6a.818.818 0 00-.25-.604A.818.818 0 005 5.145a.818.818 0 00-.605.251.82.82 0 00-.25.604.82.82 0 00.25.604.818.818 0 00.605.251.818.818 0 00.604-.251zm.813.81C6.027 7.805 5.555 8 5 8a1.925 1.925 0 01-1.414-.586A1.926 1.926 0 013 6c0-.552.195-1.023.586-1.414C3.976 4.195 4.448 4 5 4c.551 0 1.023.195 1.414.586C6.804 4.977 7 5.448 7 6c0 .552-.195 1.023-.583 1.414z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Percent</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 16A8 8 0 108 0a8 8 0 000 16zM9.9 4h1.2l-5 8H4.9l5-8zm1.704 6.604a.82.82 0 00.25-.604.82.82 0 00-.25-.604.82.82 0 00-.604-.25.821.821 0 00-.605.25.82.82 0 00-.25.604.82.82 0 00.25.604c.166.167.368.25.605.25a.82.82 0 00.604-.25zm.813.81A1.925 1.925 0 0111 12a1.925 1.925 0 01-1.414-.586A1.926 1.926 0 019 10c0-.552.195-1.023.586-1.414C9.976 8.195 10.448 8 11 8c.551 0 1.023.195 1.414.586.39.391.586.862.586 1.414 0 .552-.195 1.023-.583 1.414zm-6.813-4.81A.818.818 0 005.855 6a.818.818 0 00-.25-.604A.818.818 0 005 5.145a.818.818 0 00-.605.251.82.82 0 00-.25.604.82.82 0 00.25.604.818.818 0 00.605.251.818.818 0 00.604-.251zm.813.81C6.027 7.805 5.555 8 5 8a1.925 1.925 0 01-1.414-.586A1.926 1.926 0 013 6c0-.552.195-1.023.586-1.414C3.976 4.195 4.448 4 5 4c.551 0 1.023.195 1.414.586C6.804 4.977 7 5.448 7 6c0 .552-.195 1.023-.583 1.414z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">PercentCircle</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M12.375 16C13 16 13 15.5 13 15s-1.25-2-2.5-2-.625.5-2.5.5-1.25-.5-2.5-.5S3 14.5 3 15s0 1 .625 1H2.007A1.002 1.002 0 011 15V1c0-.552.446-1 .998-1H10v5h5v10.004a1 1 0 01-1.007.996h-1.618zM8 12a3 3 0 100-6 3 3 0 000 6zm3-8V0l4 4h-4z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">PersonalData</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 1c0-.552.456-1 1.002-1h9.996A1 1 0 0114 1v14c0 .552-.456 1-1.002 1H3.002A1 1 0 012 15V1zm2 1v10h8V2H4zm4 13a1 1 0 100-2 1 1 0 000 2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Phone</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M7 8.586V4a1 1 0 112 0v4.586l.293-.293a1 1 0 011.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L7 8.586zM2 1C2 .448 2.456 0 3.002 0h9.996A1 1 0 0114 1v14c0 .552-.456 1-1.002 1H3.002A1 1 0 012 15V1zM4 2v11h8V2H4z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">PhoneDownload</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path clip-rule=\\"evenodd\\" d=\\"M12.998 0A1 1 0 0114 1v14c0 .552-.456 1-1.002 1H3.002A1 1 0 012 15V1c0-.552.456-1 1.002-1h9.995zM12 2H4v11h8V2zM7.293 3.293a1 1 0 011.32-.083l.094.083 2 2a1 1 0 01-1.32 1.497l-.094-.083L9 6.414V11a1 1 0 01-1.993.117L7 11V6.414l-.293.293a1 1 0 01-1.497-1.32l.083-.094 2-2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">PhoneUpload</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M7 16A7 7 0 017 2v7h7a7 7 0 01-7 7zm2-9V0a7 7 0 017 7H9z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">PieChart</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M4 1c0-.552.453-1 .997-1h6.006c.55 0 .997.444.997 1 0 .552-.453 1-.997 1H11v4l2 2v2H9v4l-2 2v-6H3V8l2-2V2c-.552 0-1-.444-1-1z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Pin</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M15.539.461a1.574 1.574 0 00-2.25.023L9.88 4.081 2.025 1.135a.51.51 0 00-.54.117L.15 2.588a.51.51 0 00.108.804l6.561 3.75-3.57 3.57-1.74-.435a.51.51 0 00-.506.158l-.861.98a.51.51 0 00.18.805l2.417 1.042 1.042 2.416a.51.51 0 00.806.181l.979-.861a.51.51 0 00.158-.507l-.435-1.739 3.57-3.57 3.75 6.56a.51.51 0 00.804.108l1.336-1.335a.51.51 0 00.117-.54L11.918 6.12l3.597-3.41c.636-.611.647-1.626.023-2.25z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Plane</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <defs>
           <path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path>
         </defs>
@@ -3785,7 +3885,7 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Plus</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 12 12\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <defs>
           <path id=\\"plus-small_svg__a\\" d=\\"M4 4V1a1 1 0 112 0v3h3a1 1 0 110 2H6v3a1 1 0 11-2 0V6H1a1 1 0 110-2h3z\\"></path>
         </defs>
@@ -3793,57 +3893,57 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">PlusSmall</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M3.414 7h11.58C15.548 7 16 7.444 16 8c0 .552-.45 1-1.007 1H3.414l5.293 5.293a1 1 0 01-1.414 1.414l-7-7a1 1 0 010-1.414l7-7a1 1 0 111.414 1.414L3.414 7z\\" fill-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Previous</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M13 12v3c0 .552-.456 1-.995 1h-8.01A.995.995 0 013 15v-3H1c-.552 0-1-.438-1-1.003V6.003A1 1 0 011 5h14c.552 0 1 .438 1 1.003v4.994A1 1 0 0115 12h-2zM3 1.01C3 .451 3.456 0 3.995 0h8.01c.55 0 .995.443.995 1.01V4H3V1.01zM5 10v4h6v-4H5zm9-2a1 1 0 100-2 1 1 0 000 2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Printer</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 2h8.002a2 2 0 011.414.586l4 4a2 2 0 010 2.828l-4 4a2 2 0 01-1.414.586H2a2 2 0 01-2-2V4a2 2 0 012-2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Qualify</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 16A8 8 0 108 0a8 8 0 000 16zm0-6a2 2 0 100-4 2 2 0 000 4z\\" clip-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">RadioChecked</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z\\" clip-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">RadioUnchecked</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M9.5 3.5L0 13.025V16h3.038L12.5 6.5l-3-3zM14.912.912A1.995 1.995 0 0012.09.911L11 2l3.03 3 1.062-1.075a2.019 2.019 0 00-.004-2.837l-.176-.176zM7 14h5.997a.999.999 0 11.005 2H5l2-2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Rename</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M15.493 2.49L13 5h-2V3L13.556.501c-1.722-.88-3.914-.601-5.356.84a4.587 4.587 0 00-.854 5.327l-6.93 6.926a1.408 1.408 0 101.989 1.993l6.922-6.924a4.582 4.582 0 006.166-6.173z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Repare</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M10.054 4.266c-5.39.75-8.705 4.012-10.021 7.685-.184.513.45.912.851.542 2.155-2 5.465-2.93 9.17-2.93v2.496a.5.5 0 00.849.358l4.752-4.634a1.15 1.15 0 00.021-1.626l-4.773-4.655a.5.5 0 00-.849.358v2.406z\\" fill-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Reply</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M11 0a4 4 0 013.995 3.8L15 4v5a1 1 0 01-.883.993L14 10h-1.5v4.75a1.25 1.25 0 11-2.5 0V1a1 1 0 01.883-.993L11 0zM7 0a1 1 0 01.993.883L8 1v4a3 3 0 01-2.75 2.99v6.76a1.25 1.25 0 11-2.5 0V7.99A3 3 0 01.005 5.176L0 5V1A1 1 0 011.993.883L2 1v4h1V1A1 1 0 014.993.883L5 1v4h1V1a1 1 0 011-1z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Restaurant</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M11 5a3 3 0 110 6H3a1 1 0 100 2h8a5 5 0 000-10H3.414l1.293-1.293A1 1 0 003.293.293l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L3.414 5H11z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">RestoreStraight</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <g fill-rule=\\"evenodd\\">
           <path d=\\"M1 15h8c4.052 0 7-2.948 7-7s-2.948-7-7-7-7 2.948-7 7a1 1 0 102 0c0-2.948 2.052-5 5-5s5 2.052 5 5-2.052 5-5 5H1a1 1 0 000 2z\\"></path>
           <path d=\\"M1.832 4.445a1 1 0 00-1.664 1.11l2 3a1 1 0 001.387.277l3-2a1 1 0 00-1.11-1.664L3.277 6.613 1.832 4.445z\\"></path>
@@ -3851,52 +3951,52 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Restore</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M12.707 7.293l-6-6a.999.999 0 10-1.414 1.414L10.586 8l-5.293 5.293a.999.999 0 101.414 1.414l6-6a.999.999 0 000-1.414\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Right</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M4 2v2.001h6.59L2 12.5 3.5 14l8.499-8.59V12H14V2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Rise</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8.116.547a1.044 1.044 0 01.23-.289c.03-.024.051-.052.082-.072a.97.97 0 01.305-.142c.025-.006.051-.006.076-.01.063-.014.122-.03.191-.03L13 0a.998.998 0 011.001.996.984.984 0 01-.789.957c1.7 1.495 2.785 3.67 2.788 6.03.004 3.085-1.79 5.902-4.528 7.252a.997.997 0 11-.886-1.789c2.062-1.017 3.417-3.143 3.414-5.462-.002-1.47-.57-2.855-1.502-3.93a.987.987 0 01-.352.705 1.001 1.001 0 01-1.408-.126l-2.505-2.99c-.002-.003-.003-.007-.006-.01-.044-.053-.074-.112-.106-.173a.986.986 0 01-.06-.128.988.988 0 01-.045-.172A1.056 1.056 0 018.01.974c.002-.043-.012-.083-.005-.127.007-.043.032-.076.044-.117.018-.063.038-.124.068-.183zM4.574.705a1 1 0 011.333.47.996.996 0 01-.47 1.33 5.977 5.977 0 00-1.686 1.227L2.111 2.56A7.981 7.981 0 014.573.706zm-.832 11.533l-1.185 1.659a8.094 8.094 0 01-2.222-3.61l2.003-.335a6.075 6.075 0 001.404 2.286zM.965 4.2l1.637 1.168A6.086 6.086 0 002 7.98l-1.986.332C.01 8.209 0 8.106 0 8a8.067 8.067 0 01.965-3.8zm6.179 9.79a1 1 0 01-.271 1.978 7.803 7.803 0 01-2.7-.892l1.182-1.655a5.796 5.796 0 001.789.569z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">RotateLeft</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M7.884.547c.03.06.05.12.068.183.012.041.037.074.044.117.007.044-.007.084-.005.127.002.062.002.123-.007.186a.988.988 0 01-.045.172.986.986 0 01-.06.128c-.032.061-.062.12-.106.173-.003.003-.004.007-.006.01l-2.505 2.99a1.001 1.001 0 01-1.408.126.987.987 0 01-.352-.705C2.57 5.13 2.002 6.514 2 7.984c-.003 2.32 1.352 4.445 3.414 5.462a.997.997 0 11-.886 1.79C1.79 13.885-.004 11.067 0 7.981c.003-2.36 1.088-4.534 2.788-6.029a.984.984 0 01-.79-.957A.998.998 0 013 0l4 .005c.069 0 .128.016.19.028.026.005.052.005.077.011a.97.97 0 01.305.142c.03.02.053.048.082.072a1.044 1.044 0 01.23.29zm3.542.158a7.981 7.981 0 012.464 1.856l-1.641 1.17a5.977 5.977 0 00-1.686-1.225.996.996 0 01-.47-1.331 1 1 0 011.333-.47zm.832 11.533a6.075 6.075 0 001.404-2.286l2.003.335a8.094 8.094 0 01-2.222 3.61l-1.185-1.66zM15.035 4.2A8.067 8.067 0 0116 8c0 .106-.01.209-.015.313L14 7.98a6.086 6.086 0 00-.6-2.613L15.034 4.2zm-6.179 9.79a5.796 5.796 0 001.79-.57l1.18 1.656c-.82.45-1.73.76-2.699.892a1 1 0 11-.27-1.978z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">RotateRight</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 52 52\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 52 52\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M38.231 40H13.769C6.175 40 0 33.756 0 26.08c0-3.66 1.394-7.117 3.927-9.733 2.219-2.29 5.093-3.715 8.203-4.086a13.887 13.887 0 014.042-8.292A13.608 13.608 0 0125.801 0c3.62 0 7.04 1.407 9.629 3.968a13.897 13.897 0 014.038 8.25C46.482 12.853 52 18.828 52 26.082 52 33.756 45.82 40 38.23 40h.001zm-.163-3.001h.104c5.97 0 10.828-4.91 10.828-10.947 0-6.035-4.857-10.946-10.828-10.946h-.11a1.442 1.442 0 01-1.435-1.417C36.492 7.794 31.637 3 25.803 3 19.968 3 15.11 7.796 14.977 13.69a1.445 1.445 0 01-1.403 1.42C7.744 15.244 3 20.153 3 26.052 3 32.09 7.857 37 13.828 37h.088l.035-.002c.03 0 .062 0 .093.002h24.021l.003-.001zm-4.302-11.222c-.875.585-.918 1.659-.92 1.706a.52.52 0 01-.525.517.523.523 0 01-.506-.536c.002-.039.016-.543.251-1.137a7.99 7.99 0 00-11.138-.019c.241.603.257 1.116.257 1.155a.523.523 0 01-.503.536.526.526 0 01-.528-.515c0-.043-.042-1.121-.92-1.706a.536.536 0 01-.15-.731.51.51 0 01.714-.154c.225.15.414.322.572.505a9.006 9.006 0 0112.251.01c.16-.184.35-.36.582-.515a.503.503 0 01.281-.085c.168 0 .333.085.432.24a.537.537 0 01-.15.731v-.002z\\" fill-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">SadCozy</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M14 0a2 2 0 012 2v11a2 2 0 01-2 2h-1v1h-3v-1H6v1H3v-1H2a2 2 0 01-2-2V2C0 .9.9 0 2 0h12zm0 1H3a1 1 0 00-1 .88V3H1v3h1v3H1v3h1v1a1 1 0 00.88 1H14a1 1 0 001-.88V2a1 1 0 00-.88-1H14zm0 1v11H3v-2H2v-1h1V5H2V4h1V2h11zM8.5 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zm0 1a2.5 2.5 0 110 5 2.5 2.5 0 010-5zm0 2a.5.5 0 100 1 .5.5 0 000-1z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Safe</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M13 9.102v2.843a.5.5 0 01-.255.435l-4.5 2.532a.5.5 0 01-.49 0l-4.5-2.532A.5.5 0 013 11.945V9.102l4.03 2.155a2.06 2.06 0 001.94 0L13 9.103zM8.16 1.023l.102.042 7.465 3.992a.522.522 0 01.204.194.492.492 0 01-.124.64l-.08.052-7.465 3.992a.56.56 0 01-.423.041l-.101-.041L2 6.867V11a1 1 0 11-2 0V5.5c0-.148.068-.292.192-.39l.08-.053 7.466-3.992a.558.558 0 01.338-.06l.085.019z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">School</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M14.7 8.713a1 1 0 10-1.4-1.427l-4.391 4.312L7.7 10.411a.999.999 0 10-1.4 1.427l1.909 1.875a.997.997 0 001.4 0l5.092-5zM15 4c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1H5c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1h10zm-3-2H5C3.346 2 2 3.346 2 5v7H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v1z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">SelectAll</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M13.855 5a3.502 3.502 0 01-6.71 0H1a1 1 0 010-2h6.145a3.502 3.502 0 016.71 0H15a1 1 0 110 2h-1.145zM12 4a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM5.5 15.5A3.502 3.502 0 008.855 13H15a1 1 0 100-2H8.855a3.502 3.502 0 00-6.71 0H1a1 1 0 100 2h1.145A3.502 3.502 0 005.5 15.5zM7 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Setting</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <g fill-rule=\\"evenodd\\">
           <path d=\\"M5.083 10.16a3 3 0 110-4.319l4.94-2.47a3 3 0 11.895 1.789l-4.94 2.47a3.03 3.03 0 010 .74l4.94 2.47a3 3 0 11-.895 1.789l-4.94-2.47z\\"></path>
           <path d=\\"M5.083 10.16a3 3 0 110-4.319l4.94-2.47a3 3 0 11.895 1.789l-4.94 2.47a3.03 3.03 0 010 .74l4.94 2.47a3 3 0 11-.895 1.789l-4.94-2.47z\\"></path>
@@ -3904,58 +4004,58 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Share</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 16A8 8 0 118 0a8 8 0 010 16zM6.541 6.92a1.5 1.5 0 100 2.16l2.47 1.235a1.5 1.5 0 10.447-.894l-2.47-1.236a1.515 1.515 0 000-.37l2.47-1.235a1.5 1.5 0 10-.447-.894L6.541 6.92z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">ShareCircle</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M8 0c1.205 0 2.396.162 3.782.498 1.22.296 2.47.713 3.751 1.25.27.095.467.337.467.62 0 3.335-.483 5.931-1.687 8.083-1.205 2.166-3.104 3.874-5.907 5.448a.838.838 0 01-.798 0c-2.802-1.574-4.7-3.282-5.906-5.447C.497 8.298 0 5.702 0 2.366a.65.65 0 01.38-.576l.103-.043a23.733 23.733 0 013.75-1.25C5.605.162 6.81 0 8 0zm0 2c-1.014 0-2.06.139-3.3.443a20.91 20.91 0 00-2.44.75l-.246.093.014.362c.108 2.322.523 4.107 1.284 5.575l.138.256c.891 1.6 2.276 2.95 4.399 4.244l.158.095.157-.094c2.007-1.224 3.354-2.495 4.25-3.984l.154-.265c.84-1.502 1.292-3.35 1.404-5.82l.013-.372-.234-.09a22.272 22.272 0 00-1.962-.629l-.48-.123C10.056 2.137 9.024 2 8 2zm0 2c.761 0 1.538.092 2.478.301l.36.084.456.117.425.12.174.053-.004.058c-.151 1.44-.46 2.578-.933 3.514l-.134.251-.139.24-.136.218c-.516.786-1.23 1.522-2.209 2.247l-.331.237-.008-.005L8 4z\\" fill-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Shield</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M4.5 13a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm8 0a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM2.5 1a1 1 0 01.986.836L3.847 4H14a1 1 0 01.986 1.164l-.86 5.165A2 2 0 0112.153 12H4.847a2 2 0 01-1.973-1.671L1.652 3H1a1 1 0 01-.993-.883L0 2a1 1 0 01.883-.993L1 1h1.5z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Shop</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M7.937 13.323a.718.718 0 01-.72.719.72.72 0 01-.46-.166l-3.939-3.258H.72A.72.72 0 010 9.9V7.034a.72.72 0 01.72-.72h2.098l3.939-3.257a.72.72 0 011.18.554v9.712zm2.769-1.124a.72.72 0 01-.561-.209l-.097-.096a.718.718 0 01-.07-.937c.54-.726.825-1.587.825-2.49 0-.971-.323-1.882-.935-2.634a.718.718 0 01.05-.962l.096-.096a.722.722 0 011.067.053 5.681 5.681 0 011.297 3.64 5.705 5.705 0 01-1.147 3.444.721.721 0 01-.525.287zm2.978 2.222a.722.722 0 01-1.06.045l-.094-.094a.718.718 0 01-.042-.972 7.669 7.669 0 001.802-4.933 7.648 7.648 0 00-1.93-5.08.718.718 0 01.03-.985l.094-.094a.721.721 0 011.049.03 9.212 9.212 0 012.332 6.13 9.23 9.23 0 01-2.18 5.953z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Sound</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" role=\\"progressbar\\" aria-busy=\\"true\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" role=\\"progressbar\\" aria-busy=\\"true\\">
         <path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path>
         <path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Spinner</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M3.243 6.034L.671 4.842a.779.779 0 01-.396-.397c-.197-.496 0-.894.396-1.093L7.792.075c.198-.1.395-.1.594 0l7.12 3.277a.746.746 0 01.494.696.746.746 0 01-.494.695l-2.67 1.291-.594.298-3.856 1.887a.694.694 0 01-.693 0 840.224 840.224 0 00-3.857-1.887l-.593-.298zm12.03 4.807c.78.4.675 1.345-.086 1.756L8.421 15.9a.985.985 0 01-.864 0L.572 12.49a.779.779 0 01-.396-.397c-.197-.497 0-.894.396-1.093l.89-.397 2.472 1.192 3.627 1.73a.984.984 0 00.857-.005l3.725-1.825 2.373-1.19.756.336zm.53-3.218c.197.397 0 .894-.594 1.192l-2.274 1.092-.594.3-4.058 2.036a.98.98 0 01-.883 0l-4.058-2.037-.594-.299L.474 8.815a.777.777 0 01-.396-.398c-.198-.496 0-.894.396-1.092l1.285-.596 2.176.993 3.626 1.73a.986.986 0 00.858-.005l4.12-2.023 1.582-.794 1.286.596a.771.771 0 01.396.397z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Stack</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 12l-4.702 2.472.898-5.236L.392 5.528l5.257-.764L8 0l2.351 4.764 5.257.764-3.804 3.708.898 5.236z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Star</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M13 4h2a1 1 0 011 1v10a1 1 0 01-1 1h-2a1 1 0 01-1-1V5a1 1 0 011-1M7 0h2a1 1 0 011 1v14a1 1 0 01-1 1H7a1 1 0 01-1-1V1a1 1 0 011-1M1 8h2a1 1 0 011 1v6a1 1 0 01-1 1H1a1 1 0 01-1-1V9a1 1 0 011-1\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Stats</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M12.64.64C11.2.072 9.488 0 8 0 6.512 0 4.8.072 3.36.64 1.224 1.472 0 3.24 0 5.488V16h16V5.488C16 3.24 14.776 1.472 12.64.64zM13 5.857v5c0 1.07-.785 1.958-1.811 2.118l1.097 1.096v.358h-1.429L9.43 13H6.57l-1.428 1.429H3.714v-.358l1.097-1.096A2.143 2.143 0 013 10.857v-5C3 3.714 5.143 3 8 3s5 .714 5 2.857zm-8.571-.714V8h7.142V5.143H4.43zM6.57 10.5a1.071 1.071 0 11-2.142 0 1.071 1.071 0 012.142 0zm3.929 1.071a1.071 1.071 0 100-2.142 1.071 1.071 0 000 2.142z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Subway</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M16 7.2V3c0-.6-.4-1-1-1-.5 0-.8.3-.9.7A8.09 8.09 0 008 0C4.9 0 2 1.8.7 4.6c-.2.5 0 1.1.5 1.3.5.2 1.1 0 1.3-.5C3.5 3.4 5.6 2 8 2c1.5 0 3 .6 4 1.5-.3 0-.6.1-.8.3-.4.4-.3 1.1.1 1.4l3 2.5h.1c.1.1.2.1.3.1h.4c.1 0 .2-.1.3-.1h.1c.1-.1.2-.1.2-.2.2 0 .2-.1.3-.3 0 .1 0 0 0 0m-1.2 2.9c-.5-.2-1.1 0-1.3.5A6 6 0 018 14c-1.5 0-2.9-.6-4-1.5.3 0 .5-.1.7-.4.4-.4.3-1.1-.1-1.4l-3-2.5h-.1L1.3 8h-.1c-.2 0-.5 0-.7.1H.4c-.1.1-.1.2-.2.3-.1.1-.1.2-.2.3V13c0 .6.4 1 1 1 .5 0 .9-.3 1-.8C3.5 14.9 5.6 16 8 16c3.1 0 5.9-1.8 7.3-4.5.2-.5 0-1.1-.5-1.4\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Sync</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M8 2c2.21 0 4 1.79 4 4 2.21 0 4 1.79 4 4s-1.79 4-4 4H4c-2.21 0-4-1.79-4-4s1.79-4 4-4c0-2.21 1.79-4 4-4zM4.6 9.014a.491.491 0 00-.345.055l-.038.024a.502.502 0 00-.112.104l-.012.014a.46.46 0 00-.074.16l-.006.04C4.008 9.441 4 9.469 4 9.5v2a.5.5 0 00.5.5.493.493 0 00.478-.39C5.728 12.459 6.818 13 8 13a4.071 4.071 0 003.632-2.268.501.501 0 00-.898-.442A3.065 3.065 0 018 12c-.74 0-1.436-.286-1.976-.754a.496.496 0 00.296-.88l-1.5-1.25c-.005-.005-.012-.006-.017-.011l-.04-.024a.463.463 0 00-.124-.057zM8 5c-1.57 0-2.992.906-3.653 2.291a.5.5 0 00.903.431A3.05 3.05 0 018 6c.769 0 1.477.287 2.017.758a.49.49 0 00-.401.172.5.5 0 00.064.704l1.5 1.25.011.007c.01.008.023.013.034.02.04.028.083.05.127.063l.04.01c.054.012.11.017.163.01.005 0 .009.002.013.001a.527.527 0 00.17-.059c.014-.007.025-.016.038-.024a.492.492 0 00.107-.097l.02-.021c.034-.047.06-.1.077-.158.003-.01.002-.02.004-.03.008-.034.016-.068.016-.106v-2a.5.5 0 00-.5-.5.492.492 0 00-.471.357A4.06 4.06 0 007.999 5z\\" fill=\\"#297EF1\\" fill-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">SyncCozy</p>
@@ -3966,37 +4066,37 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Tag</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M9 12.899V12a1 1 0 00-2 0v.899A5.016 5.016 0 013.101 9H4a1 1 0 000-2h-.899A5.016 5.016 0 017 3.101V4a1 1 0 002 0v-.899A5.016 5.016 0 0112.899 7H12a1 1 0 000 2h.899A5.016 5.016 0 019 12.899zM16 7h-1.08A7.005 7.005 0 009 1.08V1a1 1 0 00-2 0v.08A7.005 7.005 0 001.08 7H1a1 1 0 000 2h.08A7.004 7.004 0 007 14.92V15a1 1 0 002 0v-.08A7.004 7.004 0 0014.92 9H16V7z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Target</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M11.145 7.75C10.263 7.285 9.647 6.23 9.647 5c0-1.657 1.12-3 2.5-3 1.381 0 2.5 1.343 2.5 3 0 1.231-.618 2.29-1.502 2.752V9l1.105.553c.49.245 1.095.848 1.342 1.342l.106.21c.245.49 0 .895-.55.895H9.142c-.544 0-.797-.4-.55-.895l.106-.21c.245-.49.848-1.095 1.342-1.342L11.145 9V7.75zM4.647 10.8c-1.165-.48-2-1.776-2-3.3 0-1.933 1.343-3.5 3-3.5s3 1.567 3 3.5c0 1.524-.835 2.82-2 3.3V12l2.051.684c.532.177 1.15.717 1.397 1.21l.105.211c.245.49.002.895-.548.895h-8.01c-.539 0-.794-.4-.547-.895l.105-.21c.245-.49.872-1.037 1.397-1.211L4.647 12v-1.2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Team</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M5.88 4.655a1.68 1.68 0 00.001-2.377L4.097.492a1.685 1.685 0 00-2.38 0l-.98.979A2.521 2.521 0 00.42 4.646 39.038 39.038 0 0011.356 15.58c.999.662 2.328.53 3.175-.316l.979-.979a1.681 1.681 0 000-2.379l-1.785-1.784a1.679 1.679 0 00-2.379 0l-.594.593A40.017 40.017 0 015.285 5.25l.595-.595z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Telephone</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M12.112 5.665a4.132 4.132 0 00-1.239-2.475A4.227 4.227 0 007.918 2c-1.112 0-2.16.422-2.955 1.19-.237.229-.43.487-.603.756l2.847 2.847L9 5v5H4l1.793-1.793-2.452-2.451a4.21 4.21 0 00-2.136 1.148A4.124 4.124 0 000 9.824C0 12.127 1.895 14 4.225 14h7.507c2.33 0 4.227-1.873 4.227-4.176 0-2.176-1.694-3.968-3.847-4.159\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">ToTheCloud</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path d=\\"M20.603 17.825a1.571 1.571 0 002.222-2.222l-9.428-9.428a1.571 1.571 0 00-2.222 0l-9.429 9.428a1.571 1.571 0 002.222 2.222l8.318-8.317 8.317 8.317z\\" fill-rule=\\"evenodd\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Top</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M15 4v7a3 3 0 01-2.536 2.964L14 15.5v.5h-2l-2-2H6l-2 2H2v-.5l1.536-1.536A3 3 0 011 11V4c0-3 3-4 7-4s7 1 7 4zM3 7h4V3H3v4zm6-4v4h4V3H9zm-3 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.5 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Train</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <g fill-rule=\\"evenodd\\">
           <path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path>
           <path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path>
@@ -4004,77 +4104,77 @@ exports[`Icon should render examples: Icon 1`] = `
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Trash</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M3 2V1c0-.552.456-1 .995-1h8.01c.55 0 .995.444.995 1v1h2.001a1 1 0 01.999.99v3.012c0 1.104-.852 2.282-1.9 2.631L13 9l-4 3v2h.508c.548 0 1.26.358 1.593.802L12 16H4l.899-1.198C5.23 14.359 5.942 14 6.492 14H7v-2L3 9l-1.1-.367C.85 8.283 0 7.102 0 6.003V2.99C0 2.444.443 2 .999 2H3zm0 2H2v2.505c0 .273.232.495.5.495H3V4zm10 0v3h.5c.268 0 .5-.222.5-.495V4h-1z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Trophy</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M8 12a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm.968-10.9c1.777.372 3.182 1.858 3.472 3.65a4.507 4.507 0 01-2.828 4.953l-.112.039V11h-3V8.5a1.5 1.5 0 011.356-1.493L8 7a1.5 1.5 0 10-1.493-1.645L6.5 5.5h-3a4.506 4.506 0 015.468-4.4z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Unknow</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M.151 2.849l1.414-1.414 13 13-1.414 1.414-4.453-4.452c-1.099.059-2.202-.298-3-1.095a1.044 1.044 0 010-1.475 1.03 1.03 0 01.26-.172L5.302 8l-2.909 2.91a1.04 1.04 0 00-.007 1.472l1.23 1.23a1.04 1.04 0 001.468-.002l1.656-1.656a1.042 1.042 0 111.474 1.475L6.56 15.085a3.126 3.126 0 01-4.418.002l-1.229-1.23a3.125 3.125 0 01.007-4.42l2.91-2.91L.15 2.849zm10.15 2.85a1.044 1.044 0 010 1.475c-.033.034-.078.048-.115.076L7.53 4.595c1.023 0 2.03.362 2.77 1.104zm4.786-3.556a3.126 3.126 0 01-.007 4.422l-2.79 2.79-1.474-1.474 2.79-2.79a1.04 1.04 0 00.006-1.473l-1.23-1.23a1.042 1.042 0 00-1.468.002L9.259 4.045A1.042 1.042 0 117.784 2.57L9.44.915a3.127 3.127 0 014.418-.001l1.229 1.229z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Unlink</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M3 6h7V4.5C10 3.122 9.103 2 8 2S6 3.122 6 4.5H4V4c0-2.206 1.794-4 4-4 2.205 0 4 1.794 4 4v2h1c.556 0 1 .446 1 .995v8.01c0 .54-.449.995-1.002.995H3.002A1.003 1.003 0 012 15.005v-8.01C2 6.455 2.448 6 3 6zm5 2.5A1.5 1.5 0 006.5 10c0 .552.303 1.032.75 1.29v2.46a.751.751 0 001.5 0v-2.46c.445-.258.75-.738.75-1.29 0-.828-.674-1.5-1.5-1.5z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Unlock</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M11 16V8h5L8 0 0 8h5v8z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Up</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M7 6.414L5.707 7.707a1 1 0 01-1.414-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L9 6.414V14a1 1 0 11-2 0V6.414zM1 2h14a1 1 0 100-2H1a1 1 0 100 2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Upload</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M1 1h14a1 1 0 011 1v12a1 1 0 01-1 1H1a1 1 0 01-1-1V2a1 1 0 011-1zm.5 1a.5.5 0 000 1h1a.5.5 0 000-1h-1zm0 11a.5.5 0 100 1h1a.5.5 0 100-1h-1zm3-11a.5.5 0 000 1h1a.5.5 0 000-1h-1zm0 11a.5.5 0 100 1h1a.5.5 0 100-1h-1zm3-11a.5.5 0 000 1h1a.5.5 0 000-1h-1zm0 11a.5.5 0 100 1h1a.5.5 0 100-1h-1zm3-11a.5.5 0 100 1h1a.5.5 0 100-1h-1zm0 11a.5.5 0 100 1h1a.5.5 0 100-1h-1zm3-11a.5.5 0 100 1h1a.5.5 0 100-1h-1zm0 11a.5.5 0 100 1h1a.5.5 0 100-1h-1zM6 11.066a.5.5 0 00.777.416l4.599-3.064a.5.5 0 000-.832L6.777 4.52A.5.5 0 006 4.935v6.131z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Videos</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 17\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 17\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" clip-rule=\\"evenodd\\" d=\\"M10.602 3.663A2 2 0 118.38.337a2 2 0 012.222 3.326zm-.121 3.73c.424.362.954.575 1.51.607a1 1 0 110 2 4.071 4.071 0 01-3-1.29l-.69 1.58 2.33 1.94a1 1 0 01.36.77v2a1 1 0 01-2 0v-1.53l-2.58-2.12-1.48 4a1.003 1.003 0 11-1.88-.7L5.87 7l-1.12.32-.82 2a1 1 0 11-1.86-.74l1-2.5a1 1 0 01.66-.59l3.36-1h.12c.11-.014.22-.014.33 0h.1a2.16 2.16 0 012 1.51 2.56 2.56 0 00.84 1.394z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Walk</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 0h11a1 1 0 011 1v3h1a1 1 0 011 1v10a1 1 0 01-1 1H2a2 2 0 01-2-2V2a2 2 0 012-2zm1 2a1 1 0 100 2h9V2H3zm8 9a1 1 0 100-2 1 1 0 000 2z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Wallet</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 0h11a1 1 0 011 1v3h1a1 1 0 011 1v10a1 1 0 01-1 1H2a2 2 0 01-2-2V2a2 2 0 012-2zm1 2a1 1 0 100 2h9V2H3zm4 4v3H4v2h3v3h2v-3h3V9H9V6H7z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">WalletAdd</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M2 0h11a1 1 0 011 1v3h1a1 1 0 011 1v10a1 1 0 01-1 1H2a2 2 0 01-2-2V2a2 2 0 012-2zm1 2a1 1 0 100 2h9V2H3zm4 4v3H4v2h3v3h2v-3h3V9H9V6H7z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">WalletNew</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 48 48\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 48 48\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M24 48c13.255 0 24-10.745 24-24S37.255 0 24 0 0 10.745 0 24s10.745 24 24 24zm-1.503-34.897c.83-1.438 2.175-1.44 3.007 0l9.992 17.294c.83 1.438.16 2.603-1.504 2.603H14.008c-1.661 0-2.336-1.162-1.504-2.603l9.993-17.294zm.082 5.323A1.334 1.334 0 0123.93 17h.141c.79 0 1.395.633 1.35 1.426l-.365 6.576c-.03.551-.499.998-1.055.998a1.069 1.069 0 01-1.055-.998l-.366-6.576zM22.5 29c0-.828.666-1.5 1.5-1.5.828 0 1.5.666 1.5 1.5 0 .828-.666 1.5-1.5 1.5-.828 0-1.5-.666-1.5-1.5z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Warn</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M7.022 1.736c.543-.959 1.428-.95 1.966 0l6.532 11.529c.543.958.094 1.735-1.016 1.735h-13C.399 15-.051 14.215.487 13.265l6.535-11.53zM7.004 13c0-.552.443-1 1-1 .552 0 1 .444 1 1 0 .553-.444 1-1 1-.553 0-1-.444-1-1zm0-7.997a.999.999 0 011-1.003c.552 0 1 .438 1 1.003v4.994a.999.999 0 01-1 1.003c-.553 0-1-.438-1-1.003V5.003z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">Warning</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 9.75C7.30964 9.75 6.75 10.3096 6.75 11C6.75 11.6904 7.30964 12.25 8 12.25C8.69036 12.25 9.25 11.6904 9.25 11C9.25 10.3096 8.69036 9.75 8 9.75ZM8 4C7.48716 4 7.06449 4.38604 7.00673 4.88338L7 5V8C7 8.55228 7.44772 9 8 9C8.51284 9 8.93551 8.61396 8.99327 8.11662L9 8V5C9 4.44772 8.55228 4 8 4Z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">WarningCircle</p>
     </div>
-    <div class=\\"makeStyles-iconTile-87 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+    <div class=\\"makeStyles-iconTile-95 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
         <path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 110 16A8 8 0 018 0zm1.91 4.182a4.052 4.052 0 00-4.636-.773l2.262 2.262.072.086a.62.62 0 01-.072.793l-.99.99-.078.068a.61.61 0 01-.801-.067L3.404 5.279l-.09.199a4.05 4.05 0 00.87 4.43 4.055 4.055 0 004.293.923l2.422 2.423a6.029 6.029 0 002.326-2.302l-2.41-2.414.072-.2a4.054 4.054 0 00-.976-4.156z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1 MuiTypography-colorTextPrimary\\">WrenchCircle</p>
@@ -7854,13 +7954,13 @@ exports[`Media should render examples: Media 3`] = `
 exports[`MuiCozyTheme/Switch should render examples: MuiCozyTheme/Switch 1`] = `
 "<div>
   <div class=\\"styles__Stack--xs___2R5lW\\">
-    <div class=\\"MuiBox-root MuiBox-root-99\\">
+    <div class=\\"MuiBox-root MuiBox-root-107\\">
       <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary MuiTypography-displayInline\\">primary</p><span class=\\"MuiSwitch-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-checked-2 Mui-checked\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4 MuiSwitch-input\\" type=\\"checkbox\\" value=\\"\\" checked=\\"\\"><span class=\\"MuiSwitch-thumb\\"></span></span></span><span class=\\"MuiSwitch-track\\"></span></span>
     </div>
-    <div class=\\"MuiBox-root MuiBox-root-100\\">
+    <div class=\\"MuiBox-root MuiBox-root-108\\">
       <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary MuiTypography-displayInline\\">secondary</p><span class=\\"MuiSwitch-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiSwitch-switchBase MuiSwitch-colorSecondary PrivateSwitchBase-checked-2 Mui-checked\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4 MuiSwitch-input\\" type=\\"checkbox\\" value=\\"\\" checked=\\"\\"><span class=\\"MuiSwitch-thumb\\"></span></span></span><span class=\\"MuiSwitch-track\\"></span></span>
     </div>
-    <div class=\\"MuiBox-root MuiBox-root-101\\">
+    <div class=\\"MuiBox-root MuiBox-root-109\\">
       <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary MuiTypography-displayInline\\">default</p><span class=\\"MuiSwitch-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiSwitch-switchBase\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4 MuiSwitch-input\\" type=\\"checkbox\\" value=\\"\\"><span class=\\"MuiSwitch-thumb\\"></span></span></span><span class=\\"MuiSwitch-track\\"></span></span>
     </div>
   </div>
@@ -7895,42 +7995,42 @@ exports[`Paper should render examples: Paper 1`] = `
     <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SQUARE</span></label>
   </div>
   <div class=\\"styles__Stack--m___1tSpV\\">
-    <div class=\\"MuiPaper-root PaperExample-root-88 MuiPaper-elevation0\\">
+    <div class=\\"MuiPaper-root PaperExample-root-96 MuiPaper-elevation0\\">
       <h3 class=\\"MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary\\">This is a sheet of paper</h3>
       <div style=\\"position: absolute; right: 1rem; top: 1rem;\\">
         <h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-colorTextPrimary\\">elevation 0</h6>
       </div>
       <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">Paper can be used to build surface or other elements for your application.</p>
     </div>
-    <div class=\\"MuiPaper-root PaperExample-root-88 MuiPaper-elevation1\\">
+    <div class=\\"MuiPaper-root PaperExample-root-96 MuiPaper-elevation1\\">
       <h3 class=\\"MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary\\">This is a sheet of paper</h3>
       <div style=\\"position: absolute; right: 1rem; top: 1rem;\\">
         <h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-colorTextPrimary\\">elevation 1</h6>
       </div>
       <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">Paper can be used to build surface or other elements for your application.</p>
     </div>
-    <div class=\\"MuiPaper-root PaperExample-root-88 MuiPaper-elevation4\\">
+    <div class=\\"MuiPaper-root PaperExample-root-96 MuiPaper-elevation4\\">
       <h3 class=\\"MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary\\">This is a sheet of paper</h3>
       <div style=\\"position: absolute; right: 1rem; top: 1rem;\\">
         <h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-colorTextPrimary\\">elevation 4</h6>
       </div>
       <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">Paper can be used to build surface or other elements for your application.</p>
     </div>
-    <div class=\\"MuiPaper-root PaperExample-root-88 MuiPaper-elevation12\\">
+    <div class=\\"MuiPaper-root PaperExample-root-96 MuiPaper-elevation12\\">
       <h3 class=\\"MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary\\">This is a sheet of paper</h3>
       <div style=\\"position: absolute; right: 1rem; top: 1rem;\\">
         <h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-colorTextPrimary\\">elevation 12</h6>
       </div>
       <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">Paper can be used to build surface or other elements for your application.</p>
     </div>
-    <div class=\\"MuiPaper-root PaperExample-root-88 MuiPaper-elevation16\\">
+    <div class=\\"MuiPaper-root PaperExample-root-96 MuiPaper-elevation16\\">
       <h3 class=\\"MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary\\">This is a sheet of paper</h3>
       <div style=\\"position: absolute; right: 1rem; top: 1rem;\\">
         <h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-colorTextPrimary\\">elevation 16</h6>
       </div>
       <p class=\\"MuiTypography-root MuiTypography-body1 MuiTypography-colorTextPrimary\\">Paper can be used to build surface or other elements for your application.</p>
     </div>
-    <div class=\\"MuiPaper-root PaperExample-root-88 MuiPaper-elevation24\\">
+    <div class=\\"MuiPaper-root PaperExample-root-96 MuiPaper-elevation24\\">
       <h3 class=\\"MuiTypography-root MuiTypography-h3 MuiTypography-colorTextPrimary\\">This is a sheet of paper</h3>
       <div style=\\"position: absolute; right: 1rem; top: 1rem;\\">
         <h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-colorTextPrimary\\">elevation 24</h6>
@@ -7964,20 +8064,20 @@ exports[`PieChart should render examples: PieChart 1`] = `
 "<div>
   <div class=\\"MuiGrid-root MuiGrid-container\\">
     <div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6\\">
-      <div class=\\"makeStyles-container-89\\">
-        <div class=\\"makeStyles-background-90 makeStyles-background-93\\"></div><canvas role=\\"img\\" height=\\"150\\" width=\\"300\\"></canvas>
-        <div class=\\"makeStyles-centerText-91\\">
-          <h3 class=\\"MuiTypography-root makeStyles-typography-92 makeStyles-typography-94 MuiTypography-h3 MuiTypography-colorTextPrimary\\">60 %</h3>
-          <p class=\\"MuiTypography-root makeStyles-typography-92 makeStyles-typography-94 MuiTypography-body2 MuiTypography-colorTextPrimary\\">of the total</p>
+      <div class=\\"makeStyles-container-97\\">
+        <div class=\\"makeStyles-background-98 makeStyles-background-101\\"></div><canvas role=\\"img\\" height=\\"150\\" width=\\"300\\"></canvas>
+        <div class=\\"makeStyles-centerText-99\\">
+          <h3 class=\\"MuiTypography-root makeStyles-typography-100 makeStyles-typography-102 MuiTypography-h3 MuiTypography-colorTextPrimary\\">60 %</h3>
+          <p class=\\"MuiTypography-root makeStyles-typography-100 makeStyles-typography-102 MuiTypography-body2 MuiTypography-colorTextPrimary\\">of the total</p>
         </div>
       </div>
     </div>
     <div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6\\">
-      <div class=\\"makeStyles-container-89\\">
-        <div class=\\"makeStyles-background-90 makeStyles-background-95\\"></div><canvas role=\\"img\\" height=\\"150\\" width=\\"300\\"></canvas>
-        <div class=\\"makeStyles-centerText-91\\">
-          <h3 class=\\"MuiTypography-root makeStyles-typography-92 makeStyles-typography-96 MuiTypography-h3 MuiTypography-colorTextPrimary\\">105 €</h3>
-          <p class=\\"MuiTypography-root makeStyles-typography-92 makeStyles-typography-96 MuiTypography-body2 MuiTypography-colorTextPrimary\\">on the period</p>
+      <div class=\\"makeStyles-container-97\\">
+        <div class=\\"makeStyles-background-98 makeStyles-background-103\\"></div><canvas role=\\"img\\" height=\\"150\\" width=\\"300\\"></canvas>
+        <div class=\\"makeStyles-centerText-99\\">
+          <h3 class=\\"MuiTypography-root makeStyles-typography-100 makeStyles-typography-104 MuiTypography-h3 MuiTypography-colorTextPrimary\\">105 €</h3>
+          <p class=\\"MuiTypography-root makeStyles-typography-100 makeStyles-typography-104 MuiTypography-body2 MuiTypography-colorTextPrimary\\">on the period</p>
         </div>
       </div>
     </div>
@@ -8005,7 +8105,7 @@ exports[`ProgressionBanner should render examples: ProgressionBanner 1`] = `
     <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">WITHVALUE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">PROGRESSBAR</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">WITHBUTTON</span></label>
   </div>
   <div class=\\"MuiPaper-root MuiPaper-elevation0\\">
-    <div class=\\"styles__c-banner-wrapper___3KlaG Component-banner-97\\">
+    <div class=\\"styles__c-banner-wrapper___3KlaG Component-banner-105\\">
       <div class=\\"MuiGrid-root MuiGrid-container MuiGrid-justify-content-xs-space-between\\">
         <div class=\\"MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-align-items-xs-center MuiGrid-grid-xs-12 MuiGrid-grid-lg-8\\">
           <div class=\\"MuiGrid-root MuiGrid-item\\">
@@ -8024,7 +8124,7 @@ exports[`ProgressionBanner should render examples: ProgressionBanner 1`] = `
     </div>
   </div>
   <hr class=\\"MuiDivider-root\\">
-  <div class=\\"MuiLinearProgress-root MuiLinearProgress-colorPrimary Component-progress-98 MuiLinearProgress-indeterminate\\" role=\\"progressbar\\">
+  <div class=\\"MuiLinearProgress-root MuiLinearProgress-colorPrimary Component-progress-106 MuiLinearProgress-indeterminate\\" role=\\"progressbar\\">
     <div class=\\"MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate\\"></div>
     <div class=\\"MuiLinearProgress-bar MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary\\"></div>
   </div>
diff --git a/react/examples.spec.jsx b/react/examples.spec.jsx
index 92b1ecc722..32187cf35b 100644
--- a/react/examples.spec.jsx
+++ b/react/examples.spec.jsx
@@ -24,6 +24,7 @@ const testComponent = (ComponentName, options) => {
 }
 
 // Please keep the list sorted
+testComponent('Alert')
 testComponent('AppTitle')
 testComponent('Avatar')
 testComponent('Badge')
diff --git a/react/index.js b/react/index.js
index 09f123b630..aef76422b9 100644
--- a/react/index.js
+++ b/react/index.js
@@ -106,3 +106,5 @@ export { default as Chips } from './Chips'
 export { default as PieChart } from './PieChart'
 export { default as DropdownText } from './DropdownText'
 export { default as CircleButton } from './CircleButton'
+export { default as Alert } from './Alert'
+export { default as AlertTitle } from './AlertTitle'