@cohiva/support-widget 1.0.0 → 1.1.0
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/index.cjs +3 -3
- package/dist/index.js +3 -3
- package/dist/styles.css +8 -4
- package/dist/widget-TTYCIVNC.css +247 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -724,7 +724,7 @@ function buildFeedbackDescription(formData, diagnostics) {
|
|
|
724
724
|
}
|
|
725
725
|
|
|
726
726
|
// src/components/SupportWidget.tsx
|
|
727
|
-
var import_widget = require("./widget-
|
|
727
|
+
var import_widget = require("./widget-TTYCIVNC.css");
|
|
728
728
|
|
|
729
729
|
// src/utils/classNames.ts
|
|
730
730
|
function classNames(...items) {
|
|
@@ -881,7 +881,7 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
|
|
|
881
881
|
]
|
|
882
882
|
}
|
|
883
883
|
),
|
|
884
|
-
isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-overlay", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
884
|
+
isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-overlay", onClick: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sw-modal-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
885
885
|
"div",
|
|
886
886
|
{
|
|
887
887
|
"aria-describedby": "support-widget-description",
|
|
@@ -1026,7 +1026,7 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
|
|
|
1026
1026
|
] })
|
|
1027
1027
|
]
|
|
1028
1028
|
}
|
|
1029
|
-
) }) : null
|
|
1029
|
+
) }) }) : null
|
|
1030
1030
|
] });
|
|
1031
1031
|
}
|
|
1032
1032
|
// Annotate the CommonJS export names for ESM import in node:
|
package/dist/index.js
CHANGED
|
@@ -685,7 +685,7 @@ function buildFeedbackDescription(formData, diagnostics) {
|
|
|
685
685
|
}
|
|
686
686
|
|
|
687
687
|
// src/components/SupportWidget.tsx
|
|
688
|
-
import "./widget-
|
|
688
|
+
import "./widget-TTYCIVNC.css";
|
|
689
689
|
|
|
690
690
|
// src/utils/classNames.ts
|
|
691
691
|
function classNames(...items) {
|
|
@@ -842,7 +842,7 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
|
|
|
842
842
|
]
|
|
843
843
|
}
|
|
844
844
|
),
|
|
845
|
-
isOpen ? /* @__PURE__ */ jsx("div", { className: "sw-overlay", onClick: handleClose, children: /* @__PURE__ */ jsxs(
|
|
845
|
+
isOpen ? /* @__PURE__ */ jsx("div", { className: "sw-overlay", onClick: handleClose, children: /* @__PURE__ */ jsx("div", { className: "sw-modal-wrapper", children: /* @__PURE__ */ jsxs(
|
|
846
846
|
"div",
|
|
847
847
|
{
|
|
848
848
|
"aria-describedby": "support-widget-description",
|
|
@@ -987,7 +987,7 @@ function SupportWidget({ config, isVisible = true, onSuccess, onError, onSubmit
|
|
|
987
987
|
] })
|
|
988
988
|
]
|
|
989
989
|
}
|
|
990
|
-
) }) : null
|
|
990
|
+
) }) }) : null
|
|
991
991
|
] });
|
|
992
992
|
}
|
|
993
993
|
export {
|
package/dist/styles.css
CHANGED
|
@@ -61,15 +61,19 @@
|
|
|
61
61
|
inset: 0;
|
|
62
62
|
z-index: 1100;
|
|
63
63
|
background: rgba(2, 6, 23, 0.7);
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
overflow-y: auto;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.sw-modal-wrapper {
|
|
68
|
+
display: flex;
|
|
69
|
+
min-height: 100%;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
66
72
|
padding: 1rem;
|
|
67
73
|
}
|
|
68
74
|
|
|
69
75
|
.sw-modal {
|
|
70
76
|
width: min(100%, 56rem);
|
|
71
|
-
max-height: 92vh;
|
|
72
|
-
overflow: auto;
|
|
73
77
|
position: relative;
|
|
74
78
|
border-radius: 1rem;
|
|
75
79
|
border: 1px solid var(--sw-color-border);
|
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--sw-color-launcher-bg: #6d28d9;
|
|
3
|
+
--sw-color-launcher-bg-hover: #5b21b6;
|
|
4
|
+
--sw-color-launcher-border: #8b5cf6;
|
|
5
|
+
--sw-color-surface: #ffffff;
|
|
6
|
+
--sw-color-surface-muted: #f8fafc;
|
|
7
|
+
--sw-color-text: #0f172a;
|
|
8
|
+
--sw-color-text-muted: #475569;
|
|
9
|
+
--sw-color-border: #cbd5e1;
|
|
10
|
+
--sw-color-primary: #0f766e;
|
|
11
|
+
--sw-color-primary-hover: #115e59;
|
|
12
|
+
--sw-color-danger: #b91c1c;
|
|
13
|
+
--sw-shadow-elevated: 0 20px 35px rgba(15, 23, 42, 0.25);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.sw-sr-only {
|
|
17
|
+
border: 0;
|
|
18
|
+
clip: rect(0, 0, 0, 0);
|
|
19
|
+
height: 1px;
|
|
20
|
+
margin: -1px;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
padding: 0;
|
|
23
|
+
position: absolute;
|
|
24
|
+
width: 1px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.sw-launcher {
|
|
28
|
+
position: fixed;
|
|
29
|
+
right: 1.5rem;
|
|
30
|
+
bottom: 1.5rem;
|
|
31
|
+
z-index: 1000;
|
|
32
|
+
display: inline-flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: 0.5rem;
|
|
35
|
+
border-radius: 999px;
|
|
36
|
+
border: 2px solid var(--sw-color-launcher-border);
|
|
37
|
+
background: var(--sw-color-launcher-bg);
|
|
38
|
+
color: #ffffff;
|
|
39
|
+
font-size: 0.875rem;
|
|
40
|
+
font-weight: 700;
|
|
41
|
+
padding: 0.625rem 1rem;
|
|
42
|
+
box-shadow: 0 10px 24px rgba(76, 29, 149, 0.38);
|
|
43
|
+
transition: transform 150ms ease, background 150ms ease;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.sw-launcher:hover {
|
|
47
|
+
transform: scale(1.05);
|
|
48
|
+
background: var(--sw-color-launcher-bg-hover);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.sw-launcher-icon {
|
|
52
|
+
width: 1.25rem;
|
|
53
|
+
height: 1.25rem;
|
|
54
|
+
display: inline-flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
justify-content: center;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.sw-overlay {
|
|
60
|
+
position: fixed;
|
|
61
|
+
inset: 0;
|
|
62
|
+
z-index: 1100;
|
|
63
|
+
background: rgba(2, 6, 23, 0.7);
|
|
64
|
+
overflow-y: auto;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.sw-modal-wrapper {
|
|
68
|
+
display: flex;
|
|
69
|
+
min-height: 100%;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
padding: 1rem;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.sw-modal {
|
|
76
|
+
width: min(100%, 56rem);
|
|
77
|
+
position: relative;
|
|
78
|
+
border-radius: 1rem;
|
|
79
|
+
border: 1px solid var(--sw-color-border);
|
|
80
|
+
background: var(--sw-color-surface);
|
|
81
|
+
color: var(--sw-color-text);
|
|
82
|
+
padding: 1.25rem;
|
|
83
|
+
box-shadow: var(--sw-shadow-elevated);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.sw-close {
|
|
87
|
+
position: absolute;
|
|
88
|
+
right: 0.75rem;
|
|
89
|
+
top: 0.75rem;
|
|
90
|
+
width: 2rem;
|
|
91
|
+
height: 2rem;
|
|
92
|
+
border-radius: 0.5rem;
|
|
93
|
+
border: 1px solid var(--sw-color-border);
|
|
94
|
+
background: transparent;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.sw-header h2 {
|
|
98
|
+
margin: 0;
|
|
99
|
+
font-size: 1.25rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.sw-header p {
|
|
103
|
+
margin: 0.3rem 0 1rem;
|
|
104
|
+
color: var(--sw-color-text-muted);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.sw-type-grid {
|
|
108
|
+
display: grid;
|
|
109
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
110
|
+
gap: 0.75rem;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.sw-type-card {
|
|
114
|
+
text-align: left;
|
|
115
|
+
border: 2px solid var(--sw-color-border);
|
|
116
|
+
border-radius: 0.75rem;
|
|
117
|
+
background: #ffffff;
|
|
118
|
+
padding: 0.85rem;
|
|
119
|
+
display: grid;
|
|
120
|
+
gap: 0.4rem;
|
|
121
|
+
transition: border-color 150ms ease, background 150ms ease;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.sw-type-card:hover {
|
|
125
|
+
border-color: var(--sw-color-primary);
|
|
126
|
+
background: var(--sw-color-surface-muted);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.sw-type-card span {
|
|
130
|
+
color: var(--sw-color-text-muted);
|
|
131
|
+
font-size: 0.85rem;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.sw-form {
|
|
135
|
+
display: grid;
|
|
136
|
+
gap: 0.8rem;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.sw-field {
|
|
140
|
+
display: grid;
|
|
141
|
+
gap: 0.35rem;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.sw-field textarea,
|
|
145
|
+
.sw-form input,
|
|
146
|
+
.sw-form select {
|
|
147
|
+
border: 1px solid var(--sw-color-border);
|
|
148
|
+
border-radius: 0.5rem;
|
|
149
|
+
padding: 0.6rem;
|
|
150
|
+
font: inherit;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.sw-row {
|
|
154
|
+
display: grid;
|
|
155
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
156
|
+
gap: 0.75rem;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.sw-section {
|
|
160
|
+
border: 1px solid var(--sw-color-border);
|
|
161
|
+
border-radius: 0.75rem;
|
|
162
|
+
background: var(--sw-color-surface-muted);
|
|
163
|
+
padding: 0.8rem;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.sw-section h3 {
|
|
167
|
+
margin-top: 0;
|
|
168
|
+
margin-bottom: 0.6rem;
|
|
169
|
+
font-size: 1rem;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.sw-rating {
|
|
173
|
+
display: grid;
|
|
174
|
+
gap: 0.45rem;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.sw-rating-button {
|
|
178
|
+
border: 1px solid var(--sw-color-border);
|
|
179
|
+
border-radius: 0.3rem;
|
|
180
|
+
background: transparent;
|
|
181
|
+
color: #94a3b8;
|
|
182
|
+
margin-right: 0.35rem;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.sw-rating-button.is-active {
|
|
186
|
+
color: #f59e0b;
|
|
187
|
+
border-color: #f59e0b;
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.sw-diagnostics-note {
|
|
191
|
+
border: 1px dashed var(--sw-color-border);
|
|
192
|
+
border-radius: 0.55rem;
|
|
193
|
+
font-size: 0.8rem;
|
|
194
|
+
color: var(--sw-color-text-muted);
|
|
195
|
+
padding: 0.65rem;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.sw-error {
|
|
199
|
+
color: var(--sw-color-danger);
|
|
200
|
+
margin: 0;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.sw-actions {
|
|
204
|
+
display: flex;
|
|
205
|
+
gap: 0.75rem;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.sw-actions button {
|
|
209
|
+
flex: 1;
|
|
210
|
+
border: 1px solid var(--sw-color-border);
|
|
211
|
+
border-radius: 0.5rem;
|
|
212
|
+
padding: 0.6rem;
|
|
213
|
+
font: inherit;
|
|
214
|
+
background: #ffffff;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.sw-actions button[type='submit'] {
|
|
218
|
+
color: #ffffff;
|
|
219
|
+
background: var(--sw-color-primary);
|
|
220
|
+
border-color: var(--sw-color-primary);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.sw-actions button[type='submit']:hover {
|
|
224
|
+
background: var(--sw-color-primary-hover);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.sw-actions button:disabled {
|
|
228
|
+
opacity: 0.5;
|
|
229
|
+
cursor: not-allowed;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.sw-success {
|
|
233
|
+
text-align: center;
|
|
234
|
+
padding: 3rem 1rem;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
@media (max-width: 640px) {
|
|
238
|
+
.sw-type-grid,
|
|
239
|
+
.sw-row {
|
|
240
|
+
grid-template-columns: 1fr;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.sw-launcher {
|
|
244
|
+
right: 1rem;
|
|
245
|
+
bottom: 1rem;
|
|
246
|
+
}
|
|
247
|
+
}
|