@bolio-ui/core 1.0.7 → 1.0.9

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 (100) hide show
  1. package/dist/Avatar/index.js +31 -31
  2. package/dist/Badge/index.js +33 -33
  3. package/dist/BolioUIProvider/index.js +37 -37
  4. package/dist/Breadcrumbs/index.js +30 -30
  5. package/dist/Button/index.js +37 -37
  6. package/dist/ButtonDropdown/index.js +91 -80
  7. package/dist/ButtonDropdown/styles.d.ts +1 -0
  8. package/dist/ButtonGroup/index.js +31 -29
  9. package/dist/Capacity/index.js +26 -26
  10. package/dist/Card/Card.d.ts +1 -0
  11. package/dist/Card/index.js +62 -52
  12. package/dist/Checkbox/index.js +187 -169
  13. package/dist/Code/index.js +26 -26
  14. package/dist/Collapse/index.js +26 -26
  15. package/dist/Container/index.js +26 -26
  16. package/dist/CssBaseline/index.js +26 -26
  17. package/dist/Description/index.js +26 -26
  18. package/dist/Display/index.js +26 -26
  19. package/dist/Divider/index.js +26 -26
  20. package/dist/Dot/index.js +26 -26
  21. package/dist/Drawer/index.js +26 -26
  22. package/dist/Fieldset/index.js +26 -26
  23. package/dist/Grid/index.js +26 -26
  24. package/dist/Image/index.js +26 -26
  25. package/dist/Input/InputBlockLabel.d.ts +2 -1
  26. package/dist/Input/InputProps.d.ts +3 -0
  27. package/dist/Input/index.js +92 -66
  28. package/dist/Input/styles.d.ts +3 -1
  29. package/dist/Keyboard/index.js +26 -26
  30. package/dist/Link/index.js +26 -26
  31. package/dist/Loading/index.js +26 -26
  32. package/dist/MdxWidgets/index.js +26 -26
  33. package/dist/Modal/index.js +37 -37
  34. package/dist/Note/index.js +26 -26
  35. package/dist/Page/index.js +26 -26
  36. package/dist/Pagination/index.js +26 -26
  37. package/dist/Popover/index.js +26 -26
  38. package/dist/Progress/index.js +26 -26
  39. package/dist/Radio/index.js +26 -26
  40. package/dist/Rating/index.js +26 -26
  41. package/dist/Row/index.js +26 -26
  42. package/dist/Section/index.js +26 -26
  43. package/dist/Select/index.js +101 -92
  44. package/dist/Select/styles.d.ts +6 -5
  45. package/dist/Slider/index.js +26 -26
  46. package/dist/Snippet/index.js +26 -26
  47. package/dist/Spacer/index.js +26 -26
  48. package/dist/Spinner/index.js +26 -26
  49. package/dist/Table/index.js +26 -26
  50. package/dist/Tabs/index.js +29 -29
  51. package/dist/Tag/index.js +26 -26
  52. package/dist/Text/index.js +26 -26
  53. package/dist/Textarea/index.js +69 -45
  54. package/dist/Themes/index.js +26 -26
  55. package/dist/Toggle/index.js +33 -33
  56. package/dist/Tooltip/index.js +26 -26
  57. package/dist/index.js +349 -273
  58. package/dist/use-all-themes/index.js +26 -26
  59. package/dist/use-media-query/index.js +26 -26
  60. package/dist/use-scale/index.js +26 -26
  61. package/dist/use-theme/index.js +26 -26
  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 +48 -37
  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/Input/Input.js +17 -16
  82. package/esm/Input/InputBlockLabel.d.ts +2 -1
  83. package/esm/Input/InputBlockLabel.js +6 -5
  84. package/esm/Input/InputProps.d.ts +3 -0
  85. package/esm/Input/styles.d.ts +3 -1
  86. package/esm/Input/styles.js +36 -8
  87. package/esm/Select/Select.js +11 -16
  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 +6 -5
  93. package/esm/Select/styles.js +43 -29
  94. package/esm/Tabs/TabsItem.js +3 -3
  95. package/esm/Textarea/Textarea.js +7 -11
  96. package/esm/Themes/Presets/Dark.js +14 -14
  97. package/esm/Themes/Presets/Default.js +11 -11
  98. package/esm/Themes/Presets/Shared.js +1 -1
  99. package/esm/Toggle/Toggle.js +7 -7
  100. package/package.json +1 -1
@@ -226,7 +226,7 @@ var defaultLayout = {
226
226
  pageWidthWithMargin: '930pt',
227
227
  breakpointMobile: defaultBreakpoints.xs.max,
228
228
  breakpointTablet: defaultBreakpoints.sm.max,
229
- radius: '6px',
229
+ radius: '10px',
230
230
  unit: '16px'
231
231
  };
232
232
 
@@ -241,32 +241,32 @@ var palette$1 = {
241
241
  accents_6: '#444',
242
242
  accents_7: '#333',
243
243
  accents_8: '#111',
244
- selection: '#cee4fe',
244
+ selection: 'rgba(206,228,254, 0.5)',
245
245
  code: '#C25FFF',
246
246
  border: '#eaeaea',
247
247
  primary: '#0072F6',
248
- primaryLight: '#96C1F3',
249
- primaryLighter: '#CEE4FF',
248
+ primaryLight: '#CEE4FF',
249
+ primaryLighter: '#96C1F3',
250
250
  primaryDark: '#00254E',
251
251
  secondary: '#7828C9',
252
- secondaryLighter: '#D1B1F1',
253
252
  secondaryLight: '#EADCF9',
253
+ secondaryLighter: '#D1B1F1',
254
254
  secondaryDark: '#290E45',
255
255
  error: '#F31261',
256
- errorLight: '#FAA8C6',
257
- errorLighter: '#FDD8E6',
256
+ errorLight: '#FDD8E6',
257
+ errorLighter: '#FAA8C6',
258
258
  errorDark: '#4E041F',
259
259
  success: '#17C965',
260
- successLight: '#ADF5CD',
261
- successLighter: '#DAFBE9',
260
+ successLight: '#DAFBE9',
261
+ successLighter: '#ADF5CD',
262
262
  successDark: '#06371C',
263
263
  warning: '#F5A525',
264
- warningLight: '#FBDBA8',
265
- warningLighter: '#FDEFD9',
264
+ warningLight: '#FDEFD9',
265
+ warningLighter: '#FBDBA8',
266
266
  warningDark: '#4E3105',
267
267
  info: '#06B7DC',
268
- infoLighter: '#A5EEFE',
269
268
  infoLight: '#D7F8FF',
269
+ infoLighter: '#A5EEFE',
270
270
  infoDark: '#053B49',
271
271
  purple: '#f81ce5',
272
272
  alert: '#ff0080',
@@ -308,32 +308,32 @@ var palette = {
308
308
  accents_6: '#999',
309
309
  accents_7: '#eaeaea',
310
310
  accents_8: '#fafafa',
311
- selection: '#f81ce5',
311
+ selection: 'rgba(248,28,229, 0.5)',
312
312
  code: '#C25FFF',
313
313
  border: '#333',
314
314
  primary: '#0072F6',
315
- primaryLight: '#96C1F3',
316
- primaryLighter: '#CEE4FF',
315
+ primaryLight: '#CEE4FF',
316
+ primaryLighter: '#96C1F3',
317
317
  primaryDark: '#00254E',
318
318
  secondary: '#7828C9',
319
- secondaryLighter: '#D1B1F1',
320
319
  secondaryLight: '#EADCF9',
320
+ secondaryLighter: '#D1B1F1',
321
321
  secondaryDark: '#290E45',
322
322
  error: '#F31261',
323
- errorLight: '#FAA8C6',
324
- errorLighter: '#FDD8E6',
323
+ errorLight: '#FDD8E6',
324
+ errorLighter: '#FAA8C6',
325
325
  errorDark: '#4E041F',
326
326
  success: '#17C965',
327
- successLight: '#ADF5CD',
328
- successLighter: '#DAFBE9',
327
+ successLight: '#DAFBE9',
328
+ successLighter: '#ADF5CD',
329
329
  successDark: '#06371C',
330
330
  warning: '#F5A525',
331
- warningLight: '#FBDBA8',
332
- warningLighter: '#FDEFD9',
331
+ warningLight: '#FDEFD9',
332
+ warningLighter: '#FBDBA8',
333
333
  warningDark: '#4E3105',
334
334
  info: '#06B7DC',
335
- infoLighter: '#A5EEFE',
336
335
  infoLight: '#D7F8FF',
336
+ infoLighter: '#A5EEFE',
337
337
  infoDark: '#053B49',
338
338
  purple: '#f81ce5',
339
339
  alert: '#ff0080',
@@ -346,9 +346,9 @@ var expressiveness = {
346
346
  dropdownBoxShadow: '0 0 0 1px #333',
347
347
  scrollerStart: 'rgba(255, 255, 255, 1)',
348
348
  scrollerEnd: 'rgba(255, 255, 255, 0)',
349
- shadowSmall: '0 0 0 1px #333',
350
- shadowMedium: '0 0 0 1px #333',
351
- shadowLarge: '0 0 0 1px #333',
349
+ shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
350
+ shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
351
+ shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
352
352
  portalOpacity: 0.75
353
353
  };
354
354
  var font = defaultFont;
@@ -158,7 +158,7 @@ var defaultLayout = {
158
158
  pageWidthWithMargin: '930pt',
159
159
  breakpointMobile: defaultBreakpoints.xs.max,
160
160
  breakpointTablet: defaultBreakpoints.sm.max,
161
- radius: '6px',
161
+ radius: '10px',
162
162
  unit: '16px'
163
163
  };
164
164
 
@@ -173,32 +173,32 @@ var palette$1 = {
173
173
  accents_6: '#444',
174
174
  accents_7: '#333',
175
175
  accents_8: '#111',
176
- selection: '#cee4fe',
176
+ selection: 'rgba(206,228,254, 0.5)',
177
177
  code: '#C25FFF',
178
178
  border: '#eaeaea',
179
179
  primary: '#0072F6',
180
- primaryLight: '#96C1F3',
181
- primaryLighter: '#CEE4FF',
180
+ primaryLight: '#CEE4FF',
181
+ primaryLighter: '#96C1F3',
182
182
  primaryDark: '#00254E',
183
183
  secondary: '#7828C9',
184
- secondaryLighter: '#D1B1F1',
185
184
  secondaryLight: '#EADCF9',
185
+ secondaryLighter: '#D1B1F1',
186
186
  secondaryDark: '#290E45',
187
187
  error: '#F31261',
188
- errorLight: '#FAA8C6',
189
- errorLighter: '#FDD8E6',
188
+ errorLight: '#FDD8E6',
189
+ errorLighter: '#FAA8C6',
190
190
  errorDark: '#4E041F',
191
191
  success: '#17C965',
192
- successLight: '#ADF5CD',
193
- successLighter: '#DAFBE9',
192
+ successLight: '#DAFBE9',
193
+ successLighter: '#ADF5CD',
194
194
  successDark: '#06371C',
195
195
  warning: '#F5A525',
196
- warningLight: '#FBDBA8',
197
- warningLighter: '#FDEFD9',
196
+ warningLight: '#FDEFD9',
197
+ warningLighter: '#FBDBA8',
198
198
  warningDark: '#4E3105',
199
199
  info: '#06B7DC',
200
- infoLighter: '#A5EEFE',
201
200
  infoLight: '#D7F8FF',
201
+ infoLighter: '#A5EEFE',
202
202
  infoDark: '#053B49',
203
203
  purple: '#f81ce5',
204
204
  alert: '#ff0080',
@@ -240,32 +240,32 @@ var palette = {
240
240
  accents_6: '#999',
241
241
  accents_7: '#eaeaea',
242
242
  accents_8: '#fafafa',
243
- selection: '#f81ce5',
243
+ selection: 'rgba(248,28,229, 0.5)',
244
244
  code: '#C25FFF',
245
245
  border: '#333',
246
246
  primary: '#0072F6',
247
- primaryLight: '#96C1F3',
248
- primaryLighter: '#CEE4FF',
247
+ primaryLight: '#CEE4FF',
248
+ primaryLighter: '#96C1F3',
249
249
  primaryDark: '#00254E',
250
250
  secondary: '#7828C9',
251
- secondaryLighter: '#D1B1F1',
252
251
  secondaryLight: '#EADCF9',
252
+ secondaryLighter: '#D1B1F1',
253
253
  secondaryDark: '#290E45',
254
254
  error: '#F31261',
255
- errorLight: '#FAA8C6',
256
- errorLighter: '#FDD8E6',
255
+ errorLight: '#FDD8E6',
256
+ errorLighter: '#FAA8C6',
257
257
  errorDark: '#4E041F',
258
258
  success: '#17C965',
259
- successLight: '#ADF5CD',
260
- successLighter: '#DAFBE9',
259
+ successLight: '#DAFBE9',
260
+ successLighter: '#ADF5CD',
261
261
  successDark: '#06371C',
262
262
  warning: '#F5A525',
263
- warningLight: '#FBDBA8',
264
- warningLighter: '#FDEFD9',
263
+ warningLight: '#FDEFD9',
264
+ warningLighter: '#FBDBA8',
265
265
  warningDark: '#4E3105',
266
266
  info: '#06B7DC',
267
- infoLighter: '#A5EEFE',
268
267
  infoLight: '#D7F8FF',
268
+ infoLighter: '#A5EEFE',
269
269
  infoDark: '#053B49',
270
270
  purple: '#f81ce5',
271
271
  alert: '#ff0080',
@@ -278,9 +278,9 @@ var expressiveness = {
278
278
  dropdownBoxShadow: '0 0 0 1px #333',
279
279
  scrollerStart: 'rgba(255, 255, 255, 1)',
280
280
  scrollerEnd: 'rgba(255, 255, 255, 0)',
281
- shadowSmall: '0 0 0 1px #333',
282
- shadowMedium: '0 0 0 1px #333',
283
- shadowLarge: '0 0 0 1px #333',
281
+ shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
282
+ shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
283
+ shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
284
284
  portalOpacity: 0.75
285
285
  };
286
286
  var font = defaultFont;
@@ -362,7 +362,7 @@ var defaultLayout = {
362
362
  pageWidthWithMargin: '930pt',
363
363
  breakpointMobile: defaultBreakpoints.xs.max,
364
364
  breakpointTablet: defaultBreakpoints.sm.max,
365
- radius: '6px',
365
+ radius: '10px',
366
366
  unit: '16px'
367
367
  };
368
368
 
@@ -377,32 +377,32 @@ var palette$1 = {
377
377
  accents_6: '#444',
378
378
  accents_7: '#333',
379
379
  accents_8: '#111',
380
- selection: '#cee4fe',
380
+ selection: 'rgba(206,228,254, 0.5)',
381
381
  code: '#C25FFF',
382
382
  border: '#eaeaea',
383
383
  primary: '#0072F6',
384
- primaryLight: '#96C1F3',
385
- primaryLighter: '#CEE4FF',
384
+ primaryLight: '#CEE4FF',
385
+ primaryLighter: '#96C1F3',
386
386
  primaryDark: '#00254E',
387
387
  secondary: '#7828C9',
388
- secondaryLighter: '#D1B1F1',
389
388
  secondaryLight: '#EADCF9',
389
+ secondaryLighter: '#D1B1F1',
390
390
  secondaryDark: '#290E45',
391
391
  error: '#F31261',
392
- errorLight: '#FAA8C6',
393
- errorLighter: '#FDD8E6',
392
+ errorLight: '#FDD8E6',
393
+ errorLighter: '#FAA8C6',
394
394
  errorDark: '#4E041F',
395
395
  success: '#17C965',
396
- successLight: '#ADF5CD',
397
- successLighter: '#DAFBE9',
396
+ successLight: '#DAFBE9',
397
+ successLighter: '#ADF5CD',
398
398
  successDark: '#06371C',
399
399
  warning: '#F5A525',
400
- warningLight: '#FBDBA8',
401
- warningLighter: '#FDEFD9',
400
+ warningLight: '#FDEFD9',
401
+ warningLighter: '#FBDBA8',
402
402
  warningDark: '#4E3105',
403
403
  info: '#06B7DC',
404
- infoLighter: '#A5EEFE',
405
404
  infoLight: '#D7F8FF',
405
+ infoLighter: '#A5EEFE',
406
406
  infoDark: '#053B49',
407
407
  purple: '#f81ce5',
408
408
  alert: '#ff0080',
@@ -444,32 +444,32 @@ var palette = {
444
444
  accents_6: '#999',
445
445
  accents_7: '#eaeaea',
446
446
  accents_8: '#fafafa',
447
- selection: '#f81ce5',
447
+ selection: 'rgba(248,28,229, 0.5)',
448
448
  code: '#C25FFF',
449
449
  border: '#333',
450
450
  primary: '#0072F6',
451
- primaryLight: '#96C1F3',
452
- primaryLighter: '#CEE4FF',
451
+ primaryLight: '#CEE4FF',
452
+ primaryLighter: '#96C1F3',
453
453
  primaryDark: '#00254E',
454
454
  secondary: '#7828C9',
455
- secondaryLighter: '#D1B1F1',
456
455
  secondaryLight: '#EADCF9',
456
+ secondaryLighter: '#D1B1F1',
457
457
  secondaryDark: '#290E45',
458
458
  error: '#F31261',
459
- errorLight: '#FAA8C6',
460
- errorLighter: '#FDD8E6',
459
+ errorLight: '#FDD8E6',
460
+ errorLighter: '#FAA8C6',
461
461
  errorDark: '#4E041F',
462
462
  success: '#17C965',
463
- successLight: '#ADF5CD',
464
- successLighter: '#DAFBE9',
463
+ successLight: '#DAFBE9',
464
+ successLighter: '#ADF5CD',
465
465
  successDark: '#06371C',
466
466
  warning: '#F5A525',
467
- warningLight: '#FBDBA8',
468
- warningLighter: '#FDEFD9',
467
+ warningLight: '#FDEFD9',
468
+ warningLighter: '#FBDBA8',
469
469
  warningDark: '#4E3105',
470
470
  info: '#06B7DC',
471
- infoLighter: '#A5EEFE',
472
471
  infoLight: '#D7F8FF',
472
+ infoLighter: '#A5EEFE',
473
473
  infoDark: '#053B49',
474
474
  purple: '#f81ce5',
475
475
  alert: '#ff0080',
@@ -482,9 +482,9 @@ var expressiveness = {
482
482
  dropdownBoxShadow: '0 0 0 1px #333',
483
483
  scrollerStart: 'rgba(255, 255, 255, 1)',
484
484
  scrollerEnd: 'rgba(255, 255, 255, 0)',
485
- shadowSmall: '0 0 0 1px #333',
486
- shadowMedium: '0 0 0 1px #333',
487
- shadowLarge: '0 0 0 1px #333',
485
+ shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
486
+ shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
487
+ shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
488
488
  portalOpacity: 0.75
489
489
  };
490
490
  var font = defaultFont;
@@ -1265,9 +1265,9 @@ var getButtonColors = function getButtonColors(palette, props) {
1265
1265
  ghost = props.ghost;
1266
1266
  var colors = {
1267
1267
  "default": {
1268
- bg: palette.background,
1269
- border: palette.border,
1270
- color: palette.accents_5
1268
+ bg: palette.accents_2,
1269
+ border: palette.accents_2,
1270
+ color: palette.foreground
1271
1271
  },
1272
1272
  primary: {
1273
1273
  bg: palette.primary,
@@ -1306,9 +1306,9 @@ var getButtonColors = function getButtonColors(palette, props) {
1306
1306
  }
1307
1307
  };
1308
1308
  if (disabled) return {
1309
- bg: palette.accents_1,
1310
- border: palette.accents_2,
1311
- color: '#ccc'
1309
+ bg: palette.accents_3,
1310
+ border: palette.accents_3,
1311
+ color: palette.accents_5
1312
1312
  };
1313
1313
  /**
1314
1314
  * The '-light' type is the same color as the common type,
@@ -1421,7 +1421,7 @@ var getButtonHoverColors = function getButtonHoverColors(palette, props) {
1421
1421
  })
1422
1422
  };
1423
1423
  if (disabled) return {
1424
- bg: palette.accents_1,
1424
+ bg: palette.accents_2,
1425
1425
  border: palette.accents_2,
1426
1426
  color: '#ccc'
1427
1427
  };
@@ -1452,7 +1452,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
1452
1452
  var type = props.type;
1453
1453
  var isLightHover = type === null || type === void 0 ? void 0 : type.endsWith('light');
1454
1454
  var hoverColors = getButtonHoverColors(palette, props);
1455
- return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
1455
+ return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_3, 0.65);
1456
1456
  };
1457
1457
 
1458
1458
  var _excluded$6 = ["children", "disabled", "type", "loading", "shadow", "ghost", "rounded", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className"];
@@ -1571,7 +1571,7 @@ var ButtonComponent = /*#__PURE__*/React__default["default"].forwardRef(function
1571
1571
  disabled: disabled,
1572
1572
  onClick: clickHandler
1573
1573
  }, props, {
1574
- className: styledJsx_cjs.style.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$1('btn', className) || "")
1574
+ className: styledJsx_cjs.style.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$1('btn', className) || "")
1575
1575
  }), loading && /*#__PURE__*/React__default["default"].createElement(ButtonLoading, {
1576
1576
  color: color
1577
1577
  }), childrenWithIcon, dripShow && /*#__PURE__*/React__default["default"].createElement(ButtonDrip$1, {
@@ -1580,9 +1580,9 @@ var ButtonComponent = /*#__PURE__*/React__default["default"].forwardRef(function
1580
1580
  color: dripColor,
1581
1581
  onCompleted: dripCompletedHandle
1582
1582
  }), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
1583
- id: "3337261033",
1583
+ id: "1204671885",
1584
1584
  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]
1585
- }, ".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;}")));
1585
+ }, ".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;}")));
1586
1586
  });
1587
1587
  ButtonComponent.defaultProps = defaultProps$1;
1588
1588
  ButtonComponent.displayName = 'BolioUIButton';
@@ -226,7 +226,7 @@ var defaultLayout = {
226
226
  pageWidthWithMargin: '930pt',
227
227
  breakpointMobile: defaultBreakpoints.xs.max,
228
228
  breakpointTablet: defaultBreakpoints.sm.max,
229
- radius: '6px',
229
+ radius: '10px',
230
230
  unit: '16px'
231
231
  };
232
232
 
@@ -241,32 +241,32 @@ var palette$1 = {
241
241
  accents_6: '#444',
242
242
  accents_7: '#333',
243
243
  accents_8: '#111',
244
- selection: '#cee4fe',
244
+ selection: 'rgba(206,228,254, 0.5)',
245
245
  code: '#C25FFF',
246
246
  border: '#eaeaea',
247
247
  primary: '#0072F6',
248
- primaryLight: '#96C1F3',
249
- primaryLighter: '#CEE4FF',
248
+ primaryLight: '#CEE4FF',
249
+ primaryLighter: '#96C1F3',
250
250
  primaryDark: '#00254E',
251
251
  secondary: '#7828C9',
252
- secondaryLighter: '#D1B1F1',
253
252
  secondaryLight: '#EADCF9',
253
+ secondaryLighter: '#D1B1F1',
254
254
  secondaryDark: '#290E45',
255
255
  error: '#F31261',
256
- errorLight: '#FAA8C6',
257
- errorLighter: '#FDD8E6',
256
+ errorLight: '#FDD8E6',
257
+ errorLighter: '#FAA8C6',
258
258
  errorDark: '#4E041F',
259
259
  success: '#17C965',
260
- successLight: '#ADF5CD',
261
- successLighter: '#DAFBE9',
260
+ successLight: '#DAFBE9',
261
+ successLighter: '#ADF5CD',
262
262
  successDark: '#06371C',
263
263
  warning: '#F5A525',
264
- warningLight: '#FBDBA8',
265
- warningLighter: '#FDEFD9',
264
+ warningLight: '#FDEFD9',
265
+ warningLighter: '#FBDBA8',
266
266
  warningDark: '#4E3105',
267
267
  info: '#06B7DC',
268
- infoLighter: '#A5EEFE',
269
268
  infoLight: '#D7F8FF',
269
+ infoLighter: '#A5EEFE',
270
270
  infoDark: '#053B49',
271
271
  purple: '#f81ce5',
272
272
  alert: '#ff0080',
@@ -308,32 +308,32 @@ var palette = {
308
308
  accents_6: '#999',
309
309
  accents_7: '#eaeaea',
310
310
  accents_8: '#fafafa',
311
- selection: '#f81ce5',
311
+ selection: 'rgba(248,28,229, 0.5)',
312
312
  code: '#C25FFF',
313
313
  border: '#333',
314
314
  primary: '#0072F6',
315
- primaryLight: '#96C1F3',
316
- primaryLighter: '#CEE4FF',
315
+ primaryLight: '#CEE4FF',
316
+ primaryLighter: '#96C1F3',
317
317
  primaryDark: '#00254E',
318
318
  secondary: '#7828C9',
319
- secondaryLighter: '#D1B1F1',
320
319
  secondaryLight: '#EADCF9',
320
+ secondaryLighter: '#D1B1F1',
321
321
  secondaryDark: '#290E45',
322
322
  error: '#F31261',
323
- errorLight: '#FAA8C6',
324
- errorLighter: '#FDD8E6',
323
+ errorLight: '#FDD8E6',
324
+ errorLighter: '#FAA8C6',
325
325
  errorDark: '#4E041F',
326
326
  success: '#17C965',
327
- successLight: '#ADF5CD',
328
- successLighter: '#DAFBE9',
327
+ successLight: '#DAFBE9',
328
+ successLighter: '#ADF5CD',
329
329
  successDark: '#06371C',
330
330
  warning: '#F5A525',
331
- warningLight: '#FBDBA8',
332
- warningLighter: '#FDEFD9',
331
+ warningLight: '#FDEFD9',
332
+ warningLighter: '#FBDBA8',
333
333
  warningDark: '#4E3105',
334
334
  info: '#06B7DC',
335
- infoLighter: '#A5EEFE',
336
335
  infoLight: '#D7F8FF',
336
+ infoLighter: '#A5EEFE',
337
337
  infoDark: '#053B49',
338
338
  purple: '#f81ce5',
339
339
  alert: '#ff0080',
@@ -346,9 +346,9 @@ var expressiveness = {
346
346
  dropdownBoxShadow: '0 0 0 1px #333',
347
347
  scrollerStart: 'rgba(255, 255, 255, 1)',
348
348
  scrollerEnd: 'rgba(255, 255, 255, 0)',
349
- shadowSmall: '0 0 0 1px #333',
350
- shadowMedium: '0 0 0 1px #333',
351
- shadowLarge: '0 0 0 1px #333',
349
+ shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
350
+ shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
351
+ shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
352
352
  portalOpacity: 0.75
353
353
  };
354
354
  var font = defaultFont;
@@ -284,7 +284,7 @@ var defaultLayout = {
284
284
  pageWidthWithMargin: '930pt',
285
285
  breakpointMobile: defaultBreakpoints.xs.max,
286
286
  breakpointTablet: defaultBreakpoints.sm.max,
287
- radius: '6px',
287
+ radius: '10px',
288
288
  unit: '16px'
289
289
  };
290
290
 
@@ -299,32 +299,32 @@ var palette$1 = {
299
299
  accents_6: '#444',
300
300
  accents_7: '#333',
301
301
  accents_8: '#111',
302
- selection: '#cee4fe',
302
+ selection: 'rgba(206,228,254, 0.5)',
303
303
  code: '#C25FFF',
304
304
  border: '#eaeaea',
305
305
  primary: '#0072F6',
306
- primaryLight: '#96C1F3',
307
- primaryLighter: '#CEE4FF',
306
+ primaryLight: '#CEE4FF',
307
+ primaryLighter: '#96C1F3',
308
308
  primaryDark: '#00254E',
309
309
  secondary: '#7828C9',
310
- secondaryLighter: '#D1B1F1',
311
310
  secondaryLight: '#EADCF9',
311
+ secondaryLighter: '#D1B1F1',
312
312
  secondaryDark: '#290E45',
313
313
  error: '#F31261',
314
- errorLight: '#FAA8C6',
315
- errorLighter: '#FDD8E6',
314
+ errorLight: '#FDD8E6',
315
+ errorLighter: '#FAA8C6',
316
316
  errorDark: '#4E041F',
317
317
  success: '#17C965',
318
- successLight: '#ADF5CD',
319
- successLighter: '#DAFBE9',
318
+ successLight: '#DAFBE9',
319
+ successLighter: '#ADF5CD',
320
320
  successDark: '#06371C',
321
321
  warning: '#F5A525',
322
- warningLight: '#FBDBA8',
323
- warningLighter: '#FDEFD9',
322
+ warningLight: '#FDEFD9',
323
+ warningLighter: '#FBDBA8',
324
324
  warningDark: '#4E3105',
325
325
  info: '#06B7DC',
326
- infoLighter: '#A5EEFE',
327
326
  infoLight: '#D7F8FF',
327
+ infoLighter: '#A5EEFE',
328
328
  infoDark: '#053B49',
329
329
  purple: '#f81ce5',
330
330
  alert: '#ff0080',
@@ -366,32 +366,32 @@ var palette = {
366
366
  accents_6: '#999',
367
367
  accents_7: '#eaeaea',
368
368
  accents_8: '#fafafa',
369
- selection: '#f81ce5',
369
+ selection: 'rgba(248,28,229, 0.5)',
370
370
  code: '#C25FFF',
371
371
  border: '#333',
372
372
  primary: '#0072F6',
373
- primaryLight: '#96C1F3',
374
- primaryLighter: '#CEE4FF',
373
+ primaryLight: '#CEE4FF',
374
+ primaryLighter: '#96C1F3',
375
375
  primaryDark: '#00254E',
376
376
  secondary: '#7828C9',
377
- secondaryLighter: '#D1B1F1',
378
377
  secondaryLight: '#EADCF9',
378
+ secondaryLighter: '#D1B1F1',
379
379
  secondaryDark: '#290E45',
380
380
  error: '#F31261',
381
- errorLight: '#FAA8C6',
382
- errorLighter: '#FDD8E6',
381
+ errorLight: '#FDD8E6',
382
+ errorLighter: '#FAA8C6',
383
383
  errorDark: '#4E041F',
384
384
  success: '#17C965',
385
- successLight: '#ADF5CD',
386
- successLighter: '#DAFBE9',
385
+ successLight: '#DAFBE9',
386
+ successLighter: '#ADF5CD',
387
387
  successDark: '#06371C',
388
388
  warning: '#F5A525',
389
- warningLight: '#FBDBA8',
390
- warningLighter: '#FDEFD9',
389
+ warningLight: '#FDEFD9',
390
+ warningLighter: '#FBDBA8',
391
391
  warningDark: '#4E3105',
392
392
  info: '#06B7DC',
393
- infoLighter: '#A5EEFE',
394
393
  infoLight: '#D7F8FF',
394
+ infoLighter: '#A5EEFE',
395
395
  infoDark: '#053B49',
396
396
  purple: '#f81ce5',
397
397
  alert: '#ff0080',
@@ -404,9 +404,9 @@ var expressiveness = {
404
404
  dropdownBoxShadow: '0 0 0 1px #333',
405
405
  scrollerStart: 'rgba(255, 255, 255, 1)',
406
406
  scrollerEnd: 'rgba(255, 255, 255, 0)',
407
- shadowSmall: '0 0 0 1px #333',
408
- shadowMedium: '0 0 0 1px #333',
409
- shadowLarge: '0 0 0 1px #333',
407
+ shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
408
+ shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
409
+ shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
410
410
  portalOpacity: 0.75
411
411
  };
412
412
  var font = defaultFont;