@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/Grid/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
- border: '#999',
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,37 +308,37 @@ 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
- border: '#444',
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',
340
340
  link: '#3291ff',
341
- pre: '#363450'
341
+ pre: '#111'
342
342
  };
343
343
  var expressiveness = {
344
344
  linkStyle: 'none',
@@ -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;
@@ -538,9 +538,10 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
538
538
  for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
539
539
  var key = _step2.value;
540
540
  var value = props[key];
541
- console.log('🚀 ~ file: utils.ts:32 ~ value:', value); // if (typeof value !== 'undefined') {
542
- // scaleProps[key as keyof ScaleProps] = value as any
543
- // }
541
+
542
+ if (typeof value !== 'undefined') {
543
+ scaleProps[key] = value;
544
+ }
544
545
  }
545
546
  } catch (err) {
546
547
  _iterator2.e(err);
package/dist/Image/index.js CHANGED
@@ -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
- border: '#999',
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,37 +350,37 @@ 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
- border: '#444',
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',
382
382
  link: '#3291ff',
383
- pre: '#363450'
383
+ pre: '#111'
384
384
  };
385
385
  var expressiveness = {
386
386
  linkStyle: 'none',
@@ -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;
@@ -614,9 +614,10 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
614
614
  for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
615
615
  var key = _step2.value;
616
616
  var value = props[key];
617
- console.log('🚀 ~ file: utils.ts:32 ~ value:', value); // if (typeof value !== 'undefined') {
618
- // scaleProps[key as keyof ScaleProps] = value as any
619
- // }
617
+
618
+ if (typeof value !== 'undefined') {
619
+ scaleProps[key] = value;
620
+ }
620
621
  }
621
622
  } catch (err) {
622
623
  _iterator2.e(err);
package/dist/Input/InputProps.d.ts CHANGED
@@ -24,6 +24,7 @@ export interface Props {
24
24
  autoComplete?: string;
25
25
  backgroundColor?: string;
26
26
  borderColor?: string;
27
+ hoverBorder?: string;
27
28
  rounded?: boolean;
28
29
  }
29
30
  export declare const defaultProps: {
package/dist/Input/index.js CHANGED
@@ -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
- border: '#999',
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,37 +350,37 @@ 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
- border: '#444',
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',
382
382
  link: '#3291ff',
383
- pre: '#363450'
383
+ pre: '#111'
384
384
  };
385
385
  var expressiveness = {
386
386
  linkStyle: 'none',
@@ -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;
@@ -634,37 +634,51 @@ var getColors = function getColors(palette, status) {
634
634
  var colors = {
635
635
  "default": {
636
636
  color: palette.foreground,
637
- borderColor: palette.border,
638
- hoverBorder: palette.accents_5
637
+ bgColor: palette.accents_2,
638
+ borderColor: palette.accents_3,
639
+ hoverBgColor: palette.accents_2,
640
+ hoverBorder: palette.accents_6
639
641
  },
640
642
  primary: {
641
- color: palette.primary,
642
- borderColor: palette.primary,
643
+ color: palette.primaryDark,
644
+ bgColor: palette.primaryLighter,
645
+ borderColor: palette.primaryDark,
646
+ hoverBgColor: palette.primaryLight,
643
647
  hoverBorder: palette.primary
644
648
  },
645
649
  secondary: {
646
- color: palette.secondary,
647
- borderColor: palette.secondary,
650
+ color: palette.secondaryDark,
651
+ bgColor: palette.secondaryLighter,
652
+ borderColor: palette.secondaryDark,
653
+ hoverBgColor: palette.secondaryLight,
648
654
  hoverBorder: palette.secondary
649
655
  },
650
656
  success: {
651
- color: palette.success,
652
- borderColor: palette.success,
657
+ color: palette.successDark,
658
+ bgColor: palette.successLighter,
659
+ borderColor: palette.successDark,
660
+ hoverBgColor: palette.successLight,
653
661
  hoverBorder: palette.success
654
662
  },
655
663
  warning: {
656
- color: palette.warning,
657
- borderColor: palette.warning,
664
+ color: palette.warningDark,
665
+ bgColor: palette.warningLighter,
666
+ borderColor: palette.warningDark,
667
+ hoverBgColor: palette.warningLight,
658
668
  hoverBorder: palette.warning
659
669
  },
660
670
  error: {
661
- color: palette.error,
662
- borderColor: palette.error,
671
+ color: palette.errorDark,
672
+ bgColor: palette.errorLighter,
673
+ borderColor: palette.errorDark,
674
+ hoverBgColor: palette.errorLight,
663
675
  hoverBorder: palette.error
664
676
  },
665
677
  info: {
666
- color: palette.info,
667
- borderColor: palette.info,
678
+ color: palette.infoDark,
679
+ bgColor: palette.infoLighter,
680
+ borderColor: palette.infoDark,
681
+ hoverBgColor: palette.infoLight,
668
682
  hoverBorder: palette.info
669
683
  }
670
684
  };
@@ -765,9 +779,10 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
765
779
  for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
766
780
  var key = _step2.value;
767
781
  var value = props[key];
768
- console.log('🚀 ~ file: utils.ts:32 ~ value:', value); // if (typeof value !== 'undefined') {
769
- // scaleProps[key as keyof ScaleProps] = value as any
770
- // }
782
+
783
+ if (typeof value !== 'undefined') {
784
+ scaleProps[key] = value;
785
+ }
771
786
  }
772
787
  } catch (err) {
773
788
  _iterator2.e(err);
@@ -891,7 +906,7 @@ var withScale$1 = withScale;
891
906
 
892
907
  var useScale = useScale$1;
893
908
 
894
- var _excluded$2 = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "rounded", "backgroundColor", "borderColor"];
909
+ var _excluded$2 = ["label", "labelRight", "type", "htmlType", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled", "rounded", "backgroundColor", "borderColor", "hoverBorder"];
895
910
 
896
911
  var simulateChangeEvent = function simulateChangeEvent(el, event) {
897
912
  return _objectSpread2(_objectSpread2({}, event), {}, {
@@ -925,6 +940,7 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
925
940
  rounded = _ref.rounded,
926
941
  backgroundColor = _ref.backgroundColor,
927
942
  borderColor = _ref.borderColor,
943
+ hoverBorder = _ref.hoverBorder,
928
944
  props = _objectWithoutProperties(_ref, _excluded$2);
929
945
 
930
946
  var theme = useTheme();
@@ -955,14 +971,13 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
955
971
  }, [label, labelRight]);
956
972
  var iconClasses = React.useMemo(function () {
957
973
  return iconRight ? 'right-icon' : icon ? 'left-icon' : '';
958
- }, [icon, iconRight]);
974
+ }, [icon, iconRight]); // const {
975
+ // color,
976
+ // borderColor: borderColorThemed,
977
+ // hoverBorder
978
+ // } = useMemo(() => getColors(theme.palette, type), [theme.palette, type])
959
979
 
960
- var _useMemo = React.useMemo(function () {
961
- return getColors(theme.palette, type);
962
- }, [theme.palette, type]),
963
- color = _useMemo.color,
964
- borderColorThemed = _useMemo.borderColor,
965
- hoverBorder = _useMemo.hoverBorder;
980
+ var colors = getColors(theme.palette, type);
966
981
 
967
982
  var changeHandler = function changeHandler(event) {
968
983
  if (disabled || readOnly) return;
@@ -1017,11 +1032,11 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
1017
1032
  var inputProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
1018
1033
 
1019
1034
  return /*#__PURE__*/React__default["default"].createElement("div", {
1020
- className: styledJsx_cjs.style.dynamic([["2780775675", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
1035
+ className: styledJsx_cjs.style.dynamic([["1821647879", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, theme.palette.accents_2, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.color]]]) + " " + "with-label"
1021
1036
  }, children && /*#__PURE__*/React__default["default"].createElement(InputBlockLabel$1, null, children), /*#__PURE__*/React__default["default"].createElement("div", {
1022
- className: styledJsx_cjs.style.dynamic([["2780775675", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-container', className) || "")
1037
+ className: styledJsx_cjs.style.dynamic([["1821647879", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, theme.palette.accents_2, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.color]]]) + " " + (useClasses$1('input-container', className) || "")
1023
1038
  }, label && /*#__PURE__*/React__default["default"].createElement(InputLabel$1, null, label), /*#__PURE__*/React__default["default"].createElement("div", {
1024
- className: styledJsx_cjs.style.dynamic([["2780775675", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses$1('input-wrapper', {
1039
+ className: styledJsx_cjs.style.dynamic([["1821647879", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, theme.palette.accents_2, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.color]]]) + " " + (useClasses$1('input-wrapper', {
1025
1040
  hover: hover,
1026
1041
  disabled: disabled
1027
1042
  }, labelClasses) || "")
@@ -1038,7 +1053,7 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
1038
1053
  onChange: changeHandler,
1039
1054
  autoComplete: autoComplete
1040
1055
  }, inputProps, {
1041
- className: styledJsx_cjs.style.dynamic([["2780775675", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses$1({
1056
+ className: styledJsx_cjs.style.dynamic([["1821647879", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, theme.palette.accents_2, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses$1({
1042
1057
  disabled: disabled
1043
1058
  }, iconClasses) || "")
1044
1059
  })), clearable && /*#__PURE__*/React__default["default"].createElement(InputClearIcon, {
@@ -1050,9 +1065,9 @@ var InputComponent = /*#__PURE__*/React__default["default"].forwardRef(function
1050
1065
  }, iconProps))), labelRight && /*#__PURE__*/React__default["default"].createElement(InputLabel$1, {
1051
1066
  isRight: true
1052
1067
  }, labelRight)), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
1053
- id: "2780775675",
1054
- dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : borderColorThemed, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
1055
- }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";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), ";}.input-container.__jsx-style-dynamic-selector{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;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";border:1px solid ").concat(borderColor ? borderColor : borderColorThemed, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : theme.palette.accents_2, ";}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_4, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0 4px;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
1068
+ id: "1821647879",
1069
+ dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, borderColor ? borderColor : colors.borderColor, backgroundColor ? backgroundColor : colors.bgColor, hoverBorder ? hoverBorder : colors.hoverBorder, backgroundColor ? backgroundColor : colors.hoverBgColor, theme.palette.accents_2, colors.hoverBorder, SCALES.font(0.875), colors.color, theme.palette.accents_3, theme.palette.background, colors.color]
1070
+ }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";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), ";}.input-container.__jsx-style-dynamic-selector{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;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";border:1px solid ").concat(borderColor ? borderColor : colors.borderColor, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : colors.bgColor, ";}.input-wrapper.active.__jsx-style-dynamic-selector,.input-wrapper.__jsx-style-dynamic-selector:hover{border:1px solid ").concat(hoverBorder ? hoverBorder : colors.hoverBorder, ";background:").concat(backgroundColor ? backgroundColor : colors.hoverBgColor, ";}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(colors.hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0 4px;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(colors.color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(colors.color, " !important;}")));
1056
1071
  });
1057
1072
  InputComponent.defaultProps = defaultProps;
1058
1073
  InputComponent.displayName = 'BolioUIInput';
@@ -1120,13 +1135,9 @@ var TextareaComponent = /*#__PURE__*/React__default["default"].forwardRef(functi
1120
1135
  hover = _useState4[0],
1121
1136
  setHover = _useState4[1];
1122
1137
 
1123
- var _useMemo = React.useMemo(function () {
1138
+ var colors = React.useMemo(function () {
1124
1139
  return getColors(theme.palette, type);
1125
- }, [theme.palette, type]),
1126
- color = _useMemo.color,
1127
- borderColor = _useMemo.borderColor,
1128
- hoverBorder = _useMemo.hoverBorder;
1129
-
1140
+ }, [theme.palette, type]);
1130
1141
  var classes = useClasses$1('wrapper', {
1131
1142
  hover: hover,
1132
1143
  disabled: disabled
@@ -1162,7 +1173,7 @@ var TextareaComponent = /*#__PURE__*/React__default["default"].forwardRef(functi
1162
1173
  var textareaProps = _objectSpread2(_objectSpread2({}, props), controlledValue);
1163
1174
 
1164
1175
  return /*#__PURE__*/React__default["default"].createElement("div", {
1165
- 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 || "")
1176
+ 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 || "")
1166
1177
  }, /*#__PURE__*/React__default["default"].createElement("textarea", _extends({
1167
1178
  ref: textareaRef,
1168
1179
  disabled: disabled,
@@ -1172,11 +1183,11 @@ var TextareaComponent = /*#__PURE__*/React__default["default"].forwardRef(functi
1172
1183
  onBlur: blurHandler,
1173
1184
  onChange: changeHandler
1174
1185
  }, textareaProps, {
1175
- 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 || "")
1186
+ 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 || "")
1176
1187
  })), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
1177
- id: "1283886166",
1178
- 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]
1179
- }, ".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;}")));
1188
+ id: "2097224582",
1189
+ 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]
1190
+ }, ".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;}")));
1180
1191
  });
1181
1192
  TextareaComponent.displayName = 'BolioUITextarea';
1182
1193
  var Textarea = withScale$1(TextareaComponent);
package/dist/Input/styles.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import { BolioUIThemesPalette } from "../Themes/Presets";
2
2
  export declare type InputColor = {
3
3
  color: string;
4
+ bgColor: string;
4
5
  borderColor: string;
6
+ hoverBgColor: string;
5
7
  hoverBorder: string;
6
8
  };
7
9
  export declare const getColors: (palette: BolioUIThemesPalette, status?: "success" | "primary" | "secondary" | "error" | "warning" | "info" | "default" | undefined) => InputColor;