cozy-ui 67.0.3 → 67.0.4

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 (7) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/package.json +1 -1
  3. package/react/Buttons/index.jsx +20 -6
  4. package/react/CozyDialogs/Readme.md +122 -99
  5. package/react/Viewer/Panel/getPanelBlocks.spec.jsx +60 -0
  6. package/react/__snapshots__/examples.spec.jsx.snap +21 -21
  7. package/transpiled/react/Buttons/index.js +14 -6
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [67.0.4](https://github.com/cozy/cozy-ui/compare/v67.0.3...v67.0.4) (2022-05-20)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **Buttons:** Classname when using ghost variant ([c070c0c](https://github.com/cozy/cozy-ui/commit/c070c0c))
7
+
1
8
  ## [67.0.3](https://github.com/cozy/cozy-ui/compare/v67.0.2...v67.0.3) (2022-05-20)
2
9
 
3
10
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cozy-ui",
3
- "version": "67.0.3",
3
+ "version": "67.0.4",
4
4
  "description": "Cozy apps UI SDK",
5
5
  "main": "./index.js",
6
6
  "bin": {
package/react/Buttons/index.jsx CHANGED
@@ -37,12 +37,12 @@ DefaultButton.defaultProps = {
37
37
  color: 'primary'
38
38
  }
39
39
 
40
- const Buttons = forwardRef(({ variant, ...props }, ref) => {
40
+ const Buttons = forwardRef(({ variant, className = '', ...props }, ref) => {
41
41
  switch (variant) {
42
42
  case 'ghost':
43
43
  return (
44
44
  <DefaultButton
45
- className="ghost"
45
+ className={`ghost ${className}`}
46
46
  variant="outlined"
47
47
  {...props}
48
48
  ref={ref}
@@ -50,16 +50,30 @@ const Buttons = forwardRef(({ variant, ...props }, ref) => {
50
50
  )
51
51
 
52
52
  case 'secondary':
53
- return <DefaultButton variant="outlined" {...props} ref={ref} />
53
+ return (
54
+ <DefaultButton
55
+ variant="outlined"
56
+ className={className}
57
+ {...props}
58
+ ref={ref}
59
+ />
60
+ )
54
61
 
55
62
  case 'text':
56
- return <DefaultButton variant="text" {...props} ref={ref} />
63
+ return (
64
+ <DefaultButton
65
+ variant="text"
66
+ className={className}
67
+ {...props}
68
+ ref={ref}
69
+ />
70
+ )
57
71
 
58
72
  case 'primary':
59
- return <DefaultButton {...props} ref={ref} />
73
+ return <DefaultButton className={className} {...props} ref={ref} />
60
74
 
61
75
  default:
62
- return <DefaultButton {...props} ref={ref} />
76
+ return <DefaultButton className={className} {...props} ref={ref} />
63
77
  }
64
78
  })
65
79
  Buttons.displayName = 'Buttons'
package/react/CozyDialogs/Readme.md CHANGED
@@ -46,10 +46,16 @@ import {
46
46
 
47
47
  import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
48
48
 
49
- import Button from 'cozy-ui/transpiled/react/Button'
49
+ import Button from 'cozy-ui/transpiled/react/Buttons'
50
50
  import Alerter from 'cozy-ui/transpiled/react/Alerter'
51
51
  import Icon from 'cozy-ui/transpiled/react/Icon'
52
52
  import Typography from 'cozy-ui/transpiled/react/Typography'
53
+ import Variants from 'cozy-ui/docs/components/Variants'
54
+ import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
55
+ import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
56
+ import Radio from 'cozy-ui/transpiled/react/Radios'
57
+ import FormControl from 'cozy-ui/transpiled/react/FormControl'
58
+ import FormLabel from 'cozy-ui/transpiled/react/FormLabel'
53
59
 
54
60
  import CloudIcon from "cozy-ui/transpiled/react/Icons/Cloud"
55
61
 
@@ -65,12 +71,12 @@ const ExampleDialogActions = () => {
65
71
  return (
66
72
  <>
67
73
  <Button
68
- theme="secondary"
69
- onClick={handleClose}
74
+ variant="secondary"
70
75
  label={'Close Modal'}
76
+ onClick={handleClose}
71
77
  />
72
78
  <Button
73
- theme="primary"
79
+ variant="primary"
74
80
  label='Do something'
75
81
  onClick={() => alert('click')}
76
82
  />
@@ -82,12 +88,12 @@ const ConfirmDialogActions = () => {
82
88
  return (
83
89
  <>
84
90
  <Button
85
- theme="secondary"
86
- onClick={handleClose}
91
+ variant="secondary"
87
92
  label={'Close Modal'}
93
+ onClick={handleClose}
88
94
  />
89
95
  <Button
90
- theme="danger"
96
+ color="error"
91
97
  label='Do something destructive'
92
98
  onClick={() => alert('click')}
93
99
  />
@@ -148,105 +154,122 @@ initialState = {
148
154
  modalOpened: isTesting(),
149
155
  modal: Dialog,
150
156
  size: 'medium',
151
- actionsLayout: 'row',
152
- title: 'short',
157
+ content: 'default',
158
+ theme: 'normal',
159
+ }
160
+
161
+ const initialVariants = [{
162
+ actionsLayoutColumn: false,
163
+ titleLong: false,
153
164
  disableTitleAutoPadding: false,
154
165
  withCloseButton: true,
155
166
  withBackButton: false,
156
- content: 'default',
157
- theme: 'normal',
158
- align: 'middle',
167
+ alignTop: false,
159
168
  showActions: true,
160
169
  disableGutters: false,
161
170
  hideTitle: false
162
- }
171
+ }]
163
172
 
164
173
  ;
165
174
 
166
- <>
167
- <BreakpointsProvider>
168
- <p>With close button:
169
- <StateRadio value={true} name='withCloseButton' /> yes{' '}
170
- <StateRadio value={false} name='withCloseButton' /> no
171
- </p>
172
- <p>With back button:
173
- <StateRadio value={true} name='withBackButton' /> yes{' '}
174
- <StateRadio value={false} name='withBackButton' /> no
175
- </p>
176
- <p>Disable Title auto-positionning:
177
- <StateRadio value={true} name='disableTitleAutoPadding' /> yes{' '}
178
- <StateRadio value={false} name='disableTitleAutoPadding' /> no
179
- </p>
180
- <p>Title:
181
- <StateRadio value='short' name='title' /> short{' '}
182
- <StateRadio value='long' name='title' /> long
183
- </p>
184
- <p>Hide title:
185
- <StateRadio value={true} name='hideTitle' /> yes{' '}
186
- <StateRadio value={false} name='hideTitle' /> no
187
- </p>
188
- <p>Content:
189
- <StateRadio value='default' name='content' /> default{' '}
190
- <StateRadio value='short' name='content' /> short{' '}
191
- <StateRadio value='long' name='content' /> long
192
- </p>
193
- <p>Size:
194
- <StateRadio value='small' name='size' /> small {' '}
195
- <StateRadio value='medium' name='size' /> medium {' '}
196
- <StateRadio value='large' name='size' /> large
197
- </p>
198
- <p>With actions:
199
- <StateRadio value={true} name='showActions' /> yes
200
- <StateRadio value={false} name='showActions' /> no
201
- </p>
202
- <p>Actions layout:
203
- <StateRadio value='row' name='actionsLayout' /> row{' '}
204
- <StateRadio value='column' name='actionsLayout' /> column
205
- </p>
206
- <p>Alignment:
207
- <StateRadio value='middle' name='align' /> middle
208
- <StateRadio value='top' name='align' /> top{' '}
209
- </p>
210
- <p>Disable gutters (inner padding):
211
- <StateRadio value={true} name='disableGutters' /> yes
212
- <StateRadio value={false} name='disableGutters' /> no{' '}
213
- </p>
214
- <DialogComponent
215
- size={DialogComponent !== ConfirmDialog ? state.size : undefined}
216
- open={state.modalOpened}
217
- onClose={state.withCloseButton ? handleClose : undefined}
218
- onBack={state.withBackButton ? handleBack : undefined}
219
- disableTitleAutoPadding={state.disableTitleAutoPadding}
220
- align={state.align}
221
- title={state.hideTitle
222
- ? undefined
223
- : DialogComponent !== IllustrationDialog && state.title === "long"
224
- ? `${dialogTitles[DialogComponent.name]} - ${content.ada.short}`
225
- : dialogTitles[DialogComponent.name]
226
- }
227
- disableGutters={state.disableGutters}
228
- content={
229
- <Typography variant='body1' color='textPrimary'>
230
- { state.content == 'default'
231
- ? dialogContents[DialogComponent.name]
232
- : state.content == 'long'
233
- ? content.ada.long
234
- : content.ada.short}<br/>
235
- <Button className='u-mt-1 u-ml-0' label="Show an alert" onClick={() => Alerter.success('Hello', { duration: 100000 })}/>
236
- </Typography>}
237
- actions={state.showActions && dialogActions[DialogComponent.name]}
238
- actionsLayout={state.actionsLayout}
239
- />
240
- </BreakpointsProvider>
241
-
242
- {dialogs.map(dialog => (
243
- <button
244
- key={`open-btn-${dialog.name}`}
245
- data-testid={`open-btn-${dialog.name}`}
246
- onClick={() => toggleDialog(dialog)}
247
- >
248
- Open {dialog.name}
249
- </button>
250
- ))}
251
- </>
175
+ <BreakpointsProvider>
176
+ <Variants initialVariants={initialVariants}>
177
+ {variant => (
178
+ <>
179
+ <FormControl component="fieldset" fullWidth>
180
+ <FormLabel component="legend">Content</FormLabel>
181
+ <RadioGroup
182
+ aria-label="radio"
183
+ name="content"
184
+ row
185
+ value={state.content}
186
+ onChange={event => { setState({ content: event.target.value }) }}
187
+ >
188
+ <FormControlLabel
189
+ value="default"
190
+ label="Default"
191
+ control={<Radio />}
192
+ />
193
+ <FormControlLabel
194
+ value="short"
195
+ label="Short"
196
+ control={<Radio />}
197
+ />
198
+ <FormControlLabel
199
+ value="long"
200
+ label="Long"
201
+ control={<Radio />}
202
+ />
203
+ </RadioGroup>
204
+ </FormControl>
205
+ <FormControl component="fieldset" >
206
+ <FormLabel component="legend">Size</FormLabel>
207
+ <RadioGroup
208
+ aria-label="radio"
209
+ name="size"
210
+ row
211
+ value={state.size}
212
+ onChange={event => { setState({ size: event.target.value }) }}
213
+ >
214
+ <FormControlLabel
215
+ value="small"
216
+ label="Small"
217
+ control={<Radio />}
218
+ />
219
+ <FormControlLabel
220
+ value="medium"
221
+ label="Medium"
222
+ control={<Radio />}
223
+ />
224
+ <FormControlLabel
225
+ value="large"
226
+ label="Large"
227
+ control={<Radio />}
228
+ />
229
+ </RadioGroup>
230
+ </FormControl>
231
+ <div className="u-mt-1">
232
+ {dialogs.map(dialog => (
233
+ <Button
234
+ key={`open-btn-${dialog.name}`}
235
+ data-testid={`open-btn-${dialog.name}`}
236
+ className="u-m-half"
237
+ label={`Open ${dialog.name}`}
238
+ variant="ghost"
239
+ size="small"
240
+ onClick={() => toggleDialog(dialog)}
241
+ />
242
+ ))}
243
+ </div>
244
+
245
+ <DialogComponent
246
+ size={DialogComponent !== ConfirmDialog ? state.size : undefined}
247
+ open={state.modalOpened}
248
+ onClose={variant.withCloseButton ? handleClose : undefined}
249
+ onBack={variant.withBackButton ? handleBack : undefined}
250
+ disableTitleAutoPadding={variant.disableTitleAutoPadding}
251
+ align={variant.alignTop ? 'top': 'middle'}
252
+ title={variant.hideTitle
253
+ ? undefined
254
+ : DialogComponent !== IllustrationDialog && variant.titleLong
255
+ ? `${dialogTitles[DialogComponent.name]} - ${content.ada.short}`
256
+ : dialogTitles[DialogComponent.name]
257
+ }
258
+ disableGutters={variant.disableGutters}
259
+ content={
260
+ <Typography variant='body1' color='textPrimary'>
261
+ { state.content == 'default'
262
+ ? dialogContents[DialogComponent.name]
263
+ : state.content == 'long'
264
+ ? content.ada.long
265
+ : content.ada.short}<br/>
266
+ <Button className='u-mt-1 u-ml-0' label="Show an alert" onClick={() => Alerter.success('Hello', { duration: 100000 })}/>
267
+ </Typography>}
268
+ actions={variant.showActions && dialogActions[DialogComponent.name]}
269
+ actionsLayout={variant.actionsLayoutColumn ? 'column' : 'row'}
270
+ />
271
+ </>
272
+ )}
273
+ </Variants>
274
+ </BreakpointsProvider>
252
275
  ```
package/react/Viewer/Panel/getPanelBlocks.spec.jsx ADDED
@@ -0,0 +1,60 @@
1
+ import getPanelBlocks from './getPanelBlocks'
2
+
3
+ jest.mock('cozy-harvest-lib/dist/components/KonnectorBlock', () => jest.fn())
4
+ const block1Component = jest.fn()
5
+ const block2Component = jest.fn()
6
+
7
+ describe('getPanelBlocks', () => {
8
+ it('should return only blocks with truthy condition', () => {
9
+ // with two truthy component
10
+ expect(
11
+ getPanelBlocks({
12
+ panelBlocksSpecs: {
13
+ block1: {
14
+ condition: () => true,
15
+ component: block1Component
16
+ },
17
+ block2: {
18
+ condition: () => true,
19
+ component: block2Component
20
+ }
21
+ }
22
+ })
23
+ ).toMatchObject([block1Component, block2Component])
24
+
25
+ // with one truthy component
26
+ expect(
27
+ getPanelBlocks({
28
+ panelBlocksSpecs: {
29
+ block1: {
30
+ condition: () => false,
31
+ component: block1Component
32
+ },
33
+ block2: {
34
+ condition: () => true,
35
+ component: block2Component
36
+ }
37
+ }
38
+ })
39
+ ).toMatchObject([block2Component])
40
+
41
+ // with no truthy component
42
+ expect(
43
+ getPanelBlocks({
44
+ panelBlocksSpecs: {
45
+ block1: {
46
+ condition: () => false,
47
+ component: block1Component
48
+ },
49
+ block2: {
50
+ condition: () => false,
51
+ component: block2Component
52
+ }
53
+ }
54
+ })
55
+ ).toMatchObject([])
56
+
57
+ // with no specs
58
+ expect(getPanelBlocks({ panelBlocksSpecs: {} })).toMatchObject([])
59
+ })
60
+ })
package/react/__snapshots__/examples.spec.jsx.snap CHANGED
@@ -336,7 +336,7 @@ exports[`Buttons should render examples: Buttons 1`] = `
336
336
  <div>default</div>
337
337
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
338
338
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
339
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
339
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
340
340
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
341
341
  </div>
342
342
  </div>
@@ -345,7 +345,7 @@ exports[`Buttons should render examples: Buttons 1`] = `
345
345
  <div>disabled</div>
346
346
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
347
347
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
348
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
348
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
349
349
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text</span></button></div>
350
350
  </div>
351
351
  </div>
@@ -354,7 +354,7 @@ exports[`Buttons should render examples: Buttons 1`] = `
354
354
  <div>busy</div>
355
355
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
356
356
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
357
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
357
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
358
358
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
359
359
  </div>
360
360
  </div>
@@ -370,7 +370,7 @@ exports[`Buttons should render examples: Buttons 2`] = `
370
370
  <div>small</div>
371
371
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-containedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
372
372
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-outlinedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
373
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-outlinedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
373
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-outlinedSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
374
374
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeSmall MuiButton-sizeSmall MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
375
375
  </div>
376
376
  </div>
@@ -379,7 +379,7 @@ exports[`Buttons should render examples: Buttons 2`] = `
379
379
  <div>medium</div>
380
380
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
381
381
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
382
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
382
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
383
383
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
384
384
  </div>
385
385
  </div>
@@ -388,7 +388,7 @@ exports[`Buttons should render examples: Buttons 2`] = `
388
388
  <div>large</div>
389
389
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-containedSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
390
390
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-outlinedSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
391
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-outlinedSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
391
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-outlinedSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
392
392
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-textSizeLarge MuiButton-sizeLarge MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
393
393
  </div>
394
394
  </div>
@@ -404,7 +404,7 @@ exports[`Buttons should render examples: Buttons 3`] = `
404
404
  <div>startIcon</div>
405
405
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>primary</span></button></div>
406
406
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>secondary</span></button></div>
407
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>ghost</span></button></div>
407
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>ghost</span></button></div>
408
408
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><span class=\\"MuiButton-startIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span>text</span></button></div>
409
409
  </div>
410
410
  </div>
@@ -413,7 +413,7 @@ exports[`Buttons should render examples: Buttons 3`] = `
413
413
  <div>endIcon</div>
414
414
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
415
415
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
416
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
416
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
417
417
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></span></button></div>
418
418
  </div>
419
419
  </div>
@@ -422,7 +422,7 @@ exports[`Buttons should render examples: Buttons 3`] = `
422
422
  <div>label is only icon</div>
423
423
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-primary u-miw-auto MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
424
424
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
425
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
425
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-primary ghost u-miw-auto MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
426
426
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-primary u-miw-auto MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><defs><path id=\\"plus_svg__a\\" d=\\"M7 0h2v7h7v2H9v7H7V9H0V7h7z\\"></path></defs><use xlink:href=\\"#plus_svg__a\\" fill-rule=\\"evenodd\\"></use></svg></span></button></div>
427
427
  </div>
428
428
  </div>
@@ -438,7 +438,7 @@ exports[`Buttons should render examples: Buttons 4`] = `
438
438
  <div>success</div>
439
439
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-success MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
440
440
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
441
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
441
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
442
442
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-success MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
443
443
  </div>
444
444
  </div>
@@ -447,7 +447,7 @@ exports[`Buttons should render examples: Buttons 4`] = `
447
447
  <div>error</div>
448
448
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-error MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
449
449
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
450
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
450
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
451
451
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-error MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
452
452
  </div>
453
453
  </div>
@@ -456,7 +456,7 @@ exports[`Buttons should render examples: Buttons 4`] = `
456
456
  <div>warning</div>
457
457
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-warning MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
458
458
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
459
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
459
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
460
460
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-warning MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
461
461
  </div>
462
462
  </div>
@@ -465,7 +465,7 @@ exports[`Buttons should render examples: Buttons 4`] = `
465
465
  <div>info</div>
466
466
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-info MuiButton-containedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
467
467
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
468
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
468
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info ghost MuiButton-outlinedPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
469
469
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-info MuiButton-textPrimary MuiButton-disableElevation\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiButton-label\\">text</span></button></div>
470
470
  </div>
471
471
  </div>
@@ -481,7 +481,7 @@ exports[`Buttons should render examples: Buttons 5`] = `
481
481
  <div>success</div>
482
482
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-success MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
483
483
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
484
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
484
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
485
485
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-success MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text</span></button></div>
486
486
  </div>
487
487
  </div>
@@ -490,7 +490,7 @@ exports[`Buttons should render examples: Buttons 5`] = `
490
490
  <div>error</div>
491
491
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-error MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
492
492
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
493
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
493
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
494
494
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-error MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text</span></button></div>
495
495
  </div>
496
496
  </div>
@@ -499,7 +499,7 @@ exports[`Buttons should render examples: Buttons 5`] = `
499
499
  <div>warning</div>
500
500
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-warning MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
501
501
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
502
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
502
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
503
503
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-warning MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text</span></button></div>
504
504
  </div>
505
505
  </div>
@@ -508,7 +508,7 @@ exports[`Buttons should render examples: Buttons 5`] = `
508
508
  <div>info</div>
509
509
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-info MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary</span></button></div>
510
510
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary</span></button></div>
511
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
511
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost</span></button></div>
512
512
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-info MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text</span></button></div>
513
513
  </div>
514
514
  </div>
@@ -524,7 +524,7 @@ exports[`Buttons should render examples: Buttons 6`] = `
524
524
  <div>success</div>
525
525
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-success MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
526
526
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
527
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
527
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-success ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
528
528
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-success MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
529
529
  </div>
530
530
  </div>
@@ -533,7 +533,7 @@ exports[`Buttons should render examples: Buttons 6`] = `
533
533
  <div>error</div>
534
534
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-error MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
535
535
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
536
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
536
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-error ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
537
537
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-error MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
538
538
  </div>
539
539
  </div>
@@ -542,7 +542,7 @@ exports[`Buttons should render examples: Buttons 6`] = `
542
542
  <div>warning</div>
543
543
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-warning MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
544
544
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
545
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
545
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-warning ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
546
546
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-warning MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
547
547
  </div>
548
548
  </div>
@@ -551,7 +551,7 @@ exports[`Buttons should render examples: Buttons 6`] = `
551
551
  <div>info</div>
552
552
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-contained customColor-info MuiButton-containedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">primary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
553
553
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">secondary<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
554
- <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
554
+ <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-outlined customColor-info ghost MuiButton-outlinedPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">ghost<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
555
555
  <div><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text customColor-info MuiButton-textPrimary MuiButton-disableElevation Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiButton-label\\">text<span class=\\"MuiButton-endIcon MuiButton-iconSizeMedium\\"><svg viewBox=\\"0 0 32 32\\" class=\\"styles__icon___23x3R styles__icon--spin___ybfC1\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\" role=\\"progressbar\\" aria-busy=\\"true\\"><path opacity=\\"0.25\\" d=\\"M16 0a16 16 0 000 32 16 16 0 000-32m0 4a12 12 0 010 24 12 12 0 010-24\\"></path><path d=\\"M16 0a16 16 0 0116 16h-4A12 12 0 0016 4z\\"></path></svg></span></span></button></div>
556
556
  </div>
557
557
  </div>
package/transpiled/react/Buttons/index.js CHANGED
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
4
  var _excluded = ["className", "color", "label", "busy", "disabled", "endIcon"],
5
- _excluded2 = ["variant"];
5
+ _excluded2 = ["variant", "className"];
6
6
  import React, { forwardRef } from 'react';
7
7
  import PropTypes from 'prop-types';
8
8
  import cx from 'classnames';
@@ -39,12 +39,14 @@ DefaultButton.defaultProps = {
39
39
  };
40
40
  var Buttons = /*#__PURE__*/forwardRef(function (_ref2, ref) {
41
41
  var variant = _ref2.variant,
42
+ _ref2$className = _ref2.className,
43
+ className = _ref2$className === void 0 ? '' : _ref2$className,
42
44
  props = _objectWithoutProperties(_ref2, _excluded2);
43
45
 
44
46
  switch (variant) {
45
47
  case 'ghost':
46
48
  return /*#__PURE__*/React.createElement(DefaultButton, _extends({
47
- className: "ghost",
49
+ className: "ghost ".concat(className),
48
50
  variant: "outlined"
49
51
  }, props, {
50
52
  ref: ref
@@ -52,25 +54,31 @@ var Buttons = /*#__PURE__*/forwardRef(function (_ref2, ref) {
52
54
 
53
55
  case 'secondary':
54
56
  return /*#__PURE__*/React.createElement(DefaultButton, _extends({
55
- variant: "outlined"
57
+ variant: "outlined",
58
+ className: className
56
59
  }, props, {
57
60
  ref: ref
58
61
  }));
59
62
 
60
63
  case 'text':
61
64
  return /*#__PURE__*/React.createElement(DefaultButton, _extends({
62
- variant: "text"
65
+ variant: "text",
66
+ className: className
63
67
  }, props, {
64
68
  ref: ref
65
69
  }));
66
70
 
67
71
  case 'primary':
68
- return /*#__PURE__*/React.createElement(DefaultButton, _extends({}, props, {
72
+ return /*#__PURE__*/React.createElement(DefaultButton, _extends({
73
+ className: className
74
+ }, props, {
69
75
  ref: ref
70
76
  }));
71
77
 
72
78
  default:
73
- return /*#__PURE__*/React.createElement(DefaultButton, _extends({}, props, {
79
+ return /*#__PURE__*/React.createElement(DefaultButton, _extends({
80
+ className: className
81
+ }, props, {
74
82
  ref: ref
75
83
  }));
76
84
  }