pager-widget 0.2.7 → 0.2.9

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 (8) hide show
  1. package/App.jsx +370 -318
  2. package/ConsentPopup.jsx +7 -8
  3. package/Dropdown.jsx +2 -2
  4. package/InputConverter.jsx +10 -10
  5. package/dist/lib.js +11 -11
  6. package/fontStyles.js +16 -18
  7. package/md/assistant_md.js +2 -2
  8. package/package.json +1 -1
package/ConsentPopup.jsx CHANGED
@@ -43,7 +43,7 @@ const BotHeader = styled.div`
43
43
 
44
44
  const BotLabel = styled.span`
45
45
  font-family: "Inter", sans-serif;
46
- font-size: 12px;
46
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
47
47
  font-weight: 500;
48
48
  color: #020618;
49
49
  line-height: 18px;
@@ -77,7 +77,7 @@ const MessageCard = styled.div`
77
77
 
78
78
  const MessageText = styled.p`
79
79
  font-family: "Inter", sans-serif;
80
- font-size: 14px;
80
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
81
81
  font-weight: 400;
82
82
  color: #020618;
83
83
  line-height: 20px;
@@ -100,7 +100,7 @@ const SuggestionButton = styled.button`
100
100
  border-radius: 6px;
101
101
  color: #314158;
102
102
  font-family: "Inter", sans-serif;
103
- font-size: 14px;
103
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
104
104
  font-weight: 500;
105
105
  line-height: 20px;
106
106
  cursor: pointer;
@@ -129,7 +129,7 @@ const Timestamp = styled.div`
129
129
 
130
130
  const TimestampText = styled.span`
131
131
  font-family: "Inter", sans-serif;
132
- font-size: 12px;
132
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
133
133
  font-weight: 400;
134
134
  color: #45556c;
135
135
  line-height: 18px;
@@ -305,7 +305,7 @@ const ConsentPopup = ({
305
305
  </AvatarContainer>
306
306
  <MessageCard>
307
307
  <MessageText>
308
- <AssistantMd mdText={widget?.consent_data} />
308
+ <AssistantMd mdText={widget?.consent_data} />
309
309
  </MessageText>
310
310
 
311
311
  <SuggestionContainer>
@@ -320,7 +320,6 @@ const ConsentPopup = ({
320
320
  <BottomContainer>
321
321
  <Timestamp>
322
322
  <TimestampText>Just now</TimestampText>
323
-
324
323
  </Timestamp>
325
324
  <ReactionContainer></ReactionContainer>
326
325
  </BottomContainer>
@@ -400,7 +399,7 @@ const popupStyles = {
400
399
  },
401
400
  title: {
402
401
  marginBottom: "20px",
403
- fontSize: "18px",
402
+ fontSize: "clamp(1.125rem, calc(0.875rem + 0.3125vw), 1.25rem)",
404
403
  color: "#333",
405
404
  },
406
405
  buttonContainer: {
@@ -409,7 +408,7 @@ const popupStyles = {
409
408
  },
410
409
  button: {
411
410
  padding: "10px 20px",
412
- fontSize: "16px",
411
+ fontSize: "clamp(1rem, calc(0.75rem + 0.3125vw), 1.125rem)",
413
412
  border: "none",
414
413
  borderRadius: "4px",
415
414
  cursor: "pointer",
package/Dropdown.jsx CHANGED
@@ -12,7 +12,7 @@ const DropdownContent = styled.span`
12
12
  border: 1px solid
13
13
  ${({ error }) =>
14
14
  error === "true" ? "var(--red-300, #FFA2A2)" : "transparent"};
15
- font-size: 14px;
15
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
16
16
  font-style: normal;
17
17
  font-weight: 400;
18
18
  background: #fff;
@@ -47,7 +47,7 @@ const DropdownInput = styled.input`
47
47
  border-radius: 8px;
48
48
  border: 1px solid #d0d5dd;
49
49
  outline: none;
50
- font-size: 14px;
50
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
51
51
  background: transparent;
52
52
  height: 36px;
53
53
  `;
package/InputConverter.jsx CHANGED
@@ -23,7 +23,7 @@ const InputWrapper = styled.div`
23
23
 
24
24
  ::placeholder {
25
25
  color: #98a2b3;
26
- font-size: 14px;
26
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
27
27
  font-style: normal;
28
28
  font-weight: 400;
29
29
  line-height: normal;
@@ -59,7 +59,7 @@ const Label = styled.label`
59
59
  display: block;
60
60
  margin-bottom: 6px;
61
61
  color: #314158;
62
- font-size: 14px;
62
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
63
63
  font-style: normal;
64
64
  font-weight: 600;
65
65
  line-height: 20px;
@@ -75,14 +75,14 @@ Label.Meta = styled.span`
75
75
  const ErrorMessage = styled.div`
76
76
  color: red;
77
77
  margin-bottom: 5px;
78
- font-size: 12px;
78
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
79
79
  font-weight: 400;
80
80
  padding-left: 4px;
81
81
  padding-top: 2px;
82
82
  `;
83
83
 
84
84
  Form.Field.DescriptionMessage = styled.div`
85
- font-size: 12px;
85
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
86
86
  padding-top: 8px;
87
87
  padding-left: 4px;
88
88
  `;
@@ -101,7 +101,7 @@ const TextArea = styled.div`
101
101
  height: 130px;
102
102
  width: 100%;
103
103
  text-indent: 12px;
104
- font-size: 14px;
104
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
105
105
  font-style: normal;
106
106
  font-weight: 400;
107
107
  line-height: normal;
@@ -110,7 +110,7 @@ const TextArea = styled.div`
110
110
 
111
111
  :: placeholder {
112
112
  color: #98a2b3;
113
- font-size: 14px;
113
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
114
114
  font-style: normal;
115
115
  font-weight: 400;
116
116
  line-height: normal;
@@ -138,14 +138,14 @@ height: 52px;
138
138
  width: 100%;
139
139
  ::placeholder{
140
140
  color: #98A2B3;
141
- font-size: 14px;
141
+ font-size: clamp(0.875rem, calc(0.625rem + 0.3125vw), 1rem);
142
142
  font-style: normal;
143
143
  font-weight: 400;
144
144
  line-height: normal;
145
145
  }
146
146
  option {
147
147
  padding: 16px; height: 40px;
148
- font-size: 16px;
148
+ font-size: clamp(1rem, calc(0.75rem + 0.3125vw), 1.125rem);
149
149
  background-color: #ffffff;
150
150
  color: #333333;
151
151
  &:hover { background-color: #e0e0e0; }
@@ -160,7 +160,7 @@ const InfoIcon = styled.span`
160
160
  justify-content: center;
161
161
  width: 18px;
162
162
  height: 18px;
163
- font-size: 12px;
163
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
164
164
  font-weight: bold;
165
165
  color: #667085;
166
166
  background-color: #f3f4f6;
@@ -188,7 +188,7 @@ const InfoIcon = styled.span`
188
188
  width: 250px;
189
189
 
190
190
  color: #fff;
191
- font-size: 12px;
191
+ font-size: clamp(0.75rem, calc(0.5rem + 0.3125vw), 0.875rem);
192
192
  padding: 6px 10px;
193
193
  border-radius: 8px;
194
194
  opacity: 0;