se-design 1.0.79-dev1 → 1.0.80
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/assets/style.css +1 -1
- package/dist/index10.js.map +1 -1
- package/dist/index100.js.map +1 -1
- package/dist/index101.js.map +1 -1
- package/dist/index102.js.map +1 -1
- package/dist/index103.js.map +1 -1
- package/dist/index104.js.map +1 -1
- package/dist/index105.js.map +1 -1
- package/dist/index106.js.map +1 -1
- package/dist/index107.js.map +1 -1
- package/dist/index108.js.map +1 -1
- package/dist/index109.js.map +1 -1
- package/dist/index11.js.map +1 -1
- package/dist/index110.js.map +1 -1
- package/dist/index111.js.map +1 -1
- package/dist/index112.js.map +1 -1
- package/dist/index113.js.map +1 -1
- package/dist/index114.js.map +1 -1
- package/dist/index115.js.map +1 -1
- package/dist/index116.js.map +1 -1
- package/dist/index117.js.map +1 -1
- package/dist/index118.js.map +1 -1
- package/dist/index119.js.map +1 -1
- package/dist/index12.js.map +1 -1
- package/dist/index120.js.map +1 -1
- package/dist/index121.js.map +1 -1
- package/dist/index122.js.map +1 -1
- package/dist/index123.js.map +1 -1
- package/dist/index124.js.map +1 -1
- package/dist/index125.js.map +1 -1
- package/dist/index126.js.map +1 -1
- package/dist/index127.js.map +1 -1
- package/dist/index128.js.map +1 -1
- package/dist/index129.js.map +1 -1
- package/dist/index13.js.map +1 -1
- package/dist/index130.js.map +1 -1
- package/dist/index131.js.map +1 -1
- package/dist/index132.js.map +1 -1
- package/dist/index133.js.map +1 -1
- package/dist/index134.js.map +1 -1
- package/dist/index135.js.map +1 -1
- package/dist/index136.js.map +1 -1
- package/dist/index137.js.map +1 -1
- package/dist/index138.js.map +1 -1
- package/dist/index139.js.map +1 -1
- package/dist/index14.js.map +1 -1
- package/dist/index140.js.map +1 -1
- package/dist/index141.js.map +1 -1
- package/dist/index142.js.map +1 -1
- package/dist/index143.js.map +1 -1
- package/dist/index144.js.map +1 -1
- package/dist/index145.js.map +1 -1
- package/dist/index146.js.map +1 -1
- package/dist/index147.js.map +1 -1
- package/dist/index148.js.map +1 -1
- package/dist/index149.js.map +1 -1
- package/dist/index150.js.map +1 -1
- package/dist/index151.js.map +1 -1
- package/dist/index152.js.map +1 -1
- package/dist/index153.js.map +1 -1
- package/dist/index154.js.map +1 -1
- package/dist/index155.js.map +1 -1
- package/dist/index156.js.map +1 -1
- package/dist/index157.js.map +1 -1
- package/dist/index158.js.map +1 -1
- package/dist/index159.js.map +1 -1
- package/dist/index16.js.map +1 -1
- package/dist/index160.js.map +1 -1
- package/dist/index161.js.map +1 -1
- package/dist/index162.js.map +1 -1
- package/dist/index163.js.map +1 -1
- package/dist/index164.js.map +1 -1
- package/dist/index165.js.map +1 -1
- package/dist/index166.js.map +1 -1
- package/dist/index167.js.map +1 -1
- package/dist/index168.js.map +1 -1
- package/dist/index169.js.map +1 -1
- package/dist/index17.js.map +1 -1
- package/dist/index170.js.map +1 -1
- package/dist/index171.js.map +1 -1
- package/dist/index172.js.map +1 -1
- package/dist/index173.js.map +1 -1
- package/dist/index174.js.map +1 -1
- package/dist/index175.js.map +1 -1
- package/dist/index176.js.map +1 -1
- package/dist/index177.js.map +1 -1
- package/dist/index178.js.map +1 -1
- package/dist/index179.js.map +1 -1
- package/dist/index18.js.map +1 -1
- package/dist/index180.js.map +1 -1
- package/dist/index181.js.map +1 -1
- package/dist/index182.js.map +1 -1
- package/dist/index183.js.map +1 -1
- package/dist/index184.js.map +1 -1
- package/dist/index185.js.map +1 -1
- package/dist/index186.js.map +1 -1
- package/dist/index187.js.map +1 -1
- package/dist/index188.js.map +1 -1
- package/dist/index189.js.map +1 -1
- package/dist/index19.js.map +1 -1
- package/dist/index190.js.map +1 -1
- package/dist/index191.js.map +1 -1
- package/dist/index192.js.map +1 -1
- package/dist/index193.js.map +1 -1
- package/dist/index194.js.map +1 -1
- package/dist/index195.js.map +1 -1
- package/dist/index196.js.map +1 -1
- package/dist/index197.js.map +1 -1
- package/dist/index198.js.map +1 -1
- package/dist/index199.js.map +1 -1
- package/dist/index20.js.map +1 -1
- package/dist/index200.js.map +1 -1
- package/dist/index201.js.map +1 -1
- package/dist/index208.js.map +1 -1
- package/dist/index209.js +1 -1
- package/dist/index209.js.map +1 -1
- package/dist/index21.js.map +1 -1
- package/dist/index217.js.map +1 -1
- package/dist/index22.js.map +1 -1
- package/dist/index228.js.map +1 -1
- package/dist/index23.js.map +1 -1
- package/dist/index237.js.map +1 -1
- package/dist/index24.js.map +1 -1
- package/dist/index240.js.map +1 -1
- package/dist/index241.js +1 -1
- package/dist/index241.js.map +1 -1
- package/dist/index242.js.map +1 -1
- package/dist/index244.js.map +1 -1
- package/dist/index245.js.map +1 -1
- package/dist/index246.js.map +1 -1
- package/dist/index247.js.map +1 -1
- package/dist/index248.js.map +1 -1
- package/dist/index25.js.map +1 -1
- package/dist/index250.js.map +1 -1
- package/dist/index251.js.map +1 -1
- package/dist/index252.js.map +1 -1
- package/dist/index254.js.map +1 -1
- package/dist/index255.js.map +1 -1
- package/dist/index256.js.map +1 -1
- package/dist/index259.js.map +1 -1
- package/dist/index26.js.map +1 -1
- package/dist/index27.js.map +1 -1
- package/dist/index28.js.map +1 -1
- package/dist/index29.js.map +1 -1
- package/dist/index3.js.map +1 -1
- package/dist/index30.js.map +1 -1
- package/dist/index31.js.map +1 -1
- package/dist/index32.js.map +1 -1
- package/dist/index33.js.map +1 -1
- package/dist/index34.js.map +1 -1
- package/dist/index35.js.map +1 -1
- package/dist/index36.js.map +1 -1
- package/dist/index37.js.map +1 -1
- package/dist/index38.js.map +1 -1
- package/dist/index39.js.map +1 -1
- package/dist/index4.js.map +1 -1
- package/dist/index40.js.map +1 -1
- package/dist/index41.js.map +1 -1
- package/dist/index42.js.map +1 -1
- package/dist/index43.js.map +1 -1
- package/dist/index44.js.map +1 -1
- package/dist/index45.js.map +1 -1
- package/dist/index46.js.map +1 -1
- package/dist/index47.js.map +1 -1
- package/dist/index48.js.map +1 -1
- package/dist/index49.js.map +1 -1
- package/dist/index5.js.map +1 -1
- package/dist/index50.js.map +1 -1
- package/dist/index51.js +9 -9
- package/dist/index51.js.map +1 -1
- package/dist/index52.js.map +1 -1
- package/dist/index53.js.map +1 -1
- package/dist/index54.js.map +1 -1
- package/dist/index55.js.map +1 -1
- package/dist/index56.js.map +1 -1
- package/dist/index57.js.map +1 -1
- package/dist/index58.js.map +1 -1
- package/dist/index59.js.map +1 -1
- package/dist/index6.js +102 -102
- package/dist/index6.js.map +1 -1
- package/dist/index60.js.map +1 -1
- package/dist/index61.js.map +1 -1
- package/dist/index62.js.map +1 -1
- package/dist/index63.js.map +1 -1
- package/dist/index64.js.map +1 -1
- package/dist/index65.js.map +1 -1
- package/dist/index67.js.map +1 -1
- package/dist/index68.js.map +1 -1
- package/dist/index69.js.map +1 -1
- package/dist/index7.js.map +1 -1
- package/dist/index70.js.map +1 -1
- package/dist/index71.js.map +1 -1
- package/dist/index72.js +53 -48
- package/dist/index72.js.map +1 -1
- package/dist/index73.js.map +1 -1
- package/dist/index74.js.map +1 -1
- package/dist/index75.js.map +1 -1
- package/dist/index76.js.map +1 -1
- package/dist/index77.js.map +1 -1
- package/dist/index78.js.map +1 -1
- package/dist/index8.js.map +1 -1
- package/dist/index80.js.map +1 -1
- package/dist/index81.js.map +1 -1
- package/dist/index82.js.map +1 -1
- package/dist/index83.js.map +1 -1
- package/dist/index84.js.map +1 -1
- package/dist/index85.js.map +1 -1
- package/dist/index86.js.map +1 -1
- package/dist/index87.js.map +1 -1
- package/dist/index88.js.map +1 -1
- package/dist/index89.js.map +1 -1
- package/dist/index9.js.map +1 -1
- package/dist/index90.js.map +1 -1
- package/dist/index91.js.map +1 -1
- package/dist/index92.js.map +1 -1
- package/dist/index93.js.map +1 -1
- package/dist/index94.js.map +1 -1
- package/dist/index95.js.map +1 -1
- package/dist/index96.js.map +1 -1
- package/dist/index97.js.map +1 -1
- package/dist/index98.js.map +1 -1
- package/dist/index99.js.map +1 -1
- package/package.json +1 -1
package/dist/index6.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
1
|
+
import S from "./index80.js";
|
|
2
|
+
import j from "./index81.js";
|
|
3
|
+
import F from "./index82.js";
|
|
4
|
+
import R from "./index83.js";
|
|
5
|
+
import M from "./index84.js";
|
|
6
|
+
import B from "./index85.js";
|
|
7
|
+
import D from "./index86.js";
|
|
8
8
|
import T from "./index87.js";
|
|
9
9
|
import q from "./index88.js";
|
|
10
10
|
import G from "./index89.js";
|
|
@@ -42,23 +42,23 @@ import hs from "./index120.js";
|
|
|
42
42
|
import ks from "./index121.js";
|
|
43
43
|
import xs from "./index122.js";
|
|
44
44
|
import As from "./index123.js";
|
|
45
|
-
import
|
|
46
|
-
import
|
|
47
|
-
import
|
|
48
|
-
import
|
|
45
|
+
import ws from "./index124.js";
|
|
46
|
+
import ys from "./index125.js";
|
|
47
|
+
import Is from "./index126.js";
|
|
48
|
+
import Ps from "./index127.js";
|
|
49
49
|
import Ns from "./index128.js";
|
|
50
|
-
import
|
|
51
|
-
import
|
|
52
|
-
import
|
|
53
|
-
import
|
|
54
|
-
import
|
|
55
|
-
import
|
|
56
|
-
import
|
|
57
|
-
import
|
|
58
|
-
import
|
|
59
|
-
import
|
|
60
|
-
import
|
|
61
|
-
import
|
|
50
|
+
import $s from "./index129.js";
|
|
51
|
+
import Cs from "./index130.js";
|
|
52
|
+
import Ls from "./index131.js";
|
|
53
|
+
import Os from "./index132.js";
|
|
54
|
+
import Es from "./index133.js";
|
|
55
|
+
import Ss from "./index134.js";
|
|
56
|
+
import js from "./index135.js";
|
|
57
|
+
import Fs from "./index136.js";
|
|
58
|
+
import Rs from "./index137.js";
|
|
59
|
+
import Ms from "./index138.js";
|
|
60
|
+
import Bs from "./index139.js";
|
|
61
|
+
import Ds from "./index140.js";
|
|
62
62
|
import Ts from "./index141.js";
|
|
63
63
|
import qs from "./index142.js";
|
|
64
64
|
import Gs from "./index143.js";
|
|
@@ -95,23 +95,23 @@ import ho from "./index173.js";
|
|
|
95
95
|
import ko from "./index174.js";
|
|
96
96
|
import xo from "./index175.js";
|
|
97
97
|
import Ao from "./index176.js";
|
|
98
|
-
import
|
|
99
|
-
import
|
|
100
|
-
import
|
|
101
|
-
import
|
|
98
|
+
import wo from "./index177.js";
|
|
99
|
+
import yo from "./index178.js";
|
|
100
|
+
import Io from "./index179.js";
|
|
101
|
+
import Po from "./index180.js";
|
|
102
102
|
import No from "./index181.js";
|
|
103
|
-
import
|
|
104
|
-
import
|
|
105
|
-
import
|
|
106
|
-
import
|
|
107
|
-
import
|
|
108
|
-
import
|
|
109
|
-
import
|
|
110
|
-
import
|
|
111
|
-
import
|
|
112
|
-
import
|
|
113
|
-
import
|
|
114
|
-
import
|
|
103
|
+
import $o from "./index182.js";
|
|
104
|
+
import Co from "./index183.js";
|
|
105
|
+
import Lo from "./index184.js";
|
|
106
|
+
import Oo from "./index185.js";
|
|
107
|
+
import Eo from "./index186.js";
|
|
108
|
+
import So from "./index187.js";
|
|
109
|
+
import jo from "./index188.js";
|
|
110
|
+
import Fo from "./index189.js";
|
|
111
|
+
import Ro from "./index190.js";
|
|
112
|
+
import Mo from "./index191.js";
|
|
113
|
+
import Bo from "./index192.js";
|
|
114
|
+
import Do from "./index193.js";
|
|
115
115
|
import To from "./index194.js";
|
|
116
116
|
import qo from "./index195.js";
|
|
117
117
|
import Go from "./index196.js";
|
|
@@ -130,13 +130,13 @@ function a() {
|
|
|
130
130
|
}, a.apply(null, arguments);
|
|
131
131
|
}
|
|
132
132
|
const Ko = /* @__PURE__ */ Object.assign({
|
|
133
|
-
"/src/assets/icons/ai-off.svg":
|
|
134
|
-
"/src/assets/icons/ai-re-run.svg":
|
|
135
|
-
"/src/assets/icons/ai-search.svg":
|
|
136
|
-
"/src/assets/icons/ai-stars.svg":
|
|
137
|
-
"/src/assets/icons/ai.svg":
|
|
138
|
-
"/src/assets/icons/all-space.svg":
|
|
139
|
-
"/src/assets/icons/arrow-head.svg":
|
|
133
|
+
"/src/assets/icons/ai-off.svg": S,
|
|
134
|
+
"/src/assets/icons/ai-re-run.svg": j,
|
|
135
|
+
"/src/assets/icons/ai-search.svg": F,
|
|
136
|
+
"/src/assets/icons/ai-stars.svg": R,
|
|
137
|
+
"/src/assets/icons/ai.svg": M,
|
|
138
|
+
"/src/assets/icons/all-space.svg": B,
|
|
139
|
+
"/src/assets/icons/arrow-head.svg": D,
|
|
140
140
|
"/src/assets/icons/attachment.svg": T,
|
|
141
141
|
"/src/assets/icons/back.svg": q,
|
|
142
142
|
"/src/assets/icons/banner-demo-img.svg": G,
|
|
@@ -174,23 +174,23 @@ const Ko = /* @__PURE__ */ Object.assign({
|
|
|
174
174
|
"/src/assets/icons/fields-panel.svg": ks,
|
|
175
175
|
"/src/assets/icons/file-empty.svg": xs,
|
|
176
176
|
"/src/assets/icons/file-filled-checked.svg": As,
|
|
177
|
-
"/src/assets/icons/file-red.svg":
|
|
178
|
-
"/src/assets/icons/file.svg":
|
|
179
|
-
"/src/assets/icons/fill-and-sign.svg":
|
|
180
|
-
"/src/assets/icons/filter.svg":
|
|
177
|
+
"/src/assets/icons/file-red.svg": ws,
|
|
178
|
+
"/src/assets/icons/file.svg": ys,
|
|
179
|
+
"/src/assets/icons/fill-and-sign.svg": Is,
|
|
180
|
+
"/src/assets/icons/filter.svg": Ps,
|
|
181
181
|
"/src/assets/icons/folder-empty.svg": Ns,
|
|
182
|
-
"/src/assets/icons/folder.svg":
|
|
183
|
-
"/src/assets/icons/gmail.svg":
|
|
184
|
-
"/src/assets/icons/google-drive.svg":
|
|
185
|
-
"/src/assets/icons/hamburger.svg":
|
|
186
|
-
"/src/assets/icons/hashtag.svg":
|
|
187
|
-
"/src/assets/icons/help-question.svg":
|
|
188
|
-
"/src/assets/icons/history.svg":
|
|
189
|
-
"/src/assets/icons/home.svg":
|
|
190
|
-
"/src/assets/icons/hourglass.svg":
|
|
191
|
-
"/src/assets/icons/image-field.svg":
|
|
192
|
-
"/src/assets/icons/info.svg":
|
|
193
|
-
"/src/assets/icons/initials-field.svg":
|
|
182
|
+
"/src/assets/icons/folder.svg": $s,
|
|
183
|
+
"/src/assets/icons/gmail.svg": Cs,
|
|
184
|
+
"/src/assets/icons/google-drive.svg": Ls,
|
|
185
|
+
"/src/assets/icons/hamburger.svg": Os,
|
|
186
|
+
"/src/assets/icons/hashtag.svg": Es,
|
|
187
|
+
"/src/assets/icons/help-question.svg": Ss,
|
|
188
|
+
"/src/assets/icons/history.svg": js,
|
|
189
|
+
"/src/assets/icons/home.svg": Fs,
|
|
190
|
+
"/src/assets/icons/hourglass.svg": Rs,
|
|
191
|
+
"/src/assets/icons/image-field.svg": Ms,
|
|
192
|
+
"/src/assets/icons/info.svg": Bs,
|
|
193
|
+
"/src/assets/icons/initials-field.svg": Ds,
|
|
194
194
|
"/src/assets/icons/kebab-menu.svg": Ts,
|
|
195
195
|
"/src/assets/icons/left-align.svg": qs,
|
|
196
196
|
"/src/assets/icons/library.svg": Gs,
|
|
@@ -227,29 +227,29 @@ const Ko = /* @__PURE__ */ Object.assign({
|
|
|
227
227
|
"/src/assets/icons/shipment-private.svg": ko,
|
|
228
228
|
"/src/assets/icons/shipment.svg": xo,
|
|
229
229
|
"/src/assets/icons/sidebar.svg": Ao,
|
|
230
|
-
"/src/assets/icons/signature-field.svg":
|
|
231
|
-
"/src/assets/icons/signer.svg":
|
|
232
|
-
"/src/assets/icons/slideout.svg":
|
|
233
|
-
"/src/assets/icons/sms.svg":
|
|
230
|
+
"/src/assets/icons/signature-field.svg": wo,
|
|
231
|
+
"/src/assets/icons/signer.svg": yo,
|
|
232
|
+
"/src/assets/icons/slideout.svg": Io,
|
|
233
|
+
"/src/assets/icons/sms.svg": Po,
|
|
234
234
|
"/src/assets/icons/sort-asc.svg": No,
|
|
235
|
-
"/src/assets/icons/sort-desc.svg":
|
|
236
|
-
"/src/assets/icons/sort.svg":
|
|
237
|
-
"/src/assets/icons/space.svg":
|
|
238
|
-
"/src/assets/icons/stamp-field.svg":
|
|
239
|
-
"/src/assets/icons/stop.svg":
|
|
240
|
-
"/src/assets/icons/success-check.svg":
|
|
241
|
-
"/src/assets/icons/tag.svg":
|
|
242
|
-
"/src/assets/icons/text-field.svg":
|
|
243
|
-
"/src/assets/icons/tick.svg":
|
|
244
|
-
"/src/assets/icons/title-field.svg":
|
|
245
|
-
"/src/assets/icons/upload-csv.svg":
|
|
246
|
-
"/src/assets/icons/warning.svg":
|
|
235
|
+
"/src/assets/icons/sort-desc.svg": $o,
|
|
236
|
+
"/src/assets/icons/sort.svg": Co,
|
|
237
|
+
"/src/assets/icons/space.svg": Lo,
|
|
238
|
+
"/src/assets/icons/stamp-field.svg": Oo,
|
|
239
|
+
"/src/assets/icons/stop.svg": Eo,
|
|
240
|
+
"/src/assets/icons/success-check.svg": So,
|
|
241
|
+
"/src/assets/icons/tag.svg": jo,
|
|
242
|
+
"/src/assets/icons/text-field.svg": Fo,
|
|
243
|
+
"/src/assets/icons/tick.svg": Ro,
|
|
244
|
+
"/src/assets/icons/title-field.svg": Mo,
|
|
245
|
+
"/src/assets/icons/upload-csv.svg": Bo,
|
|
246
|
+
"/src/assets/icons/warning.svg": Do,
|
|
247
247
|
"/src/assets/icons/webinar-widget.svg": To,
|
|
248
248
|
"/src/assets/icons/white-close.svg": qo,
|
|
249
249
|
"/src/assets/icons/widget-demo-image.svg": Go
|
|
250
|
-
}),
|
|
250
|
+
}), l = (s, t, o, _) => {
|
|
251
251
|
t && s.hasAttribute("fill") && s.getAttribute("fill") !== "none" && s.setAttribute("fill", t), o && s.hasAttribute("stroke") && s.setAttribute("stroke", o), _ && s.hasAttribute("width") && s.setAttribute("width", _.toString()), _ && s.hasAttribute("height") && s.setAttribute("height", _.toString()), Array.from(s.children).forEach((e) => {
|
|
252
|
-
|
|
252
|
+
l(e, t, o);
|
|
253
253
|
});
|
|
254
254
|
}, Qo = /* @__PURE__ */ c.forwardRef((s, t) => {
|
|
255
255
|
const {
|
|
@@ -257,7 +257,7 @@ const Ko = /* @__PURE__ */ Object.assign({
|
|
|
257
257
|
id: _,
|
|
258
258
|
className: e = "",
|
|
259
259
|
onClick: m,
|
|
260
|
-
ariaLabel:
|
|
260
|
+
ariaLabel: g,
|
|
261
261
|
ariaLabelledBy: n,
|
|
262
262
|
ariaDescribedBy: f,
|
|
263
263
|
ariaPressed: b,
|
|
@@ -268,9 +268,9 @@ const Ko = /* @__PURE__ */ Object.assign({
|
|
|
268
268
|
rotation: k = "0",
|
|
269
269
|
size: x,
|
|
270
270
|
shouldStopPropagation: A = !1,
|
|
271
|
-
disabled:
|
|
272
|
-
htmlTitle:
|
|
273
|
-
} = s,
|
|
271
|
+
disabled: w = !1,
|
|
272
|
+
htmlTitle: y
|
|
273
|
+
} = s, I = {
|
|
274
274
|
0: "rotate-0",
|
|
275
275
|
45: "rotate-45",
|
|
276
276
|
90: "rotate-90",
|
|
@@ -279,28 +279,28 @@ const Ko = /* @__PURE__ */ Object.assign({
|
|
|
279
279
|
225: "rotate-[225deg]",
|
|
280
280
|
270: "-rotate-90",
|
|
281
281
|
315: "-rotate-45"
|
|
282
|
-
},
|
|
283
|
-
if (!
|
|
282
|
+
}, v = Ko[`/src/assets/icons/${o}.svg`];
|
|
283
|
+
if (!v)
|
|
284
284
|
return console.error(`Icon "${o}" not found in ICON_MAP.`), null;
|
|
285
|
-
const i = typeof m == "function",
|
|
285
|
+
const i = typeof m == "function", P = g || o, {
|
|
286
286
|
pressProps: N,
|
|
287
|
-
role:
|
|
288
|
-
tabIndex:
|
|
289
|
-
isDisabled:
|
|
287
|
+
role: $,
|
|
288
|
+
tabIndex: C,
|
|
289
|
+
isDisabled: L
|
|
290
290
|
} = Jo({
|
|
291
291
|
isNative: !1,
|
|
292
292
|
onClick: i ? (r) => m?.(r) : void 0,
|
|
293
|
-
disabled: i ?
|
|
293
|
+
disabled: i ? w : !1,
|
|
294
294
|
stopPropagation: A
|
|
295
|
-
}),
|
|
296
|
-
ariaLabel:
|
|
295
|
+
}), O = Ho({
|
|
296
|
+
ariaLabel: P,
|
|
297
297
|
ariaLabelledBy: n,
|
|
298
298
|
ariaDescribedBy: f
|
|
299
|
-
}),
|
|
299
|
+
}), E = i ? {
|
|
300
300
|
...N,
|
|
301
|
-
role:
|
|
302
|
-
tabIndex:
|
|
303
|
-
...
|
|
301
|
+
role: $,
|
|
302
|
+
tabIndex: C,
|
|
303
|
+
...O,
|
|
304
304
|
"aria-pressed": b,
|
|
305
305
|
"aria-expanded": p,
|
|
306
306
|
"aria-controls": d || void 0
|
|
@@ -308,16 +308,16 @@ const Ko = /* @__PURE__ */ Object.assign({
|
|
|
308
308
|
return /* @__PURE__ */ c.createElement("div", a({
|
|
309
309
|
ref: t,
|
|
310
310
|
id: _,
|
|
311
|
-
className: `se-design-svg-wrapper transition-transform duration-250 ease-linear rounded-[3px] ${i ? `${
|
|
311
|
+
className: `se-design-svg-wrapper transition-transform duration-250 ease-linear rounded-[3px] ${i ? `${L ? "opacity-50 cursor-default" : "cursor-pointer focus-outline"}` : ""} ${e} ${I[k]}`,
|
|
312
312
|
"aria-hidden": i ? void 0 : "true",
|
|
313
|
-
title:
|
|
314
|
-
},
|
|
313
|
+
title: y
|
|
314
|
+
}, E, {
|
|
315
315
|
"data-automation-id": s?.automationId
|
|
316
316
|
}), /* @__PURE__ */ c.createElement(Vo, {
|
|
317
|
-
src:
|
|
317
|
+
src: v,
|
|
318
318
|
wrapper: "span",
|
|
319
319
|
beforeInjection: (r) => {
|
|
320
|
-
r.setAttribute("aria-hidden", "true"), r.setAttribute("role", "none"),
|
|
320
|
+
r.setAttribute("aria-hidden", "true"), r.setAttribute("role", "none"), l(r, u, h, x);
|
|
321
321
|
}
|
|
322
322
|
}));
|
|
323
323
|
});
|
package/dist/index6.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index6.js","sources":["../src/components/Icon/index.tsx"],"sourcesContent":["// TODO: `applyAttributesToElement` recursion drops `size` for nested elements (pre-existing).\nimport React from 'react';\nimport { ReactSVG } from 'react-svg';\nimport { getA11yNameAttributes, useAccessiblePress } from '../../utils/a11y';\n\n// Dynamically import icons using Vite's asset handling\nconst ICON_MAP: Record<string, string> = (import.meta as any).glob('/src/assets/icons/*.svg', {\n eager: true,\n query: '?url',\n import: 'default'\n});\n\nexport type RotationTypes = '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n\nexport type IconProps = {\n name: string;\n id?: string;\n className?: string;\n onClick?: (e?: React.MouseEvent<HTMLElement>) => void;\n /**\n * Accessible name when Icon is interactive (onClick is provided).\n * If omitted, we fall back to `name` and warn in development.\n */\n ariaLabel?: string;\n /**\n * ID(s) of visible element(s) that label this Icon when interactive.\n * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n */\n ariaLabelledBy?: string;\n /**\n * ID(s) of element(s) that describe this Icon when interactive (additional context).\n */\n ariaDescribedBy?: string;\n /**\n * Toggle state when Icon is used as a button (e.g., show/hide sidebar).\n * Only applies when `onClick` is provided (interactive icon).\n */\n ariaPressed?: boolean;\n /**\n * Expansion state when Icon controls a collapsible region/panel.\n * Only applies when `onClick` is provided (interactive icon).\n */\n ariaExpanded?: boolean;\n /**\n * ID of the element controlled by this Icon (for aria-controls).\n * Only applies when `onClick` is provided (interactive icon).\n */\n ariaControls?: string;\n fill?: string;\n stroke?: string;\n rotation?: RotationTypes;\n size?: number;\n shouldStopPropagation?: boolean;\n automationId?: string;\n /**\n * Disables the icon interaction while keeping it visible to AT with aria-disabled=\"true\".\n * Only applies when `onClick` is provided (interactive icon).\n */\n disabled?: boolean;\n /**\n * Native HTML title attribute — renders as a browser tooltip on hover.\n * For mouse users only; does not replace ariaLabel for screen readers.\n */\n htmlTitle?: string;\n};\n\nconst applyAttributesToElement = (element: Element, fill?: string, stroke?: string, size?: number) => {\n // Only modify existing attributes\n if (fill && element.hasAttribute('fill')) {\n const currentFill = element.getAttribute('fill');\n // Only update if the current fill is not \"none\"\n if (currentFill !== 'none') {\n element.setAttribute('fill', fill);\n }\n }\n\n if (stroke && element.hasAttribute('stroke')) {\n element.setAttribute('stroke', stroke);\n }\n\n if (size && element.hasAttribute('width')) {\n element.setAttribute('width', size.toString());\n }\n\n if (size && element.hasAttribute('height')) {\n element.setAttribute('height', size.toString());\n }\n\n // Recursively apply to all child elements\n Array.from(element.children).forEach((child) => {\n applyAttributesToElement(child, fill, stroke);\n });\n};\n\nexport const Icon = React.forwardRef<HTMLDivElement, IconProps>((props, ref) => {\n const {\n name = '',\n id,\n className = '',\n onClick,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n ariaPressed,\n ariaExpanded,\n ariaControls,\n fill,\n stroke,\n rotation = '0',\n size,\n shouldStopPropagation = false,\n disabled = false,\n htmlTitle\n } = props;\n const iconRotationClasses = {\n '0': 'rotate-0',\n '45': 'rotate-45',\n '90': 'rotate-90',\n '135': 'rotate-[135deg]',\n '180': 'rotate-180',\n '225': 'rotate-[225deg]',\n '270': '-rotate-90',\n '315': '-rotate-45'\n };\n const src = ICON_MAP[`/src/assets/icons/${name}.svg`];\n\n if (!src) {\n console.error(`Icon \"${name}\" not found in ICON_MAP.`);\n return null;\n }\n\n const isInteractive = typeof onClick === 'function';\n const computedAriaLabel = ariaLabel || name;\n\n if (isInteractive && !ariaLabel && (import.meta as { env?: { DEV?: boolean } }).env?.DEV) {\n // eslint-disable-next-line no-console\n console.warn(\n `[se-design/Icon] Missing ariaLabel for clickable icon \"${name}\". ` +\n `Falling back to aria-label=\"${computedAriaLabel}\".`\n );\n }\n\n const { pressProps, role, tabIndex, isDisabled } = useAccessiblePress({\n isNative: false,\n onClick: isInteractive ? (e: React.MouseEvent<HTMLElement>) => onClick?.(e) : undefined,\n disabled: isInteractive ? disabled : false,\n stopPropagation: shouldStopPropagation\n });\n\n // Compute accessible name/description props with correct precedence (aligns with Button/Link).\n const accessibleNameProps = getA11yNameAttributes({\n ariaLabel: computedAriaLabel,\n ariaLabelledBy,\n ariaDescribedBy\n });\n\n const interactiveProps = isInteractive\n ? {\n ...pressProps,\n role,\n tabIndex,\n ...accessibleNameProps,\n 'aria-pressed': ariaPressed,\n 'aria-expanded': ariaExpanded,\n 'aria-controls': ariaControls || undefined\n }\n : undefined;\n\n return (\n <div\n ref={ref}\n id={id}\n className={`se-design-svg-wrapper transition-transform duration-250 ease-linear rounded-[3px] ${\n isInteractive ? `${isDisabled ? 'opacity-50 cursor-default' : 'cursor-pointer focus-outline'}` : ''\n } ${className} ${iconRotationClasses[rotation]}`}\n aria-hidden={!isInteractive ? 'true' : undefined}\n title={htmlTitle}\n {...interactiveProps}\n data-automation-id={props?.automationId}\n >\n <ReactSVG\n src={src}\n wrapper=\"span\"\n beforeInjection={(svg) => {\n svg.setAttribute('aria-hidden', 'true');\n svg.setAttribute('role', 'none');\n applyAttributesToElement(svg, fill, stroke, size);\n }}\n />\n </div>\n );\n});\n\nIcon.displayName = 'Icon';\n"],"names":["ICON_MAP","import","applyAttributesToElement","element","fill","stroke","size","hasAttribute","getAttribute","setAttribute","toString","Array","from","children","forEach","child","Icon","React","forwardRef","props","ref","name","id","className","onClick","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaPressed","ariaExpanded","ariaControls","rotation","shouldStopPropagation","disabled","htmlTitle","iconRotationClasses","src","console","error","isInteractive","computedAriaLabel","pressProps","role","tabIndex","isDisabled","useAccessiblePress","isNative","e","undefined","stopPropagation","accessibleNameProps","getA11yNameAttributes","interactiveProps","createElement","_extends","title","automationId","ReactSVG","wrapper","beforeInjection","svg","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index6.js","sources":["../src/components/Icon/index.tsx"],"sourcesContent":["// TODO: `applyAttributesToElement` recursion drops `size` for nested elements (pre-existing).\nimport React from 'react';\nimport { ReactSVG } from 'react-svg';\nimport { getA11yNameAttributes, useAccessiblePress } from '../../utils/a11y';\n\n// Dynamically import icons using Vite's asset handling\nconst ICON_MAP: Record<string, string> = (import.meta as any).glob('/src/assets/icons/*.svg', {\n eager: true,\n query: '?url',\n import: 'default'\n});\n\nexport type RotationTypes = '0' | '45' | '90' | '135' | '180' | '225' | '270' | '315';\n\nexport type IconProps = {\n name: string;\n id?: string;\n className?: string;\n onClick?: (e?: React.MouseEvent<HTMLElement>) => void;\n /**\n * Accessible name when Icon is interactive (onClick is provided).\n * If omitted, we fall back to `name` and warn in development.\n */\n ariaLabel?: string;\n /**\n * ID(s) of visible element(s) that label this Icon when interactive.\n * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n */\n ariaLabelledBy?: string;\n /**\n * ID(s) of element(s) that describe this Icon when interactive (additional context).\n */\n ariaDescribedBy?: string;\n /**\n * Toggle state when Icon is used as a button (e.g., show/hide sidebar).\n * Only applies when `onClick` is provided (interactive icon).\n */\n ariaPressed?: boolean;\n /**\n * Expansion state when Icon controls a collapsible region/panel.\n * Only applies when `onClick` is provided (interactive icon).\n */\n ariaExpanded?: boolean;\n /**\n * ID of the element controlled by this Icon (for aria-controls).\n * Only applies when `onClick` is provided (interactive icon).\n */\n ariaControls?: string;\n fill?: string;\n stroke?: string;\n rotation?: RotationTypes;\n size?: number;\n shouldStopPropagation?: boolean;\n automationId?: string;\n /**\n * Disables the icon interaction while keeping it visible to AT with aria-disabled=\"true\".\n * Only applies when `onClick` is provided (interactive icon).\n */\n disabled?: boolean;\n /**\n * Native HTML title attribute — renders as a browser tooltip on hover.\n * For mouse users only; does not replace ariaLabel for screen readers.\n */\n htmlTitle?: string;\n};\n\nconst applyAttributesToElement = (element: Element, fill?: string, stroke?: string, size?: number) => {\n // Only modify existing attributes\n if (fill && element.hasAttribute('fill')) {\n const currentFill = element.getAttribute('fill');\n // Only update if the current fill is not \"none\"\n if (currentFill !== 'none') {\n element.setAttribute('fill', fill);\n }\n }\n\n if (stroke && element.hasAttribute('stroke')) {\n element.setAttribute('stroke', stroke);\n }\n\n if (size && element.hasAttribute('width')) {\n element.setAttribute('width', size.toString());\n }\n\n if (size && element.hasAttribute('height')) {\n element.setAttribute('height', size.toString());\n }\n\n // Recursively apply to all child elements\n Array.from(element.children).forEach((child) => {\n applyAttributesToElement(child, fill, stroke);\n });\n};\n\nexport const Icon = React.forwardRef<HTMLDivElement, IconProps>((props, ref) => {\n const {\n name = '',\n id,\n className = '',\n onClick,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n ariaPressed,\n ariaExpanded,\n ariaControls,\n fill,\n stroke,\n rotation = '0',\n size,\n shouldStopPropagation = false,\n disabled = false,\n htmlTitle\n } = props;\n const iconRotationClasses = {\n '0': 'rotate-0',\n '45': 'rotate-45',\n '90': 'rotate-90',\n '135': 'rotate-[135deg]',\n '180': 'rotate-180',\n '225': 'rotate-[225deg]',\n '270': '-rotate-90',\n '315': '-rotate-45'\n };\n const src = ICON_MAP[`/src/assets/icons/${name}.svg`];\n\n if (!src) {\n console.error(`Icon \"${name}\" not found in ICON_MAP.`);\n return null;\n }\n\n const isInteractive = typeof onClick === 'function';\n const computedAriaLabel = ariaLabel || name;\n\n if (isInteractive && !ariaLabel && (import.meta as { env?: { DEV?: boolean } }).env?.DEV) {\n // eslint-disable-next-line no-console\n console.warn(\n `[se-design/Icon] Missing ariaLabel for clickable icon \"${name}\". ` +\n `Falling back to aria-label=\"${computedAriaLabel}\".`\n );\n }\n\n const { pressProps, role, tabIndex, isDisabled } = useAccessiblePress({\n isNative: false,\n onClick: isInteractive ? (e: React.MouseEvent<HTMLElement>) => onClick?.(e) : undefined,\n disabled: isInteractive ? disabled : false,\n stopPropagation: shouldStopPropagation\n });\n\n // Compute accessible name/description props with correct precedence (aligns with Button/Link).\n const accessibleNameProps = getA11yNameAttributes({\n ariaLabel: computedAriaLabel,\n ariaLabelledBy,\n ariaDescribedBy\n });\n\n const interactiveProps = isInteractive\n ? {\n ...pressProps,\n role,\n tabIndex,\n ...accessibleNameProps,\n 'aria-pressed': ariaPressed,\n 'aria-expanded': ariaExpanded,\n 'aria-controls': ariaControls || undefined\n }\n : undefined;\n\n return (\n <div\n ref={ref}\n id={id}\n className={`se-design-svg-wrapper transition-transform duration-250 ease-linear rounded-[3px] ${\n isInteractive ? `${isDisabled ? 'opacity-50 cursor-default' : 'cursor-pointer focus-outline'}` : ''\n } ${className} ${iconRotationClasses[rotation]}`}\n aria-hidden={!isInteractive ? 'true' : undefined}\n title={htmlTitle}\n {...interactiveProps}\n data-automation-id={props?.automationId}\n >\n <ReactSVG\n src={src}\n wrapper=\"span\"\n beforeInjection={(svg) => {\n svg.setAttribute('aria-hidden', 'true');\n svg.setAttribute('role', 'none');\n applyAttributesToElement(svg, fill, stroke, size);\n }}\n />\n </div>\n );\n});\n\nIcon.displayName = 'Icon';\n"],"names":["ICON_MAP","import","applyAttributesToElement","element","fill","stroke","size","hasAttribute","getAttribute","setAttribute","toString","Array","from","children","forEach","child","Icon","React","forwardRef","props","ref","name","id","className","onClick","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaPressed","ariaExpanded","ariaControls","rotation","shouldStopPropagation","disabled","htmlTitle","iconRotationClasses","src","error","isInteractive","computedAriaLabel","pressProps","role","tabIndex","isDisabled","useAccessiblePress","isNative","e","undefined","stopPropagation","accessibleNameProps","getA11yNameAttributes","interactiveProps","createElement","_extends","title","automationId","ReactSVG","wrapper","beforeInjection","svg","displayName"],"mappings":"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"}
|
package/dist/index60.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index60.js","sources":["../src/components/TimePicker/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { Button } from '../Button';\n\nexport interface TimePickerProps {\n initialHour?: number;\n initialMinute?: number;\n onApply?: (time: { hour: number; minute: number }) => void;\n ctaLabel?: string;\n onClose?: () => void;\n className?: string;\n automationId?: string;\n}\n\nconst ITEM_HEIGHT = 40;\nconst VISIBLE_ITEMS = 7;\nconst BUFFER_ITEMS = 3;\n\nconst HOURS = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, '0'));\nconst MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));\nconst PERIODS: ('AM' | 'PM')[] = ['AM', 'PM'];\n\ninterface ScrollColumnProps {\n items: readonly string[];\n selectedIndex: number;\n onSelect: (index: number) => void;\n automationId?: string;\n}\n\nconst ScrollColumn: React.FC<ScrollColumnProps> = ({ items, selectedIndex, onSelect, automationId = '' }) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const scrollTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n if (containerRef.current) {\n containerRef.current.scrollTo({ top: selectedIndex * ITEM_HEIGHT, behavior: 'smooth' });\n }\n }, [selectedIndex]);\n\n const handleScroll = () => {\n if (!containerRef.current) return;\n\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current);\n\n scrollTimeout.current = setTimeout(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const newIndex = Math.round(container.scrollTop / ITEM_HEIGHT);\n const clampedIndex = Math.max(0, Math.min(items.length - 1, newIndex));\n\n container.scrollTo({ top: clampedIndex * ITEM_HEIGHT, behavior: 'smooth' });\n\n if (clampedIndex !== selectedIndex) onSelect(clampedIndex);\n }, 100);\n };\n\n const handleItemClick = (index: number) => {\n onSelect(index);\n containerRef.current?.scrollTo({ top: index * ITEM_HEIGHT, behavior: 'smooth' });\n };\n\n return (\n <div className=\"w-14\">\n <div\n ref={containerRef}\n className=\"overflow-y-auto [&::-webkit-scrollbar]:hidden\"\n onScroll={handleScroll}\n style={{\n height: VISIBLE_ITEMS * ITEM_HEIGHT,\n paddingTop: BUFFER_ITEMS * ITEM_HEIGHT,\n paddingBottom: BUFFER_ITEMS * ITEM_HEIGHT,\n scrollSnapType: 'y mandatory',\n scrollbarWidth: 'none'\n }}\n >\n {items.map((item, index) => (\n <div\n key={item}\n className={`flex items-center justify-center cursor-pointer select-none transition-colors h-10 ${\n index === selectedIndex\n ? 'text-[var(--color-blue-500)] font-semibold'\n : 'text-[var(--color-gray-700)] hover:text-[var(--color-blue-500)]'\n }`}\n onClick={() => handleItemClick(index)}\n style={{ scrollSnapAlign: 'center' }}\n data-automation-id={`${automationId}-item-${index}`}\n >\n {item}\n </div>\n ))}\n </div>\n </div>\n );\n};\n\nexport const TimePicker: React.FC<TimePickerProps> = ({\n initialHour = 12,\n initialMinute = 0,\n onApply,\n ctaLabel = 'Apply',\n onClose,\n className = '',\n automationId = 'timepicker'\n}) => {\n const [selectedHourIndex, setSelectedHourIndex] = useState(() => {\n if (initialHour === 0) return 11; // 0 = 12 AM\n if (initialHour > 12) return initialHour - 12 - 1; // 13-23 → 1-11 (PM hours)\n return initialHour - 1; // 1-12 → 0-11\n });\n const [selectedMinuteIndex, setSelectedMinuteIndex] = useState(Math.max(0, Math.min(59, initialMinute ?? 0)));\n const [selectedPeriodIndex, setSelectedPeriodIndex] = useState(\n () => (initialHour >= 12 ? 1 : 0) // 0-11 = AM, 12-23 = PM\n );\n\n const handleApply = () => {\n const hourIn24Format = selectedPeriodIndex === 1 ? selectedHourIndex + 12 : selectedHourIndex;\n onApply?.({\n hour: hourIn24Format + 1,\n minute: selectedMinuteIndex\n });\n onClose?.();\n };\n\n return (\n <div\n className={`se-design-timepicker-container w-full min-w-[216px] bg-[var(--color-white)] rounded-xl shadow-md border border-[var(--color-gray-400)] overflow-hidden ${className}`}\n >\n <div className=\"se-design-timepicker-content w-full relative p-4\">\n <div className=\"absolute left-4 right-4 top-1/2 -translate-y-1/2 h-10 bg-[var(--color-blue-50)] rounded-lg pointer-events-none z-0\" />\n <div className=\"flex justify-between gap-2 relative z-10\">\n <ScrollColumn\n items={HOURS}\n selectedIndex={selectedHourIndex}\n onSelect={setSelectedHourIndex}\n automationId={`${automationId}-hours`}\n />\n <div className=\"w-px bg-[var(--color-gray-200)]\" style={{ height: VISIBLE_ITEMS * ITEM_HEIGHT }} />\n <ScrollColumn\n items={MINUTES}\n selectedIndex={selectedMinuteIndex}\n onSelect={setSelectedMinuteIndex}\n automationId={`${automationId}-minutes`}\n />\n <div className=\"w-px bg-[var(--color-gray-200)]\" style={{ height: VISIBLE_ITEMS * ITEM_HEIGHT }} />\n <ScrollColumn\n items={PERIODS}\n selectedIndex={selectedPeriodIndex}\n onSelect={setSelectedPeriodIndex}\n automationId={`${automationId}-periods`}\n />\n </div>\n </div>\n <div className=\"se-design-timepicker-footer flex justify-end p-3 border-t border-[var(--color-gray-200)]\">\n <Button label={ctaLabel} type=\"primary\" onClick={handleApply} automationId={`${automationId}-apply-button`} />\n </div>\n </div>\n );\n};\n"],"names":["ITEM_HEIGHT","VISIBLE_ITEMS","BUFFER_ITEMS","HOURS","Array","from","length","_","i","String","padStart","MINUTES","PERIODS","ScrollColumn","items","selectedIndex","onSelect","automationId","containerRef","useRef","scrollTimeout","useEffect","current","scrollTo","top","behavior","handleScroll","clearTimeout","setTimeout","container","newIndex","Math","round","scrollTop","clampedIndex","max","min","handleItemClick","index","React","createElement","className","ref","onScroll","style","height","paddingTop","paddingBottom","scrollSnapType","scrollbarWidth","map","item","key","onClick","scrollSnapAlign","TimePicker","initialHour","initialMinute","onApply","ctaLabel","onClose","selectedHourIndex","setSelectedHourIndex","useState","selectedMinuteIndex","setSelectedMinuteIndex","selectedPeriodIndex","setSelectedPeriodIndex","handleApply","hourIn24Format","hour","minute","Button","label","type"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index60.js","sources":["../src/components/TimePicker/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport { Button } from '../Button';\n\nexport interface TimePickerProps {\n initialHour?: number;\n initialMinute?: number;\n onApply?: (time: { hour: number; minute: number }) => void;\n ctaLabel?: string;\n onClose?: () => void;\n className?: string;\n automationId?: string;\n}\n\nconst ITEM_HEIGHT = 40;\nconst VISIBLE_ITEMS = 7;\nconst BUFFER_ITEMS = 3;\n\nconst HOURS = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, '0'));\nconst MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));\nconst PERIODS: ('AM' | 'PM')[] = ['AM', 'PM'];\n\ninterface ScrollColumnProps {\n items: readonly string[];\n selectedIndex: number;\n onSelect: (index: number) => void;\n automationId?: string;\n}\n\nconst ScrollColumn: React.FC<ScrollColumnProps> = ({ items, selectedIndex, onSelect, automationId = '' }) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const scrollTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n useEffect(() => {\n if (containerRef.current) {\n containerRef.current.scrollTo({ top: selectedIndex * ITEM_HEIGHT, behavior: 'smooth' });\n }\n }, [selectedIndex]);\n\n const handleScroll = () => {\n if (!containerRef.current) return;\n\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current);\n\n scrollTimeout.current = setTimeout(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const newIndex = Math.round(container.scrollTop / ITEM_HEIGHT);\n const clampedIndex = Math.max(0, Math.min(items.length - 1, newIndex));\n\n container.scrollTo({ top: clampedIndex * ITEM_HEIGHT, behavior: 'smooth' });\n\n if (clampedIndex !== selectedIndex) onSelect(clampedIndex);\n }, 100);\n };\n\n const handleItemClick = (index: number) => {\n onSelect(index);\n containerRef.current?.scrollTo({ top: index * ITEM_HEIGHT, behavior: 'smooth' });\n };\n\n return (\n <div className=\"w-14\">\n <div\n ref={containerRef}\n className=\"overflow-y-auto [&::-webkit-scrollbar]:hidden\"\n onScroll={handleScroll}\n style={{\n height: VISIBLE_ITEMS * ITEM_HEIGHT,\n paddingTop: BUFFER_ITEMS * ITEM_HEIGHT,\n paddingBottom: BUFFER_ITEMS * ITEM_HEIGHT,\n scrollSnapType: 'y mandatory',\n scrollbarWidth: 'none'\n }}\n >\n {items.map((item, index) => (\n <div\n key={item}\n className={`flex items-center justify-center cursor-pointer select-none transition-colors h-10 ${\n index === selectedIndex\n ? 'text-[var(--color-blue-500)] font-semibold'\n : 'text-[var(--color-gray-700)] hover:text-[var(--color-blue-500)]'\n }`}\n onClick={() => handleItemClick(index)}\n style={{ scrollSnapAlign: 'center' }}\n data-automation-id={`${automationId}-item-${index}`}\n >\n {item}\n </div>\n ))}\n </div>\n </div>\n );\n};\n\nexport const TimePicker: React.FC<TimePickerProps> = ({\n initialHour = 12,\n initialMinute = 0,\n onApply,\n ctaLabel = 'Apply',\n onClose,\n className = '',\n automationId = 'timepicker'\n}) => {\n const [selectedHourIndex, setSelectedHourIndex] = useState(() => {\n if (initialHour === 0) return 11; // 0 = 12 AM\n if (initialHour > 12) return initialHour - 12 - 1; // 13-23 → 1-11 (PM hours)\n return initialHour - 1; // 1-12 → 0-11\n });\n const [selectedMinuteIndex, setSelectedMinuteIndex] = useState(Math.max(0, Math.min(59, initialMinute ?? 0)));\n const [selectedPeriodIndex, setSelectedPeriodIndex] = useState(\n () => (initialHour >= 12 ? 1 : 0) // 0-11 = AM, 12-23 = PM\n );\n\n const handleApply = () => {\n const hourIn24Format = selectedPeriodIndex === 1 ? selectedHourIndex + 12 : selectedHourIndex;\n onApply?.({\n hour: hourIn24Format + 1,\n minute: selectedMinuteIndex\n });\n onClose?.();\n };\n\n return (\n <div\n className={`se-design-timepicker-container w-full min-w-[216px] bg-[var(--color-white)] rounded-xl shadow-md border border-[var(--color-gray-400)] overflow-hidden ${className}`}\n >\n <div className=\"se-design-timepicker-content w-full relative p-4\">\n <div className=\"absolute left-4 right-4 top-1/2 -translate-y-1/2 h-10 bg-[var(--color-blue-50)] rounded-lg pointer-events-none z-0\" />\n <div className=\"flex justify-between gap-2 relative z-10\">\n <ScrollColumn\n items={HOURS}\n selectedIndex={selectedHourIndex}\n onSelect={setSelectedHourIndex}\n automationId={`${automationId}-hours`}\n />\n <div className=\"w-px bg-[var(--color-gray-200)]\" style={{ height: VISIBLE_ITEMS * ITEM_HEIGHT }} />\n <ScrollColumn\n items={MINUTES}\n selectedIndex={selectedMinuteIndex}\n onSelect={setSelectedMinuteIndex}\n automationId={`${automationId}-minutes`}\n />\n <div className=\"w-px bg-[var(--color-gray-200)]\" style={{ height: VISIBLE_ITEMS * ITEM_HEIGHT }} />\n <ScrollColumn\n items={PERIODS}\n selectedIndex={selectedPeriodIndex}\n onSelect={setSelectedPeriodIndex}\n automationId={`${automationId}-periods`}\n />\n </div>\n </div>\n <div className=\"se-design-timepicker-footer flex justify-end p-3 border-t border-[var(--color-gray-200)]\">\n <Button label={ctaLabel} type=\"primary\" onClick={handleApply} automationId={`${automationId}-apply-button`} />\n </div>\n </div>\n );\n};\n"],"names":["ITEM_HEIGHT","VISIBLE_ITEMS","BUFFER_ITEMS","HOURS","Array","from","length","_","i","String","padStart","MINUTES","PERIODS","ScrollColumn","items","selectedIndex","onSelect","automationId","containerRef","useRef","scrollTimeout","useEffect","current","scrollTo","top","behavior","handleScroll","setTimeout","container","newIndex","Math","round","scrollTop","clampedIndex","max","min","handleItemClick","index","React","createElement","className","ref","onScroll","style","height","paddingTop","paddingBottom","scrollSnapType","scrollbarWidth","map","item","key","onClick","scrollSnapAlign","TimePicker","initialHour","initialMinute","onApply","ctaLabel","onClose","selectedHourIndex","setSelectedHourIndex","useState","selectedMinuteIndex","setSelectedMinuteIndex","selectedPeriodIndex","setSelectedPeriodIndex","handleApply","hourIn24Format","hour","minute","Button","label","type"],"mappings":"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"}
|
package/dist/index61.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index61.js","sources":["../src/components/InfoTooltip/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { Popover } from '../Popover';\nimport './styles.scss';\n\nexport interface InfoTooltipProps {\n label: string;\n children: React.ReactNode;\n iconColor?: string;\n /**\n * Background color shown on hover. Defaults to var(--color-blue-200).\n */\n hoverBackgroundColor?: string;\n isDisabled?: boolean;\n /**\n * Remove padding from tooltip wrapper (useful for precise alignment)\n */\n noPadding?: boolean;\n}\n\nexport const InfoTooltip = ({\n label,\n children,\n iconColor = '',\n hoverBackgroundColor,\n isDisabled = false,\n noPadding = false\n}: InfoTooltipProps) => {\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n // Show tooltip on hover OR focus (for keyboard accessibility)\n const isOpen = isHovered || isFocused;\n\n // Global Escape key handler (W3C WAI-ARIA tooltip pattern requirement)\n const handleEscapeKey = useCallback((event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setIsHovered(false);\n setIsFocused(false);\n // Prevent other handlers (e.g., modal) from also closing - \"innermost first\" pattern\n event.stopImmediatePropagation();\n }\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('keydown', handleEscapeKey);\n return () => document.removeEventListener('keydown', handleEscapeKey);\n }\n }, [isOpen, handleEscapeKey]);\n\n const interactionHandlers = {\n onMouseEnter: () => setIsHovered(true),\n onMouseLeave: () => setIsHovered(false),\n onFocus: (event: React.FocusEvent<HTMLDivElement>) => {\n const focusTarget = event.target as HTMLElement;\n if (focusTarget.matches(':focus-visible')) {\n setIsFocused(true);\n }\n },\n onBlur: () => setIsFocused(false)\n };\n\n return (\n <div\n className={isDisabled ? 'se-design-info-tooltip-wrapper-disabled' : ''}\n {...(isDisabled ? {} : interactionHandlers)}\n >\n <Popover\n position={'bottom-center'}\n isPopoverOpen={isOpen}\n onPopoverToggle={(open) => {\n // Sync popover state changes (e.g., Escape key) back to component state\n if (!open) {\n setIsHovered(false);\n setIsFocused(false);\n }\n }}\n renderPopoverSrcElement={() => (\n <div\n className={`se-design-info-tooltip-src ${noPadding ? 'no-padding' : ''} ${\n isDisabled ? 'se-design-info-tooltip-disabled' : ''\n }`}\n style={\n {\n '--info-tooltip-icon-color': iconColor,\n ...(hoverBackgroundColor ? { '--info-tooltip-hover-bg': hoverBackgroundColor } : {}),\n cursor: isDisabled ? 'not-allowed' : 'pointer'\n } as React.CSSProperties\n }\n >\n {children}\n </div>\n )}\n renderPopoverContents={() => (\n <div className=\"se-design-info-tooltip-content\" data-automation-id=\"se-design-info-tooltip-content\">\n {label}\n </div>\n )}\n isWithPortal\n noBorder\n disableClickToggle\n popoverContentStyleProperty={{\n zIndex: 2000,\n backgroundColor: ''\n }}\n />\n </div>\n );\n};\n"],"names":["InfoTooltip","label","children","iconColor","hoverBackgroundColor","isDisabled","noPadding","isHovered","setIsHovered","useState","isFocused","setIsFocused","isOpen","handleEscapeKey","useCallback","event","key","stopImmediatePropagation","useEffect","
|
|
1
|
+
{"version":3,"file":"index61.js","sources":["../src/components/InfoTooltip/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { Popover } from '../Popover';\nimport './styles.scss';\n\nexport interface InfoTooltipProps {\n label: string;\n children: React.ReactNode;\n iconColor?: string;\n /**\n * Background color shown on hover. Defaults to var(--color-blue-200).\n */\n hoverBackgroundColor?: string;\n isDisabled?: boolean;\n /**\n * Remove padding from tooltip wrapper (useful for precise alignment)\n */\n noPadding?: boolean;\n}\n\nexport const InfoTooltip = ({\n label,\n children,\n iconColor = '',\n hoverBackgroundColor,\n isDisabled = false,\n noPadding = false\n}: InfoTooltipProps) => {\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n // Show tooltip on hover OR focus (for keyboard accessibility)\n const isOpen = isHovered || isFocused;\n\n // Global Escape key handler (W3C WAI-ARIA tooltip pattern requirement)\n const handleEscapeKey = useCallback((event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n setIsHovered(false);\n setIsFocused(false);\n // Prevent other handlers (e.g., modal) from also closing - \"innermost first\" pattern\n event.stopImmediatePropagation();\n }\n }, []);\n\n useEffect(() => {\n if (isOpen) {\n document.addEventListener('keydown', handleEscapeKey);\n return () => document.removeEventListener('keydown', handleEscapeKey);\n }\n }, [isOpen, handleEscapeKey]);\n\n const interactionHandlers = {\n onMouseEnter: () => setIsHovered(true),\n onMouseLeave: () => setIsHovered(false),\n onFocus: (event: React.FocusEvent<HTMLDivElement>) => {\n const focusTarget = event.target as HTMLElement;\n if (focusTarget.matches(':focus-visible')) {\n setIsFocused(true);\n }\n },\n onBlur: () => setIsFocused(false)\n };\n\n return (\n <div\n className={isDisabled ? 'se-design-info-tooltip-wrapper-disabled' : ''}\n {...(isDisabled ? {} : interactionHandlers)}\n >\n <Popover\n position={'bottom-center'}\n isPopoverOpen={isOpen}\n onPopoverToggle={(open) => {\n // Sync popover state changes (e.g., Escape key) back to component state\n if (!open) {\n setIsHovered(false);\n setIsFocused(false);\n }\n }}\n renderPopoverSrcElement={() => (\n <div\n className={`se-design-info-tooltip-src ${noPadding ? 'no-padding' : ''} ${\n isDisabled ? 'se-design-info-tooltip-disabled' : ''\n }`}\n style={\n {\n '--info-tooltip-icon-color': iconColor,\n ...(hoverBackgroundColor ? { '--info-tooltip-hover-bg': hoverBackgroundColor } : {}),\n cursor: isDisabled ? 'not-allowed' : 'pointer'\n } as React.CSSProperties\n }\n >\n {children}\n </div>\n )}\n renderPopoverContents={() => (\n <div className=\"se-design-info-tooltip-content\" data-automation-id=\"se-design-info-tooltip-content\">\n {label}\n </div>\n )}\n isWithPortal\n noBorder\n disableClickToggle\n popoverContentStyleProperty={{\n zIndex: 2000,\n backgroundColor: ''\n }}\n />\n </div>\n );\n};\n"],"names":["InfoTooltip","label","children","iconColor","hoverBackgroundColor","isDisabled","noPadding","isHovered","setIsHovered","useState","isFocused","setIsFocused","isOpen","handleEscapeKey","useCallback","event","key","stopImmediatePropagation","useEffect","addEventListener","document","removeEventListener","interactionHandlers","onMouseEnter","onMouseLeave","onFocus","focusTarget","target","matches","onBlur","React","createElement","_extends","className","Popover","position","isPopoverOpen","onPopoverToggle","open","renderPopoverSrcElement","style","cursor","renderPopoverContents","isWithPortal","noBorder","disableClickToggle","popoverContentStyleProperty","zIndex","backgroundColor"],"mappings":";;;;;;;;;;;;AAmBO,MAAMA,IAAcA,CAAC;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,sBAAAA;AAAAA,EACAC,YAAAA,IAAa;AAAA,EACbC,WAAAA,IAAY;AACI,MAAM;AACtB,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAG1CG,IAASL,KAAaG,GAGtBG,IAAkBC,EAAY,CAACC,MAAyB;AACxDA,IAAAA,EAAMC,QAAQ,aAChBR,EAAa,EAAK,GAClBG,EAAa,EAAK,GAElBI,EAAME,yBAAyB;AAAA,EAEnC,GAAG,CAAE,CAAA;AAELC,EAAAA,EAAU,MAAM;AACd,QAAIN;AACOO,sBAAAA,iBAAiB,WAAWN,CAAe,GAC7C,MAAMO,SAASC,oBAAoB,WAAWR,CAAe;AAAA,EACtE,GACC,CAACD,GAAQC,CAAe,CAAC;AAE5B,QAAMS,IAAsB;AAAA,IAC1BC,cAAcA,MAAMf,EAAa,EAAI;AAAA,IACrCgB,cAAcA,MAAMhB,EAAa,EAAK;AAAA,IACtCiB,SAASA,CAACV,MAA4C;AAEhDW,MADgBX,EAAMY,OACVC,QAAQ,gBAAgB,KACtCjB,EAAa,EAAI;AAAA,IAErB;AAAA,IACAkB,QAAQA,MAAMlB,EAAa,EAAK;AAAA,EAAA;AAIhCmB,SAAAA,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACEC,WAAW5B,IAAa,4CAA4C;AAAA,EAAA,GAC/DA,IAAa,CAAA,IAAKiB,CAAmB,GAE1CQ,gBAAAA,EAAAC,cAACG,GAAO;AAAA,IACNC,UAAU;AAAA,IACVC,eAAexB;AAAAA,IACfyB,iBAAkBC,CAASA,MAAA;AAEzB,MAAKA,MACH9B,EAAa,EAAK,GAClBG,EAAa,EAAK;AAAA,IAEtB;AAAA,IACA4B,yBAAyBA,MACvBR,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MACEE,WAAW,8BAA8B3B,IAAY,eAAe,EAAE,IACpED,IAAa,oCAAoC,EAAE;AAAA,MAErDmC,OACE;AAAA,QACE,6BAA6BrC;AAAAA,QAC7B,GAAIC,IAAuB;AAAA,UAAE,2BAA2BA;AAAAA,QAAAA,IAAyB,CAAC;AAAA,QAClFqC,QAAQpC,IAAa,gBAAgB;AAAA,MACvC;AAAA,OAGDH,CACE;AAAA,IAEPwC,uBAAuBA,MACrBX,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKE,WAAU;AAAA,MAAiC,sBAAmB;AAAA,OAChEhC,CACE;AAAA,IAEP0C,cAAY;AAAA,IACZC,UAAQ;AAAA,IACRC,oBAAkB;AAAA,IAClBC,6BAA6B;AAAA,MAC3BC,QAAQ;AAAA,MACRC,iBAAiB;AAAA,IACnB;AAAA,EACD,CAAA,CACE;AAET;"}
|
package/dist/index62.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index62.js","sources":["../src/components/OnboardingTour/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef, useState, useCallback } from 'react';\n\nimport { Button } from 'components/Button';\nimport { Tooltip } from 'components/Tooltip';\n\nimport './style.scss';\n\nconst TOUR_NAVIGATION_STEPS = {\n gotIt: 'got_it',\n finish: 'finish',\n next: 'next',\n back: 'back'\n};\n\nexport interface TourStep {\n targetElementSelector: string;\n targetElementContainerSelector?: string;\n targetElementGap?: {\n horizontal: number;\n vertical: number;\n };\n tooltipPosition?:\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'left-top'\n | 'left-center'\n | 'left-bottom'\n | 'right-top'\n | 'right-center'\n | 'right-bottom';\n content: {\n title?: string;\n description?: string;\n illustration?: any;\n };\n tourMixPanelHandler?: (data: { user_path: string; action_type: string }) => void;\n}\n\nexport interface OnboardingTourProps {\n steps: TourStep[];\n screenBaseElementSelector: string;\n handleCloseProductTour: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n tourType?: string;\n highlightBorderRadius?: number;\n automationId?: string;\n labels?: {\n next: string;\n gotIt: string;\n finish: string;\n skip: string;\n stepInfo: string;\n };\n}\n\nexport const OnboardingTour: FC<OnboardingTourProps> = ({\n steps = [],\n screenBaseElementSelector = '',\n handleCloseProductTour,\n tourType = '',\n automationId = 'onboarding-tour',\n highlightBorderRadius = 6,\n labels\n}) => {\n const [currentStep, setCurrentStep] = useState(0);\n const overlayRef = useRef<HTMLDivElement>(null);\n const blockerRef = useRef<HTMLDivElement>(null);\n\n const {\n next = 'Next',\n gotIt = 'Got It',\n finish = 'Finish',\n skip = 'Skip tour',\n stepInfo = 'Step {step} of {total}'\n } = labels || {};\n\n const parentScreenElement = document.querySelector(screenBaseElementSelector) as HTMLElement | null;\n\n const clipTargetElementAndPositionTooltip = useCallback(() => {\n let timerId: any;\n\n if (currentStep >= steps.length) {\n return timerId;\n }\n\n // get the target element\n const initialTargetElement = document.querySelector(\n steps[currentStep]?.targetElementContainerSelector\n ? steps[currentStep].targetElementContainerSelector\n : steps[currentStep]?.targetElementSelector\n ) as HTMLElement | null;\n\n if (!initialTargetElement) {\n return timerId;\n }\n\n const initialTargetArea = initialTargetElement.getBoundingClientRect();\n\n // check whether target element is fully visible in viewport\n const isFullyVisible =\n initialTargetArea.top >= 0 &&\n initialTargetArea.left >= 0 &&\n initialTargetArea.bottom <= window.innerHeight &&\n initialTargetArea.right <= window.innerWidth;\n\n if (!isFullyVisible) {\n if (initialTargetArea.top < 0) {\n initialTargetElement.scrollIntoView({ behavior: 'auto', block: 'start' });\n } else if (initialTargetArea.bottom > window.innerHeight) {\n initialTargetElement.scrollIntoView({ behavior: 'auto', block: 'end' });\n }\n }\n\n // if the target element is visible, then clip the target element and position the tooltip\n timerId = setTimeout(() => {\n const targetElement = document.querySelector(steps[currentStep]?.targetElementSelector) as HTMLElement | null;\n\n if (!targetElement || !overlayRef.current || !blockerRef.current) {\n return;\n }\n\n const targetArea = targetElement.getBoundingClientRect();\n\n const documentHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);\n\n // Update overlay dimensions and calculate target element area to focus\n overlayRef.current.style.height = `${documentHeight}px`;\n\n // Providing gap around target element\n const targetElementGap = steps[currentStep]?.targetElementGap || { horizontal: 0, vertical: 0 };\n\n // clip the target element with rounded corners\n const borderRadius = highlightBorderRadius * 2;\n const left = targetArea.left - targetElementGap.horizontal;\n const top = targetArea.top + window.scrollY - targetElementGap.vertical;\n const right = targetArea.right + targetElementGap.horizontal;\n const bottom = targetArea.bottom + window.scrollY + targetElementGap.vertical;\n const width = right - left;\n const height = bottom - top;\n const documentWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);\n\n // Create SVG mask with rounded rectangle hole\n const svgMask = encodeURIComponent(`\n <svg width=\"${documentWidth}\" height=\"${documentHeight}\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <mask id=\"highlight-mask-${currentStep}\">\n <rect x=\"0\" y=\"0\" width=\"${documentWidth}\" height=\"${documentHeight}\" fill=\"white\"/>\n <rect x=\"${left}\" y=\"${top}\" width=\"${width}\" height=\"${height}\" rx=\"${borderRadius}\" ry=\"${borderRadius}\" fill=\"black\"/>\n </mask>\n </defs>\n </svg>\n `);\n\n // Apply created mask to the overlay\n overlayRef.current.style.maskImage = `url(\"data:image/svg+xml,${svgMask}#highlight-mask-${currentStep}\")`;\n overlayRef.current.style.webkitMaskImage = `url(\"data:image/svg+xml,${svgMask}#highlight-mask-${currentStep}\")`;\n\n // Position blocker over clipped area to avoid clicks on the target element\n blockerRef.current.style.top = `${targetArea.top}px`;\n blockerRef.current.style.left = `${targetArea.left}px`;\n blockerRef.current.style.width = `${targetArea.width}px`;\n blockerRef.current.style.height = `${targetArea.height}px`;\n blockerRef.current.style.borderRadius = `${highlightBorderRadius}px`;\n }, 50);\n\n return timerId;\n }, [currentStep, steps]);\n\n const handleSkipTour = useCallback(() => {\n handleCloseProductTour();\n if (parentScreenElement) {\n parentScreenElement.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }, [handleCloseProductTour, parentScreenElement]);\n\n const handleNextClick = useCallback(\n (e?: React.MouseEvent<HTMLButtonElement>) => {\n e?.preventDefault();\n e?.stopPropagation();\n\n if (currentStep < steps.length - 1) {\n setCurrentStep((prev) => prev + 1);\n } else {\n handleCloseProductTour(e);\n if (parentScreenElement) {\n parentScreenElement.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }\n steps[currentStep]?.tourMixPanelHandler?.({\n user_path: tourType,\n action_type: `clicked_${\n currentStep === steps.length - 1\n ? steps.length === 1\n ? TOUR_NAVIGATION_STEPS.gotIt\n : TOUR_NAVIGATION_STEPS.finish\n : TOUR_NAVIGATION_STEPS.next\n }`\n });\n },\n [currentStep, steps, handleCloseProductTour, tourType, parentScreenElement]\n );\n\n const handlePrevClick = useCallback(() => {\n if (currentStep > 0) {\n setCurrentStep((prev) => prev - 1);\n }\n steps[currentStep]?.tourMixPanelHandler?.({\n user_path: tourType,\n action_type: `clicked_${TOUR_NAVIGATION_STEPS.back}`\n });\n }, [currentStep, steps, tourType]);\n\n const handleKeyPress = useCallback(\n (e: KeyboardEvent) => {\n if (e.keyCode === 37 || e.key === 'ArrowLeft') {\n // for previous navigation\n if (currentStep > 0) {\n handlePrevClick();\n }\n }\n if (e.keyCode === 39 || e.key === 'ArrowRight') {\n // for next navigation\n handleNextClick();\n }\n },\n [currentStep, handleNextClick, handlePrevClick]\n );\n\n useEffect(() => {\n // Adding event listener for keydown\n window.addEventListener('keydown', handleKeyPress);\n\n return () => {\n window.removeEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n useEffect(() => {\n let timerId: any;\n if (currentStep < steps.length) {\n timerId = clipTargetElementAndPositionTooltip();\n }\n\n return () => {\n if (timerId) {\n clearTimeout(timerId);\n }\n };\n }, [currentStep, steps, clipTargetElementAndPositionTooltip]);\n\n // To prevent scroll when tour is active\n useEffect(() => {\n if (currentStep < steps.length && overlayRef.current) {\n const overlay = overlayRef.current;\n\n const preventScroll = (e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n overlay.addEventListener('wheel', preventScroll, { passive: false });\n overlay.addEventListener('touchmove', preventScroll, { passive: false });\n overlay.addEventListener('scroll', preventScroll, { passive: false });\n\n return () => {\n overlay.removeEventListener('wheel', preventScroll);\n overlay.removeEventListener('touchmove', preventScroll);\n overlay.removeEventListener('scroll', preventScroll);\n };\n }\n }, [currentStep]);\n\n if (!steps || steps.length === 0) {\n return null;\n }\n\n return (\n <>\n <div\n className=\"se-design-onboarding-tour-overlay\"\n ref={overlayRef}\n data-automation-id={`${automationId}-overlay`}\n />\n\n <Tooltip\n content={\n <div className=\"se-design-onboarding-tour-tooltip-content\">\n {steps[currentStep]?.content?.illustration && (\n <img\n src={steps[currentStep].content.illustration}\n className=\"se-design-onboarding-tour-illustration\"\n alt=\"illustration\"\n />\n )}\n <div className=\"se-design-onboarding-tour-content\">\n {steps[currentStep]?.content?.title && (\n <p className=\"se-design-onboarding-tour-title\">{steps[currentStep].content.title}</p>\n )}\n {steps[currentStep]?.content?.description && (\n <p className=\"se-design-onboarding-tour-description\">{steps[currentStep].content.description}</p>\n )}\n </div>\n\n <div className=\"se-design-onboarding-tour-actions\">\n {steps.length > 1 && (\n <span className=\"steps\">\n {stepInfo.replace('{step}', `${currentStep + 1}`).replace('{total}', `${steps.length}`)}\n </span>\n )}\n <div className=\"btns-container\">\n {currentStep !== steps.length - 1 && (\n <Button\n theme=\"white\"\n type=\"link\"\n label={skip}\n automationId={`${automationId}-skip-button`}\n onClick={handleSkipTour}\n />\n )}\n <Button\n theme=\"white\"\n type=\"primary\"\n size=\"sm\"\n label={currentStep === steps.length - 1 ? (steps.length === 1 ? gotIt : finish) : next}\n automationId={`${automationId}-next-button`}\n onClick={handleNextClick}\n />\n </div>\n </div>\n </div>\n }\n tooltipSrc={<div className=\"blocker\" ref={blockerRef} />}\n tooltipSrcRef={blockerRef as React.RefObject<HTMLDivElement>}\n position={steps[currentStep]?.tooltipPosition || 'bottom-center'}\n tooltipOffset={16}\n displayOn=\"always-on\"\n isWithPortal={true}\n maxWidth={384}\n />\n </>\n );\n};\n"],"names":["React__default","useState","useRef","useCallback","useEffect","Button","Tooltip","TOUR_NAVIGATION_STEPS","gotIt","finish","next","back","OnboardingTour","steps","screenBaseElementSelector","handleCloseProductTour","tourType","automationId","highlightBorderRadius","labels","currentStep","setCurrentStep","overlayRef","blockerRef","skip","stepInfo","parentScreenElement","document","querySelector","clipTargetElementAndPositionTooltip","timerId","length","initialTargetElement","targetElementContainerSelector","targetElementSelector","initialTargetArea","getBoundingClientRect","top","left","bottom","window","innerHeight","right","innerWidth","scrollIntoView","behavior","block","setTimeout","targetElement","current","targetArea","documentHeight","Math","max","documentElement","scrollHeight","body","style","height","targetElementGap","horizontal","vertical","borderRadius","scrollY","width","documentWidth","scrollWidth","svgMask","encodeURIComponent","maskImage","webkitMaskImage","handleSkipTour","scrollTo","handleNextClick","e","preventDefault","stopPropagation","prev","tourMixPanelHandler","user_path","action_type","handlePrevClick","handleKeyPress","keyCode","key","addEventListener","removeEventListener","clearTimeout","overlay","preventScroll","passive","createElement","React","Fragment","className","ref","content","illustration","src","alt","title","description","replace","theme","type","label","onClick","size","tooltipSrc","tooltipSrcRef","position","tooltipPosition","tooltipOffset","displayOn","isWithPortal","maxWidth"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index62.js","sources":["../src/components/OnboardingTour/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useRef, useState, useCallback } from 'react';\n\nimport { Button } from 'components/Button';\nimport { Tooltip } from 'components/Tooltip';\n\nimport './style.scss';\n\nconst TOUR_NAVIGATION_STEPS = {\n gotIt: 'got_it',\n finish: 'finish',\n next: 'next',\n back: 'back'\n};\n\nexport interface TourStep {\n targetElementSelector: string;\n targetElementContainerSelector?: string;\n targetElementGap?: {\n horizontal: number;\n vertical: number;\n };\n tooltipPosition?:\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'left-top'\n | 'left-center'\n | 'left-bottom'\n | 'right-top'\n | 'right-center'\n | 'right-bottom';\n content: {\n title?: string;\n description?: string;\n illustration?: any;\n };\n tourMixPanelHandler?: (data: { user_path: string; action_type: string }) => void;\n}\n\nexport interface OnboardingTourProps {\n steps: TourStep[];\n screenBaseElementSelector: string;\n handleCloseProductTour: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n tourType?: string;\n highlightBorderRadius?: number;\n automationId?: string;\n labels?: {\n next: string;\n gotIt: string;\n finish: string;\n skip: string;\n stepInfo: string;\n };\n}\n\nexport const OnboardingTour: FC<OnboardingTourProps> = ({\n steps = [],\n screenBaseElementSelector = '',\n handleCloseProductTour,\n tourType = '',\n automationId = 'onboarding-tour',\n highlightBorderRadius = 6,\n labels\n}) => {\n const [currentStep, setCurrentStep] = useState(0);\n const overlayRef = useRef<HTMLDivElement>(null);\n const blockerRef = useRef<HTMLDivElement>(null);\n\n const {\n next = 'Next',\n gotIt = 'Got It',\n finish = 'Finish',\n skip = 'Skip tour',\n stepInfo = 'Step {step} of {total}'\n } = labels || {};\n\n const parentScreenElement = document.querySelector(screenBaseElementSelector) as HTMLElement | null;\n\n const clipTargetElementAndPositionTooltip = useCallback(() => {\n let timerId: any;\n\n if (currentStep >= steps.length) {\n return timerId;\n }\n\n // get the target element\n const initialTargetElement = document.querySelector(\n steps[currentStep]?.targetElementContainerSelector\n ? steps[currentStep].targetElementContainerSelector\n : steps[currentStep]?.targetElementSelector\n ) as HTMLElement | null;\n\n if (!initialTargetElement) {\n return timerId;\n }\n\n const initialTargetArea = initialTargetElement.getBoundingClientRect();\n\n // check whether target element is fully visible in viewport\n const isFullyVisible =\n initialTargetArea.top >= 0 &&\n initialTargetArea.left >= 0 &&\n initialTargetArea.bottom <= window.innerHeight &&\n initialTargetArea.right <= window.innerWidth;\n\n if (!isFullyVisible) {\n if (initialTargetArea.top < 0) {\n initialTargetElement.scrollIntoView({ behavior: 'auto', block: 'start' });\n } else if (initialTargetArea.bottom > window.innerHeight) {\n initialTargetElement.scrollIntoView({ behavior: 'auto', block: 'end' });\n }\n }\n\n // if the target element is visible, then clip the target element and position the tooltip\n timerId = setTimeout(() => {\n const targetElement = document.querySelector(steps[currentStep]?.targetElementSelector) as HTMLElement | null;\n\n if (!targetElement || !overlayRef.current || !blockerRef.current) {\n return;\n }\n\n const targetArea = targetElement.getBoundingClientRect();\n\n const documentHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);\n\n // Update overlay dimensions and calculate target element area to focus\n overlayRef.current.style.height = `${documentHeight}px`;\n\n // Providing gap around target element\n const targetElementGap = steps[currentStep]?.targetElementGap || { horizontal: 0, vertical: 0 };\n\n // clip the target element with rounded corners\n const borderRadius = highlightBorderRadius * 2;\n const left = targetArea.left - targetElementGap.horizontal;\n const top = targetArea.top + window.scrollY - targetElementGap.vertical;\n const right = targetArea.right + targetElementGap.horizontal;\n const bottom = targetArea.bottom + window.scrollY + targetElementGap.vertical;\n const width = right - left;\n const height = bottom - top;\n const documentWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);\n\n // Create SVG mask with rounded rectangle hole\n const svgMask = encodeURIComponent(`\n <svg width=\"${documentWidth}\" height=\"${documentHeight}\" xmlns=\"http://www.w3.org/2000/svg\">\n <defs>\n <mask id=\"highlight-mask-${currentStep}\">\n <rect x=\"0\" y=\"0\" width=\"${documentWidth}\" height=\"${documentHeight}\" fill=\"white\"/>\n <rect x=\"${left}\" y=\"${top}\" width=\"${width}\" height=\"${height}\" rx=\"${borderRadius}\" ry=\"${borderRadius}\" fill=\"black\"/>\n </mask>\n </defs>\n </svg>\n `);\n\n // Apply created mask to the overlay\n overlayRef.current.style.maskImage = `url(\"data:image/svg+xml,${svgMask}#highlight-mask-${currentStep}\")`;\n overlayRef.current.style.webkitMaskImage = `url(\"data:image/svg+xml,${svgMask}#highlight-mask-${currentStep}\")`;\n\n // Position blocker over clipped area to avoid clicks on the target element\n blockerRef.current.style.top = `${targetArea.top}px`;\n blockerRef.current.style.left = `${targetArea.left}px`;\n blockerRef.current.style.width = `${targetArea.width}px`;\n blockerRef.current.style.height = `${targetArea.height}px`;\n blockerRef.current.style.borderRadius = `${highlightBorderRadius}px`;\n }, 50);\n\n return timerId;\n }, [currentStep, steps]);\n\n const handleSkipTour = useCallback(() => {\n handleCloseProductTour();\n if (parentScreenElement) {\n parentScreenElement.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }, [handleCloseProductTour, parentScreenElement]);\n\n const handleNextClick = useCallback(\n (e?: React.MouseEvent<HTMLButtonElement>) => {\n e?.preventDefault();\n e?.stopPropagation();\n\n if (currentStep < steps.length - 1) {\n setCurrentStep((prev) => prev + 1);\n } else {\n handleCloseProductTour(e);\n if (parentScreenElement) {\n parentScreenElement.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }\n steps[currentStep]?.tourMixPanelHandler?.({\n user_path: tourType,\n action_type: `clicked_${\n currentStep === steps.length - 1\n ? steps.length === 1\n ? TOUR_NAVIGATION_STEPS.gotIt\n : TOUR_NAVIGATION_STEPS.finish\n : TOUR_NAVIGATION_STEPS.next\n }`\n });\n },\n [currentStep, steps, handleCloseProductTour, tourType, parentScreenElement]\n );\n\n const handlePrevClick = useCallback(() => {\n if (currentStep > 0) {\n setCurrentStep((prev) => prev - 1);\n }\n steps[currentStep]?.tourMixPanelHandler?.({\n user_path: tourType,\n action_type: `clicked_${TOUR_NAVIGATION_STEPS.back}`\n });\n }, [currentStep, steps, tourType]);\n\n const handleKeyPress = useCallback(\n (e: KeyboardEvent) => {\n if (e.keyCode === 37 || e.key === 'ArrowLeft') {\n // for previous navigation\n if (currentStep > 0) {\n handlePrevClick();\n }\n }\n if (e.keyCode === 39 || e.key === 'ArrowRight') {\n // for next navigation\n handleNextClick();\n }\n },\n [currentStep, handleNextClick, handlePrevClick]\n );\n\n useEffect(() => {\n // Adding event listener for keydown\n window.addEventListener('keydown', handleKeyPress);\n\n return () => {\n window.removeEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n useEffect(() => {\n let timerId: any;\n if (currentStep < steps.length) {\n timerId = clipTargetElementAndPositionTooltip();\n }\n\n return () => {\n if (timerId) {\n clearTimeout(timerId);\n }\n };\n }, [currentStep, steps, clipTargetElementAndPositionTooltip]);\n\n // To prevent scroll when tour is active\n useEffect(() => {\n if (currentStep < steps.length && overlayRef.current) {\n const overlay = overlayRef.current;\n\n const preventScroll = (e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n overlay.addEventListener('wheel', preventScroll, { passive: false });\n overlay.addEventListener('touchmove', preventScroll, { passive: false });\n overlay.addEventListener('scroll', preventScroll, { passive: false });\n\n return () => {\n overlay.removeEventListener('wheel', preventScroll);\n overlay.removeEventListener('touchmove', preventScroll);\n overlay.removeEventListener('scroll', preventScroll);\n };\n }\n }, [currentStep]);\n\n if (!steps || steps.length === 0) {\n return null;\n }\n\n return (\n <>\n <div\n className=\"se-design-onboarding-tour-overlay\"\n ref={overlayRef}\n data-automation-id={`${automationId}-overlay`}\n />\n\n <Tooltip\n content={\n <div className=\"se-design-onboarding-tour-tooltip-content\">\n {steps[currentStep]?.content?.illustration && (\n <img\n src={steps[currentStep].content.illustration}\n className=\"se-design-onboarding-tour-illustration\"\n alt=\"illustration\"\n />\n )}\n <div className=\"se-design-onboarding-tour-content\">\n {steps[currentStep]?.content?.title && (\n <p className=\"se-design-onboarding-tour-title\">{steps[currentStep].content.title}</p>\n )}\n {steps[currentStep]?.content?.description && (\n <p className=\"se-design-onboarding-tour-description\">{steps[currentStep].content.description}</p>\n )}\n </div>\n\n <div className=\"se-design-onboarding-tour-actions\">\n {steps.length > 1 && (\n <span className=\"steps\">\n {stepInfo.replace('{step}', `${currentStep + 1}`).replace('{total}', `${steps.length}`)}\n </span>\n )}\n <div className=\"btns-container\">\n {currentStep !== steps.length - 1 && (\n <Button\n theme=\"white\"\n type=\"link\"\n label={skip}\n automationId={`${automationId}-skip-button`}\n onClick={handleSkipTour}\n />\n )}\n <Button\n theme=\"white\"\n type=\"primary\"\n size=\"sm\"\n label={currentStep === steps.length - 1 ? (steps.length === 1 ? gotIt : finish) : next}\n automationId={`${automationId}-next-button`}\n onClick={handleNextClick}\n />\n </div>\n </div>\n </div>\n }\n tooltipSrc={<div className=\"blocker\" ref={blockerRef} />}\n tooltipSrcRef={blockerRef as React.RefObject<HTMLDivElement>}\n position={steps[currentStep]?.tooltipPosition || 'bottom-center'}\n tooltipOffset={16}\n displayOn=\"always-on\"\n isWithPortal={true}\n maxWidth={384}\n />\n </>\n );\n};\n"],"names":["React__default","useState","useRef","useCallback","useEffect","Button","Tooltip","TOUR_NAVIGATION_STEPS","gotIt","finish","next","back","OnboardingTour","steps","screenBaseElementSelector","handleCloseProductTour","tourType","automationId","highlightBorderRadius","labels","currentStep","setCurrentStep","overlayRef","blockerRef","skip","stepInfo","parentScreenElement","document","querySelector","clipTargetElementAndPositionTooltip","timerId","length","initialTargetElement","targetElementContainerSelector","targetElementSelector","initialTargetArea","getBoundingClientRect","top","left","bottom","window","innerHeight","right","innerWidth","scrollIntoView","behavior","block","setTimeout","targetElement","current","targetArea","documentHeight","Math","max","documentElement","scrollHeight","body","style","height","targetElementGap","horizontal","vertical","borderRadius","scrollY","width","documentWidth","scrollWidth","svgMask","encodeURIComponent","maskImage","webkitMaskImage","handleSkipTour","scrollTo","handleNextClick","e","preventDefault","stopPropagation","prev","tourMixPanelHandler","user_path","action_type","handlePrevClick","handleKeyPress","keyCode","key","addEventListener","removeEventListener","clearTimeout","overlay","preventScroll","passive","createElement","React","Fragment","className","ref","content","illustration","src","alt","title","description","replace","theme","type","label","onClick","size","tooltipSrc","tooltipSrcRef","position","tooltipPosition","tooltipOffset","displayOn","isWithPortal","maxWidth"],"mappings":"AAOA,OAAAA,KAAA,YAAAC,GAAA,UAAAC,GAAA,eAAAC,GAAA,aAAAC,SAAA;AAAA,SAAA,UAAAC,SAAA;AAAA,SAAA,WAAAC,SAAA;AAAA,OAAA;AAAA,MAAMC,IAAwB;AAAA,EAC5BC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,MAAM;AAAA,EACNC,MAAM;AACR,GA8CaC,IAA0CA,CAAC;AAAA,EACtDC,OAAAA,IAAQ,CAAE;AAAA,EACVC,2BAAAA,IAA4B;AAAA,EAC5BC,wBAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,cAAAA,IAAe;AAAA,EACfC,uBAAAA,IAAwB;AAAA,EACxBC,QAAAA;AACF,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAIpB,EAAS,CAAC,GAC1CqB,IAAapB,EAAuB,IAAI,GACxCqB,IAAarB,EAAuB,IAAI,GAExC;AAAA,IACJQ,MAAAA,IAAO;AAAA,IACPF,OAAAA,IAAQ;AAAA,IACRC,QAAAA,IAAS;AAAA,IACTe,MAAAA,IAAO;AAAA,IACPC,UAAAA,IAAW;AAAA,EAAA,IACTN,KAAU,CAAA,GAERO,IAAsBC,SAASC,cAAcd,CAAyB,GAEtEe,IAAsC1B,EAAY,MAAM;AACxD2B,QAAAA;AAEAV,QAAAA,KAAeP,EAAMkB;AAChBD,aAAAA;AAIT,UAAME,IAAuBL,SAASC,cACpCf,EAAMO,CAAW,GAAGa,iCAChBpB,EAAMO,CAAW,EAAEa,iCACnBpB,EAAMO,CAAW,GAAGc,qBAC1B;AAEA,QAAI,CAACF;AACIF,aAAAA;AAGHK,UAAAA,IAAoBH,EAAqBI;AAS/C,WALED,EAAkBE,OAAO,KACzBF,EAAkBG,QAAQ,KAC1BH,EAAkBI,UAAUC,OAAOC,eACnCN,EAAkBO,SAASF,OAAOG,eAG9BR,EAAkBE,MAAM,IAC1BL,EAAqBY,eAAe;AAAA,MAAEC,UAAU;AAAA,MAAQC,OAAO;AAAA,IAAA,CAAS,IAC/DX,EAAkBI,SAASC,OAAOC,eAC3CT,EAAqBY,eAAe;AAAA,MAAEC,UAAU;AAAA,MAAQC,OAAO;AAAA,IAAA,CAAO,IAK1EhB,IAAUiB,WAAW,MAAM;AACzB,YAAMC,IAAgBrB,SAASC,cAAcf,EAAMO,CAAW,GAAGc,qBAAqB;AAEtF,UAAI,CAACc,KAAiB,CAAC1B,EAAW2B,WAAW,CAAC1B,EAAW0B;AACvD;AAGIC,YAAAA,IAAaF,EAAcZ,yBAE3Be,IAAiBC,KAAKC,IAAI1B,SAAS2B,gBAAgBC,cAAc5B,SAAS6B,KAAKD,YAAY;AAGjGjC,MAAAA,EAAW2B,QAAQQ,MAAMC,SAAS,GAAGP,CAAc;AAGnD,YAAMQ,IAAmB9C,EAAMO,CAAW,GAAGuC,oBAAoB;AAAA,QAAEC,YAAY;AAAA,QAAGC,UAAU;AAAA,MAAA,GAGtFC,IAAe5C,IAAwB,GACvCoB,IAAOY,EAAWZ,OAAOqB,EAAiBC,YAC1CvB,IAAMa,EAAWb,MAAMG,OAAOuB,UAAUJ,EAAiBE,UACzDnB,IAAQQ,EAAWR,QAAQiB,EAAiBC,YAC5CrB,IAASW,EAAWX,SAASC,OAAOuB,UAAUJ,EAAiBE,UAC/DG,IAAQtB,IAAQJ,GAChBoB,IAASnB,IAASF,GAClB4B,IAAgBb,KAAKC,IAAI1B,SAAS2B,gBAAgBY,aAAavC,SAAS6B,KAAKU,WAAW,GAGxFC,IAAUC,mBAAmB;AAAA,oBACrBH,CAAa,aAAad,CAAc;AAAA;AAAA,qCAEvB/B,CAAW;AAAA,uCACT6C,CAAa,aAAad,CAAc;AAAA,uBACxDb,CAAI,QAAQD,CAAG,YAAY2B,CAAK,aAAaN,CAAM,SAASI,CAAY,SAASA,CAAY;AAAA;AAAA;AAAA;AAAA,KAI/G;AAGCxC,MAAAA,EAAW2B,QAAQQ,MAAMY,YAAY,2BAA2BF,CAAO,mBAAmB/C,CAAW,MACrGE,EAAW2B,QAAQQ,MAAMa,kBAAkB,2BAA2BH,CAAO,mBAAmB/C,CAAW,MAG3GG,EAAW0B,QAAQQ,MAAMpB,MAAM,GAAGa,EAAWb,GAAG,MAChDd,EAAW0B,QAAQQ,MAAMnB,OAAO,GAAGY,EAAWZ,IAAI,MAClDf,EAAW0B,QAAQQ,MAAMO,QAAQ,GAAGd,EAAWc,KAAK,MACpDzC,EAAW0B,QAAQQ,MAAMC,SAAS,GAAGR,EAAWQ,MAAM,MACtDnC,EAAW0B,QAAQQ,MAAMK,eAAe,GAAG5C,CAAqB;AAAA,OAC/D,EAAE,GAEEY;AAAAA,EAAAA,GACN,CAACV,GAAaP,CAAK,CAAC,GAEjB0D,IAAiBpE,EAAY,MAAM;AAChB,IAAAY,KACnBW,KACFA,EAAoB8C,SAAS;AAAA,MAAEnC,KAAK;AAAA,MAAGQ,UAAU;AAAA,IAAA,CAAU;AAAA,EAC7D,GACC,CAAC9B,GAAwBW,CAAmB,CAAC,GAE1C+C,IAAkBtE,EACtB,CAACuE,MAA4C;AAC3CA,IAAAA,GAAGC,eAAe,GAClBD,GAAGE,gBAAgB,GAEfxD,IAAcP,EAAMkB,SAAS,IACf8C,EAAAA,CAAAA,MAASA,IAAO,CAAC,KAEjC9D,EAAuB2D,CAAC,GACpBhD,KACFA,EAAoB8C,SAAS;AAAA,MAAEnC,KAAK;AAAA,MAAGQ,UAAU;AAAA,IAAA,CAAU,IAGzDzB,EAAAA,CAAW,GAAG0D,sBAAsB;AAAA,MACxCC,WAAW/D;AAAAA,MACXgE,aAAa,WACX5D,MAAgBP,EAAMkB,SAAS,IAC3BlB,EAAMkB,WAAW,IACfxB,EAAsBC,QACtBD,EAAsBE,SACxBF,EAAsBG,IAAI;AAAA,IAAA,CAEjC;AAAA,EAAA,GAEH,CAACU,GAAaP,GAAOE,GAAwBC,GAAUU,CAAmB,CAC5E,GAEMuD,IAAkB9E,EAAY,MAAM;AACxC,IAAIiB,IAAc,KACAyD,EAAAA,CAAAA,MAASA,IAAO,CAAC,GAE7BzD,EAAAA,CAAW,GAAG0D,sBAAsB;AAAA,MACxCC,WAAW/D;AAAAA,MACXgE,aAAa,WAAWzE,EAAsBI,IAAI;AAAA,IAAA,CACnD;AAAA,EACA,GAAA,CAACS,GAAaP,GAAOG,CAAQ,CAAC,GAE3BkE,IAAiB/E,EACrB,CAACuE,MAAqB;AACpB,KAAIA,EAAES,YAAY,MAAMT,EAAEU,QAAQ,gBAE5BhE,IAAc,KACA6D,MAGhBP,EAAES,YAAY,MAAMT,EAAEU,QAAQ,iBAEhBX;EAGpB,GAAA,CAACrD,GAAaqD,GAAiBQ,CAAe,CAChD;AA8CA,SA5CA7E,EAAU,OAEDiF,OAAAA,iBAAiB,WAAWH,CAAc,GAE1C,MAAM;AACJI,WAAAA,oBAAoB,WAAWJ,CAAc;AAAA,EAAA,IAErD,CAACA,CAAc,CAAC,GAEnB9E,EAAU,MAAM;AACV0B,QAAAA;AACAV,WAAAA,IAAcP,EAAMkB,WACtBD,IAAUD,EAAoC,IAGzC,MAAM;AACX,MAAIC,KACFyD,aAAazD,CAAO;AAAA,IACtB;AAAA,EAED,GAAA,CAACV,GAAaP,GAAOgB,CAAmC,CAAC,GAG5DzB,EAAU,MAAM;AACd,QAAIgB,IAAcP,EAAMkB,UAAUT,EAAW2B,SAAS;AACpD,YAAMuC,IAAUlE,EAAW2B,SAErBwC,IAAgBA,CAACf,MAAa;AAClCA,QAAAA,EAAEC,eAAe,GACjBD,EAAEE,gBAAgB;AAAA,MAAA;AAGZS,aAAAA,EAAAA,iBAAiB,SAASI,GAAe;AAAA,QAAEC,SAAS;AAAA,MAAA,CAAO,GAC3DL,EAAAA,iBAAiB,aAAaI,GAAe;AAAA,QAAEC,SAAS;AAAA,MAAA,CAAO,GAC/DL,EAAAA,iBAAiB,UAAUI,GAAe;AAAA,QAAEC,SAAS;AAAA,MAAA,CAAO,GAE7D,MAAM;AACHJ,QAAAA,EAAAA,oBAAoB,SAASG,CAAa,GAC1CH,EAAAA,oBAAoB,aAAaG,CAAa,GAC9CH,EAAAA,oBAAoB,UAAUG,CAAa;AAAA,MAAA;AAAA,IAEvD;AAAA,EAAA,GACC,CAACrE,CAAW,CAAC,GAEZ,CAACP,KAASA,EAAMkB,WAAW,IACtB,yBAIP4D,cAAAC,EAAAC,UAAA,MACED,gBAAAA,EAAAD,cAAA,OAAA;AAAA,IACEG,WAAU;AAAA,IACVC,KAAKzE;AAAAA,IACL,sBAAoB,GAAGL,CAAY;AAAA,EAAA,CACpC,GAED0E,gBAAAA,EAAAA,cAACrF,GAAO;AAAA,IACN0F,SACEL,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKG,WAAU;AAAA,IAAA,GACZjF,EAAMO,CAAW,GAAG4E,SAASC,gBAC5BL,gBAAAA,EAAAD,cAAA,OAAA;AAAA,MACEO,KAAKrF,EAAMO,CAAW,EAAE4E,QAAQC;AAAAA,MAChCH,WAAU;AAAA,MACVK,KAAI;AAAA,IAAA,CACL,GAEHR,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKG,WAAU;AAAA,IAAA,GACZjF,EAAMO,CAAW,GAAG4E,SAASI,SAC5BR,gBAAAA,EAAAD,cAAA,KAAA;AAAA,MAAGG,WAAU;AAAA,IAAmCjF,GAAAA,EAAMO,CAAW,EAAE4E,QAAQI,KAAS,GAErFvF,EAAMO,CAAW,GAAG4E,SAASK,eAC5BT,gBAAAA,EAAAD,cAAA,KAAA;AAAA,MAAGG,WAAU;AAAA,IAAA,GAAyCjF,EAAMO,CAAW,EAAE4E,QAAQK,WAAe,CAE/F,GAELV,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKG,WAAU;AAAA,IAAA,GACZjF,EAAMkB,SAAS,KACd6D,gBAAAA,EAAAD,cAAA,QAAA;AAAA,MAAMG,WAAU;AAAA,IAAA,GACbrE,EAAS6E,QAAQ,UAAU,GAAGlF,IAAc,CAAC,EAAE,EAAEkF,QAAQ,WAAW,GAAGzF,EAAMkB,MAAM,EAAE,CAClF,GAER6D,gBAAAA,EAAAD,cAAA,OAAA;AAAA,MAAKG,WAAU;AAAA,IAAA,GACZ1E,MAAgBP,EAAMkB,SAAS,KAC9B6D,gBAAAA,EAAAD,cAACtF,GAAM;AAAA,MACLkG,OAAM;AAAA,MACNC,MAAK;AAAA,MACLC,OAAOjF;AAAAA,MACPP,cAAc,GAAGA,CAAY;AAAA,MAC7ByF,SAASnC;AAAAA,IAAAA,CACV,GAEHoB,gBAAAA,EAAAA,cAACtF,GAAM;AAAA,MACLkG,OAAM;AAAA,MACNC,MAAK;AAAA,MACLG,MAAK;AAAA,MACLF,OAAOrF,MAAgBP,EAAMkB,SAAS,IAAKlB,EAAMkB,WAAW,IAAIvB,IAAQC,IAAUC;AAAAA,MAClFO,cAAc,GAAGA,CAAY;AAAA,MAC7ByF,SAASjC;AAAAA,IACV,CAAA,CACE,CACF,CACF;AAAA,IAEPmC,YAAYjB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKG,WAAU;AAAA,MAAUC,KAAKxE;AAAAA,IAAAA,CAAa;AAAA,IACvDsF,eAAetF;AAAAA,IACfuF,UAAUjG,EAAMO,CAAW,GAAG2F,mBAAmB;AAAA,IACjDC,eAAe;AAAA,IACfC,WAAU;AAAA,IACVC,cAAc;AAAA,IACdC,UAAU;AAAA,EACX,CAAA,CACD;AAEN;"}
|