@cashub/ui 0.13.5 → 0.13.7

package/Tab/TabTab.js

@@ -54,9 +54,9 @@ var TabTab = function TabTab(_ref) {
   }));
 };
 
-var Tab = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: transparent;\n  color: var(--font-on-mute);\n  padding: 10px var(--spacing-s);\n  border: none;\n  border-bottom: 4px solid transparent;\n  transition: color 0.3s, border 0.3s;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--color-white);\n  }\n\n  ", "\n"])), function (_ref2) {
+var Tab = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: transparent;\n  color: var(--font-on-mute);\n  padding: 10px var(--spacing-s);\n  border: none;\n  border-bottom: 4px solid transparent;\n  transition: color 0.3s, border 0.3s;\n  cursor: pointer;\n\n  &:hover {\n    color: var(--font-on-background);\n  }\n\n  ", "\n"])), function (_ref2) {
   var active = _ref2.active;
-  return active && "\n      border-color: var(--color-primary);\n      color: var(--color-white);\n    ";
+  return active && "\n      border-color: var(--color-primary);\n      color: var(--font-on-background);\n    ";
 });
 
 var _default = TabTab;

package/breadcrumb/Breadcrumb.js

@@ -43,7 +43,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  font-size: var(--font-body2);\n  line-height: var(--font-body1);\n  color: var(--font-on-primary);\n  padding: var(--spacing-s) 0;\n\n  > *:not(:last-child) {\n    display: flex;\n    align-items: center;\n    color: var(--font-on-primary);\n    overflow: hidden;\n\n    > p {\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    &:after {\n      content: '/';\n      padding: 0 var(--spacing-xs);\n    }\n  }\n\n  > *:last-child {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    color: var(--color-primary);\n  }\n\n  ", "\n"])), _media.default.tablet(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding-top: 0;\n  "]))));
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  font-size: var(--font-body2);\n  line-height: var(--font-body1);\n  color: var(--font-on-background);\n  padding: var(--spacing-s) 0;\n\n  > *:not(:last-child) {\n    display: flex;\n    align-items: center;\n    color: var(--font-on-background);\n    overflow: hidden;\n\n    > p {\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n\n    &:after {\n      content: '/';\n      padding: 0 var(--spacing-xs);\n    }\n  }\n\n  > *:last-child {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    color: var(--color-primary);\n  }\n\n  ", "\n"])), _media.default.tablet(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    padding-top: 0;\n  "]))));
 
 var _default = Breadcrumb;
 exports.default = _default;

package/button/IconButton.js

@@ -23,7 +23,7 @@ var IconButton = _styledComponents.default.div.attrs(function () {
   };
 })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 40px;\n  height: 40px;\n  transition: 0.3s;\n  position: relative;\n  border-radius: var(--border-radius-l);\n  color: ", ";\n  cursor: ", ";\n  margin: auto;\n\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n  > svg {\n    font-size: 1.5rem;\n    position: relative;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n\n    ", "\n\n    ", "\n  }\n"])), function (_ref) {
   var disabled = _ref.disabled;
-  return disabled ? 'var(--color-grey)' : 'var(--color-white)';
+  return disabled ? 'var(--color-grey)' : 'var(--font-on-background)';
 }, function (_ref2) {
   var disabled = _ref2.disabled;
   return disabled ? 'no-drop' : 'pointer';

package/callout/Callout.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Callout = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: var(--spacing);\n  border-radius: var(--border-radius);\n  background: var(--color-background4);\n  margin-bottom: var(--spacing);\n"])));
+var Callout = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: var(--spacing);\n  border-radius: var(--border-radius);\n  background: var(--color-background3);\n  margin-bottom: var(--spacing);\n"])));
 
 var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
 

package/datetimePicker/DatePicker.js

@@ -385,14 +385,14 @@ var DatePicker = function DatePicker(_ref) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n  color: var(--color-white);\n\n  display: ", ";\n"])), function (_ref2) {
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n  color: var(--font-on-background);\n\n  display: ", ";\n"])), function (_ref2) {
   var displayPicker = _ref2.displayPicker;
   return displayPicker ? 'block' : 'none';
 });
 
 var Week = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n"])));
 
-var Day = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--color-white);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
+var Day = _styledComponents.default.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  min-width: 36px;\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
   var selected = _ref3.selected;
   return selected && 'background: var(--color-hover);';
 }, function (_ref4) {

package/datetimePicker/DatePickerV2.js

@@ -419,7 +419,7 @@ var DatePickerV2 = function DatePickerV2(_ref) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n  color: var(--color-white);\n\n  display: ", ";\n"])), function (_ref2) {
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n  color: var(--font-on-background);\n\n  display: ", ";\n"])), function (_ref2) {
   var displayPicker = _ref2.displayPicker;
   return displayPicker ? 'block' : 'none';
 });
@@ -438,7 +438,7 @@ var Footer = _styledComponents.default.div(_templateObject5 || (_templateObject5
 
 var PickerInput = (0, _styledComponents.default)(_Input.default)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n"])));
 
-var Day = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: calc(100% / 7);\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--color-white);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
+var Day = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: calc(100% / 7);\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
   var selected = _ref5.selected;
   return selected && 'background: var(--color-hover);';
 }, function (_ref6) {

package/datetimePicker/DatetimePicker.js

@@ -81,7 +81,7 @@ var DatetimePicker = function DatetimePicker(_ref) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    > input {\n      width: 100%;\n      height: 36px;\n      color: var(--color-white);\n      background: transparent;\n      border-radius: var(--border-radius-l);\n      border: var(--border-width) solid var(--border-color);\n      padding: 0 var(--spacing-s);\n      outline: none;\n\n      ", "\n    }\n  }\n\n  .react-datepicker-popper {\n    z-index: 2;\n  }\n\n  .react-datepicker-popper[data-placement^='top'] {\n    padding-bottom: var(--spacing-xs);\n  }\n\n  .react-datepicker-popper[data-placement^='bottom'] {\n    padding-top: var(--spacing-xs);\n  }\n\n  .react-datepicker {\n    box-shadow: var(--box-shadow);\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--border-color);\n    padding: var(--spacing-s);\n    font-size: var(--font-body1);\n    color: var(--color-white);\n    background: var(--color-background1);\n\n    .react-datepicker__triangle {\n      &::before,\n      &::after {\n        display: none;\n      }\n    }\n\n    .react-datepicker__header {\n      border: none;\n      padding: 0;\n      background: var(--color-background1);\n    }\n\n    .react-datepicker__current-month {\n      line-height: 36px;\n      color: var(--color-white);\n      font-size: var(--font-body1);\n      font-weight: var(--font-normal);\n    }\n\n    .react-datepicker__day-names {\n      margin: 0;\n    }\n\n    .react-datepicker__day-name,\n    .react-datepicker__day {\n      width: 36px;\n      height: 36px;\n      line-height: 36px;\n      color: var(--color-white);\n      font-weight: var(--font-normal);\n      margin: 0;\n      border-radius: 4px;\n    }\n\n    .react-datepicker__day:hover {\n      background: var(--color-hover);\n    }\n\n    .react-datepicker__day--disabled {\n      color: var(--font-on-mute);\n      background: none !important;\n    }\n  }\n\n  .react-datepicker__month {\n    margin: 0;\n  }\n\n  .react-datepicker__navigation {\n    top: 0;\n    width: 36px;\n    height: 36px;\n    margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);\n    border-radius: 4px;\n\n    &.react-datepicker__navigation--previous {\n      left: 0;\n    }\n\n    &.react-datepicker__navigation--next {\n      right: 0;\n    }\n\n    &:hover {\n      background: var(--color-hover);\n    }\n\n    .react-datepicker__navigation-icon::before {\n      border-color: var(--color-white);\n    }\n\n    .react-datepicker__navigation-icon--previous::before {\n      right: -4px;\n    }\n\n    .react-datepicker__navigation-icon--next::before {\n      left: -4px;\n    }\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--in-selecting-range,\n  .react-datepicker__day--in-range,\n  .react-datepicker__month-text--selected,\n  .react-datepicker__month-text--in-selecting-range,\n  .react-datepicker__month-text--in-range,\n  .react-datepicker__quarter-text--selected,\n  .react-datepicker__quarter-text--in-selecting-range,\n  .react-datepicker__quarter-text--in-range,\n  .react-datepicker__year-text--selected,\n  .react-datepicker__year-text--in-selecting-range,\n  .react-datepicker__year-text--in-range {\n    background: var(--color-primary) !important;\n  }\n\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected {\n    background: none;\n  }\n\n  .react-datepicker__input-time-container {\n    margin: 0;\n    margin-top: var(--spacing-s);\n    margin-left: var(--spacing-xs);\n\n    .react-datepicker-time__input input {\n      height: 36px;\n      padding: 0 var(--spacing-xs);\n      border-radius: var(--border-radius);\n      border: var(--border-width) solid var(--border-color);\n      background: transparent;\n      color: var(--font-on-background);\n      outline: none;\n    }\n  }\n"])), function (_ref2) {
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .react-datepicker-wrapper,\n  .react-datepicker__input-container {\n    > input {\n      width: 100%;\n      height: 36px;\n      color: var(--font-on-background);\n      background: transparent;\n      border-radius: var(--border-radius-l);\n      border: var(--border-width) solid var(--border-color);\n      padding: 0 var(--spacing-s);\n      outline: none;\n\n      ", "\n    }\n  }\n\n  .react-datepicker-popper {\n    z-index: 2;\n  }\n\n  .react-datepicker-popper[data-placement^='top'] {\n    padding-bottom: var(--spacing-xs);\n  }\n\n  .react-datepicker-popper[data-placement^='bottom'] {\n    padding-top: var(--spacing-xs);\n  }\n\n  .react-datepicker {\n    box-shadow: var(--box-shadow);\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--border-color);\n    padding: var(--spacing-s);\n    font-size: var(--font-body1);\n    color: var(--font-on-background);\n    background: var(--color-background1);\n\n    .react-datepicker__triangle {\n      &::before,\n      &::after {\n        display: none;\n      }\n    }\n\n    .react-datepicker__header {\n      border: none;\n      padding: 0;\n      background: var(--color-background1);\n    }\n\n    .react-datepicker__current-month {\n      line-height: 36px;\n      color: var(--font-on-background);\n      font-size: var(--font-body1);\n      font-weight: var(--font-normal);\n    }\n\n    .react-datepicker__day-names {\n      margin: 0;\n    }\n\n    .react-datepicker__day-name,\n    .react-datepicker__day {\n      width: 36px;\n      height: 36px;\n      line-height: 36px;\n      color: var(--font-on-background);\n      font-weight: var(--font-normal);\n      margin: 0;\n      border-radius: 4px;\n    }\n\n    .react-datepicker__day:hover {\n      background: var(--color-hover);\n    }\n\n    .react-datepicker__day--disabled {\n      color: var(--font-on-mute);\n      background: none !important;\n    }\n  }\n\n  .react-datepicker__month {\n    margin: 0;\n  }\n\n  .react-datepicker__navigation {\n    top: 0;\n    width: 36px;\n    height: 36px;\n    margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);\n    border-radius: 4px;\n\n    &.react-datepicker__navigation--previous {\n      left: 0;\n    }\n\n    &.react-datepicker__navigation--next {\n      right: 0;\n    }\n\n    &:hover {\n      background: var(--color-hover);\n    }\n\n    .react-datepicker__navigation-icon::before {\n      border-color: var(--font-on-background);;\n    }\n\n    .react-datepicker__navigation-icon--previous::before {\n      right: -4px;\n    }\n\n    .react-datepicker__navigation-icon--next::before {\n      left: -4px;\n    }\n  }\n\n  .react-datepicker__day--selected,\n  .react-datepicker__day--in-selecting-range,\n  .react-datepicker__day--in-range,\n  .react-datepicker__month-text--selected,\n  .react-datepicker__month-text--in-selecting-range,\n  .react-datepicker__month-text--in-range,\n  .react-datepicker__quarter-text--selected,\n  .react-datepicker__quarter-text--in-selecting-range,\n  .react-datepicker__quarter-text--in-range,\n  .react-datepicker__year-text--selected,\n  .react-datepicker__year-text--in-selecting-range,\n  .react-datepicker__year-text--in-range {\n    background: var(--color-primary) !important;\n  }\n\n  .react-datepicker__day--keyboard-selected,\n  .react-datepicker__month-text--keyboard-selected,\n  .react-datepicker__quarter-text--keyboard-selected,\n  .react-datepicker__year-text--keyboard-selected {\n    background: none;\n  }\n\n  .react-datepicker__input-time-container {\n    margin: 0;\n    margin-top: var(--spacing-s);\n    margin-left: var(--spacing-xs);\n\n    .react-datepicker-time__input input {\n      height: 36px;\n      padding: 0 var(--spacing-xs);\n      border-radius: var(--border-radius);\n      border: var(--border-width) solid var(--border-color);\n      background: transparent;\n      color: var(--font-on-background);\n      outline: none;\n    }\n  }\n"])), function (_ref2) {
   var disabled = _ref2.disabled;
   return disabled ? 'cursor: not-allowed; opacity: 0.5;' : '';
 });

package/datetimePicker/DatetimePickerV2.js

@@ -450,7 +450,7 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n  color: var(--color-white);\n\n  display: ", ";\n"])), function (_ref2) {
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n  color: var(--font-on-background);\n\n  display: ", ";\n"])), function (_ref2) {
   var displayPicker = _ref2.displayPicker;
   return displayPicker ? 'block' : 'none';
 });
@@ -469,7 +469,7 @@ var Footer = _styledComponents.default.div(_templateObject5 || (_templateObject5
 
 var PickerInput = (0, _styledComponents.default)(_Input.default)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n"])));
 
-var Day = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: calc(100% / 7);\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--color-white);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
+var Day = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: calc(100% / 7);\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
   var selected = _ref5.selected;
   return selected && 'background: var(--color-hover);';
 }, function (_ref6) {

package/datetimePicker/accordion/Month.js

@@ -158,9 +158,9 @@ var Month = function Month(_ref) {
 
 var Header = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  position: relative;\n\n  > div {\n    width: 72px;\n    line-height: 36px;\n    text-align: center;\n  }\n\n  &::before {\n    content: '';\n    border-bottom: var(--border-width) solid var(--border-color);\n    position: absolute;\n    width: 300px;\n    bottom: 0;\n    z-index: 1;\n    right: -16px;\n  }\n"])));
 
-var IconButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  background: var(--color-background1);\n  border: none;\n  color: var(--color-white);\n  padding: 0;\n  transition: 0.3s;\n\n  &:hover {\n    color: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
+var IconButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  background: var(--color-background1);\n  border: none;\n  color: var(--font-on-background);\n  padding: 0;\n  transition: 0.3s;\n\n  &:hover {\n    color: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
   var disabled = _ref2.disabled;
-  return disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n\n      &:hover {\n        color: var(--color-white);\n      }\n    "])));
+  return disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n\n      &:hover {\n        color: var(--font-on-background);\n      }\n    "])));
 }, function (_ref3) {
   var right = _ref3.right,
       rotate = _ref3.rotate;
@@ -175,7 +175,7 @@ var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 =
   return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      min-height: ", "px;\n    "])), fixedYear ? '192' : '144');
 });
 
-var Item = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: calc(100% / 3);\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  border-radius: var(--border-radius-s);\n  padding: 0;\n  border: none;\n  color: var(--whiet);\n  background: var(--color-background1);\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref6) {
+var Item = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: calc(100% / 3);\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  border-radius: var(--border-radius-s);\n  padding: 0;\n  border: none;\n  color: var(--font-on-background);\n  background: var(--color-background1);\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref6) {
   var disabled = _ref6.disabled;
   return !disabled && 'background: var(--color-primary)';
 }, function (_ref7) {

package/datetimePicker/accordion/Year.js

@@ -212,9 +212,9 @@ var Year = function Year(_ref) {
 
 var Header = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  position: relative;\n\n  > div {\n    width: 72px;\n    line-height: 36px;\n    text-align: center;\n  }\n\n  &::before {\n    content: '';\n    border-bottom: var(--border-width) solid var(--border-color);\n    position: absolute;\n    width: 300px;\n    bottom: 0;\n    z-index: 1;\n    right: -16px;\n  }\n"])));
 
-var IconButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  background: var(--color-background1);\n  border: none;\n  color: var(--color-white);\n  padding: 0;\n  transition: 0.3s;\n\n  &:hover {\n    color: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
+var IconButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  background: var(--color-background1);\n  border: none;\n  color: var(--font-on-background);\n  padding: 0;\n  transition: 0.3s;\n\n  &:hover {\n    color: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
   var disabled = _ref2.disabled;
-  return disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n\n      &:hover {\n        color: var(--color-white);\n      }\n    "])));
+  return disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n\n      &:hover {\n        color: var(--font-on-background);\n      }\n    "])));
 }, function (_ref3) {
   var right = _ref3.right,
       rotate = _ref3.rotate;
@@ -229,7 +229,7 @@ var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 =
   return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    min-height: ", "px};\n    transition: .3s;\n    overflow-y: scroll;\n    gap: 12px 0;\n    ", "\n  "])), fixedYear ? '144' : '192', _scrollbar.default);
 });
 
-var Item = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: calc(100% / 3);\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  border-radius: var(--border-radius-s);\n  padding: 0;\n  border: none;\n  color: var(--whiet);\n  background: var(--color-background1);\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref6) {
+var Item = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: calc(100% / 3);\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  border-radius: var(--border-radius-s);\n  padding: 0;\n  border: none;\n  color: var(--font-on-background);\n  background: var(--color-background1);\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref6) {
   var disabled = _ref6.disabled;
   return !disabled && 'background: var(--color-primary);';
 }, function (_ref7) {

package/datetimePicker/subComponent/Accordion.js

@@ -307,9 +307,9 @@ var Accordion = function Accordion(_ref) {
   });
 };
 
-var IconButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  background: var(--color-background1);\n  border: none;\n  color: var(--color-white);\n  padding: 0;\n  transition: 0.3s;\n\n  &:hover {\n    color: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
+var IconButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  background: var(--color-background1);\n  border: none;\n  color: var(--font-on-background);\n  padding: 0;\n  transition: 0.3s;\n\n  &:hover {\n    color: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
   var disabled = _ref2.disabled;
-  return disabled && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n\n      &:hover {\n        color: var(--color-white);\n      }\n    "])));
+  return disabled && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n\n      &:hover {\n        color: var(--font-on-background);\n      }\n    "])));
 }, function (_ref3) {
   var right = _ref3.right,
       $display = _ref3.$display;
@@ -327,7 +327,7 @@ var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 =
   return type && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      min-height: ", "px};\n      transition: .3s;\n      \n      ", ";\n  "])), type === 'year' ? '197' : fixedYear ? '144' : '192', type === 'year' && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          overflow-y: scroll;\n          gap: 12px 0;\n          ", "\n        "])), _scrollbar.default));
 });
 
-var Item = _styledComponents.default.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 84px;\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  border-radius: var(--border-radius-s);\n  padding: 0;\n  border: none;\n  color: var(--whiet);\n  background: var(--color-background1);\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref6) {
+var Item = _styledComponents.default.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 84px;\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  border-radius: var(--border-radius-s);\n  padding: 0;\n  border: none;\n  color: var(--font-on-background);\n  background: var(--color-background1);\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref6) {
   var disabled = _ref6.disabled;
   return !disabled && 'background: var(--color-primary)';
 }, function (_ref7) {

package/dropzone/FileDropzone.js

@@ -478,7 +478,7 @@ var FileDropzone = function FileDropzone(_ref) {
   });
 };
 
-var Dropzone = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 200px;\n  border: 4px dashed var(--border-color);\n  border-radius: var(--border-radius);\n  color: var(--font-on-primary);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 0 var(--spacing-s);\n  cursor: ", ";\n\n  ", ";\n\n  &:focus {\n    border-color: var(--color-primary);\n  }\n"])), function (_ref3) {
+var Dropzone = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 200px;\n  border: 4px dashed var(--border-color);\n  border-radius: var(--border-radius);\n  color: var(--font-on-background);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  padding: 0 var(--spacing-s);\n  cursor: ", ";\n\n  ", ";\n\n  &:focus {\n    border-color: var(--color-primary);\n  }\n"])), function (_ref3) {
   var reachedLimit = _ref3.reachedLimit;
   return reachedLimit ? 'default' : 'pointer';
 }, function (_ref4) {

package/dropzone/ImageDropzone.js

@@ -296,7 +296,7 @@ var ImageDropzone = function ImageDropzone(_ref) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 200px;\n  border: 4px dashed var(--border-color);\n  border-radius: var(--border-radius-l);\n  color: var(--font-on-primary);\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  padding: var(--spacing-xs);\n  cursor: pointer;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  &:focus {\n    border-color: var(--color-primary);\n  }\n"])), function (_ref2) {
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 200px;\n  border: 4px dashed var(--border-color);\n  border-radius: var(--border-radius-l);\n  color: var(--font-on-background);\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  padding: var(--spacing-xs);\n  cursor: pointer;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  &:focus {\n    border-color: var(--color-primary);\n  }\n"])), function (_ref2) {
   var reachedLimit = _ref2.reachedLimit;
   return reachedLimit && 'cursor:default;';
 }, function (_ref3) {

package/form/Checkbox.js

@@ -73,7 +73,7 @@ var StyledLabel = (0, _styledComponents.default)(_Label.default)(_templateObject
 
 var Unchecked = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n  border: var(--border-width) solid var(--border-color);\n"])));
 
-var Checked = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n  border: var(--border-width) solid var(--color-primary);\n  background: var(--color-primary);\n  position: relative;\n\n  > svg {\n    position: absolute;\n    color: var(--color-white);\n    font-size: var(--font-h3);\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])));
+var Checked = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n  border: var(--border-width) solid var(--color-primary);\n  background: var(--color-primary);\n  position: relative;\n\n  > svg {\n    position: absolute;\n    color: var(--font-on-primary);\n    font-size: var(--font-h3);\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])));
 
 var Text = _styledComponents.default.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  word-break: break-all;\n"])));
 

package/form/SwitchButton.js

@@ -54,7 +54,7 @@ var Label = _styledComponents.default.label(_templateObject || (_templateObject
 
 var Checkbox = _styledComponents.default.input(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n"])));
 
-var Switch = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: var(--font-on-primary);\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  ", "\n"])), function (_ref3) {
+var Switch = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: var(--font-on-background);\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  ", "\n"])), function (_ref3) {
   var disabled = _ref3.disabled;
   return disabled && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n    "])));
 });

package/form/Textarea.js

@@ -17,7 +17,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Textarea = _styledComponents.default.textarea(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  border: var(--border-width) solid var(--border-color);\n  padding: 10px var(--spacing-s);\n  border-radius: var(--border-radius);\n  background: transparent;\n  color: var(--color-white);\n  transition: 0.3s;\n  line-height: 1.5;\n\n  /* disable resize because currently cannot fully control the resizer element */\n  resize: none;\n\n  ", "\n\n  &:focus {\n    border: var(--border-width) solid var(--color-primary);\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  ", "\n"])), _scrollbar.default, (0, _inputPlaceholder.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: var(--font-on-mute);\n  "]))));
+var Textarea = _styledComponents.default.textarea(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: 100%;\n  border: var(--border-width) solid var(--border-color);\n  padding: 10px var(--spacing-s);\n  border-radius: var(--border-radius);\n  background: transparent;\n  color: var(--font-on-background);\n  transition: 0.3s;\n  line-height: 1.5;\n\n  /* disable resize because currently cannot fully control the resizer element */\n  resize: none;\n\n  ", "\n\n  &:focus {\n    border: var(--border-width) solid var(--color-primary);\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  ", "\n"])), _scrollbar.default, (0, _inputPlaceholder.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: var(--font-on-mute);\n  "]))));
 
 var _default = Textarea;
 exports.default = _default;

package/iconbox/IconBox.js

@@ -44,7 +44,7 @@ var IconBox = function IconBox(_ref) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: var(--spacing-l);\n  margin-bottom: var(--spacing);\n  border-radius: var(--border-radius);\n  background: var(--color-background2);\n  color: var(--font-on-background);\n\n  background-color: #222143;\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-position: right bottom;\n  background-size: 30% 70%;\n"])), _bgChartTriangle.default);
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: var(--spacing-l);\n  margin-bottom: var(--spacing);\n  border-radius: var(--border-radius);\n  background: var(--color-background2);\n  color: var(--font-on-background);\n\n  background: var(--color-background2);\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-position: right bottom;\n  background-size: 30% 70%;\n"])), _bgChartTriangle.default);
 
 var IconBoxHead = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-bottom: var(--spacing);\n"])));
 

package/link/LinkSpan.js

@@ -39,7 +39,7 @@ var LinkSpan = function LinkSpan(_ref) {
 var Link = _styledComponents.default.span.attrs(function (props) {
   return {
     fontSize: props.fontSmall ? '1rem' : '9rem',
-    color: props.light ? '#fff' : 'rgba(255, 255, 255, 0.5)',
+    color: props.light ? 'var(--font-on-background)' : 'rgba(255, 255, 255, 0.5)',
     borderColor: props.light ? '#e6e6e6' : '#3e5fff'
   };
 })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: 1.5;\n  font-weight: 500;\n  color: ", ";\n  cursor: pointer;\n  position: relative;\n  display: inline-block;\n\n  &:after {\n    display: block;\n    content: '';\n    position: absolute;\n    bottom: 0;\n    top: 1rem;\n    left: 0;\n    width: 0%;\n    transition: width 0.3s ease;\n  }\n\n  &:hover {\n    &:after {\n      width: 100%;\n      border-bottom: 1px solid ", ";\n      opacity: 0.5;\n    }\n  }\n"])), function (_ref2) {

package/map/CustomLeafletMapContainer.js

@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var CustomLeafletMapContainer = (0, _styledComponents.default)(_reactLeaflet.MapContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", "px;\n  border-radius: var(--border-radius);\n  z-index: 1;\n\n  &:focus {\n    border: 1px solid var(--border-color);\n    box-shadow: var(--box-shadow);\n  }\n\n  .leaflet-control-container {\n    .leaflet-control-zoom {\n      box-shadow: var(--box-shadow);\n      border-radius: var(--border-radius);\n\n      a {\n        background: transparent;\n        border-bottom: 1px solid var(--border-color);\n        color: #fff;\n\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.leaflet-disabled {\n          opacity: 0.5;\n        }\n      }\n    }\n\n    .leaflet-draw {\n      box-shadow: var(--box-shadow);\n      border-radius: var(--border-radius);\n\n      a {\n        background-color: var(--color-background1);\n      }\n\n      .leaflet-draw-draw-polyline {\n        background-position: -3px -3px;\n      }\n\n      .leaflet-draw-draw-polygon {\n        background-position: -32px -3px;\n      }\n\n      .leaflet-draw-draw-rectangle {\n        background-position: -63px -3px;\n      }\n\n      .leaflet-draw-draw-circle {\n        background-position: -93px -3px;\n      }\n\n      .leaflet-draw-draw-marker {\n        background-position: -123px -3px;\n      }\n\n      .leaflet-draw-draw-circlemarker {\n        background-position: -273px -3px;\n      }\n\n      .leaflet-draw-edit-edit {\n        background-position: -213px -3px;\n      }\n\n      .leaflet-draw-edit-remove {\n        background-position: -243px -3px;\n      }\n    }\n\n    .leaflet-left .leaflet-control {\n      margin-left: var(--spacing-s);\n    }\n\n    .leaflet-right .leaflet-control {\n      margin-right: var(--spacing-s);\n    }\n\n    .leaflet-top .leaflet-control {\n      margin-top: var(--spacing-s);\n    }\n\n    .leaflet-control {\n      font-weight: bold;\n      background: var(--color-background1);\n\n      &.leaflet-control-attribution {\n        background: var(--font-on-mute);\n        margin: 0;\n      }\n    }\n  }\n\n  .leaflet-edit-move {\n    border-radius: 50px;\n    border-color: var(--border-color);\n  }\n\n  .leaflet-edit-resize {\n    border-radius: 50px;\n    border-color: var(--border-color);\n  }\n\n  &.leaflet-touch {\n    .leaflet-bar {\n      border: none;\n\n      a {\n        width: 24px;\n        height: 24px;\n        line-height: 24px;\n      }\n    }\n\n    .leaflet-left .leaflet-control {\n      margin-left: var(--spacing-s);\n    }\n\n    .leaflet-right .leaflet-control {\n      margin-right: var(--spacing-s);\n    }\n\n    .leaflet-top .leaflet-control {\n      margin-top: var(--spacing-s);\n    }\n  }\n\n  .marker-cluster {\n    background: var(--color-primary) a1;\n\n    div {\n      background: var(--color-primary);\n    }\n  }\n\n  .leaflet-popup-content-wrapper {\n    background: transparent;\n    box-shadow: unset;\n  }\n\n  .leaflet-popup-tip {\n    display: none;\n  }\n\n  .sr-only {\n    display: none;\n  }\n"])), function (_ref) {
+var CustomLeafletMapContainer = (0, _styledComponents.default)(_reactLeaflet.MapContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", "px;\n  border-radius: var(--border-radius);\n  z-index: 1;\n\n  &:focus {\n    border: 1px solid var(--border-color);\n    box-shadow: var(--box-shadow);\n  }\n\n  .leaflet-control-container {\n    .leaflet-control-zoom {\n      box-shadow: var(--box-shadow);\n      border-radius: var(--border-radius);\n\n      a {\n        background: transparent;\n        border-bottom: 1px solid var(--border-color);\n        color: var(--font-on-background);\n\n        &:last-child {\n          border-bottom: none;\n        }\n\n        &.leaflet-disabled {\n          opacity: 0.5;\n        }\n      }\n    }\n\n    .leaflet-draw {\n      box-shadow: var(--box-shadow);\n      border-radius: var(--border-radius);\n\n      a {\n        background-color: var(--color-background1);\n      }\n\n      .leaflet-draw-draw-polyline {\n        background-position: -3px -3px;\n      }\n\n      .leaflet-draw-draw-polygon {\n        background-position: -32px -3px;\n      }\n\n      .leaflet-draw-draw-rectangle {\n        background-position: -63px -3px;\n      }\n\n      .leaflet-draw-draw-circle {\n        background-position: -93px -3px;\n      }\n\n      .leaflet-draw-draw-marker {\n        background-position: -123px -3px;\n      }\n\n      .leaflet-draw-draw-circlemarker {\n        background-position: -273px -3px;\n      }\n\n      .leaflet-draw-edit-edit {\n        background-position: -213px -3px;\n      }\n\n      .leaflet-draw-edit-remove {\n        background-position: -243px -3px;\n      }\n    }\n\n    .leaflet-left .leaflet-control {\n      margin-left: var(--spacing-s);\n    }\n\n    .leaflet-right .leaflet-control {\n      margin-right: var(--spacing-s);\n    }\n\n    .leaflet-top .leaflet-control {\n      margin-top: var(--spacing-s);\n    }\n\n    .leaflet-control {\n      font-weight: bold;\n      background: var(--color-background1);\n\n      &.leaflet-control-attribution {\n        background: var(--font-on-mute);\n        margin: 0;\n      }\n    }\n  }\n\n  .leaflet-edit-move {\n    border-radius: 50px;\n    border-color: var(--border-color);\n  }\n\n  .leaflet-edit-resize {\n    border-radius: 50px;\n    border-color: var(--border-color);\n  }\n\n  &.leaflet-touch {\n    .leaflet-bar {\n      border: none;\n\n      a {\n        width: 24px;\n        height: 24px;\n        line-height: 24px;\n      }\n    }\n\n    .leaflet-left .leaflet-control {\n      margin-left: var(--spacing-s);\n    }\n\n    .leaflet-right .leaflet-control {\n      margin-right: var(--spacing-s);\n    }\n\n    .leaflet-top .leaflet-control {\n      margin-top: var(--spacing-s);\n    }\n  }\n\n  .marker-cluster {\n    background: var(--color-primary) a1;\n\n    div {\n      background: var(--color-primary);\n    }\n  }\n\n  .leaflet-popup-content-wrapper {\n    background: transparent;\n    box-shadow: unset;\n  }\n\n  .leaflet-popup-tip {\n    display: none;\n  }\n\n  .sr-only {\n    display: none;\n  }\n"])), function (_ref) {
   var height = _ref.height;
   return height;
 });

package/modal/TitleModal.js

@@ -279,7 +279,7 @@ var Container = _styledComponents.default.div(_templateObject2 || (_templateObje
   }
 }));
 
-var Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-s) 56px var(--spacing-s) var(--spacing-s);\n  border-bottom: var(--border-width) solid var(--border-color);\n  min-height: 64px;\n  color: var(--font-on-primary);\n\n  > svg {\n    position: absolute;\n    top: 24px;\n    right: calc(12px + var(--spacing));\n    color: var(--font-on-mute);\n    font-size: var(--font-body1);\n    cursor: pointer;\n  }\n"])));
+var Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-s) 56px var(--spacing-s) var(--spacing-s);\n  border-bottom: var(--border-width) solid var(--border-color);\n  min-height: 64px;\n  color: var(--font-on-background);\n\n  > svg {\n    position: absolute;\n    top: 24px;\n    right: calc(12px + var(--spacing));\n    color: var(--font-on-mute);\n    font-size: var(--font-body1);\n    cursor: pointer;\n  }\n"])));
 
 var Body = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  padding: var(--spacing);\n  overflow-y: auto;\n  overflow-x: hidden;\n\n  ", "\n\n  ", "\n"])), _scrollbar.default, function (_ref9) {
   var noPaddingBottom = _ref9.noPaddingBottom;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.13.5",
+  "version": "0.13.7",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",

package/section/Section.js

@@ -19,7 +19,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Section = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  color: var(--color-white);\n  padding: var(--spacing);\n  margin-bottom: var(--spacing);\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  \n  ", "\n"])), function (_ref) {
+var Section = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  color: var(--font-on-background);\n  padding: var(--spacing);\n  margin-bottom: var(--spacing);\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n  \n  ", "\n"])), function (_ref) {
   var backgroundReverse = _ref.backgroundReverse;
   return backgroundReverse && 'background: var(--color-background2);';
 }, function (_ref2) {
@@ -51,10 +51,10 @@ var Section = _styledComponents.default.div(_templateObject || (_templateObject
   return fullHeight && 'height: calc(100% - var(--spacing));';
 }, function (_ref11) {
   var backgroundMarker = _ref11.backgroundMarker;
-  return backgroundMarker && "\n      background-color: #222143;\n      background-image: url(".concat(_bgChartCircle.default, "), url(").concat(_bgChartTriangle.default, ");\n      background-repeat: no-repeat;\n      background-position: left top, right bottom;\n      background-size: 337px 312px, 166px 225px;\n    ");
+  return backgroundMarker && "\n      background: var(--color-background2);\n      background-image: url(".concat(_bgChartCircle.default, "), url(").concat(_bgChartTriangle.default, ");\n      background-repeat: no-repeat;\n      background-position: left top, right bottom;\n      background-size: 337px 312px, 166px 225px;\n    ");
 }, function (_ref12) {
   var backgroundMap = _ref12.backgroundMap;
-  return backgroundMap && "\n      background-color: #222143;\n      background-image: url(".concat(_map.default, ");\n      background-repeat: no-repeat;\n      background-size: cover;\n    ");
+  return backgroundMap && "\n      background: var(--color-background2);\n      background-image: url(".concat(_map.default, ");\n      background-repeat: no-repeat;\n      background-size: cover;\n    ");
 }, function (_ref13) {
   var border = _ref13.border;
   return border && 'border: var(--border-width) solid var(--border-color);';

package/select/Select.js

@@ -615,7 +615,7 @@ var Select = function Select(_ref) {
   });
 };
 
-var Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 36px;\n  min-width: 160px;\n  cursor: pointer;\n  position: relative;\n  background: transparent;\n  color: var(--color-white);\n  font-size: var(--font-body1);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius-l);\n  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", "\n  ", "\n  \n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
+var Combobox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 36px;\n  min-width: 160px;\n  cursor: pointer;\n  position: relative;\n  background: transparent;\n  color: var(--font-on-background);\n  font-size: var(--font-body1);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius-l);\n  padding: 0 calc(var(--spacing-s) * 2 + 8px) 0 var(--spacing-s);\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", "\n  ", "\n  \n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref2) {
   var disabled = _ref2.disabled;
   return !disabled && "\n        border-color: var(--color-primary);\n        outline: none;\n      ";
 }, function (_ref3) {

package/select/subComponent/ListBox.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var ListBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  visibility: ", ";\n  background: var(--color-background1);\n  color: var(--color-white);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  width: ", "px;\n  z-index: 31;\n"])), function (_ref) {
+var ListBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  visibility: ", ";\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  width: ", "px;\n  z-index: 31;\n"])), function (_ref) {
   var $display = _ref.$display;
   return $display ? 'visible' : 'hidden';
 }, function (_ref2) {

package/select/subComponent/SearchBox.js

@@ -45,7 +45,7 @@ var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject
 
 Wrapper.displayName = 'Wrapper';
 
-var SearchInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: var(--color-background1);\n  color: var(--color-white);\n  border-radius: var(--border-radius-l);\n  border: var(--border-width) solid var(--border-color);\n  outline: none;\n  width: 100%;\n  padding: 10px var(--spacing-s) 10px calc(var(--spacing-s) * 2 + 8px);\n  max-height: 36px;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), (0, _inputPlaceholder.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    color: var(--font-on-mute);\n  "]))));
+var SearchInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  border-radius: var(--border-radius-l);\n  border: var(--border-width) solid var(--border-color);\n  outline: none;\n  width: 100%;\n  padding: 10px var(--spacing-s) 10px calc(var(--spacing-s) * 2 + 8px);\n  max-height: 36px;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", "\n"])), (0, _inputPlaceholder.default)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    color: var(--font-on-mute);\n  "]))));
 
 SearchInput.displayName = 'SearchInput';
 var _default = SearchBox;

package/select/subComponent/SelectedMultiple.js

@@ -30,7 +30,7 @@ var SelectedMultiple = function SelectedMultiple(_ref) {
   });
 };
 
-var Selected = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  background: var(--color-background4);\n  border-radius: var(--border-radius-l);\n  padding: 0.25rem calc(var(--spacing-xs) + 4px);\n  margin: 4px 10px 4px 0;\n  color: var(--font-on-primary);\n  font-weight: var(--font-normal);\n  word-break: break-all;\n\n  > span {\n    display: flex;\n    align-items: center;\n\n    > svg {\n      margin-right: var(--spacing-xs);\n      color: var(--font-on-primary);\n    }\n  }\n"])));
+var Selected = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  background: var(--color-background3);\n  border-radius: var(--border-radius-l);\n  padding: 0.25rem calc(var(--spacing-xs) + 4px);\n  margin: 4px 10px 4px 0;\n  color: var(--font-on-background);\n  font-weight: var(--font-normal);\n  word-break: break-all;\n\n  > span {\n    display: flex;\n    align-items: center;\n\n    > svg {\n      margin-right: var(--spacing-xs);\n      color: var(--font-on-background);\n    }\n  }\n"])));
 
 var _default = SelectedMultiple;
 exports.default = _default;

package/select/subComponent/SelectedSingle.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var SelectedSingle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--font-on-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+var SelectedSingle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--font-on-background);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 
 SelectedSingle.displayName = 'SelectedSingle';
 var _default = SelectedSingle;

package/styles/theme/dark.theme.js

@@ -26,8 +26,7 @@ var colorStyle = {
   scrollBarColor: 'rgba(89, 126, 247, 0.3)',
   bgColor1: '#13142e',
   bgColor2: '#222143',
-  bgColor3: '#2d2c4c',
-  bgColor4: '#2d2a5d',
+  bgColor3: '#2d2a5d',
   backdropBg: 'rgba(0, 0, 0, 0.5)'
 }; // Common font style
 
@@ -53,7 +52,7 @@ var fontStyle = {
 var darkTheme = {
   desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
     boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
-    borderColor: '#5b5f6f',
+    borderColor: colorStyle.colorGrey,
     borderWidth: '1px',
     borderRadiusS: '0.5rem',
     borderRadius: '1rem',
@@ -66,7 +65,7 @@ var darkTheme = {
   }),
   tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
     boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
-    borderColor: '#5b5f6f',
+    borderColor: colorStyle.colorGrey,
     borderWidth: '1px',
     borderRadiusS: '0.5rem',
     borderRadius: '1rem',
@@ -79,7 +78,7 @@ var darkTheme = {
   }),
   mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
     boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
-    borderColor: '#5b5f6f',
+    borderColor: colorStyle.colorGrey,
     borderWidth: '1px',
     borderRadiusS: '0.5rem',
     borderRadius: '1rem',

package/styles/theme/index.js

@@ -7,10 +7,13 @@ exports.default = void 0;
 
 var _dark = _interopRequireDefault(require("./dark.theme"));
 
+var _light = _interopRequireDefault(require("./light.theme"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var themes = {
-  dark: _dark.default
+  dark: _dark.default,
+  light: _light.default
 };
 var _default = themes;
 exports.default = _default;

package/styles/theme/light.theme.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// Currently, some style is all same for all viewport size
+// Common color style
+var colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#353351',
+  colorGrey: '#5b5f6f',
+  colorPrimary: '#91A2F8',
+  colorSuccess: '#93E7E2',
+  colorWarning: '#FFDFAF',
+  colorDanger: '#F495A1',
+  colorHover: 'rgba(89, 126, 247, 0.2)',
+  colorActive: 'rgba(89, 126, 247, 0.2)',
+  scrollBarColor: 'rgba(89, 126, 247, 0.3)',
+  bgColor1: '#F0ECFF',
+  bgColor2: '#F8F4FF',
+  bgColor3: '#E6E1FF',
+  backdropBg: 'rgba(0, 0, 0, 0.5)'
+}; // Common font style
+
+var fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.colorDark,
+  fontOnSuccess: colorStyle.colorDark,
+  fontOnWarning: colorStyle.colorDark,
+  fontOnDanger: colorStyle.colorDark,
+  fontOnBg: colorStyle.colorDark,
+  fontMutedColor: 'rgba(53, 51, 81, 0.5)'
+}; // Theme stylesheet
+
+var lightTheme = {
+  desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem'
+  }),
+  tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  }),
+  mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  })
+};
+var _default = lightTheme;
+exports.default = _default;

package/table/GridTable.js

@@ -301,7 +301,7 @@ var TableWrapper = _styledComponents.default.div(_templateObject || (_templateOb
   return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
 });
 
-var ResponsiveTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* make fixed width work */\n  width: 0px;\n  color: var(--font-on-primary);\n  table-layout: fixed;\n  border-collapse: collapse;\n"])));
+var ResponsiveTable = _styledComponents.default.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* make fixed width work */\n  width: 0px;\n  color: var(--font-on-background);\n  table-layout: fixed;\n  border-collapse: collapse;\n"])));
 
 var TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 48px;\n  padding: 0 var(--spacing-xs);\n  border-top: 1px solid var(--border-color);\n  border-right: 1px solid var(--border-color);\n  border-bottom: 1px solid var(--border-color);\n  text-align: ", ";\n  background: ", ";\n\n  &:last-child {\n    border-right: none;\n  }\n\n  > span {\n    display: inline-block;\n    width: 100%;\n    padding: 0 2px;\n    overflow: hidden;\n    white-space: pre;\n    text-overflow: ellipsis;\n  }\n"])), function (_ref3) {
   var center = _ref3.center;

package/table/PermissionTable.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var PermissionTable = _styledComponents.default.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  vertical-align: middle;\n  table-layout: fixed;\n  border: 0;\n"])));
+var PermissionTable = _styledComponents.default.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  vertical-align: middle;\n  table-layout: fixed;\n  border: 0;\n  color: var(--font-on-background);\n"])));
 
 var TH = _styledComponents.default.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: var(--spacing) 0;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n  font-weight: var(--font-bold);\n\n  ", "\n  ", "\n"])), function (_ref) {
   var clickable = _ref.clickable;

package/table/Table.js

@@ -279,14 +279,14 @@ var Table = function Table(_ref) {
   });
 };
 
-var ResponsiveTable = _styledComponents.default.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  border-collapse: separate;\n  margin-top: calc(var(--spacing-s) * -1);\n  border-spacing: 0 var(--spacing-s);\n  color: var(--font-on-primary);\n  table-layout: fixed;\n"])));
+var ResponsiveTable = _styledComponents.default.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  border-collapse: separate;\n  margin-top: calc(var(--spacing-s) * -1);\n  border-spacing: 0 var(--spacing-s);\n  color: var(--font-on-background);\n  table-layout: fixed;\n"])));
 
 var TableHead = _styledComponents.default.thead(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"])), _media.default.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &:hover {\n    > td {\n      border-color: var(--color-primary);\n    }\n  }\n\n  ", "\n\n  ", "\n    \n  ", "\n"])), function (_ref3) {
   var active = _ref3.active,
       primary = _ref3.primary;
-  return (active || primary) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      > td {\n        background: var(--color-background4);\n      }\n    "])));
+  return (active || primary) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      > td {\n        background: var(--color-background3);\n      }\n    "])));
 }, function (_ref4) {
   var clickable = _ref4.clickable;
   return clickable && 'pointer: cursor;';
@@ -296,7 +296,7 @@ var BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject4
 }, function (_ref6) {
   var active = _ref6.active,
       primary = _ref6.primary;
-  return (active || primary) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        background: var(--color-background4);\n      "])));
+  return (active || primary) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        background: var(--color-background3);\n      "])));
 }, function (_ref7) {
   var noData = _ref7.noData;
   return noData && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        height: 168px;\n\n        > td {\n          &:first-child:before {\n            display: none;\n          }\n        }\n      "])));

package/table/subComponent/TableFooterInfo.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var TableFooterInfo = _styledComponents.default.p(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: var(--font-body2);\n  color: var(--font-on-primary);\n"])));
+var TableFooterInfo = _styledComponents.default.p(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: var(--font-body2);\n  color: var(--font-on-background);\n"])));
 
 var _default = TableFooterInfo;
 exports.default = _default;

package/timeline/Timeline.js

@@ -19,7 +19,7 @@ var Items = _styledComponents.default.div(_templateObject2 || (_templateObject2
 
 var Item = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: table;\n  position: relative;\n  margin-bottom: 1.5rem;\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n"])));
 
-var ItemTag = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: table-cell;\n  font-size: var(--font-body1);\n  font-weight: 500;\n  vertical-align: top;\n  position: absolute;\n  padding-top: 0.5rem;\n  color: #fff;\n  width: 6.5rem;\n  text-align: center;\n"])));
+var ItemTag = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: table-cell;\n  font-size: var(--font-body1);\n  font-weight: 500;\n  vertical-align: top;\n  position: absolute;\n  padding-top: 0.5rem;\n  color: var(--font-on-background);\n  width: 6.5rem;\n  text-align: center;\n"])));
 
 var ItemCircle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-radius: 50%;\n  border: 0.89rem solid #2d2c4c;\n  z-index: 1;\n  top: 0.2rem;\n  left: 7rem;\n  position: relative;\n\n  > svg {\n    font-size: 1.5rem;\n    top: 0;\n    left: 0;\n    transform: translate(-50%, -50%);\n    position: absolute;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var success = _ref.success;
@@ -32,7 +32,7 @@ var ItemCircle = _styledComponents.default.div(_templateObject5 || (_templateObj
   return warning && 'color: var(--color-warning);';
 });
 
-var ItemDescription = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: table-cell;\n  vertical-align: top;\n  font-size: 1rem;\n  padding: 0 0 0 8rem;\n  color: #fff;\n"])));
+var ItemDescription = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: table-cell;\n  vertical-align: top;\n  font-size: 1rem;\n  padding: 0 0 0 8rem;\n  color: var(--font-on-background);\n"])));
 
 var ItemTitle = _styledComponents.default.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: block;\n  font-weight: 400;\n\n  &:last-child {\n    margin-top: 8px;\n  }\n"])));
 

package/toast/CustomToastContainer.js

@@ -15,6 +15,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var CustomToastContainer = (0, _styledComponents.default)(_reactToastify.ToastContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 360px;\n\n  .Toastify__toast {\n    padding: 15px 15px 15px 50px;\n    box-shadow: 0 0 8px #999999;\n    background-repeat: no-repeat;\n    background-position: 15px center;\n  }\n\n  .Toastify__toast--error {\n    background-color: var(--color-danger);\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=');\n  }\n\n  .Toastify__toast--success {\n    background-color: var(--color-success);\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');\n  }\n\n  .Toastify__toast--warning {\n    background-color: var(--color-warning);\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');\n  }\n"])));
+var CustomToastContainer = (0, _styledComponents.default)(_reactToastify.ToastContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 360px;\n\n  .Toastify__toast {\n    padding: 15px 15px 15px 50px;\n    box-shadow: 0 0 8px #999999;\n    background-repeat: no-repeat;\n    background-position: 15px center;\n  }\n\n  .Toastify__toast--error {\n    color: var(--font-on-danger);\n    background-color: var(--color-danger);\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=');\n  }\n\n  .Toastify__toast--success {\n    color: var(--font-on-success);\n    background-color: var(--color-success);\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');\n  }\n\n  .Toastify__toast--warning {\n    color: var(--font-on-warning);\n    background-color: var(--color-warning);\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');\n  }\n"])));
 var _default = CustomToastContainer;
 exports.default = _default;