@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
@@ -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;
@@ -597,9 +597,10 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
597
597
  for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
598
598
  var key = _step2.value;
599
599
  var value = props[key];
600
- console.log('🚀 ~ file: utils.ts:32 ~ value:', value); // if (typeof value !== 'undefined') {
601
- // scaleProps[key as keyof ScaleProps] = value as any
602
- // }
600
+
601
+ if (typeof value !== 'undefined') {
602
+ scaleProps[key] = value;
603
+ }
603
604
  }
604
605
  } catch (err) {
605
606
  _iterator2.e(err);
@@ -835,7 +836,7 @@ function AvatarComponent(_ref) {
835
836
  };
836
837
  }, [loading, showAnimation]);
837
838
  return /*#__PURE__*/React__default["default"].createElement("span", {
838
- className: styledJsx_cjs.style.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || "")
839
+ className: styledJsx_cjs.style.dynamic([["2828293809", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || "")
839
840
  }, !showText && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showSkeleton && showAnimation && /*#__PURE__*/React__default["default"].createElement(AvatarSkeleton$1, {
840
841
  opacity: loading ? 1 : 0
841
842
  }), /*#__PURE__*/React__default["default"].createElement("img", _extends({
@@ -845,13 +846,13 @@ function AvatarComponent(_ref) {
845
846
  onLoad: imageLoaded,
846
847
  draggable: false
847
848
  }, props, {
848
- className: styledJsx_cjs.style.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
849
+ className: styledJsx_cjs.style.dynamic([["2828293809", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
849
850
  }))), showText && /*#__PURE__*/React__default["default"].createElement("span", _extends({}, props, {
850
- className: styledJsx_cjs.style.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
851
+ className: styledJsx_cjs.style.dynamic([["2828293809", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
851
852
  }), safeText(text)), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
852
- id: "2739790524",
853
+ id: "2828293809",
853
854
  dynamic: [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]
854
- }, ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border-radius:".concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.accents_2, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
855
+ }, ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border-radius:".concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.accents_2, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";font-weight:bold;text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-transform:none;}")));
855
856
  }
856
857
 
857
858
  AvatarComponent.displayName = 'BolioUIAvatar';
@@ -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;
@@ -595,9 +595,10 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
595
595
  for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
596
596
  var key = _step2.value;
597
597
  var value = props[key];
598
- console.log('🚀 ~ file: utils.ts:32 ~ value:', value); // if (typeof value !== 'undefined') {
599
- // scaleProps[key as keyof ScaleProps] = value as any
600
- // }
598
+
599
+ if (typeof value !== 'undefined') {
600
+ scaleProps[key] = value;
601
+ }
601
602
  }
602
603
  } catch (err) {
603
604
  _iterator2.e(err);
@@ -765,7 +766,7 @@ var _excluded = ["type", "className", "children", "dot"];
765
766
 
766
767
  var getBgColor = function getBgColor(type, palette) {
767
768
  var colors = {
768
- "default": palette.foreground,
769
+ "default": palette.accents_2,
769
770
  secondary: palette.secondary,
770
771
  primary: palette.primary,
771
772
  success: palette.success,
@@ -795,18 +796,18 @@ function BadgeComponent(_ref) {
795
796
  return getBgColor(type, theme.palette);
796
797
  }, [type, theme.palette]);
797
798
  var color = React.useMemo(function () {
798
- if (!type || type === 'default') return theme.palette.background;
799
- return 'white';
800
- }, [type, theme.palette.background]);
799
+ if (!type || type === 'default') return theme.palette.foreground;
800
+ return '#FFFFFF';
801
+ }, [type, theme.palette.foreground]);
801
802
  var classes = useClasses$1('badge', {
802
803
  dot: dot
803
804
  }, className);
804
805
  return /*#__PURE__*/React__default["default"].createElement("span", _extends({}, props, {
805
- className: styledJsx_cjs.style.dynamic([["3372370275", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
806
+ className: styledJsx_cjs.style.dynamic([["2850533964", [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
806
807
  }), !dot && children, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
807
- id: "3372370275",
808
+ id: "2850533964",
808
809
  dynamic: [bg, color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.5), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
809
- }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";font-weight:500;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.5), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
810
+ }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(color, ";border:0;font-size:").concat(SCALES.font(0.875), ";font-weight:bold;text-transform:none;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.5), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
810
811
  }
811
812
 
812
813
  BadgeComponent.displayName = 'BolioUIBadge';
@@ -296,7 +296,7 @@ var defaultLayout = {
296
296
  pageWidthWithMargin: '930pt',
297
297
  breakpointMobile: defaultBreakpoints.xs.max,
298
298
  breakpointTablet: defaultBreakpoints.sm.max,
299
- radius: '6px',
299
+ radius: '10px',
300
300
  unit: '16px'
301
301
  };
302
302
 
@@ -311,32 +311,32 @@ var palette$1 = {
311
311
  accents_6: '#444',
312
312
  accents_7: '#333',
313
313
  accents_8: '#111',
314
- selection: '#cee4fe',
314
+ selection: 'rgba(206,228,254, 0.5)',
315
315
  code: '#C25FFF',
316
- border: '#999',
316
+ border: '#eaeaea',
317
317
  primary: '#0072F6',
318
- primaryLight: '#96C1F3',
319
- primaryLighter: '#CEE4FF',
318
+ primaryLight: '#CEE4FF',
319
+ primaryLighter: '#96C1F3',
320
320
  primaryDark: '#00254E',
321
321
  secondary: '#7828C9',
322
- secondaryLighter: '#D1B1F1',
323
322
  secondaryLight: '#EADCF9',
323
+ secondaryLighter: '#D1B1F1',
324
324
  secondaryDark: '#290E45',
325
325
  error: '#F31261',
326
- errorLight: '#FAA8C6',
327
- errorLighter: '#FDD8E6',
326
+ errorLight: '#FDD8E6',
327
+ errorLighter: '#FAA8C6',
328
328
  errorDark: '#4E041F',
329
329
  success: '#17C965',
330
- successLight: '#ADF5CD',
331
- successLighter: '#DAFBE9',
330
+ successLight: '#DAFBE9',
331
+ successLighter: '#ADF5CD',
332
332
  successDark: '#06371C',
333
333
  warning: '#F5A525',
334
- warningLight: '#FBDBA8',
335
- warningLighter: '#FDEFD9',
334
+ warningLight: '#FDEFD9',
335
+ warningLighter: '#FBDBA8',
336
336
  warningDark: '#4E3105',
337
337
  info: '#06B7DC',
338
- infoLighter: '#A5EEFE',
339
338
  infoLight: '#D7F8FF',
339
+ infoLighter: '#A5EEFE',
340
340
  infoDark: '#053B49',
341
341
  purple: '#f81ce5',
342
342
  alert: '#ff0080',
@@ -378,37 +378,37 @@ var palette = {
378
378
  accents_6: '#999',
379
379
  accents_7: '#eaeaea',
380
380
  accents_8: '#fafafa',
381
- selection: '#f81ce5',
381
+ selection: 'rgba(248,28,229, 0.5)',
382
382
  code: '#C25FFF',
383
- border: '#444',
383
+ border: '#333',
384
384
  primary: '#0072F6',
385
- primaryLight: '#96C1F3',
386
- primaryLighter: '#CEE4FF',
385
+ primaryLight: '#CEE4FF',
386
+ primaryLighter: '#96C1F3',
387
387
  primaryDark: '#00254E',
388
388
  secondary: '#7828C9',
389
- secondaryLighter: '#D1B1F1',
390
389
  secondaryLight: '#EADCF9',
390
+ secondaryLighter: '#D1B1F1',
391
391
  secondaryDark: '#290E45',
392
392
  error: '#F31261',
393
- errorLight: '#FAA8C6',
394
- errorLighter: '#FDD8E6',
393
+ errorLight: '#FDD8E6',
394
+ errorLighter: '#FAA8C6',
395
395
  errorDark: '#4E041F',
396
396
  success: '#17C965',
397
- successLight: '#ADF5CD',
398
- successLighter: '#DAFBE9',
397
+ successLight: '#DAFBE9',
398
+ successLighter: '#ADF5CD',
399
399
  successDark: '#06371C',
400
400
  warning: '#F5A525',
401
- warningLight: '#FBDBA8',
402
- warningLighter: '#FDEFD9',
401
+ warningLight: '#FDEFD9',
402
+ warningLighter: '#FBDBA8',
403
403
  warningDark: '#4E3105',
404
404
  info: '#06B7DC',
405
- infoLighter: '#A5EEFE',
406
405
  infoLight: '#D7F8FF',
406
+ infoLighter: '#A5EEFE',
407
407
  infoDark: '#053B49',
408
408
  purple: '#f81ce5',
409
409
  alert: '#ff0080',
410
410
  link: '#3291ff',
411
- pre: '#363450'
411
+ pre: '#111'
412
412
  };
413
413
  var expressiveness = {
414
414
  linkStyle: 'none',
@@ -416,9 +416,9 @@ var expressiveness = {
416
416
  dropdownBoxShadow: '0 0 0 1px #333',
417
417
  scrollerStart: 'rgba(255, 255, 255, 1)',
418
418
  scrollerEnd: 'rgba(255, 255, 255, 0)',
419
- shadowSmall: '0 0 0 1px #333',
420
- shadowMedium: '0 0 0 1px #333',
421
- shadowLarge: '0 0 0 1px #333',
419
+ shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
420
+ shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
421
+ shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
422
422
  portalOpacity: 0.75
423
423
  };
424
424
  var font = defaultFont;
@@ -804,9 +804,10 @@ var generateGetAllScaleProps = function generateGetAllScaleProps(props) {
804
804
  for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
805
805
  var key = _step2.value;
806
806
  var value = props[key];
807
- console.log('🚀 ~ file: utils.ts:32 ~ value:', value); // if (typeof value !== 'undefined') {
808
- // scaleProps[key as keyof ScaleProps] = value as any
809
- // }
807
+
808
+ if (typeof value !== 'undefined') {
809
+ scaleProps[key] = value;
810
+ }
810
811
  }
811
812
  } catch (err) {
812
813
  _iterator2.e(err);
@@ -1254,9 +1255,9 @@ var getButtonColors = function getButtonColors(palette, props) {
1254
1255
  ghost = props.ghost;
1255
1256
  var colors = {
1256
1257
  "default": {
1257
- bg: palette.background,
1258
- border: palette.border,
1259
- color: palette.accents_5
1258
+ bg: palette.accents_2,
1259
+ border: palette.accents_2,
1260
+ color: palette.foreground
1260
1261
  },
1261
1262
  primary: {
1262
1263
  bg: palette.primary,
@@ -1295,9 +1296,9 @@ var getButtonColors = function getButtonColors(palette, props) {
1295
1296
  }
1296
1297
  };
1297
1298
  if (disabled) return {
1298
- bg: palette.accents_1,
1299
- border: palette.accents_2,
1300
- color: '#ccc'
1299
+ bg: palette.accents_3,
1300
+ border: palette.accents_3,
1301
+ color: palette.accents_5
1301
1302
  };
1302
1303
  /**
1303
1304
  * The '-light' type is the same color as the common type,
@@ -1410,7 +1411,7 @@ var getButtonHoverColors = function getButtonHoverColors(palette, props) {
1410
1411
  })
1411
1412
  };
1412
1413
  if (disabled) return {
1413
- bg: palette.accents_1,
1414
+ bg: palette.accents_2,
1414
1415
  border: palette.accents_2,
1415
1416
  color: '#ccc'
1416
1417
  };
@@ -1441,7 +1442,7 @@ var getButtonDripColor = function getButtonDripColor(palette, props) {
1441
1442
  var type = props.type;
1442
1443
  var isLightHover = type === null || type === void 0 ? void 0 : type.endsWith('light');
1443
1444
  var hoverColors = getButtonHoverColors(palette, props);
1444
- return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65);
1445
+ return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_3, 0.65);
1445
1446
  };
1446
1447
 
1447
1448
  var _excluded = ["children", "disabled", "type", "loading", "shadow", "ghost", "rounded", "effect", "onClick", "auto", "icon", "htmlType", "iconRight", "className"];
@@ -1560,7 +1561,7 @@ var ButtonComponent = /*#__PURE__*/React__default["default"].forwardRef(function
1560
1561
  disabled: disabled,
1561
1562
  onClick: clickHandler
1562
1563
  }, props, {
1563
- 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) || "")
1564
+ 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) || "")
1564
1565
  }), loading && /*#__PURE__*/React__default["default"].createElement(ButtonLoading, {
1565
1566
  color: color
1566
1567
  }), childrenWithIcon, dripShow && /*#__PURE__*/React__default["default"].createElement(ButtonDrip$1, {
@@ -1569,9 +1570,9 @@ var ButtonComponent = /*#__PURE__*/React__default["default"].forwardRef(function
1569
1570
  color: dripColor,
1570
1571
  onCompleted: dripCompletedHandle
1571
1572
  }), /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
1572
- id: "3337261033",
1573
+ id: "1204671885",
1573
1574
  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]
1574
- }, ".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;}")));
1575
+ }, ".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;}")));
1575
1576
  });
1576
1577
  ButtonComponent.defaultProps = defaultProps;
1577
1578
  ButtonComponent.displayName = 'BolioUIButton';