cozy-ui 57.5.2 → 57.6.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 (11) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/package.json +2 -2
  3. package/react/AppTile/Readme.md +7 -4
  4. package/react/AppTile/index.jsx +1 -1
  5. package/react/Field/Readme.md +40 -14
  6. package/react/Field/index.jsx +5 -0
  7. package/react/MuiCozyTheme/makeOverrides.js +2 -2
  8. package/react/__snapshots__/examples.spec.jsx.snap +39 -64
  9. package/transpiled/react/AppTile/index.js +1 -1
  10. package/transpiled/react/Field/index.js +6 -1
  11. package/transpiled/react/MuiCozyTheme/makeOverrides.js +2 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,32 @@
1
+ # [57.6.0](https://github.com/cozy/cozy-ui/compare/v57.5.5...v57.6.0) (2021-11-08)
2
+
3
+
4
+ ### Features
5
+
6
+ * Add `autoCapitalize` prop in Fields ([54efb34](https://github.com/cozy/cozy-ui/commit/54efb34))
7
+
8
+ ## [57.5.5](https://github.com/cozy/cozy-ui/compare/v57.5.4...v57.5.5) (2021-11-08)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * Do not stretch small screenshots ([4c7f48f](https://github.com/cozy/cozy-ui/commit/4c7f48f))
14
+ * Revert "Merge pull request [#1956](https://github.com/cozy/cozy-ui/issues/1956) from cozy/test/waitFor" ([#1962](https://github.com/cozy/cozy-ui/issues/1962)) ([374bda4](https://github.com/cozy/cozy-ui/commit/374bda4))
15
+
16
+ ## [57.5.4](https://github.com/cozy/cozy-ui/compare/v57.5.3...v57.5.4) (2021-11-04)
17
+
18
+
19
+ ### Bug Fixes
20
+
21
+ * AppTile doesn't require name prop ([3a74932](https://github.com/cozy/cozy-ui/commit/3a74932))
22
+
23
+ ## [57.5.3](https://github.com/cozy/cozy-ui/compare/v57.5.2...v57.5.3) (2021-11-04)
24
+
25
+
26
+ ### Bug Fixes
27
+
28
+ * Border color of Accordion ([4628488](https://github.com/cozy/cozy-ui/commit/4628488))
29
+
1
30
  ## [57.5.2](https://github.com/cozy/cozy-ui/compare/v57.5.1...v57.5.2) (2021-11-02)
2
31
 
3
32
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cozy-ui",
3
- "version": "57.5.2",
3
+ "version": "57.6.0",
4
4
  "description": "Cozy apps UI SDK",
5
5
  "main": "./index.js",
6
6
  "bin": {
@@ -94,7 +94,7 @@
94
94
  "cozy-sharing": "^3.10.0",
95
95
  "css-loader": "0.28.11",
96
96
  "cssnano": "4.1.11",
97
- "cssnano-preset-advanced": "4.0.7",
97
+ "cssnano-preset-advanced": "4.0.8",
98
98
  "enzyme": "3.11.0",
99
99
  "enzyme-adapter-react-16": "1.15.6",
100
100
  "enzyme-to-json": "3.6.2",
package/react/AppTile/Readme.md CHANGED
@@ -1,21 +1,24 @@
1
1
  Component used to show an app status, can be used in
2
2
  a list of apps for example in the Store.
3
3
 
4
- ```
4
+ ```jsx
5
5
  import AppTile from '.'
6
6
  import mockApps from '../AppSections/_mockApps'
7
7
  import { I18n } from '../I18n'
8
+ import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
8
9
 
9
10
  const locale = {}
11
+ const app = mockApps[0]
10
12
 
11
- const app = mockApps[0];
13
+ ;
12
14
 
13
15
  <I18n dictRequire={lang => locale} lang="en">
14
- <div className='u-flex'>
16
+ <Grid container>
15
17
  <AppTile app={app} />
16
18
  <AppTile app={{...app, maintenance: true}} />
19
+ <AppTile app={{...app, maintenance: true}} displaySpecificMaintenanceStyle={true} />
17
20
  <AppTile app={{...app, availableVersion: true}} />
18
21
  <AppTile app={{...app, availableVersion: true}} showStatus={['maintenance']} />
19
- </div>
22
+ </Grid>
20
23
  </I18n>
21
24
  ```
package/react/AppTile/index.jsx CHANGED
@@ -106,7 +106,7 @@ export const AppTile = ({
106
106
 
107
107
  AppTile.propTypes = {
108
108
  app: AppDoctype,
109
- name: PropTypes.string.isRequired,
109
+ name: PropTypes.string,
110
110
  namePrefix: PropTypes.string,
111
111
  onClick: PropTypes.func,
112
112
  IconComponent: PropTypes.element,
package/react/Field/Readme.md CHANGED
@@ -6,7 +6,7 @@ Like `Input` component, it can have the following properties:
6
6
 
7
7
  ##### Example
8
8
 
9
- ```
9
+ ```jsx
10
10
  import Field from 'cozy-ui/transpiled/react/Field';
11
11
  <form>
12
12
  <Field
@@ -21,7 +21,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
21
21
 
22
22
  ##### Inline variant
23
23
 
24
- ```
24
+ ```jsx
25
25
  import Field from 'cozy-ui/transpiled/react/Field';
26
26
  <form>
27
27
  <Field
@@ -39,7 +39,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
39
39
 
40
40
  An input is controlled if `props.value` is passed, even if it is empty.
41
41
 
42
- ```
42
+ ```jsx
43
43
  import Field from 'cozy-ui/transpiled/react/Field';
44
44
 
45
45
  initialState = { value: '' }
@@ -58,7 +58,7 @@ It gives access to the underlying `<input />` element, for example to give focus
58
58
 
59
59
  ##### Example
60
60
 
61
- ```
61
+ ```jsx
62
62
  import Field from 'cozy-ui/transpiled/react/Field';
63
63
  import Button from 'cozy-ui/transpiled/react/Button';
64
64
  class FieldWithFocus extends React.Component {
@@ -91,7 +91,7 @@ Name of the form field, injected into `Input`, `TextArea` or `SelectBox` compone
91
91
 
92
92
  ##### Exemple
93
93
 
94
- ```
94
+ ```jsx
95
95
  import Field from 'cozy-ui/transpiled/react/Field';
96
96
  <form>
97
97
  <Field
@@ -103,7 +103,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
103
103
 
104
104
  #### Field when there's an error
105
105
 
106
- ```
106
+ ```jsx
107
107
  import Field from 'cozy-ui/transpiled/react/Field';
108
108
  <form>
109
109
  <Field
@@ -118,7 +118,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
118
118
 
119
119
  #### Field with SelectBox
120
120
 
121
- ```
121
+ ```jsx
122
122
  import Field from 'cozy-ui/transpiled/react/Field';
123
123
  const options = [
124
124
  {
@@ -168,7 +168,7 @@ initialState = { selectedContact: null };
168
168
 
169
169
  #### Password field with show/hide button
170
170
 
171
- ```
171
+ ```jsx
172
172
  import Field from 'cozy-ui/transpiled/react/Field';
173
173
  <form>
174
174
  <Field
@@ -185,7 +185,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
185
185
 
186
186
  #### Password field without show/hide button
187
187
 
188
- ```
188
+ ```jsx
189
189
  import Field from 'cozy-ui/transpiled/react/Field';
190
190
  <form>
191
191
  <Field
@@ -198,7 +198,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
198
198
 
199
199
  #### Side element
200
200
 
201
- ```
201
+ ```jsx
202
202
  import Field from 'cozy-ui/transpiled/react/Field';
203
203
  <form>
204
204
  <Field
@@ -210,7 +210,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
210
210
 
211
211
  #### Side element with fullwidth element
212
212
 
213
- ```
213
+ ```jsx
214
214
  import Field from 'cozy-ui/transpiled/react/Field';
215
215
  <form>
216
216
  <Field
@@ -223,7 +223,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
223
223
 
224
224
  #### Customized label and input
225
225
 
226
- ```
226
+ ```jsx
227
227
  import Field from 'cozy-ui/transpiled/react/Field';
228
228
  <form>
229
229
  <Field
@@ -240,7 +240,7 @@ import Field from 'cozy-ui/transpiled/react/Field';
240
240
 
241
241
  #### Password with custom secondaryComponent
242
242
 
243
- ```
243
+ ```jsx
244
244
  import Field from 'cozy-ui/transpiled/react/Field';
245
245
  import MuiButton from 'cozy-ui/transpiled/react/MuiCozyTheme/Buttons';
246
246
 
@@ -271,7 +271,7 @@ import MuiButton from 'cozy-ui/transpiled/react/MuiCozyTheme/Buttons';
271
271
 
272
272
  #### Controlled Field
273
273
 
274
- ```
274
+ ```jsx
275
275
  import Field from 'cozy-ui/transpiled/react/Field';
276
276
  <form>
277
277
  <Field
@@ -282,3 +282,29 @@ import Field from 'cozy-ui/transpiled/react/Field';
282
282
  Value: { state.value }
283
283
  </form>
284
284
  ```
285
+
286
+ #### Mobile specific props
287
+
288
+ On mobile devices, following props may be useful to control on-screen keyboard's behavior
289
+
290
+ Note that `autoCapitalize` property is not handled by all mobile browsers and it also depends on the on-screen keyboard installed by the user and its configuration (i.e. [Android SwiftKey configuration](https://support.swiftkey.com/hc/en-us/articles/201468481-How-do-I-turn-off-Auto-Capitalize-))
291
+
292
+ ```jsx
293
+ import Field from 'cozy-ui/transpiled/react/Field';
294
+ import Variants from 'cozy-ui/docs/components/Variants';
295
+
296
+ const initialVariants = [
297
+ { autoCapitalize: false, autoComplete: false }
298
+ ];
299
+
300
+ <Variants initialVariants={initialVariants}>{
301
+ variant => (
302
+ <form>
303
+ <Field
304
+ autoCapitalize={variant.autoCapitalize ? 'on' : 'none'}
305
+ autoComplete={variant.autoComplete ? 'on' : 'off'}
306
+ />
307
+ </form>
308
+ )
309
+ }</Variants>
310
+ ```
package/react/Field/index.jsx CHANGED
@@ -16,6 +16,7 @@ import ContactPicker from '../ContactPicker'
16
16
  * for example
17
17
  */
18
18
  const inputSpecificPropTypes = {
19
+ autoCapitalize: PropTypes.string,
19
20
  autoComplete: PropTypes.string,
20
21
  onKeyUp: PropTypes.func
21
22
  }
@@ -102,6 +103,7 @@ const FieldContainer = props => {
102
103
 
103
104
  const Field = props => {
104
105
  const {
106
+ autoCapitalize,
105
107
  autoComplete,
106
108
  className,
107
109
  disabled,
@@ -146,6 +148,7 @@ const Field = props => {
146
148
  case 'textarea':
147
149
  return (
148
150
  <Textarea
151
+ autoCapitalize={autoCapitalize}
149
152
  disabled={disabled}
150
153
  id={id}
151
154
  name={name}
@@ -161,6 +164,7 @@ const Field = props => {
161
164
  case 'password':
162
165
  return (
163
166
  <InputPassword
167
+ autoCapitalize={autoCapitalize}
164
168
  autoComplete={autoComplete}
165
169
  disabled={disabled}
166
170
  fullwidth={fullwidth}
@@ -198,6 +202,7 @@ const Field = props => {
198
202
  case 'number':
199
203
  return (
200
204
  <Input
205
+ autoCapitalize={autoCapitalize}
201
206
  autoComplete={autoComplete}
202
207
  disabled={disabled}
203
208
  fullwidth={fullwidth}
package/react/MuiCozyTheme/makeOverrides.js CHANGED
@@ -73,7 +73,7 @@ const makeOverrides = theme => ({
73
73
  boxShadow: '0 4px 12px 0 rgba(0, 0, 0, 0.08)',
74
74
  borderWidth: '0.0625rem',
75
75
  borderStyle: 'solid',
76
- borderColor: theme.palette.grey[200],
76
+ borderColor: theme.palette.border.main,
77
77
  overflow: 'hidden',
78
78
  marginBottom: '1rem'
79
79
  }
@@ -119,7 +119,7 @@ const makeOverrides = theme => ({
119
119
  MuiAccordionDetails: {
120
120
  root: {
121
121
  padding: 0,
122
- borderTop: `0.0625rem solid ${theme.palette.grey[200]}`
122
+ borderTop: `0.0625rem solid ${theme.palette.border.main}`
123
123
  }
124
124
  },
125
125
  MuiStepConnector: {
package/react/__snapshots__/examples.spec.jsx.snap CHANGED
@@ -262,13 +262,8 @@ exports[`Badge should render examples: Badge 2`] = `
262
262
 
263
263
  exports[`Banner should render examples: Banner 1`] = `
264
264
  "<div>
265
- <div class=\\"u-m-1\\">
266
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">icon<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
267
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">longText<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
268
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">buttonOne<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
269
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">buttonTwo<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
270
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">inline<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
271
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">backgroundColor<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
265
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
266
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ICON</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LONGTEXT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BUTTONONE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BUTTONTWO</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">INLINE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BACKGROUNDCOLOR</span></label>
272
267
  </div>
273
268
  <div class=\\"MuiPaper-root MuiPaper-elevation0\\">
274
269
  <div class=\\"styles__c-banner-wrapper___3KlaG\\">
@@ -590,12 +585,8 @@ exports[`Checkbox should render examples: Checkbox 3`] = `
590
585
 
591
586
  exports[`CompositeRow should render examples: CompositeRow 1`] = `
592
587
  "<div>
593
- <div class=\\"u-m-1\\">
594
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">chips<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
595
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">secondaryText<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
596
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">dots<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
597
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">icon<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
598
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">extraInformation<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
588
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
589
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">CHIPS</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SECONDARYTEXT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DOTS</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ICON</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">EXTRAINFORMATION</span></label>
599
590
  </div>
600
591
  <div class=\\"styles__media___cSJMp styles__CompositeRow___3KCwt\\" style=\\"box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-sizing: border-box;\\">
601
592
  <div class=\\"u-media u-media-grow u-row-m\\">
@@ -624,11 +615,8 @@ exports[`CompositeRow should render examples: CompositeRow 1`] = `
624
615
  </div>
625
616
  </div>
626
617
  </div>
627
- <div class=\\"u-m-1\\">
628
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">chips<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
629
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">secondaryText<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
630
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">icon<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
631
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">dots<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
618
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
619
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">CHIPS</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SECONDARYTEXT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ICON</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DOTS</span></label>
632
620
  </div>
633
621
  <div class=\\"styles__media___cSJMp styles__CompositeRow___3KCwt\\" style=\\"box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-sizing: border-box;\\">
634
622
  <div class=\\"u-media u-media-grow u-row-m\\">
@@ -650,12 +638,8 @@ exports[`CompositeRow should render examples: CompositeRow 1`] = `
650
638
  </div>
651
639
  </div>
652
640
  </div>
653
- <div class=\\"u-m-1\\">
654
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">dense<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
655
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">chips<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
656
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">secondaryText<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
657
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">dots<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
658
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">icon<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
641
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
642
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DENSE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">CHIPS</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SECONDARYTEXT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DOTS</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ICON</span></label>
659
643
  </div>
660
644
  <div class=\\"styles__media___cSJMp styles__CompositeRow___3KCwt styles__CompositeRow__dense___3EPKf\\" style=\\"height: 48px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-sizing: border-box;\\">
661
645
  <div class=\\"u-media u-media-grow u-row-m\\">
@@ -674,11 +658,8 @@ exports[`CompositeRow should render examples: CompositeRow 1`] = `
674
658
  </div>
675
659
  </div>
676
660
  </div>
677
- <div class=\\"u-m-1\\">
678
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">chips<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
679
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">secondaryText<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
680
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">dots<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
681
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">icon<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
661
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
662
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">CHIPS</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SECONDARYTEXT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DOTS</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ICON</span></label>
682
663
  </div>
683
664
  <div class=\\"styles__media___cSJMp styles__CompositeRow___3KCwt\\" style=\\"box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-sizing: border-box;\\">
684
665
  <div class=\\"u-media u-media-grow u-row-m\\">
@@ -694,12 +675,8 @@ exports[`CompositeRow should render examples: CompositeRow 1`] = `
694
675
  </div>
695
676
  </div>
696
677
  </div>
697
- <div class=\\"u-m-1\\">
698
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">dense<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
699
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">chips<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
700
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">secondaryText<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
701
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">dots<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
702
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">icon<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
678
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
679
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DENSE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">CHIPS</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SECONDARYTEXT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DOTS</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ICON</span></label>
703
680
  </div>
704
681
  <div class=\\"styles__media___cSJMp styles__CompositeRow___3KCwt styles__CompositeRow__dense___3EPKf\\" style=\\"height: 48px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-sizing: border-box;\\">
705
682
  <div class=\\"u-media u-media-grow u-row-m\\">
@@ -2556,6 +2533,17 @@ exports[`Field should render examples: Field 15`] = `
2556
2533
  </div>"
2557
2534
  `;
2558
2535
 
2536
+ exports[`Field should render examples: Field 16`] = `
2537
+ "<div>
2538
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
2539
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">AUTOCAPITALIZE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">AUTOCOMPLETE</span></label>
2540
+ </div>
2541
+ <form>
2542
+ <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\"></label><input autocomplete=\\"off\\" type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" autocapitalize=\\"none\\" value=\\"\\"></div>
2543
+ </form>
2544
+ </div>"
2545
+ `;
2546
+
2559
2547
  exports[`Hero should render examples: Hero 1`] = `
2560
2548
  "<div>
2561
2549
  <div class=\\"styles__Hero___14z7_\\">
@@ -6936,10 +6924,8 @@ exports[`IconStack should render examples: IconStack 1`] = `
6936
6924
  exports[`Infos should render examples: Infos 1`] = `
6937
6925
  "<div>
6938
6926
  <div class=\\"u-stack-m\\">
6939
- <div class=\\"u-m-1\\">
6940
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">title<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
6941
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">action<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
6942
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">secondaryTheme<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
6927
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
6928
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">TITLE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTION</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SECONDARYTHEME</span></label>
6943
6929
  </div>
6944
6930
  <div class=\\"styles__Infos___2ZZVs styles__Infos--primary___3i4ll\\">
6945
6931
  <div class=\\"styles__Stack--m___1tSpV\\">
@@ -6951,10 +6937,8 @@ exports[`Infos should render examples: Infos 1`] = `
6951
6937
  </div>
6952
6938
  </div>
6953
6939
  </div>
6954
- <div class=\\"u-m-1\\">
6955
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">title<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
6956
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">action<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
6957
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">dangerTheme<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
6940
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
6941
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">TITLE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTION</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DANGERTHEME</span></label>
6958
6942
  </div>
6959
6943
  <div class=\\"styles__Infos___2ZZVs styles__Infos--danger___3wKYc\\">
6960
6944
  <div class=\\"styles__Stack--m___1tSpV\\">
@@ -6967,11 +6951,8 @@ exports[`Infos should render examples: Infos 1`] = `
6967
6951
  <div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--center___16_Xh\\"><span><span>ok</span></span></button></div>
6968
6952
  </div>
6969
6953
  </div>
6970
- <div class=\\"u-m-1\\">
6971
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">title<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
6972
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">multiActions<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
6973
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">dangerTheme<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
6974
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">dismissAction<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
6954
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
6955
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">TITLE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">MULTIACTIONS</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DANGERTHEME</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DISMISSACTION</span></label>
6975
6956
  </div>
6976
6957
  <div class=\\"styles__Infos___2ZZVs styles__Infos--primary___3i4ll\\">
6977
6958
  <div class=\\"styles__Stack--m___1tSpV\\">
@@ -7202,10 +7183,8 @@ exports[`Label should render examples: Label 3`] = `
7202
7183
 
7203
7184
  exports[`Labs/CollectionField should render examples: Labs/CollectionField 1`] = `
7204
7185
  "<div>
7205
- <div class=\\"u-m-1\\">
7206
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">inline<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
7207
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">emptyData<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
7208
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">nullData<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
7186
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
7187
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">INLINE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">EMPTYDATA</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">NULLDATA</span></label>
7209
7188
  </div>
7210
7189
  <div class=\\"styles__o-field___3n5HM\\"><label class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">Contacts</label>
7211
7190
  <div class=\\"styles__Stack--m___1tSpV\\">
@@ -7368,8 +7347,8 @@ exports[`OrderedList should render examples: OrderedList 1`] = `
7368
7347
 
7369
7348
  exports[`Paper should render examples: Paper 1`] = `
7370
7349
  "<div>
7371
- <div class=\\"u-m-1\\">
7372
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">square<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
7350
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
7351
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SQUARE</span></label>
7373
7352
  </div>
7374
7353
  <div class=\\"styles__Stack--m___1tSpV\\">
7375
7354
  <div class=\\"MuiPaper-root PaperExample-root-17 MuiPaper-elevation0\\">
@@ -7439,8 +7418,8 @@ exports[`PercentageLine should render examples: PercentageLine 1`] = `
7439
7418
 
7440
7419
  exports[`Progress should render examples: Progress 1`] = `
7441
7420
  "<div>
7442
- <div class=\\"u-m-1\\">
7443
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">withValue<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
7421
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
7422
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">WITHVALUE</span></label>
7444
7423
  </div>
7445
7424
  <div class=\\"MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-determinate\\" role=\\"progressbar\\" aria-valuenow=\\"0\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
7446
7425
  <div class=\\"MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Determinate\\" style=\\"transform: translateX(-100%);\\"></div>
@@ -7453,10 +7432,8 @@ exports[`Progress should render examples: Progress 1`] = `
7453
7432
 
7454
7433
  exports[`ProgressionBanner should render examples: ProgressionBanner 1`] = `
7455
7434
  "<div>
7456
- <div class=\\"u-m-1\\">
7457
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">withValue<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
7458
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">progressBar<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
7459
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">withButton<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\"></div>
7435
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
7436
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">WITHVALUE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">PROGRESSBAR</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">WITHBUTTON</span></label>
7460
7437
  </div>
7461
7438
  <div class=\\"MuiPaper-root MuiPaper-elevation0\\">
7462
7439
  <div class=\\"styles__c-banner-wrapper___3KlaG Component-banner-18\\">
@@ -8126,10 +8103,8 @@ exports[`UnorderedList should render examples: UnorderedList 1`] = `
8126
8103
 
8127
8104
  exports[`Viewer should render examples: Viewer 1`] = `
8128
8105
  "<div>
8129
- <div class=\\"u-m-1\\">
8130
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">navigation<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
8131
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">toolbar<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
8132
- <div class=\\"MuiTypography-root u-db MuiTypography-button\\">onlyOfficeEnabled<input class=\\"u-ml-1 u-mr-1\\" type=\\"checkbox\\" checked=\\"\\"></div>
8106
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
8107
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">NAVIGATION</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">TOOLBAR</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\" checked=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ONLYOFFICEENABLED</span></label>
8133
8108
  </div>
8134
8109
  <div class=\\"styles__c-card___YgP7B u-mb-1\\">
8135
8110
  <div class=\\"u-dib u-mr-1\\">Toolbar props :</div><label class=\\"MuiFormControlLabel-root u-dib\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-5\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">Close</span></label>
package/transpiled/react/AppTile/index.js CHANGED
@@ -98,7 +98,7 @@ export var AppTile = function AppTile(_ref) {
98
98
  };
99
99
  AppTile.propTypes = {
100
100
  app: AppDoctype,
101
- name: PropTypes.string.isRequired,
101
+ name: PropTypes.string,
102
102
  namePrefix: PropTypes.string,
103
103
  onClick: PropTypes.func,
104
104
  IconComponent: PropTypes.element,
package/transpiled/react/Field/index.js CHANGED
@@ -41,6 +41,7 @@ import ContactPicker from "cozy-ui/transpiled/react/ContactPicker";
41
41
  */
42
42
 
43
43
  var inputSpecificPropTypes = {
44
+ autoCapitalize: PropTypes.string,
44
45
  autoComplete: PropTypes.string,
45
46
  onKeyUp: PropTypes.func
46
47
  };
@@ -129,7 +130,8 @@ var FieldContainer = function FieldContainer(props) {
129
130
  };
130
131
 
131
132
  var Field = function Field(props) {
132
- var autoComplete = props.autoComplete,
133
+ var autoCapitalize = props.autoCapitalize,
134
+ autoComplete = props.autoComplete,
133
135
  className = props.className,
134
136
  disabled = props.disabled,
135
137
  fieldProps = props.fieldProps,
@@ -172,6 +174,7 @@ var Field = function Field(props) {
172
174
 
173
175
  case 'textarea':
174
176
  return React.createElement(Textarea, _extends({
177
+ autoCapitalize: autoCapitalize,
175
178
  disabled: disabled,
176
179
  id: id,
177
180
  name: name,
@@ -185,6 +188,7 @@ var Field = function Field(props) {
185
188
 
186
189
  case 'password':
187
190
  return React.createElement(InputPassword, _extends({
191
+ autoCapitalize: autoCapitalize,
188
192
  autoComplete: autoComplete,
189
193
  disabled: disabled,
190
194
  fullwidth: fullwidth,
@@ -217,6 +221,7 @@ var Field = function Field(props) {
217
221
  case 'text':
218
222
  case 'number':
219
223
  return React.createElement(Input, _extends({
224
+ autoCapitalize: autoCapitalize,
220
225
  autoComplete: autoComplete,
221
226
  disabled: disabled,
222
227
  fullwidth: fullwidth,
package/transpiled/react/MuiCozyTheme/makeOverrides.js CHANGED
@@ -74,7 +74,7 @@ var makeOverrides = function makeOverrides(theme) {
74
74
  boxShadow: '0 4px 12px 0 rgba(0, 0, 0, 0.08)',
75
75
  borderWidth: '0.0625rem',
76
76
  borderStyle: 'solid',
77
- borderColor: theme.palette.grey[200],
77
+ borderColor: theme.palette.border.main,
78
78
  overflow: 'hidden',
79
79
  marginBottom: '1rem'
80
80
  }
@@ -120,7 +120,7 @@ var makeOverrides = function makeOverrides(theme) {
120
120
  MuiAccordionDetails: {
121
121
  root: {
122
122
  padding: 0,
123
- borderTop: "0.0625rem solid ".concat(theme.palette.grey[200])
123
+ borderTop: "0.0625rem solid ".concat(theme.palette.border.main)
124
124
  }
125
125
  },
126
126
  MuiStepConnector: {