@vchasno/ui-kit 0.3.16 → 0.3.17

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 (15) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/Datepicker/types/components/Alert/Alert.d.ts +4 -3
  3. package/dist/Menu/types/components/Alert/Alert.d.ts +4 -3
  4. package/dist/ProjectsPopover/types/components/Alert/Alert.d.ts +4 -3
  5. package/dist/Select/types/components/Alert/Alert.d.ts +4 -3
  6. package/dist/SelectCreatable/types/components/Alert/Alert.d.ts +4 -3
  7. package/dist/Snackbar/index.cjs.js +1 -1
  8. package/dist/Snackbar/index.js +1 -1
  9. package/dist/Snackbar/types/components/Alert/Alert.d.ts +4 -3
  10. package/dist/css/_theme.css +9 -7
  11. package/dist/index.d.ts +4 -3
  12. package/dist/index.js +15 -19
  13. package/dist/index.js.map +1 -1
  14. package/dist/types/components/Alert/Alert.d.ts +4 -3
  15. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [0.3.17] - 2024-08-12
11
+
12
+ ## Added
13
+
14
+ - Alert - redesign component, add config type
15
+
10
16
  ## [0.3.16] - 2024-08-08
11
17
 
12
18
  ## Added
package/dist/Datepicker/types/components/Alert/Alert.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import React from 'react';
2
2
  import './Alert.global.css';
3
- type AlertType = 'error' | 'warning' | 'success' | 'info';
4
- type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
3
+ type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
4
+ type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
5
5
  export interface AlertProps {
6
6
  type?: AlertType;
7
- icon?: IconType | React.ReactNode;
7
+ icon?: IconType;
8
+ customIcon?: React.ReactNode;
8
9
  leftBorder?: boolean;
9
10
  className?: string;
10
11
  onClose?: VoidFunction;
package/dist/Menu/types/components/Alert/Alert.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import React from 'react';
2
2
  import './Alert.global.css';
3
- type AlertType = 'error' | 'warning' | 'success' | 'info';
4
- type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
3
+ type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
4
+ type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
5
5
  export interface AlertProps {
6
6
  type?: AlertType;
7
- icon?: IconType | React.ReactNode;
7
+ icon?: IconType;
8
+ customIcon?: React.ReactNode;
8
9
  leftBorder?: boolean;
9
10
  className?: string;
10
11
  onClose?: VoidFunction;
package/dist/ProjectsPopover/types/components/Alert/Alert.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import React from 'react';
2
2
  import './Alert.global.css';
3
- type AlertType = 'error' | 'warning' | 'success' | 'info';
4
- type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
3
+ type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
4
+ type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
5
5
  export interface AlertProps {
6
6
  type?: AlertType;
7
- icon?: IconType | React.ReactNode;
7
+ icon?: IconType;
8
+ customIcon?: React.ReactNode;
8
9
  leftBorder?: boolean;
9
10
  className?: string;
10
11
  onClose?: VoidFunction;
package/dist/Select/types/components/Alert/Alert.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import React from 'react';
2
2
  import './Alert.global.css';
3
- type AlertType = 'error' | 'warning' | 'success' | 'info';
4
- type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
3
+ type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
4
+ type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
5
5
  export interface AlertProps {
6
6
  type?: AlertType;
7
- icon?: IconType | React.ReactNode;
7
+ icon?: IconType;
8
+ customIcon?: React.ReactNode;
8
9
  leftBorder?: boolean;
9
10
  className?: string;
10
11
  onClose?: VoidFunction;
package/dist/SelectCreatable/types/components/Alert/Alert.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import React from 'react';
2
2
  import './Alert.global.css';
3
- type AlertType = 'error' | 'warning' | 'success' | 'info';
4
- type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
3
+ type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
4
+ type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
5
5
  export interface AlertProps {
6
6
  type?: AlertType;
7
- icon?: IconType | React.ReactNode;
7
+ icon?: IconType;
8
+ customIcon?: React.ReactNode;
8
9
  leftBorder?: boolean;
9
10
  className?: string;
10
11
  onClose?: VoidFunction;
package/dist/Snackbar/index.cjs.js CHANGED
@@ -483,7 +483,7 @@ var TextAreaInput = React$1.forwardRef(function (_a, ref) {
483
483
  });
484
484
  TextAreaInput.displayName = 'TextAreaInput';
485
485
 
486
- var css_248z$b = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding: 10px;\n border: 1px solid transparent;\n border-radius: 3px;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 3px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #087dc1);\n background-color: var(--vchasno-ui-alert-info-bg, #e9f4ff);\n}\n\n.vchasno-ui-alert.--info .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-info-color, #087dc1);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n background-color: var(--vchasno-ui-alert-warning-bg, rgb(255 201 123 / 20%));\n}\n\n.vchasno-ui-alert.--warning .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-warning-color, #ffb200);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #ef6562);\n background-color: var(--vchasno-ui-alert-error-bg, rgb(239 101 98 / 10%));\n}\n\n.vchasno-ui-alert.--error .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-error-color, #ef6562);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #1cb800);\n background-color: var(--vchasno-ui-alert-success-bg, rgb(28 184 0 / 10%));\n}\n\n.vchasno-ui-alert.--success .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-success-color, #1cb800);\n}\n\n.vchasno-ui-alert__close-icon {\n border-radius: 3px;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
486
+ var css_248z$b = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding: 12px 16px;\n border-radius: 4px;\n border-left: 3px solid transparent;\n font-size: 14px;\n gap: 12px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert strong,\n.vchasno-ui-alert b {\n font-weight: 700;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 4px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #006be9);\n background-color: var(--vchasno-ui-alert-info-bg, #ecf4ff);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n background-color: var(--vchasno-ui-alert-warning-bg, #fff2d6);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #e73434);\n background-color: var(--vchasno-ui-alert-error-bg, #ffeded);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #00b700);\n background-color: var(--vchasno-ui-alert-success-bg, #e7f3d9);\n}\n\n.vchasno-ui-alert.--config {\n border-color: var(--vchasno-ui-alert-config-color, #006be9);\n background-color: var(--vchasno-ui-alert-config-bg, #f3f6f8);\n}\n\n.vchasno-ui-alert__close-icon {\n width: 30px;\n height: 30px;\n border-radius: 4px;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(255 255 255 / 50%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
487
487
  styleInject(css_248z$b);
488
488
 
489
489
  var css_248z$a = ".vchasno-ui-switch {\n display: inline-flex;\n align-content: center;\n cursor: pointer;\n line-height: 20px;\n}\n\n.vchasno-ui-switch--bg {\n position: relative;\n z-index: 0;\n display: inline-flex;\n width: 36px;\n height: 20px;\n box-sizing: border-box;\n flex-shrink: 0;\n border-radius: 100px;\n background: var(--vchasno-ui-switch-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n transition: background-color 0.3s;\n}\n\n.vchasno-ui-switch__active .vchasno-ui-switch--bg {\n background: var(--vchasno-ui-switch-active-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n}\n\n.vchasno-ui-switch__disabled {\n cursor: default;\n opacity: 0.7;\n}\n\n.vchasno-ui-switch--circle {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 16px;\n height: 16px;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background-color: var(--vchasno-ui-switch-circle-color);\n transform: translate(2px, 2px);\n transition: transform 0.3s;\n}\n\n.vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n transform: translate(18px, 2px);\n}\n\n.vchasno-ui-spinner {\n color: var(--vchasno-ui-switch-spinner-color);\n}\n\n.vchasno-ui-switch--label {\n margin-left: 12px;\n color: var(--vchasno-ui-input-font-color);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: 20px;\n user-select: none;\n}\n";
package/dist/Snackbar/index.js CHANGED
@@ -461,7 +461,7 @@ var TextAreaInput = React__default.forwardRef(function (_a, ref) {
461
461
  });
462
462
  TextAreaInput.displayName = 'TextAreaInput';
463
463
 
464
- var css_248z$b = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding: 10px;\n border: 1px solid transparent;\n border-radius: 3px;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 3px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #087dc1);\n background-color: var(--vchasno-ui-alert-info-bg, #e9f4ff);\n}\n\n.vchasno-ui-alert.--info .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-info-color, #087dc1);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n background-color: var(--vchasno-ui-alert-warning-bg, rgb(255 201 123 / 20%));\n}\n\n.vchasno-ui-alert.--warning .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-warning-color, #ffb200);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #ef6562);\n background-color: var(--vchasno-ui-alert-error-bg, rgb(239 101 98 / 10%));\n}\n\n.vchasno-ui-alert.--error .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-error-color, #ef6562);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #1cb800);\n background-color: var(--vchasno-ui-alert-success-bg, rgb(28 184 0 / 10%));\n}\n\n.vchasno-ui-alert.--success .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-success-color, #1cb800);\n}\n\n.vchasno-ui-alert__close-icon {\n border-radius: 3px;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
464
+ var css_248z$b = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding: 12px 16px;\n border-radius: 4px;\n border-left: 3px solid transparent;\n font-size: 14px;\n gap: 12px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert strong,\n.vchasno-ui-alert b {\n font-weight: 700;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 4px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #006be9);\n background-color: var(--vchasno-ui-alert-info-bg, #ecf4ff);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n background-color: var(--vchasno-ui-alert-warning-bg, #fff2d6);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #e73434);\n background-color: var(--vchasno-ui-alert-error-bg, #ffeded);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #00b700);\n background-color: var(--vchasno-ui-alert-success-bg, #e7f3d9);\n}\n\n.vchasno-ui-alert.--config {\n border-color: var(--vchasno-ui-alert-config-color, #006be9);\n background-color: var(--vchasno-ui-alert-config-bg, #f3f6f8);\n}\n\n.vchasno-ui-alert__close-icon {\n width: 30px;\n height: 30px;\n border-radius: 4px;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(255 255 255 / 50%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
465
465
  styleInject(css_248z$b);
466
466
 
467
467
  var css_248z$a = ".vchasno-ui-switch {\n display: inline-flex;\n align-content: center;\n cursor: pointer;\n line-height: 20px;\n}\n\n.vchasno-ui-switch--bg {\n position: relative;\n z-index: 0;\n display: inline-flex;\n width: 36px;\n height: 20px;\n box-sizing: border-box;\n flex-shrink: 0;\n border-radius: 100px;\n background: var(--vchasno-ui-switch-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n transition: background-color 0.3s;\n}\n\n.vchasno-ui-switch__active .vchasno-ui-switch--bg {\n background: var(--vchasno-ui-switch-active-color-bg);\n box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);\n}\n\n.vchasno-ui-switch__disabled {\n cursor: default;\n opacity: 0.7;\n}\n\n.vchasno-ui-switch--circle {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 16px;\n height: 16px;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background-color: var(--vchasno-ui-switch-circle-color);\n transform: translate(2px, 2px);\n transition: transform 0.3s;\n}\n\n.vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {\n transform: translate(18px, 2px);\n}\n\n.vchasno-ui-spinner {\n color: var(--vchasno-ui-switch-spinner-color);\n}\n\n.vchasno-ui-switch--label {\n margin-left: 12px;\n color: var(--vchasno-ui-input-font-color);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: 20px;\n user-select: none;\n}\n";
package/dist/Snackbar/types/components/Alert/Alert.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import React from 'react';
2
2
  import './Alert.global.css';
3
- type AlertType = 'error' | 'warning' | 'success' | 'info';
4
- type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
3
+ type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
4
+ type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
5
5
  export interface AlertProps {
6
6
  type?: AlertType;
7
- icon?: IconType | React.ReactNode;
7
+ icon?: IconType;
8
+ customIcon?: React.ReactNode;
8
9
  leftBorder?: boolean;
9
10
  className?: string;
10
11
  onClose?: VoidFunction;
package/dist/css/_theme.css CHANGED
@@ -47,14 +47,16 @@
47
47
  --vchasno-ui-text-success-color: #1cb800;
48
48
  --vchasno-ui-text-warning-color: #ffb200;
49
49
  --vchasno-ui-text-error-color: #ff5937;
50
- --vchasno-ui-alert-info-color: #087dc1;
51
- --vchasno-ui-alert-info-bg: #e9f4ff;
50
+ --vchasno-ui-alert-info-color: #006be9;
51
+ --vchasno-ui-alert-info-bg: #ecf4ff;
52
52
  --vchasno-ui-alert-warning-color: #ffb200;
53
- --vchasno-ui-alert-warning-bg: rgb(255 201 123 / 20%);
54
- --vchasno-ui-alert-error-color: #ef6562;
55
- --vchasno-ui-alert-error-bg: rgb(239 101 98 / 10%);
56
- --vchasno-ui-alert-success-color: #1cb800;
57
- --vchasno-ui-alert-success-bg: rgb(28 184 0 / 10%);
53
+ --vchasno-ui-alert-warning-bg: #fff2d6;
54
+ --vchasno-ui-alert-error-color: #e73434;
55
+ --vchasno-ui-alert-error-bg: #ffeded;
56
+ --vchasno-ui-alert-success-color: #00b700;
57
+ --vchasno-ui-alert-success-bg: #e7f3d9;
58
+ --vchasno-ui-alert-config-color: #006be9;
59
+ --vchasno-ui-alert-config-bg: #f3f6f8;
58
60
  --vchasno-ui-tabs-active-color: #087dc1;
59
61
  --vchasno-ui-pagination-border-color: #6b5fff;
60
62
  --vchasno-ui-pagination-hover-bg-color: rgb(0 0 0 / 10%);
package/dist/index.d.ts CHANGED
@@ -131,11 +131,12 @@ interface TextAreaInputProps extends TextareaAutosizeProps, Omit<InputProps, 'ch
131
131
  }
132
132
  declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
133
133
 
134
- type AlertType = 'error' | 'warning' | 'success' | 'info';
135
- type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
134
+ type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
135
+ type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
136
136
  interface AlertProps {
137
137
  type?: AlertType;
138
- icon?: IconType | React.ReactNode;
138
+ icon?: IconType;
139
+ customIcon?: React.ReactNode;
139
140
  leftBorder?: boolean;
140
141
  className?: string;
141
142
  onClose?: VoidFunction;
package/dist/index.js CHANGED
@@ -562,37 +562,33 @@ var TextAreaInput = React$1.forwardRef(function (_a, ref) {
562
562
  });
563
563
  TextAreaInput.displayName = 'TextAreaInput';
564
564
 
565
- var css_248z$9 = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding: 10px;\n border: 1px solid transparent;\n border-radius: 3px;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 3px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #087dc1);\n background-color: var(--vchasno-ui-alert-info-bg, #e9f4ff);\n}\n\n.vchasno-ui-alert.--info .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-info-color, #087dc1);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n background-color: var(--vchasno-ui-alert-warning-bg, rgb(255 201 123 / 20%));\n}\n\n.vchasno-ui-alert.--warning .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-warning-color, #ffb200);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #ef6562);\n background-color: var(--vchasno-ui-alert-error-bg, rgb(239 101 98 / 10%));\n}\n\n.vchasno-ui-alert.--error .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-error-color, #ef6562);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #1cb800);\n background-color: var(--vchasno-ui-alert-success-bg, rgb(28 184 0 / 10%));\n}\n\n.vchasno-ui-alert.--success .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-success-color, #1cb800);\n}\n\n.vchasno-ui-alert__close-icon {\n border-radius: 3px;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
565
+ var css_248z$9 = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding: 12px 16px;\n border-radius: 4px;\n border-left: 3px solid transparent;\n font-size: 14px;\n gap: 12px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert strong,\n.vchasno-ui-alert b {\n font-weight: 700;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 4px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n line-height: 20px;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #006be9);\n background-color: var(--vchasno-ui-alert-info-bg, #ecf4ff);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n background-color: var(--vchasno-ui-alert-warning-bg, #fff2d6);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #e73434);\n background-color: var(--vchasno-ui-alert-error-bg, #ffeded);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #00b700);\n background-color: var(--vchasno-ui-alert-success-bg, #e7f3d9);\n}\n\n.vchasno-ui-alert.--config {\n border-color: var(--vchasno-ui-alert-config-color, #006be9);\n background-color: var(--vchasno-ui-alert-config-bg, #f3f6f8);\n}\n\n.vchasno-ui-alert__close-icon {\n width: 30px;\n height: 30px;\n border-radius: 4px;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(255 255 255 / 50%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
566
566
  styleInject(css_248z$9);
567
567
 
568
568
  var iconMap = {
569
- info: function () { return (React$1.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
570
- React$1.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6422 11.6423 15 7.5 15C3.3577 15 0 11.6422 0 7.5C0 3.35781 3.3577 0 7.5 0C11.6423 0 15 3.35781 15 7.5ZM5.87799 5.82184H8.52997V11.4711C8.52997 12.0179 8.08667 12.4612 7.53983 12.4612C6.99298 12.4612 6.54968 12.0179 6.54968 11.4711V7.57782H5.87799C5.39309 7.57782 5 7.18473 5 6.69983C5 6.21493 5.39309 5.82184 5.87799 5.82184ZM6.26221 3.66559C6.26221 3.50973 6.2899 3.36436 6.34483 3.22949C6.40431 3.09045 6.48466 2.97036 6.58636 2.86924C6.68805 2.76812 6.80655 2.6881 6.94229 2.62907C7.00403 2.603 7.06759 2.58269 7.13342 2.56813C7.21696 2.54984 7.30367 2.54059 7.39356 2.54059C7.54611 2.54059 7.69002 2.57004 7.82577 2.62907C7.86254 2.64498 7.89795 2.66248 7.932 2.68144C8.02416 2.73279 8.10724 2.79543 8.1817 2.86924C8.28339 2.97036 8.36375 3.09045 8.42322 3.22949C8.4541 3.29981 8.47725 3.37294 8.49178 3.44889C8.5054 3.51876 8.51221 3.59099 8.51221 3.66559C8.51221 3.74956 8.50358 3.83116 8.48633 3.91027C8.4718 3.97799 8.45046 4.0439 8.42322 4.108C8.36375 4.24287 8.28339 4.36081 8.1817 4.46194C8.12949 4.51374 8.07319 4.56001 8.01236 4.60076C7.95425 4.63947 7.89205 4.67333 7.82577 4.70211C7.69002 4.76113 7.54611 4.79059 7.39356 4.79059C7.31411 4.79059 7.23739 4.78348 7.16339 4.76914C7.08666 4.75447 7.01311 4.73213 6.94229 4.70211C6.80655 4.64308 6.68805 4.56306 6.58636 4.46194C6.48466 4.36081 6.40431 4.24287 6.34483 4.108C6.2899 3.96896 6.26221 3.82145 6.26221 3.66559Z", fill: "currentColor" }))); },
571
- cross: function () { return (React$1.createElement("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
572
- React$1.createElement("path", { d: "M6.4 5L9.7 1.7C10.1 1.3 10.1 0.7 9.7 0.3C9.3 -0.1 8.7 -0.1 8.3 0.3L5 3.6L1.7 0.3C1.3 -0.1 0.7 -0.1 0.3 0.3C-0.1 0.7 -0.1 1.3 0.3 1.7L3.6 5L0.3 8.3C-0.1 8.7 -0.1 9.3 0.3 9.7C0.5 9.9 0.7 10 1 10C1.3 10 1.5 9.9 1.7 9.7L5 6.4L8.3 9.7C8.5 9.9 8.7 10 9 10C9.3 10 9.5 9.9 9.7 9.7C10.1 9.3 10.1 8.7 9.7 8.3L6.4 5Z", fill: "currentColor" }))); },
573
- error: function () { return (React$1.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
574
- React$1.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6421 11.6421 15 7.5 15C3.35786 15 0 11.6421 0 7.5C0 3.35786 3.35786 0 7.5 0C11.6421 0 15 3.35786 15 7.5ZM6.5625 8.125C6.5625 8.64277 6.98223 9.0625 7.5 9.0625C8.01777 9.0625 8.4375 8.64277 8.4375 8.125V3.75C8.4375 3.23223 8.01777 2.8125 7.5 2.8125C6.98223 2.8125 6.5625 3.23223 6.5625 3.75V8.125ZM6.5625 11.25C6.5625 11.7678 6.98223 12.1875 7.5 12.1875C8.01777 12.1875 8.4375 11.7678 8.4375 11.25C8.4375 10.7322 8.01777 10.3125 7.5 10.3125C6.98223 10.3125 6.5625 10.7322 6.5625 11.25Z", fill: "currentColor" }))); },
575
- warning: function () { return (React$1.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
576
- React$1.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6421 11.6421 15 7.5 15C3.35786 15 0 11.6421 0 7.5C0 3.35786 3.35786 0 7.5 0C11.6421 0 15 3.35786 15 7.5ZM6.5625 8.125C6.5625 8.64277 6.98223 9.0625 7.5 9.0625C8.01777 9.0625 8.4375 8.64277 8.4375 8.125V3.75C8.4375 3.23223 8.01777 2.8125 7.5 2.8125C6.98223 2.8125 6.5625 3.23223 6.5625 3.75V8.125ZM6.5625 11.25C6.5625 11.7678 6.98223 12.1875 7.5 12.1875C8.01777 12.1875 8.4375 11.7678 8.4375 11.25C8.4375 10.7322 8.01777 10.3125 7.5 10.3125C6.98223 10.3125 6.5625 10.7322 6.5625 11.25Z", fill: "currentColor" }))); },
577
- success: function () { return (React$1.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
578
- React$1.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 15.5C12.1421 15.5 15.5 12.1421 15.5 8C15.5 3.85786 12.1421 0.5 8 0.5C3.85786 0.5 0.5 3.85786 0.5 8C0.5 12.1421 3.85786 15.5 8 15.5ZM10.427 5.39255C10.7106 5.0916 11.2362 5.14816 11.5278 5.39255C11.8534 5.66547 11.7932 6.11611 11.5278 6.39768L7.56268 10.6053C7.30802 10.8756 6.71524 10.8875 6.46185 10.6053L4.46953 8.38686C4.19295 8.07889 4.16113 7.68848 4.46953 7.38172C4.73477 7.1179 5.31108 7.09302 5.57035 7.38172L7.02551 9.00207L10.427 5.39255Z", fill: "currentColor" }))); },
569
+ info: function () { return React$1.createElement(React$1.Fragment, null, "\uD83E\uDD14"); },
570
+ cross: function () { return React$1.createElement(React$1.Fragment, null, "\u274C"); },
571
+ error: function () { return React$1.createElement(React$1.Fragment, null, "\u2757\uFE0F"); },
572
+ warning: function () { return React$1.createElement(React$1.Fragment, null, "\u26A0\uFE0F"); },
573
+ success: function () { return React$1.createElement(React$1.Fragment, null, "\u2705"); },
574
+ config: function () { return React$1.createElement(React$1.Fragment, null, "\u2699\uFE0F"); },
579
575
  };
580
576
  var Alert = function (_a) {
581
- var _b = _a.type, type = _b === void 0 ? 'info' : _b, _c = _a.leftBorder, leftBorder = _c === void 0 ? true : _c, icon = _a.icon, className = _a.className, children = _a.children, onClose = _a.onClose, wide = _a.wide, _d = _a.close, close = _d === void 0 ? false : _d;
577
+ var _b = _a.type, type = _b === void 0 ? 'info' : _b, _c = _a.leftBorder, leftBorder = _c === void 0 ? true : _c, icon = _a.icon, className = _a.className, children = _a.children, onClose = _a.onClose, wide = _a.wide, _d = _a.close, close = _d === void 0 ? false : _d, customIcon = _a.customIcon;
582
578
  var iconNode = null;
583
- if (typeof icon === 'string') {
584
- var Icon = iconMap[icon];
579
+ if (customIcon) {
580
+ iconNode = React$1.createElement("span", { className: "vchasno-ui-alert__icon-wrapper" }, customIcon);
581
+ }
582
+ else {
583
+ var Icon = iconMap[icon || type];
585
584
  iconNode = (React$1.createElement("span", { className: "vchasno-ui-alert__icon-wrapper" },
586
585
  React$1.createElement(Icon, null)));
587
586
  }
588
- else if (icon) {
589
- iconNode = React$1.createElement("span", { className: "vchasno-ui-alert__icon-wrapper" }, icon);
590
- }
591
587
  var closeNode = null;
592
588
  if (typeof onClose === 'function') {
593
- var CrossSvg = iconMap.cross;
594
589
  closeNode = (React$1.createElement("span", { className: "vchasno-ui-alert__close-icon", onClick: onClose },
595
- React$1.createElement(CrossSvg, null)));
590
+ React$1.createElement("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
591
+ React$1.createElement("path", { d: "M6.4 5L9.7 1.7C10.1 1.3 10.1 0.7 9.7 0.3C9.3 -0.1 8.7 -0.1 8.3 0.3L5 3.6L1.7 0.3C1.3 -0.1 0.7 -0.1 0.3 0.3C-0.1 0.7 -0.1 1.3 0.3 1.7L3.6 5L0.3 8.3C-0.1 8.7 -0.1 9.3 0.3 9.7C0.5 9.9 0.7 10 1 10C1.3 10 1.5 9.9 1.7 9.7L5 6.4L8.3 9.7C8.5 9.9 8.7 10 9 10C9.3 10 9.5 9.9 9.7 9.7C10.1 9.3 10.1 8.7 9.7 8.3L6.4 5Z", fill: "currentColor" }))));
596
592
  }
597
593
  return (React$1.createElement("span", { className: cn('vchasno-ui-alert', "--".concat(type), { '--close': close }, { '--wide': wide }, { '--left-border': leftBorder }, className) },
598
594
  iconNode,