@bikdotai/bik-component-library 0.0.512-beta.0 → 0.0.512-beta.1
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.
- package/dist/cjs/assets/icons/halfRectangle.svg.js +1 -1
- package/dist/cjs/components/SearchFilter/components/DatePickerButton.js +1 -1
- package/dist/cjs/components/SearchFilter/components/DateRangeOnlyButton.js +1 -1
- package/dist/cjs/components/TypographyStyle.d.ts +0 -17
- package/dist/cjs/components/TypographyStyle.js +14 -77
- package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js +1 -1
- package/dist/cjs/components/button/Button.js +1 -1
- package/dist/cjs/components/button/model.d.ts +1 -1
- package/dist/cjs/components/button/themes.d.ts +2 -2
- package/dist/cjs/components/button/themes.js +1 -1
- package/dist/cjs/components/custom-date-time/DateSelector/DateSelector.js +1 -1
- package/dist/cjs/components/datePicker/index.d.ts +1 -0
- package/dist/cjs/components/dropdown/Dropdown.js +1 -1
- package/dist/cjs/components/icon-button/IconButton.styled.js +1 -1
- package/dist/cjs/components/icon-button/model.d.ts +1 -1
- package/dist/cjs/components/icon-button/theme.js +1 -1
- package/dist/cjs/components/input/Input.d.ts +1 -0
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/input/Input.styled.js +1 -1
- package/dist/cjs/components/states/StateComponent.d.ts +2 -0
- package/dist/cjs/components/states/StateComponent.js +1 -1
- package/dist/cjs/components/states/StateComponent.styled.d.ts +4 -1
- package/dist/cjs/components/states/StateComponent.styled.js +6 -6
- package/dist/cjs/components/states-modal/StateModalComponent.d.ts +2 -0
- package/dist/cjs/components/states-modal/StateModalComponent.js +1 -1
- package/dist/cjs/components/stepper/Stepper.d.ts +2 -0
- package/dist/cjs/components/stepper/Stepper.js +1 -1
- package/dist/cjs/components/stepper/Stepper.styled.d.ts +1 -0
- package/dist/cjs/components/stepper/Stepper.styled.js +7 -7
- package/dist/cjs/components/tag/Tag.js +1 -1
- package/dist/cjs/components/tag/Tag.styled.js +1 -1
- package/dist/cjs/components/tag/model.d.ts +1 -11
- package/dist/cjs/components/tag/model.js +1 -1
- package/dist/cjs/components/tag/themes.d.ts +1 -1
- package/dist/cjs/components/tag/themes.js +1 -1
- package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.js +16 -14
- package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js +13 -13
- package/dist/cjs/index.js +1 -1
- package/dist/esm/assets/icons/halfRectangle.svg.js +1 -1
- package/dist/esm/components/SearchFilter/components/DatePickerButton.js +1 -1
- package/dist/esm/components/SearchFilter/components/DateRangeOnlyButton.js +1 -1
- package/dist/esm/components/TypographyStyle.d.ts +0 -17
- package/dist/esm/components/TypographyStyle.js +83 -146
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js +1 -1
- package/dist/esm/components/button/Button.js +1 -1
- package/dist/esm/components/button/model.d.ts +1 -1
- package/dist/esm/components/button/themes.d.ts +2 -2
- package/dist/esm/components/button/themes.js +1 -1
- package/dist/esm/components/custom-date-time/DateSelector/DateSelector.js +1 -1
- package/dist/esm/components/datePicker/index.d.ts +1 -0
- package/dist/esm/components/dropdown/Dropdown.js +1 -1
- package/dist/esm/components/icon-button/IconButton.styled.js +1 -1
- package/dist/esm/components/icon-button/model.d.ts +1 -1
- package/dist/esm/components/icon-button/theme.js +1 -1
- package/dist/esm/components/input/Input.d.ts +1 -0
- package/dist/esm/components/input/Input.js +1 -1
- package/dist/esm/components/input/Input.styled.js +1 -1
- package/dist/esm/components/states/StateComponent.d.ts +2 -0
- package/dist/esm/components/states/StateComponent.js +1 -1
- package/dist/esm/components/states/StateComponent.styled.d.ts +4 -1
- package/dist/esm/components/states/StateComponent.styled.js +6 -6
- package/dist/esm/components/states-modal/StateModalComponent.d.ts +2 -0
- package/dist/esm/components/states-modal/StateModalComponent.js +1 -1
- package/dist/esm/components/stepper/Stepper.d.ts +2 -0
- package/dist/esm/components/stepper/Stepper.js +1 -1
- package/dist/esm/components/stepper/Stepper.styled.d.ts +1 -0
- package/dist/esm/components/stepper/Stepper.styled.js +6 -6
- package/dist/esm/components/tag/Tag.js +1 -1
- package/dist/esm/components/tag/Tag.styled.js +1 -1
- package/dist/esm/components/tag/model.d.ts +1 -11
- package/dist/esm/components/tag/model.js +1 -1
- package/dist/esm/components/tag/themes.d.ts +1 -1
- package/dist/esm/components/tag/themes.js +1 -1
- package/dist/esm/components/template-preview/EmailTemplatePreview.styled.js +2 -0
- package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.js +18 -18
- package/dist/esm/index.js +1 -1
- package/package.json +1 -1
|
@@ -1,233 +1,170 @@
|
|
|
1
|
-
import e from"styled-components";import{COLORS as
|
|
1
|
+
import e from"styled-components";import{COLORS as i,FONTS as t}from"../constants/Theme.js";const o=e=>e+"px",n=e.div`
|
|
2
2
|
font-family: Inter;
|
|
3
|
-
color: ${e=>e.color||
|
|
4
|
-
font-weight: ${
|
|
5
|
-
font-size: ${o(
|
|
6
|
-
line-height: ${o(
|
|
7
|
-
-webkit-box-orient: vertical;
|
|
8
|
-
overflow: hidden;
|
|
9
|
-
display: -webkit-box;
|
|
10
|
-
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
11
|
-
`,r=e.div`
|
|
12
|
-
font-family: Inter;
|
|
13
|
-
color: ${e=>e.color||t.text.primary};
|
|
14
|
-
font-weight: ${i.titleMedium.fontWeight};
|
|
15
|
-
font-size: ${o(i.titleMedium.fontSize)};
|
|
16
|
-
line-height: ${o(i.titleMedium.lineHeight)};
|
|
3
|
+
color: ${e=>e.color||i.text.primary};
|
|
4
|
+
font-weight: ${t.titleLarge.fontWeight};
|
|
5
|
+
font-size: ${o(t.titleLarge.fontSize)};
|
|
6
|
+
line-height: ${o(t.titleLarge.lineHeight)};
|
|
17
7
|
-webkit-box-orient: vertical;
|
|
18
8
|
overflow: hidden;
|
|
19
9
|
display: -webkit-box;
|
|
20
10
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
21
11
|
`,l=e.div`
|
|
22
12
|
font-family: Inter;
|
|
23
|
-
color: ${e=>e.color||
|
|
24
|
-
font-weight: ${
|
|
25
|
-
font-size: ${o(
|
|
26
|
-
line-height: ${o(
|
|
13
|
+
color: ${e=>e.color||i.text.primary};
|
|
14
|
+
font-weight: ${t.titleMedium.fontWeight};
|
|
15
|
+
font-size: ${o(t.titleMedium.fontSize)};
|
|
16
|
+
line-height: ${o(t.titleMedium.lineHeight)};
|
|
27
17
|
-webkit-box-orient: vertical;
|
|
28
18
|
overflow: hidden;
|
|
29
19
|
display: -webkit-box;
|
|
30
20
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
31
|
-
`,
|
|
21
|
+
`,r=e.div`
|
|
32
22
|
font-family: Inter;
|
|
33
|
-
color: ${e=>e.color||
|
|
34
|
-
font-weight: ${
|
|
35
|
-
font-size: ${o(
|
|
36
|
-
line-height: ${o(
|
|
23
|
+
color: ${e=>e.color||i.text.primary};
|
|
24
|
+
font-weight: ${t.title4.fontWeight};
|
|
25
|
+
font-size: ${o(t.title4.fontSize)};
|
|
26
|
+
line-height: ${o(t.title4.lineHeight)};
|
|
37
27
|
-webkit-box-orient: vertical;
|
|
38
28
|
overflow: hidden;
|
|
39
29
|
display: -webkit-box;
|
|
40
30
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
41
31
|
`,f=e.div`
|
|
42
32
|
font-family: Inter;
|
|
43
|
-
color: ${e=>e.color||
|
|
44
|
-
font-weight: ${
|
|
45
|
-
font-size: ${o(
|
|
46
|
-
line-height: ${o(
|
|
33
|
+
color: ${e=>e.color||i.text.primary};
|
|
34
|
+
font-weight: ${t.titleRegular.fontWeight};
|
|
35
|
+
font-size: ${o(t.titleRegular.fontSize)};
|
|
36
|
+
line-height: ${o(t.titleRegular.lineHeight)};
|
|
47
37
|
-webkit-box-orient: vertical;
|
|
48
38
|
overflow: hidden;
|
|
49
39
|
display: -webkit-box;
|
|
50
40
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
51
|
-
`,
|
|
41
|
+
`,a=e.div`
|
|
52
42
|
font-family: Inter;
|
|
53
|
-
color: ${e=>e.color||
|
|
54
|
-
font-weight: ${
|
|
55
|
-
font-size: ${o(
|
|
56
|
-
line-height: ${o(
|
|
43
|
+
color: ${e=>e.color||i.text.primary};
|
|
44
|
+
font-weight: ${t.titleSmall.fontWeight};
|
|
45
|
+
font-size: ${o(t.titleSmall.fontSize)};
|
|
46
|
+
line-height: ${o(t.titleSmall.lineHeight)};
|
|
57
47
|
-webkit-box-orient: vertical;
|
|
58
48
|
overflow: hidden;
|
|
59
49
|
display: -webkit-box;
|
|
60
50
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
61
|
-
`,
|
|
51
|
+
`,b=e.div`
|
|
62
52
|
font-family: Inter;
|
|
63
|
-
color: ${e=>e.color||
|
|
64
|
-
font-weight: ${
|
|
65
|
-
font-size: ${o(
|
|
66
|
-
line-height: ${o(
|
|
53
|
+
color: ${e=>e.color||i.text.primary};
|
|
54
|
+
font-weight: ${t.display.fontWeight};
|
|
55
|
+
font-size: ${o(t.display.fontSize)};
|
|
56
|
+
line-height: ${o(t.display.lineHeight)};
|
|
67
57
|
-webkit-box-orient: vertical;
|
|
68
58
|
overflow: hidden;
|
|
69
59
|
display: -webkit-box;
|
|
70
60
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
71
|
-
`,
|
|
61
|
+
`,d=e.div`
|
|
72
62
|
font-family: Inter;
|
|
73
|
-
color: ${e=>e.color||
|
|
74
|
-
font-weight: ${
|
|
75
|
-
font-size: ${o(
|
|
76
|
-
line-height: ${o(
|
|
63
|
+
color: ${e=>e.color||i.text.primary};
|
|
64
|
+
font-weight: ${t.bodyPrimary.fontWeight};
|
|
65
|
+
font-size: ${o(t.bodyLarge.fontSize)};
|
|
66
|
+
line-height: ${o(t.bodyLarge.lineHeight)};
|
|
77
67
|
-webkit-box-orient: vertical;
|
|
78
68
|
overflow: hidden;
|
|
79
69
|
display: -webkit-box;
|
|
80
70
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
81
|
-
`,
|
|
71
|
+
`,h=e.div`
|
|
82
72
|
font-family: Inter;
|
|
83
|
-
color: ${e=>e.color||
|
|
84
|
-
font-weight: ${
|
|
85
|
-
font-size: ${o(
|
|
86
|
-
line-height: ${o(
|
|
73
|
+
color: ${e=>e.color||i.text.primary};
|
|
74
|
+
font-weight: ${t.bodyPrimary.fontWeight};
|
|
75
|
+
font-size: ${o(t.bodyPrimary.fontSize)};
|
|
76
|
+
line-height: ${o(t.bodyPrimary.lineHeight)};
|
|
87
77
|
-webkit-box-orient: vertical;
|
|
88
78
|
overflow: hidden;
|
|
89
79
|
display: -webkit-box;
|
|
90
80
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
91
|
-
`,
|
|
81
|
+
`,c=e.div`
|
|
92
82
|
font-family: Inter;
|
|
93
|
-
color: ${e=>e.color||
|
|
94
|
-
font-weight: ${
|
|
95
|
-
font-size: ${o(
|
|
96
|
-
line-height: ${o(
|
|
83
|
+
color: ${e=>e.color||i.text.primary};
|
|
84
|
+
font-weight: ${t.bodySecondary.fontWeight};
|
|
85
|
+
font-size: ${o(t.bodySecondary.fontSize)};
|
|
86
|
+
line-height: ${o(t.bodySecondary.lineHeight)};
|
|
97
87
|
-webkit-box-orient: vertical;
|
|
98
88
|
overflow: hidden;
|
|
99
89
|
display: -webkit-box;
|
|
100
90
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
101
|
-
|
|
102
|
-
background: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);
|
|
103
|
-
-webkit-background-clip: text;
|
|
104
|
-
-webkit-text-fill-color: transparent;
|
|
105
|
-
background-clip: text;
|
|
106
|
-
text-fill-color: transparent;
|
|
107
|
-
`,w=e(c)`
|
|
91
|
+
`,g=e(h)`
|
|
108
92
|
text-decoration: underline;
|
|
109
|
-
color: ${
|
|
110
|
-
text-decoration-color: ${
|
|
93
|
+
color: ${i.content.brand};
|
|
94
|
+
text-decoration-color: ${i.content.brand};
|
|
111
95
|
cursor: pointer;
|
|
112
|
-
`,$=e(
|
|
96
|
+
`,$=e(c)`
|
|
113
97
|
text-decoration: underline;
|
|
114
|
-
color: ${
|
|
115
|
-
text-decoration-color: ${
|
|
98
|
+
color: ${i.content.brand};
|
|
99
|
+
text-decoration-color: ${i.content.brand};
|
|
116
100
|
cursor: pointer;
|
|
117
|
-
`,
|
|
101
|
+
`,w=e.div`
|
|
118
102
|
font-family: Inter;
|
|
119
|
-
color: ${e=>e.color||
|
|
120
|
-
font-weight: ${
|
|
121
|
-
font-size: ${o(
|
|
122
|
-
line-height: ${o(
|
|
103
|
+
color: ${e=>e.color||i.text.primary};
|
|
104
|
+
font-weight: ${t.caption.fontWeight};
|
|
105
|
+
font-size: ${o(t.caption.fontSize)};
|
|
106
|
+
line-height: ${o(t.caption.lineHeight)};
|
|
123
107
|
-webkit-box-orient: vertical;
|
|
124
108
|
overflow: hidden;
|
|
125
109
|
display: -webkit-box;
|
|
126
110
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
127
111
|
`,m=e.div`
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
font-
|
|
131
|
-
|
|
132
|
-
line-height: ${o(i.caption.lineHeight)};
|
|
112
|
+
color: ${e=>e.color||i.text.primary};
|
|
113
|
+
font-weight: ${t.tiny.fontWeight};
|
|
114
|
+
font-size: ${o(t.tiny.fontSize)};
|
|
115
|
+
line-height: ${o(t.tiny.lineHeight)};
|
|
133
116
|
-webkit-box-orient: vertical;
|
|
134
117
|
overflow: hidden;
|
|
135
118
|
display: -webkit-box;
|
|
136
119
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
137
|
-
z-index: 1;
|
|
138
|
-
background: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);
|
|
139
|
-
-webkit-background-clip: text;
|
|
140
|
-
-webkit-text-fill-color: transparent;
|
|
141
|
-
background-clip: text;
|
|
142
|
-
text-fill-color: transparent;
|
|
143
120
|
`,y=e.div`
|
|
144
|
-
color: ${e=>e.color||t.text.primary};
|
|
145
|
-
font-weight: ${i.tiny.fontWeight};
|
|
146
|
-
font-size: ${o(i.tiny.fontSize)};
|
|
147
|
-
line-height: ${o(i.tiny.lineHeight)};
|
|
148
|
-
-webkit-box-orient: vertical;
|
|
149
|
-
overflow: hidden;
|
|
150
|
-
display: -webkit-box;
|
|
151
|
-
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
152
|
-
`,x=e.div`
|
|
153
|
-
color: ${e=>e.color||t.text.primary};
|
|
154
|
-
font-weight: ${i.tiny.fontWeight};
|
|
155
|
-
font-size: ${o(i.tiny.fontSize)};
|
|
156
|
-
line-height: ${o(i.tiny.lineHeight)};
|
|
157
|
-
-webkit-box-orient: vertical;
|
|
158
|
-
overflow: hidden;
|
|
159
|
-
display: -webkit-box;
|
|
160
|
-
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
161
|
-
z-index: 1;
|
|
162
|
-
background: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);
|
|
163
|
-
-webkit-background-clip: text;
|
|
164
|
-
-webkit-text-fill-color: transparent;
|
|
165
|
-
background-clip: text;
|
|
166
|
-
text-fill-color: transparent;
|
|
167
|
-
`,s=e.div`
|
|
168
121
|
font-family: Inter;
|
|
169
|
-
color: ${e=>e.color||
|
|
170
|
-
font-weight: ${
|
|
171
|
-
font-size: ${o(
|
|
172
|
-
line-height: ${o(
|
|
122
|
+
color: ${e=>e.color||i.text.primary};
|
|
123
|
+
font-weight: ${t.buttonLarge.fontWeight};
|
|
124
|
+
font-size: ${o(t.buttonLarge.fontSize)};
|
|
125
|
+
line-height: ${o(t.buttonLarge.lineHeight)};
|
|
173
126
|
-webkit-box-orient: vertical;
|
|
174
127
|
overflow: hidden;
|
|
175
128
|
display: -webkit-box;
|
|
176
129
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
177
|
-
`,
|
|
178
|
-
font-family: Inter;
|
|
179
|
-
color: ${e=>e.color||t.text.primary};
|
|
180
|
-
font-weight: ${i.buttonLarge.fontWeight};
|
|
181
|
-
font-size: ${o(i.buttonLarge.fontSize)};
|
|
182
|
-
line-height: ${o(i.buttonLarge.lineHeight)};
|
|
183
|
-
-webkit-box-orient: vertical;
|
|
184
|
-
overflow: hidden;
|
|
185
|
-
display: -webkit-box;
|
|
186
|
-
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
187
|
-
background: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);
|
|
188
|
-
z-index: 1;
|
|
189
|
-
-webkit-background-clip: text;
|
|
190
|
-
-webkit-text-fill-color: transparent;
|
|
191
|
-
background-clip: text;
|
|
192
|
-
text-fill-color: transparent;
|
|
193
|
-
`,u=e.div`
|
|
130
|
+
`,p=e.div`
|
|
194
131
|
font-family: Inter;
|
|
195
|
-
color: ${e=>e.color||
|
|
196
|
-
font-weight: ${
|
|
197
|
-
font-size: ${o(
|
|
198
|
-
line-height: ${o(
|
|
132
|
+
color: ${e=>e.color||i.text.primary};
|
|
133
|
+
font-weight: ${t.buttonRegular.fontWeight};
|
|
134
|
+
font-size: ${o(t.buttonRegular.fontSize)};
|
|
135
|
+
line-height: ${o(t.buttonRegular.lineHeight)};
|
|
199
136
|
-webkit-box-orient: vertical;
|
|
200
137
|
overflow: hidden;
|
|
201
138
|
display: -webkit-box;
|
|
202
139
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
203
|
-
`,
|
|
140
|
+
`,s=e.div`
|
|
204
141
|
font-family: Inter;
|
|
205
|
-
color: ${e=>e.color||
|
|
206
|
-
font-weight: ${
|
|
207
|
-
font-size: ${o(
|
|
208
|
-
line-height: ${o(
|
|
142
|
+
color: ${e=>e.color||i.text.primary};
|
|
143
|
+
font-weight: ${t.subHeading.fontWeight};
|
|
144
|
+
font-size: ${o(t.subHeading.fontSize)};
|
|
145
|
+
line-height: ${o(t.subHeading.lineHeight)};
|
|
209
146
|
-webkit-box-orient: vertical;
|
|
210
147
|
overflow: hidden;
|
|
211
148
|
display: -webkit-box;
|
|
212
149
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
213
|
-
`,
|
|
150
|
+
`,x=e.div`
|
|
214
151
|
font-family: Inter;
|
|
215
|
-
color: ${e=>e.color||
|
|
216
|
-
font-weight: ${
|
|
217
|
-
font-size: ${o(
|
|
218
|
-
line-height: ${o(
|
|
152
|
+
color: ${e=>e.color||i.text.primary};
|
|
153
|
+
font-weight: ${t.bodyRegular.fontWeight};
|
|
154
|
+
font-size: ${o(t.bodyRegular.fontSize)};
|
|
155
|
+
line-height: ${o(t.bodyRegular.lineHeight)};
|
|
219
156
|
-webkit-box-orient: vertical;
|
|
220
157
|
overflow: hidden;
|
|
221
158
|
display: -webkit-box;
|
|
222
159
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
223
|
-
`,
|
|
160
|
+
`,k=e.div`
|
|
224
161
|
font-family: Inter;
|
|
225
|
-
color: ${
|
|
226
|
-
font-weight: ${
|
|
227
|
-
font-size: ${o(
|
|
228
|
-
line-height: ${o(
|
|
162
|
+
color: ${i.text.primary};
|
|
163
|
+
font-weight: ${t.caption.fontWeight};
|
|
164
|
+
font-size: ${o(t.caption.fontSize)};
|
|
165
|
+
line-height: ${o(t.caption.lineHeight)};
|
|
229
166
|
-webkit-box-orient: vertical;
|
|
230
167
|
overflow: hidden;
|
|
231
168
|
display: -webkit-box;
|
|
232
169
|
-webkit-line-clamp: ${e=>e.numberOfLines};
|
|
233
|
-
`;export{
|
|
170
|
+
`;export{w as BodyCaption,d as BodyLarge,h as BodyPrimary,g as BodyPrimaryLink,x as BodyRegular,c as BodySecondary,$ as BodySecondaryLink,m as BodyTiny,y as ButtonLarge,p as ButtonRegular,k as Caption,b as Display,r as SmallRegular,s as SubHeading,n as TitleLarge,l as TitleMedium,f as TitleRegular,a as TitleSmall};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,Fragment as o,jsxs as
|
|
1
|
+
import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useState as n,useEffect as l}from"react";import{Dropdown as i}from"react-bootstrap";import{DEFAULT_THEME as a,BASE_COLORS as s}from"../../constants/Theme.js";import{DatePicker as d}from"../datePicker/DatePicker.js";import"react-calendar";import"../../utils/DateUtils.js";import{BodySecondary as c,BodyCaption as r,Caption as p}from"../TypographyStyle.js";import"../datePicker/DatePickerWrapper.styled.js";import{MainDropdown as g,ItemMenuContainer as m}from"./CommonStyles.js";const u=s=>{let{options:r,placeholder:m="Select an option",selected:u,onOptionSelected:b,resetDropdown:h,maxHeight:y,backgroundColor:f,calendarPopperConfig:D,variant:k="default",datePickerPlacement:j,closeDropdown:S}=s;var R,w,C;const[x,P]=n(!1),[$,T]=n(u),[I,N]=n(),[A,E]=n(!1),F=()=>{!x&&E(!A)},[H,M]=n(u),V="small"===k?p:c;return l((()=>{h&&T(void 0)}),[h]),l((()=>{var e;(null==u?void 0:u.isCustom)&&(null===(e=u.dateRangeSelectionOptions)||void 0===e?void 0:e.selectedDates)?N(u.dateRangeSelectionOptions.selectedDates):N(void 0),T(u)}),[u]),l((()=>{E(!1),P(!1)}),[S]),e(o,{children:t(g,Object.assign({drop:"down",show:A,onToggle:F,backgroundColor:f,id:"analytic-dropdown"},{children:[e(i.Toggle,Object.assign({id:"dropdown-autoclose-outside",className:"main--dropdown",style:"small"===k?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${a.colorsV2.stroke.primary}`}:void 0},{children:e(V,Object.assign({style:"small"===k?{color:a.colorsV2.content.secondary}:void 0},{children:(null==$?void 0:$.isCustom)?I?O(I[0])===O(I[1])?`${O(I[0])}`:`${O(I[0])} to ${O(I[1])}`:(null==H?void 0:H.label)?null==H?void 0:H.label:m:$?null==$?void 0:$.label:m}))})),e(i.Menu,Object.assign({className:"main--dropdown"},{children:t(g,Object.assign({drop:null!=j?j:"end",id:"sub--dropdown",show:x,onToggle:e=>{!e&&E(!1),P(!x)}},{children:[e("div",Object.assign({style:{maxHeight:y||"auto",overflowY:"scroll"}},{children:r.map((o=>{var t;return e("div",{children:(null==o?void 0:o.isCustom)?e(i.Toggle,Object.assign({className:"sub--dropdown"},{children:e(v,{eachOption:o,selectedOption:$,selectedDate:I,onClickingEachItem:e=>{T(e),P(!0)},rangeSelection:!!(null===(t=null==o?void 0:o.dateRangeSelectionOptions)||void 0===t?void 0:t.selectRange)})})):e(v,{eachOption:o,selectedOption:$,selectedDate:I,onClickingEachItem:e=>{if(N(void 0),T(e),M(e),F(),!e.noOfDays)return void b(e);const o=new Date,t=new Date;t.setDate(o.getDate()-e.noOfDays),b(Object.assign(Object.assign({},e),{selectedRange:[t,o]}))}})},null==o?void 0:o.key)}))})),e(i.Menu,Object.assign({className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[(null==D?void 0:D.offsetSkid)||0,(null==D?void 0:D.offsetDistance)||0]}}]}},{children:e(d,{selectRange:(null===(R=null==$?void 0:$.dateRangeSelectionOptions)||void 0===R?void 0:R.selectRange)||!1,maxDate:null===(w=null==$?void 0:$.dateRangeSelectionOptions)||void 0===w?void 0:w.maxDate,minDate:null===(C=null==$?void 0:$.dateRangeSelectionOptions)||void 0===C?void 0:C.minDate,selectedDates:I,onSelectRange:(e,o)=>{const t=[e,o];(null==$?void 0:$.dateRangeSelectionOptions)&&($.dateRangeSelectionOptions.selectedDates=t,b(Object.assign(Object.assign({},$),{selectedRange:[e,o]}))),M($),P(!1),N(t),E(!A)},onSelectDate:e=>{(null==$?void 0:$.dateRangeSelectionOptions)&&($.dateRangeSelectionOptions.selectedDates=[e,e],b(Object.assign(Object.assign({},$),{selectedRange:[e,e]}))),M($),P(!1),N([e,e]),E(!A)}})}))]}))}))]}))})},v=o=>{let{eachOption:n,selectedOption:l,selectedDate:i,onClickingEachItem:a,rangeSelection:d}=o;return t(m,Object.assign({onClick:()=>a(n),isSelected:n.isCustom?n.key==(null==l?void 0:l.key)&&!!i:n.key==(null==l?void 0:l.key)},{children:[e(c,Object.assign({color:n.key==(null==l?void 0:l.key)?s.positive[900]:s.grayscale[900]},{children:n.label})),i&&(null==l?void 0:l.isCustom)&&n.key==(null==l?void 0:l.key)&&e(r,{children:d?`${O(i[0])} to ${O(i[1])}`:`${O(i[0])}`})]}),n.key)},O=e=>e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});export{u as AnalyticsDropdown,v as EachItem,O as formatDate};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as t,jsxs as i,Fragment as n}from"react/jsx-runtime";import
|
|
1
|
+
import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as t,jsxs as i,Fragment as n}from"react/jsx-runtime";import a,{forwardRef as s}from"react";import{Spinner as r}from"../spinner/Spinner.js";import{Button as o,ButtonCustomDashedBorder as c}from"./Button.styled.js";import{getButtonIconColor as d,SpinnerColorMap as l,GetButtonTextComponent as m}from"./themes.js";const b=s(((s,b)=>{var{version:h,id:p,buttonType:g="primary",size:v="small",buttonText:u,disabled:j,IconComponent:N,LeadingIcon:y,TrailingIcon:O,isLoading:f,inverse:k,onClick:T,matchParentWidth:x,subtitle:I,darkMode:C,activated:L,error:z}=s,W=e(s,["version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error"]);const B=m(v,g),E="chip"===v?16:20,M={height:E,width:E,color:d(v,g,k,j,f,C),style:{display:"block"},className:"icon"};return t(o,Object.assign({"data-test":W["data-test"],version:h,onClick:f?()=>{}:T,ref:b,id:p,disabled:j,size:v,buttonType:g,isLoading:f,inverse:k,matchParentWidth:x,darkMode:C,activated:L,error:z},W,{children:i("div",Object.assign({className:"button-container"},{children:[g.startsWith("dash")&&t(c,{}),t("div",Object.assign({className:"overlay-container"},{children:f&&t(r,{className:"spinner",size:"small",color:l(g,k)})})),N&&t("div",Object.assign({className:"icon-component"},{children:a.createElement(N,M)})),y&&t("div",Object.assign({className:"icon-leading"},{children:a.createElement(y,M)})),u?i(B,Object.assign({className:"text"},{children:[u,t("div",Object.assign({className:"text-subtitle"},{children:I}))]})):t(n,{}),O&&t("div",Object.assign({className:"icon-trailing"},{children:a.createElement(O,M)}))]}))}))}));b.displayName="Button";export{b as Button};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export type Size = 'chip' | 'small' | 'medium' | 'large';
|
|
3
|
-
export type Type = 'primary' | 'secondary' | 'tertiary' | 'tertiaryGray' | 'destructive' | 'dashBold' | 'dashRegular' | 'text'
|
|
3
|
+
export type Type = 'primary' | 'secondary' | 'tertiary' | 'tertiaryGray' | 'destructive' | 'dashBold' | 'dashRegular' | 'text';
|
|
4
4
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
5
|
'data-test'?: string;
|
|
6
6
|
/**
|
|
@@ -3,14 +3,14 @@ export declare const getBackgroundColor: (type: Type, size: Size, inverse?: bool
|
|
|
3
3
|
export declare const getColor: (type: Type, size: Size, inverse?: boolean, darkMode?: boolean) => string;
|
|
4
4
|
export declare const getDisabledTextColor: (inverse?: boolean) => string;
|
|
5
5
|
export declare const getPadding: (type: Type, size: Size) => "0px" | "4px 8px" | "6px 4px" | "6px 12px" | "10px 4px" | "10px 12px" | "14px 4px" | "14px 12px" | undefined;
|
|
6
|
-
export declare const GetButtonTextComponent: (size: Size, type: Type
|
|
6
|
+
export declare const GetButtonTextComponent: (size: Size, type: Type) => import("styled-components").StyledComponent<"div", any, {
|
|
7
7
|
numberOfLines?: number | undefined;
|
|
8
8
|
color?: string | undefined;
|
|
9
9
|
}, never>;
|
|
10
10
|
export declare const getBorderColor: (type: Type, inverse?: boolean, error?: boolean) => string;
|
|
11
11
|
export declare const getBorder: (version: '1.0' | '2.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
|
|
12
12
|
export declare const getLinearGradientValue: (size: Size) => string;
|
|
13
|
-
export declare const getHoverButtonBackground: (type: Type, inverse?: boolean) =>
|
|
13
|
+
export declare const getHoverButtonBackground: (type: Type, inverse?: boolean) => "" | "background-color:transparent;" | "background-color: #000000;\n\t\t\t\topacity: 0.03;";
|
|
14
14
|
export declare const getHoverButtonTextDecorationStyle: (type: Type, disabled?: boolean) => string;
|
|
15
15
|
export declare const generateInverseHoverBackground: (type: Type, disabled?: boolean) => string;
|
|
16
16
|
export declare const generateDisabledStyling: (type: Type, size: Size, inverse?: boolean) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{COLORS as t}from"../../constants/Theme.js";import{
|
|
1
|
+
import{COLORS as t}from"../../constants/Theme.js";import{BodySecondary as r,BodyCaption as n,ButtonRegular as e,ButtonLarge as a}from"../TypographyStyle.js";const o=(r,n,e,a)=>{if("chip"===n)return"text"===r?"transparent":a?t.surface.hovered:t.surface.subdued;switch(r){case"primary":return e?t.background.warning.vibrant:t.background.inverseLight;case"destructive":return t.background.negative.vibrant;default:return"transparent"}},i=(r,n,e,a)=>{if("chip"===n)return"text"===r?e?t.content.inactive:t.content.brand:a?t.content.primary:t.content.secondary;switch(r){case"primary":return e?t.content.primary:t.content.primaryInverse;case"tertiaryGray":case"dashBold":case"dashRegular":return t.content.secondary;case"destructive":return t.content.primaryInverse;default:return e?t.content.primaryInverse:t.stroke.brand}},c=r=>r?"rgba(255, 255, 255, 0.5)":t.content.inactive,d=(t,r)=>{if("text"===t)return"0px";if("chip"===r)return"4px 8px";if("small"===r)switch(t){case"tertiary":case"tertiaryGray":return"6px 4px";default:return"6px 12px"}else if("medium"===r)switch(t){case"tertiary":case"tertiaryGray":return"10px 4px";default:return"10px 12px"}else if("large"===r)switch(t){case"tertiary":case"tertiaryGray":return"14px 4px";default:return"14px 12px"}},s=(t,o)=>"dashRegular"===o?r:"chip"===t?n:"small"===t?e:a,p=(r,n,e)=>e?t.stroke.negative.vibrant:n?t.surface.standard:"secondary"==r?t.stroke.brand:t.content.placeholder,b=(r,n,e,a,o)=>"text"==n?"border: none;":"chip"===e?`border: ${"2.0"===r?.5:1}px solid ${t.stroke.primary};`:a?"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${p(n,a,o)};`:"border: none;":"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${p(n,!1,o)};`:"border: none;",g=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px",u=(t,r)=>"text"===t?"background-color:transparent;":r||"primary"===t?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",l=(r,n)=>n?"":`text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`,h=(r,n)=>n?"":"primary"===r?`background-color: ${t.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",y=(r,n,e)=>"chip"===n?"background-color: transparent;":"primary"===r||"destructive"===r?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${t.background.inactive};`:"secondary"===r?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${t.stroke.primary};`:"",x=function(t,r){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:p(t,!1);return`\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${g(r)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${g(r)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${g(r)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${g(r)}\n\t\t);\n\t}\n\t`},k=(r,n,e)=>"text"===r?`background-color: ${t.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`:"chip"===n?`border: 1px solid ${t.stroke.brandLightAlt};\n\t\tbackground-color: ${t.background.brandLight};`:"primary"===r||"destructive"===r?e?`background-color: ${t.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`:"box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);":"secondary"===r||"tertiary"===r||"tertiaryGray"===r||r.startsWith("dash")?e?`background-color: ${t.background.inverseLight} !important;`:`background-color: ${t.background.brandLight};`:void 0,m=(r,n,e)=>"chip"===n?`background-color: ${t.background.base};`:"primary"===r?`background-color: ${e?t.background.warning.vibrant:t.background.brandLight};`:"destructive"===r?`background-color: ${t.background.negative.light};`:"background-color: transparent;",v=(r,n,e)=>"chip"===n?"border: none;":"secondary"===r?e?`border: 1px solid ${t.content.secondary};`:`border: 1px solid ${t.stroke.brandLightAlt};`:"",$=(r,n)=>n?"primary"===r?t.content.primary:t.content.primaryInverse:"destructive"===r?t.content.negative:t.content.brand,f=(r,n,e,a,o,i)=>"chip"===r?a?t.content.inactive:i?t.content.primary:t.content.secondary:o?"transparent":"primary"===n||"destructive"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primary:a?t.content.inactive:t.content.primaryInverse:"secondary"===n||"tertiary"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primaryInverse:a?t.content.inactive:t.content.brand:"tertiaryGray"===n||n.startsWith("dash")?a?t.content.inactive:t.content.secondary:void 0;export{s as GetButtonTextComponent,$ as SpinnerColorMap,y as generateDisabledStyling,h as generateInverseHoverBackground,o as getBackgroundColor,b as getBorder,p as getBorderColor,f as getButtonIconColor,k as getClickEffect,i as getColor,x as getDashedBorderStyling,c as getDisabledTextColor,u as getHoverButtonBackground,l as getHoverButtonTextDecorationStyle,g as getLinearGradientValue,m as getLoadingBackground,v as getLoadingBorder,d as getPadding};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as t,jsx as s}from"react/jsx-runtime";import r from"../../../assets/icons/calendar.svg.js";import o from"../../../assets/icons/chevronDown.svg.js";import i,{useState as a}from"react";import{usePopper as n}from"react-popper";import{DatePicker as m}from"../../datePicker/DatePicker.js";import{
|
|
1
|
+
import{jsxs as e,Fragment as t,jsx as s}from"react/jsx-runtime";import r from"../../../assets/icons/calendar.svg.js";import o from"../../../assets/icons/chevronDown.svg.js";import i,{useState as a}from"react";import{usePopper as n}from"react-popper";import{DatePicker as m}from"../../datePicker/DatePicker.js";import"react-calendar";import{useOutside as c}from"../../../hooks/useOutside.js";import p from"../../../utils/DateUtils.js";import"../../../constants/Theme.js";import"../../TypographyStyle.js";import"../../datePicker/DatePickerWrapper.styled.js";import{OpenDropdownContainer as l}from"../../dropdown/Common.styled.js";import d from"../../dropShadow/DropShadow.js";const h=h=>{const[j,f]=a(null),[g,u]=a(null),[y,D]=a(!1),{styles:b,attributes:w}=n(j,g,{placement:h.placement}),O=i.useRef();return c(O,(()=>{D(!1)})),e(t,{children:[e("div",Object.assign({className:"date-preview",ref:f,onClick:()=>{D(!y)}},{children:[s(r,{width:24,height:24}),s("span",Object.assign({style:{marginLeft:8}},{children:p.onlyDateFormat(h.customDate,"dd MMM yyyy")})),s(o,{style:{marginLeft:"auto"},width:22,height:22})]})),y&&s(l,Object.assign({ref:u,style:Object.assign(Object.assign({},b.popper),{zIndex:3})},w.popper,{children:s("div",Object.assign({ref:O},{children:s(d,Object.assign({level:"z2",position:"down",style:{borderRadius:4}},{children:s(m,{selectedDate:h.customDate||new Date,selectRange:!1,onSelectDate:e=>{D(!1),h.setCustomDate(e)},minDate:h.minDate})}))}))}))]})};export{h as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{DropdownPopover as d}from"./DropdownPopover/index.js";function p(){}const c=c=>{var u,h,m,{placeHolder:v,size:g,onSelect:f,defaultOptions:b,disabled:j,noErrorHint:H,placeHolderHeight:w}=c,x=o(c,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight"]);const[y,O]=t(!1),E=null!=g?g:"default",I=n(),[S,D]=t(null!=b?b:[]);r((()=>{var o;const e=[];null===(o=null==x?void 0:x.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&e.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&e.push(o)})),D([...e])}),[x.options]),r((()=>{b&&D([...b])}),[b]);const z=S.length?S.map((o=>o.label)).join(", "):void 0;return e(a.Provider,Object.assign({value:{InputWrapper:{height:w||("small"===E?32:48),width:null!==(h=null!==(u=x.buttonWidth)&&void 0!==u?u:x.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:e(d,Object.assign({ref:I,onSelect:function(o){Array.isArray(o)?D([...o]):D([o]),null==f||f(o)},disabled:j,onDropdownVisbilityChange:o=>O(o)},x,{children:e(s,{version:x.version,noErrorHint:H,state:j?"disabled":"none",value:null!=z?z:"",errorMessage:x.error,variant:E,placeholder:null!=v?v:"Select an option",width:null!==(m=x.width)&&void 0!==m?m:"100%",onChangeText:p,rightIcon:{icon:()=>e(l,{style:{transform:y?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===E?20:24,height:"small"===E?20:24,color:i.content.primary})}})}))}))};c.displayName="Dropdown";export{c as Dropdown};
|
|
1
|
+
import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{DropdownPopover as d}from"./DropdownPopover/index.js";function p(){}const c=c=>{var u,h,m,{placeHolder:v,size:g,onSelect:f,defaultOptions:b,disabled:j,noErrorHint:H,placeHolderHeight:w}=c,x=o(c,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight"]);const[y,O]=t(!1),E=null!=g?g:"default",I=n(),[S,D]=t(null!=b?b:[]);r((()=>{var o;const e=[];null===(o=null==x?void 0:x.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&e.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&e.push(o)})),D([...e])}),[x.options]),r((()=>{b&&D([...b])}),[b]);const z=S.length?S.map((o=>o.label)).join(", "):void 0;return e(a.Provider,Object.assign({value:{InputWrapper:{height:w||("small"===E?32:48),width:null!==(h=null!==(u=x.buttonWidth)&&void 0!==u?u:x.width)&&void 0!==h?h:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:e(d,Object.assign({ref:I,onSelect:function(o){Array.isArray(o)?D([...o]):D([o]),null==f||f(o)},disabled:j,onDropdownVisbilityChange:o=>O(o)},x,{children:e(s,{version:x.version,noErrorHint:H,state:j?"disabled":"none",value:null!=z?z:"",errorMessage:x.error,variant:E,placeholder:null!=v?v:"Select an option",width:null!==(m=x.width)&&void 0!==m?m:"100%",onChangeText:p,rightIcon:{icon:()=>e(l,{style:{transform:y?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===E?20:24,height:"small"===E?20:24,color:i.content.primary})},truncateText:!0})}))}))};c.displayName="Dropdown";export{c as Dropdown};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import t from"styled-components";import{COLORS as n}from"../../constants/Theme.js";import{generateBackgroundColor as o}from"./theme.js";const r=t.button`
|
|
2
|
-
${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered
|
|
2
|
+
${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered?`border: 1px solid ${n.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground-color: ${o(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
|
|
3
3
|
`;export{r as IconButton};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning'
|
|
2
|
+
export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning';
|
|
3
3
|
export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
4
4
|
/**
|
|
5
5
|
* Icon to render
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{COLORS as t}from"../../constants/Theme.js";const n=(n,e,r)=>{if(e)return t.content.inactive;switch(n){case"default":return r?t.content.brand:t.content.primary;case"negative":return t.content.negative;case"positive":return t.content.positive;case"warning":return r?t.content.warning:t.content.primary;default:return t.content.primary}},e=n=>"default"===n?t.background.brandLight:"negative"===n?t.background.negative.light:"positive"===n?t.background.positive.light:
|
|
1
|
+
import{COLORS as t}from"../../constants/Theme.js";const n=(n,e,r)=>{if(e)return t.content.inactive;switch(n){case"default":return r?t.content.brand:t.content.primary;case"negative":return t.content.negative;case"positive":return t.content.positive;case"warning":return r?t.content.warning:t.content.primary;default:return t.content.primary}},e=n=>"default"===n?t.background.brandLight:"negative"===n?t.background.negative.light:"positive"===n?t.background.positive.light:t.background.warning.light;export{e as generateBackgroundColor,n as getIconColor};
|
|
@@ -58,5 +58,6 @@ export interface InputProps {
|
|
|
58
58
|
minHeight?: string;
|
|
59
59
|
maxHeight?: string;
|
|
60
60
|
labelTextBold?: boolean;
|
|
61
|
+
truncateText?: boolean;
|
|
61
62
|
}
|
|
62
63
|
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/info.svg.js";import{forwardRef as r,useState as l,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as u,validateInput as h}from"./Input-helper.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as p}from"../TypographyStyle.js";import{COLORS as g}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as f}from"./context/InputStyleProvider.js";import{RootContainer as
|
|
1
|
+
import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/info.svg.js";import{forwardRef as r,useState as l,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as u,validateInput as h}from"./Input-helper.js";import{Tooltip as d}from"../tooltips/Tooltip.js";import{TitleSmall as v,BodySecondary as p}from"../TypographyStyle.js";import{COLORS as g}from"../../constants/Theme.js";import m from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as f}from"./context/InputStyleProvider.js";import{RootContainer as x,InputFooter as b,InputWrapper as y,IconHolder as j,PrefixHolder as C,InputContainer as w,InputContainerSmall as T,SuffixHolder as k,InputHeader as O,MaxCharStyle as I}from"./Input.styled.js";const H=r(((r,H)=>{var L,E,z,A,B;const{placeholder:D,leftIcon:F,rightIcon:M,labelText:S,maxCharLimit:K,isRequired:N,hintText:R,type:G,state:_,validate:q,variant:P,button:V,suffixText:W,prefixText:$,onChangeText:J,value:Q,noErrorHint:U,reset:X,rangeValidation:Y,noKeyDownChange:Z,version:ee,noMaxCharCheck:te,labelElement:ne,autoGrow:ie,minHeight:re,maxHeight:le,labelTextBold:oe,truncateText:ae}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},r),se=null==F?void 0:F.icon,ce=null==M?void 0:M.icon,[ue,he]=l(!1),[de,ve]=l(!1),[pe,ge]=l(),me="small"===P?"18px":"22px",fe=o(f),[xe,be]=l(),ye=a(null),je=null!=H?H:ye;s((()=>{be(Q),!Q&&ie&&(je.current.style.height=re||"48px")}),[Q]),s((()=>{var e;je.current&&(null===(e=r.onReferenceInit)||void 0===e||e.call(r,je.current))}),[je]),s((()=>{const e=je.current;if(e&&["phonenumber","zip","number"].includes(G))return e.addEventListener("wheel",ke,{passive:!1}),()=>{e.removeEventListener("wheel",ke)}}),[]),s((()=>{X&&be("")}),[X]),s((()=>{var e;ve(!!r.isActive),r.isActive&&(null===(e=je.current)||void 0===e||e.focus())}),[r.isActive]),s((()=>{ge(r.errorMessage)}),[r.errorMessage]),s((()=>{var e;he(!1),("invalid"===r.state||pe||"disabled-invalid"===r.state)&&he(!0),"active"===r.state&&(null===(e=je.current)||void 0===e||e.focus())}),[r.state,pe]),s((()=>{he(!!pe)}),[pe]);const Ce=function(e){if(u(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},we=()=>"zip"===G?6:60,Te=e=>{const t=0!==K?K:we();if(Z||J(Q||"",e),te)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},ke=e=>{e.preventDefault()},Oe=e=>{let t=e.target.value;const n=0!==K?K+1:we();!te&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),J(t,e),r.textControl||be(t),ie&&(je.current.style.height=`${je.current.scrollHeight}px`,t||(je.current.style.height=re||"48px"));const i=q||h;if(!i||!u(i))return;const[l,o]=i(t,G,Y);he(!l),ge(r.errorMessage?r.errorMessage:o)},Ie=e=>{var t;r.skipFocus||ve(!0),Ce(null===(t=r.onFocus)||void 0===t?void 0:t.call(r,e))},He=e=>{var t;r.skipFocus||ve(!1),Ce(null===(t=r.onBlur)||void 0===t?void 0:t.call(r,e))},Le=()=>{var i;return e(n,{children:["multiline"!==G&&t("input",{className:ae?"truncate-class":"","data-test":r["data-test"],id:r.id,style:null!==(i=null==fe?void 0:fe.input)&&void 0!==i?i:{},ref:je,type:["phonenumber","zip","number"].includes(G)?"number":G,value:xe,onFocus:e=>Ie(e),onBlur:e=>He(e),placeholder:D||"Enter here",onChange:Oe,onClick:e=>Ce(r.onClick),onKeyDown:e=>Te(e)}),"multiline"===G&&t("textarea",{"data-test":r["data-test"],value:xe,ref:je,onFocus:e=>Ie(e),onBlur:e=>He(e),onClick:e=>Ce(r.onClick),placeholder:D||"Enter here",onChange:Oe,onKeyDown:e=>Te(e),maxLength:K>0?K:void 0})]})};return e(x,Object.assign({width:r.width,height:r.height,state:_,type:G,style:null!==(L=null==fe?void 0:fe.RootContainer)&&void 0!==L?L:{}},{children:[!U&&(!!R||!!pe)&&e(b,Object.assign({invalid:!!pe},{children:[!!pe&&t(m,{width:16,height:16}),pe||R]})),e(y,Object.assign({variant:P,state:_,width:r.width,isActive:"active"===_||de,isInvalid:ue,style:null!==(E=null==fe?void 0:fe.InputWrapper)&&void 0!==E?E:{},version:ee,height:r.height},{children:[!!se&&t(j,Object.assign({variant:P,iconSize:me,onClick:()=>Ce(null==F?void 0:F.callback),isLeft:!0,style:null!==(z=null==fe?void 0:fe.IconHolder)&&void 0!==z?z:{}},{children:t(se,{})})),!!$&&t(C,Object.assign({variant:P},{children:$})),"default"===P&&t(w,Object.assign({height:r.height,type:r.type,minHeight:re,maxHeight:le,autoGrow:ie},{children:Le()})),"small"===P&&t(T,Object.assign({height:r.height,type:r.type},{children:Le()})),!!ce&&t(j,Object.assign({variant:P,iconSize:me,onClick:()=>Ce(null==M?void 0:M.callback),isLeft:!1},{children:t(ce,{})})),!!W&&t(k,Object.assign({variant:P},{children:W})),V&&V.text&&t(c,{buttonText:V.text,onClick:()=>Ce(null==V?void 0:V.onClick)})]})),(!!S||!!K)&&e(O,Object.assign({invalid:ue},{children:[ne&&ne,e("div",Object.assign({className:"label__container"},{children:[e(oe?v:p,{children:[S,N?t("span",{children:"*"}):""]}),r.tooltipText&&t(d,Object.assign({body:r.tooltipText,placement:"top"},{children:t("span",{children:t(i,{style:{marginTop:-3},width:18,height:18,color:ue?g.content.negative:g.content.primary})})}))]})),K>0&&e(I,{children:[null!==(B=null===(A=r.value)||void 0===A?void 0:A.length)&&void 0!==B?B:0,"/",K]})]}))]}))}));H.displayName="Input";export{H as Input};
|