@pushwoosh/dumb-components 1.0.40 → 1.0.42

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.
@@ -11,15 +11,54 @@ export declare const RoundedBlock: import("styled-components").StyledComponent<"
11
11
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
12
12
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
13
13
  $bgColor?: string | undefined;
14
- $border?: string | undefined;
15
- $borderRadius?: string | number | undefined;
14
+ $border?: string | ({
15
+ top?: string | undefined;
16
+ right?: string | undefined;
17
+ bottom?: string | undefined;
18
+ left?: string | undefined;
19
+ } | {
20
+ horizontal: string;
21
+ top?: string | undefined;
22
+ bottom?: string | undefined;
23
+ } | {
24
+ vertical: string;
25
+ right?: string | undefined;
26
+ left?: string | undefined;
27
+ }) | undefined;
28
+ $borderRadius?: (string | number) | undefined;
16
29
  $boxShadow?: string | undefined;
17
- $gap?: string | number | undefined;
30
+ $gap?: (string | number) | undefined;
18
31
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
19
32
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
20
33
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
21
- $margin?: string | number | undefined;
22
- $padding?: string | number | undefined;
34
+ $margin?: (string | number) | ({
35
+ top?: (string | number) | undefined;
36
+ right?: (string | number) | undefined;
37
+ bottom?: (string | number) | undefined;
38
+ left?: (string | number) | undefined;
39
+ } | {
40
+ horizontal: string | number;
41
+ top?: (string | number) | undefined;
42
+ bottom?: (string | number) | undefined;
43
+ } | {
44
+ vertical: string | number;
45
+ right?: (string | number) | undefined;
46
+ left?: (string | number) | undefined;
47
+ }) | undefined;
48
+ $padding?: (string | number) | ({
49
+ top?: (string | number) | undefined;
50
+ right?: (string | number) | undefined;
51
+ bottom?: (string | number) | undefined;
52
+ left?: (string | number) | undefined;
53
+ } | {
54
+ horizontal: string | number;
55
+ top?: (string | number) | undefined;
56
+ bottom?: (string | number) | undefined;
57
+ } | {
58
+ vertical: string | number;
59
+ right?: (string | number) | undefined;
60
+ left?: (string | number) | undefined;
61
+ }) | undefined;
23
62
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
24
63
  } & {
25
64
  $gridAutoFlow: string;
@@ -31,15 +70,54 @@ export declare const InputFrame: import("styled-components").StyledComponent<"di
31
70
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
32
71
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
33
72
  $bgColor?: string | undefined;
34
- $border?: string | undefined;
35
- $borderRadius?: string | number | undefined;
73
+ $border?: string | ({
74
+ top?: string | undefined;
75
+ right?: string | undefined;
76
+ bottom?: string | undefined;
77
+ left?: string | undefined;
78
+ } | {
79
+ horizontal: string;
80
+ top?: string | undefined;
81
+ bottom?: string | undefined;
82
+ } | {
83
+ vertical: string;
84
+ right?: string | undefined;
85
+ left?: string | undefined;
86
+ }) | undefined;
87
+ $borderRadius?: (string | number) | undefined;
36
88
  $boxShadow?: string | undefined;
37
- $gap?: string | number | undefined;
89
+ $gap?: (string | number) | undefined;
38
90
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
39
91
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
40
92
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
41
- $margin?: string | number | undefined;
42
- $padding?: string | number | undefined;
93
+ $margin?: (string | number) | ({
94
+ top?: (string | number) | undefined;
95
+ right?: (string | number) | undefined;
96
+ bottom?: (string | number) | undefined;
97
+ left?: (string | number) | undefined;
98
+ } | {
99
+ horizontal: string | number;
100
+ top?: (string | number) | undefined;
101
+ bottom?: (string | number) | undefined;
102
+ } | {
103
+ vertical: string | number;
104
+ right?: (string | number) | undefined;
105
+ left?: (string | number) | undefined;
106
+ }) | undefined;
107
+ $padding?: (string | number) | ({
108
+ top?: (string | number) | undefined;
109
+ right?: (string | number) | undefined;
110
+ bottom?: (string | number) | undefined;
111
+ left?: (string | number) | undefined;
112
+ } | {
113
+ horizontal: string | number;
114
+ top?: (string | number) | undefined;
115
+ bottom?: (string | number) | undefined;
116
+ } | {
117
+ vertical: string | number;
118
+ right?: (string | number) | undefined;
119
+ left?: (string | number) | undefined;
120
+ }) | undefined;
43
121
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
44
122
  } & {
45
123
  $gridAutoFlow: string;
@@ -54,15 +132,54 @@ export declare const SingleInputFrame: import("styled-components").StyledCompone
54
132
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
55
133
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
56
134
  $bgColor?: string | undefined;
57
- $border?: string | undefined;
58
- $borderRadius?: string | number | undefined;
135
+ $border?: string | ({
136
+ top?: string | undefined;
137
+ right?: string | undefined;
138
+ bottom?: string | undefined;
139
+ left?: string | undefined;
140
+ } | {
141
+ horizontal: string;
142
+ top?: string | undefined;
143
+ bottom?: string | undefined;
144
+ } | {
145
+ vertical: string;
146
+ right?: string | undefined;
147
+ left?: string | undefined;
148
+ }) | undefined;
149
+ $borderRadius?: (string | number) | undefined;
59
150
  $boxShadow?: string | undefined;
60
- $gap?: string | number | undefined;
151
+ $gap?: (string | number) | undefined;
61
152
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
62
153
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
63
154
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
64
- $margin?: string | number | undefined;
65
- $padding?: string | number | undefined;
155
+ $margin?: (string | number) | ({
156
+ top?: (string | number) | undefined;
157
+ right?: (string | number) | undefined;
158
+ bottom?: (string | number) | undefined;
159
+ left?: (string | number) | undefined;
160
+ } | {
161
+ horizontal: string | number;
162
+ top?: (string | number) | undefined;
163
+ bottom?: (string | number) | undefined;
164
+ } | {
165
+ vertical: string | number;
166
+ right?: (string | number) | undefined;
167
+ left?: (string | number) | undefined;
168
+ }) | undefined;
169
+ $padding?: (string | number) | ({
170
+ top?: (string | number) | undefined;
171
+ right?: (string | number) | undefined;
172
+ bottom?: (string | number) | undefined;
173
+ left?: (string | number) | undefined;
174
+ } | {
175
+ horizontal: string | number;
176
+ top?: (string | number) | undefined;
177
+ bottom?: (string | number) | undefined;
178
+ } | {
179
+ vertical: string | number;
180
+ right?: (string | number) | undefined;
181
+ left?: (string | number) | undefined;
182
+ }) | undefined;
66
183
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
67
184
  } & {
68
185
  $gridAutoFlow: string;
@@ -2,15 +2,54 @@ export declare const Place: import("styled-components").StyledComponent<"div", a
2
2
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
3
3
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
4
4
  $bgColor?: string | undefined;
5
- $border?: string | undefined;
6
- $borderRadius?: string | number | undefined;
5
+ $border?: string | ({
6
+ top?: string | undefined;
7
+ right?: string | undefined;
8
+ bottom?: string | undefined;
9
+ left?: string | undefined;
10
+ } | {
11
+ horizontal: string;
12
+ top?: string | undefined;
13
+ bottom?: string | undefined;
14
+ } | {
15
+ vertical: string;
16
+ right?: string | undefined;
17
+ left?: string | undefined;
18
+ }) | undefined;
19
+ $borderRadius?: (string | number) | undefined;
7
20
  $boxShadow?: string | undefined;
8
- $gap?: string | number | undefined;
21
+ $gap?: (string | number) | undefined;
9
22
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
10
23
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
11
24
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
12
- $margin?: string | number | undefined;
13
- $padding?: string | number | undefined;
25
+ $margin?: (string | number) | ({
26
+ top?: (string | number) | undefined;
27
+ right?: (string | number) | undefined;
28
+ bottom?: (string | number) | undefined;
29
+ left?: (string | number) | undefined;
30
+ } | {
31
+ horizontal: string | number;
32
+ top?: (string | number) | undefined;
33
+ bottom?: (string | number) | undefined;
34
+ } | {
35
+ vertical: string | number;
36
+ right?: (string | number) | undefined;
37
+ left?: (string | number) | undefined;
38
+ }) | undefined;
39
+ $padding?: (string | number) | ({
40
+ top?: (string | number) | undefined;
41
+ right?: (string | number) | undefined;
42
+ bottom?: (string | number) | undefined;
43
+ left?: (string | number) | undefined;
44
+ } | {
45
+ horizontal: string | number;
46
+ top?: (string | number) | undefined;
47
+ bottom?: (string | number) | undefined;
48
+ } | {
49
+ vertical: string | number;
50
+ right?: (string | number) | undefined;
51
+ left?: (string | number) | undefined;
52
+ }) | undefined;
14
53
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
15
54
  } & {
16
55
  $gridAutoFlow: string;
@@ -24,15 +63,54 @@ export declare const DropdownMenuSection: import("styled-components").StyledComp
24
63
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
25
64
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
26
65
  $bgColor?: string | undefined;
27
- $border?: string | undefined;
28
- $borderRadius?: string | number | undefined;
66
+ $border?: string | ({
67
+ top?: string | undefined;
68
+ right?: string | undefined;
69
+ bottom?: string | undefined;
70
+ left?: string | undefined;
71
+ } | {
72
+ horizontal: string;
73
+ top?: string | undefined;
74
+ bottom?: string | undefined;
75
+ } | {
76
+ vertical: string;
77
+ right?: string | undefined;
78
+ left?: string | undefined;
79
+ }) | undefined;
80
+ $borderRadius?: (string | number) | undefined;
29
81
  $boxShadow?: string | undefined;
30
- $gap?: string | number | undefined;
82
+ $gap?: (string | number) | undefined;
31
83
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
32
84
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
33
85
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
34
- $margin?: string | number | undefined;
35
- $padding?: string | number | undefined;
86
+ $margin?: (string | number) | ({
87
+ top?: (string | number) | undefined;
88
+ right?: (string | number) | undefined;
89
+ bottom?: (string | number) | undefined;
90
+ left?: (string | number) | undefined;
91
+ } | {
92
+ horizontal: string | number;
93
+ top?: (string | number) | undefined;
94
+ bottom?: (string | number) | undefined;
95
+ } | {
96
+ vertical: string | number;
97
+ right?: (string | number) | undefined;
98
+ left?: (string | number) | undefined;
99
+ }) | undefined;
100
+ $padding?: (string | number) | ({
101
+ top?: (string | number) | undefined;
102
+ right?: (string | number) | undefined;
103
+ bottom?: (string | number) | undefined;
104
+ left?: (string | number) | undefined;
105
+ } | {
106
+ horizontal: string | number;
107
+ top?: (string | number) | undefined;
108
+ bottom?: (string | number) | undefined;
109
+ } | {
110
+ vertical: string | number;
111
+ right?: (string | number) | undefined;
112
+ left?: (string | number) | undefined;
113
+ }) | undefined;
36
114
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
37
115
  } & {
38
116
  $gridAutoFlow: string;
@@ -1,20 +1,24 @@
1
1
  import React from 'react';
2
- import { Spacing } from '@pushwoosh/kit-constants';
2
+ import { Color } from '@pushwoosh/kit-constants';
3
3
  import { Vertical } from '@pushwoosh/kit-helpers';
4
+ import { Text } from '@pushwoosh/kit-typography';
4
5
  import Email from './assets/email.svg?url';
5
6
  import { Container, PreviewMock } from './styles';
6
- import { LockedText, LockedTitle } from '../../../common';
7
7
  export function NoEmailTemplatePreview() {
8
8
  return React.createElement(Container, {
9
- "$gap": Spacing.S4,
10
- "$padding": `${Spacing.S4} ${Spacing.S4} ${Spacing.S7}`
9
+ "$padding": "12px 12px 24px",
10
+ "$gap": 12
11
11
  }, React.createElement(PreviewMock, {
12
12
  "$alignItems": "center",
13
13
  "$justifyContent": "center"
14
14
  }, React.createElement("img", {
15
15
  src: Email,
16
16
  alt: "Email envelop icon"
17
- })), React.createElement(Vertical, null, React.createElement(LockedTitle, null, "Content missed..."), React.createElement(LockedText, {
18
- "$small": true
17
+ })), React.createElement(Vertical, null, React.createElement(Text, {
18
+ "$variant": "footnote",
19
+ "$color": Color.LOCKED
20
+ }, "Content missed..."), React.createElement(Text, {
21
+ "$variant": "footnote",
22
+ "$color": Color.LOCKED
19
23
  }, "Might be old data or deleted presets")));
20
24
  }
@@ -2,15 +2,54 @@ export declare const PreviewMock: import("styled-components").StyledComponent<"d
2
2
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
3
3
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
4
4
  $bgColor?: string | undefined;
5
- $border?: string | undefined;
6
- $borderRadius?: string | number | undefined;
5
+ $border?: string | ({
6
+ top?: string | undefined;
7
+ right?: string | undefined;
8
+ bottom?: string | undefined;
9
+ left?: string | undefined;
10
+ } | {
11
+ horizontal: string;
12
+ top?: string | undefined;
13
+ bottom?: string | undefined;
14
+ } | {
15
+ vertical: string;
16
+ right?: string | undefined;
17
+ left?: string | undefined;
18
+ }) | undefined;
19
+ $borderRadius?: (string | number) | undefined;
7
20
  $boxShadow?: string | undefined;
8
- $gap?: string | number | undefined;
21
+ $gap?: (string | number) | undefined;
9
22
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
10
23
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
11
24
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
12
- $margin?: string | number | undefined;
13
- $padding?: string | number | undefined;
25
+ $margin?: (string | number) | ({
26
+ top?: (string | number) | undefined;
27
+ right?: (string | number) | undefined;
28
+ bottom?: (string | number) | undefined;
29
+ left?: (string | number) | undefined;
30
+ } | {
31
+ horizontal: string | number;
32
+ top?: (string | number) | undefined;
33
+ bottom?: (string | number) | undefined;
34
+ } | {
35
+ vertical: string | number;
36
+ right?: (string | number) | undefined;
37
+ left?: (string | number) | undefined;
38
+ }) | undefined;
39
+ $padding?: (string | number) | ({
40
+ top?: (string | number) | undefined;
41
+ right?: (string | number) | undefined;
42
+ bottom?: (string | number) | undefined;
43
+ left?: (string | number) | undefined;
44
+ } | {
45
+ horizontal: string | number;
46
+ top?: (string | number) | undefined;
47
+ bottom?: (string | number) | undefined;
48
+ } | {
49
+ vertical: string | number;
50
+ right?: (string | number) | undefined;
51
+ left?: (string | number) | undefined;
52
+ }) | undefined;
14
53
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
15
54
  } & {
16
55
  $gridAutoFlow: string;
@@ -19,15 +58,54 @@ export declare const Container: import("styled-components").StyledComponent<"div
19
58
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
20
59
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
21
60
  $bgColor?: string | undefined;
22
- $border?: string | undefined;
23
- $borderRadius?: string | number | undefined;
61
+ $border?: string | ({
62
+ top?: string | undefined;
63
+ right?: string | undefined;
64
+ bottom?: string | undefined;
65
+ left?: string | undefined;
66
+ } | {
67
+ horizontal: string;
68
+ top?: string | undefined;
69
+ bottom?: string | undefined;
70
+ } | {
71
+ vertical: string;
72
+ right?: string | undefined;
73
+ left?: string | undefined;
74
+ }) | undefined;
75
+ $borderRadius?: (string | number) | undefined;
24
76
  $boxShadow?: string | undefined;
25
- $gap?: string | number | undefined;
77
+ $gap?: (string | number) | undefined;
26
78
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
27
79
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
28
80
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
29
- $margin?: string | number | undefined;
30
- $padding?: string | number | undefined;
81
+ $margin?: (string | number) | ({
82
+ top?: (string | number) | undefined;
83
+ right?: (string | number) | undefined;
84
+ bottom?: (string | number) | undefined;
85
+ left?: (string | number) | undefined;
86
+ } | {
87
+ horizontal: string | number;
88
+ top?: (string | number) | undefined;
89
+ bottom?: (string | number) | undefined;
90
+ } | {
91
+ vertical: string | number;
92
+ right?: (string | number) | undefined;
93
+ left?: (string | number) | undefined;
94
+ }) | undefined;
95
+ $padding?: (string | number) | ({
96
+ top?: (string | number) | undefined;
97
+ right?: (string | number) | undefined;
98
+ bottom?: (string | number) | undefined;
99
+ left?: (string | number) | undefined;
100
+ } | {
101
+ horizontal: string | number;
102
+ top?: (string | number) | undefined;
103
+ bottom?: (string | number) | undefined;
104
+ } | {
105
+ vertical: string | number;
106
+ right?: (string | number) | undefined;
107
+ left?: (string | number) | undefined;
108
+ }) | undefined;
31
109
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
32
110
  } & {
33
111
  $gridAutoFlow: string;
@@ -3,15 +3,54 @@ export declare const MainInfoContainer: import("styled-components").StyledCompon
3
3
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
4
4
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
5
5
  $bgColor?: string | undefined;
6
- $border?: string | undefined;
7
- $borderRadius?: string | number | undefined;
6
+ $border?: string | ({
7
+ top?: string | undefined;
8
+ right?: string | undefined;
9
+ bottom?: string | undefined;
10
+ left?: string | undefined;
11
+ } | {
12
+ horizontal: string;
13
+ top?: string | undefined;
14
+ bottom?: string | undefined;
15
+ } | {
16
+ vertical: string;
17
+ right?: string | undefined;
18
+ left?: string | undefined;
19
+ }) | undefined;
20
+ $borderRadius?: (string | number) | undefined;
8
21
  $boxShadow?: string | undefined;
9
- $gap?: string | number | undefined;
22
+ $gap?: (string | number) | undefined;
10
23
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
11
24
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
12
25
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
13
- $margin?: string | number | undefined;
14
- $padding?: string | number | undefined;
26
+ $margin?: (string | number) | ({
27
+ top?: (string | number) | undefined;
28
+ right?: (string | number) | undefined;
29
+ bottom?: (string | number) | undefined;
30
+ left?: (string | number) | undefined;
31
+ } | {
32
+ horizontal: string | number;
33
+ top?: (string | number) | undefined;
34
+ bottom?: (string | number) | undefined;
35
+ } | {
36
+ vertical: string | number;
37
+ right?: (string | number) | undefined;
38
+ left?: (string | number) | undefined;
39
+ }) | undefined;
40
+ $padding?: (string | number) | ({
41
+ top?: (string | number) | undefined;
42
+ right?: (string | number) | undefined;
43
+ bottom?: (string | number) | undefined;
44
+ left?: (string | number) | undefined;
45
+ } | {
46
+ horizontal: string | number;
47
+ top?: (string | number) | undefined;
48
+ bottom?: (string | number) | undefined;
49
+ } | {
50
+ vertical: string | number;
51
+ right?: (string | number) | undefined;
52
+ left?: (string | number) | undefined;
53
+ }) | undefined;
15
54
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
16
55
  } & {
17
56
  $gridAutoFlow: string;
@@ -25,15 +64,54 @@ export declare const LeftSlot: import("styled-components").StyledComponent<"div"
25
64
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
26
65
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
27
66
  $bgColor?: string | undefined;
28
- $border?: string | undefined;
29
- $borderRadius?: string | number | undefined;
67
+ $border?: string | ({
68
+ top?: string | undefined;
69
+ right?: string | undefined;
70
+ bottom?: string | undefined;
71
+ left?: string | undefined;
72
+ } | {
73
+ horizontal: string;
74
+ top?: string | undefined;
75
+ bottom?: string | undefined;
76
+ } | {
77
+ vertical: string;
78
+ right?: string | undefined;
79
+ left?: string | undefined;
80
+ }) | undefined;
81
+ $borderRadius?: (string | number) | undefined;
30
82
  $boxShadow?: string | undefined;
31
- $gap?: string | number | undefined;
83
+ $gap?: (string | number) | undefined;
32
84
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
33
85
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
34
86
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
35
- $margin?: string | number | undefined;
36
- $padding?: string | number | undefined;
87
+ $margin?: (string | number) | ({
88
+ top?: (string | number) | undefined;
89
+ right?: (string | number) | undefined;
90
+ bottom?: (string | number) | undefined;
91
+ left?: (string | number) | undefined;
92
+ } | {
93
+ horizontal: string | number;
94
+ top?: (string | number) | undefined;
95
+ bottom?: (string | number) | undefined;
96
+ } | {
97
+ vertical: string | number;
98
+ right?: (string | number) | undefined;
99
+ left?: (string | number) | undefined;
100
+ }) | undefined;
101
+ $padding?: (string | number) | ({
102
+ top?: (string | number) | undefined;
103
+ right?: (string | number) | undefined;
104
+ bottom?: (string | number) | undefined;
105
+ left?: (string | number) | undefined;
106
+ } | {
107
+ horizontal: string | number;
108
+ top?: (string | number) | undefined;
109
+ bottom?: (string | number) | undefined;
110
+ } | {
111
+ vertical: string | number;
112
+ right?: (string | number) | undefined;
113
+ left?: (string | number) | undefined;
114
+ }) | undefined;
37
115
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
38
116
  } & {
39
117
  $gridAutoFlow: string;
@@ -42,15 +120,54 @@ export declare const RightSlotContainer: import("styled-components").StyledCompo
42
120
  $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
43
121
  $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
44
122
  $bgColor?: string | undefined;
45
- $border?: string | undefined;
46
- $borderRadius?: string | number | undefined;
123
+ $border?: string | ({
124
+ top?: string | undefined;
125
+ right?: string | undefined;
126
+ bottom?: string | undefined;
127
+ left?: string | undefined;
128
+ } | {
129
+ horizontal: string;
130
+ top?: string | undefined;
131
+ bottom?: string | undefined;
132
+ } | {
133
+ vertical: string;
134
+ right?: string | undefined;
135
+ left?: string | undefined;
136
+ }) | undefined;
137
+ $borderRadius?: (string | number) | undefined;
47
138
  $boxShadow?: string | undefined;
48
- $gap?: string | number | undefined;
139
+ $gap?: (string | number) | undefined;
49
140
  $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
50
141
  $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
51
142
  $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
52
- $margin?: string | number | undefined;
53
- $padding?: string | number | undefined;
143
+ $margin?: (string | number) | ({
144
+ top?: (string | number) | undefined;
145
+ right?: (string | number) | undefined;
146
+ bottom?: (string | number) | undefined;
147
+ left?: (string | number) | undefined;
148
+ } | {
149
+ horizontal: string | number;
150
+ top?: (string | number) | undefined;
151
+ bottom?: (string | number) | undefined;
152
+ } | {
153
+ vertical: string | number;
154
+ right?: (string | number) | undefined;
155
+ left?: (string | number) | undefined;
156
+ }) | undefined;
157
+ $padding?: (string | number) | ({
158
+ top?: (string | number) | undefined;
159
+ right?: (string | number) | undefined;
160
+ bottom?: (string | number) | undefined;
161
+ left?: (string | number) | undefined;
162
+ } | {
163
+ horizontal: string | number;
164
+ top?: (string | number) | undefined;
165
+ bottom?: (string | number) | undefined;
166
+ } | {
167
+ vertical: string | number;
168
+ right?: (string | number) | undefined;
169
+ left?: (string | number) | undefined;
170
+ }) | undefined;
54
171
  $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
55
172
  } & {
56
173
  $gridAutoFlow: string;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { Color, Spacing, Tag } from '@pushwoosh/kit-constants';
2
+ import { Color, Tag } from '@pushwoosh/kit-constants';
3
3
  import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
4
4
  import { OpenIcon, InfoRoundIcon } from '@pushwoosh/kit-icons';
5
5
  import { Text } from '@pushwoosh/kit-typography';
@@ -19,8 +19,8 @@ export function FieldBox(props) {
19
19
  children
20
20
  } = props;
21
21
  return React.createElement(Vertical, {
22
- "$gap": Spacing.S1,
23
- ref: boxRef
22
+ ref: boxRef,
23
+ "$gap": 4
24
24
  }, title && React.createElement(Horizontal, {
25
25
  "$alignItems": "center",
26
26
  "$justifyContent": "space-between"
@@ -45,9 +45,9 @@ export function FieldBox(props) {
45
45
  size: "small",
46
46
  view: "lined"
47
47
  }))), actions && React.createElement(Horizontal, {
48
+ ref: actionsRef,
48
49
  "$alignItems": "center",
49
- "$gap": Spacing.S1,
50
- ref: actionsRef
50
+ "$gap": 4
51
51
  }, actions)), children, description && !error && React.createElement(Text, {
52
52
  "$variant": "footnote",
53
53
  "$color": Color.LOCKED