cozy-ui 111.8.0 → 111.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/package.json +1 -1
  3. package/react/Alert/Readme.md +12 -1
  4. package/react/Markdown/Readme.md +71 -0
  5. package/react/Markdown/index.jsx +32 -0
  6. package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js +2 -3
  7. package/react/Paywall/Paywall.jsx +3 -6
  8. package/react/Paywall/Readme.md +3 -3
  9. package/react/__snapshots__/examples.spec.jsx.snap +1 -1
  10. package/react/index.js +1 -0
  11. package/transpiled/react/Markdown/index.js +39 -0
  12. package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts +1 -2
  13. package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts +1 -2
  14. package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts +1 -2
  15. package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts +1 -2
  16. package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js +2 -3
  17. package/transpiled/react/Paywall/Paywall.js +3 -11
  18. package/transpiled/react/index.js +2 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [111.9.0](https://github.com/cozy/cozy-ui/compare/v111.8.1...v111.9.0) (2024-09-05)
2
+
3
+
4
+ ### Features
5
+
6
+ * Add markdwon component ([366def6](https://github.com/cozy/cozy-ui/commit/366def6))
7
+
8
+ ## [111.8.1](https://github.com/cozy/cozy-ui/compare/v111.8.0...v111.8.1) (2024-08-28)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * **Alert:** Right action margin wasn't correct ([2e462b3](https://github.com/cozy/cozy-ui/commit/2e462b3))
14
+
1
15
  # [111.8.0](https://github.com/cozy/cozy-ui/compare/v111.7.0...v111.8.0) (2024-08-19)
2
16
 
3
17
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cozy-ui",
3
- "version": "111.8.0",
3
+ "version": "111.9.0",
4
4
  "description": "Cozy apps UI SDK",
5
5
  "main": "./index.js",
6
6
  "bin": {
package/react/Alert/Readme.md CHANGED
@@ -2,7 +2,10 @@
2
2
  import Alert from 'cozy-ui/transpiled/react/Alert'
3
3
  import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle'
4
4
  import Button from 'cozy-ui/transpiled/react/Buttons'
5
+ import IconButton from 'cozy-ui/transpiled/react/IconButton'
5
6
  import Icon from 'cozy-ui/transpiled/react/Icon'
7
+ import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
8
+ import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
6
9
  import Variants from 'cozy-ui/docs/components/Variants'
7
10
  import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
8
11
  import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
@@ -17,6 +20,7 @@ const initialVariants = [{
17
20
  square: false,
18
21
  actionOne: false,
19
22
  actionTwo: false,
23
+ actionThree: false,
20
24
  filled: false,
21
25
  close: false
22
26
  }]
@@ -31,7 +35,7 @@ const initialVariants = [{
31
35
  block={variant.block}
32
36
  square={variant.square}
33
37
  icon={variant.noIcon ? false : variant.largeIcon ? <Icon icon={DeviceLaptopIcon} color="var(--errorColor)" size={32} /> : undefined}
34
- action={(variant.actionOne || variant.actionTwo) ?
38
+ action={(variant.actionOne || variant.actionTwo || variant.actionThree) ?
35
39
  <>
36
40
  {variant.actionOne &&
37
41
  <Button variant="text" size="small" label="Download" startIcon={<Icon icon={DownloadIcon} />} />
@@ -39,6 +43,13 @@ const initialVariants = [{
39
43
  {variant.actionTwo &&
40
44
  <Button variant="text" size="small" label="No, thanks!" />
41
45
  }
46
+ {variant.actionThree &&
47
+ <ListItemIcon>
48
+ <IconButton>
49
+ <Icon icon={DotsIcon} />
50
+ </IconButton>
51
+ </ListItemIcon>
52
+ }
42
53
  </>
43
54
  : undefined
44
55
  }
package/react/Markdown/Readme.md ADDED
@@ -0,0 +1,71 @@
1
+ This component is used to render markdown content. To see more about the Markdown, you can check the [Markdown Guide](https://www.markdownguide.org/).
2
+
3
+ ```jsx
4
+
5
+ import Markdown from 'cozy-ui/transpiled/react/Markdown'
6
+
7
+ const textInMarkdown = `
8
+ # Demo
9
+
10
+ This is a text to test all possibilities of markdown.
11
+
12
+ ## Headers
13
+
14
+ # H1 Header
15
+ ## H2 Header
16
+ ### H3 Header
17
+ #### H4 Header
18
+ ##### H5 Header
19
+ ###### H6 Header
20
+
21
+ ## Paragraphs
22
+
23
+ I really like using Markdown.
24
+
25
+ I think I'll use it to format all of my documents from now on.
26
+
27
+ ## Emphasis
28
+
29
+ _Italic Text_
30
+
31
+ ***Bold Text***
32
+
33
+ __Bold and Italic Text__
34
+
35
+ ~~Strikethrough~~
36
+
37
+ <u>Underline</u>
38
+
39
+ ## Lists
40
+
41
+ 1. Ordered List Item 1
42
+ 2. Ordered List Item 2
43
+ 3. Ordered List Item 3
44
+
45
+ - Unordered List Item 1
46
+ - Unordered List Item 2
47
+ - Unordered List Item 3
48
+
49
+ ## Links
50
+
51
+ [Link to GitHub](https://github.com/cozy/cozy-ui)
52
+
53
+ ## Images
54
+
55
+ ![The San Juan Mountains are beautiful!](/assets/images/san-juan-mountains.jpg "San Juan Mountains")
56
+
57
+ ## Code
58
+
59
+ Inline code: \`const variable = 'value';\`
60
+
61
+ Block code:
62
+ \`\`\`javascript function add(a, b) { return a + b; }\`\`\`
63
+
64
+ ## Blockquotes
65
+
66
+ > This is a blockquote.
67
+ `;
68
+
69
+ <Markdown content={textInMarkdown} />
70
+
71
+ ```
package/react/Markdown/index.jsx ADDED
@@ -0,0 +1,32 @@
1
+ import React from 'react'
2
+ import ReactMarkdown from 'react-markdown'
3
+
4
+ import Link from '../Link'
5
+ import Typography from '../Typography'
6
+
7
+ const Markdown = ({ content }) => {
8
+ return (
9
+ <ReactMarkdown
10
+ source={content}
11
+ renderers={{
12
+ link: ({ children, href }) => (
13
+ <Link href={href} rel="noreferrer" target="_blank">
14
+ {children}
15
+ </Link>
16
+ ),
17
+ heading: ({ children, level }) => (
18
+ <Typography variant={`h${level}`} className="u-mb-1">
19
+ {children}
20
+ </Typography>
21
+ ),
22
+ paragraph: ({ children }) => (
23
+ <Typography variant="body1" className="u-mb-1">
24
+ {children}
25
+ </Typography>
26
+ )
27
+ }}
28
+ />
29
+ )
30
+ }
31
+
32
+ export default Markdown
package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js CHANGED
@@ -818,10 +818,9 @@ export const makeLightNormalOverrides = theme => ({
818
818
  '&.block': {
819
819
  flexWrap: 'wrap',
820
820
  '& $action': {
821
- display: 'block',
822
821
  width: '100%',
823
822
  paddingLeft: 0,
824
- textAlign: 'right'
823
+ justifyContent: 'end'
825
824
  }
826
825
  }
827
826
  },
@@ -832,7 +831,7 @@ export const makeLightNormalOverrides = theme => ({
832
831
  flexWrap: 'wrap'
833
832
  },
834
833
  action: {
835
- marginRight: '-6px'
834
+ marginRight: '-8px'
836
835
  }
837
836
  },
838
837
  MuiAlertTitle: {
package/react/Paywall/Paywall.jsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import PropTypes from 'prop-types'
2
2
  import React, { useEffect, useState } from 'react'
3
- import ReactMarkdown from 'react-markdown'
4
3
 
5
4
  import { useInstanceInfo } from 'cozy-client'
6
5
  import { buildPremiumLink } from 'cozy-client/dist/models/instance'
@@ -14,6 +13,7 @@ import Button from '../Buttons'
14
13
  import { IllustrationDialog } from '../CozyDialogs'
15
14
  import Icon from '../Icon'
16
15
  import CozyUpgradeIcon from '../Icons/CozyUpgrade'
16
+ import Markdown from '../Markdown'
17
17
  import Spinner from '../Spinner'
18
18
  import Typography from '../Typography'
19
19
  import { useI18n } from '../providers/I18n'
@@ -94,13 +94,10 @@ const Paywall = ({ variant, onClose, isPublic, contentInterpolation }) => {
94
94
  />
95
95
  }
96
96
  content={
97
- <ReactMarkdown
98
- source={t(`${variant}Paywall.${type}.content`, {
97
+ <Markdown
98
+ content={t(`${variant}Paywall.${type}.content`, {
99
99
  ...contentInterpolation
100
100
  })}
101
- renderers={{
102
- paragraph: ({ children }) => <p className="u-mt-0">{children}</p>
103
- }}
104
101
  />
105
102
  }
106
103
  onClose={onClose}
package/react/Paywall/Readme.md CHANGED
@@ -94,15 +94,15 @@ const makeClient = premiumLink =>
94
94
  }
95
95
  ]
96
96
  },
97
- 'io.cozy.settings/context': {
97
+ 'io.cozy.settings/io.cozy.settings.context': {
98
98
  doctype: 'io.cozy.settings',
99
99
  definition: {
100
100
  doctype: 'io.cozy.settings',
101
- id: 'io.cozy.settings/context'
101
+ id: 'io.cozy.settings/io.cozy.settings.context'
102
102
  },
103
103
  data: [
104
104
  {
105
- id: 'io.cozy.settings/context',
105
+ id: 'io.cozy.settings/io.cozy.settings.context',
106
106
  attributes: {
107
107
  enable_premium_links: premiumLink,
108
108
  manager_url: 'http://mycozy.cloud',
package/react/__snapshots__/examples.spec.jsx.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`Alert should render examples: Alert 1`] = `
4
4
  "<div data-testid=\\"mountNode\\">
5
5
  <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
6
- <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>
6
+ <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=\\"ACTIONTHREE\\" 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\\">ACTIONTHREE</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>
7
7
  </div>
8
8
  <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyStyles-primary-standard MuiPaper-elevation0\\" role=\\"alert\\">
9
9
  <div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
package/react/index.js CHANGED
@@ -137,3 +137,4 @@ export { default as AlertProvider, useAlert } from './Alert'
137
137
  export { default as Modal } from './Modal'
138
138
  export { ListSkeleton, ListItemSkeleton } from './Skeletons'
139
139
  export { default as ActionsBar } from './ActionsBar'
140
+ export { default as Markdown } from './Markdown'
package/transpiled/react/Markdown/index.js ADDED
@@ -0,0 +1,39 @@
1
+ import React from 'react';
2
+ import ReactMarkdown from 'react-markdown';
3
+ import Link from "cozy-ui/transpiled/react/Link";
4
+ import Typography from "cozy-ui/transpiled/react/Typography";
5
+
6
+ var Markdown = function Markdown(_ref) {
7
+ var content = _ref.content;
8
+ return /*#__PURE__*/React.createElement(ReactMarkdown, {
9
+ source: content,
10
+ renderers: {
11
+ link: function link(_ref2) {
12
+ var children = _ref2.children,
13
+ href = _ref2.href;
14
+ return /*#__PURE__*/React.createElement(Link, {
15
+ href: href,
16
+ rel: "noreferrer",
17
+ target: "_blank"
18
+ }, children);
19
+ },
20
+ heading: function heading(_ref3) {
21
+ var children = _ref3.children,
22
+ level = _ref3.level;
23
+ return /*#__PURE__*/React.createElement(Typography, {
24
+ variant: "h".concat(level),
25
+ className: "u-mb-1"
26
+ }, children);
27
+ },
28
+ paragraph: function paragraph(_ref4) {
29
+ var children = _ref4.children;
30
+ return /*#__PURE__*/React.createElement(Typography, {
31
+ variant: "body1",
32
+ className: "u-mb-1"
33
+ }, children);
34
+ }
35
+ }
36
+ });
37
+ };
38
+
39
+ export default Markdown;
package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts CHANGED
@@ -1317,10 +1317,9 @@ export function makeDarkInvertedOverrides(theme: any): {
1317
1317
  '&.block': {
1318
1318
  flexWrap: string;
1319
1319
  '& $action': {
1320
- display: string;
1321
1320
  width: string;
1322
1321
  paddingLeft: number;
1323
- textAlign: string;
1322
+ justifyContent: string;
1324
1323
  };
1325
1324
  };
1326
1325
  };
package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts CHANGED
@@ -1317,10 +1317,9 @@ export function makeDarkNormalOverrides(theme: any): {
1317
1317
  '&.block': {
1318
1318
  flexWrap: string;
1319
1319
  '& $action': {
1320
- display: string;
1321
1320
  width: string;
1322
1321
  paddingLeft: number;
1323
- textAlign: string;
1322
+ justifyContent: string;
1324
1323
  };
1325
1324
  };
1326
1325
  };
package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts CHANGED
@@ -1317,10 +1317,9 @@ export function makeLightInvertedOverrides(theme: any): {
1317
1317
  '&.block': {
1318
1318
  flexWrap: string;
1319
1319
  '& $action': {
1320
- display: string;
1321
1320
  width: string;
1322
1321
  paddingLeft: number;
1323
- textAlign: string;
1322
+ justifyContent: string;
1324
1323
  };
1325
1324
  };
1326
1325
  };
package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts CHANGED
@@ -1317,10 +1317,9 @@ export function makeLightNormalOverrides(theme: any): {
1317
1317
  '&.block': {
1318
1318
  flexWrap: string;
1319
1319
  '& $action': {
1320
- display: string;
1321
1320
  width: string;
1322
1321
  paddingLeft: number;
1323
- textAlign: string;
1322
+ justifyContent: string;
1324
1323
  };
1325
1324
  };
1326
1325
  };
package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js CHANGED
@@ -762,10 +762,9 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
762
762
  '&.block': {
763
763
  flexWrap: 'wrap',
764
764
  '& $action': {
765
- display: 'block',
766
765
  width: '100%',
767
766
  paddingLeft: 0,
768
- textAlign: 'right'
767
+ justifyContent: 'end'
769
768
  }
770
769
  }
771
770
  },
@@ -776,7 +775,7 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
776
775
  flexWrap: 'wrap'
777
776
  },
778
777
  action: {
779
- marginRight: '-6px'
778
+ marginRight: '-8px'
780
779
  }
781
780
  },
782
781
  MuiAlertTitle: {
package/transpiled/react/Paywall/Paywall.js CHANGED
@@ -9,7 +9,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
9
9
  import _regeneratorRuntime from "@babel/runtime/regenerator";
10
10
  import PropTypes from 'prop-types';
11
11
  import React, { useEffect, useState } from 'react';
12
- import ReactMarkdown from 'react-markdown';
13
12
  import { useInstanceInfo } from 'cozy-client';
14
13
  import { buildPremiumLink } from 'cozy-client/dist/models/instance';
15
14
  import { isFlagshipApp } from 'cozy-device-helper';
@@ -21,6 +20,7 @@ import Button from "cozy-ui/transpiled/react/Buttons";
21
20
  import { IllustrationDialog } from "cozy-ui/transpiled/react/CozyDialogs";
22
21
  import Icon from "cozy-ui/transpiled/react/Icon";
23
22
  import CozyUpgradeIcon from "cozy-ui/transpiled/react/Icons/CozyUpgrade";
23
+ import Markdown from "cozy-ui/transpiled/react/Markdown";
24
24
  import Spinner from "cozy-ui/transpiled/react/Spinner";
25
25
  import Typography from "cozy-ui/transpiled/react/Typography";
26
26
  import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
@@ -140,16 +140,8 @@ var Paywall = function Paywall(_ref) {
140
140
  label: isFlagshipAppIapAvailable === null ? t("action.loading") : canOpenPremiumLink ? t("".concat(variant, "Paywall.").concat(type, ".action")) : t("action.withoutIAP"),
141
141
  busy: isFlagshipAppIapAvailable === null
142
142
  }),
143
- content: /*#__PURE__*/React.createElement(ReactMarkdown, {
144
- source: t("".concat(variant, "Paywall.").concat(type, ".content"), _objectSpread({}, contentInterpolation)),
145
- renderers: {
146
- paragraph: function paragraph(_ref3) {
147
- var children = _ref3.children;
148
- return /*#__PURE__*/React.createElement("p", {
149
- className: "u-mt-0"
150
- }, children);
151
- }
152
- }
143
+ content: /*#__PURE__*/React.createElement(Markdown, {
144
+ content: t("".concat(variant, "Paywall.").concat(type, ".content"), _objectSpread({}, contentInterpolation))
153
145
  }),
154
146
  onClose: onClose
155
147
  });
package/transpiled/react/index.js CHANGED
@@ -109,4 +109,5 @@ export { default as TimelineSeparator } from './TimelineSeparator';
109
109
  export { default as AlertProvider, useAlert } from './Alert';
110
110
  export { default as Modal } from './Modal';
111
111
  export { ListSkeleton, ListItemSkeleton } from './Skeletons';
112
- export { default as ActionsBar } from './ActionsBar';
112
+ export { default as ActionsBar } from './ActionsBar';
113
+ export { default as Markdown } from './Markdown';