@bolio-ui/core 1.0.6 → 1.0.8

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 (102) hide show
  1. package/dist/Avatar/index.js +38 -37
  2. package/dist/Badge/index.js +40 -39
  3. package/dist/BolioUIProvider/index.js +44 -43
  4. package/dist/Breadcrumbs/index.js +37 -36
  5. package/dist/Button/index.js +44 -43
  6. package/dist/ButtonDropdown/index.js +90 -78
  7. package/dist/ButtonDropdown/styles.d.ts +1 -0
  8. package/dist/ButtonGroup/index.js +38 -35
  9. package/dist/Capacity/index.js +33 -32
  10. package/dist/Card/Card.d.ts +1 -0
  11. package/dist/Card/index.js +69 -58
  12. package/dist/Checkbox/index.js +194 -175
  13. package/dist/Code/index.js +33 -32
  14. package/dist/Collapse/index.js +33 -32
  15. package/dist/Container/index.js +29 -29
  16. package/dist/CssBaseline/index.js +29 -29
  17. package/dist/Description/index.js +33 -32
  18. package/dist/Display/index.js +33 -32
  19. package/dist/Divider/index.js +33 -32
  20. package/dist/Dot/Dot.d.ts +1 -0
  21. package/dist/Dot/index.js +43 -40
  22. package/dist/Drawer/index.js +33 -32
  23. package/dist/Fieldset/index.js +33 -32
  24. package/dist/Grid/index.js +33 -32
  25. package/dist/Image/index.js +33 -32
  26. package/dist/Input/InputProps.d.ts +1 -0
  27. package/dist/Input/index.js +83 -72
  28. package/dist/Input/styles.d.ts +2 -0
  29. package/dist/Keyboard/index.js +33 -32
  30. package/dist/Link/index.js +33 -32
  31. package/dist/Loading/index.js +33 -32
  32. package/dist/MdxWidgets/index.js +29 -29
  33. package/dist/Modal/index.js +44 -43
  34. package/dist/Note/index.js +33 -32
  35. package/dist/Page/index.js +33 -32
  36. package/dist/Pagination/index.js +33 -32
  37. package/dist/Popover/index.js +33 -32
  38. package/dist/Progress/index.js +33 -32
  39. package/dist/Radio/index.js +33 -32
  40. package/dist/Rating/index.js +33 -32
  41. package/dist/Row/index.js +29 -29
  42. package/dist/Section/index.js +33 -32
  43. package/dist/Select/index.js +99 -96
  44. package/dist/Select/styles.d.ts +5 -4
  45. package/dist/Slider/index.js +33 -32
  46. package/dist/Snippet/index.js +33 -32
  47. package/dist/Spacer/index.js +33 -32
  48. package/dist/Spinner/index.js +33 -32
  49. package/dist/Table/index.js +33 -32
  50. package/dist/Tabs/index.js +36 -35
  51. package/dist/Tag/index.js +33 -32
  52. package/dist/Text/index.js +33 -32
  53. package/dist/Textarea/index.js +68 -57
  54. package/dist/Themes/index.js +29 -29
  55. package/dist/Toggle/index.js +40 -39
  56. package/dist/Tooltip/index.js +33 -32
  57. package/dist/index.js +333 -277
  58. package/dist/use-all-themes/index.js +29 -29
  59. package/dist/use-media-query/index.js +29 -29
  60. package/dist/use-scale/index.js +33 -32
  61. package/dist/use-theme/index.js +29 -29
  62. package/esm/Avatar/Avatar.js +5 -5
  63. package/esm/Badge/Badge.js +7 -7
  64. package/esm/Badge/stories.js +1 -1
  65. package/esm/Breadcrumbs/Breadcrumbs.js +4 -4
  66. package/esm/Button/Button.js +3 -3
  67. package/esm/Button/styles.js +8 -8
  68. package/esm/ButtonDropdown/ButtonDropdown.js +13 -13
  69. package/esm/ButtonDropdown/ButtonDropdownItem.js +3 -3
  70. package/esm/ButtonDropdown/Icon.js +1 -1
  71. package/esm/ButtonDropdown/styles.d.ts +1 -0
  72. package/esm/ButtonDropdown/styles.js +40 -29
  73. package/esm/ButtonGroup/ButtonGroup.js +5 -3
  74. package/esm/Capacity/stories.js +40 -10
  75. package/esm/Card/Card.d.ts +1 -0
  76. package/esm/Card/Card.js +8 -7
  77. package/esm/Card/stories.js +56 -7
  78. package/esm/Card/styles.js +28 -19
  79. package/esm/Checkbox/Checkbox.js +6 -6
  80. package/esm/Checkbox/CheckboxIcon.js +34 -16
  81. package/esm/Dot/Dot.d.ts +1 -0
  82. package/esm/Dot/Dot.js +10 -8
  83. package/esm/Input/Input.js +15 -15
  84. package/esm/Input/InputProps.d.ts +1 -0
  85. package/esm/Input/styles.d.ts +2 -0
  86. package/esm/Input/styles.js +28 -14
  87. package/esm/Select/Select.js +10 -15
  88. package/esm/Select/SelectDropdown.js +4 -4
  89. package/esm/Select/SelectIconClear.js +7 -7
  90. package/esm/Select/SelectMultipleValue.js +4 -4
  91. package/esm/Select/SelectOption.js +6 -6
  92. package/esm/Select/styles.d.ts +5 -4
  93. package/esm/Select/styles.js +35 -28
  94. package/esm/Tabs/TabsItem.js +3 -3
  95. package/esm/Textarea/Textarea.js +7 -11
  96. package/esm/Themes/Presets/Dark.js +16 -16
  97. package/esm/Themes/Presets/Default.js +12 -12
  98. package/esm/Themes/Presets/Shared.js +1 -1
  99. package/esm/Toggle/Toggle.js +7 -7
  100. package/esm/use-scale/utils.js +4 -3
  101. package/examples/create-redwoodjs/.redwood/README.md +44 -0
  102. package/package.json +19 -19
package/dist/use-all-themes/index.js CHANGED
@@ -98,7 +98,7 @@ var defaultLayout = {
98
98
  pageWidthWithMargin: '930pt',
99
99
  breakpointMobile: defaultBreakpoints.xs.max,
100
100
  breakpointTablet: defaultBreakpoints.sm.max,
101
- radius: '6px',
101
+ radius: '10px',
102
102
  unit: '16px'
103
103
  };
104
104
 
@@ -113,32 +113,32 @@ var palette$1 = {
113
113
  accents_6: '#444',
114
114
  accents_7: '#333',
115
115
  accents_8: '#111',
116
- selection: '#cee4fe',
116
+ selection: 'rgba(206,228,254, 0.5)',
117
117
  code: '#C25FFF',
118
- border: '#999',
118
+ border: '#eaeaea',
119
119
  primary: '#0072F6',
120
- primaryLight: '#96C1F3',
121
- primaryLighter: '#CEE4FF',
120
+ primaryLight: '#CEE4FF',
121
+ primaryLighter: '#96C1F3',
122
122
  primaryDark: '#00254E',
123
123
  secondary: '#7828C9',
124
- secondaryLighter: '#D1B1F1',
125
124
  secondaryLight: '#EADCF9',
125
+ secondaryLighter: '#D1B1F1',
126
126
  secondaryDark: '#290E45',
127
127
  error: '#F31261',
128
- errorLight: '#FAA8C6',
129
- errorLighter: '#FDD8E6',
128
+ errorLight: '#FDD8E6',
129
+ errorLighter: '#FAA8C6',
130
130
  errorDark: '#4E041F',
131
131
  success: '#17C965',
132
- successLight: '#ADF5CD',
133
- successLighter: '#DAFBE9',
132
+ successLight: '#DAFBE9',
133
+ successLighter: '#ADF5CD',
134
134
  successDark: '#06371C',
135
135
  warning: '#F5A525',
136
- warningLight: '#FBDBA8',
137
- warningLighter: '#FDEFD9',
136
+ warningLight: '#FDEFD9',
137
+ warningLighter: '#FBDBA8',
138
138
  warningDark: '#4E3105',
139
139
  info: '#06B7DC',
140
- infoLighter: '#A5EEFE',
141
140
  infoLight: '#D7F8FF',
141
+ infoLighter: '#A5EEFE',
142
142
  infoDark: '#053B49',
143
143
  purple: '#f81ce5',
144
144
  alert: '#ff0080',
@@ -180,37 +180,37 @@ var palette = {
180
180
  accents_6: '#999',
181
181
  accents_7: '#eaeaea',
182
182
  accents_8: '#fafafa',
183
- selection: '#f81ce5',
183
+ selection: 'rgba(248,28,229, 0.5)',
184
184
  code: '#C25FFF',
185
- border: '#444',
185
+ border: '#333',
186
186
  primary: '#0072F6',
187
- primaryLight: '#96C1F3',
188
- primaryLighter: '#CEE4FF',
187
+ primaryLight: '#CEE4FF',
188
+ primaryLighter: '#96C1F3',
189
189
  primaryDark: '#00254E',
190
190
  secondary: '#7828C9',
191
- secondaryLighter: '#D1B1F1',
192
191
  secondaryLight: '#EADCF9',
192
+ secondaryLighter: '#D1B1F1',
193
193
  secondaryDark: '#290E45',
194
194
  error: '#F31261',
195
- errorLight: '#FAA8C6',
196
- errorLighter: '#FDD8E6',
195
+ errorLight: '#FDD8E6',
196
+ errorLighter: '#FAA8C6',
197
197
  errorDark: '#4E041F',
198
198
  success: '#17C965',
199
- successLight: '#ADF5CD',
200
- successLighter: '#DAFBE9',
199
+ successLight: '#DAFBE9',
200
+ successLighter: '#ADF5CD',
201
201
  successDark: '#06371C',
202
202
  warning: '#F5A525',
203
- warningLight: '#FBDBA8',
204
- warningLighter: '#FDEFD9',
203
+ warningLight: '#FDEFD9',
204
+ warningLighter: '#FBDBA8',
205
205
  warningDark: '#4E3105',
206
206
  info: '#06B7DC',
207
- infoLighter: '#A5EEFE',
208
207
  infoLight: '#D7F8FF',
208
+ infoLighter: '#A5EEFE',
209
209
  infoDark: '#053B49',
210
210
  purple: '#f81ce5',
211
211
  alert: '#ff0080',
212
212
  link: '#3291ff',
213
- pre: '#363450'
213
+ pre: '#111'
214
214
  };
215
215
  var expressiveness = {
216
216
  linkStyle: 'none',
@@ -218,9 +218,9 @@ var expressiveness = {
218
218
  dropdownBoxShadow: '0 0 0 1px #333',
219
219
  scrollerStart: 'rgba(255, 255, 255, 1)',
220
220
  scrollerEnd: 'rgba(255, 255, 255, 0)',
221
- shadowSmall: '0 0 0 1px #333',
222
- shadowMedium: '0 0 0 1px #333',
223
- shadowLarge: '0 0 0 1px #333',
221
+ shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
222
+ shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
223
+ shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
224
224
  portalOpacity: 0.75
225
225
  };
226
226
  var font = defaultFont;
package/dist/use-media-query/index.js CHANGED
@@ -157,7 +157,7 @@ var defaultLayout = {
157
157
  pageWidthWithMargin: '930pt',
158
158
  breakpointMobile: defaultBreakpoints.xs.max,
159
159
  breakpointTablet: defaultBreakpoints.sm.max,
160
- radius: '6px',
160
+ radius: '10px',
161
161
  unit: '16px'
162
162
  };
163
163
 
@@ -172,32 +172,32 @@ var palette$1 = {
172
172
  accents_6: '#444',
173
173
  accents_7: '#333',
174
174
  accents_8: '#111',
175
- selection: '#cee4fe',
175
+ selection: 'rgba(206,228,254, 0.5)',
176
176
  code: '#C25FFF',
177
- border: '#999',
177
+ border: '#eaeaea',
178
178
  primary: '#0072F6',
179
- primaryLight: '#96C1F3',
180
- primaryLighter: '#CEE4FF',
179
+ primaryLight: '#CEE4FF',
180
+ primaryLighter: '#96C1F3',
181
181
  primaryDark: '#00254E',
182
182
  secondary: '#7828C9',
183
- secondaryLighter: '#D1B1F1',
184
183
  secondaryLight: '#EADCF9',
184
+ secondaryLighter: '#D1B1F1',
185
185
  secondaryDark: '#290E45',
186
186
  error: '#F31261',
187
- errorLight: '#FAA8C6',
188
- errorLighter: '#FDD8E6',
187
+ errorLight: '#FDD8E6',
188
+ errorLighter: '#FAA8C6',
189
189
  errorDark: '#4E041F',
190
190
  success: '#17C965',
191
- successLight: '#ADF5CD',
192
- successLighter: '#DAFBE9',
191
+ successLight: '#DAFBE9',
192
+ successLighter: '#ADF5CD',
193
193
  successDark: '#06371C',
194
194
  warning: '#F5A525',
195
- warningLight: '#FBDBA8',
196
- warningLighter: '#FDEFD9',
195
+ warningLight: '#FDEFD9',
196
+ warningLighter: '#FBDBA8',
197
197
  warningDark: '#4E3105',
198
198
  info: '#06B7DC',
199
- infoLighter: '#A5EEFE',
200
199
  infoLight: '#D7F8FF',
200
+ infoLighter: '#A5EEFE',
201
201
  infoDark: '#053B49',
202
202
  purple: '#f81ce5',
203
203
  alert: '#ff0080',
@@ -239,37 +239,37 @@ var palette = {
239
239
  accents_6: '#999',
240
240
  accents_7: '#eaeaea',
241
241
  accents_8: '#fafafa',
242
- selection: '#f81ce5',
242
+ selection: 'rgba(248,28,229, 0.5)',
243
243
  code: '#C25FFF',
244
- border: '#444',
244
+ border: '#333',
245
245
  primary: '#0072F6',
246
- primaryLight: '#96C1F3',
247
- primaryLighter: '#CEE4FF',
246
+ primaryLight: '#CEE4FF',
247
+ primaryLighter: '#96C1F3',
248
248
  primaryDark: '#00254E',
249
249
  secondary: '#7828C9',
250
- secondaryLighter: '#D1B1F1',
251
250
  secondaryLight: '#EADCF9',
251
+ secondaryLighter: '#D1B1F1',
252
252
  secondaryDark: '#290E45',
253
253
  error: '#F31261',
254
- errorLight: '#FAA8C6',
255
- errorLighter: '#FDD8E6',
254
+ errorLight: '#FDD8E6',
255
+ errorLighter: '#FAA8C6',
256
256
  errorDark: '#4E041F',
257
257
  success: '#17C965',
258
- successLight: '#ADF5CD',
259
- successLighter: '#DAFBE9',
258
+ successLight: '#DAFBE9',
259
+ successLighter: '#ADF5CD',
260
260
  successDark: '#06371C',
261
261
  warning: '#F5A525',
262
- warningLight: '#FBDBA8',
263
- warningLighter: '#FDEFD9',
262
+ warningLight: '#FDEFD9',
263
+ warningLighter: '#FBDBA8',
264
264
  warningDark: '#4E3105',
265
265
  info: '#06B7DC',
266
- infoLighter: '#A5EEFE',
267
266
  infoLight: '#D7F8FF',
267
+ infoLighter: '#A5EEFE',
268
268
  infoDark: '#053B49',
269
269
  purple: '#f81ce5',
270
270
  alert: '#ff0080',
271
271
  link: '#3291ff',
272
- pre: '#363450'
272
+ pre: '#111'
273
273
  };
274
274
  var expressiveness = {
275
275
  linkStyle: 'none',
@@ -277,9 +277,9 @@ var expressiveness = {
277
277
  dropdownBoxShadow: '0 0 0 1px #333',
278
278
  scrollerStart: 'rgba(255, 255, 255, 1)',
279
279
  scrollerEnd: 'rgba(255, 255, 255, 0)',
280
- shadowSmall: '0 0 0 1px #333',
281
- shadowMedium: '0 0 0 1px #333',
282
- shadowLarge: '0 0 0 1px #333',
280
+ shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
281
+ shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
282
+ shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
283
283
  portalOpacity: 0.75
284
284
  };
285
285
  var font = defaultFont;
package/dist/use-scale/index.js CHANGED
@@ -262,7 +262,7 @@ var defaultLayout = {
262
262
  pageWidthWithMargin: '930pt',
263
263
  breakpointMobile: defaultBreakpoints.xs.max,
264
264
  breakpointTablet: defaultBreakpoints.sm.max,
265
- radius: '6px',
265
+ radius: '10px',
266
266
  unit: '16px'
267
267
  };
268
268
 
@@ -277,32 +277,32 @@ var palette$1 = {
277
277
  accents_6: '#444',
278
278
  accents_7: '#333',
279
279
  accents_8: '#111',
280
- selection: '#cee4fe',
280
+ selection: 'rgba(206,228,254, 0.5)',
281
281
  code: '#C25FFF',
282
- border: '#999',
282
+ border: '#eaeaea',
283
283
  primary: '#0072F6',
284
- primaryLight: '#96C1F3',
285
- primaryLighter: '#CEE4FF',
284
+ primaryLight: '#CEE4FF',
285
+ primaryLighter: '#96C1F3',
286
286
  primaryDark: '#00254E',
287
287
  secondary: '#7828C9',
288
- secondaryLighter: '#D1B1F1',
289
288
  secondaryLight: '#EADCF9',
289
+ secondaryLighter: '#D1B1F1',
290
290
  secondaryDark: '#290E45',
291
291
  error: '#F31261',
292
- errorLight: '#FAA8C6',
293
- errorLighter: '#FDD8E6',
292
+ errorLight: '#FDD8E6',
293
+ errorLighter: '#FAA8C6',
294
294
  errorDark: '#4E041F',
295
295
  success: '#17C965',
296
- successLight: '#ADF5CD',
297
- successLighter: '#DAFBE9',
296
+ successLight: '#DAFBE9',
297
+ successLighter: '#ADF5CD',
298
298
  successDark: '#06371C',
299
299
  warning: '#F5A525',
300
- warningLight: '#FBDBA8',
301
- warningLighter: '#FDEFD9',
300
+ warningLight: '#FDEFD9',
301
+ warningLighter: '#FBDBA8',
302
302
  warningDark: '#4E3105',
303
303
  info: '#06B7DC',
304
- infoLighter: '#A5EEFE',
305
304
  infoLight: '#D7F8FF',
305
+ infoLighter: '#A5EEFE',
306
306
  infoDark: '#053B49',
307
307
  purple: '#f81ce5',
308
308
  alert: '#ff0080',
@@ -344,37 +344,37 @@ var palette = {
344
344
  accents_6: '#999',
345
345
  accents_7: '#eaeaea',
346
346
  accents_8: '#fafafa',
347
- selection: '#f81ce5',
347
+ selection: 'rgba(248,28,229, 0.5)',
348
348
  code: '#C25FFF',
349
- border: '#444',
349
+ border: '#333',
350
350
  primary: '#0072F6',
351
- primaryLight: '#96C1F3',
352
- primaryLighter: '#CEE4FF',
351
+ primaryLight: '#CEE4FF',
352
+ primaryLighter: '#96C1F3',
353
353
  primaryDark: '#00254E',
354
354
  secondary: '#7828C9',
355
- secondaryLighter: '#D1B1F1',
356
355
  secondaryLight: '#EADCF9',
356
+ secondaryLighter: '#D1B1F1',
357
357
  secondaryDark: '#290E45',
358
358
  error: '#F31261',
359
- errorLight: '#FAA8C6',
360
- errorLighter: '#FDD8E6',
359
+ errorLight: '#FDD8E6',
360
+ errorLighter: '#FAA8C6',
361
361
  errorDark: '#4E041F',
362
362
  success: '#17C965',
363
- successLight: '#ADF5CD',
364
- successLighter: '#DAFBE9',
363
+ successLight: '#DAFBE9',
364
+ successLighter: '#ADF5CD',
365
365
  successDark: '#06371C',
366
366
  warning: '#F5A525',
367
- warningLight: '#FBDBA8',
368
- warningLighter: '#FDEFD9',
367
+ warningLight: '#FDEFD9',
368
+ warningLighter: '#FBDBA8',
369
369
  warningDark: '#4E3105',
370
370
  info: '#06B7DC',
371
- infoLighter: '#A5EEFE',
372
371
  infoLight: '#D7F8FF',
372
+ infoLighter: '#A5EEFE',
373
373
  infoDark: '#053B49',
374
374
  purple: '#f81ce5',
375
375
  alert: '#ff0080',
376
376
  link: '#3291ff',
377
- pre: '#363450'
377
+ pre: '#111'
378
378
  };
379
379
  var expressiveness = {
380
380
  linkStyle: 'none',
@@ -382,9 +382,9 @@ var expressiveness = {
382
382
  dropdownBoxShadow: '0 0 0 1px #333',
383
383
  scrollerStart: 'rgba(255, 255, 255, 1)',
384
384
  scrollerEnd: 'rgba(255, 255, 255, 0)',
385
- shadowSmall: '0 0 0 1px #333',
386
- shadowMedium: '0 0 0 1px #333',
387
- shadowLarge: '0 0 0 1px #333',
385
+ shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
386
+ shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
387
+ shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
388
388
  portalOpacity: 0.75
389
389
  };
390
390
  var font = defaultFont;
@@ -537,9 +537,10 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
537
537
  for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
538
538
  var key = _step2.value;
539
539
  var value = props[key];
540
- console.log('🚀 ~ file: utils.ts:32 ~ value:', value); // if (typeof value !== 'undefined') {
541
- // scaleProps[key as keyof ScaleProps] = value as any
542
- // }
540
+
541
+ if (typeof value !== 'undefined') {
542
+ scaleProps[key] = value;
543
+ }
543
544
  }
544
545
  } catch (err) {
545
546
  _iterator2.e(err);
package/dist/use-theme/index.js CHANGED
@@ -98,7 +98,7 @@ var defaultLayout = {
98
98
  pageWidthWithMargin: '930pt',
99
99
  breakpointMobile: defaultBreakpoints.xs.max,
100
100
  breakpointTablet: defaultBreakpoints.sm.max,
101
- radius: '6px',
101
+ radius: '10px',
102
102
  unit: '16px'
103
103
  };
104
104
 
@@ -113,32 +113,32 @@ var palette$1 = {
113
113
  accents_6: '#444',
114
114
  accents_7: '#333',
115
115
  accents_8: '#111',
116
- selection: '#cee4fe',
116
+ selection: 'rgba(206,228,254, 0.5)',
117
117
  code: '#C25FFF',
118
- border: '#999',
118
+ border: '#eaeaea',
119
119
  primary: '#0072F6',
120
- primaryLight: '#96C1F3',
121
- primaryLighter: '#CEE4FF',
120
+ primaryLight: '#CEE4FF',
121
+ primaryLighter: '#96C1F3',
122
122
  primaryDark: '#00254E',
123
123
  secondary: '#7828C9',
124
- secondaryLighter: '#D1B1F1',
125
124
  secondaryLight: '#EADCF9',
125
+ secondaryLighter: '#D1B1F1',
126
126
  secondaryDark: '#290E45',
127
127
  error: '#F31261',
128
- errorLight: '#FAA8C6',
129
- errorLighter: '#FDD8E6',
128
+ errorLight: '#FDD8E6',
129
+ errorLighter: '#FAA8C6',
130
130
  errorDark: '#4E041F',
131
131
  success: '#17C965',
132
- successLight: '#ADF5CD',
133
- successLighter: '#DAFBE9',
132
+ successLight: '#DAFBE9',
133
+ successLighter: '#ADF5CD',
134
134
  successDark: '#06371C',
135
135
  warning: '#F5A525',
136
- warningLight: '#FBDBA8',
137
- warningLighter: '#FDEFD9',
136
+ warningLight: '#FDEFD9',
137
+ warningLighter: '#FBDBA8',
138
138
  warningDark: '#4E3105',
139
139
  info: '#06B7DC',
140
- infoLighter: '#A5EEFE',
141
140
  infoLight: '#D7F8FF',
141
+ infoLighter: '#A5EEFE',
142
142
  infoDark: '#053B49',
143
143
  purple: '#f81ce5',
144
144
  alert: '#ff0080',
@@ -180,37 +180,37 @@ var palette = {
180
180
  accents_6: '#999',
181
181
  accents_7: '#eaeaea',
182
182
  accents_8: '#fafafa',
183
- selection: '#f81ce5',
183
+ selection: 'rgba(248,28,229, 0.5)',
184
184
  code: '#C25FFF',
185
- border: '#444',
185
+ border: '#333',
186
186
  primary: '#0072F6',
187
- primaryLight: '#96C1F3',
188
- primaryLighter: '#CEE4FF',
187
+ primaryLight: '#CEE4FF',
188
+ primaryLighter: '#96C1F3',
189
189
  primaryDark: '#00254E',
190
190
  secondary: '#7828C9',
191
- secondaryLighter: '#D1B1F1',
192
191
  secondaryLight: '#EADCF9',
192
+ secondaryLighter: '#D1B1F1',
193
193
  secondaryDark: '#290E45',
194
194
  error: '#F31261',
195
- errorLight: '#FAA8C6',
196
- errorLighter: '#FDD8E6',
195
+ errorLight: '#FDD8E6',
196
+ errorLighter: '#FAA8C6',
197
197
  errorDark: '#4E041F',
198
198
  success: '#17C965',
199
- successLight: '#ADF5CD',
200
- successLighter: '#DAFBE9',
199
+ successLight: '#DAFBE9',
200
+ successLighter: '#ADF5CD',
201
201
  successDark: '#06371C',
202
202
  warning: '#F5A525',
203
- warningLight: '#FBDBA8',
204
- warningLighter: '#FDEFD9',
203
+ warningLight: '#FDEFD9',
204
+ warningLighter: '#FBDBA8',
205
205
  warningDark: '#4E3105',
206
206
  info: '#06B7DC',
207
- infoLighter: '#A5EEFE',
208
207
  infoLight: '#D7F8FF',
208
+ infoLighter: '#A5EEFE',
209
209
  infoDark: '#053B49',
210
210
  purple: '#f81ce5',
211
211
  alert: '#ff0080',
212
212
  link: '#3291ff',
213
- pre: '#363450'
213
+ pre: '#111'
214
214
  };
215
215
  var expressiveness = {
216
216
  linkStyle: 'none',
@@ -218,9 +218,9 @@ var expressiveness = {
218
218
  dropdownBoxShadow: '0 0 0 1px #333',
219
219
  scrollerStart: 'rgba(255, 255, 255, 1)',
220
220
  scrollerEnd: 'rgba(255, 255, 255, 0)',
221
- shadowSmall: '0 0 0 1px #333',
222
- shadowMedium: '0 0 0 1px #333',
223
- shadowLarge: '0 0 0 1px #333',
221
+ shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
222
+ shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
223
+ shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
224
224
  portalOpacity: 0.75
225
225
  };
226
226
  var font = defaultFont;
package/esm/Avatar/Avatar.js CHANGED
@@ -79,7 +79,7 @@ function AvatarComponent(_ref) {
79
79
  };
80
80
  }, [loading, showAnimation]);
81
81
  return /*#__PURE__*/React.createElement("span", {
82
- className: _JSXStyle.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || "")
82
+ className: _JSXStyle.dynamic([["2828293809", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || "")
83
83
  }, !showText && /*#__PURE__*/React.createElement(React.Fragment, null, showSkeleton && showAnimation && /*#__PURE__*/React.createElement(AvatarSkeleton, {
84
84
  opacity: loading ? 1 : 0
85
85
  }), /*#__PURE__*/React.createElement("img", _extends({
@@ -89,13 +89,13 @@ function AvatarComponent(_ref) {
89
89
  onLoad: imageLoaded,
90
90
  draggable: false
91
91
  }, props, {
92
- className: _JSXStyle.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
92
+ className: _JSXStyle.dynamic([["2828293809", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
93
93
  }))), showText && /*#__PURE__*/React.createElement("span", _extends({}, props, {
94
- className: _JSXStyle.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
94
+ className: _JSXStyle.dynamic([["2828293809", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
95
95
  }), safeText(text)), /*#__PURE__*/React.createElement(_JSXStyle, {
96
- id: "2739790524",
96
+ id: "2828293809",
97
97
  dynamic: [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]
98
- }, ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border-radius:".concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.accents_2, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
98
+ }, ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border-radius:".concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.accents_2, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";font-weight:bold;text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-transform:none;}")));
99
99
  }
100
100
 
101
101
  AvatarComponent.displayName = 'BolioUIAvatar';
package/esm/Badge/Badge.js CHANGED
@@ -9,7 +9,7 @@ import useClasses from '../use-classes';
9
9
 
10
10
  var getBgColor = function getBgColor(type, palette) {
11
11
  var colors = {
12
- "default": palette.foreground,
12
+ "default": palette.accents_2,
13
13
  secondary: palette.secondary,
14
14
  primary: palette.primary,
15
15
  success: palette.success,
@@ -39,18 +39,18 @@ function BadgeComponent(_ref) {
39
39
  return getBgColor(type, theme.palette);
40
40
  }, [type, theme.palette]);
41
41
  var color = useMemo(function () {
42
- if (!type || type === 'default') return theme.palette.background;
43
- return 'white';
44
- }, [type, theme.palette.background]);
42
+ if (!type || type === 'default') return theme.palette.foreground;
43
+ return '#FFFFFF';
44
+ }, [type, theme.palette.foreground]);
45
45
  var classes = useClasses('badge', {
46
46
  dot: dot
47
47
  }, className);
48
48
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
49
- className: _JSXStyle.dynamic([["3372370275", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
49
+ className: _JSXStyle.dynamic([["2850533964", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
50
50
  }), !dot && children, /*#__PURE__*/React.createElement(_JSXStyle, {
51
- id: "3372370275",
51
+ id: "2850533964",
52
52
  dynamic: [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
53
- }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";font-weight:500;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.5), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
53
+ }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";font-weight:bold;text-transform:none;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.5), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
54
54
  }
55
55
 
56
56
  BadgeComponent.displayName = 'BolioUIBadge';
package/esm/Badge/stories.js CHANGED
@@ -36,7 +36,7 @@ export var CustomColor = function CustomColor() {
36
36
  gap: 2
37
37
  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
38
38
  style: {
39
- backgroundColor: theme.palette.successLight
39
+ backgroundColor: theme.palette.successDark
40
40
  }
41
41
  }, "Success Light")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Badge, {
42
42
  style: {
package/esm/Breadcrumbs/Breadcrumbs.js CHANGED
@@ -35,11 +35,11 @@ function BreadcrumbsComponent(_ref) {
35
35
  return item;
36
36
  });
37
37
  return /*#__PURE__*/React.createElement("nav", {
38
- className: _JSXStyle.dynamic([["2655258916", [theme.palette.accents_4, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme.palette.accents_6]]]) + " " + (className || "")
38
+ className: _JSXStyle.dynamic([["3435904432", [theme.palette.accents_5, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme.palette.accents_7]]]) + " " + (className || "")
39
39
  }, withSeparatorChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
40
- id: "2655258916",
41
- dynamic: [theme.palette.accents_4, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme.palette.accents_6]
42
- }, "nav.__jsx-style-dynamic-selector{line-height:inherit;color:".concat(theme.palette.accents_4, ";box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}nav.__jsx-style-dynamic-selector .link:hover{color:").concat(hoverColor, ";}nav.__jsx-style-dynamic-selector>span:last-of-type{color:").concat(theme.palette.accents_6, ";}nav.__jsx-style-dynamic-selector>.separator:last-child{display:none;}nav.__jsx-style-dynamic-selector svg{width:1em;height:1em;margin:0 4px;}nav.__jsx-style-dynamic-selector .breadcrumbs-item{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")));
40
+ id: "3435904432",
41
+ dynamic: [theme.palette.accents_5, SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverColor, theme.palette.accents_7]
42
+ }, "nav.__jsx-style-dynamic-selector{line-height:inherit;color:".concat(theme.palette.accents_5, ";box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}nav.__jsx-style-dynamic-selector .link:hover{color:").concat(hoverColor, ";}nav.__jsx-style-dynamic-selector>span:last-of-type{color:").concat(theme.palette.accents_7, ";}nav.__jsx-style-dynamic-selector>.separator:last-child{display:none;}nav.__jsx-style-dynamic-selector svg{width:1em;height:1em;margin:0 4px;}nav.__jsx-style-dynamic-selector .breadcrumbs-item{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}")));
43
43
  }
44
44
 
45
45
  BreadcrumbsComponent.displayName = 'BolioUIBreadcrumbs';
package/esm/Button/Button.js CHANGED
@@ -127,7 +127,7 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
127
127
  disabled: disabled,
128
128
  onClick: clickHandler
129
129
  }, props, {
130
- className: _JSXStyle.dynamic([["3337261033", [rounded ? '25px' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? '0 4px 10px 0' + bg : 'none', SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
130
+ className: _JSXStyle.dynamic([["1204671885", [rounded ? '25px' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? '0 4px 10px 0' + bg : 'none', SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
131
131
  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
132
132
  color: color
133
133
  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
@@ -136,9 +136,9 @@ var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
136
136
  color: dripColor,
137
137
  onCompleted: dripCompletedHandle
138
138
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
139
- id: "3337261033",
139
+ id: "1204671885",
140
140
  dynamic: [rounded ? '25px' : theme.layout.radius, SCALES.font(0.875), color, bg, border, cursor, events, shadow ? '0 4px 10px 0' + bg : 'none', SCALES.pl(0.75), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events]
141
- }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";font-weight:500;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? '0 4px 10px 0' + bg : 'none', ";--bolio-ui-button-icon-padding:").concat(SCALES.pl(0.75), ";--bolio-ui-button-height:").concat(SCALES.height(2.5), ";--bolio-ui-button-color:").concat(color, ";--bolio-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--bolio-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";}.btn.__jsx-style-dynamic-selector:active{-webkit-transform:scale(0.98,0.98);-ms-transform:scale(0.98,0.98);transform:scale(0.98,0.98);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
141
+ }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:inline-block;border-radius:".concat(rounded ? '25px' : theme.layout.radius, ";font-weight:bold;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? '0 4px 10px 0' + bg : 'none', ";--bolio-ui-button-icon-padding:").concat(SCALES.pl(0.75), ";--bolio-ui-button-height:").concat(SCALES.height(2.5), ";--bolio-ui-button-color:").concat(color, ";--bolio-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{cursor:").concat(cursor, ";pointer-events:").concat(events, ";}.btn.__jsx-style-dynamic-selector:active{-webkit-transform:scale(0.98,0.98);-ms-transform:scale(0.98,0.98);transform:scale(0.98,0.98);}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}")));
142
142
  });
143
143
  ButtonComponent.defaultProps = defaultProps;
144
144
  ButtonComponent.displayName = 'BolioUIButton';