@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.
Files changed (77) hide show
  1. package/dist/cjs/assets/icons/halfRectangle.svg.js +1 -1
  2. package/dist/cjs/components/SearchFilter/components/DatePickerButton.js +1 -1
  3. package/dist/cjs/components/SearchFilter/components/DateRangeOnlyButton.js +1 -1
  4. package/dist/cjs/components/TypographyStyle.d.ts +0 -17
  5. package/dist/cjs/components/TypographyStyle.js +14 -77
  6. package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js +1 -1
  7. package/dist/cjs/components/button/Button.js +1 -1
  8. package/dist/cjs/components/button/model.d.ts +1 -1
  9. package/dist/cjs/components/button/themes.d.ts +2 -2
  10. package/dist/cjs/components/button/themes.js +1 -1
  11. package/dist/cjs/components/custom-date-time/DateSelector/DateSelector.js +1 -1
  12. package/dist/cjs/components/datePicker/index.d.ts +1 -0
  13. package/dist/cjs/components/dropdown/Dropdown.js +1 -1
  14. package/dist/cjs/components/icon-button/IconButton.styled.js +1 -1
  15. package/dist/cjs/components/icon-button/model.d.ts +1 -1
  16. package/dist/cjs/components/icon-button/theme.js +1 -1
  17. package/dist/cjs/components/input/Input.d.ts +1 -0
  18. package/dist/cjs/components/input/Input.js +1 -1
  19. package/dist/cjs/components/input/Input.styled.js +1 -1
  20. package/dist/cjs/components/states/StateComponent.d.ts +2 -0
  21. package/dist/cjs/components/states/StateComponent.js +1 -1
  22. package/dist/cjs/components/states/StateComponent.styled.d.ts +4 -1
  23. package/dist/cjs/components/states/StateComponent.styled.js +6 -6
  24. package/dist/cjs/components/states-modal/StateModalComponent.d.ts +2 -0
  25. package/dist/cjs/components/states-modal/StateModalComponent.js +1 -1
  26. package/dist/cjs/components/stepper/Stepper.d.ts +2 -0
  27. package/dist/cjs/components/stepper/Stepper.js +1 -1
  28. package/dist/cjs/components/stepper/Stepper.styled.d.ts +1 -0
  29. package/dist/cjs/components/stepper/Stepper.styled.js +7 -7
  30. package/dist/cjs/components/tag/Tag.js +1 -1
  31. package/dist/cjs/components/tag/Tag.styled.js +1 -1
  32. package/dist/cjs/components/tag/model.d.ts +1 -11
  33. package/dist/cjs/components/tag/model.js +1 -1
  34. package/dist/cjs/components/tag/themes.d.ts +1 -1
  35. package/dist/cjs/components/tag/themes.js +1 -1
  36. package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.js +16 -14
  37. package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js +13 -13
  38. package/dist/cjs/index.js +1 -1
  39. package/dist/esm/assets/icons/halfRectangle.svg.js +1 -1
  40. package/dist/esm/components/SearchFilter/components/DatePickerButton.js +1 -1
  41. package/dist/esm/components/SearchFilter/components/DateRangeOnlyButton.js +1 -1
  42. package/dist/esm/components/TypographyStyle.d.ts +0 -17
  43. package/dist/esm/components/TypographyStyle.js +83 -146
  44. package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js +1 -1
  45. package/dist/esm/components/button/Button.js +1 -1
  46. package/dist/esm/components/button/model.d.ts +1 -1
  47. package/dist/esm/components/button/themes.d.ts +2 -2
  48. package/dist/esm/components/button/themes.js +1 -1
  49. package/dist/esm/components/custom-date-time/DateSelector/DateSelector.js +1 -1
  50. package/dist/esm/components/datePicker/index.d.ts +1 -0
  51. package/dist/esm/components/dropdown/Dropdown.js +1 -1
  52. package/dist/esm/components/icon-button/IconButton.styled.js +1 -1
  53. package/dist/esm/components/icon-button/model.d.ts +1 -1
  54. package/dist/esm/components/icon-button/theme.js +1 -1
  55. package/dist/esm/components/input/Input.d.ts +1 -0
  56. package/dist/esm/components/input/Input.js +1 -1
  57. package/dist/esm/components/input/Input.styled.js +1 -1
  58. package/dist/esm/components/states/StateComponent.d.ts +2 -0
  59. package/dist/esm/components/states/StateComponent.js +1 -1
  60. package/dist/esm/components/states/StateComponent.styled.d.ts +4 -1
  61. package/dist/esm/components/states/StateComponent.styled.js +6 -6
  62. package/dist/esm/components/states-modal/StateModalComponent.d.ts +2 -0
  63. package/dist/esm/components/states-modal/StateModalComponent.js +1 -1
  64. package/dist/esm/components/stepper/Stepper.d.ts +2 -0
  65. package/dist/esm/components/stepper/Stepper.js +1 -1
  66. package/dist/esm/components/stepper/Stepper.styled.d.ts +1 -0
  67. package/dist/esm/components/stepper/Stepper.styled.js +6 -6
  68. package/dist/esm/components/tag/Tag.js +1 -1
  69. package/dist/esm/components/tag/Tag.styled.js +1 -1
  70. package/dist/esm/components/tag/model.d.ts +1 -11
  71. package/dist/esm/components/tag/model.js +1 -1
  72. package/dist/esm/components/tag/themes.d.ts +1 -1
  73. package/dist/esm/components/tag/themes.js +1 -1
  74. package/dist/esm/components/template-preview/EmailTemplatePreview.styled.js +2 -0
  75. package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.js +18 -18
  76. package/dist/esm/index.js +1 -1
  77. package/package.json +1 -1
@@ -1,233 +1,170 @@
1
- import e from"styled-components";import{COLORS as t,FONTS as i}from"../constants/Theme.js";const o=e=>e+"px",n=e.div`
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||t.text.primary};
4
- font-weight: ${i.titleLarge.fontWeight};
5
- font-size: ${o(i.titleLarge.fontSize)};
6
- line-height: ${o(i.titleLarge.lineHeight)};
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||t.text.primary};
24
- font-weight: ${i.title4.fontWeight};
25
- font-size: ${o(i.title4.fontSize)};
26
- line-height: ${o(i.title4.lineHeight)};
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
- `,a=e.div`
21
+ `,r=e.div`
32
22
  font-family: Inter;
33
- color: ${e=>e.color||t.text.primary};
34
- font-weight: ${i.titleRegular.fontWeight};
35
- font-size: ${o(i.titleRegular.fontSize)};
36
- line-height: ${o(i.titleRegular.lineHeight)};
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||t.text.primary};
44
- font-weight: ${i.titleSmall.fontWeight};
45
- font-size: ${o(i.titleSmall.fontSize)};
46
- line-height: ${o(i.titleSmall.lineHeight)};
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
- `,b=e.div`
41
+ `,a=e.div`
52
42
  font-family: Inter;
53
- color: ${e=>e.color||t.text.primary};
54
- font-weight: ${i.display.fontWeight};
55
- font-size: ${o(i.display.fontSize)};
56
- line-height: ${o(i.display.lineHeight)};
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
- `,d=e.div`
51
+ `,b=e.div`
62
52
  font-family: Inter;
63
- color: ${e=>e.color||t.text.primary};
64
- font-weight: ${i.bodyPrimary.fontWeight};
65
- font-size: ${o(i.bodyLarge.fontSize)};
66
- line-height: ${o(i.bodyLarge.lineHeight)};
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
- `,c=e.div`
61
+ `,d=e.div`
72
62
  font-family: Inter;
73
- color: ${e=>e.color||t.text.primary};
74
- font-weight: ${i.bodyPrimary.fontWeight};
75
- font-size: ${o(i.bodyPrimary.fontSize)};
76
- line-height: ${o(i.bodyPrimary.lineHeight)};
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
- `,g=e.div`
71
+ `,h=e.div`
82
72
  font-family: Inter;
83
- color: ${e=>e.color||t.text.primary};
84
- font-weight: ${i.bodySecondary.fontWeight};
85
- font-size: ${o(i.bodySecondary.fontSize)};
86
- line-height: ${o(i.bodySecondary.lineHeight)};
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
- `,h=e.div`
81
+ `,c=e.div`
92
82
  font-family: Inter;
93
- color: ${e=>e.color||t.text.primary};
94
- font-weight: ${i.bodySecondary.fontWeight};
95
- font-size: ${o(i.bodySecondary.fontSize)};
96
- line-height: ${o(i.bodySecondary.lineHeight)};
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
- z-index: 1;
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: ${t.content.brand};
110
- text-decoration-color: ${t.content.brand};
93
+ color: ${i.content.brand};
94
+ text-decoration-color: ${i.content.brand};
111
95
  cursor: pointer;
112
- `,$=e(g)`
96
+ `,$=e(c)`
113
97
  text-decoration: underline;
114
- color: ${t.content.brand};
115
- text-decoration-color: ${t.content.brand};
98
+ color: ${i.content.brand};
99
+ text-decoration-color: ${i.content.brand};
116
100
  cursor: pointer;
117
- `,p=e.div`
101
+ `,w=e.div`
118
102
  font-family: Inter;
119
- color: ${e=>e.color||t.text.primary};
120
- font-weight: ${i.caption.fontWeight};
121
- font-size: ${o(i.caption.fontSize)};
122
- line-height: ${o(i.caption.lineHeight)};
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
- font-family: Inter;
129
- color: ${e=>e.color||t.text.primary};
130
- font-weight: ${i.caption.fontWeight};
131
- font-size: ${o(i.caption.fontSize)};
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||t.text.primary};
170
- font-weight: ${i.buttonLarge.fontWeight};
171
- font-size: ${o(i.buttonLarge.fontSize)};
172
- line-height: ${o(i.buttonLarge.lineHeight)};
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
- `,k=e.div`
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||t.text.primary};
196
- font-weight: ${i.buttonRegular.fontWeight};
197
- font-size: ${o(i.buttonRegular.fontSize)};
198
- line-height: ${o(i.buttonRegular.lineHeight)};
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
- `,v=e.div`
140
+ `,s=e.div`
204
141
  font-family: Inter;
205
- color: ${e=>e.color||t.text.primary};
206
- font-weight: ${i.subHeading.fontWeight};
207
- font-size: ${o(i.subHeading.fontSize)};
208
- line-height: ${o(i.subHeading.lineHeight)};
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
- `,z=e.div`
150
+ `,x=e.div`
214
151
  font-family: Inter;
215
- color: ${e=>e.color||t.text.primary};
216
- font-weight: ${i.bodyRegular.fontWeight};
217
- font-size: ${o(i.bodyRegular.fontSize)};
218
- line-height: ${o(i.bodyRegular.lineHeight)};
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
- `,L=e.div`
160
+ `,k=e.div`
224
161
  font-family: Inter;
225
- color: ${t.text.primary};
226
- font-weight: ${i.caption.fontWeight};
227
- font-size: ${o(i.caption.fontSize)};
228
- line-height: ${o(i.caption.lineHeight)};
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{m as AiBodyCaption,x as AiBodyTiny,p as BodyCaption,d as BodyLarge,c as BodyPrimary,w as BodyPrimaryLink,z as BodyRegular,g as BodySecondary,$ as BodySecondaryLink,y as BodyTiny,s as ButtonLarge,k as ButtonLargeAI,u as ButtonRegular,h as ButtonRegularAI,L as Caption,b as Display,l as SmallRegular,v as SubHeading,n as TitleLarge,r as TitleMedium,a as TitleRegular,f as TitleSmall};
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 n}from"react/jsx-runtime";import{useState as t,useEffect as l}from"react";import{Dropdown as i}from"react-bootstrap";import{DEFAULT_THEME as s,BASE_COLORS as a}from"../../constants/Theme.js";import{DatePicker as d}from"../datePicker/DatePicker.js";import{BodySecondary as c,BodyCaption as r,Caption as g}from"../TypographyStyle.js";import{MainDropdown as p,ItemMenuContainer as u}from"./CommonStyles.js";const m=a=>{let{options:r,placeholder:u="Select an option",selected:m,onOptionSelected:b,resetDropdown:h,maxHeight:y,backgroundColor:f,calendarPopperConfig:D,variant:k="default",datePickerPlacement:j,closeDropdown:S}=a;var R,w,C;const[x,$]=t(!1),[T,P]=t(m),[I,N]=t(),[A,E]=t(!1),F=()=>{!x&&E(!A)},[H,M]=t(m),V="small"===k?g:c;return l((()=>{h&&P(void 0)}),[h]),l((()=>{var e;(null==m?void 0:m.isCustom)&&(null===(e=m.dateRangeSelectionOptions)||void 0===e?void 0:e.selectedDates)?N(m.dateRangeSelectionOptions.selectedDates):N(void 0),P(m)}),[m]),l((()=>{E(!1),$(!1)}),[S]),e(o,{children:n(p,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 ${s.colorsV2.stroke.primary}`}:void 0},{children:e(V,Object.assign({style:"small"===k?{color:s.colorsV2.content.secondary}:void 0},{children:(null==T?void 0:T.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:u:T?null==T?void 0:T.label:u}))})),e(i.Menu,Object.assign({className:"main--dropdown"},{children:n(p,Object.assign({drop:null!=j?j:"end",id:"sub--dropdown",show:x,onToggle:e=>{!e&&E(!1),$(!x)}},{children:[e("div",Object.assign({style:{maxHeight:y||"auto",overflowY:"scroll"}},{children:r.map((o=>{var n;return e("div",{children:(null==o?void 0:o.isCustom)?e(i.Toggle,Object.assign({className:"sub--dropdown"},{children:e(v,{eachOption:o,selectedOption:T,selectedDate:I,onClickingEachItem:e=>{P(e),$(!0)},rangeSelection:!!(null===(n=null==o?void 0:o.dateRangeSelectionOptions)||void 0===n?void 0:n.selectRange)})})):e(v,{eachOption:o,selectedOption:T,selectedDate:I,onClickingEachItem:e=>{if(N(void 0),P(e),M(e),F(),!e.noOfDays)return void b(e);const o=new Date,n=new Date;n.setDate(o.getDate()-e.noOfDays),b(Object.assign(Object.assign({},e),{selectedRange:[n,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==T?void 0:T.dateRangeSelectionOptions)||void 0===R?void 0:R.selectRange)||!1,maxDate:null===(w=null==T?void 0:T.dateRangeSelectionOptions)||void 0===w?void 0:w.maxDate,minDate:null===(C=null==T?void 0:T.dateRangeSelectionOptions)||void 0===C?void 0:C.minDate,selectedDates:I,onSelectRange:(e,o)=>{const n=[e,o];(null==T?void 0:T.dateRangeSelectionOptions)&&(T.dateRangeSelectionOptions.selectedDates=n,b(Object.assign(Object.assign({},T),{selectedRange:[e,o]}))),M(T),$(!1),N(n),E(!A)},onSelectDate:e=>{(null==T?void 0:T.dateRangeSelectionOptions)&&(T.dateRangeSelectionOptions.selectedDates=[e,e],b(Object.assign(Object.assign({},T),{selectedRange:[e,e]}))),M(T),$(!1),N([e,e]),E(!A)}})}))]}))}))]}))})},v=o=>{let{eachOption:t,selectedOption:l,selectedDate:i,onClickingEachItem:s,rangeSelection:d}=o;return n(u,Object.assign({onClick:()=>s(t),isSelected:t.isCustom?t.key==(null==l?void 0:l.key)&&!!i:t.key==(null==l?void 0:l.key)},{children:[e(c,Object.assign({color:t.key==(null==l?void 0:l.key)?a.positive[900]:a.grayscale[900]},{children:t.label})),i&&(null==l?void 0:l.isCustom)&&t.key==(null==l?void 0:l.key)&&e(r,{children:d?`${O(i[0])} to ${O(i[1])}`:`${O(i[0])}`})]}),t.key)},O=e=>e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});export{m as AnalyticsDropdown,v as EachItem,O as formatDate};
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 s,{forwardRef as a}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=a(((a,b)=>{var{version:h,id:p,buttonType:g="primary",size:v="small",buttonText:u,disabled:j,IconComponent:y,LeadingIcon:N,TrailingIcon:x,isLoading:I,inverse:O,onClick:f,matchParentWidth:k,subtitle:T,darkMode:z,activated:C,error:L}=a,W=e(a,["version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error"]);const B=m(v,g,j),E="chip"===v?16:20,M={height:E,width:E,color:d(v,g,O,j,I,z),style:{display:"block"},className:"icon"};return t(o,Object.assign({"data-test":W["data-test"],version:h,onClick:I?()=>{}:f,ref:b,id:p,disabled:j,size:v,buttonType:g,isLoading:I,inverse:O,matchParentWidth:k,darkMode:z,activated:C,error:L},W,{children:i("div",Object.assign({className:"button-container"},{children:[g.startsWith("dash")&&t(c,{}),t("div",Object.assign({className:"overlay-container"},{children:I&&t(r,{className:"spinner",size:"small",color:l(g,O)})})),y&&t("div",Object.assign({className:"icon-component"},{children:s.createElement(y,M)})),N&&t("div",Object.assign({className:"icon-leading",style:{zIndex:1}},{children:s.createElement(N,M)})),u?i(B,Object.assign({className:"text"},{children:[u,t("div",Object.assign({className:"text-subtitle"},{children:T}))]})):t(n,{}),x&&t("div",Object.assign({className:"icon-trailing",style:{zIndex:1}},{children:s.createElement(x,M)}))]}))}))}));b.displayName="Button";export{b as Button};
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' | 'ai';
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, disabled?: boolean) => import("styled-components").StyledComponent<"div", any, {
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) => string;
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{ButtonRegularAI as r,ButtonLargeAI as n,BodySecondary as e,BodyCaption as a,ButtonRegular as o,ButtonLarge as i}from"../TypographyStyle.js";const c=(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"}},d=(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;case"ai":return t.content.ai;default:return e?t.content.primaryInverse:t.stroke.brand}},s=r=>r?"rgba(255, 255, 255, 0.5)":t.content.inactive,p=(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"}},b=(t,c,d)=>d||"ai"!==c?"dashRegular"===c?e:"chip"===t?a:"small"===t?o:i:"small"===t?r:n,g=(r,n,e)=>e?t.stroke.negative.vibrant:n?t.surface.standard:"secondary"==r?t.stroke.brand:t.content.placeholder,u=(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 ${g(n,a,o)};`:"border: none;":"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${g(n,!1,o)};`:"border: none;",l=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px",h=(r,n)=>"ai"===r?`background: ${t.surface.aiLight};`:"text"===r?"background-color:transparent;":n||"primary"===r?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",y=(r,n)=>n?"":`text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`,x=(r,n)=>n?"":"primary"===r?`background-color: ${t.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",k=(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};`:"",m=function(t,r){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:g(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${l(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${l(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${l(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${l(r)}\n\t\t);\n\t}\n\t`},v=(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,$=(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;",f=(r,n,e)=>"chip"===n?"border: none;":"secondary"===r?e?`border: 1px solid ${t.content.secondary};`:`border: 1px solid ${t.stroke.brandLightAlt};`:"",w=(r,n)=>n?"primary"===r?t.content.primary:t.content.primaryInverse:"destructive"===r?t.content.negative:t.content.brand,L=(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{b as GetButtonTextComponent,w as SpinnerColorMap,k as generateDisabledStyling,x as generateInverseHoverBackground,c as getBackgroundColor,u as getBorder,g as getBorderColor,L as getButtonIconColor,v as getClickEffect,d as getColor,m as getDashedBorderStyling,s as getDisabledTextColor,h as getHoverButtonBackground,y as getHoverButtonTextDecorationStyle,l as getLinearGradientValue,$ as getLoadingBackground,f as getLoadingBorder,p as getPadding};
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{OpenDropdownContainer as c}from"../../dropdown/Common.styled.js";import l from"../../dropShadow/DropShadow.js";import{useOutside as d}from"../../../hooks/useOutside.js";import p from"../../../utils/DateUtils.js";const f=f=>{const[h,j]=a(null),[u,g]=a(null),[D,y]=a(!1),{styles:b,attributes:w}=n(h,u,{placement:f.placement}),O=i.useRef();return d(O,(()=>{y(!1)})),e(t,{children:[e("div",Object.assign({className:"date-preview",ref:j,onClick:()=>{y(!D)}},{children:[s(r,{width:24,height:24}),s("span",Object.assign({style:{marginLeft:8}},{children:p.onlyDateFormat(f.customDate,"dd MMM yyyy")})),s(o,{style:{marginLeft:"auto"},width:22,height:22})]})),D&&s(c,Object.assign({ref:g,style:Object.assign(Object.assign({},b.popper),{zIndex:3})},w.popper,{children:s("div",Object.assign({ref:O},{children:s(l,Object.assign({level:"z2",position:"down",style:{borderRadius:4}},{children:s(m,{selectedDate:f.customDate||new Date,selectRange:!1,onSelectDate:e=>{y(!1),f.setCustomDate(e)},minDate:f.minDate})}))}))}))]})};export{f as default};
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,2 @@
1
1
  export * from './DatePicker';
2
+ export * from './DatePickerWrapper';
@@ -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&&"ai"!==t.iconButtonType?`border: 1px solid ${n.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${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`}
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' | 'ai';
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:"ai"===n?t.surface.aiLight:t.background.warning.light;export{e as generateBackgroundColor,n as getIconColor};
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 b,InputFooter as x,InputWrapper as y,IconHolder as j,PrefixHolder as C,InputContainer as w,InputContainerSmall as k,SuffixHolder as O,InputHeader as T,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:R,hintText:G,type:N,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}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},r),ae=null==F?void 0:F.icon,se=null==M?void 0:M.icon,[ce,ue]=l(!1),[he,de]=l(!1),[ve,pe]=l(),ge="small"===P?"18px":"22px",me=o(f),[fe,be]=l(),xe=a(null),ye=null!=H?H:xe;s((()=>{be(Q),!Q&&ie&&(ye.current.style.height=re||"48px")}),[Q]),s((()=>{var e;ye.current&&(null===(e=r.onReferenceInit)||void 0===e||e.call(r,ye.current))}),[ye]),s((()=>{const e=ye.current;if(e&&["phonenumber","zip","number"].includes(N))return e.addEventListener("wheel",ke,{passive:!1}),()=>{e.removeEventListener("wheel",ke)}}),[]),s((()=>{X&&be("")}),[X]),s((()=>{var e;de(!!r.isActive),r.isActive&&(null===(e=ye.current)||void 0===e||e.focus())}),[r.isActive]),s((()=>{pe(r.errorMessage)}),[r.errorMessage]),s((()=>{var e;ue(!1),("invalid"===r.state||ve||"disabled-invalid"===r.state)&&ue(!0),"active"===r.state&&(null===(e=ye.current)||void 0===e||e.focus())}),[r.state,ve]),s((()=>{ue(!!ve)}),[ve]);const je=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)}},Ce=()=>"zip"===N?6:60,we=e=>{const t=0!==K?K:Ce();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:Ce();!te&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),J(t,e),r.textControl||be(t),ie&&(ye.current.style.height=`${ye.current.scrollHeight}px`,t||(ye.current.style.height=re||"48px"));const i=q||h;if(!i||!u(i))return;const[l,o]=i(t,N,Y);ue(!l),pe(r.errorMessage?r.errorMessage:o)},Te=e=>{var t;r.skipFocus||de(!0),je(null===(t=r.onFocus)||void 0===t?void 0:t.call(r,e))},Ie=e=>{var t;r.skipFocus||de(!1),je(null===(t=r.onBlur)||void 0===t?void 0:t.call(r,e))},He=()=>{var i;return e(n,{children:["multiline"!==N&&t("input",{"data-test":r["data-test"],id:r.id,style:null!==(i=null==me?void 0:me.input)&&void 0!==i?i:{},ref:ye,type:["phonenumber","zip","number"].includes(N)?"number":N,value:fe,onFocus:e=>Te(e),onBlur:e=>Ie(e),placeholder:D||"Enter here",onChange:Oe,onClick:e=>je(r.onClick),onKeyDown:e=>we(e)}),"multiline"===N&&t("textarea",{"data-test":r["data-test"],value:fe,ref:ye,onFocus:e=>Te(e),onBlur:e=>Ie(e),onClick:e=>je(r.onClick),placeholder:D||"Enter here",onChange:Oe,onKeyDown:e=>we(e),maxLength:K>0?K:void 0})]})};return e(b,Object.assign({width:r.width,height:r.height,state:_,type:N,style:null!==(L=null==me?void 0:me.RootContainer)&&void 0!==L?L:{}},{children:[!U&&(!!G||!!ve)&&e(x,Object.assign({invalid:!!ve},{children:[!!ve&&t(m,{width:16,height:16}),ve||G]})),e(y,Object.assign({variant:P,state:_,width:r.width,isActive:"active"===_||he,isInvalid:ce,style:null!==(E=null==me?void 0:me.InputWrapper)&&void 0!==E?E:{},version:ee,height:r.height},{children:[!!ae&&t(j,Object.assign({variant:P,iconSize:ge,onClick:()=>je(null==F?void 0:F.callback),isLeft:!0,style:null!==(z=null==me?void 0:me.IconHolder)&&void 0!==z?z:{}},{children:t(ae,{})})),!!$&&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:He()})),"small"===P&&t(k,Object.assign({height:r.height,type:r.type},{children:He()})),!!se&&t(j,Object.assign({variant:P,iconSize:ge,onClick:()=>je(null==M?void 0:M.callback),isLeft:!1},{children:t(se,{})})),!!W&&t(O,Object.assign({variant:P},{children:W})),V&&V.text&&t(c,{buttonText:V.text,onClick:()=>je(null==V?void 0:V.onClick)})]})),(!!S||!!K)&&e(T,Object.assign({invalid:ce},{children:[ne&&ne,e("div",Object.assign({className:"label__container"},{children:[e(oe?v:p,{children:[S,R?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:ce?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};
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};