@weaverse/react 1.0.47 → 1.0.49

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.js CHANGED
@@ -31,2074 +31,55 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
31
31
  // src/index.ts
32
32
  var src_exports = {};
33
33
  __export(src_exports, {
34
- Components: () => Components,
35
- Elements: () => Elements,
36
- SliderComponents: () => SliderComponents,
37
34
  WeaverseContext: () => WeaverseContext,
38
35
  WeaverseContextConsumer: () => WeaverseContextConsumer,
39
36
  WeaverseContextProvider: () => WeaverseContextProvider,
40
- WeaverseRoot: () => WeaverseRoot,
41
- createRootContext: () => createRootContext
37
+ WeaverseRoot: () => WeaverseRoot
42
38
  });
43
39
  module.exports = __toCommonJS(src_exports);
44
40
  __reExport(src_exports, require("@weaverse/core"), module.exports);
45
41
 
46
42
  // src/context.ts
47
- var import_core = require("@weaverse/core");
48
- var import_react37 = require("react");
49
-
50
- // src/elements/button.tsx
51
- var React = __toESM(require("react"));
52
43
  var import_react = require("react");
53
- var Button = React.forwardRef((props, ref) => {
54
- let { isDesignMode } = (0, import_react.useContext)(WeaverseContext);
55
- let { text, clickAction, linkTo, openInNewTab, ...rest } = props;
56
- if (clickAction === "none") {
57
- return /* @__PURE__ */ React.createElement("button", { ref, ...rest }, text);
58
- }
59
- return /* @__PURE__ */ React.createElement(
60
- "a",
61
- {
62
- ref,
63
- href: !isDesignMode ? linkTo : void 0,
64
- target: openInNewTab ? "_blank" : "_self",
65
- rel: "noreferrer",
66
- ...rest
67
- },
68
- text
69
- );
70
- });
71
- Button.defaultProps = {
72
- type: "button",
73
- text: "BUTTON",
74
- clickAction: "none",
75
- linkTo: "",
76
- openInNewTab: false
77
- };
78
- var css = {
79
- "@desktop": {
80
- borderRadius: "4px",
81
- border: "none",
82
- backgroundColor: "#3E3F40",
83
- color: "#fff",
84
- fontSize: "14px",
85
- lineHeight: "1.5",
86
- letterSpacing: "0",
87
- fontWeight: "medium",
88
- padding: "10px 20px",
89
- height: "42px",
90
- minWidth: "120px",
91
- textDecoration: "none",
92
- textAlign: "center",
93
- "&:hover": {
94
- backgroundColor: "#1A1B1B"
95
- }
96
- }
97
- };
98
- var button_default = Button;
99
-
100
- // src/elements/container.tsx
101
- var import_react19 = __toESM(require("react"));
102
-
103
- // src/components/modal/index.tsx
104
- var modal_exports = {};
105
- __export(modal_exports, {
106
- Modal: () => Modal,
107
- ModalClose: () => ModalClose,
108
- ModalContent: () => ModalContent,
109
- ModalHeader: () => ModalHeader,
110
- ModalTrigger: () => ModalTrigger
111
- });
112
- var import_react_dialog2 = require("@radix-ui/react-dialog");
113
- var import_react6 = __toESM(require("react"));
114
-
115
- // src/components/icons/index.tsx
116
- var import_react3 = __toESM(require("react"));
44
+ var WeaverseContext = (0, import_react.createContext)({});
45
+ var WeaverseContextProvider = WeaverseContext.Provider;
46
+ var WeaverseContextConsumer = WeaverseContext.Consumer;
117
47
 
118
- // src/components/icons/phosphor.tsx
119
- var phosphor_exports = {};
120
- __export(phosphor_exports, {
121
- ArrowLeft: () => ArrowLeft,
122
- ArrowRight: () => ArrowRight,
123
- Backpack: () => Backpack,
124
- CaretLeft: () => CaretLeft,
125
- CaretRight: () => CaretRight,
126
- Circle: () => Circle,
127
- CircleNotch: () => CircleNotch,
128
- Eye: () => Eye,
129
- HandBag: () => HandBag,
130
- Image: () => Image,
131
- Minus: () => Minus,
132
- Newspaper: () => Newspaper,
133
- Package: () => Package,
134
- Plus: () => Plus,
135
- ShoppingCart: () => ShoppingCart,
136
- Storefront: () => Storefront,
137
- Tag: () => Tag,
138
- X: () => X
139
- });
48
+ // src/renderer.tsx
49
+ var import_core = require("@weaverse/core");
140
50
  var import_react2 = __toESM(require("react"));
141
- var Circle = (props) => {
142
- return /* @__PURE__ */ import_react2.default.createElement(
143
- "svg",
144
- {
145
- xmlns: "http://www.w3.org/2000/svg",
146
- width: "192",
147
- height: "192",
148
- fill: "currentColor",
149
- viewBox: "0 0 256 256",
150
- ...props
151
- },
152
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
153
- /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "128", cy: "128", r: "104" })
154
- );
155
- };
156
- var CircleNotch = (props) => {
157
- return /* @__PURE__ */ import_react2.default.createElement(
158
- "svg",
159
- {
160
- xmlns: "http://www.w3.org/2000/svg",
161
- fill: "none",
162
- viewBox: "0 0 24 24",
163
- ...props
164
- },
165
- /* @__PURE__ */ import_react2.default.createElement(
166
- "circle",
167
- {
168
- style: { opacity: ".25" },
169
- cx: "12",
170
- cy: "12",
171
- r: "10",
172
- stroke: "currentColor",
173
- strokeWidth: "4"
174
- }
175
- ),
176
- /* @__PURE__ */ import_react2.default.createElement(
177
- "path",
178
- {
179
- style: { opacity: ".75" },
180
- fill: "currentColor",
181
- d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
182
- }
183
- )
184
- );
185
- };
186
- var X = (props) => {
187
- return /* @__PURE__ */ import_react2.default.createElement(
188
- "svg",
189
- {
190
- xmlns: "http://www.w3.org/2000/svg",
191
- width: "20",
192
- height: "20",
193
- fill: "currentColor",
194
- viewBox: "0 0 256 256",
195
- ...props
196
- },
197
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
198
- /* @__PURE__ */ import_react2.default.createElement(
199
- "line",
200
- {
201
- x1: "200",
202
- y1: "56",
203
- x2: "56",
204
- y2: "200",
205
- fill: "none",
206
- stroke: "currentColor",
207
- strokeLinecap: "round",
208
- strokeLinejoin: "round",
209
- strokeWidth: "12"
210
- }
211
- ),
212
- /* @__PURE__ */ import_react2.default.createElement(
213
- "line",
214
- {
215
- x1: "200",
216
- y1: "200",
217
- x2: "56",
218
- y2: "56",
219
- fill: "none",
220
- stroke: "currentColor",
221
- strokeLinecap: "round",
222
- strokeLinejoin: "round",
223
- strokeWidth: "12"
224
- }
225
- )
226
- );
227
- };
228
- var Minus = (props) => {
229
- return /* @__PURE__ */ import_react2.default.createElement(
230
- "svg",
231
- {
232
- xmlns: "http://www.w3.org/2000/svg",
233
- width: "192",
234
- height: "192",
235
- fill: "currentColor",
236
- viewBox: "0 0 256 256",
237
- ...props
238
- },
239
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
240
- /* @__PURE__ */ import_react2.default.createElement(
241
- "line",
242
- {
243
- x1: "40",
244
- y1: "128",
245
- x2: "216",
246
- y2: "128",
247
- fill: "none",
248
- stroke: "currentColor",
249
- strokeLinecap: "round",
250
- strokeLinejoin: "round",
251
- strokeWidth: "16"
252
- }
253
- )
254
- );
255
- };
256
- var Plus = (props) => {
257
- return /* @__PURE__ */ import_react2.default.createElement(
258
- "svg",
259
- {
260
- xmlns: "http://www.w3.org/2000/svg",
261
- width: "192",
262
- height: "192",
263
- fill: "currentColor",
264
- viewBox: "0 0 256 256",
265
- ...props
266
- },
267
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
268
- /* @__PURE__ */ import_react2.default.createElement(
269
- "line",
270
- {
271
- x1: "40",
272
- y1: "128",
273
- x2: "216",
274
- y2: "128",
275
- fill: "none",
276
- stroke: "currentColor",
277
- strokeLinecap: "round",
278
- strokeLinejoin: "round",
279
- strokeWidth: "16"
280
- }
281
- ),
282
- /* @__PURE__ */ import_react2.default.createElement(
283
- "line",
284
- {
285
- x1: "128",
286
- y1: "40",
287
- x2: "128",
288
- y2: "216",
289
- fill: "none",
290
- stroke: "currentColor",
291
- strokeLinecap: "round",
292
- strokeLinejoin: "round",
293
- strokeWidth: "16"
294
- }
295
- )
296
- );
297
- };
298
- var CaretLeft = (props) => {
299
- return /* @__PURE__ */ import_react2.default.createElement(
300
- "svg",
301
- {
302
- xmlns: "http://www.w3.org/2000/svg",
303
- width: "192",
304
- height: "192",
305
- fill: "currentColor",
306
- viewBox: "0 0 256 256",
307
- ...props
308
- },
309
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
310
- /* @__PURE__ */ import_react2.default.createElement(
311
- "polyline",
312
- {
313
- points: "160 208 80 128 160 48",
314
- fill: "none",
315
- stroke: "currentColor",
316
- strokeLinecap: "round",
317
- strokeLinejoin: "round",
318
- strokeWidth: "16"
319
- }
320
- )
321
- );
322
- };
323
- var CaretRight = (props) => {
324
- return /* @__PURE__ */ import_react2.default.createElement(
325
- "svg",
326
- {
327
- xmlns: "http://www.w3.org/2000/svg",
328
- width: "192",
329
- height: "192",
330
- fill: "currentColor",
331
- viewBox: "0 0 256 256",
332
- ...props
333
- },
334
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
335
- /* @__PURE__ */ import_react2.default.createElement(
336
- "polyline",
337
- {
338
- points: "96 48 176 128 96 208",
339
- fill: "none",
340
- stroke: "currentColor",
341
- strokeLinecap: "round",
342
- strokeLinejoin: "round",
343
- strokeWidth: "16"
344
- }
345
- )
346
- );
347
- };
348
- var ArrowLeft = (props) => {
349
- return /* @__PURE__ */ import_react2.default.createElement(
350
- "svg",
351
- {
352
- xmlns: "http://www.w3.org/2000/svg",
353
- width: "192",
354
- height: "192",
355
- fill: "currentColor",
356
- viewBox: "0 0 256 256",
357
- ...props
358
- },
359
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
360
- /* @__PURE__ */ import_react2.default.createElement(
361
- "line",
362
- {
363
- x1: "216",
364
- y1: "128",
365
- x2: "40",
366
- y2: "128",
367
- fill: "none",
368
- stroke: "currentColor",
369
- strokeLinecap: "round",
370
- strokeLinejoin: "round",
371
- strokeWidth: "16"
372
- }
373
- ),
374
- /* @__PURE__ */ import_react2.default.createElement(
375
- "polyline",
376
- {
377
- points: "112 56 40 128 112 200",
378
- fill: "none",
379
- stroke: "currentColor",
380
- strokeLinecap: "round",
381
- strokeLinejoin: "round",
382
- strokeWidth: "16"
383
- }
384
- )
385
- );
386
- };
387
- var ArrowRight = (props) => {
388
- return /* @__PURE__ */ import_react2.default.createElement(
389
- "svg",
390
- {
391
- xmlns: "http://www.w3.org/2000/svg",
392
- width: "192",
393
- height: "192",
394
- fill: "currentColor",
395
- viewBox: "0 0 256 256",
396
- ...props
397
- },
398
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
399
- /* @__PURE__ */ import_react2.default.createElement(
400
- "line",
401
- {
402
- x1: "40",
403
- y1: "128",
404
- x2: "216",
405
- y2: "128",
406
- fill: "none",
407
- stroke: "currentColor",
408
- strokeLinecap: "round",
409
- strokeLinejoin: "round",
410
- strokeWidth: "16"
411
- }
412
- ),
413
- /* @__PURE__ */ import_react2.default.createElement(
414
- "polyline",
415
- {
416
- points: "144 56 216 128 144 200",
417
- fill: "none",
418
- stroke: "currentColor",
419
- strokeLinecap: "round",
420
- strokeLinejoin: "round",
421
- strokeWidth: "16"
422
- }
423
- )
424
- );
425
- };
426
- var Image = (props) => {
427
- return /* @__PURE__ */ import_react2.default.createElement(
428
- "svg",
429
- {
430
- xmlns: "http://www.w3.org/2000/svg",
431
- "aria-hidden": "true",
432
- fill: "currentColor",
433
- viewBox: "0 0 640 512",
434
- ...props
435
- },
436
- /* @__PURE__ */ import_react2.default.createElement("path", { d: "M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z" })
437
- );
438
- };
439
- var ShoppingCart = (props) => {
440
- return /* @__PURE__ */ import_react2.default.createElement(
441
- "svg",
442
- {
443
- xmlns: "http://www.w3.org/2000/svg",
444
- width: "192",
445
- height: "192",
446
- fill: "currentColor",
447
- viewBox: "0 0 256 256",
448
- ...props
449
- },
450
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
451
- /* @__PURE__ */ import_react2.default.createElement(
452
- "path",
453
- {
454
- d: "M184,184H69.8L41.9,30.6A8,8,0,0,0,34.1,24H16",
455
- fill: "none",
456
- stroke: "currentColor",
457
- strokeLinecap: "round",
458
- strokeLinejoin: "round",
459
- strokeWidth: "16"
460
- }
461
- ),
462
- /* @__PURE__ */ import_react2.default.createElement(
463
- "circle",
464
- {
465
- cx: "80",
466
- cy: "204",
467
- r: "20",
468
- fill: "none",
469
- stroke: "currentColor",
470
- strokeLinecap: "round",
471
- strokeLinejoin: "round",
472
- strokeWidth: "16"
473
- }
474
- ),
475
- /* @__PURE__ */ import_react2.default.createElement(
476
- "circle",
477
- {
478
- cx: "184",
479
- cy: "204",
480
- r: "20",
481
- fill: "none",
482
- stroke: "currentColor",
483
- strokeLinecap: "round",
484
- strokeLinejoin: "round",
485
- strokeWidth: "16"
486
- }
487
- ),
488
- /* @__PURE__ */ import_react2.default.createElement(
489
- "path",
490
- {
491
- d: "M62.5,144H188.1a15.9,15.9,0,0,0,15.7-13.1L216,64H48",
492
- fill: "none",
493
- stroke: "currentColor",
494
- strokeLinecap: "round",
495
- strokeLinejoin: "round",
496
- strokeWidth: "16"
497
- }
498
- )
499
- );
500
- };
501
- var Storefront = (props) => {
502
- return /* @__PURE__ */ import_react2.default.createElement(
503
- "svg",
504
- {
505
- xmlns: "http://www.w3.org/2000/svg",
506
- width: "192",
507
- height: "192",
508
- fill: "currentColor",
509
- viewBox: "0 0 256 256",
510
- ...props
511
- },
512
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
513
- /* @__PURE__ */ import_react2.default.createElement(
514
- "path",
515
- {
516
- d: "M48,139.6V208a8,8,0,0,0,8,8H200a8,8,0,0,0,8-8V139.6",
517
- fill: "none",
518
- stroke: "currentColor",
519
- strokeLinecap: "round",
520
- strokeLinejoin: "round",
521
- strokeWidth: "12"
522
- }
523
- ),
524
- /* @__PURE__ */ import_react2.default.createElement(
525
- "path",
526
- {
527
- d: "M54,40H202a8.1,8.1,0,0,1,7.7,5.8L224,96H32L46.3,45.8A8.1,8.1,0,0,1,54,40Z",
528
- fill: "none",
529
- stroke: "currentColor",
530
- strokeLinecap: "round",
531
- strokeLinejoin: "round",
532
- strokeWidth: "12"
533
- }
534
- ),
535
- /* @__PURE__ */ import_react2.default.createElement(
536
- "path",
537
- {
538
- d: "M96,96v16a32,32,0,0,1-64,0V96",
539
- fill: "none",
540
- stroke: "currentColor",
541
- strokeLinecap: "round",
542
- strokeLinejoin: "round",
543
- strokeWidth: "12"
544
- }
545
- ),
546
- /* @__PURE__ */ import_react2.default.createElement(
547
- "path",
548
- {
549
- d: "M160,96v16a32,32,0,0,1-64,0V96",
550
- fill: "none",
551
- stroke: "currentColor",
552
- strokeLinecap: "round",
553
- strokeLinejoin: "round",
554
- strokeWidth: "12"
555
- }
556
- ),
557
- /* @__PURE__ */ import_react2.default.createElement(
558
- "path",
559
- {
560
- d: "M224,96v16a32,32,0,0,1-64,0V96",
561
- fill: "none",
562
- stroke: "currentColor",
563
- strokeLinecap: "round",
564
- strokeLinejoin: "round",
565
- strokeWidth: "12"
566
- }
567
- )
568
- );
569
- };
570
- var Package = (props) => {
571
- return /* @__PURE__ */ import_react2.default.createElement(
572
- "svg",
573
- {
574
- xmlns: "http://www.w3.org/2000/svg",
575
- width: "192",
576
- height: "192",
577
- fill: "currentColor",
578
- viewBox: "0 0 256 256",
579
- ...props
580
- },
581
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
582
- /* @__PURE__ */ import_react2.default.createElement(
583
- "path",
584
- {
585
- d: "M224,177.3V78.7a8.1,8.1,0,0,0-4.1-7l-88-49.5a7.8,7.8,0,0,0-7.8,0l-88,49.5a8.1,8.1,0,0,0-4.1,7v98.6a8.1,8.1,0,0,0,4.1,7l88,49.5a7.8,7.8,0,0,0,7.8,0l88-49.5A8.1,8.1,0,0,0,224,177.3Z",
586
- fill: "none",
587
- stroke: "currentColor",
588
- strokeLinecap: "round",
589
- strokeLinejoin: "round",
590
- strokeWidth: "8"
591
- }
592
- ),
593
- /* @__PURE__ */ import_react2.default.createElement(
594
- "polyline",
595
- {
596
- points: "177 152.5 177 100.5 80 47",
597
- fill: "none",
598
- stroke: "currentColor",
599
- strokeLinecap: "round",
600
- strokeLinejoin: "round",
601
- strokeWidth: "8"
602
- }
603
- ),
604
- /* @__PURE__ */ import_react2.default.createElement(
605
- "polyline",
606
- {
607
- points: "222.9 74.6 128.9 128 33.1 74.6",
608
- fill: "none",
609
- stroke: "currentColor",
610
- strokeLinecap: "round",
611
- strokeLinejoin: "round",
612
- strokeWidth: "8"
613
- }
614
- ),
615
- /* @__PURE__ */ import_react2.default.createElement(
616
- "line",
617
- {
618
- x1: "128.9",
619
- y1: "128",
620
- x2: "128",
621
- y2: "234.8",
622
- fill: "none",
623
- stroke: "currentColor",
624
- strokeLinecap: "round",
625
- strokeLinejoin: "round",
626
- strokeWidth: "8"
627
- }
628
- )
629
- );
630
- };
631
- var HandBag = (props) => {
632
- return /* @__PURE__ */ import_react2.default.createElement(
633
- "svg",
634
- {
635
- xmlns: "http://www.w3.org/2000/svg",
636
- width: "192",
637
- height: "192",
638
- fill: "currentColor",
639
- viewBox: "0 0 256 256",
640
- ...props
641
- },
642
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
643
- /* @__PURE__ */ import_react2.default.createElement(
644
- "path",
645
- {
646
- d: "M208.8,72H47.2a8.1,8.1,0,0,0-8,7.1L25,207.1a8,8,0,0,0,7.9,8.9H223.1a8,8,0,0,0,7.9-8.9l-14.2-128A8.1,8.1,0,0,0,208.8,72Z",
647
- fill: "none",
648
- stroke: "currentColor",
649
- strokeLinecap: "round",
650
- strokeLinejoin: "round",
651
- strokeWidth: "16"
652
- }
653
- ),
654
- /* @__PURE__ */ import_react2.default.createElement(
655
- "path",
656
- {
657
- d: "M88,104V72a40,40,0,0,1,80,0v32",
658
- fill: "none",
659
- stroke: "currentColor",
660
- strokeLinecap: "round",
661
- strokeLinejoin: "round",
662
- strokeWidth: "16"
663
- }
664
- )
665
- );
666
- };
667
- var Tag = (props) => {
668
- return /* @__PURE__ */ import_react2.default.createElement(
669
- "svg",
670
- {
671
- xmlns: "http://www.w3.org/2000/svg",
672
- width: "192",
673
- height: "192",
674
- fill: "currentColor",
675
- viewBox: "0 0 256 256",
676
- ...props
677
- },
678
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
679
- /* @__PURE__ */ import_react2.default.createElement(
680
- "path",
681
- {
682
- d: "M122.7,25.9,42,42,25.9,122.7a8,8,0,0,0,2.2,7.2L132.5,234.3a7.9,7.9,0,0,0,11.3,0l90.5-90.5a7.9,7.9,0,0,0,0-11.3L129.9,28.1A8,8,0,0,0,122.7,25.9Z",
683
- fill: "none",
684
- stroke: "currentColor",
685
- strokeLinecap: "round",
686
- strokeLinejoin: "round",
687
- strokeWidth: "16"
688
- }
689
- ),
690
- /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "84", cy: "84", r: "12" })
691
- );
692
- };
693
- var Backpack = (props) => {
694
- return /* @__PURE__ */ import_react2.default.createElement(
695
- "svg",
696
- {
697
- xmlns: "http://www.w3.org/2000/svg",
698
- width: "192",
699
- height: "192",
700
- fill: "currentColor",
701
- viewBox: "0 0 256 256",
702
- ...props
703
- },
704
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
705
- /* @__PURE__ */ import_react2.default.createElement(
706
- "path",
707
- {
708
- d: "M96,48h64a48,48,0,0,1,48,48V216a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V96A48,48,0,0,1,96,48Z",
709
- fill: "none",
710
- stroke: "currentColor",
711
- strokeLinecap: "round",
712
- strokeLinejoin: "round",
713
- strokeWidth: "12"
714
- }
715
- ),
716
- /* @__PURE__ */ import_react2.default.createElement(
717
- "path",
718
- {
719
- d: "M80,224V152a16,16,0,0,1,16-16h64a16,16,0,0,1,16,16v72",
720
- fill: "none",
721
- stroke: "currentColor",
722
- strokeLinecap: "round",
723
- strokeLinejoin: "round",
724
- strokeWidth: "12"
725
- }
726
- ),
727
- /* @__PURE__ */ import_react2.default.createElement(
728
- "path",
729
- {
730
- d: "M96,48V32a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V48",
731
- fill: "none",
732
- stroke: "currentColor",
733
- strokeLinecap: "round",
734
- strokeLinejoin: "round",
735
- strokeWidth: "12"
736
- }
737
- ),
738
- /* @__PURE__ */ import_react2.default.createElement(
739
- "line",
740
- {
741
- x1: "112",
742
- y1: "88",
743
- x2: "144",
744
- y2: "88",
745
- fill: "none",
746
- stroke: "currentColor",
747
- strokeLinecap: "round",
748
- strokeLinejoin: "round",
749
- strokeWidth: "12"
750
- }
751
- ),
752
- /* @__PURE__ */ import_react2.default.createElement(
753
- "line",
754
- {
755
- x1: "80",
756
- y1: "168",
757
- x2: "176",
758
- y2: "168",
759
- fill: "none",
760
- stroke: "currentColor",
761
- strokeLinecap: "round",
762
- strokeLinejoin: "round",
763
- strokeWidth: "12"
764
- }
765
- ),
766
- /* @__PURE__ */ import_react2.default.createElement(
767
- "line",
768
- {
769
- x1: "144",
770
- y1: "168",
771
- x2: "144",
772
- y2: "184",
773
- fill: "none",
774
- stroke: "currentColor",
775
- strokeLinecap: "round",
776
- strokeLinejoin: "round",
777
- strokeWidth: "12"
778
- }
779
- )
780
- );
781
- };
782
- var Newspaper = (props) => {
783
- return /* @__PURE__ */ import_react2.default.createElement(
784
- "svg",
785
- {
786
- xmlns: "http://www.w3.org/2000/svg",
787
- width: "192",
788
- height: "192",
789
- fill: "currentColor",
790
- viewBox: "0 0 256 256",
791
- ...props
792
- },
793
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
794
- /* @__PURE__ */ import_react2.default.createElement(
795
- "line",
796
- {
797
- x1: "96",
798
- y1: "112",
799
- x2: "176",
800
- y2: "112",
801
- fill: "none",
802
- stroke: "currentColor",
803
- strokeLinecap: "round",
804
- strokeLinejoin: "round",
805
- strokeWidth: "8"
806
- }
807
- ),
808
- /* @__PURE__ */ import_react2.default.createElement(
809
- "line",
810
- {
811
- x1: "96",
812
- y1: "144",
813
- x2: "176",
814
- y2: "144",
815
- fill: "none",
816
- stroke: "currentColor",
817
- strokeLinecap: "round",
818
- strokeLinejoin: "round",
819
- strokeWidth: "8"
820
- }
821
- ),
822
- /* @__PURE__ */ import_react2.default.createElement(
823
- "path",
824
- {
825
- d: "M32,200a16,16,0,0,0,16-16V64a8,8,0,0,1,8-8H216a8,8,0,0,1,8,8V184a16,16,0,0,1-16,16Z",
826
- fill: "none",
827
- stroke: "currentColor",
828
- strokeLinecap: "round",
829
- strokeLinejoin: "round",
830
- strokeWidth: "8"
831
- }
832
- ),
833
- /* @__PURE__ */ import_react2.default.createElement(
834
- "path",
835
- {
836
- d: "M32,200a16,16,0,0,1-16-16h0V88",
837
- fill: "none",
838
- stroke: "currentColor",
839
- strokeLinecap: "round",
840
- strokeLinejoin: "round",
841
- strokeWidth: "8"
842
- }
843
- )
844
- );
845
- };
846
- var Eye = (props) => {
847
- return /* @__PURE__ */ import_react2.default.createElement(
848
- "svg",
849
- {
850
- xmlns: "http://www.w3.org/2000/svg",
851
- width: "192",
852
- height: "192",
853
- fill: "currentColor",
854
- viewBox: "0 0 256 256",
855
- ...props
856
- },
857
- /* @__PURE__ */ import_react2.default.createElement("rect", { width: "256", height: "256", fill: "none" }),
858
- /* @__PURE__ */ import_react2.default.createElement(
859
- "path",
860
- {
861
- d: "M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Z",
862
- fill: "none",
863
- stroke: "currentColor",
864
- strokeLinecap: "round",
865
- strokeLinejoin: "round",
866
- strokeWidth: "12"
867
- }
868
- ),
869
- /* @__PURE__ */ import_react2.default.createElement(
870
- "circle",
871
- {
872
- cx: "128",
873
- cy: "128",
874
- r: "40",
875
- fill: "none",
876
- stroke: "currentColor",
877
- strokeLinecap: "round",
878
- strokeLinejoin: "round",
879
- strokeWidth: "12"
880
- }
881
- )
882
- );
883
- };
884
-
885
- // src/components/icons/index.tsx
886
- var import_clsx = __toESM(require("clsx"));
887
- function Icon({ name, className, ...props }) {
888
- let WeaverseIcon = phosphor_exports[name];
889
- let cls = (0, import_clsx.default)("wv-icon", className);
890
- return /* @__PURE__ */ import_react3.default.createElement(WeaverseIcon, { className: cls, ...props });
891
- }
892
-
893
- // src/components/modal/styled.ts
894
- var import_react_dialog = require("@radix-ui/react-dialog");
895
- var import_react4 = require("@stitches/react");
896
- var overlayShow = (0, import_react4.keyframes)({
897
- "0%": { opacity: 0 },
898
- "100%": { opacity: 1 }
899
- });
900
- var contentShow = (0, import_react4.keyframes)({
901
- "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
902
- "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
903
- });
904
- var StyledOverlay = (0, import_react4.styled)(import_react_dialog.Overlay, {
905
- display: "block !important",
906
- backgroundColor: "rgba(0, 0, 0, .3)",
907
- position: "fixed",
908
- zIndex: 99999,
909
- inset: 0,
910
- animation: `${overlayShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`
911
- });
912
- var StyledTitle = (0, import_react4.styled)(import_react_dialog.Title, {
913
- margin: "0 0 24px",
914
- fontWeight: 500,
915
- fontSize: 24,
916
- "@media (max-width: 768px)": {
917
- margin: "0 0 16px",
918
- fontSize: 20
919
- }
920
- });
921
- var StyledContent = (0, import_react4.styled)(import_react_dialog.Content, {
922
- backgroundColor: "white",
923
- borderRadius: 6,
924
- boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
925
- position: "fixed",
926
- top: "50%",
927
- left: "50%",
928
- transform: "translate(-50%, -50%)",
929
- padding: 24,
930
- animation: `${contentShow} 300ms cubic-bezier(0.16, 1, 0.3, 1)`,
931
- zIndex: 99999,
932
- maxWidth: "90vw",
933
- width: "auto",
934
- "*": {
935
- maxWidth: "100%"
936
- },
937
- "&:focus": { outline: "none" },
938
- '&[data-size="fullscreen"]': {
939
- width: "100vw",
940
- height: "100vh",
941
- maxWidth: "100vw",
942
- borderRadius: 0
943
- },
944
- "@media (max-width: 768px)": {
945
- width: "90vw",
946
- padding: 12,
947
- '&[data-size="fullscreen"]': {
948
- width: "100vw"
949
- }
950
- }
951
- });
952
- var StyledCloseIcon = (0, import_react4.styled)("button", {
953
- all: "unset",
954
- cursor: "pointer",
955
- fontFamily: "inherit",
956
- borderRadius: "100%",
957
- height: 32,
958
- width: 32,
959
- padding: 4,
960
- display: "inline-flex",
961
- alignItems: "center",
962
- justifyContent: "center",
963
- color: "rgb(55, 65, 81)",
964
- position: "absolute",
965
- top: 8,
966
- right: 8,
967
- "&:hover": {
968
- backgroundColor: "rgba(112, 112, 112, .1)"
969
- },
970
- svg: {
971
- width: 24,
972
- height: 24
973
- }
974
- });
975
-
976
- // src/components/modal/use-open-change-effect.ts
977
- var import_react5 = require("react");
978
- function useOpenChangeEffect(props) {
979
- let { open, defaultOpen, onOpenChange } = props;
980
- let rootCtx = (0, import_react5.useContext)(WeaverseContext);
981
- let toggleRootzIndex = (open2) => {
982
- let { contentRootElement } = rootCtx;
983
- if (contentRootElement) {
984
- if (open2) {
985
- contentRootElement.classList.add("modal-open");
986
- } else {
987
- contentRootElement.classList.remove("modal-open");
988
- }
989
- }
990
- };
991
- (0, import_react5.useEffect)(() => {
992
- let isOpen = open || defaultOpen;
993
- toggleRootzIndex(isOpen);
994
- }, [open, defaultOpen]);
995
- let handleOpenChange = (open2) => {
996
- toggleRootzIndex(open2);
997
- onOpenChange?.(open2);
998
- };
999
- return handleOpenChange;
1000
- }
1001
-
1002
- // src/components/modal/index.tsx
1003
- var Modal = (props) => {
1004
- let { children, open, defaultOpen, onOpenChange, ...rest } = props;
1005
- let handleOpenChange = useOpenChangeEffect(props);
1006
- return /* @__PURE__ */ import_react6.default.createElement(
1007
- import_react_dialog2.Root,
1008
- {
1009
- open,
1010
- defaultOpen,
1011
- onOpenChange: handleOpenChange,
1012
- ...rest
1013
- },
1014
- children
1015
- );
1016
- };
1017
- var ModalTrigger = import_react_dialog2.Trigger;
1018
- var ModalHeader = (0, import_react6.forwardRef)(
1019
- (props, ref) => {
1020
- let { children, ...rest } = props;
1021
- return /* @__PURE__ */ import_react6.default.createElement(StyledTitle, { ref, ...rest, "data-wv-modal-header": true }, children);
1022
- }
1023
- );
1024
- var ModalContent = (0, import_react6.forwardRef)(
1025
- (props, ref) => {
1026
- let { children, size, portal, ...rest } = props;
1027
- let modalContent = /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react6.default.createElement(
1028
- StyledContent,
1029
- {
1030
- ...rest,
1031
- onCloseAutoFocus: (e) => e.preventDefault(),
1032
- "data-wv-modal": true,
1033
- "data-size": size,
1034
- ref
1035
- },
1036
- /* @__PURE__ */ import_react6.default.createElement(ModalClose, null),
1037
- /* @__PURE__ */ import_react6.default.createElement("div", { className: "wv-modal-content" }, children)
1038
- ));
1039
- if (portal) {
1040
- return /* @__PURE__ */ import_react6.default.createElement(import_react_dialog2.Portal, null, modalContent);
1041
- }
1042
- return modalContent;
1043
- }
1044
- );
1045
- ModalContent.defaultProps = {
1046
- size: "auto",
1047
- portal: false
1048
- };
1049
- var ModalClose = (0, import_react6.forwardRef)(
1050
- (props, ref) => {
1051
- let { asChild, children, ...rest } = props;
1052
- let closeIcon = /* @__PURE__ */ import_react6.default.createElement(StyledCloseIcon, null, /* @__PURE__ */ import_react6.default.createElement(Icon, { name: "X" }));
1053
- return /* @__PURE__ */ import_react6.default.createElement(import_react_dialog2.Close, { asChild: true, ...rest, ref }, asChild ? children : closeIcon);
1054
- }
1055
- );
1056
-
1057
- // src/components/spinner.tsx
1058
- var import_react7 = __toESM(require("react"));
1059
- function Spinner() {
1060
- return /* @__PURE__ */ import_react7.default.createElement("span", { className: "wv-spinner-wrapper" }, /* @__PURE__ */ import_react7.default.createElement(Icon, { name: "CircleNotch", className: "wv-spinner" }));
1061
- }
1062
-
1063
- // src/components/tooltip.tsx
1064
- var import_react8 = __toESM(require("react"));
1065
- function Tooltip({ children }) {
1066
- return /* @__PURE__ */ import_react8.default.createElement("span", { className: "wv-tooltip" }, children);
1067
- }
1068
-
1069
- // src/components/slider/index.tsx
1070
- var import_clsx3 = __toESM(require("clsx"));
1071
- var import_react11 = require("keen-slider/react");
1072
- var import_react12 = __toESM(require("react"));
1073
-
1074
- // src/components/slider/arrows.tsx
1075
- var import_react9 = require("@stitches/react");
1076
- var import_clsx2 = __toESM(require("clsx"));
1077
- var import_react10 = __toESM(require("react"));
1078
- function Arrows(props) {
1079
- let { currentSlide, instanceRef, className, icon, offset } = props;
1080
- let isFirst = currentSlide === 0;
1081
- let isLast = false;
1082
- if (instanceRef.current) {
1083
- isLast = currentSlide === instanceRef?.current?.track?.details?.maxIdx;
1084
- }
1085
- let style = {
1086
- "--offset": `${offset}px`
1087
- };
1088
- return /* @__PURE__ */ import_react10.default.createElement(StyledArrows, { className, style }, /* @__PURE__ */ import_react10.default.createElement(
1089
- "button",
1090
- {
1091
- type: "button",
1092
- className: (0, import_clsx2.default)("arrow arrow--left", isFirst && "arrow--disabled"),
1093
- onClick: (e) => {
1094
- e.stopPropagation();
1095
- instanceRef?.current?.prev();
1096
- }
1097
- },
1098
- /* @__PURE__ */ import_react10.default.createElement(Icon, { name: icon === "caret" ? "CaretLeft" : "ArrowLeft" })
1099
- ), /* @__PURE__ */ import_react10.default.createElement(
1100
- "button",
1101
- {
1102
- type: "button",
1103
- className: (0, import_clsx2.default)("arrow arrow--right", isLast && "arrow--disabled"),
1104
- onClick: (e) => {
1105
- e.stopPropagation();
1106
- instanceRef?.current?.next();
1107
- }
1108
- },
1109
- /* @__PURE__ */ import_react10.default.createElement(Icon, { name: icon === "caret" ? "CaretRight" : "ArrowRight" })
1110
- ));
1111
- }
1112
- var StyledArrows = (0, import_react9.styled)("div", {
1113
- ".arrow": {
1114
- position: "absolute",
1115
- top: "50%",
1116
- transform: "translateY(-50%)",
1117
- width: "44px",
1118
- height: "44px",
1119
- padding: "8px",
1120
- color: "#191919",
1121
- backgroundColor: "#f2f2f2",
1122
- textAlign: "center",
1123
- transition: "all 0.2s ease-in-out",
1124
- borderRadius: "4px",
1125
- border: "none",
1126
- cursor: "pointer",
1127
- "&:hover": {
1128
- backgroundColor: "#191919",
1129
- color: "#f2f2f2"
1130
- },
1131
- svg: {
1132
- verticalAlign: "middle",
1133
- width: "22px",
1134
- height: "22px"
1135
- },
1136
- "&.arrow--left": {
1137
- left: "var(--offset, 0px)"
1138
- },
1139
- "&.arrow--right": {
1140
- right: "var(--offset, 0px)"
1141
- },
1142
- "&.arrow--disabled": {
1143
- opacity: 0.5
1144
- }
1145
- },
1146
- "@media (max-width: 768px)": {
1147
- ".arrow": {
1148
- display: "none"
1149
- }
1150
- }
1151
- });
1152
-
1153
- // src/components/slider/resize-plugin.ts
1154
- var ResizePlugin = (slider) => {
1155
- let observer = new ResizeObserver(() => slider.update());
1156
- slider.on("created", () => {
1157
- observer.observe(slider.container);
1158
- });
1159
- slider.on("destroyed", () => {
1160
- observer.unobserve(slider.container);
1161
- });
1162
- };
1163
-
1164
- // src/components/slider/index.tsx
1165
- function Slider(props) {
1166
- let { children, className, gap, slidesPerView, arrowOffset } = props;
1167
- let [currentSlide, setCurrentSlide] = (0, import_react12.useState)(0);
1168
- let [created, setCreated] = (0, import_react12.useState)(false);
1169
- let [ref, instanceRef] = (0, import_react11.useKeenSlider)(
1170
- {
1171
- slides: { perView: slidesPerView, spacing: gap },
1172
- breakpoints: {
1173
- "(max-width: 1024px)": {
1174
- slides: { perView: 3, spacing: gap }
1175
- },
1176
- "(max-width: 768px)": {
1177
- slides: {
1178
- perView: 1,
1179
- spacing: 32
1180
- }
1181
- }
1182
- },
1183
- created: () => {
1184
- setCreated(true);
1185
- },
1186
- slideChanged: (slider) => {
1187
- setCurrentSlide(slider.track.details.rel);
1188
- }
1189
- },
1190
- [ResizePlugin]
1191
- );
1192
- let _className = (0, import_clsx3.default)("keen-slider", className);
1193
- let arrowsClass = (0, import_clsx3.default)(className && `${className}-arrows`);
1194
- return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement("div", { ref, className: _className }, /* @__PURE__ */ import_react12.default.createElement(
1195
- "link",
1196
- {
1197
- rel: "stylesheet",
1198
- href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
1199
- }
1200
- ), children), created && instanceRef?.current && /* @__PURE__ */ import_react12.default.createElement(
1201
- Arrows,
1202
- {
1203
- currentSlide,
1204
- instanceRef,
1205
- className: arrowsClass,
1206
- offset: arrowOffset,
1207
- icon: "arrow"
1208
- }
1209
- ));
1210
- }
1211
-
1212
- // src/components/background.tsx
1213
- var import_react13 = __toESM(require("react"));
1214
- function Background(props) {
1215
- let {
1216
- backgroundColor,
1217
- backgroundImage,
1218
- backgroundFit,
1219
- backgroundPosition,
1220
- className
1221
- } = props;
1222
- let style = {
1223
- display: "block",
1224
- position: "absolute",
1225
- inset: 0,
1226
- backgroundColor
1227
- };
1228
- if (backgroundImage || backgroundColor) {
1229
- return /* @__PURE__ */ import_react13.default.createElement("div", { style, className }, backgroundImage && /* @__PURE__ */ import_react13.default.createElement(
1230
- "img",
1231
- {
1232
- width: "100%",
1233
- height: "100%",
1234
- "data-blink-src": backgroundImage,
1235
- alt: "Background",
1236
- style: {
1237
- objectFit: backgroundFit,
1238
- objectPosition: backgroundPosition
1239
- }
1240
- }
1241
- ));
1242
- }
1243
- return null;
1244
- }
1245
-
1246
- // src/components/overlay.tsx
1247
- var import_react14 = __toESM(require("react"));
1248
- function Overlay2(props) {
1249
- let { enableOverlay, overlayOpacity, className } = props;
1250
- if (enableOverlay) {
1251
- return /* @__PURE__ */ import_react14.default.createElement(
1252
- "div",
1253
- {
1254
- className,
1255
- style: {
1256
- position: "absolute",
1257
- inset: 0,
1258
- display: "block",
1259
- backgroundColor: `rgba(0, 0, 0, ${overlayOpacity / 100})`
1260
- }
1261
- }
1262
- );
1263
- }
1264
- return null;
1265
- }
1266
-
1267
- // src/components/slider/dots.tsx
1268
- var import_react15 = require("@stitches/react");
1269
- var import_clsx4 = __toESM(require("clsx"));
1270
- var import_react16 = __toESM(require("react"));
1271
- function Dots(props) {
1272
- let { currentSlide, instanceRef, className, absolute, position, color } = props;
1273
- let _className = (0, import_clsx4.default)(
1274
- className,
1275
- absolute && "dots--absolute",
1276
- position && `dots--${position}`,
1277
- color && `dots--${color}`
1278
- );
1279
- return /* @__PURE__ */ import_react16.default.createElement(StyledDots, { className: _className }, [...Array(instanceRef.current?.track.details.slides.length).keys()].map(
1280
- (idx) => {
1281
- let className2 = (0, import_clsx4.default)("dot", currentSlide === idx && "dot--active");
1282
- return /* @__PURE__ */ import_react16.default.createElement(
1283
- "button",
1284
- {
1285
- key: idx,
1286
- type: "button",
1287
- onClick: () => instanceRef.current?.moveToIdx(idx),
1288
- className: className2
1289
- }
1290
- );
1291
- }
1292
- ));
1293
- }
1294
- var StyledDots = (0, import_react15.styled)("div", {
1295
- padding: "10px 0",
1296
- display: "flex",
1297
- justifyContent: "center",
1298
- alignItems: "center",
1299
- gap: "12px",
1300
- "&.dots--absolute": {
1301
- position: "absolute",
1302
- "&.dots--top, &.dots--bottom": { left: 0, right: 0 },
1303
- "&.dots--top": { top: 10 },
1304
- "&.dots--bottom": { bottom: 10 },
1305
- "&.dots--left, &.dots--right": {
1306
- top: 0,
1307
- bottom: 0,
1308
- flexDirection: "column"
1309
- },
1310
- "&.dots--left": { left: 20 },
1311
- "&.dots--right": { right: 20 }
1312
- },
1313
- "&.dots--light": {
1314
- ".dot": {
1315
- backgroundColor: "#ffffff66",
1316
- "&.dot--active": {
1317
- backgroundColor: "#ffffff"
1318
- }
1319
- }
1320
- },
1321
- "&.dots--dark": {
1322
- ".dot": {
1323
- backgroundColor: "#00000033",
1324
- "&.dot--active": {
1325
- backgroundColor: "#000000"
1326
- }
1327
- }
1328
- },
1329
- ".dot": {
1330
- width: "9px",
1331
- height: "9px",
1332
- padding: "0",
1333
- border: "none",
1334
- borderRadius: "50%",
1335
- transition: "all 0.2s ease-in-out"
1336
- }
1337
- });
1338
-
1339
- // src/components/slider/autoplay-plugin.ts
1340
- function AutoplayPlugin(changeSlidesEvery) {
1341
- return (slider) => {
1342
- let timeout;
1343
- let mouseOver = false;
1344
- function clearNextTimeout() {
1345
- clearTimeout(timeout);
1346
- }
1347
- function nextTimeout() {
1348
- clearTimeout(timeout);
1349
- if (mouseOver)
1350
- return;
1351
- timeout = setTimeout(() => {
1352
- slider.next();
1353
- }, changeSlidesEvery * 1e3);
1354
- }
1355
- slider.on("created", () => {
1356
- slider.container.addEventListener("mouseover", () => {
1357
- mouseOver = true;
1358
- clearNextTimeout();
1359
- });
1360
- slider.container.addEventListener("mouseout", () => {
1361
- mouseOver = false;
1362
- nextTimeout();
1363
- });
1364
- nextTimeout();
1365
- });
1366
- slider.on("dragStarted", clearNextTimeout);
1367
- slider.on("animationEnded", nextTimeout);
1368
- slider.on("updated", nextTimeout);
1369
- };
1370
- }
1371
-
1372
- // src/components/placeholder.tsx
1373
- var import_react17 = __toESM(require("react"));
1374
- var Placeholder = (0, import_react17.forwardRef)(
1375
- (props, ref) => {
1376
- let { element, className, children, ...rest } = props;
1377
- return /* @__PURE__ */ import_react17.default.createElement("div", { "data-wv-placeholder": true, ref, className, ...rest }, /* @__PURE__ */ import_react17.default.createElement(
1378
- "div",
1379
- {
1380
- style: { fontWeight: 600, margin: "10px 0 5px", padding: "0 10px" }
1381
- },
1382
- element
1383
- ), /* @__PURE__ */ import_react17.default.createElement(
1384
- "div",
1385
- {
1386
- style: {
1387
- margin: "5px 0 10px",
1388
- textAlign: "center",
1389
- padding: "0 10px"
1390
- }
1391
- },
1392
- children
1393
- ));
1394
- }
1395
- );
1396
- var placeholder_default = Placeholder;
1397
-
1398
- // src/components/no-hydrate.tsx
1399
- var import_react18 = __toESM(require("react"));
1400
- function NoHydrate({ id, getHTML, ...rest }) {
1401
- let [html] = (0, import_react18.useState)(() => {
1402
- if (typeof document === "undefined") {
1403
- return getHTML?.() ?? "";
1404
- }
1405
- let el = document.getElementById(id);
1406
- if (!el)
1407
- return getHTML?.() ?? "";
1408
- return el.innerHTML;
1409
- });
1410
- return /* @__PURE__ */ import_react18.default.createElement("div", { ...rest, id, dangerouslySetInnerHTML: { __html: html } });
1411
- }
1412
-
1413
- // src/components/index.ts
1414
- var Components = {
1415
- Background,
1416
- Icon,
1417
- ModalComponents: modal_exports,
1418
- Overlay: Overlay2,
1419
- Placeholder: placeholder_default,
1420
- Spinner,
1421
- Slider,
1422
- Tooltip,
1423
- NoHydrate
1424
- };
1425
- var SliderComponents = {
1426
- Arrows,
1427
- Dots,
1428
- ResizePlugin,
1429
- AutoplayPlugin
1430
- };
1431
-
1432
- // src/elements/container.tsx
1433
- var Container = (0, import_react19.forwardRef)(
1434
- (props, ref) => {
1435
- let { children, ...rest } = props;
1436
- return /* @__PURE__ */ import_react19.default.createElement("div", { ref, ...rest }, import_react19.Children.count(children) ? children : /* @__PURE__ */ import_react19.default.createElement(Components.Placeholder, { element: "Container" }, "Drop element here"));
1437
- }
1438
- );
1439
- var css2 = {
1440
- "@desktop": {
1441
- display: "flex",
1442
- alignItems: "flex-start",
1443
- justifyContent: "flex-start",
1444
- gridArea: "1 / 1 / 3 / 6",
1445
- overflow: "hidden",
1446
- // minWidth: '300px',
1447
- minHeight: "100px"
1448
- },
1449
- "@mobile": {
1450
- minHeight: "100px"
1451
- }
1452
- };
1453
- Container.defaultProps = {};
1454
- var container_default = Container;
1455
-
1456
- // src/elements/countdown/index.tsx
1457
- var import_react21 = __toESM(require("react"));
1458
-
1459
- // src/constant/index.ts
1460
- var TIMES = ["days", "hours", "minutes", "seconds"];
1461
- var COUNTDOWN_KEY = "wv-cd-evergreen-start";
1462
- var INSTAGRAM_API = "https://graph.instagram.com";
1463
-
1464
- // src/utils/index.ts
1465
- function getTime(_seconds) {
1466
- let ONE_MINUTE = 60 * 1e3;
1467
- let ONE_HOUR = 60 * ONE_MINUTE;
1468
- let ONE_DAY = 24 * ONE_HOUR;
1469
- let days = Math.floor(_seconds / ONE_DAY);
1470
- let hours = Math.floor((_seconds - days * ONE_DAY) / ONE_HOUR);
1471
- let minutes = Math.floor(
1472
- (_seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE
1473
- );
1474
- let seconds = Math.floor(
1475
- (_seconds - days * ONE_DAY - hours * ONE_HOUR - minutes * ONE_MINUTE) / 1e3
1476
- );
1477
- return { days, hours, minutes, seconds };
1478
- }
1479
- function getYoutubeEmbedId(url) {
1480
- const match = url.match(
1481
- /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/
1482
- );
1483
- return match ? match[1] : null;
1484
- }
1485
- function getVimeoId(url) {
1486
- const match = url.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(.+)/);
1487
- return match ? match[1] : null;
1488
- }
1489
-
1490
- // src/elements/countdown/timer-block.tsx
1491
- var import_react20 = __toESM(require("react"));
1492
- function TimerBlock({ value, label }) {
1493
- return /* @__PURE__ */ import_react20.default.createElement("div", { className: "wv-cd-block" }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "wv-cd-number" }, typeof value === "string" ? value : value.toString().padStart(2, "0")), label && /* @__PURE__ */ import_react20.default.createElement("div", { className: "wv-cd-label" }, label));
1494
- }
1495
-
1496
- // src/elements/countdown/index.tsx
1497
- var Countdown = (0, import_react21.forwardRef)(
1498
- (props, ref) => {
1499
- const { isDesignMode } = (0, import_react21.useContext)(WeaverseContext);
1500
- let {
1501
- timerType,
1502
- startTime: startTimeProp,
1503
- endTime: endTimeProp,
1504
- periods: periodsProp,
1505
- redirectWhenTimerStops,
1506
- redirectUrl,
1507
- openInNewTab,
1508
- showColon,
1509
- showLabel,
1510
- ...rest
1511
- } = props;
1512
- const [remaining, setRemaining] = import_react21.default.useState(0);
1513
- let periods = periodsProp * 60 * 1e3;
1514
- const handleEnd = () => {
1515
- if (!isDesignMode && redirectWhenTimerStops && redirectUrl)
1516
- window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
1517
- };
1518
- const getStartTime = () => {
1519
- let startTime = startTimeProp;
1520
- if (timerType === "evergreen") {
1521
- const start = localStorage.getItem(COUNTDOWN_KEY);
1522
- if (start) {
1523
- startTime = Number.parseInt(start);
1524
- if (startTime + periods < Date.now()) {
1525
- startTime = Date.now();
1526
- localStorage.setItem(COUNTDOWN_KEY, startTime.toString());
1527
- }
1528
- } else {
1529
- startTime = Date.now();
1530
- localStorage.setItem(COUNTDOWN_KEY, startTime.toString());
1531
- }
1532
- }
1533
- return startTime;
1534
- };
1535
- const checkActive = (startTime) => startTime < Date.now() && endTimeProp > Date.now();
1536
- const handleRemaining = () => {
1537
- let startTime = getStartTime();
1538
- let endTime = timerType === "fixed-time" ? endTimeProp : startTime + periods;
1539
- let isActive = checkActive(startTime);
1540
- const remainingTime = isActive ? Math.max(endTime - Date.now(), 0) : 0;
1541
- if (remainingTime > 0 && remainingTime < 1e3) {
1542
- handleEnd();
1543
- }
1544
- setRemaining(remainingTime);
1545
- };
1546
- (0, import_react21.useEffect)(() => {
1547
- let intervalFlag = setInterval(
1548
- handleRemaining,
1549
- 1e3
1550
- );
1551
- return () => {
1552
- clearInterval(intervalFlag);
1553
- };
1554
- }, [startTimeProp, endTimeProp, periods, timerType]);
1555
- const timer = getTime(remaining);
1556
- return /* @__PURE__ */ import_react21.default.createElement("div", { ref, ...rest }, TIMES.map((time) => {
1557
- return /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, { key: time }, /* @__PURE__ */ import_react21.default.createElement(
1558
- TimerBlock,
1559
- {
1560
- label: showLabel ? time : "",
1561
- value: remaining === 0 ? "--" : timer[time]
1562
- }
1563
- ), time !== "seconds" && /* @__PURE__ */ import_react21.default.createElement("div", { className: "wv-cd-separator" }, showColon && /* @__PURE__ */ import_react21.default.createElement("span", null, ":")));
1564
- }));
1565
- }
1566
- );
1567
- var css3 = {
1568
- "@desktop": {
1569
- fontSize: "36px",
1570
- fontWeight: 500,
1571
- display: "flex",
1572
- alignItems: "center",
1573
- overflow: "hidden",
1574
- justifyContent: "center",
1575
- gap: 10,
1576
- lineHeight: "initial",
1577
- ".wv-cd-block": {
1578
- textAlign: "center",
1579
- ".wv-cd-label": {
1580
- fontSize: 10
1581
- }
1582
- },
1583
- ".wv-cd-separator": {
1584
- span: {
1585
- lineHeight: "100%"
1586
- },
1587
- ".hidden": {
1588
- visibility: "hidden"
1589
- }
1590
- }
1591
- }
1592
- };
1593
- Countdown.defaultProps = {
1594
- timerType: "fixed-time",
1595
- startTime: Date.now(),
1596
- endTime: Date.now() + 1e3 * 60 * 60 * 24,
1597
- periods: 90,
1598
- redirectWhenTimerStops: false,
1599
- redirectUrl: "",
1600
- openInNewTab: false,
1601
- showLabel: true,
1602
- showColon: true
1603
- };
1604
- var countdown_default = Countdown;
1605
-
1606
- // src/elements/image.tsx
1607
- var import_react22 = __toESM(require("react"));
1608
- var Image2 = import_react22.default.forwardRef(
1609
- (props, ref) => {
1610
- let {
1611
- src,
1612
- alt,
1613
- objectFit,
1614
- objectPosition,
1615
- clickAction,
1616
- openLinkInNewTab,
1617
- linkTo,
1618
- ...rest
1619
- } = props;
1620
- let style = {
1621
- "--img-object-fit": objectFit,
1622
- "--img-object-position": objectPosition
1623
- };
1624
- let content = /* @__PURE__ */ import_react22.default.createElement("img", { alt, "data-blink-src": src });
1625
- if (clickAction === "openLink" && linkTo) {
1626
- content = /* @__PURE__ */ import_react22.default.createElement(
1627
- "a",
1628
- {
1629
- href: linkTo,
1630
- target: openLinkInNewTab ? "_blank" : "_self",
1631
- rel: "noreferrer"
1632
- },
1633
- /* @__PURE__ */ import_react22.default.createElement("img", { alt, "data-blink-src": src })
1634
- );
1635
- }
1636
- return /* @__PURE__ */ import_react22.default.createElement("div", { ref, style, ...rest }, content);
1637
- }
1638
- );
1639
- var css4 = {
1640
- "@desktop": {
1641
- display: "flex",
1642
- overflow: "hidden",
1643
- justifyContent: "center",
1644
- alignItems: "center",
1645
- img: {
1646
- width: "100%",
1647
- height: "100%",
1648
- objectFit: "var(--img-object-fit, cover)",
1649
- objectPosition: "var(--img-object-position, center)"
1650
- }
1651
- }
1652
- };
1653
- Image2.defaultProps = {
1654
- src: "https://ucarecdn.com/dac0f414-2b1f-46df-99ce-41554f0f653a/",
1655
- alt: "Alternative information",
1656
- objectFit: "cover",
1657
- objectPosition: "center center",
1658
- clickAction: "none",
1659
- openLinkInNewTab: false,
1660
- linkTo: ""
1661
- };
1662
- var image_default = Image2;
1663
-
1664
- // src/elements/layout.tsx
1665
- var import_react23 = __toESM(require("react"));
1666
- var Layout = (0, import_react23.forwardRef)((props, ref) => {
1667
- let {
1668
- children,
1669
- rows,
1670
- gap,
1671
- rowSize,
1672
- columns,
1673
- contentSize,
1674
- gridSize,
1675
- backgroundColor,
1676
- backgroundImage,
1677
- objectFit,
1678
- objectPosition,
1679
- enableOverlay,
1680
- overlayOpacity,
1681
- ...rest
1682
- } = props;
1683
- let style = {
1684
- "--layout-content-width": "100vw",
1685
- "--content-size": contentSize + "px",
1686
- "--grid-size": gridSize + "px",
1687
- "--rows": rows,
1688
- "--columns": columns,
1689
- "--gap": gap + "px",
1690
- "--row-size": rowSize + "px",
1691
- "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
1692
- };
1693
- return /* @__PURE__ */ import_react23.default.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ import_react23.default.createElement(
1694
- Background,
1695
- {
1696
- backgroundImage,
1697
- backgroundColor,
1698
- backgroundFit: objectFit,
1699
- backgroundPosition: objectPosition
1700
- }
1701
- ), /* @__PURE__ */ import_react23.default.createElement(Overlay2, { enableOverlay, overlayOpacity }), /* @__PURE__ */ import_react23.default.createElement("div", { "data-layout-content": true }, children));
1702
- });
1703
- var css5 = {
1704
- "@desktop": {
1705
- position: "relative",
1706
- "> [data-layout-content]": {
1707
- // paddingTop: 'var(--gap)',
1708
- // paddingBottom: 'var(--gap)',
1709
- margin: "0 auto",
1710
- display: "grid",
1711
- gridTemplateRows: "repeat(var(--rows), var(--row-size))",
1712
- gridTemplateColumns: "calc((var(--layout-content-width) - var(--content-size)) / 2) 1fr repeat(var(--columns), minmax(0, var(--col-size))) 1fr calc((var(--layout-content-width) - var(--content-size)) / 2)",
1713
- gridAutoRows: "var(--row-size)",
1714
- gap: "var(--gap)",
1715
- maxWidth: "var(--layout-content-width)"
1716
- }
1717
- },
1718
- "@mobile": {
1719
- padding: "0 16px",
1720
- "> [data-layout-content]": {
1721
- display: "flex",
1722
- flexDirection: "column"
1723
- }
1724
- }
1725
- };
1726
- Layout.defaultProps = {
1727
- contentSize: 1600,
1728
- gridSize: 1224,
1729
- rows: 16,
1730
- columns: 12,
1731
- gap: 16,
1732
- rowSize: 48,
1733
- objectFit: "cover",
1734
- objectPosition: "center center",
1735
- enableOverlay: false,
1736
- overlayOpacity: 30
1737
- };
1738
- var layout_default = Layout;
1739
-
1740
- // src/elements/map.tsx
1741
- var import_react24 = __toESM(require("react"));
1742
- var Map = (0, import_react24.forwardRef)((props, ref) => {
1743
- let { place, zoom, ...rest } = props;
1744
- return /* @__PURE__ */ import_react24.default.createElement("div", { ref, ...rest }, /* @__PURE__ */ import_react24.default.createElement(
1745
- "iframe",
1746
- {
1747
- loading: "lazy",
1748
- width: "100%",
1749
- height: "100%",
1750
- title: "map",
1751
- src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
1752
- style: { pointerEvents: "none" }
1753
- }
1754
- ));
1755
- });
1756
- var css6 = {
1757
- "@desktop": {
1758
- iframe: {
1759
- border: "none"
1760
- }
1761
- },
1762
- "@mobile": {
1763
- iframe: {
1764
- border: "none"
1765
- }
1766
- }
1767
- };
1768
- Map.defaultProps = {
1769
- place: "Hanoi",
1770
- zoom: 14
1771
- };
1772
- var map_default = Map;
1773
-
1774
- // src/elements/text.tsx
1775
- var React20 = __toESM(require("react"));
1776
- var Text = React20.forwardRef(
1777
- (props, ref) => {
1778
- let { children, value, ...rest } = props;
1779
- return /* @__PURE__ */ React20.createElement("div", { ref, ...rest }, /* @__PURE__ */ React20.createElement(
1780
- "div",
1781
- {
1782
- className: "wv-text-content",
1783
- dangerouslySetInnerHTML: { __html: value }
1784
- }
1785
- ));
1786
- }
1787
- );
1788
- var css7 = {
1789
- "@desktop": {
1790
- display: "flex",
1791
- padding: "10px",
1792
- overflow: "hidden",
1793
- ".wv-text-content": {
1794
- width: "100%",
1795
- height: "fit-content",
1796
- "> p, > h1, > h2, > h3, > h4, > h5, > h6": {
1797
- all: "inherit",
1798
- margin: "0",
1799
- wordBreak: "break-word",
1800
- overflowWrap: "break-word",
1801
- width: "auto",
1802
- height: "auto"
1803
- }
1804
- }
1805
- }
1806
- };
1807
- Text.defaultProps = {
1808
- value: "<p>The quick brown fox jumps over the lazy dog</p>"
1809
- };
1810
- var text_default = Text;
1811
-
1812
- // src/elements/scrolling-text.tsx
1813
- var import_react25 = __toESM(require("react"));
1814
- var import_react26 = require("react");
1815
- var ScrollingText = import_react25.default.forwardRef((props, ref) => {
1816
- let { children, value, gap, speed, pauseOnHover, ...rest } = props;
1817
- let [playState, setPlayState] = (0, import_react26.useState)("running");
1818
- let style = {
1819
- "--gap": `${gap}px`,
1820
- "--speed": `${speed}s`,
1821
- "--play-state": playState
1822
- };
1823
- let events = {};
1824
- if (pauseOnHover) {
1825
- events = {
1826
- onMouseEnter: () => setPlayState("paused"),
1827
- onMouseLeave: () => setPlayState("running")
1828
- };
1829
- }
1830
- return /* @__PURE__ */ import_react25.default.createElement("div", { ref, ...rest }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "wv-scrolling-text__container", style, ...events }, Array.from({ length: 30 }).map((_, i) => /* @__PURE__ */ import_react25.default.createElement(
1831
- "div",
1832
- {
1833
- key: i,
1834
- className: "wv-text-content",
1835
- dangerouslySetInnerHTML: { __html: value }
1836
- }
1837
- ))));
1838
- });
1839
- var css8 = {
1840
- "@desktop": {
1841
- display: "flex",
1842
- padding: "10px",
1843
- overflow: "hidden",
1844
- ".wv-scrolling-text__container": {
1845
- visibility: "visible",
1846
- whiteSpace: "nowrap",
1847
- display: "flex",
1848
- gap: "var(--gap, 40px)",
1849
- animation: "wv-scrolling-text var(--speed, 100s) linear infinite",
1850
- animationPlayState: "var(--play-state, running)",
1851
- ".wv-text-content": {
1852
- width: "100%",
1853
- height: "fit-content",
1854
- "> p, > h1, > h2, > h3, > h4, > h5, > h6": {
1855
- all: "inherit",
1856
- margin: "0",
1857
- wordBreak: "break-word",
1858
- overflowWrap: "break-word",
1859
- width: "auto",
1860
- height: "auto"
1861
- }
1862
- }
1863
- }
1864
- }
1865
- };
1866
- ScrollingText.defaultProps = {
1867
- value: "<p>The quick brown fox jumps over the lazy dog</p>",
1868
- gap: 40,
1869
- speed: 200,
1870
- pauseOnHover: true
1871
- };
1872
- var scrolling_text_default = ScrollingText;
1873
-
1874
- // src/elements/video/index.tsx
1875
- var import_react30 = __toESM(require("react"));
1876
51
 
1877
- // src/elements/video/html-video.tsx
1878
- var import_react27 = __toESM(require("react"));
1879
- function HTMLVideo(props) {
1880
- let { src, type, controls, autoPlay, loop, muted } = props;
1881
- return /* @__PURE__ */ import_react27.default.createElement(
1882
- "video",
1883
- {
1884
- controls,
1885
- autoPlay,
1886
- loop,
1887
- muted,
1888
- controlsList: "nodownload",
1889
- disablePictureInPicture: true
1890
- },
1891
- /* @__PURE__ */ import_react27.default.createElement("source", { src, type: type || "video/mp4" }),
1892
- /* @__PURE__ */ import_react27.default.createElement("source", { src, type: "video/ogg" }),
1893
- "Your browser does not support the video tag."
1894
- );
1895
- }
1896
-
1897
- // src/elements/video/vimeo.tsx
1898
- var import_react28 = __toESM(require("react"));
1899
- function Vimeo(props) {
1900
- let { vimeoId, controls, autoPlay, loop, muted } = props;
1901
- let params = `autoplay=${autoPlay}&loop=${loop}&controls=${controls}&muted=${muted}`;
1902
- let vimeoSrc = `https://player.vimeo.com/video/${vimeoId}?${params}`;
1903
- return /* @__PURE__ */ import_react28.default.createElement("iframe", { src: vimeoSrc, width: "100%", height: "100%", allowFullScreen: true });
1904
- }
1905
-
1906
- // src/elements/video/youtube.tsx
1907
- var import_react29 = __toESM(require("react"));
1908
- function Youtube(props) {
1909
- let { youtubeId, controls, autoPlay, loop, muted } = props;
1910
- let params = new URLSearchParams({
1911
- autoplay: autoPlay ? "1" : "0",
1912
- controls: controls ? "1" : "0",
1913
- loop: loop ? "1" : "0",
1914
- mute: muted ? "1" : "0"
1915
- });
1916
- let youtubeSrc = `https://www.youtube.com/embed/${youtubeId}?playlist=${youtubeId}&${params.toString()}`;
1917
- let allow = `accelerometer;${autoPlay ? "autoplay;" : ""} clipboard-write; encrypted-media; gyroscope; picture-in-picture`;
1918
- return /* @__PURE__ */ import_react29.default.createElement("iframe", { src: youtubeSrc, width: "100%", height: "100%", allow });
1919
- }
1920
-
1921
- // src/elements/video/index.tsx
1922
- var Video = (0, import_react30.forwardRef)((props, ref) => {
1923
- let { isDesignMode } = (0, import_react30.useContext)(WeaverseContext);
1924
- let {
1925
- src,
1926
- controls,
1927
- poster,
1928
- autoPlay: originAutoPlay,
1929
- loop,
1930
- muted,
1931
- ...rest
1932
- } = props;
1933
- let autoPlay = !isDesignMode && originAutoPlay;
1934
- let videoProps = { src, controls, poster, autoPlay, loop, muted };
1935
- let content;
1936
- let youtubeId = getYoutubeEmbedId(src);
1937
- let vimeoId = getVimeoId(src);
1938
- if (youtubeId) {
1939
- content = /* @__PURE__ */ import_react30.default.createElement(Youtube, { ...videoProps, youtubeId });
1940
- } else if (vimeoId) {
1941
- content = /* @__PURE__ */ import_react30.default.createElement(Vimeo, { ...videoProps, vimeoId });
1942
- } else {
1943
- content = /* @__PURE__ */ import_react30.default.createElement(HTMLVideo, { ...videoProps });
1944
- }
1945
- return /* @__PURE__ */ import_react30.default.createElement("div", { ref, ...rest }, content);
1946
- });
1947
- var css9 = {
1948
- "@desktop": {
1949
- video: {
1950
- height: "100%",
1951
- width: "100%",
1952
- aspectRatio: "16 / 9"
1953
- },
1954
- iframe: {
1955
- border: "none"
1956
- }
1957
- },
1958
- "@mobile": {
1959
- iframe: {
1960
- border: "none"
1961
- }
1962
- }
1963
- };
1964
- Video.defaultProps = {
1965
- src: "https://youtu.be/wM-NT6hcw48",
1966
- poster: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/-/preview/-/quality/smart/-/format/auto/",
1967
- loop: false,
1968
- controls: false,
1969
- autoPlay: true,
1970
- muted: true
1971
- };
1972
- var video_default = Video;
1973
-
1974
- // src/elements/instagram.tsx
1975
- var import_react31 = __toESM(require("react"));
1976
- var Instagram = (0, import_react31.forwardRef)(
1977
- (props, ref) => {
1978
- let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
1979
- let [media, setMedia] = (0, import_react31.useState)([]);
1980
- let [error, setError] = (0, import_react31.useState)(null);
1981
- (0, import_react31.useEffect)(() => {
1982
- if (token) {
1983
- let params = new URLSearchParams({
1984
- access_token: token,
1985
- fields: "id,media_type,caption,media_url,permalink,thumbnail_url"
1986
- });
1987
- fetch(`${INSTAGRAM_API}/me/media?${params.toString()}`).then((res) => res.json()).then((res) => {
1988
- if (res.error) {
1989
- setError(res);
1990
- } else {
1991
- setError(null);
1992
- setMedia([...res.data]);
1993
- }
1994
- }).catch(setError);
1995
- }
1996
- }, [token]);
1997
- if (!token || error) {
1998
- return /* @__PURE__ */ import_react31.default.createElement("div", { ref, ...rest }, /* @__PURE__ */ import_react31.default.createElement(Components.Placeholder, { element: "Instagram" }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
1999
- }
2000
- let style = {
2001
- "--wv-ig-images-per-row": imagesPerRow,
2002
- "--wv-ig-images-gap": gap + "px"
2003
- };
2004
- return /* @__PURE__ */ import_react31.default.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "wv-ig-media-container" }, media.slice(0, numberOfImages).map((item) => {
2005
- let {
2006
- id,
2007
- permalink,
2008
- caption,
2009
- media_url,
2010
- media_type,
2011
- thumbnail_url
2012
- } = item;
2013
- if (media_type === "VIDEO") {
2014
- return /* @__PURE__ */ import_react31.default.createElement("video", { key: id, controls: true, poster: thumbnail_url }, /* @__PURE__ */ import_react31.default.createElement("source", { src: media_url, type: "video/mp4" }));
2015
- }
2016
- return /* @__PURE__ */ import_react31.default.createElement("a", { key: id, href: permalink, target: "_blank", rel: "noreferrer" }, /* @__PURE__ */ import_react31.default.createElement("img", { alt: caption, src: media_url }));
2017
- })));
2018
- }
2019
- );
2020
- var css10 = {
2021
- // '@desktop': {
2022
- // '.wv-ig-media-container': {
2023
- // overflow: 'hidden',
2024
- // maxWidth: '100%',
2025
- // maxHeight: '100%',
2026
- // display: 'grid',
2027
- // gridTemplateColumns: 'repeat(var(--wv-ig-images-per-row, 4), 1fr)',
2028
- // gap: 'var(--wv-ig-images-gap, 0px)',
2029
- // img: {
2030
- // // aspectRatio: '1 / 1',
2031
- // maxWidth: '100%',
2032
- // maxHeight: '100%',
2033
- // objectFit: 'cover',
2034
- // },
2035
- // },
2036
- // },
2037
- };
2038
- var permanentCss = {
2039
- "@desktop": {
2040
- ".wv-ig-media-container": {
2041
- overflow: "hidden",
2042
- maxWidth: "100%",
2043
- maxHeight: "100%",
2044
- display: "grid",
2045
- gridTemplateColumns: "repeat(var(--wv-ig-images-per-row, 4), 1fr)",
2046
- gap: "var(--wv-ig-images-gap, 0px)",
2047
- img: {
2048
- // aspectRatio: '1 / 1',
2049
- maxWidth: "100%",
2050
- maxHeight: "100%",
2051
- objectFit: "cover"
2052
- },
2053
- video: {
2054
- width: "100%",
2055
- height: "100%"
2056
- }
2057
- }
2058
- },
2059
- "@mobile": {
2060
- ".wv-ig-media-container": {
2061
- overflowX: "auto",
2062
- display: "flex",
2063
- scrollSnapType: "x mandatory"
2064
- },
2065
- ".wv-ig-media-container a": {
2066
- scrollSnapAlign: "start",
2067
- flexGrow: 0,
2068
- flexShrink: 0,
2069
- flexBasis: "100%"
2070
- }
2071
- }
2072
- };
2073
- Instagram.defaultProps = {
2074
- token: "",
2075
- username: "",
2076
- numberOfImages: 8,
2077
- imagesPerRow: 4,
2078
- gap: 0
2079
- };
2080
- var instagram_default = Instagram;
2081
-
2082
- // src/elements/slideshow/index.tsx
2083
- var import_react34 = require("@stitches/react");
2084
- var import_clsx6 = __toESM(require("clsx"));
2085
- var import_react35 = __toESM(require("react"));
2086
-
2087
- // src/elements/slideshow/use-slideshow-configs.ts
2088
- var import_react32 = require("keen-slider/react");
2089
- var import_react33 = __toESM(require("react"));
52
+ // ../../node_modules/clsx/dist/clsx.m.js
53
+ function r(e) {
54
+ var t, f, n = "";
55
+ if ("string" == typeof e || "number" == typeof e)
56
+ n += e;
57
+ else if ("object" == typeof e)
58
+ if (Array.isArray(e))
59
+ for (t = 0; t < e.length; t++)
60
+ e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
61
+ else
62
+ for (t in e)
63
+ e[t] && (n && (n += " "), n += t);
64
+ return n;
65
+ }
66
+ function clsx() {
67
+ for (var e, t, f = 0, n = ""; f < arguments.length; )
68
+ (e = arguments[f++]) && (t = r(e)) && (n && (n += " "), n += t);
69
+ return n;
70
+ }
71
+ var clsx_m_default = clsx;
2090
72
 
2091
73
  // src/utils/css.ts
2092
- var import_clsx5 = __toESM(require("clsx"));
2093
- function formatCSS(css13) {
74
+ function formatCSS(css) {
2094
75
  return {
2095
- "@desktop": css13["@desktop"],
2096
- "@mobile": css13["@mobile"]
76
+ "@desktop": css["@desktop"],
77
+ "@mobile": css["@mobile"]
2097
78
  };
2098
79
  }
2099
80
  var permanentClasses = {};
2100
81
  function generateItemClassName(instance, stitchesInstance) {
2101
- let { css: css13, type, className: cls = "", tailwindClasses } = instance.data;
82
+ let { css, type, className: cls = "" } = instance.data;
2102
83
  let className = "";
2103
84
  let permanentClass = "";
2104
85
  let perCss = instance.Element?.permanentCss;
@@ -2112,459 +93,25 @@ function generateItemClassName(instance, stitchesInstance) {
2112
93
  }
2113
94
  }
2114
95
  className = permanentClass;
2115
- if (css13) {
2116
- let formattedCss = formatCSS(css13);
96
+ if (css) {
97
+ let formattedCss = formatCSS(css);
2117
98
  let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
2118
99
  let { stitchesClass } = instance;
2119
100
  let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
2120
- className = (0, import_clsx5.default)(
2121
- permanentClass,
2122
- cls,
2123
- tailwindClasses,
2124
- newStitchesClass,
2125
- otherClass
2126
- );
101
+ className = clsx_m_default(permanentClass, cls, newStitchesClass, otherClass);
2127
102
  instance.stitchesClass = newStitchesClass;
2128
103
  }
2129
104
  return className;
2130
105
  }
2131
- function loadCSS(attrs) {
2132
- return new Promise((resolve, reject) => {
2133
- let found = document.querySelector(`link[href="${attrs.href}"]`);
2134
- if (found) {
2135
- return resolve(true);
2136
- }
2137
- let link = document.createElement("link");
2138
- Object.assign(link, attrs);
2139
- link.addEventListener("load", () => resolve(true));
2140
- link.onerror = reject;
2141
- document.head.appendChild(link);
2142
- });
2143
- }
2144
-
2145
- // src/elements/slideshow/use-slideshow-configs.ts
2146
- function useSlideshowConfigs(props) {
2147
- let {
2148
- animation,
2149
- slidesPerView,
2150
- loop,
2151
- autoRotate,
2152
- changeSlidesEvery,
2153
- children
2154
- } = props;
2155
- let { isDesignMode, isPreviewMode } = (0, import_react33.useContext)(WeaverseContext);
2156
- let [opacities, setOpacities] = import_react33.default.useState([]);
2157
- let [cssLoaded, setCssLoaded] = (0, import_react33.useState)(false);
2158
- let [created, setCreated] = (0, import_react33.useState)(false);
2159
- let [ready, setReady] = (0, import_react33.useState)(false);
2160
- let [currentSlide, setCurrentSlide] = (0, import_react33.useState)(0);
2161
- let sliderPlugins = [ResizePlugin];
2162
- if (autoRotate && (isPreviewMode || !isDesignMode)) {
2163
- sliderPlugins.push(AutoplayPlugin(changeSlidesEvery));
2164
- }
2165
- let [sliderRef, instanceRef] = (0, import_react32.useKeenSlider)(
2166
- {
2167
- slides: animation === "fade" ? import_react33.default.Children.count(children) : { perView: slidesPerView, number: import_react33.default.Children.count(children) },
2168
- drag: isPreviewMode || !isDesignMode,
2169
- loop,
2170
- selector: animation === "fade" ? null : ".keen-slider__slide",
2171
- created: (slider) => {
2172
- setCreated(true);
2173
- if (isDesignMode) {
2174
- let slideshowElement = slider.container.closest(
2175
- '[data-wv-type="slideshow"]'
2176
- );
2177
- let elementId = slideshowElement?.getAttribute("data-wv-id");
2178
- if (elementId) {
2179
- window.weaverseSlideshowInstances = {
2180
- [elementId]: slider
2181
- };
2182
- }
2183
- }
2184
- },
2185
- slideChanged: (slider) => {
2186
- setCurrentSlide(slider.track.details.rel);
2187
- },
2188
- detailsChanged: (slider) => {
2189
- let newOpacities = slider.track?.details?.slides?.map(
2190
- (slide) => slide.portion
2191
- );
2192
- setOpacities(newOpacities);
2193
- }
2194
- },
2195
- sliderPlugins
2196
- );
2197
- (0, import_react33.useEffect)(() => {
2198
- loadCSS({
2199
- rel: "stylesheet",
2200
- href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
2201
- }).then(() => setCssLoaded(true));
2202
- }, []);
2203
- (0, import_react33.useEffect)(() => {
2204
- if (created && cssLoaded) {
2205
- setReady(true);
2206
- }
2207
- }, [created, cssLoaded]);
2208
- return {
2209
- sliderRef,
2210
- instanceRef,
2211
- currentSlide,
2212
- opacities,
2213
- ready,
2214
- created
2215
- };
2216
- }
2217
-
2218
- // src/elements/slideshow/index.tsx
2219
- var Slideshow = (0, import_react35.forwardRef)((props, ref) => {
2220
- let {
2221
- animation,
2222
- showArrows,
2223
- showArrowsOnHover,
2224
- arrowIcon,
2225
- arrowsColor,
2226
- showDots,
2227
- dotsPosition,
2228
- dotsColor,
2229
- children,
2230
- ...rest
2231
- } = props;
2232
- let { sliderRef, instanceRef, currentSlide, opacities, ready, created } = useSlideshowConfigs(props);
2233
- let style = {
2234
- "--slider-opacity": ready ? 1 : 0
2235
- };
2236
- let faderClass = "";
2237
- if (animation === "fade") {
2238
- faderClass = (0, import_react34.css)({
2239
- ".keen-slider__slide": opacities.reduce((acc, opacity, index) => {
2240
- acc[`&:nth-child(${index + 1})`] = {
2241
- opacity
2242
- };
2243
- return acc;
2244
- }, {})
2245
- })().className;
2246
- }
2247
- let _className = (0, import_clsx6.default)(
2248
- faderClass,
2249
- animation === "slide" ? "keen-slider" : "keen-fader"
2250
- );
2251
- let arrowsClass = (0, import_clsx6.default)(
2252
- "wv-slideshow--arrows",
2253
- showArrowsOnHover && "show-on-hover",
2254
- `arrows--${arrowsColor}`
2255
- );
2256
- return /* @__PURE__ */ import_react35.default.createElement("div", { ref, style, ...rest }, /* @__PURE__ */ import_react35.default.createElement("div", { ref: sliderRef, className: _className }, children), showArrows && created && instanceRef?.current && /* @__PURE__ */ import_react35.default.createElement(
2257
- Arrows,
2258
- {
2259
- instanceRef,
2260
- currentSlide,
2261
- className: arrowsClass,
2262
- icon: arrowIcon,
2263
- offset: 20
2264
- }
2265
- ), showDots && created && instanceRef?.current && /* @__PURE__ */ import_react35.default.createElement(
2266
- Dots,
2267
- {
2268
- instanceRef,
2269
- currentSlide,
2270
- className: "wv-slideshow--dots",
2271
- position: dotsPosition,
2272
- color: dotsColor,
2273
- absolute: true
2274
- }
2275
- ));
2276
- });
2277
- var css11 = {
2278
- "@desktop": {
2279
- opacity: "var(--slider-opacity, 0)",
2280
- padding: "32px 0",
2281
- position: "relative",
2282
- ".keen-slider": {
2283
- height: "100%"
2284
- },
2285
- ".keen-fader": {
2286
- position: "relative",
2287
- height: "100%",
2288
- ".keen-slider__slide": {
2289
- position: "absolute",
2290
- inset: 0
2291
- }
2292
- },
2293
- ".wv-slideshow--arrows": {
2294
- ".arrow": {
2295
- borderRadius: "100%",
2296
- backgroundColor: "transparent",
2297
- padding: "6px",
2298
- "&:hover": {
2299
- backgroundColor: "#fff"
2300
- },
2301
- svg: {
2302
- width: "28px",
2303
- height: "28px"
2304
- }
2305
- },
2306
- "&.show-on-hover": {
2307
- opacity: 0,
2308
- transition: "opacity 0.3s ease"
2309
- },
2310
- "&.arrows--dark": {
2311
- ".arrow": {
2312
- color: "#000"
2313
- }
2314
- },
2315
- "&.arrows--light": {
2316
- ".arrow": {
2317
- color: "#fff"
2318
- }
2319
- }
2320
- },
2321
- "&:hover": {
2322
- ".wv-slideshow--arrows": {
2323
- opacity: 1
2324
- }
2325
- }
2326
- }
2327
- };
2328
- Slideshow.defaultProps = {
2329
- animation: "slide",
2330
- slidesPerView: 1,
2331
- spacing: 0,
2332
- showArrows: true,
2333
- showArrowsOnHover: false,
2334
- arrowIcon: "caret",
2335
- arrowsColor: "dark",
2336
- showDots: true,
2337
- dotsPosition: "bottom",
2338
- dotsColor: "dark",
2339
- loop: true,
2340
- autoRotate: false,
2341
- changeSlidesEvery: 5
2342
- };
2343
- var slideshow_default = Slideshow;
2344
-
2345
- // src/elements/slideshow/slide.tsx
2346
- var import_react36 = __toESM(require("react"));
2347
-
2348
- // src/elements/slideshow/position.ts
2349
- var slidePositionMap = {
2350
- "top left": {
2351
- justifyContent: "flex-start",
2352
- alignItems: "flex-start"
2353
- },
2354
- "top center": {
2355
- justifyContent: "flex-start",
2356
- alignItems: "center"
2357
- },
2358
- "top right": {
2359
- justifyContent: "flex-start",
2360
- alignItems: "flex-end"
2361
- },
2362
- "center left": {
2363
- justifyContent: "center",
2364
- alignItems: "flex-start"
2365
- },
2366
- "center center": {
2367
- justifyContent: "center",
2368
- alignItems: "center"
2369
- },
2370
- "center right": {
2371
- justifyContent: "center",
2372
- alignItems: "flex-end"
2373
- },
2374
- "bottom left": {
2375
- justifyContent: "flex-end",
2376
- alignItems: "flex-start"
2377
- },
2378
- "bottom center": {
2379
- justifyContent: "flex-end",
2380
- alignItems: "center"
2381
- },
2382
- "bottom right": {
2383
- justifyContent: "flex-end",
2384
- alignItems: "flex-end"
2385
- }
2386
- };
2387
-
2388
- // src/elements/slideshow/slide.tsx
2389
- var Slide = (0, import_react36.forwardRef)((props, ref) => {
2390
- let {
2391
- contentPosition,
2392
- backgroundColor,
2393
- backgroundImage,
2394
- objectFit,
2395
- objectPosition,
2396
- enableOverlay,
2397
- overlayOpacity,
2398
- backgroundFit,
2399
- backgroundPosition,
2400
- children,
2401
- ...rest
2402
- } = props;
2403
- return /* @__PURE__ */ import_react36.default.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ import_react36.default.createElement(
2404
- Background,
2405
- {
2406
- backgroundColor,
2407
- backgroundImage,
2408
- backgroundFit: objectFit,
2409
- backgroundPosition: objectPosition,
2410
- className: "slide-background"
2411
- }
2412
- ), /* @__PURE__ */ import_react36.default.createElement(
2413
- Overlay2,
2414
- {
2415
- enableOverlay,
2416
- overlayOpacity,
2417
- className: "slide-overlay"
2418
- }
2419
- ), /* @__PURE__ */ import_react36.default.createElement("div", { ref, style: slidePositionMap[contentPosition], ...rest }, children?.length ? children : /* @__PURE__ */ import_react36.default.createElement(placeholder_default, { element: "Slide", className: "wv-slide-placeholder" }, "Drag and drop elements here")));
2420
- });
2421
- var css12 = {
2422
- "@desktop": {
2423
- position: "relative",
2424
- height: "100%",
2425
- width: "1224px",
2426
- maxWidth: "100%",
2427
- margin: "0 auto",
2428
- display: "flex",
2429
- flexDirection: "column",
2430
- padding: "100px 20px",
2431
- ".wv-slide-placeholder": {
2432
- height: "200px",
2433
- zIndex: 1
2434
- }
2435
- }
2436
- };
2437
- Slide.defaultProps = {
2438
- contentPosition: "center center",
2439
- objectFit: "cover",
2440
- objectPosition: "center center",
2441
- enableOverlay: false,
2442
- overlayOpacity: 30
2443
- };
2444
- var slide_default = Slide;
2445
-
2446
- // src/elements/index.ts
2447
- var Elements = {
2448
- Countdown: {
2449
- Component: countdown_default,
2450
- type: "countdown",
2451
- defaultCss: css3
2452
- },
2453
- Button: {
2454
- Component: button_default,
2455
- type: "button",
2456
- defaultCss: css
2457
- },
2458
- Container: {
2459
- Component: container_default,
2460
- type: "container",
2461
- defaultCss: css2
2462
- },
2463
- Image: {
2464
- Component: image_default,
2465
- type: "image",
2466
- defaultCss: css4
2467
- },
2468
- Instagram: {
2469
- Component: instagram_default,
2470
- type: "instagram",
2471
- defaultCss: css10,
2472
- permanentCss
2473
- },
2474
- Layout: {
2475
- Component: layout_default,
2476
- type: "layout",
2477
- defaultCss: css5
2478
- },
2479
- Map: {
2480
- Component: map_default,
2481
- type: "map",
2482
- defaultCss: css6
2483
- },
2484
- Text: {
2485
- Component: text_default,
2486
- type: "text",
2487
- defaultCss: css7
2488
- },
2489
- ScrollingText: {
2490
- Component: scrolling_text_default,
2491
- type: "scrolling-text",
2492
- defaultCss: css8
2493
- },
2494
- Video: {
2495
- Component: video_default,
2496
- type: "video",
2497
- defaultCss: css9
2498
- },
2499
- Slideshow: {
2500
- Component: slideshow_default,
2501
- type: "slideshow",
2502
- defaultCss: css11
2503
- },
2504
- Slide: {
2505
- Component: slide_default,
2506
- type: "slide",
2507
- defaultCss: css12
2508
- }
2509
- };
2510
-
2511
- // src/context.ts
2512
- var createRootContext = (configs) => {
2513
- let rootContext = new import_core.Weaverse(configs);
2514
- Object.keys(Elements).forEach((key) => {
2515
- rootContext.registerElement(Elements[key]);
2516
- });
2517
- return rootContext;
2518
- };
2519
- var WeaverseContext = (0, import_react37.createContext)({});
2520
- var WeaverseContextProvider = WeaverseContext.Provider;
2521
- var WeaverseContextConsumer = WeaverseContext.Consumer;
2522
-
2523
- // src/renderer.tsx
2524
- var import_core3 = require("@weaverse/core");
2525
- var import_react38 = __toESM(require("react"));
2526
-
2527
- // src/utils/uploadcare.ts
2528
- var import_core2 = require("@weaverse/core");
2529
- var initialized = false;
2530
- function initUploadCareAdaptiveDelivery(baseUrl) {
2531
- try {
2532
- Promise.resolve().then(() => {
2533
- if (!initialized && import_core2.isBrowser && !window.Blinkloader) {
2534
- initialized = true;
2535
- (function(src, cb) {
2536
- let s = document.createElement("script");
2537
- s.setAttribute("src", src);
2538
- s.onload = cb;
2539
- (document.head || document.body).appendChild(s);
2540
- })(baseUrl + "/static/blinkloader.min.js", function() {
2541
- window.Blinkloader.optimize({
2542
- pubkey: "1a22133d1a1bdc089d4c",
2543
- fadeIn: true,
2544
- lazyload: true,
2545
- smartCompression: true,
2546
- responsive: true,
2547
- retina: true,
2548
- webp: true
2549
- });
2550
- });
2551
- }
2552
- });
2553
- } catch (e) {
2554
- console.error(e);
2555
- }
2556
- }
2557
106
 
2558
107
  // src/renderer.tsx
2559
- var import_clsx7 = __toESM(require("clsx"));
2560
- var WeaverseRoot = (0, import_react38.memo)(({ context }) => {
2561
- let [, setData] = (0, import_react38.useState)(context.data);
2562
- let rootRef = (0, import_react38.useRef)();
108
+ var WeaverseRoot = (0, import_react2.memo)(({ context }) => {
109
+ let [, setData] = (0, import_react2.useState)(context.data);
110
+ let rootRef = (0, import_react2.useRef)();
2563
111
  let renderRoot = () => setData({});
2564
- (0, import_react38.useEffect)(() => {
112
+ (0, import_react2.useEffect)(() => {
2565
113
  context.subscribe(renderRoot);
2566
114
  context.contentRootElement = rootRef.current;
2567
- initUploadCareAdaptiveDelivery(context.weaverseHost);
2568
115
  return () => {
2569
116
  context.unsubscribe(renderRoot);
2570
117
  };
@@ -2572,22 +119,22 @@ var WeaverseRoot = (0, import_react38.memo)(({ context }) => {
2572
119
  let eventHandlers = context?.studioBridge?.eventHandlers || {};
2573
120
  let themeClass = context.stitchesInstance.theme.className;
2574
121
  if (context.data?.rootId) {
2575
- return /* @__PURE__ */ import_react38.default.createElement(
122
+ return /* @__PURE__ */ import_react2.default.createElement(
2576
123
  "div",
2577
124
  {
2578
125
  className: `weaverse-content-root ${themeClass}`,
2579
126
  ...eventHandlers,
2580
127
  ref: rootRef
2581
128
  },
2582
- /* @__PURE__ */ import_react38.default.createElement(WeaverseContextProvider, { value: context }, /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { id: context.data.rootId }))
129
+ /* @__PURE__ */ import_react2.default.createElement(WeaverseContextProvider, { value: context }, /* @__PURE__ */ import_react2.default.createElement(ItemInstance, { id: context.data.rootId }))
2583
130
  );
2584
131
  }
2585
132
  return null;
2586
133
  });
2587
- var ItemComponent = (0, import_react38.memo)(({ instance }) => {
2588
- let context = (0, import_react38.useContext)(WeaverseContext);
134
+ var ItemComponent = (0, import_react2.memo)(({ instance }) => {
135
+ let context = (0, import_react2.useContext)(WeaverseContext);
2589
136
  let { stitchesInstance, elementInstances } = context;
2590
- let [data, setData] = (0, import_react38.useState)(instance.data);
137
+ let [data, setData] = (0, import_react2.useState)(instance.data);
2591
138
  let {
2592
139
  id,
2593
140
  type,
@@ -2597,14 +144,13 @@ var ItemComponent = (0, import_react38.memo)(({ instance }) => {
2597
144
  createdAt,
2598
145
  updatedAt,
2599
146
  deletedAt,
2600
- tailwindClasses,
2601
- css: css13,
147
+ css,
2602
148
  ...rest
2603
149
  } = data;
2604
- (0, import_react38.useEffect)(() => {
150
+ (0, import_react2.useEffect)(() => {
2605
151
  let render = (data2) => setData({ ...data2 });
2606
152
  instance.subscribe(render);
2607
- if (import_core3.isBrowser && !instance.ref.current) {
153
+ if (import_core.isBrowser && !instance.ref.current) {
2608
154
  Object.assign(instance.ref, {
2609
155
  current: document.querySelector(`[data-wv-id="${id}"]`)
2610
156
  });
@@ -2617,44 +163,40 @@ var ItemComponent = (0, import_react38.memo)(({ instance }) => {
2617
163
  if (Component.$$typeof === Symbol.for("react.forward_ref")) {
2618
164
  rest.ref = instance.ref;
2619
165
  }
2620
- return /* @__PURE__ */ import_react38.default.createElement(
166
+ return /* @__PURE__ */ import_react2.default.createElement(
2621
167
  Component,
2622
168
  {
2623
169
  key: id,
2624
170
  "data-wv-type": type,
2625
171
  "data-wv-id": id,
2626
- className: (0, import_clsx7.default)(
172
+ className: clsx_m_default(
2627
173
  generateItemClassName(instance, stitchesInstance),
2628
174
  rest?.data?.className
2629
175
  ),
2630
176
  ...rest
2631
177
  },
2632
- childIds.map((cid) => /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { key: cid, id: cid })),
2633
- children.map((item) => /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { key: item.id, id: item.id }))
178
+ childIds.map((cid) => /* @__PURE__ */ import_react2.default.createElement(ItemInstance, { key: cid, id: cid })),
179
+ children.map((item) => /* @__PURE__ */ import_react2.default.createElement(ItemInstance, { key: item.id, id: item.id }))
2634
180
  );
2635
181
  } else {
2636
182
  console.log(`\u274C Unknown element: ${type}`);
2637
183
  return null;
2638
184
  }
2639
185
  });
2640
- var ItemInstance = (0, import_react38.memo)(({ id }) => {
2641
- let context = (0, import_react38.useContext)(WeaverseContext);
186
+ var ItemInstance = (0, import_react2.memo)(({ id }) => {
187
+ let context = (0, import_react2.useContext)(WeaverseContext);
2642
188
  let { itemInstances } = context;
2643
189
  let instance = itemInstances.get(id);
2644
190
  if (!instance) {
2645
191
  console.warn(`Item instance ${id} not found`);
2646
- return /* @__PURE__ */ import_react38.default.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
192
+ return /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "none" } }, "Item instance ", id, " not found");
2647
193
  }
2648
- return /* @__PURE__ */ import_react38.default.createElement(ItemComponent, { key: id, instance });
194
+ return /* @__PURE__ */ import_react2.default.createElement(ItemComponent, { key: id, instance });
2649
195
  });
2650
196
  // Annotate the CommonJS export names for ESM import in node:
2651
197
  0 && (module.exports = {
2652
- Components,
2653
- Elements,
2654
- SliderComponents,
2655
198
  WeaverseContext,
2656
199
  WeaverseContextConsumer,
2657
200
  WeaverseContextProvider,
2658
- WeaverseRoot,
2659
- createRootContext
201
+ WeaverseRoot
2660
202
  });