cozy-ui 57.5.1 → 57.5.5

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 (12) 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/MuiCozyTheme/makeOverrides.js +2 -2
  6. package/react/SquareAppIcon/Readme.md +1 -1
  7. package/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap +8 -8
  8. package/react/SquareAppIcon/index.jsx +4 -1
  9. package/react/__snapshots__/examples.spec.jsx.snap +28 -64
  10. package/transpiled/react/AppTile/index.js +1 -1
  11. package/transpiled/react/MuiCozyTheme/makeOverrides.js +2 -2
  12. package/transpiled/react/SquareAppIcon/index.js +4 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,32 @@
1
+ ## [57.5.5](https://github.com/cozy/cozy-ui/compare/v57.5.4...v57.5.5) (2021-11-08)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * Do not stretch small screenshots ([4c7f48f](https://github.com/cozy/cozy-ui/commit/4c7f48f))
7
+ * 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))
8
+
9
+ ## [57.5.4](https://github.com/cozy/cozy-ui/compare/v57.5.3...v57.5.4) (2021-11-04)
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+ * AppTile doesn't require name prop ([3a74932](https://github.com/cozy/cozy-ui/commit/3a74932))
15
+
16
+ ## [57.5.3](https://github.com/cozy/cozy-ui/compare/v57.5.2...v57.5.3) (2021-11-04)
17
+
18
+
19
+ ### Bug Fixes
20
+
21
+ * Border color of Accordion ([4628488](https://github.com/cozy/cozy-ui/commit/4628488))
22
+
23
+ ## [57.5.2](https://github.com/cozy/cozy-ui/compare/v57.5.1...v57.5.2) (2021-11-02)
24
+
25
+
26
+ ### Bug Fixes
27
+
28
+ * Use u-spacellipsis instead of u-ellipsis ([3a4a6c3](https://github.com/cozy/cozy-ui/commit/3a4a6c3))
29
+
1
30
  ## [57.5.1](https://github.com/cozy/cozy-ui/compare/v57.5.0...v57.5.1) (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.1",
3
+ "version": "57.5.5",
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/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/SquareAppIcon/Readme.md CHANGED
@@ -27,7 +27,7 @@ const theme = useCozyTheme()
27
27
  <SquareAppIcon name="Add" variant="add" />
28
28
  </Grid>
29
29
  <Grid item>
30
- <SquareAppIcon app="testapp" name="No Account" variant="ghost" />
30
+ <SquareAppIcon app="testapp" name="No Account long name very very very very long" variant="ghost" />
31
31
  </Grid>
32
32
  <Grid item>
33
33
  <SquareAppIcon name="Shortcut" variant="shortcut" />
package/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap CHANGED
@@ -35,7 +35,7 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
35
35
  />
36
36
  </span>
37
37
  <h6
38
- class="MuiTypography-root makeStyles-name-7 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
38
+ class="MuiTypography-root makeStyles-name-7 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
39
39
  >
40
40
  Test
41
41
  </h6>
@@ -77,7 +77,7 @@ exports[`SquareAppIcon component should render an app correctly with the given n
77
77
  />
78
78
  </span>
79
79
  <h6
80
- class="MuiTypography-root makeStyles-name-1 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
80
+ class="MuiTypography-root makeStyles-name-1 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
81
81
  >
82
82
  modified
83
83
  </h6>
@@ -119,7 +119,7 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
119
119
  />
120
120
  </span>
121
121
  <h6
122
- class="MuiTypography-root makeStyles-name-13 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
122
+ class="MuiTypography-root makeStyles-name-13 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
123
123
  >
124
124
  testslug
125
125
  </h6>
@@ -168,7 +168,7 @@ exports[`SquareAppIcon component should render correctly an app in add state 1`]
168
168
  />
169
169
  </span>
170
170
  <h6
171
- class="MuiTypography-root makeStyles-name-37 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
171
+ class="MuiTypography-root makeStyles-name-37 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
172
172
  />
173
173
  </div>
174
174
  `;
@@ -220,7 +220,7 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
220
220
  />
221
221
  </span>
222
222
  <h6
223
- class="MuiTypography-root makeStyles-name-31 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
223
+ class="MuiTypography-root makeStyles-name-31 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
224
224
  >
225
225
  Test
226
226
  </h6>
@@ -262,7 +262,7 @@ exports[`SquareAppIcon component should render correctly an app in ghost state 1
262
262
  />
263
263
  </span>
264
264
  <h6
265
- class="MuiTypography-root makeStyles-name-25 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
265
+ class="MuiTypography-root makeStyles-name-25 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
266
266
  >
267
267
  Test
268
268
  </h6>
@@ -304,7 +304,7 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
304
304
  />
305
305
  </span>
306
306
  <h6
307
- class="MuiTypography-root makeStyles-name-19 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
307
+ class="MuiTypography-root makeStyles-name-19 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
308
308
  >
309
309
  Test
310
310
  </h6>
@@ -349,7 +349,7 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
349
349
  </span>
350
350
  </span>
351
351
  <h6
352
- class="MuiTypography-root makeStyles-name-43 u-ellipsis u-ov-hidden MuiTypography-h6 MuiTypography-alignCenter"
352
+ class="MuiTypography-root makeStyles-name-43 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
353
353
  >
354
354
  shortcut
355
355
  </h6>
package/react/SquareAppIcon/index.jsx CHANGED
@@ -26,6 +26,9 @@ const useStyles = makeStyles(theme => ({
26
26
  lineHeight: '1.188rem',
27
27
  margin: '0.5rem 0.25rem 0 0.25rem',
28
28
  textShadow: theme.textShadows[1],
29
+ lineClamp: '2',
30
+ boxOrient: 'vertical',
31
+ display: '-webkit-box',
29
32
  height: '2.375rem',
30
33
  [theme.breakpoints.down('sm')]: {
31
34
  width: '3.75rem',
@@ -121,7 +124,7 @@ export const SquareAppIcon = ({ app, name, variant }) => {
121
124
  </Badge>
122
125
  </InfosBadge>
123
126
  <Typography
124
- className={cx(classes.name, 'u-ellipsis', 'u-ov-hidden')}
127
+ className={cx(classes.name, 'u-spacellipsis')}
125
128
  variant="h6"
126
129
  align="center"
127
130
  >
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\\">
@@ -6936,10 +6913,8 @@ exports[`IconStack should render examples: IconStack 1`] = `
6936
6913
  exports[`Infos should render examples: Infos 1`] = `
6937
6914
  "<div>
6938
6915
  <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>
6916
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
6917
+ <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
6918
  </div>
6944
6919
  <div class=\\"styles__Infos___2ZZVs styles__Infos--primary___3i4ll\\">
6945
6920
  <div class=\\"styles__Stack--m___1tSpV\\">
@@ -6951,10 +6926,8 @@ exports[`Infos should render examples: Infos 1`] = `
6951
6926
  </div>
6952
6927
  </div>
6953
6928
  </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>
6929
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
6930
+ <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
6931
  </div>
6959
6932
  <div class=\\"styles__Infos___2ZZVs styles__Infos--danger___3wKYc\\">
6960
6933
  <div class=\\"styles__Stack--m___1tSpV\\">
@@ -6967,11 +6940,8 @@ exports[`Infos should render examples: Infos 1`] = `
6967
6940
  <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
6941
  </div>
6969
6942
  </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>
6943
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
6944
+ <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
6945
  </div>
6976
6946
  <div class=\\"styles__Infos___2ZZVs styles__Infos--primary___3i4ll\\">
6977
6947
  <div class=\\"styles__Stack--m___1tSpV\\">
@@ -7202,10 +7172,8 @@ exports[`Label should render examples: Label 3`] = `
7202
7172
 
7203
7173
  exports[`Labs/CollectionField should render examples: Labs/CollectionField 1`] = `
7204
7174
  "<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>
7175
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
7176
+ <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
7177
  </div>
7210
7178
  <div class=\\"styles__o-field___3n5HM\\"><label class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">Contacts</label>
7211
7179
  <div class=\\"styles__Stack--m___1tSpV\\">
@@ -7368,8 +7336,8 @@ exports[`OrderedList should render examples: OrderedList 1`] = `
7368
7336
 
7369
7337
  exports[`Paper should render examples: Paper 1`] = `
7370
7338
  "<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>
7339
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
7340
+ <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
7341
  </div>
7374
7342
  <div class=\\"styles__Stack--m___1tSpV\\">
7375
7343
  <div class=\\"MuiPaper-root PaperExample-root-17 MuiPaper-elevation0\\">
@@ -7439,8 +7407,8 @@ exports[`PercentageLine should render examples: PercentageLine 1`] = `
7439
7407
 
7440
7408
  exports[`Progress should render examples: Progress 1`] = `
7441
7409
  "<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>
7410
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
7411
+ <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
7412
  </div>
7445
7413
  <div class=\\"MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-determinate\\" role=\\"progressbar\\" aria-valuenow=\\"0\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">
7446
7414
  <div class=\\"MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Determinate\\" style=\\"transform: translateX(-100%);\\"></div>
@@ -7453,10 +7421,8 @@ exports[`Progress should render examples: Progress 1`] = `
7453
7421
 
7454
7422
  exports[`ProgressionBanner should render examples: ProgressionBanner 1`] = `
7455
7423
  "<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>
7424
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
7425
+ <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
7426
  </div>
7461
7427
  <div class=\\"MuiPaper-root MuiPaper-elevation0\\">
7462
7428
  <div class=\\"styles__c-banner-wrapper___3KlaG Component-banner-18\\">
@@ -8126,10 +8092,8 @@ exports[`UnorderedList should render examples: UnorderedList 1`] = `
8126
8092
 
8127
8093
  exports[`Viewer should render examples: Viewer 1`] = `
8128
8094
  "<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>
8095
+ <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
8096
+ <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
8097
  </div>
8134
8098
  <div class=\\"styles__c-card___YgP7B u-mb-1\\">
8135
8099
  <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/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: {
package/transpiled/react/SquareAppIcon/index.js CHANGED
@@ -38,6 +38,9 @@ var useStyles = makeStyles(function (theme) {
38
38
  lineHeight: '1.188rem',
39
39
  margin: '0.5rem 0.25rem 0 0.25rem',
40
40
  textShadow: theme.textShadows[1],
41
+ lineClamp: '2',
42
+ boxOrient: 'vertical',
43
+ display: '-webkit-box',
41
44
  height: '2.375rem'
42
45
  }, theme.breakpoints.down('sm'), {
43
46
  width: '3.75rem',
@@ -113,7 +116,7 @@ export var SquareAppIcon = function SquareAppIcon(_ref) {
113
116
  }) : React.createElement(AppIcon, {
114
117
  app: app
115
118
  })))), React.createElement(Typography, {
116
- className: cx(classes.name, 'u-ellipsis', 'u-ov-hidden'),
119
+ className: cx(classes.name, 'u-spacellipsis'),
117
120
  variant: "h6",
118
121
  align: "center"
119
122
  }, appName));