cozy-ui 97.0.0 → 97.1.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [97.1.0](https://github.com/cozy/cozy-ui/compare/v97.0.0...v97.1.0) (2023-11-28)
+
+
+### Bug Fixes
+
+* **Alert:** Adjust colors ([29a3b80](https://github.com/cozy/cozy-ui/commit/29a3b80))
+
+
+### Features
+
+* **MuiPalette:** Add `theme.palette.background.contrastOpacity` ([a09926b](https://github.com/cozy/cozy-ui/commit/a09926b))
+* **PointerAlert:** Add this new component based on Alert ([9d73f68](https://github.com/cozy/cozy-ui/commit/9d73f68))
+
 # [97.0.0](https://github.com/cozy/cozy-ui/compare/v96.2.0...v97.0.0) (2023-11-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "97.0.0",
+  "version": "97.1.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Alert/Readme.md

@@ -17,6 +17,7 @@ const initialVariants = [{
   square: false,
   actionOne: false,
   actionTwo: false,
+  filled: false,
   close: false
 }]
 
@@ -26,6 +27,7 @@ const initialVariants = [{
   {variant => (
     <Alert
       color={variant.color ? "#EFA82D" : undefined}
+      variant={variant.filled ? 'filled' : undefined}
       block={variant.block}
       square={variant.square}
       icon={variant.noIcon ? false : variant.largeIcon ? <Icon icon={DeviceLaptopIcon} color="var(--errorColor)" size={32} /> : undefined}
@@ -81,7 +83,7 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
             )}
             onClose={variant.close ? () => {} : undefined}
           >
-            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            {variant.title && <AlertTitle>{color}</AlertTitle>}
             This is a {color} alert
           </Alert>
         </div>
@@ -97,11 +99,16 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
             severity={color}
             block={variant.block}
             action={variant.close ? undefined : (
-              <Button variant="primary" size="small" color={makeButtonColor(color)} label="ACTION" />
+              <Button
+                variant='text'
+                style={{ color: `var(--${color}ContrastTextColor)` }}
+                size="small"
+                label="ACTION"
+              />
             )}
             onClose={variant.close ? () => {} : undefined}
           >
-            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            {variant.title && <AlertTitle>{color}</AlertTitle>}
             This is a {color} alert
           </Alert>
         </div>
@@ -121,7 +128,7 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
             )}
             onClose={variant.close ? () => {} : undefined}
           >
-            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            {variant.title && <AlertTitle>{color}</AlertTitle>}
             This is a {color} alert
           </Alert>
         </div>

package/react/Alert/index.jsx

@@ -57,6 +57,7 @@ const Alert = forwardRef(
     },
     ref
   ) => {
+    // as primary and secondary doesn't exist on Mui Alert, we force success severity for those
     const madeSeverity = ['primary', 'secondary'].includes(severity)
       ? 'success'
       : severity
@@ -70,7 +71,7 @@ const Alert = forwardRef(
         style={{ backgroundColor: color, borderRadius: square && 0 }}
         className={cx(
           className,
-          `cozyAlert-${severity}-${variant}`,
+          `cozyStyles-${severity}-${variant}`,
           { block },
           { action: Boolean(action) }
         )}
@@ -90,7 +91,7 @@ const Alert = forwardRef(
 
 Alert.displayName = 'Alert'
 
-Alert.propTypes = {
+export const AlertPropTypes = {
   className: PropTypes.string,
   icon: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
   severity: PropTypes.oneOf([
@@ -107,11 +108,15 @@ Alert.propTypes = {
   variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])
 }
 
-Alert.defaultProps = {
+export const AlertDefaultProps = {
   severity: 'primary',
   block: false,
   square: false,
   variant: 'standard'
 }
 
+Alert.propTypes = AlertPropTypes
+
+Alert.defaultProps = AlertDefaultProps
+
 export default Alert

package/react/MuiCozyTheme/helpers.js

@@ -1,18 +1,25 @@
-import { alpha, lighten, darken } from '../styles'
+import { alpha } from '../styles'
 
-export const makeAlertColor = (theme, color) => {
-  const themeColorByColor = {
-    primary: theme.palette[color].main,
-    secondary: theme.palette.text.primary
-  }
+export const makeAlertBackgroundColor = ({ theme, severity }) => ({
+  standard: alpha(
+    theme.palette[severity].main,
+    theme.palette.background.contrastOpacity
+  ),
+  outlined: theme.palette[severity].main,
+  filled: theme.palette[severity].main
+})
 
+export const makeAlertColor = (theme, severity) => {
   // 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),
+      color: theme.palette.text.primary,
+      backgroundColor: makeAlertBackgroundColor({ theme, severity }).standard,
       '& $icon': {
-        color: themeColorByColor[color]
+        color:
+          severity === 'secondary'
+            ? theme.palette.text.primary
+            : theme.palette[severity].main
       },
       '& $action': {
         '& button[title="Close"]': {
@@ -21,45 +28,24 @@ export const makeAlertColor = (theme, color) => {
       }
     },
     '&-outlined': {
-      color: darken(themeColorByColor[color], 0.6),
-      border: `1px solid ${themeColorByColor[color]}`,
+      color: theme.palette.text.primary,
+      border: `1px solid ${
+        makeAlertBackgroundColor({ theme, severity }).outlined
+      }`,
       '& $icon': {
-        color: themeColorByColor[color]
+        color:
+          severity === 'secondary'
+            ? theme.palette.text.primary
+            : theme.palette[severity].main
       }
     },
     '&-filled': {
-      backgroundColor:
-        color === 'secondary'
-          ? theme.palette.grey[600]
-          : themeColorByColor[color]
-    }
-  }
-}
-
-export 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:
-        color === 'secondary'
-          ? theme.palette.grey[200]
-          : theme.palette[color].main,
-      '& $icon': {
-        color: theme.palette[color].contrastText
+      color: theme.palette[severity].contrastText,
+      backgroundColor: makeAlertBackgroundColor({ theme, severity }).filled,
+      '& $action': {
+        '& button[title="Close"]': {
+          color: theme.palette[severity].contrastText
+        }
       }
     }
   }

package/react/MuiCozyTheme/makeInvertedOverrides.js

@@ -1,6 +1,5 @@
 import merge from 'lodash/merge'
 
-import { makeAlertInvertedColor } from './helpers'
 import { makeOverrides } from './makeOverrides'
 
 export const makeInvertedOverrides = invertedTheme => {
@@ -28,18 +27,6 @@ export const makeInvertedOverrides = invertedTheme => {
         backgroundColor: 'rgba(255,255,255,0.2)'
       }
     },
-    MuiAlert: {
-      root: {
-        '&.cozyAlert': {
-          '&-primary': makeAlertInvertedColor(invertedTheme, 'primary'),
-          '&-secondary': makeAlertInvertedColor(invertedTheme, 'secondary'),
-          '&-success': makeAlertInvertedColor(invertedTheme, 'success'),
-          '&-error': makeAlertInvertedColor(invertedTheme, 'error'),
-          '&-warning': makeAlertInvertedColor(invertedTheme, 'warning'),
-          '&-info': makeAlertInvertedColor(invertedTheme, 'info')
-        }
-      }
-    },
     MuiSnackbarContent: {
       root: {
         backgroundColor: invertedTheme.palette.grey[200]

package/react/MuiCozyTheme/makeOverrides.js

@@ -760,9 +760,13 @@ export const makeOverrides = theme => ({
   MuiAlert: {
     root: {
       padding: '8px 16px',
-      '&.cozyAlert': {
+      '&.cozyStyles': {
         '&-primary': makeAlertColor(theme, 'primary'),
-        '&-secondary': makeAlertColor(theme, 'secondary')
+        '&-secondary': makeAlertColor(theme, 'secondary'),
+        '&-success': makeAlertColor(theme, 'success'),
+        '&-error': makeAlertColor(theme, 'error'),
+        '&-warning': makeAlertColor(theme, 'warning'),
+        '&-info': makeAlertColor(theme, 'info')
       },
       '& $icon': {
         paddingTop: '9px'

package/react/MuiCozyTheme/makePalette.js

@@ -124,6 +124,7 @@ export const makePalette = type => {
       default: getCssValue('defaultBackgroundColor'),
       paper: getCssValue('paperBackgroundColor'),
       contrast: getCssValue('contrastBackgroundColor'),
+      contrastOpacity: type === 'dark' ? 0.24 : 0.12,
       selected: '#F5FAFF' // deprecated, should be removed. Use action.selected instead
     }
   }

package/react/PointerAlert/Readme.md

@@ -0,0 +1,143 @@
+Displays a Alert with an Arrow pointing to a direction (top, right, bottom, left). It is essentially based on Alert so it inherits its props and defaultProps.
+
+### Basic usage
+
+```bash
+import PointerAlert from 'cozy-ui/transpiled/react/PointerAlert'
+
+<PointerAlert direction="bottom" severity="primary">
+  Your PointerAlert content
+</PointerAlert>
+```
+
+### Demo
+
+```jsx
+import PointerAlert from 'cozy-ui/transpiled/react/PointerAlert'
+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: true,
+  color: false,
+  largeIcon: false,
+  noIcon: false,
+  square: false,
+  actionOne: true,
+  actionTwo: false,
+  close: false
+}]
+
+const directions = ['top', 'bottom', 'left', 'right']
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <>
+      {directions.map(direction =>
+        <div className="u-mb-1" key={direction}>
+            <PointerAlert
+              direction={direction}
+              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."
+              }
+            </PointerAlert>
+        </div>
+      )}
+    </>
+  )}
+</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'
+
+const colors = ['primary', 'secondary','success', 'error', 'warning', 'info']
+
+const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? undefined : color
+
+;
+
+<>
+  {colors.map(color =>
+    <div className="u-mb-1" key={color}>
+      <PointerAlert
+        severity={color}
+        action={<Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" />}
+      >
+        <AlertTitle>{color}</AlertTitle>
+        This is a {color} alert
+      </PointerAlert>
+    </div>
+  )}
+
+  <hr />
+  <Typography variant="h4" paragraph>Filled variant</Typography>
+
+  {colors.map(color =>
+    <div className="u-mb-1" key={color}>
+      <PointerAlert
+        variant="filled"
+        severity={color}
+        action={
+          <Button
+            variant='text'
+            style={{ color: `var(--${color}ContrastTextColor)` }}
+            size="small"
+            label="ACTION"
+          />}
+      >
+        <AlertTitle>{color}</AlertTitle>
+        This is a {color} alert
+      </PointerAlert>
+    </div>
+  )}
+
+  <hr />
+  <Typography variant="h4" paragraph>Outlined variant</Typography>
+
+  {colors.map(color =>
+    <div className="u-mb-1" key={color}>
+      <PointerAlert
+        variant="outlined"
+        severity={color}
+        action={<Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" />}
+      >
+        <AlertTitle>{color.toUpperCase()}</AlertTitle>
+        This is a {color} alert
+      </PointerAlert>
+    </div>
+  )}
+</>
+```

package/react/PointerAlert/index.jsx

@@ -0,0 +1,93 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+
+import { makeStyles } from '../styles'
+import { makeAlertBackgroundColor } from '../MuiCozyTheme/helpers'
+import { AlertPropTypes, AlertDefaultProps } from '../Alert'
+
+import Alert from '../Alert'
+
+const useStyles = makeStyles(theme => ({
+  top: {
+    // create the arrow
+    borderLeft: '0.75rem solid transparent',
+    borderRight: '0.75rem solid transparent',
+    borderBottom: ({ variant, severity }) =>
+      `0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
+    // position the arrow
+    position: 'absolute',
+    top: '-0.75rem',
+    left: '50%',
+    marginLeft: '-0.75rem'
+  },
+  bottom: {
+    // create the arrow
+    borderLeft: '0.75rem solid transparent',
+    borderRight: '0.75rem solid transparent',
+    borderTop: ({ variant, severity }) =>
+      `0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
+    // position the arrow
+    position: 'absolute',
+    bottom: '-0.75rem',
+    left: '50%',
+    marginLeft: '-0.75rem'
+  },
+  left: {
+    // create the arrow
+    borderTop: '0.75rem solid transparent',
+    borderBottom: '0.75rem solid transparent',
+    borderRight: ({ variant, severity }) =>
+      `0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
+    // position the arrow
+    position: 'absolute',
+    left: '-0.75rem',
+    top: '50%',
+    marginTop: '-0.75rem'
+  },
+  right: {
+    // create the arrow
+    borderTop: '0.75rem solid transparent',
+    borderBottom: '0.75rem solid transparent',
+    borderLeft: ({ variant, severity }) =>
+      `0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
+    // position the arrow
+    position: 'absolute',
+    right: '-0.75rem',
+    top: '50%',
+    marginTop: '-0.75rem'
+  }
+}))
+
+const PointerAlert = forwardRef(
+  ({ className, severity, children, variant, direction, ...props }, ref) => {
+    const styles = useStyles({ variant, severity })
+
+    return (
+      <Alert
+        ref={ref}
+        className={cx(className, 'u-pos-relative')}
+        variant={variant}
+        severity={severity}
+        {...props}
+      >
+        {children}
+        <span className={styles[direction]}></span>
+      </Alert>
+    )
+  }
+)
+
+PointerAlert.displayName = 'PointerAlert'
+
+PointerAlert.propTypes = {
+  ...AlertPropTypes,
+  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+}
+
+PointerAlert.defaultProps = {
+  ...AlertDefaultProps,
+  direction: 'bottom'
+}
+
+export default PointerAlert

package/react/__snapshots__/examples.spec.jsx.snap

@@ -3,9 +3,9 @@
 exports[`Alert should render examples: Alert 1`] = `
 "<div data-testid=\\"mountNode\\">
   <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-label=\\"LONGTEXT\\" 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-label=\\"TITLE\\" 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-label=\\"BLOCK\\" 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-label=\\"COLOR\\" 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-label=\\"LARGEICON\\" 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\\">LARGEICON</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-label=\\"NOICON\\" 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\\">NOICON</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-label=\\"SQUARE\\" 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-label=\\"ACTIONONE\\" 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-label=\\"ACTIONTWO\\" 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-label=\\"CLOSE\\" 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>
+    <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-label=\\"LONGTEXT\\" 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-label=\\"TITLE\\" 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-label=\\"BLOCK\\" 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-label=\\"COLOR\\" 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-label=\\"LARGEICON\\" 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\\">LARGEICON</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-label=\\"NOICON\\" 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\\">NOICON</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-label=\\"SQUARE\\" 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-label=\\"ACTIONONE\\" 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-label=\\"ACTIONTWO\\" 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-label=\\"FILLED\\" 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\\">FILLED</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-label=\\"CLOSE\\" 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-standard MuiPaper-elevation0\\" role=\\"alert\\">
+  <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyStyles-primary-standard 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>
@@ -23,7 +23,7 @@ exports[`Alert should render examples: Alert 2`] = `
     <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-label=\\"TITLE\\" 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-label=\\"BLOCK\\" 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-label=\\"CLOSE\\" 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=\\"u-mb-1\\">
-    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyAlert-primary-standard action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyStyles-primary-standard 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>
@@ -31,13 +31,13 @@ exports[`Alert should render examples: Alert 2`] = `
           <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 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-standard action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyStyles-secondary-standard 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>
@@ -45,46 +45,46 @@ exports[`Alert should render examples: Alert 2`] = `
           <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 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-standard action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyStyles-success-standard 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 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-standard action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardError cozyStyles-error-standard 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 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-standard action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardWarning cozyStyles-warning-standard 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 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-standard action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardInfo cozyStyles-info-standard 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>
@@ -92,7 +92,7 @@ exports[`Alert should render examples: Alert 2`] = `
           <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 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>
@@ -100,7 +100,7 @@ exports[`Alert should render examples: Alert 2`] = `
   <hr>
   <p class=\\"MuiTypography-root MuiTypography-h4 MuiTypography-colorTextPrimary MuiTypography-paragraph\\">Filled variant</p>
   <div class=\\"u-mb-1\\">
-    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-filledSuccess cozyAlert-primary-filled action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-filledSuccess cozyStyles-primary-filled 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>
@@ -108,13 +108,13 @@ exports[`Alert should render examples: Alert 2`] = `
           <use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
         </svg></div>
       <div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-13\\">
-        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">PRIMARY</div>This is a primary alert
+        <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-contained customColor-primary MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></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-filledSuccess cozyAlert-secondary-filled action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-filledSuccess cozyStyles-secondary-filled 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>
@@ -122,46 +122,46 @@ exports[`Alert should render examples: Alert 2`] = `
           <use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
         </svg></div>
       <div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-14\\">
-        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">SECONDARY</div>This is a secondary alert
+        <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-contained customColor-primary MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></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-filledSuccess cozyAlert-success-filled action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-filledSuccess cozyStyles-success-filled 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-15\\">
-        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">SUCCESS</div>This is a success alert
+        <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-contained customColor-success MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></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-filledError cozyAlert-error-filled action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-filledError cozyStyles-error-filled 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-16\\">
-        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">ERROR</div>This is a error alert
+        <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-contained customColor-error MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></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-filledWarning cozyAlert-warning-filled action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-filledWarning cozyStyles-warning-filled 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-17\\">
-        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">WARNING</div>This is a warning alert
+        <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-contained customColor-warning MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></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-filledInfo cozyAlert-info-filled action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-filledInfo cozyStyles-info-filled 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>
@@ -169,15 +169,15 @@ exports[`Alert should render examples: Alert 2`] = `
           <use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
         </svg></div>
       <div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-18\\">
-        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">INFO</div>This is a info alert
+        <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-contained customColor-info MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ACTION</span></button></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>
   <hr>
   <p class=\\"MuiTypography-root MuiTypography-h4 MuiTypography-colorTextPrimary MuiTypography-paragraph\\">Outlined variant</p>
   <div class=\\"u-mb-1\\">
-    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-outlinedSuccess cozyAlert-primary-outlined action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-outlinedSuccess cozyStyles-primary-outlined 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>
@@ -185,13 +185,13 @@ exports[`Alert should render examples: Alert 2`] = `
           <use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
         </svg></div>
       <div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-19\\">
-        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">PRIMARY</div>This is a primary alert
+        <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-outlinedSuccess cozyAlert-secondary-outlined action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-outlinedSuccess cozyStyles-secondary-outlined 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>
@@ -199,46 +199,46 @@ exports[`Alert should render examples: Alert 2`] = `
           <use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
         </svg></div>
       <div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-20\\">
-        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">SECONDARY</div>This is a secondary alert
+        <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-outlinedSuccess cozyAlert-success-outlined action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-outlinedSuccess cozyStyles-success-outlined 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-21\\">
-        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">SUCCESS</div>This is a success alert
+        <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-outlinedError cozyAlert-error-outlined action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-outlinedError cozyStyles-error-outlined 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-22\\">
-        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">ERROR</div>This is a error alert
+        <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-outlinedWarning cozyAlert-warning-outlined action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-outlinedWarning cozyStyles-warning-outlined 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-23\\">
-        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">WARNING</div>This is a warning alert
+        <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-outlinedInfo cozyAlert-info-outlined action MuiPaper-elevation0\\" role=\\"alert\\">
+    <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-outlinedInfo cozyStyles-info-outlined 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>
@@ -246,7 +246,7 @@ exports[`Alert should render examples: Alert 2`] = `
           <use fill-rule=\\"evenodd\\" xlink:href=\\"#info_svg__a\\"></use>
         </svg></div>
       <div class=\\"MuiAlert-message makeStyles-message-5 makeStyles-message-24\\">
-        <div class=\\"MuiTypography-root MuiAlertTitle-root MuiTypography-body1 MuiTypography-gutterBottom\\">INFO</div>This is a info alert
+        <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>

package/react/index.js

@@ -113,6 +113,7 @@ export { default as DropdownText } from './DropdownText'
 export { default as CircleButton } from './CircleButton'
 export { default as Alert } from './Alert'
 export { default as AlertTitle } from './AlertTitle'
+export { default as PointerAlert } from './PointerAlert'
 export { default as Tabs } from './Tabs'
 export { default as Tab } from './Tab'
 export { default as CircularChart } from './CircularChart'

package/transpiled/react/Alert/index.js

@@ -63,6 +63,7 @@ var Alert = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       children = _ref2.children,
       props = _objectWithoutProperties(_ref2, _excluded);
 
+  // as primary and secondary doesn't exist on Mui Alert, we force success severity for those
   var madeSeverity = ['primary', 'secondary'].includes(severity) ? 'success' : severity;
   var madeIcon = makeIcon(icon, severity);
   var iconSize = (icon === null || icon === void 0 ? void 0 : (_icon$props = icon.props) === null || _icon$props === void 0 ? void 0 : _icon$props.size) || DEFAULT_ICON_SIZE;
@@ -76,7 +77,7 @@ var Alert = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       backgroundColor: color,
       borderRadius: square && 0
     },
-    className: cx(className, "cozyAlert-".concat(severity, "-").concat(variant), {
+    className: cx(className, "cozyStyles-".concat(severity, "-").concat(variant), {
       block: block
     }, {
       action: Boolean(action)
@@ -90,7 +91,7 @@ var Alert = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }, props), children);
 });
 Alert.displayName = 'Alert';
-Alert.propTypes = {
+export var AlertPropTypes = {
   className: PropTypes.string,
   icon: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
   severity: PropTypes.oneOf(['primary', 'secondary', 'success', 'error', 'warning', 'info']),
@@ -99,10 +100,12 @@ Alert.propTypes = {
   square: PropTypes.bool,
   variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])
 };
-Alert.defaultProps = {
+export var AlertDefaultProps = {
   severity: 'primary',
   block: false,
   square: false,
   variant: 'standard'
 };
+Alert.propTypes = AlertPropTypes;
+Alert.defaultProps = AlertDefaultProps;
 export default Alert;

package/transpiled/react/MuiCozyTheme/helpers.js

@@ -1,16 +1,24 @@
-import { alpha, lighten, darken } from "cozy-ui/transpiled/react/styles";
-export var makeAlertColor = function makeAlertColor(theme, color) {
-  var 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
-
+import { alpha } from "cozy-ui/transpiled/react/styles";
+export var makeAlertBackgroundColor = function makeAlertBackgroundColor(_ref) {
+  var theme = _ref.theme,
+      severity = _ref.severity;
+  return {
+    standard: alpha(theme.palette[severity].main, theme.palette.background.contrastOpacity),
+    outlined: theme.palette[severity].main,
+    filled: theme.palette[severity].main
+  };
+};
+export var makeAlertColor = function makeAlertColor(theme, severity) {
+  // 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),
+      color: theme.palette.text.primary,
+      backgroundColor: makeAlertBackgroundColor({
+        theme: theme,
+        severity: severity
+      }).standard,
       '& $icon': {
-        color: themeColorByColor[color]
+        color: severity === 'secondary' ? theme.palette.text.primary : theme.palette[severity].main
       },
       '& $action': {
         '& button[title="Close"]': {
@@ -19,38 +27,25 @@ export var makeAlertColor = function makeAlertColor(theme, color) {
       }
     },
     '&-outlined': {
-      color: darken(themeColorByColor[color], 0.6),
-      border: "1px solid ".concat(themeColorByColor[color]),
+      color: theme.palette.text.primary,
+      border: "1px solid ".concat(makeAlertBackgroundColor({
+        theme: theme,
+        severity: severity
+      }).outlined),
       '& $icon': {
-        color: themeColorByColor[color]
+        color: severity === 'secondary' ? theme.palette.text.primary : theme.palette[severity].main
       }
     },
     '&-filled': {
-      backgroundColor: color === 'secondary' ? theme.palette.grey[600] : themeColorByColor[color]
-    }
-  };
-};
-export var makeAlertInvertedColor = function 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 ".concat(theme.palette.primary.main),
-      '& $icon': {
-        color: theme.palette[color].main
-      }
-    },
-    '&-filled': {
-      color: theme.palette[color].contrastText,
-      backgroundColor: color === 'secondary' ? theme.palette.grey[200] : theme.palette[color].main,
-      '& $icon': {
-        color: theme.palette[color].contrastText
+      color: theme.palette[severity].contrastText,
+      backgroundColor: makeAlertBackgroundColor({
+        theme: theme,
+        severity: severity
+      }).filled,
+      '& $action': {
+        '& button[title="Close"]': {
+          color: theme.palette[severity].contrastText
+        }
       }
     }
   };

package/transpiled/react/MuiCozyTheme/makeInvertedOverrides.js

@@ -1,5 +1,4 @@
 import merge from 'lodash/merge';
-import { makeAlertInvertedColor } from "cozy-ui/transpiled/react/MuiCozyTheme/helpers";
 import { makeOverrides } from "cozy-ui/transpiled/react/MuiCozyTheme/makeOverrides";
 export var makeInvertedOverrides = function makeInvertedOverrides(invertedTheme) {
   var makeOverridesForInvertedTheme = function makeOverridesForInvertedTheme(invertedTheme) {
@@ -27,18 +26,6 @@ export var makeInvertedOverrides = function makeInvertedOverrides(invertedTheme)
           backgroundColor: 'rgba(255,255,255,0.2)'
         }
       },
-      MuiAlert: {
-        root: {
-          '&.cozyAlert': {
-            '&-primary': makeAlertInvertedColor(invertedTheme, 'primary'),
-            '&-secondary': makeAlertInvertedColor(invertedTheme, 'secondary'),
-            '&-success': makeAlertInvertedColor(invertedTheme, 'success'),
-            '&-error': makeAlertInvertedColor(invertedTheme, 'error'),
-            '&-warning': makeAlertInvertedColor(invertedTheme, 'warning'),
-            '&-info': makeAlertInvertedColor(invertedTheme, 'info')
-          }
-        }
-      },
       MuiSnackbarContent: {
         root: {
           backgroundColor: invertedTheme.palette.grey[200]

package/transpiled/react/MuiCozyTheme/makeOverrides.js

@@ -710,9 +710,13 @@ export var makeOverrides = function makeOverrides(theme) {
     MuiAlert: {
       root: {
         padding: '8px 16px',
-        '&.cozyAlert': {
+        '&.cozyStyles': {
           '&-primary': makeAlertColor(theme, 'primary'),
-          '&-secondary': makeAlertColor(theme, 'secondary')
+          '&-secondary': makeAlertColor(theme, 'secondary'),
+          '&-success': makeAlertColor(theme, 'success'),
+          '&-error': makeAlertColor(theme, 'error'),
+          '&-warning': makeAlertColor(theme, 'warning'),
+          '&-info': makeAlertColor(theme, 'info')
         },
         '& $icon': {
           paddingTop: '9px'

package/transpiled/react/MuiCozyTheme/makePalette.js

@@ -116,6 +116,7 @@ export var makePalette = function makePalette(type) {
       default: getCssValue('defaultBackgroundColor'),
       paper: getCssValue('paperBackgroundColor'),
       contrast: getCssValue('contrastBackgroundColor'),
+      contrastOpacity: type === 'dark' ? 0.24 : 0.12,
       selected: '#F5FAFF' // deprecated, should be removed. Use action.selected instead
 
     }

package/transpiled/react/PointerAlert/index.js

@@ -0,0 +1,121 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "severity", "children", "variant", "direction"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { makeStyles } from "cozy-ui/transpiled/react/styles";
+import { makeAlertBackgroundColor } from "cozy-ui/transpiled/react/MuiCozyTheme/helpers";
+import { AlertPropTypes, AlertDefaultProps } from "cozy-ui/transpiled/react/Alert";
+import Alert from "cozy-ui/transpiled/react/Alert";
+var useStyles = makeStyles(function (theme) {
+  return {
+    top: {
+      // create the arrow
+      borderLeft: '0.75rem solid transparent',
+      borderRight: '0.75rem solid transparent',
+      borderBottom: function borderBottom(_ref) {
+        var variant = _ref.variant,
+            severity = _ref.severity;
+        return "0.75rem solid ".concat(makeAlertBackgroundColor({
+          theme: theme,
+          severity: severity
+        })[variant]);
+      },
+      // position the arrow
+      position: 'absolute',
+      top: '-0.75rem',
+      left: '50%',
+      marginLeft: '-0.75rem'
+    },
+    bottom: {
+      // create the arrow
+      borderLeft: '0.75rem solid transparent',
+      borderRight: '0.75rem solid transparent',
+      borderTop: function borderTop(_ref2) {
+        var variant = _ref2.variant,
+            severity = _ref2.severity;
+        return "0.75rem solid ".concat(makeAlertBackgroundColor({
+          theme: theme,
+          severity: severity
+        })[variant]);
+      },
+      // position the arrow
+      position: 'absolute',
+      bottom: '-0.75rem',
+      left: '50%',
+      marginLeft: '-0.75rem'
+    },
+    left: {
+      // create the arrow
+      borderTop: '0.75rem solid transparent',
+      borderBottom: '0.75rem solid transparent',
+      borderRight: function borderRight(_ref3) {
+        var variant = _ref3.variant,
+            severity = _ref3.severity;
+        return "0.75rem solid ".concat(makeAlertBackgroundColor({
+          theme: theme,
+          severity: severity
+        })[variant]);
+      },
+      // position the arrow
+      position: 'absolute',
+      left: '-0.75rem',
+      top: '50%',
+      marginTop: '-0.75rem'
+    },
+    right: {
+      // create the arrow
+      borderTop: '0.75rem solid transparent',
+      borderBottom: '0.75rem solid transparent',
+      borderLeft: function borderLeft(_ref4) {
+        var variant = _ref4.variant,
+            severity = _ref4.severity;
+        return "0.75rem solid ".concat(makeAlertBackgroundColor({
+          theme: theme,
+          severity: severity
+        })[variant]);
+      },
+      // position the arrow
+      position: 'absolute',
+      right: '-0.75rem',
+      top: '50%',
+      marginTop: '-0.75rem'
+    }
+  };
+});
+var PointerAlert = /*#__PURE__*/forwardRef(function (_ref5, ref) {
+  var className = _ref5.className,
+      severity = _ref5.severity,
+      children = _ref5.children,
+      variant = _ref5.variant,
+      direction = _ref5.direction,
+      props = _objectWithoutProperties(_ref5, _excluded);
+
+  var styles = useStyles({
+    variant: variant,
+    severity: severity
+  });
+  return /*#__PURE__*/React.createElement(Alert, _extends({
+    ref: ref,
+    className: cx(className, 'u-pos-relative'),
+    variant: variant,
+    severity: severity
+  }, props), children, /*#__PURE__*/React.createElement("span", {
+    className: styles[direction]
+  }));
+});
+PointerAlert.displayName = 'PointerAlert';
+PointerAlert.propTypes = _objectSpread(_objectSpread({}, AlertPropTypes), {}, {
+  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+});
+PointerAlert.defaultProps = _objectSpread(_objectSpread({}, AlertDefaultProps), {}, {
+  direction: 'bottom'
+});
+export default PointerAlert;

package/transpiled/react/index.js

@@ -87,6 +87,7 @@ export { default as DropdownText } from './DropdownText';
 export { default as CircleButton } from './CircleButton';
 export { default as Alert } from './Alert';
 export { default as AlertTitle } from './AlertTitle';
+export { default as PointerAlert } from './PointerAlert';
 export { default as Tabs } from './Tabs';
 export { default as Tab } from './Tab';
 export { default as CircularChart } from './CircularChart';