@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
package/dist/Tag/index.js CHANGED
@@ -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;
@@ -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;
@@ -268,7 +268,7 @@ var defaultLayout = {
268
268
  pageWidthWithMargin: '930pt',
269
269
  breakpointMobile: defaultBreakpoints.xs.max,
270
270
  breakpointTablet: defaultBreakpoints.sm.max,
271
- radius: '6px',
271
+ radius: '10px',
272
272
  unit: '16px'
273
273
  };
274
274
 
@@ -283,32 +283,32 @@ var palette$1 = {
283
283
  accents_6: '#444',
284
284
  accents_7: '#333',
285
285
  accents_8: '#111',
286
- selection: '#cee4fe',
286
+ selection: 'rgba(206,228,254, 0.5)',
287
287
  code: '#C25FFF',
288
288
  border: '#eaeaea',
289
289
  primary: '#0072F6',
290
- primaryLight: '#96C1F3',
291
- primaryLighter: '#CEE4FF',
290
+ primaryLight: '#CEE4FF',
291
+ primaryLighter: '#96C1F3',
292
292
  primaryDark: '#00254E',
293
293
  secondary: '#7828C9',
294
- secondaryLighter: '#D1B1F1',
295
294
  secondaryLight: '#EADCF9',
295
+ secondaryLighter: '#D1B1F1',
296
296
  secondaryDark: '#290E45',
297
297
  error: '#F31261',
298
- errorLight: '#FAA8C6',
299
- errorLighter: '#FDD8E6',
298
+ errorLight: '#FDD8E6',
299
+ errorLighter: '#FAA8C6',
300
300
  errorDark: '#4E041F',
301
301
  success: '#17C965',
302
- successLight: '#ADF5CD',
303
- successLighter: '#DAFBE9',
302
+ successLight: '#DAFBE9',
303
+ successLighter: '#ADF5CD',
304
304
  successDark: '#06371C',
305
305
  warning: '#F5A525',
306
- warningLight: '#FBDBA8',
307
- warningLighter: '#FDEFD9',
306
+ warningLight: '#FDEFD9',
307
+ warningLighter: '#FBDBA8',
308
308
  warningDark: '#4E3105',
309
309
  info: '#06B7DC',
310
- infoLighter: '#A5EEFE',
311
310
  infoLight: '#D7F8FF',
311
+ infoLighter: '#A5EEFE',
312
312
  infoDark: '#053B49',
313
313
  purple: '#f81ce5',
314
314
  alert: '#ff0080',
@@ -350,32 +350,32 @@ var palette = {
350
350
  accents_6: '#999',
351
351
  accents_7: '#eaeaea',
352
352
  accents_8: '#fafafa',
353
- selection: '#f81ce5',
353
+ selection: 'rgba(248,28,229, 0.5)',
354
354
  code: '#C25FFF',
355
355
  border: '#333',
356
356
  primary: '#0072F6',
357
- primaryLight: '#96C1F3',
358
- primaryLighter: '#CEE4FF',
357
+ primaryLight: '#CEE4FF',
358
+ primaryLighter: '#96C1F3',
359
359
  primaryDark: '#00254E',
360
360
  secondary: '#7828C9',
361
- secondaryLighter: '#D1B1F1',
362
361
  secondaryLight: '#EADCF9',
362
+ secondaryLighter: '#D1B1F1',
363
363
  secondaryDark: '#290E45',
364
364
  error: '#F31261',
365
- errorLight: '#FAA8C6',
366
- errorLighter: '#FDD8E6',
365
+ errorLight: '#FDD8E6',
366
+ errorLighter: '#FAA8C6',
367
367
  errorDark: '#4E041F',
368
368
  success: '#17C965',
369
- successLight: '#ADF5CD',
370
- successLighter: '#DAFBE9',
369
+ successLight: '#DAFBE9',
370
+ successLighter: '#ADF5CD',
371
371
  successDark: '#06371C',
372
372
  warning: '#F5A525',
373
- warningLight: '#FBDBA8',
374
- warningLighter: '#FDEFD9',
373
+ warningLight: '#FDEFD9',
374
+ warningLighter: '#FBDBA8',
375
375
  warningDark: '#4E3105',
376
376
  info: '#06B7DC',
377
- infoLighter: '#A5EEFE',
378
377
  infoLight: '#D7F8FF',
378
+ infoLighter: '#A5EEFE',
379
379
  infoDark: '#053B49',
380
380
  purple: '#f81ce5',
381
381
  alert: '#ff0080',
@@ -388,9 +388,9 @@ var expressiveness = {
388
388
  dropdownBoxShadow: '0 0 0 1px #333',
389
389
  scrollerStart: 'rgba(255, 255, 255, 1)',
390
390
  scrollerEnd: 'rgba(255, 255, 255, 0)',
391
- shadowSmall: '0 0 0 1px #333',
392
- shadowMedium: '0 0 0 1px #333',
393
- shadowLarge: '0 0 0 1px #333',
391
+ shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
392
+ shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
393
+ shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
394
394
  portalOpacity: 0.75
395
395
  };
396
396
  var font = defaultFont;
@@ -516,44 +516,72 @@ tuple('hover', 'click');
516
516
  tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
517
517
  tuple('start', 'center', 'end', 'left', 'right');
518
518
 
519
- var getColors = function getColors(palette, status) {
519
+ var getColors = function getColors(palette, status, disabled, readOnly) {
520
520
  var colors = {
521
521
  "default": {
522
522
  color: palette.foreground,
523
+ bgColor: palette.accents_2,
523
524
  borderColor: palette.accents_3,
524
- hoverBorder: palette.accents_5
525
+ hoverBgColor: palette.accents_2,
526
+ hoverBorder: palette.accents_6
525
527
  },
526
528
  primary: {
527
- color: palette.primary,
529
+ color: palette.primaryDark,
530
+ bgColor: palette.primaryLight,
528
531
  borderColor: palette.primary,
532
+ hoverBgColor: palette.primaryLight,
529
533
  hoverBorder: palette.primary
530
534
  },
531
535
  secondary: {
532
- color: palette.secondary,
536
+ color: palette.secondaryDark,
537
+ bgColor: palette.secondaryLight,
533
538
  borderColor: palette.secondary,
539
+ hoverBgColor: palette.secondaryLight,
534
540
  hoverBorder: palette.secondary
535
541
  },
536
542
  success: {
537
- color: palette.success,
543
+ color: palette.successDark,
544
+ bgColor: palette.successLight,
538
545
  borderColor: palette.success,
546
+ hoverBgColor: palette.successLight,
539
547
  hoverBorder: palette.success
540
548
  },
541
549
  warning: {
542
- color: palette.warning,
550
+ color: palette.warningDark,
551
+ bgColor: palette.warningLight,
543
552
  borderColor: palette.warning,
553
+ hoverBgColor: palette.warningLight,
544
554
  hoverBorder: palette.warning
545
555
  },
546
556
  error: {
547
- color: palette.error,
557
+ color: palette.errorDark,
558
+ bgColor: palette.errorLight,
548
559
  borderColor: palette.error,
560
+ hoverBgColor: palette.errorLight,
549
561
  hoverBorder: palette.error
550
562
  },
551
563
  info: {
552
- color: palette.info,
564
+ color: palette.infoDark,
565
+ bgColor: palette.infoLight,
553
566
  borderColor: palette.info,
567
+ hoverBgColor: palette.infoLight,
554
568
  hoverBorder: palette.info
555
569
  }
556
570
  };
571
+ if (disabled) return {
572
+ color: palette.accents_5,
573
+ bgColor: palette.accents_3,
574
+ borderColor: palette.accents_4,
575
+ hoverBgColor: palette.accents_3,
576
+ hoverBorder: palette.accents_4
577
+ };
578
+ if (readOnly) return {
579
+ color: palette.foreground,
580
+ bgColor: palette.accents_2,
581
+ borderColor: palette.accents_3,
582
+ hoverBgColor: palette.accents_2,
583
+ hoverBorder: palette.accents_6
584
+ };
557
585
  if (!status) return colors["default"];
558
586
  return colors[status];
559
587
  };
@@ -850,13 +878,9 @@ var TextareaComponent = /*#__PURE__*/React__default["default"].forwardRef(functi
850
878
  hover = _useState4[0],
851
879
  setHover = _useState4[1];
852
880
 
853
- var _useMemo = React.useMemo(function () {
881
+ var colors = React.useMemo(function () {
854
882
  return getColors(theme.palette, type);
855
- }, [theme.palette, type]),
856
- color = _useMemo.color,
857
- borderColor = _useMemo.borderColor,
858
- hoverBorder = _useMemo.hoverBorder;
859
-
883
+ }, [theme.palette, type]);
860
884
  var classes = useClasses$1('wrapper', {
861
885
  hover: hover,
862
886
  disabled: disabled
@@ -892,7 +916,7 @@ var TextareaComponent = /*#__PURE__*/React__default["default"].forwardRef(functi
892
916
  var textareaProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
893
917
 
894
918
  return /*#__PURE__*/React__default["default"].createElement("div", {
895
- className: styledJsx_cjs.style.dynamic([["1283886166", [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]]]) + " " + (classes || "")
919
+ className: styledJsx_cjs.style.dynamic([["2097224582", [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]]]) + " " + (classes || "")
896
920
  }, /*#__PURE__*/React__default["default"].createElement("textarea", _extends({
897
921
  ref: textareaRef,
898
922
  disabled: disabled,
@@ -902,11 +926,11 @@ var TextareaComponent = /*#__PURE__*/React__default["default"].forwardRef(functi
902
926
  onBlur: blurHandler,
903
927
  onChange: changeHandler
904
928
  }, textareaProps, {
905
- className: styledJsx_cjs.style.dynamic([["1283886166", [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "")
929
+ className: styledJsx_cjs.style.dynamic([["2097224582", [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]]]) + " " + (textareaProps && textareaProps.className != null && textareaProps.className || "")
906
930
  })), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
907
- id: "1283886166",
908
- dynamic: [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]
909
- }, ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(borderColor, ";color:").concat(color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:var(--textarea-font-size);width:100%;height:var(--textarea-height);border:none;outline:none;padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.5), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.5), ";resize:").concat(resize, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;}")));
931
+ id: "2097224582",
932
+ dynamic: [theme.layout.radius, colors.borderColor, colors.color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), colors.hoverBorder, colors.hoverBgColor, theme.palette.accents_2, theme.palette.accents_3, colors.bgColor, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.layout.radius, colors.hoverBorder, colors.hoverBgColor, theme.palette.background]
933
+ }, ".wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:".concat(theme.layout.radius, ";border:1px solid ").concat(colors.borderColor, ";color:").concat(colors.color, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;min-width:12.5rem;max-width:95vw;--textarea-font-size:").concat(SCALES.font(0.875), ";--textarea-height:").concat(SCALES.height(1, 'auto'), ";width:").concat(SCALES.width(1, 'initial'), ";height:var(--textarea-height);margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(colors.hoverBorder, ";background-color:").concat(colors.hoverBgColor, ";}.wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";border-color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}textarea.__jsx-style-dynamic-selector{background-color:").concat(colors.bgColor, ";box-shadow:none;display:block;font-family:").concat(theme.font.sans, ";font-size:var(--textarea-font-size);width:100%;border:none;outline:none;padding:").concat(SCALES.pt(0.5), " ").concat(SCALES.pr(0.5), " ").concat(SCALES.pb(0.5), " ").concat(SCALES.pl(0.5), ";resize:").concat(resize, ";border-radius:").concat(theme.layout.radius, ";}.disabled.__jsx-style-dynamic-selector>textarea.__jsx-style-dynamic-selector{cursor:not-allowed;}textarea.active.__jsx-style-dynamic-selector,textarea.__jsx-style-dynamic-selector:hover{border-color:").concat(colors.hoverBorder, ";background:").concat(colors.hoverBgColor, ";}textarea.__jsx-style-dynamic-selector:-webkit-autofill,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,textarea.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;}")));
910
934
  });
911
935
  TextareaComponent.displayName = 'BolioUITextarea';
912
936
  var Textarea = withScale$1(TextareaComponent);
@@ -92,7 +92,7 @@ var defaultLayout = {
92
92
  pageWidthWithMargin: '930pt',
93
93
  breakpointMobile: defaultBreakpoints.xs.max,
94
94
  breakpointTablet: defaultBreakpoints.sm.max,
95
- radius: '6px',
95
+ radius: '10px',
96
96
  unit: '16px'
97
97
  };
98
98
 
@@ -107,32 +107,32 @@ var palette$1 = {
107
107
  accents_6: '#444',
108
108
  accents_7: '#333',
109
109
  accents_8: '#111',
110
- selection: '#cee4fe',
110
+ selection: 'rgba(206,228,254, 0.5)',
111
111
  code: '#C25FFF',
112
112
  border: '#eaeaea',
113
113
  primary: '#0072F6',
114
- primaryLight: '#96C1F3',
115
- primaryLighter: '#CEE4FF',
114
+ primaryLight: '#CEE4FF',
115
+ primaryLighter: '#96C1F3',
116
116
  primaryDark: '#00254E',
117
117
  secondary: '#7828C9',
118
- secondaryLighter: '#D1B1F1',
119
118
  secondaryLight: '#EADCF9',
119
+ secondaryLighter: '#D1B1F1',
120
120
  secondaryDark: '#290E45',
121
121
  error: '#F31261',
122
- errorLight: '#FAA8C6',
123
- errorLighter: '#FDD8E6',
122
+ errorLight: '#FDD8E6',
123
+ errorLighter: '#FAA8C6',
124
124
  errorDark: '#4E041F',
125
125
  success: '#17C965',
126
- successLight: '#ADF5CD',
127
- successLighter: '#DAFBE9',
126
+ successLight: '#DAFBE9',
127
+ successLighter: '#ADF5CD',
128
128
  successDark: '#06371C',
129
129
  warning: '#F5A525',
130
- warningLight: '#FBDBA8',
131
- warningLighter: '#FDEFD9',
130
+ warningLight: '#FDEFD9',
131
+ warningLighter: '#FBDBA8',
132
132
  warningDark: '#4E3105',
133
133
  info: '#06B7DC',
134
- infoLighter: '#A5EEFE',
135
134
  infoLight: '#D7F8FF',
135
+ infoLighter: '#A5EEFE',
136
136
  infoDark: '#053B49',
137
137
  purple: '#f81ce5',
138
138
  alert: '#ff0080',
@@ -174,32 +174,32 @@ var palette = {
174
174
  accents_6: '#999',
175
175
  accents_7: '#eaeaea',
176
176
  accents_8: '#fafafa',
177
- selection: '#f81ce5',
177
+ selection: 'rgba(248,28,229, 0.5)',
178
178
  code: '#C25FFF',
179
179
  border: '#333',
180
180
  primary: '#0072F6',
181
- primaryLight: '#96C1F3',
182
- primaryLighter: '#CEE4FF',
181
+ primaryLight: '#CEE4FF',
182
+ primaryLighter: '#96C1F3',
183
183
  primaryDark: '#00254E',
184
184
  secondary: '#7828C9',
185
- secondaryLighter: '#D1B1F1',
186
185
  secondaryLight: '#EADCF9',
186
+ secondaryLighter: '#D1B1F1',
187
187
  secondaryDark: '#290E45',
188
188
  error: '#F31261',
189
- errorLight: '#FAA8C6',
190
- errorLighter: '#FDD8E6',
189
+ errorLight: '#FDD8E6',
190
+ errorLighter: '#FAA8C6',
191
191
  errorDark: '#4E041F',
192
192
  success: '#17C965',
193
- successLight: '#ADF5CD',
194
- successLighter: '#DAFBE9',
193
+ successLight: '#DAFBE9',
194
+ successLighter: '#ADF5CD',
195
195
  successDark: '#06371C',
196
196
  warning: '#F5A525',
197
- warningLight: '#FBDBA8',
198
- warningLighter: '#FDEFD9',
197
+ warningLight: '#FDEFD9',
198
+ warningLighter: '#FBDBA8',
199
199
  warningDark: '#4E3105',
200
200
  info: '#06B7DC',
201
- infoLighter: '#A5EEFE',
202
201
  infoLight: '#D7F8FF',
202
+ infoLighter: '#A5EEFE',
203
203
  infoDark: '#053B49',
204
204
  purple: '#f81ce5',
205
205
  alert: '#ff0080',
@@ -212,9 +212,9 @@ var expressiveness = {
212
212
  dropdownBoxShadow: '0 0 0 1px #333',
213
213
  scrollerStart: 'rgba(255, 255, 255, 1)',
214
214
  scrollerEnd: 'rgba(255, 255, 255, 0)',
215
- shadowSmall: '0 0 0 1px #333',
216
- shadowMedium: '0 0 0 1px #333',
217
- shadowLarge: '0 0 0 1px #333',
215
+ shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
216
+ shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
217
+ shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
218
218
  portalOpacity: 0.75
219
219
  };
220
220
  var font = defaultFont;