@cashub/ui 0.13.6 → 0.13.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 (10) hide show
  1. package/callout/Callout.js +1 -1
  2. package/package.json +1 -1
  3. package/paginate/Paginate.js +5 -5
  4. package/select/subComponent/SelectedMultiple.js +1 -1
  5. package/styles/theme/dark.theme.js +4 -5
  6. package/styles/theme/light.theme.js +12 -13
  7. package/styles/theme/white.theme.js +94 -0
  8. package/table/Table.js +3 -3
  9. package/toast/CustomToastContainer.js +1 -1
  10. package/wizard/Wizard.js +1 -1
package/callout/Callout.js CHANGED
@@ -13,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
13
13
 
14
14
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
15
15
 
16
- 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"])));
16
+ 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"])));
17
17
 
18
18
  var Body = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
19
19
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cashub/ui",
3
- "version": "0.13.6",
3
+ "version": "0.13.8",
4
4
  "private": false,
5
5
  "author": "CASHUB Team",
6
6
  "description": "CASHUB UI components library",
package/paginate/Paginate.js CHANGED
@@ -15,7 +15,7 @@ var _hooks = require("@cashub/hooks");
15
15
 
16
16
  var _jsxRuntime = require("react/jsx-runtime");
17
17
 
18
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
19
19
 
20
20
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
21
 
@@ -91,19 +91,19 @@ var Container = _styledComponents.default.ul(_templateObject || (_templateObject
91
91
  return alignRight && 'justify-content: flex-end';
92
92
  });
93
93
 
94
- var Link = _styledComponents.default.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 36px;\n line-height: 37px;\n font-size: var(--font-body1);\n color: var(--font-on-primary);\n border-radius: var(--border-radius-round);\n cursor: pointer;\n transition: 0.3s;\n\n &:not(:last-child) {\n margin-right: var(--spacing-xs);\n }\n\n ", ";\n\n ", ";\n\n &:hover {\n ", "\n }\n\n &.paginationDots {\n cursor: default;\n }\n"])), function (_ref2) {
94
+ var Link = _styledComponents.default.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 36px;\n line-height: 37px;\n font-size: var(--font-body1);\n color: var(--font-on-background);\n border-radius: var(--border-radius-round);\n cursor: pointer;\n transition: 0.3s;\n\n &:not(:last-child) {\n margin-right: var(--spacing-xs);\n }\n\n ", ";\n\n ", "\n\n &:hover {\n ", "\n }\n\n &.paginationDots {\n cursor: default;\n }\n"])), function (_ref2) {
95
95
  var disabled = _ref2.disabled;
96
96
  return disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: no-drop;\n "])));
97
97
  }, function (_ref3) {
98
98
  var active = _ref3.active;
99
- return active && 'background-color: var(--color-primary)';
99
+ return active && "\n background-color: var(--color-primary);\n color: var(--font-on-primary);\n ";
100
100
  }, function (_ref4) {
101
101
  var disabled = _ref4.disabled,
102
102
  className = _ref4.className;
103
- return !disabled && !className && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background-color: var(--color-primary);\n "])));
103
+ return !disabled && !className && "\n background-color: var(--color-primary);\n color: var(--font-on-primary);\n ";
104
104
  });
105
105
 
106
- var Icon = _styledComponents.default.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: var(--font-body1);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n"])));
106
+ var Icon = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: var(--font-body1);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n"])));
107
107
 
108
108
  var _default = Paginate;
109
109
  exports.default = _default;
package/select/subComponent/SelectedMultiple.js CHANGED
@@ -30,7 +30,7 @@ var SelectedMultiple = function SelectedMultiple(_ref) {
30
30
  });
31
31
  };
32
32
 
33
- 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-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"])));
33
+ 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"])));
34
34
 
35
35
  var _default = SelectedMultiple;
36
36
  exports.default = _default;
package/styles/theme/dark.theme.js CHANGED
@@ -26,8 +26,7 @@ var colorStyle = {
26
26
  scrollBarColor: 'rgba(89, 126, 247, 0.3)',
27
27
  bgColor1: '#13142e',
28
28
  bgColor2: '#222143',
29
- bgColor3: '#2d2c4c',
30
- bgColor4: '#2d2a5d',
29
+ bgColor3: '#2d2a5d',
31
30
  backdropBg: 'rgba(0, 0, 0, 0.5)'
32
31
  }; // Common font style
33
32
 
@@ -53,7 +52,7 @@ var fontStyle = {
53
52
  var darkTheme = {
54
53
  desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
55
54
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
56
- borderColor: '#5b5f6f',
55
+ borderColor: colorStyle.colorGrey,
57
56
  borderWidth: '1px',
58
57
  borderRadiusS: '0.5rem',
59
58
  borderRadius: '1rem',
@@ -66,7 +65,7 @@ var darkTheme = {
66
65
  }),
67
66
  tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
68
67
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
69
- borderColor: '#5b5f6f',
68
+ borderColor: colorStyle.colorGrey,
70
69
  borderWidth: '1px',
71
70
  borderRadiusS: '0.5rem',
72
71
  borderRadius: '1rem',
@@ -79,7 +78,7 @@ var darkTheme = {
79
78
  }),
80
79
  mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
81
80
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
82
- borderColor: '#5b5f6f',
81
+ borderColor: colorStyle.colorGrey,
83
82
  borderWidth: '1px',
84
83
  borderRadiusS: '0.5rem',
85
84
  borderRadius: '1rem',
package/styles/theme/light.theme.js CHANGED
@@ -17,17 +17,16 @@ var colorStyle = {
17
17
  colorWhite: '#ffffff',
18
18
  colorDark: '#353351',
19
19
  colorGrey: '#5b5f6f',
20
- colorPrimary: '#597EF7',
21
- colorSuccess: '#11D8CD',
22
- colorWarning: '#FFCA7A',
20
+ colorPrimary: '#3661ec',
21
+ colorSuccess: '#93E7E2',
22
+ colorWarning: '#FFDFAF',
23
23
  colorDanger: '#F495A1',
24
- colorHover: 'rgba(89, 126, 247, 0.2)',
25
- colorActive: 'rgba(89, 126, 247, 0.2)',
26
- scrollBarColor: 'rgba(89, 126, 247, 0.3)',
24
+ colorHover: 'rgba(54, 97, 236, 0.2)',
25
+ colorActive: 'rgba(54, 97, 236, 0.2)',
26
+ scrollBarColor: 'rgba(54, 97, 236, 0.3)',
27
27
  bgColor1: '#F0ECFF',
28
28
  bgColor2: '#F8F4FF',
29
- bgColor3: '#D4D0F6',
30
- bgColor4: '#E6E1FF',
29
+ bgColor3: '#E6E1FF',
31
30
  backdropBg: 'rgba(0, 0, 0, 0.5)'
32
31
  }; // Common font style
33
32
 
@@ -42,18 +41,18 @@ var fontStyle = {
42
41
  fontFamily: 'Helvetica',
43
42
  fontWeightNormal: '400',
44
43
  fontWeightBold: 'bold',
45
- fontOnPrimary: colorStyle.colorDark,
44
+ fontOnPrimary: colorStyle.bgColor2,
46
45
  fontOnSuccess: colorStyle.colorDark,
47
46
  fontOnWarning: colorStyle.colorDark,
48
47
  fontOnDanger: colorStyle.colorDark,
49
48
  fontOnBg: colorStyle.colorDark,
50
- fontMutedColor: 'rgba(53, 51, 81, 0.75)'
49
+ fontMutedColor: 'rgba(53, 51, 81, 0.6)'
51
50
  }; // Theme stylesheet
52
51
 
53
52
  var lightTheme = {
54
53
  desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
55
54
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
56
- borderColor: '#5b5f6f',
55
+ borderColor: colorStyle.colorGrey,
57
56
  borderWidth: '1px',
58
57
  borderRadiusS: '0.5rem',
59
58
  borderRadius: '1rem',
@@ -66,7 +65,7 @@ var lightTheme = {
66
65
  }),
67
66
  tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
68
67
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
69
- borderColor: '#5b5f6f',
68
+ borderColor: colorStyle.colorGrey,
70
69
  borderWidth: '1px',
71
70
  borderRadiusS: '0.5rem',
72
71
  borderRadius: '1rem',
@@ -79,7 +78,7 @@ var lightTheme = {
79
78
  }),
80
79
  mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
81
80
  boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
82
- borderColor: '#5b5f6f',
81
+ borderColor: colorStyle.colorGrey,
83
82
  borderWidth: '1px',
84
83
  borderRadiusS: '0.5rem',
85
84
  borderRadius: '1rem',
package/styles/theme/white.theme.js ADDED
@@ -0,0 +1,94 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ 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; }
9
+
10
+ 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; }
11
+
12
+ 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; }
13
+
14
+ // Currently, some style is all same for all viewport size
15
+ // Common color style
16
+ var colorStyle = {
17
+ colorWhite: '#ffffff',
18
+ colorDark: '#353351',
19
+ colorGrey: '#5b5f6f',
20
+ colorPrimary: '#345FEB',
21
+ colorSuccess: '#11D8CD',
22
+ colorWarning: '#FFCA7A',
23
+ colorDanger: '#F495A1',
24
+ colorHover: 'rgba(52, 95, 235, 0.2)',
25
+ colorActive: 'rgba(52, 95, 235, 0.2)',
26
+ scrollBarColor: 'rgba(52, 95, 235, 0.3)',
27
+ bgColor1: '#EEEEEE',
28
+ bgColor2: '#F7F7F7',
29
+ bgColor3: '#FFFFFF',
30
+ backdropBg: 'rgba(0, 0, 0, 0.5)'
31
+ }; // Common font style
32
+
33
+ var fontStyle = {
34
+ fontH1: '2.25rem',
35
+ fontH2: '1.5rem',
36
+ fontH3: '1.25rem',
37
+ fontBody1: '1rem',
38
+ fontBody2: '0.875rem',
39
+ fontButton: '0.875rem',
40
+ fontCaption: '0.75rem',
41
+ fontFamily: 'Helvetica',
42
+ fontWeightNormal: '400',
43
+ fontWeightBold: 'bold',
44
+ fontOnPrimary: colorStyle.bgColor2,
45
+ fontOnSuccess: colorStyle.colorDark,
46
+ fontOnWarning: colorStyle.colorDark,
47
+ fontOnDanger: colorStyle.colorDark,
48
+ fontOnBg: colorStyle.colorDark,
49
+ fontMutedColor: 'rgba(53, 51, 81, 0.6)'
50
+ }; // Theme stylesheet
51
+
52
+ var whiteTheme = {
53
+ desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
54
+ boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
55
+ borderColor: colorStyle.colorGrey,
56
+ borderWidth: '1px',
57
+ borderRadiusS: '0.5rem',
58
+ borderRadius: '1rem',
59
+ borderRadiusL: '2rem',
60
+ borderRadiusRound: '50%',
61
+ spacerXS: '0.5rem',
62
+ spacerS: '1rem',
63
+ spacer: '1.5rem',
64
+ spacerL: '2rem'
65
+ }),
66
+ tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
67
+ boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
68
+ borderColor: colorStyle.colorGrey,
69
+ borderWidth: '1px',
70
+ borderRadiusS: '0.5rem',
71
+ borderRadius: '1rem',
72
+ borderRadiusL: '2rem',
73
+ borderRadiusRound: '50%',
74
+ spacerXS: '0.5rem',
75
+ spacerS: '0.75rem',
76
+ spacer: '1rem',
77
+ spacerL: '1.25rem'
78
+ }),
79
+ mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
80
+ boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
81
+ borderColor: colorStyle.colorGrey,
82
+ borderWidth: '1px',
83
+ borderRadiusS: '0.5rem',
84
+ borderRadius: '1rem',
85
+ borderRadiusL: '2rem',
86
+ borderRadiusRound: '50%',
87
+ spacerXS: '0.5rem',
88
+ spacerS: '0.75rem',
89
+ spacer: '1rem',
90
+ spacerL: '1.25rem'
91
+ })
92
+ };
93
+ var _default = whiteTheme;
94
+ exports.default = _default;
package/table/Table.js CHANGED
@@ -286,7 +286,7 @@ var TableHead = _styledComponents.default.thead(_templateObject2 || (_templateOb
286
286
  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) {
287
287
  var active = _ref3.active,
288
288
  primary = _ref3.primary;
289
- return (active || primary) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n > td {\n background: var(--color-background4);\n }\n "])));
289
+ return (active || primary) && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n > td {\n background: var(--color-background3);\n }\n "])));
290
290
  }, function (_ref4) {
291
291
  var clickable = _ref4.clickable;
292
292
  return clickable && 'pointer: cursor;';
@@ -296,13 +296,13 @@ var BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject4
296
296
  }, function (_ref6) {
297
297
  var active = _ref6.active,
298
298
  primary = _ref6.primary;
299
- return (active || primary) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background: var(--color-background4);\n "])));
299
+ return (active || primary) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background: var(--color-background3);\n "])));
300
300
  }, function (_ref7) {
301
301
  var noData = _ref7.noData;
302
302
  return noData && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n height: 168px;\n\n > td {\n &:first-child:before {\n display: none;\n }\n }\n "])));
303
303
  }));
304
304
 
305
- var TableDataCell = _styledComponents.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: 48px;\n background: ", ";\n padding: 0 var(--spacing-xs);\n max-width: 0px;\n text-align: ", ";\n vertical-align: middle;\n border-top: var(--border-width) solid transparent;\n border-bottom: var(--border-width) solid transparent;\n transition: 0.3s;\n\n &:first-child {\n border-left: var(--border-width) solid transparent;\n border-top-left-radius: var(--border-radius-l);\n border-bottom-left-radius: var(--border-radius-l);\n padding-left: var(--spacing);\n }\n\n &:last-child {\n border-right: var(--border-width) solid transparent;\n border-top-right-radius: var(--border-radius-l);\n border-bottom-right-radius: var(--border-radius-l);\n padding-right: var(--spacing);\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\n ", "\n\n ", "\n"])), function (_ref8) {
305
+ var TableDataCell = _styledComponents.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: 48px;\n background: ", ";\n padding: 0 var(--spacing-xs);\n max-width: 0px;\n text-align: ", ";\n vertical-align: middle;\n border-top: var(--border-width) solid transparent;\n border-bottom: var(--border-width) solid transparent;\n transition: border-color 0.3s;\n\n &:first-child {\n border-left: var(--border-width) solid transparent;\n border-top-left-radius: var(--border-radius-l);\n border-bottom-left-radius: var(--border-radius-l);\n padding-left: var(--spacing);\n }\n\n &:last-child {\n border-right: var(--border-width) solid transparent;\n border-top-right-radius: var(--border-radius-l);\n border-bottom-right-radius: var(--border-radius-l);\n padding-right: var(--spacing);\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\n ", "\n\n ", "\n"])), function (_ref8) {
306
306
  var backgroundReverse = _ref8.backgroundReverse;
307
307
  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
308
308
  }, function (_ref9) {
package/toast/CustomToastContainer.js CHANGED
@@ -15,6 +15,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
15
15
 
16
16
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
17
17
 
18
- 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"])));
18
+ 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"])));
19
19
  var _default = CustomToastContainer;
20
20
  exports.default = _default;
package/wizard/Wizard.js CHANGED
@@ -201,7 +201,7 @@ var Wizard = function Wizard(props) {
201
201
 
202
202
  var Nav = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n background: var(--color-background2);\n border-radius: var(--border-radius-l);\n margin-bottom: var(--spacing);\n\n ", "\n"])), _media.default.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: block;\n "]))));
203
203
 
204
- var NavItem = _styledComponents.default.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--font-on-mute);\n font-size: var(--font-body1);\n font-weight: var(--font-bold);\n padding: 0 var(--spacing-xs);\n width: 100%;\n height: 36px;\n line-height: 36px;\n transition: 0.3s;\n overflow: hidden;\n flex: 1;\n cursor: pointer;\n\n &.current,\n &.done {\n background: var(--color-primary);\n color: var(--font-on-primary);\n\n > div > span:first-of-type {\n color: var(--color-primary);\n background: var(--font-on-primary);\n }\n }\n\n &.current {\n background: var(--color-primary);\n color: var(--font-on-primary);\n border-radius: 0 var(--border-radius-l) var(--border-radius-l) 0;\n\n &:first-child {\n border-radius: var(--border-radius-l);\n }\n\n ", "\n }\n\n &.done {\n background: var(--color-primary);\n color: var(--font-on-primary);\n\n &:first-child {\n border-radius: var(--border-radius-l) 0 0 var(--border-radius-l);\n\n ", "\n }\n }\n\n &:hover {\n > div > p {\n color: var(--font-on-primary);\n }\n > div > span:first-of-type {\n color: var(--color-primary);\n background: var(--font-on-primary);\n }\n }\n"])), _media.default.mobile(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n "]))), _media.default.mobile(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n "]))));
204
+ var NavItem = _styledComponents.default.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--font-on-mute);\n font-size: var(--font-body1);\n font-weight: var(--font-bold);\n padding: 0 var(--spacing-xs);\n width: 100%;\n height: 36px;\n line-height: 36px;\n transition: 0.3s;\n overflow: hidden;\n flex: 1;\n cursor: pointer;\n\n &:hover {\n color: var(--font-on-background);\n\n > div > span:first-of-type {\n color: var(--font-on-primary);\n background: var(--font-on-background);\n }\n }\n\n &.current,\n &.done {\n background: var(--color-primary);\n color: var(--font-on-primary);\n\n > div > span:first-of-type {\n color: var(--color-primary);\n background: var(--font-on-primary);\n }\n }\n\n &.current {\n background: var(--color-primary);\n color: var(--font-on-primary);\n border-radius: 0 var(--border-radius-l) var(--border-radius-l) 0;\n\n &:first-child {\n border-radius: var(--border-radius-l);\n }\n\n ", "\n }\n\n &.done {\n background: var(--color-primary);\n color: var(--font-on-primary);\n\n &:first-child {\n border-radius: var(--border-radius-l) 0 0 var(--border-radius-l);\n\n ", "\n }\n }\n"])), _media.default.mobile(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n "]))), _media.default.mobile(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n "]))));
205
205
 
206
206
  var NavTitle = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n > span:first-of-type {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: var(--spacing-xs);\n color: var(--font-on-mute);\n flex: 0 0;\n flex-basis: 24px;\n width: 24px;\n height: 24px;\n border-radius: var(--border-radius-l);\n background: var(--font-on-mute);\n }\n\n > p {\n margin-right: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n > span:last-of-type {\n display: none;\n\n &.arrow {\n display: flex;\n align-self: center;\n }\n\n ", "\n }\n"])), _media.default.mobile(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n transform: rotate(90deg);\n "]))));
207
207