cozy-ui 111.7.0 → 111.8.1

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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## [111.8.1](https://github.com/cozy/cozy-ui/compare/v111.8.0...v111.8.1) (2024-08-28)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **Alert:** Right action margin wasn't correct ([2e462b3](https://github.com/cozy/cozy-ui/commit/2e462b3))
7
+
8
+ # [111.8.0](https://github.com/cozy/cozy-ui/compare/v111.7.0...v111.8.0) (2024-08-19)
9
+
10
+
11
+ ### Features
12
+
13
+ * **MobileStepper:** Add cozy design to MUI export ([d6728f8](https://github.com/cozy/cozy-ui/commit/d6728f8))
14
+
1
15
  # [111.7.0](https://github.com/cozy/cozy-ui/compare/v111.6.0...v111.7.0) (2024-08-14)
2
16
 
3
17
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cozy-ui",
3
- "version": "111.7.0",
3
+ "version": "111.8.1",
4
4
  "description": "Cozy apps UI SDK",
5
5
  "main": "./index.js",
6
6
  "bin": {
@@ -2,7 +2,10 @@
2
2
  import Alert from 'cozy-ui/transpiled/react/Alert'
3
3
  import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle'
4
4
  import Button from 'cozy-ui/transpiled/react/Buttons'
5
+ import IconButton from 'cozy-ui/transpiled/react/IconButton'
5
6
  import Icon from 'cozy-ui/transpiled/react/Icon'
7
+ import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
8
+ import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
6
9
  import Variants from 'cozy-ui/docs/components/Variants'
7
10
  import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
8
11
  import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
@@ -17,6 +20,7 @@ const initialVariants = [{
17
20
  square: false,
18
21
  actionOne: false,
19
22
  actionTwo: false,
23
+ actionThree: false,
20
24
  filled: false,
21
25
  close: false
22
26
  }]
@@ -31,7 +35,7 @@ const initialVariants = [{
31
35
  block={variant.block}
32
36
  square={variant.square}
33
37
  icon={variant.noIcon ? false : variant.largeIcon ? <Icon icon={DeviceLaptopIcon} color="var(--errorColor)" size={32} /> : undefined}
34
- action={(variant.actionOne || variant.actionTwo) ?
38
+ action={(variant.actionOne || variant.actionTwo || variant.actionThree) ?
35
39
  <>
36
40
  {variant.actionOne &&
37
41
  <Button variant="text" size="small" label="Download" startIcon={<Icon icon={DownloadIcon} />} />
@@ -39,6 +43,13 @@ const initialVariants = [{
39
43
  {variant.actionTwo &&
40
44
  <Button variant="text" size="small" label="No, thanks!" />
41
45
  }
46
+ {variant.actionThree &&
47
+ <ListItemIcon>
48
+ <IconButton>
49
+ <Icon icon={DotsIcon} />
50
+ </IconButton>
51
+ </ListItemIcon>
52
+ }
42
53
  </>
43
54
  : undefined
44
55
  }
@@ -0,0 +1,43 @@
1
+ ```jsx
2
+ import { useState } from 'react'
3
+ import MobileStepper from 'cozy-ui/transpiled/react/MobileStepper'
4
+ import IconButton from 'cozy-ui/transpiled/react/IconButton'
5
+ import Icon from 'cozy-ui/transpiled/react/Icon'
6
+ import LeftIcon from 'cozy-ui/transpiled/react/Icons/Left'
7
+ import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
8
+
9
+ const maxSteps = 5
10
+ const [activeStep, setActiveStep] = useState(0)
11
+
12
+ const handleNext = () => {
13
+ setActiveStep(activeStep + 1)
14
+ }
15
+
16
+ const handleBack = () => {
17
+ setActiveStep(activeStep - 1)
18
+ }
19
+
20
+ ;
21
+
22
+ <div class="u-flex">
23
+ <MobileStepper
24
+ className="u-mh-auto"
25
+ steps={maxSteps}
26
+ position="static"
27
+ activeStep={activeStep}
28
+ nextButton={
29
+ <IconButton
30
+ onClick={handleNext}
31
+ disabled={activeStep === maxSteps - 1}
32
+ >
33
+ <Icon icon={RightIcon} />
34
+ </IconButton>
35
+ }
36
+ backButton={
37
+ <IconButton onClick={handleBack} disabled={activeStep === 0}>
38
+ <Icon icon={LeftIcon} />
39
+ </IconButton>
40
+ }
41
+ />
42
+ </div>
43
+ ```
@@ -818,10 +818,9 @@ export const makeLightNormalOverrides = theme => ({
818
818
  '&.block': {
819
819
  flexWrap: 'wrap',
820
820
  '& $action': {
821
- display: 'block',
822
821
  width: '100%',
823
822
  paddingLeft: 0,
824
- textAlign: 'right'
823
+ justifyContent: 'end'
825
824
  }
826
825
  }
827
826
  },
@@ -832,7 +831,7 @@ export const makeLightNormalOverrides = theme => ({
832
831
  flexWrap: 'wrap'
833
832
  },
834
833
  action: {
835
- marginRight: '-6px'
834
+ marginRight: '-8px'
836
835
  }
837
836
  },
838
837
  MuiAlertTitle: {
@@ -876,5 +875,23 @@ export const makeLightNormalOverrides = theme => ({
876
875
  padding: '0 16px'
877
876
  }
878
877
  }
878
+ },
879
+ MuiMobileStepper: {
880
+ root: {
881
+ background: 'transparent',
882
+ height: 40,
883
+ padding: 0
884
+ },
885
+ dot: {
886
+ backgroundColor: 'transparent',
887
+ width: '10px',
888
+ height: '10px',
889
+ margin: '0 3px',
890
+ border: `1px solid ${theme.palette.border.main}`,
891
+ boxSizing: 'border-box'
892
+ },
893
+ dotActive: {
894
+ border: 'none'
895
+ }
879
896
  }
880
897
  })
@@ -3,7 +3,7 @@
3
3
  exports[`Alert should render examples: Alert 1`] = `
4
4
  "<div data-testid=\\"mountNode\\">
5
5
  <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
6
- <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LONGTEXT\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LONGTEXT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"TITLE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">TITLE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"BLOCK\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BLOCK</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"COLOR\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">COLOR</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LARGEICON\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LARGEICON</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"NOICON\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">NOICON</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"SQUARE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SQUARE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"ACTIONONE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTIONONE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"ACTIONTWO\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTIONTWO</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"FILLED\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">FILLED</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"CLOSE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">CLOSE</span></label>
6
+ <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5 MuiTypography-colorTextPrimary\\">Variant selector</h5><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LONGTEXT\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LONGTEXT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"TITLE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">TITLE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"BLOCK\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">BLOCK</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"COLOR\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">COLOR</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"LARGEICON\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LARGEICON</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"NOICON\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">NOICON</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"SQUARE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SQUARE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"ACTIONONE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTIONONE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"ACTIONTWO\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTIONTWO</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"ACTIONTHREE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTIONTHREE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"FILLED\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">FILLED</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" type=\\"checkbox\\" data-indeterminate=\\"false\\" aria-label=\\"CLOSE\\" aria-checked=\\"\\" value=\\"\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\"><path d=\\"M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">CLOSE</span></label>
7
7
  </div>
8
8
  <div class=\\"MuiPaper-root MuiAlert-root MuiAlert-standardSuccess cozyStyles-primary-standard MuiPaper-elevation0\\" role=\\"alert\\">
9
9
  <div class=\\"MuiAlert-icon\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
@@ -1317,10 +1317,9 @@ export function makeDarkInvertedOverrides(theme: any): {
1317
1317
  '&.block': {
1318
1318
  flexWrap: string;
1319
1319
  '& $action': {
1320
- display: string;
1321
1320
  width: string;
1322
1321
  paddingLeft: number;
1323
- textAlign: string;
1322
+ justifyContent: string;
1324
1323
  };
1325
1324
  };
1326
1325
  };
@@ -1376,6 +1375,24 @@ export function makeDarkInvertedOverrides(theme: any): {
1376
1375
  };
1377
1376
  };
1378
1377
  };
1378
+ MuiMobileStepper: {
1379
+ root: {
1380
+ background: string;
1381
+ height: number;
1382
+ padding: number;
1383
+ };
1384
+ dot: {
1385
+ backgroundColor: string;
1386
+ width: string;
1387
+ height: string;
1388
+ margin: string;
1389
+ border: string;
1390
+ boxSizing: string;
1391
+ };
1392
+ dotActive: {
1393
+ border: string;
1394
+ };
1395
+ };
1379
1396
  } & {
1380
1397
  MuiLinearProgress: {
1381
1398
  colorPrimary: {
@@ -1317,10 +1317,9 @@ export function makeDarkNormalOverrides(theme: any): {
1317
1317
  '&.block': {
1318
1318
  flexWrap: string;
1319
1319
  '& $action': {
1320
- display: string;
1321
1320
  width: string;
1322
1321
  paddingLeft: number;
1323
- textAlign: string;
1322
+ justifyContent: string;
1324
1323
  };
1325
1324
  };
1326
1325
  };
@@ -1376,4 +1375,22 @@ export function makeDarkNormalOverrides(theme: any): {
1376
1375
  };
1377
1376
  };
1378
1377
  };
1378
+ MuiMobileStepper: {
1379
+ root: {
1380
+ background: string;
1381
+ height: number;
1382
+ padding: number;
1383
+ };
1384
+ dot: {
1385
+ backgroundColor: string;
1386
+ width: string;
1387
+ height: string;
1388
+ margin: string;
1389
+ border: string;
1390
+ boxSizing: string;
1391
+ };
1392
+ dotActive: {
1393
+ border: string;
1394
+ };
1395
+ };
1379
1396
  };
@@ -1317,10 +1317,9 @@ export function makeLightInvertedOverrides(theme: any): {
1317
1317
  '&.block': {
1318
1318
  flexWrap: string;
1319
1319
  '& $action': {
1320
- display: string;
1321
1320
  width: string;
1322
1321
  paddingLeft: number;
1323
- textAlign: string;
1322
+ justifyContent: string;
1324
1323
  };
1325
1324
  };
1326
1325
  };
@@ -1376,6 +1375,24 @@ export function makeLightInvertedOverrides(theme: any): {
1376
1375
  };
1377
1376
  };
1378
1377
  };
1378
+ MuiMobileStepper: {
1379
+ root: {
1380
+ background: string;
1381
+ height: number;
1382
+ padding: number;
1383
+ };
1384
+ dot: {
1385
+ backgroundColor: string;
1386
+ width: string;
1387
+ height: string;
1388
+ margin: string;
1389
+ border: string;
1390
+ boxSizing: string;
1391
+ };
1392
+ dotActive: {
1393
+ border: string;
1394
+ };
1395
+ };
1379
1396
  } & {
1380
1397
  MuiLinearProgress: {
1381
1398
  colorPrimary: {
@@ -1317,10 +1317,9 @@ export function makeLightNormalOverrides(theme: any): {
1317
1317
  '&.block': {
1318
1318
  flexWrap: string;
1319
1319
  '& $action': {
1320
- display: string;
1321
1320
  width: string;
1322
1321
  paddingLeft: number;
1323
- textAlign: string;
1322
+ justifyContent: string;
1324
1323
  };
1325
1324
  };
1326
1325
  };
@@ -1376,4 +1375,22 @@ export function makeLightNormalOverrides(theme: any): {
1376
1375
  };
1377
1376
  };
1378
1377
  };
1378
+ MuiMobileStepper: {
1379
+ root: {
1380
+ background: string;
1381
+ height: number;
1382
+ padding: number;
1383
+ };
1384
+ dot: {
1385
+ backgroundColor: string;
1386
+ width: string;
1387
+ height: string;
1388
+ margin: string;
1389
+ border: string;
1390
+ boxSizing: string;
1391
+ };
1392
+ dotActive: {
1393
+ border: string;
1394
+ };
1395
+ };
1379
1396
  };
@@ -762,10 +762,9 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
762
762
  '&.block': {
763
763
  flexWrap: 'wrap',
764
764
  '& $action': {
765
- display: 'block',
766
765
  width: '100%',
767
766
  paddingLeft: 0,
768
- textAlign: 'right'
767
+ justifyContent: 'end'
769
768
  }
770
769
  }
771
770
  },
@@ -776,7 +775,7 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
776
775
  flexWrap: 'wrap'
777
776
  },
778
777
  action: {
779
- marginRight: '-6px'
778
+ marginRight: '-8px'
780
779
  }
781
780
  },
782
781
  MuiAlertTitle: {
@@ -820,6 +819,24 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
820
819
  padding: '0 16px'
821
820
  }
822
821
  }
822
+ },
823
+ MuiMobileStepper: {
824
+ root: {
825
+ background: 'transparent',
826
+ height: 40,
827
+ padding: 0
828
+ },
829
+ dot: {
830
+ backgroundColor: 'transparent',
831
+ width: '10px',
832
+ height: '10px',
833
+ margin: '0 3px',
834
+ border: "1px solid ".concat(theme.palette.border.main),
835
+ boxSizing: 'border-box'
836
+ },
837
+ dotActive: {
838
+ border: 'none'
839
+ }
823
840
  }
824
841
  };
825
842
  };