cozy-ui 73.2.0 → 73.2.3

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 (13) hide show
  1. package/.nvmrc +1 -1
  2. package/CHANGELOG.md +21 -0
  3. package/package.json +3 -5
  4. package/react/ContactPicker/index.jsx +3 -2
  5. package/react/ContactsList/ContactRow.jsx +1 -2
  6. package/react/ContactsList/Contacts/ContactIdentity.jsx +2 -2
  7. package/react/ContactsListModal/ContactsListContent.jsx +3 -2
  8. package/react/Icon/Readme.md +1 -1
  9. package/react/__snapshots__/examples.spec.jsx.snap +76 -71
  10. package/transpiled/react/ContactPicker/index.js +3 -2
  11. package/transpiled/react/ContactsList/ContactRow.js +1 -2
  12. package/transpiled/react/ContactsList/Contacts/ContactIdentity.js +2 -2
  13. package/transpiled/react/ContactsListModal/ContactsListContent.js +3 -2
package/.nvmrc CHANGED
@@ -1 +1 @@
1
- 16.16
1
+ 16
package/CHANGELOG.md CHANGED
@@ -1,3 +1,24 @@
1
+ ## [73.2.3](https://github.com/cozy/cozy-ui/compare/v73.2.2...v73.2.3) (2022-08-31)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * Add openapp icon to Available UI Icons section ([4ee16ee](https://github.com/cozy/cozy-ui/commit/4ee16ee))
7
+
8
+ ## [73.2.2](https://github.com/cozy/cozy-ui/compare/v73.2.1...v73.2.2) (2022-08-30)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * bump semantic-release and @semantic-release/changelog ([00b75b8](https://github.com/cozy/cozy-ui/commit/00b75b8))
14
+
15
+ ## [73.2.1](https://github.com/cozy/cozy-ui/compare/v73.2.0...v73.2.1) (2022-08-29)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * Don't rely on cozy-doctypes ([784e9c7](https://github.com/cozy/cozy-ui/commit/784e9c7))
21
+
1
22
  # [73.2.0](https://github.com/cozy/cozy-ui/compare/v73.1.0...v73.2.0) (2022-08-26)
2
23
 
3
24
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cozy-ui",
3
- "version": "73.2.0",
3
+ "version": "73.2.3",
4
4
  "description": "Cozy apps UI SDK",
5
5
  "main": "./index.js",
6
6
  "bin": {
@@ -72,7 +72,7 @@
72
72
  "@babel/helper-regex": "7.10.5",
73
73
  "@cozy/codemods": "^1.9.0",
74
74
  "@cozy/minilog": "^1.0.0",
75
- "@semantic-release/changelog": "5.0.1",
75
+ "@semantic-release/changelog": "6.0.1",
76
76
  "@semantic-release/git": "7.0.18",
77
77
  "@semantic-release/npm": "9.0.1",
78
78
  "@svgr/cli": "^5.4.0",
@@ -90,7 +90,6 @@
90
90
  "copyfiles": "2.4.1",
91
91
  "cozy-client": "^33.0.0",
92
92
  "cozy-device-helper": "2.0.0",
93
- "cozy-doctypes": "^1.69.0",
94
93
  "cozy-flags": "^2.10.1",
95
94
  "cozy-harvest-lib": "^6.7.3",
96
95
  "cozy-intent": "1.16.1",
@@ -139,7 +138,7 @@
139
138
  "remark-jscodeshift": "^1.1.0",
140
139
  "remark-preset-lint-recommended": "^4.0.1",
141
140
  "replace-in-file": "^6.2.0",
142
- "semantic-release": "17.4.7",
141
+ "semantic-release": "19.0.5",
143
142
  "style-loader": "0.23.1",
144
143
  "stylint": "1.5.9",
145
144
  "stylus": "0.56.0",
@@ -180,7 +179,6 @@
180
179
  "peerDependencies": {
181
180
  "cozy-client": ">=33.0.0",
182
181
  "cozy-device-helper": "^2.0.0",
183
- "cozy-doctypes": "^1.69.0",
184
182
  "cozy-harvest-lib": "^6.7.3",
185
183
  "cozy-intent": ">=1.3.0",
186
184
  "cozy-sharing": "^3.10.0",
package/react/ContactPicker/index.jsx CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import cx from 'classnames'
4
- import { Contact } from 'cozy-doctypes'
4
+ import { models } from 'cozy-client'
5
+ const { getDisplayName } = models.contact
5
6
 
6
7
  import ContactsListModal from '../ContactsListModal'
7
8
  import styles from './styles.styl'
@@ -58,7 +59,7 @@ class ContactPicker extends React.Component {
58
59
  return (
59
60
  <>
60
61
  <SelectControl {...rest} onClick={this.open}>
61
- {value ? Contact.getDisplayName(value) : placeholder}
62
+ {value ? getDisplayName(value) : placeholder}
62
63
  </SelectControl>
63
64
  {opened && (
64
65
  <ContactsListModal
package/react/ContactsList/ContactRow.jsx CHANGED
@@ -2,7 +2,6 @@ import React from 'react'
2
2
  import cx from 'classnames'
3
3
  import PropTypes from 'prop-types'
4
4
 
5
- import { Contact } from 'cozy-doctypes'
6
5
  import { models } from 'cozy-client'
7
6
 
8
7
  import ListItem from '../MuiCozyTheme/ListItem'
@@ -37,7 +36,7 @@ const ContactRow = ({ className, contact, onClick, divider, ...rest }) => {
37
36
  }
38
37
 
39
38
  ContactRow.propTypes = {
40
- contact: Contact.propType.isRequired,
39
+ contact: PropTypes.object.isRequired,
41
40
  onClick: PropTypes.func,
42
41
  divider: PropTypes.bool
43
42
  }
package/react/ContactsList/Contacts/ContactIdentity.jsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react'
2
- import { Contact } from 'cozy-doctypes'
3
2
  import { models } from 'cozy-client'
3
+ import PropTypes from 'prop-types'
4
4
 
5
5
  import { Avatar } from '../../Avatar'
6
6
  import { TableCell } from '../../Table'
@@ -32,7 +32,7 @@ const ContactIdentity = ({ contact }) => {
32
32
  }
33
33
 
34
34
  ContactIdentity.propTypes = {
35
- contact: Contact.propType.isRequired
35
+ contact: PropTypes.object.isRequired
36
36
  }
37
37
 
38
38
  export default ContactIdentity
package/react/ContactsListModal/ContactsListContent.jsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react'
2
2
 
3
- import { Contact } from 'cozy-doctypes'
3
+ import { models } from 'cozy-client'
4
+ const { getDisplayName } = models.contact
4
5
 
5
6
  import ContactsList from '../ContactsList'
6
7
  import Spinner from '../Spinner'
@@ -15,7 +16,7 @@ const mkFilter = filterStr => contacts => {
15
16
 
16
17
  // TODO better filtering methods can be extracted from drive. See https://github.com/cozy/cozy-ui/pull/1273#discussion_r351845385
17
18
  return contacts.filter(contact => {
18
- const displayName = Contact.getDisplayName(contact)
19
+ const displayName = getDisplayName(contact)
19
20
 
20
21
  if (!displayName) {
21
22
  return false
package/react/Icon/Readme.md CHANGED
@@ -840,7 +840,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
840
840
 
841
841
  const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
842
842
  let i = 0
843
- const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock','logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online','openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
843
+ const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock','logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online','openapp','openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
844
844
  ;
845
845
  <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
846
846
  <Sprite />
package/react/__snapshots__/examples.spec.jsx.snap CHANGED
@@ -7790,361 +7790,366 @@ exports[`Icon should render examples: Icon 7`] = `
7790
7790
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">online</p>
7791
7791
  </div>
7792
7792
  <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7793
+ <use xlink:href=\\"#openapp\\"></use>
7794
+ </svg>
7795
+ <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">openapp</p>
7796
+ </div>
7797
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7793
7798
  <use xlink:href=\\"#openwith\\"></use>
7794
7799
  </svg>
7795
7800
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">openwith</p>
7796
7801
  </div>
7797
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7802
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7798
7803
  <use xlink:href=\\"#palette\\"></use>
7799
7804
  </svg>
7800
7805
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">palette</p>
7801
7806
  </div>
7802
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7807
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7803
7808
  <use xlink:href=\\"#paper\\"></use>
7804
7809
  </svg>
7805
7810
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">paper</p>
7806
7811
  </div>
7807
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7812
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7808
7813
  <use xlink:href=\\"#paperplane\\"></use>
7809
7814
  </svg>
7810
7815
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">paperplane</p>
7811
7816
  </div>
7812
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7817
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7813
7818
  <use xlink:href=\\"#password\\"></use>
7814
7819
  </svg>
7815
7820
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">password</p>
7816
7821
  </div>
7817
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7822
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7818
7823
  <use xlink:href=\\"#pen\\"></use>
7819
7824
  </svg>
7820
7825
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">pen</p>
7821
7826
  </div>
7822
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7827
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7823
7828
  <use xlink:href=\\"#people\\"></use>
7824
7829
  </svg>
7825
7830
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">people</p>
7826
7831
  </div>
7827
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7832
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7828
7833
  <use xlink:href=\\"#percent-circle\\"></use>
7829
7834
  </svg>
7830
7835
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">percent-circle</p>
7831
7836
  </div>
7832
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7837
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7833
7838
  <use xlink:href=\\"#percent\\"></use>
7834
7839
  </svg>
7835
7840
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">percent</p>
7836
7841
  </div>
7837
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7842
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7838
7843
  <use xlink:href=\\"#personal-data\\"></use>
7839
7844
  </svg>
7840
7845
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">personal-data</p>
7841
7846
  </div>
7842
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7847
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7843
7848
  <use xlink:href=\\"#phone-download\\"></use>
7844
7849
  </svg>
7845
7850
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">phone-download</p>
7846
7851
  </div>
7847
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7852
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7848
7853
  <use xlink:href=\\"#phone-upload\\"></use>
7849
7854
  </svg>
7850
7855
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">phone-upload</p>
7851
7856
  </div>
7852
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7857
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7853
7858
  <use xlink:href=\\"#phone\\"></use>
7854
7859
  </svg>
7855
7860
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">phone</p>
7856
7861
  </div>
7857
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7862
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7858
7863
  <use xlink:href=\\"#pie-chart\\"></use>
7859
7864
  </svg>
7860
7865
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">pie-chart</p>
7861
7866
  </div>
7862
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7867
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7863
7868
  <use xlink:href=\\"#pin\\"></use>
7864
7869
  </svg>
7865
7870
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">pin</p>
7866
7871
  </div>
7867
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7872
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7868
7873
  <use xlink:href=\\"#plane\\"></use>
7869
7874
  </svg>
7870
7875
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">plane</p>
7871
7876
  </div>
7872
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7877
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7873
7878
  <use xlink:href=\\"#plus-small\\"></use>
7874
7879
  </svg>
7875
7880
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">plus-small</p>
7876
7881
  </div>
7877
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7882
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7878
7883
  <use xlink:href=\\"#plus\\"></use>
7879
7884
  </svg>
7880
7885
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">plus</p>
7881
7886
  </div>
7882
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7887
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7883
7888
  <use xlink:href=\\"#previous\\"></use>
7884
7889
  </svg>
7885
7890
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">previous</p>
7886
7891
  </div>
7887
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7892
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7888
7893
  <use xlink:href=\\"#printer\\"></use>
7889
7894
  </svg>
7890
7895
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">printer</p>
7891
7896
  </div>
7892
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7897
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7893
7898
  <use xlink:href=\\"#qualify\\"></use>
7894
7899
  </svg>
7895
7900
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">qualify</p>
7896
7901
  </div>
7897
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7902
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7898
7903
  <use xlink:href=\\"#radio-checked\\"></use>
7899
7904
  </svg>
7900
7905
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">radio-checked</p>
7901
7906
  </div>
7902
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7907
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7903
7908
  <use xlink:href=\\"#radio-unchecked\\"></use>
7904
7909
  </svg>
7905
7910
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">radio-unchecked</p>
7906
7911
  </div>
7907
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7912
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7908
7913
  <use xlink:href=\\"#repare\\"></use>
7909
7914
  </svg>
7910
7915
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">repare</p>
7911
7916
  </div>
7912
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7917
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7913
7918
  <use xlink:href=\\"#reply\\"></use>
7914
7919
  </svg>
7915
7920
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">reply</p>
7916
7921
  </div>
7917
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7922
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7918
7923
  <use xlink:href=\\"#restaurant\\"></use>
7919
7924
  </svg>
7920
7925
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">restaurant</p>
7921
7926
  </div>
7922
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7927
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7923
7928
  <use xlink:href=\\"#restore-straight\\"></use>
7924
7929
  </svg>
7925
7930
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">restore-straight</p>
7926
7931
  </div>
7927
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7932
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7928
7933
  <use xlink:href=\\"#restore\\"></use>
7929
7934
  </svg>
7930
7935
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">restore</p>
7931
7936
  </div>
7932
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7937
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7933
7938
  <use xlink:href=\\"#right\\"></use>
7934
7939
  </svg>
7935
7940
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">right</p>
7936
7941
  </div>
7937
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7942
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7938
7943
  <use xlink:href=\\"#rise\\"></use>
7939
7944
  </svg>
7940
7945
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">rise</p>
7941
7946
  </div>
7942
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7947
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7943
7948
  <use xlink:href=\\"#rotate-left\\"></use>
7944
7949
  </svg>
7945
7950
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">rotate-left</p>
7946
7951
  </div>
7947
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7952
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7948
7953
  <use xlink:href=\\"#rotate-right\\"></use>
7949
7954
  </svg>
7950
7955
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">rotate-right</p>
7951
7956
  </div>
7952
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7957
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7953
7958
  <use xlink:href=\\"#sad-cozy\\"></use>
7954
7959
  </svg>
7955
7960
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">sad-cozy</p>
7956
7961
  </div>
7957
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7962
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7958
7963
  <use xlink:href=\\"#safe\\"></use>
7959
7964
  </svg>
7960
7965
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">safe</p>
7961
7966
  </div>
7962
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7967
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7963
7968
  <use xlink:href=\\"#school\\"></use>
7964
7969
  </svg>
7965
7970
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">school</p>
7966
7971
  </div>
7967
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7972
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7968
7973
  <use xlink:href=\\"#select-all\\"></use>
7969
7974
  </svg>
7970
7975
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">select-all</p>
7971
7976
  </div>
7972
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7977
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7973
7978
  <use xlink:href=\\"#setting\\"></use>
7974
7979
  </svg>
7975
7980
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">setting</p>
7976
7981
  </div>
7977
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7982
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7978
7983
  <use xlink:href=\\"#share-circle\\"></use>
7979
7984
  </svg>
7980
7985
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">share-circle</p>
7981
7986
  </div>
7982
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
7987
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7983
7988
  <use xlink:href=\\"#share\\"></use>
7984
7989
  </svg>
7985
7990
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">share</p>
7986
7991
  </div>
7987
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
7992
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7988
7993
  <use xlink:href=\\"#shield\\"></use>
7989
7994
  </svg>
7990
7995
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">shield</p>
7991
7996
  </div>
7992
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
7997
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
7993
7998
  <use xlink:href=\\"#shop\\"></use>
7994
7999
  </svg>
7995
8000
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">shop</p>
7996
8001
  </div>
7997
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
8002
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
7998
8003
  <use xlink:href=\\"#sound\\"></use>
7999
8004
  </svg>
8000
8005
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">sound</p>
8001
8006
  </div>
8002
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
8007
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
8003
8008
  <use xlink:href=\\"#spinner\\"></use>
8004
8009
  </svg>
8005
8010
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">spinner</p>
8006
8011
  </div>
8007
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
8012
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
8008
8013
  <use xlink:href=\\"#stack\\"></use>
8009
8014
  </svg>
8010
8015
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">stack</p>
8011
8016
  </div>
8012
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
8017
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
8013
8018
  <use xlink:href=\\"#star\\"></use>
8014
8019
  </svg>
8015
8020
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">star</p>
8016
8021
  </div>
8017
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
8022
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
8018
8023
  <use xlink:href=\\"#stats\\"></use>
8019
8024
  </svg>
8020
8025
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">stats</p>
8021
8026
  </div>
8022
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
8027
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
8023
8028
  <use xlink:href=\\"#subway\\"></use>
8024
8029
  </svg>
8025
8030
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">subway</p>
8026
8031
  </div>
8027
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
8032
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
8028
8033
  <use xlink:href=\\"#sync-cozy\\"></use>
8029
8034
  </svg>
8030
8035
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">sync-cozy</p>
8031
8036
  </div>
8032
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
8037
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
8033
8038
  <use xlink:href=\\"#sync\\"></use>
8034
8039
  </svg>
8035
8040
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">sync</p>
8036
8041
  </div>
8037
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
8042
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
8038
8043
  <use xlink:href=\\"#tag\\"></use>
8039
8044
  </svg>
8040
8045
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">tag</p>
8041
8046
  </div>
8042
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
8047
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
8043
8048
  <use xlink:href=\\"#target\\"></use>
8044
8049
  </svg>
8045
8050
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">target</p>
8046
8051
  </div>
8047
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
8052
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
8048
8053
  <use xlink:href=\\"#team\\"></use>
8049
8054
  </svg>
8050
8055
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">team</p>
8051
8056
  </div>
8052
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
8057
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
8053
8058
  <use xlink:href=\\"#telephone\\"></use>
8054
8059
  </svg>
8055
8060
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">telephone</p>
8056
8061
  </div>
8057
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
8062
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
8058
8063
  <use xlink:href=\\"#to-the-cloud\\"></use>
8059
8064
  </svg>
8060
8065
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">to-the-cloud</p>
8061
8066
  </div>
8062
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
8067
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
8063
8068
  <use xlink:href=\\"#top\\"></use>
8064
8069
  </svg>
8065
8070
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">top</p>
8066
8071
  </div>
8067
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
8072
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
8068
8073
  <use xlink:href=\\"#train\\"></use>
8069
8074
  </svg>
8070
8075
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">train</p>
8071
8076
  </div>
8072
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
8077
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
8073
8078
  <use xlink:href=\\"#trash\\"></use>
8074
8079
  </svg>
8075
8080
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">trash</p>
8076
8081
  </div>
8077
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
8082
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
8078
8083
  <use xlink:href=\\"#trophy\\"></use>
8079
8084
  </svg>
8080
8085
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">trophy</p>
8081
8086
  </div>
8082
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
8087
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
8083
8088
  <use xlink:href=\\"#unknow\\"></use>
8084
8089
  </svg>
8085
8090
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">unknow</p>
8086
8091
  </div>
8087
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
8092
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
8088
8093
  <use xlink:href=\\"#unlink\\"></use>
8089
8094
  </svg>
8090
8095
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">unlink</p>
8091
8096
  </div>
8092
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
8097
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
8093
8098
  <use xlink:href=\\"#unlock\\"></use>
8094
8099
  </svg>
8095
8100
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">unlock</p>
8096
8101
  </div>
8097
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
8102
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
8098
8103
  <use xlink:href=\\"#up\\"></use>
8099
8104
  </svg>
8100
8105
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">up</p>
8101
8106
  </div>
8102
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
8107
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
8103
8108
  <use xlink:href=\\"#upload\\"></use>
8104
8109
  </svg>
8105
8110
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">upload</p>
8106
8111
  </div>
8107
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
8112
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
8108
8113
  <use xlink:href=\\"#videos\\"></use>
8109
8114
  </svg>
8110
8115
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">videos</p>
8111
8116
  </div>
8112
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
8117
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
8113
8118
  <use xlink:href=\\"#walk\\"></use>
8114
8119
  </svg>
8115
8120
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">walk</p>
8116
8121
  </div>
8117
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
8122
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
8118
8123
  <use xlink:href=\\"#wallet-add\\"></use>
8119
8124
  </svg>
8120
8125
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">wallet-add</p>
8121
8126
  </div>
8122
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
8127
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
8123
8128
  <use xlink:href=\\"#wallet-new\\"></use>
8124
8129
  </svg>
8125
8130
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">wallet-new</p>
8126
8131
  </div>
8127
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
8132
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
8128
8133
  <use xlink:href=\\"#wallet\\"></use>
8129
8134
  </svg>
8130
8135
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">wallet</p>
8131
8136
  </div>
8132
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #B449E7;\\" width=\\"16\\" height=\\"16\\">
8137
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
8133
8138
  <use xlink:href=\\"#warn\\"></use>
8134
8139
  </svg>
8135
8140
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">warn</p>
8136
8141
  </div>
8137
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #F52D2D;\\" width=\\"16\\" height=\\"16\\">
8142
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
8138
8143
  <use xlink:href=\\"#warning-circle\\"></use>
8139
8144
  </svg>
8140
8145
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">warning-circle</p>
8141
8146
  </div>
8142
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #FF962F;\\" width=\\"16\\" height=\\"16\\">
8147
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
8143
8148
  <use xlink:href=\\"#warning\\"></use>
8144
8149
  </svg>
8145
8150
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">warning</p>
8146
8151
  </div>
8147
- <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #297EF2;\\" width=\\"16\\" height=\\"16\\">
8152
+ <div style=\\"text-align: center;\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: #08b442;\\" width=\\"16\\" height=\\"16\\">
8148
8153
  <use xlink:href=\\"#wrench-circle\\"></use>
8149
8154
  </svg>
8150
8155
  <p class=\\"MuiTypography-root u-mt-half u-mb-1 MuiTypography-body1 MuiTypography-colorTextPrimary\\">wrench-circle</p>
package/transpiled/react/ContactPicker/index.js CHANGED
@@ -16,7 +16,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
16
16
  import React from 'react';
17
17
  import PropTypes from 'prop-types';
18
18
  import cx from 'classnames';
19
- import { Contact } from 'cozy-doctypes';
19
+ import { models } from 'cozy-client';
20
+ var getDisplayName = models.contact.getDisplayName;
20
21
  import ContactsListModal from "cozy-ui/transpiled/react/ContactsListModal";
21
22
  var styles = {
22
23
  "SelectControl": "styles__SelectControl___2OxoO",
@@ -90,7 +91,7 @@ var ContactPicker = /*#__PURE__*/function (_React$Component) {
90
91
 
91
92
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectControl, _extends({}, rest, {
92
93
  onClick: this.open
93
- }), value ? Contact.getDisplayName(value) : placeholder), opened && /*#__PURE__*/React.createElement(ContactsListModal, {
94
+ }), value ? getDisplayName(value) : placeholder), opened && /*#__PURE__*/React.createElement(ContactsListModal, {
94
95
  dismissAction: this.close,
95
96
  onItemClick: handleChange,
96
97
  placeholder: listPlaceholder,
package/transpiled/react/ContactsList/ContactRow.js CHANGED
@@ -4,7 +4,6 @@ var _excluded = ["className", "contact", "onClick", "divider"];
4
4
  import React from 'react';
5
5
  import cx from 'classnames';
6
6
  import PropTypes from 'prop-types';
7
- import { Contact } from 'cozy-doctypes';
8
7
  import { models } from 'cozy-client';
9
8
  import ListItem from "cozy-ui/transpiled/react/MuiCozyTheme/ListItem";
10
9
  import ContactPhone from "cozy-ui/transpiled/react/ContactsList/Contacts/ContactPhone";
@@ -51,7 +50,7 @@ var ContactRow = function ContactRow(_ref) {
51
50
  };
52
51
 
53
52
  ContactRow.propTypes = {
54
- contact: Contact.propType.isRequired,
53
+ contact: PropTypes.object.isRequired,
55
54
  onClick: PropTypes.func,
56
55
  divider: PropTypes.bool
57
56
  };
package/transpiled/react/ContactsList/Contacts/ContactIdentity.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import { Contact } from 'cozy-doctypes';
3
2
  import { models } from 'cozy-client';
3
+ import PropTypes from 'prop-types';
4
4
  import { Avatar } from "cozy-ui/transpiled/react/Avatar";
5
5
  import { TableCell } from "cozy-ui/transpiled/react/Table";
6
6
  import ContactName from "cozy-ui/transpiled/react/ContactsList/Contacts/ContactName";
@@ -43,6 +43,6 @@ var ContactIdentity = function ContactIdentity(_ref2) {
43
43
  };
44
44
 
45
45
  ContactIdentity.propTypes = {
46
- contact: Contact.propType.isRequired
46
+ contact: PropTypes.object.isRequired
47
47
  };
48
48
  export default ContactIdentity;
package/transpiled/react/ContactsListModal/ContactsListContent.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
- import { Contact } from 'cozy-doctypes';
2
+ import { models } from 'cozy-client';
3
+ var getDisplayName = models.contact.getDisplayName;
3
4
  import ContactsList from "cozy-ui/transpiled/react/ContactsList";
4
5
  import Spinner from "cozy-ui/transpiled/react/Spinner";
5
6
  import EmptyMessage from "cozy-ui/transpiled/react/ContactsListModal/EmptyMessage";
@@ -13,7 +14,7 @@ var mkFilter = function mkFilter(filterStr) {
13
14
  var f = filterStr.toLowerCase(); // TODO better filtering methods can be extracted from drive. See https://github.com/cozy/cozy-ui/pull/1273#discussion_r351845385
14
15
 
15
16
  return contacts.filter(function (contact) {
16
- var displayName = Contact.getDisplayName(contact);
17
+ var displayName = getDisplayName(contact);
17
18
 
18
19
  if (!displayName) {
19
20
  return false;