@astral/ui 4.99.0 → 4.99.2

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.
@@ -30,7 +30,7 @@ const alertCva = cva(alertClassnames.root, {
30
30
  },
31
31
  },
32
32
  });
33
- export const Alert = forwardRef(({ children, title, closeText = 'Скрыть', isShow, display, actions, onClose, severity = 'info', style, className, icon, unmountOnExit, }, ref) => {
33
+ export const Alert = forwardRef(({ children, title, closeText = 'Скрыть', isShow, display, actions, onClose, severity = 'info', style, className, icon, unmountOnExit = true, }, ref) => {
34
34
  const { shouldRenderParagraph, isVisible } = useLogic({
35
35
  children,
36
36
  isShow,
@@ -1,3 +1,4 @@
1
+ import { alertClassnames } from '../../Alert';
1
2
  import { styled } from '../../styled';
2
3
  export const MainRoot = styled.main `
3
4
  overflow: hidden;
@@ -25,13 +26,23 @@ export const AlertContainer = styled.div `
25
26
  flex-direction: column;
26
27
  gap: ${({ theme }) => theme.spacing(2)};
27
28
 
28
- margin-bottom: ${({ theme }) => theme.spacing(4)};
29
-
30
29
  &:empty {
31
30
  display: none;
32
31
  }
33
32
 
33
+ & > *:last-child .${alertClassnames.root} {
34
+ margin-bottom: ${({ theme }) => theme.spacing(4)};
35
+ }
36
+
34
37
  ${({ theme }) => theme.breakpoints.down('sm')} {
35
- margin: ${({ theme }) => theme.spacing(3, 4, 1)};
38
+ margin: ${({ theme }) => theme.spacing(0, 4)};
39
+
40
+ & > *:first-of-type .${alertClassnames.root} {
41
+ margin-top: ${({ theme }) => theme.spacing(3)};
42
+ }
43
+
44
+ & > *:last-child .${alertClassnames.root} {
45
+ margin-bottom: ${({ theme }) => theme.spacing(1)};
46
+ }
36
47
  }
37
48
  `;
@@ -10,11 +10,7 @@ export const StyledLink = styled(Link) `
10
10
 
11
11
  font-size: ${({ theme }) => theme.typography.fontSize};
12
12
  color: ${({ theme }) => theme.palette.components.link.main};
13
- text-decoration: none;
14
-
15
- &:active {
16
- color: ${({ theme }) => theme.palette.components.link.active};
17
- }
13
+ text-decoration: none;
18
14
 
19
15
  &:visited {
20
16
  color: ${({ theme }) => theme.palette.components.link.visited};
@@ -25,6 +21,10 @@ export const StyledLink = styled(Link) `
25
21
  text-decoration: underline;
26
22
  }
27
23
 
24
+ &:active {
25
+ color: ${({ theme }) => theme.palette.components.link.active};
26
+ }
27
+
28
28
  &.${linkClassnames.isContrast} {
29
29
  color: ${({ theme }) => theme.palette.components.link.contrast.main};
30
30
 
@@ -35,9 +35,9 @@ export const StyledLink = styled(Link) `
35
35
  &:hover {
36
36
  color: ${({ theme }) => theme.palette.components.link.contrast.hover};
37
37
  }
38
-
38
+
39
39
  &:active {
40
- color: ${({ theme }) => theme.palette.components.link.active};
40
+ color: ${({ theme }) => theme.palette.components.link.contrast.active};
41
41
  }
42
42
  }
43
43
 
@@ -1,3 +1,4 @@
1
+ import { alertClassnames } from '../Alert';
1
2
  import { styled } from '../styled';
2
3
  export const MobileAlertWrapper = styled.div `
3
4
  display: none;
@@ -6,13 +7,17 @@ export const MobileAlertWrapper = styled.div `
6
7
  flex-direction: column;
7
8
  gap: ${({ theme }) => theme.spacing(2)};
8
9
 
9
- margin: ${({ theme }) => theme.spacing(3, 4, 0, 4)};
10
+ margin: ${({ theme }) => theme.spacing(0, 4)};
10
11
 
11
12
  background-color: ${({ theme }) => theme.palette.background.default};
12
13
 
13
14
  &:empty {
14
15
  display: none;
15
16
  }
17
+
18
+ & > *:first-of-type .${alertClassnames.root} {
19
+ margin-top: ${({ theme }) => theme.spacing(3)};
20
+ }
16
21
  }
17
22
  `;
18
23
  export const DesktopAlertWrapper = styled.div `
@@ -20,12 +25,14 @@ export const DesktopAlertWrapper = styled.div `
20
25
  flex-direction: column;
21
26
  gap: ${({ theme }) => theme.spacing(2)};
22
27
 
23
- margin-bottom: ${({ theme }) => theme.spacing(4)};
24
-
25
28
  &:empty {
26
29
  display: none;
27
30
  }
28
31
 
32
+ & > *:last-child .${alertClassnames.root} {
33
+ margin-bottom: ${({ theme }) => theme.spacing(4)};
34
+ }
35
+
29
36
  ${({ theme }) => theme.breakpoints.down('sm')} {
30
37
  display: none;
31
38
  }
@@ -7,6 +7,7 @@ export type LinkColors = {
7
7
  main: string;
8
8
  hover: string;
9
9
  visited: string;
10
+ active: string;
10
11
  };
11
12
  };
12
13
  export declare const linkColors: LinkColors;
@@ -7,5 +7,6 @@ export const linkColors = {
7
7
  main: '#6EB3F8',
8
8
  hover: '#499CEF',
9
9
  visited: '#C084FC',
10
+ active: '#2A84DF',
10
11
  },
11
12
  };
@@ -33,7 +33,7 @@ const alertCva = (0, cva_1.cva)(constants_1.alertClassnames.root, {
33
33
  },
34
34
  },
35
35
  });
36
- exports.Alert = (0, react_1.forwardRef)(({ children, title, closeText = 'Скрыть', isShow, display, actions, onClose, severity = 'info', style, className, icon, unmountOnExit, }, ref) => {
36
+ exports.Alert = (0, react_1.forwardRef)(({ children, title, closeText = 'Скрыть', isShow, display, actions, onClose, severity = 'info', style, className, icon, unmountOnExit = true, }, ref) => {
37
37
  const { shouldRenderParagraph, isVisible } = (0, useLogic_1.useLogic)({
38
38
  children,
39
39
  isShow,
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.AlertContainer = exports.AlertWrapper = exports.MainRoot = void 0;
4
+ const Alert_1 = require("../../Alert");
4
5
  const styled_1 = require("../../styled");
5
6
  exports.MainRoot = styled_1.styled.main `
6
7
  overflow: hidden;
@@ -28,13 +29,23 @@ exports.AlertContainer = styled_1.styled.div `
28
29
  flex-direction: column;
29
30
  gap: ${({ theme }) => theme.spacing(2)};
30
31
 
31
- margin-bottom: ${({ theme }) => theme.spacing(4)};
32
-
33
32
  &:empty {
34
33
  display: none;
35
34
  }
36
35
 
36
+ & > *:last-child .${Alert_1.alertClassnames.root} {
37
+ margin-bottom: ${({ theme }) => theme.spacing(4)};
38
+ }
39
+
37
40
  ${({ theme }) => theme.breakpoints.down('sm')} {
38
- margin: ${({ theme }) => theme.spacing(3, 4, 1)};
41
+ margin: ${({ theme }) => theme.spacing(0, 4)};
42
+
43
+ & > *:first-of-type .${Alert_1.alertClassnames.root} {
44
+ margin-top: ${({ theme }) => theme.spacing(3)};
45
+ }
46
+
47
+ & > *:last-child .${Alert_1.alertClassnames.root} {
48
+ margin-bottom: ${({ theme }) => theme.spacing(1)};
49
+ }
39
50
  }
40
51
  `;
@@ -16,11 +16,7 @@ exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
16
16
 
17
17
  font-size: ${({ theme }) => theme.typography.fontSize};
18
18
  color: ${({ theme }) => theme.palette.components.link.main};
19
- text-decoration: none;
20
-
21
- &:active {
22
- color: ${({ theme }) => theme.palette.components.link.active};
23
- }
19
+ text-decoration: none;
24
20
 
25
21
  &:visited {
26
22
  color: ${({ theme }) => theme.palette.components.link.visited};
@@ -31,6 +27,10 @@ exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
31
27
  text-decoration: underline;
32
28
  }
33
29
 
30
+ &:active {
31
+ color: ${({ theme }) => theme.palette.components.link.active};
32
+ }
33
+
34
34
  &.${constants_1.linkClassnames.isContrast} {
35
35
  color: ${({ theme }) => theme.palette.components.link.contrast.main};
36
36
 
@@ -41,9 +41,9 @@ exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
41
41
  &:hover {
42
42
  color: ${({ theme }) => theme.palette.components.link.contrast.hover};
43
43
  }
44
-
44
+
45
45
  &:active {
46
- color: ${({ theme }) => theme.palette.components.link.active};
46
+ color: ${({ theme }) => theme.palette.components.link.contrast.active};
47
47
  }
48
48
  }
49
49
 
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.LoaderWrapper = exports.DesktopAlertWrapper = exports.MobileAlertWrapper = void 0;
4
+ const Alert_1 = require("../Alert");
4
5
  const styled_1 = require("../styled");
5
6
  exports.MobileAlertWrapper = styled_1.styled.div `
6
7
  display: none;
@@ -9,13 +10,17 @@ exports.MobileAlertWrapper = styled_1.styled.div `
9
10
  flex-direction: column;
10
11
  gap: ${({ theme }) => theme.spacing(2)};
11
12
 
12
- margin: ${({ theme }) => theme.spacing(3, 4, 0, 4)};
13
+ margin: ${({ theme }) => theme.spacing(0, 4)};
13
14
 
14
15
  background-color: ${({ theme }) => theme.palette.background.default};
15
16
 
16
17
  &:empty {
17
18
  display: none;
18
19
  }
20
+
21
+ & > *:first-of-type .${Alert_1.alertClassnames.root} {
22
+ margin-top: ${({ theme }) => theme.spacing(3)};
23
+ }
19
24
  }
20
25
  `;
21
26
  exports.DesktopAlertWrapper = styled_1.styled.div `
@@ -23,12 +28,14 @@ exports.DesktopAlertWrapper = styled_1.styled.div `
23
28
  flex-direction: column;
24
29
  gap: ${({ theme }) => theme.spacing(2)};
25
30
 
26
- margin-bottom: ${({ theme }) => theme.spacing(4)};
27
-
28
31
  &:empty {
29
32
  display: none;
30
33
  }
31
34
 
35
+ & > *:last-child .${Alert_1.alertClassnames.root} {
36
+ margin-bottom: ${({ theme }) => theme.spacing(4)};
37
+ }
38
+
32
39
  ${({ theme }) => theme.breakpoints.down('sm')} {
33
40
  display: none;
34
41
  }
@@ -7,6 +7,7 @@ export type LinkColors = {
7
7
  main: string;
8
8
  hover: string;
9
9
  visited: string;
10
+ active: string;
10
11
  };
11
12
  };
12
13
  export declare const linkColors: LinkColors;
@@ -10,5 +10,6 @@ exports.linkColors = {
10
10
  main: '#6EB3F8',
11
11
  hover: '#499CEF',
12
12
  visited: '#C084FC',
13
+ active: '#2A84DF',
13
14
  },
14
15
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "4.99.0",
3
+ "version": "4.99.2",
4
4
  "browser": "./index.js",
5
5
  "main": "./node/index.js",
6
6
  "dependencies": {