@weaverse/react 1.0.46 → 1.0.48

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,2075 +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
- width: 48,
1579
- textAlign: "center",
1580
- ".wv-cd-label": {
1581
- fontSize: 10
1582
- }
1583
- },
1584
- ".wv-cd-separator": {
1585
- span: {
1586
- lineHeight: "100%"
1587
- },
1588
- ".hidden": {
1589
- visibility: "hidden"
1590
- }
1591
- }
1592
- }
1593
- };
1594
- Countdown.defaultProps = {
1595
- timerType: "fixed-time",
1596
- startTime: Date.now(),
1597
- endTime: Date.now() + 1e3 * 60 * 60 * 24,
1598
- periods: 90,
1599
- redirectWhenTimerStops: false,
1600
- redirectUrl: "",
1601
- openInNewTab: false,
1602
- showLabel: true,
1603
- showColon: true
1604
- };
1605
- var countdown_default = Countdown;
1606
-
1607
- // src/elements/image.tsx
1608
- var import_react22 = __toESM(require("react"));
1609
- var Image2 = import_react22.default.forwardRef(
1610
- (props, ref) => {
1611
- let {
1612
- src,
1613
- alt,
1614
- objectFit,
1615
- objectPosition,
1616
- clickAction,
1617
- openLinkInNewTab,
1618
- linkTo,
1619
- ...rest
1620
- } = props;
1621
- let style = {
1622
- "--img-object-fit": objectFit,
1623
- "--img-object-position": objectPosition
1624
- };
1625
- let content = /* @__PURE__ */ import_react22.default.createElement("img", { alt, "data-blink-src": src });
1626
- if (clickAction === "openLink" && linkTo) {
1627
- content = /* @__PURE__ */ import_react22.default.createElement(
1628
- "a",
1629
- {
1630
- href: linkTo,
1631
- target: openLinkInNewTab ? "_blank" : "_self",
1632
- rel: "noreferrer"
1633
- },
1634
- /* @__PURE__ */ import_react22.default.createElement("img", { alt, "data-blink-src": src })
1635
- );
1636
- }
1637
- return /* @__PURE__ */ import_react22.default.createElement("div", { ref, style, ...rest }, content);
1638
- }
1639
- );
1640
- var css4 = {
1641
- "@desktop": {
1642
- display: "flex",
1643
- overflow: "hidden",
1644
- justifyContent: "center",
1645
- alignItems: "center",
1646
- img: {
1647
- width: "100%",
1648
- height: "100%",
1649
- objectFit: "var(--img-object-fit, cover)",
1650
- objectPosition: "var(--img-object-position, center)"
1651
- }
1652
- }
1653
- };
1654
- Image2.defaultProps = {
1655
- src: "https://ucarecdn.com/dac0f414-2b1f-46df-99ce-41554f0f653a/",
1656
- alt: "Alternative information",
1657
- objectFit: "cover",
1658
- objectPosition: "center center",
1659
- clickAction: "none",
1660
- openLinkInNewTab: false,
1661
- linkTo: ""
1662
- };
1663
- var image_default = Image2;
1664
-
1665
- // src/elements/layout.tsx
1666
- var import_react23 = __toESM(require("react"));
1667
- var Layout = (0, import_react23.forwardRef)((props, ref) => {
1668
- let {
1669
- children,
1670
- rows,
1671
- gap,
1672
- rowSize,
1673
- columns,
1674
- contentSize,
1675
- gridSize,
1676
- backgroundColor,
1677
- backgroundImage,
1678
- objectFit,
1679
- objectPosition,
1680
- enableOverlay,
1681
- overlayOpacity,
1682
- ...rest
1683
- } = props;
1684
- let style = {
1685
- "--layout-content-width": "100vw",
1686
- "--content-size": contentSize + "px",
1687
- "--grid-size": gridSize + "px",
1688
- "--rows": rows,
1689
- "--columns": columns,
1690
- "--gap": gap + "px",
1691
- "--row-size": rowSize + "px",
1692
- "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
1693
- };
1694
- return /* @__PURE__ */ import_react23.default.createElement("div", { ref, ...rest, style }, /* @__PURE__ */ import_react23.default.createElement(
1695
- Background,
1696
- {
1697
- backgroundImage,
1698
- backgroundColor,
1699
- backgroundFit: objectFit,
1700
- backgroundPosition: objectPosition
1701
- }
1702
- ), /* @__PURE__ */ import_react23.default.createElement(Overlay2, { enableOverlay, overlayOpacity }), /* @__PURE__ */ import_react23.default.createElement("div", { "data-layout-content": true }, children));
1703
- });
1704
- var css5 = {
1705
- "@desktop": {
1706
- position: "relative",
1707
- "> [data-layout-content]": {
1708
- // paddingTop: 'var(--gap)',
1709
- // paddingBottom: 'var(--gap)',
1710
- margin: "0 auto",
1711
- display: "grid",
1712
- gridTemplateRows: "repeat(var(--rows), var(--row-size))",
1713
- 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)",
1714
- gridAutoRows: "var(--row-size)",
1715
- gap: "var(--gap)",
1716
- maxWidth: "var(--layout-content-width)"
1717
- }
1718
- },
1719
- "@mobile": {
1720
- padding: "0 16px",
1721
- "> [data-layout-content]": {
1722
- display: "flex",
1723
- flexDirection: "column"
1724
- }
1725
- }
1726
- };
1727
- Layout.defaultProps = {
1728
- contentSize: 1600,
1729
- gridSize: 1224,
1730
- rows: 16,
1731
- columns: 12,
1732
- gap: 16,
1733
- rowSize: 48,
1734
- objectFit: "cover",
1735
- objectPosition: "center center",
1736
- enableOverlay: false,
1737
- overlayOpacity: 30
1738
- };
1739
- var layout_default = Layout;
1740
-
1741
- // src/elements/map.tsx
1742
- var import_react24 = __toESM(require("react"));
1743
- var Map = (0, import_react24.forwardRef)((props, ref) => {
1744
- let { place, zoom, ...rest } = props;
1745
- return /* @__PURE__ */ import_react24.default.createElement("div", { ref, ...rest }, /* @__PURE__ */ import_react24.default.createElement(
1746
- "iframe",
1747
- {
1748
- loading: "lazy",
1749
- width: "100%",
1750
- height: "100%",
1751
- title: "map",
1752
- src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
1753
- style: { pointerEvents: "none" }
1754
- }
1755
- ));
1756
- });
1757
- var css6 = {
1758
- "@desktop": {
1759
- iframe: {
1760
- border: "none"
1761
- }
1762
- },
1763
- "@mobile": {
1764
- iframe: {
1765
- border: "none"
1766
- }
1767
- }
1768
- };
1769
- Map.defaultProps = {
1770
- place: "Hanoi",
1771
- zoom: 14
1772
- };
1773
- var map_default = Map;
1774
-
1775
- // src/elements/text.tsx
1776
- var React20 = __toESM(require("react"));
1777
- var Text = React20.forwardRef(
1778
- (props, ref) => {
1779
- let { children, value, ...rest } = props;
1780
- return /* @__PURE__ */ React20.createElement("div", { ref, ...rest }, /* @__PURE__ */ React20.createElement(
1781
- "div",
1782
- {
1783
- className: "wv-text-content",
1784
- dangerouslySetInnerHTML: { __html: value }
1785
- }
1786
- ));
1787
- }
1788
- );
1789
- var css7 = {
1790
- "@desktop": {
1791
- display: "flex",
1792
- padding: "10px",
1793
- overflow: "hidden",
1794
- ".wv-text-content": {
1795
- width: "100%",
1796
- height: "fit-content",
1797
- "> p, > h1, > h2, > h3, > h4, > h5, > h6": {
1798
- all: "inherit",
1799
- margin: "0",
1800
- wordBreak: "break-word",
1801
- overflowWrap: "break-word",
1802
- width: "auto",
1803
- height: "auto"
1804
- }
1805
- }
1806
- }
1807
- };
1808
- Text.defaultProps = {
1809
- value: "<p>The quick brown fox jumps over the lazy dog</p>"
1810
- };
1811
- var text_default = Text;
1812
-
1813
- // src/elements/scrolling-text.tsx
1814
- var import_react25 = __toESM(require("react"));
1815
- var import_react26 = require("react");
1816
- var ScrollingText = import_react25.default.forwardRef((props, ref) => {
1817
- let { children, value, gap, speed, pauseOnHover, ...rest } = props;
1818
- let [playState, setPlayState] = (0, import_react26.useState)("running");
1819
- let style = {
1820
- "--gap": `${gap}px`,
1821
- "--speed": `${speed}s`,
1822
- "--play-state": playState
1823
- };
1824
- let events = {};
1825
- if (pauseOnHover) {
1826
- events = {
1827
- onMouseEnter: () => setPlayState("paused"),
1828
- onMouseLeave: () => setPlayState("running")
1829
- };
1830
- }
1831
- 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(
1832
- "div",
1833
- {
1834
- key: i,
1835
- className: "wv-text-content",
1836
- dangerouslySetInnerHTML: { __html: value }
1837
- }
1838
- ))));
1839
- });
1840
- var css8 = {
1841
- "@desktop": {
1842
- display: "flex",
1843
- padding: "10px",
1844
- overflow: "hidden",
1845
- ".wv-scrolling-text__container": {
1846
- visibility: "visible",
1847
- whiteSpace: "nowrap",
1848
- display: "flex",
1849
- gap: "var(--gap, 40px)",
1850
- animation: "wv-scrolling-text var(--speed, 100s) linear infinite",
1851
- animationPlayState: "var(--play-state, running)",
1852
- ".wv-text-content": {
1853
- width: "100%",
1854
- height: "fit-content",
1855
- "> p, > h1, > h2, > h3, > h4, > h5, > h6": {
1856
- all: "inherit",
1857
- margin: "0",
1858
- wordBreak: "break-word",
1859
- overflowWrap: "break-word",
1860
- width: "auto",
1861
- height: "auto"
1862
- }
1863
- }
1864
- }
1865
- }
1866
- };
1867
- ScrollingText.defaultProps = {
1868
- value: "<p>The quick brown fox jumps over the lazy dog</p>",
1869
- gap: 40,
1870
- speed: 200,
1871
- pauseOnHover: true
1872
- };
1873
- var scrolling_text_default = ScrollingText;
1874
-
1875
- // src/elements/video/index.tsx
1876
- var import_react30 = __toESM(require("react"));
1877
51
 
1878
- // src/elements/video/html-video.tsx
1879
- var import_react27 = __toESM(require("react"));
1880
- function HTMLVideo(props) {
1881
- let { src, type, controls, autoPlay, loop, muted } = props;
1882
- return /* @__PURE__ */ import_react27.default.createElement(
1883
- "video",
1884
- {
1885
- controls,
1886
- autoPlay,
1887
- loop,
1888
- muted,
1889
- controlsList: "nodownload",
1890
- disablePictureInPicture: true
1891
- },
1892
- /* @__PURE__ */ import_react27.default.createElement("source", { src, type: type || "video/mp4" }),
1893
- /* @__PURE__ */ import_react27.default.createElement("source", { src, type: "video/ogg" }),
1894
- "Your browser does not support the video tag."
1895
- );
1896
- }
1897
-
1898
- // src/elements/video/vimeo.tsx
1899
- var import_react28 = __toESM(require("react"));
1900
- function Vimeo(props) {
1901
- let { vimeoId, controls, autoPlay, loop, muted } = props;
1902
- let params = `autoplay=${autoPlay}&loop=${loop}&controls=${controls}&muted=${muted}`;
1903
- let vimeoSrc = `https://player.vimeo.com/video/${vimeoId}?${params}`;
1904
- return /* @__PURE__ */ import_react28.default.createElement("iframe", { src: vimeoSrc, width: "100%", height: "100%", allowFullScreen: true });
1905
- }
1906
-
1907
- // src/elements/video/youtube.tsx
1908
- var import_react29 = __toESM(require("react"));
1909
- function Youtube(props) {
1910
- let { youtubeId, controls, autoPlay, loop, muted } = props;
1911
- let params = new URLSearchParams({
1912
- autoplay: autoPlay ? "1" : "0",
1913
- controls: controls ? "1" : "0",
1914
- loop: loop ? "1" : "0",
1915
- mute: muted ? "1" : "0"
1916
- });
1917
- let youtubeSrc = `https://www.youtube.com/embed/${youtubeId}?playlist=${youtubeId}&${params.toString()}`;
1918
- let allow = `accelerometer;${autoPlay ? "autoplay;" : ""} clipboard-write; encrypted-media; gyroscope; picture-in-picture`;
1919
- return /* @__PURE__ */ import_react29.default.createElement("iframe", { src: youtubeSrc, width: "100%", height: "100%", allow });
1920
- }
1921
-
1922
- // src/elements/video/index.tsx
1923
- var Video = (0, import_react30.forwardRef)((props, ref) => {
1924
- let { isDesignMode } = (0, import_react30.useContext)(WeaverseContext);
1925
- let {
1926
- src,
1927
- controls,
1928
- poster,
1929
- autoPlay: originAutoPlay,
1930
- loop,
1931
- muted,
1932
- ...rest
1933
- } = props;
1934
- let autoPlay = !isDesignMode && originAutoPlay;
1935
- let videoProps = { src, controls, poster, autoPlay, loop, muted };
1936
- let content;
1937
- let youtubeId = getYoutubeEmbedId(src);
1938
- let vimeoId = getVimeoId(src);
1939
- if (youtubeId) {
1940
- content = /* @__PURE__ */ import_react30.default.createElement(Youtube, { ...videoProps, youtubeId });
1941
- } else if (vimeoId) {
1942
- content = /* @__PURE__ */ import_react30.default.createElement(Vimeo, { ...videoProps, vimeoId });
1943
- } else {
1944
- content = /* @__PURE__ */ import_react30.default.createElement(HTMLVideo, { ...videoProps });
1945
- }
1946
- return /* @__PURE__ */ import_react30.default.createElement("div", { ref, ...rest }, content);
1947
- });
1948
- var css9 = {
1949
- "@desktop": {
1950
- video: {
1951
- height: "100%",
1952
- width: "100%",
1953
- aspectRatio: "16 / 9"
1954
- },
1955
- iframe: {
1956
- border: "none"
1957
- }
1958
- },
1959
- "@mobile": {
1960
- iframe: {
1961
- border: "none"
1962
- }
1963
- }
1964
- };
1965
- Video.defaultProps = {
1966
- src: "https://youtu.be/wM-NT6hcw48",
1967
- poster: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/-/preview/-/quality/smart/-/format/auto/",
1968
- loop: false,
1969
- controls: false,
1970
- autoPlay: true,
1971
- muted: true
1972
- };
1973
- var video_default = Video;
1974
-
1975
- // src/elements/instagram.tsx
1976
- var import_react31 = __toESM(require("react"));
1977
- var Instagram = (0, import_react31.forwardRef)(
1978
- (props, ref) => {
1979
- let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
1980
- let [media, setMedia] = (0, import_react31.useState)([]);
1981
- let [error, setError] = (0, import_react31.useState)(null);
1982
- (0, import_react31.useEffect)(() => {
1983
- if (token) {
1984
- let params = new URLSearchParams({
1985
- access_token: token,
1986
- fields: "id,media_type,caption,media_url,permalink,thumbnail_url"
1987
- });
1988
- fetch(`${INSTAGRAM_API}/me/media?${params.toString()}`).then((res) => res.json()).then((res) => {
1989
- if (res.error) {
1990
- setError(res);
1991
- } else {
1992
- setError(null);
1993
- setMedia([...res.data]);
1994
- }
1995
- }).catch(setError);
1996
- }
1997
- }, [token]);
1998
- if (!token || error) {
1999
- 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!"));
2000
- }
2001
- let style = {
2002
- "--wv-ig-images-per-row": imagesPerRow,
2003
- "--wv-ig-images-gap": gap + "px"
2004
- };
2005
- 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) => {
2006
- let {
2007
- id,
2008
- permalink,
2009
- caption,
2010
- media_url,
2011
- media_type,
2012
- thumbnail_url
2013
- } = item;
2014
- if (media_type === "VIDEO") {
2015
- 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" }));
2016
- }
2017
- 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 }));
2018
- })));
2019
- }
2020
- );
2021
- var css10 = {
2022
- // '@desktop': {
2023
- // '.wv-ig-media-container': {
2024
- // overflow: 'hidden',
2025
- // maxWidth: '100%',
2026
- // maxHeight: '100%',
2027
- // display: 'grid',
2028
- // gridTemplateColumns: 'repeat(var(--wv-ig-images-per-row, 4), 1fr)',
2029
- // gap: 'var(--wv-ig-images-gap, 0px)',
2030
- // img: {
2031
- // // aspectRatio: '1 / 1',
2032
- // maxWidth: '100%',
2033
- // maxHeight: '100%',
2034
- // objectFit: 'cover',
2035
- // },
2036
- // },
2037
- // },
2038
- };
2039
- var permanentCss = {
2040
- "@desktop": {
2041
- ".wv-ig-media-container": {
2042
- overflow: "hidden",
2043
- maxWidth: "100%",
2044
- maxHeight: "100%",
2045
- display: "grid",
2046
- gridTemplateColumns: "repeat(var(--wv-ig-images-per-row, 4), 1fr)",
2047
- gap: "var(--wv-ig-images-gap, 0px)",
2048
- img: {
2049
- // aspectRatio: '1 / 1',
2050
- maxWidth: "100%",
2051
- maxHeight: "100%",
2052
- objectFit: "cover"
2053
- },
2054
- video: {
2055
- width: "100%",
2056
- height: "100%"
2057
- }
2058
- }
2059
- },
2060
- "@mobile": {
2061
- ".wv-ig-media-container": {
2062
- overflowX: "auto",
2063
- display: "flex",
2064
- scrollSnapType: "x mandatory"
2065
- },
2066
- ".wv-ig-media-container a": {
2067
- scrollSnapAlign: "start",
2068
- flexGrow: 0,
2069
- flexShrink: 0,
2070
- flexBasis: "100%"
2071
- }
2072
- }
2073
- };
2074
- Instagram.defaultProps = {
2075
- token: "",
2076
- username: "",
2077
- numberOfImages: 8,
2078
- imagesPerRow: 4,
2079
- gap: 0
2080
- };
2081
- var instagram_default = Instagram;
2082
-
2083
- // src/elements/slideshow/index.tsx
2084
- var import_react34 = require("@stitches/react");
2085
- var import_clsx6 = __toESM(require("clsx"));
2086
- var import_react35 = __toESM(require("react"));
2087
-
2088
- // src/elements/slideshow/use-slideshow-configs.ts
2089
- var import_react32 = require("keen-slider/react");
2090
- 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;
2091
72
 
2092
73
  // src/utils/css.ts
2093
- var import_clsx5 = __toESM(require("clsx"));
2094
- function formatCSS(css13) {
74
+ function formatCSS(css) {
2095
75
  return {
2096
- "@desktop": css13["@desktop"],
2097
- "@mobile": css13["@mobile"]
76
+ "@desktop": css["@desktop"],
77
+ "@mobile": css["@mobile"]
2098
78
  };
2099
79
  }
2100
80
  var permanentClasses = {};
2101
81
  function generateItemClassName(instance, stitchesInstance) {
2102
- let { css: css13, type, className: cls = "", tailwindClasses } = instance.data;
82
+ let { css, type, className: cls = "" } = instance.data;
2103
83
  let className = "";
2104
84
  let permanentClass = "";
2105
85
  let perCss = instance.Element?.permanentCss;
@@ -2113,459 +93,25 @@ function generateItemClassName(instance, stitchesInstance) {
2113
93
  }
2114
94
  }
2115
95
  className = permanentClass;
2116
- if (css13) {
2117
- let formattedCss = formatCSS(css13);
96
+ if (css) {
97
+ let formattedCss = formatCSS(css);
2118
98
  let newStitchesClass = stitchesInstance.css(formattedCss)().className || "";
2119
99
  let { stitchesClass } = instance;
2120
100
  let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
2121
- className = (0, import_clsx5.default)(
2122
- permanentClass,
2123
- cls,
2124
- tailwindClasses,
2125
- newStitchesClass,
2126
- otherClass
2127
- );
101
+ className = clsx_m_default(permanentClass, cls, newStitchesClass, otherClass);
2128
102
  instance.stitchesClass = newStitchesClass;
2129
103
  }
2130
104
  return className;
2131
105
  }
2132
- function loadCSS(attrs) {
2133
- return new Promise((resolve, reject) => {
2134
- let found = document.querySelector(`link[href="${attrs.href}"]`);
2135
- if (found) {
2136
- return resolve(true);
2137
- }
2138
- let link = document.createElement("link");
2139
- Object.assign(link, attrs);
2140
- link.addEventListener("load", () => resolve(true));
2141
- link.onerror = reject;
2142
- document.head.appendChild(link);
2143
- });
2144
- }
2145
-
2146
- // src/elements/slideshow/use-slideshow-configs.ts
2147
- function useSlideshowConfigs(props) {
2148
- let {
2149
- animation,
2150
- slidesPerView,
2151
- loop,
2152
- autoRotate,
2153
- changeSlidesEvery,
2154
- children
2155
- } = props;
2156
- let { isDesignMode, isPreviewMode } = (0, import_react33.useContext)(WeaverseContext);
2157
- let [opacities, setOpacities] = import_react33.default.useState([]);
2158
- let [cssLoaded, setCssLoaded] = (0, import_react33.useState)(false);
2159
- let [created, setCreated] = (0, import_react33.useState)(false);
2160
- let [ready, setReady] = (0, import_react33.useState)(false);
2161
- let [currentSlide, setCurrentSlide] = (0, import_react33.useState)(0);
2162
- let sliderPlugins = [ResizePlugin];
2163
- if (autoRotate && (isPreviewMode || !isDesignMode)) {
2164
- sliderPlugins.push(AutoplayPlugin(changeSlidesEvery));
2165
- }
2166
- let [sliderRef, instanceRef] = (0, import_react32.useKeenSlider)(
2167
- {
2168
- slides: animation === "fade" ? import_react33.default.Children.count(children) : { perView: slidesPerView, number: import_react33.default.Children.count(children) },
2169
- drag: isPreviewMode || !isDesignMode,
2170
- loop,
2171
- selector: animation === "fade" ? null : ".keen-slider__slide",
2172
- created: (slider) => {
2173
- setCreated(true);
2174
- if (isDesignMode) {
2175
- let slideshowElement = slider.container.closest(
2176
- '[data-wv-type="slideshow"]'
2177
- );
2178
- let elementId = slideshowElement?.getAttribute("data-wv-id");
2179
- if (elementId) {
2180
- window.weaverseSlideshowInstances = {
2181
- [elementId]: slider
2182
- };
2183
- }
2184
- }
2185
- },
2186
- slideChanged: (slider) => {
2187
- setCurrentSlide(slider.track.details.rel);
2188
- },
2189
- detailsChanged: (slider) => {
2190
- let newOpacities = slider.track?.details?.slides?.map(
2191
- (slide) => slide.portion
2192
- );
2193
- setOpacities(newOpacities);
2194
- }
2195
- },
2196
- sliderPlugins
2197
- );
2198
- (0, import_react33.useEffect)(() => {
2199
- loadCSS({
2200
- rel: "stylesheet",
2201
- href: "https://cdn.jsdelivr.net/npm/keen-slider@latest/keen-slider.min.css"
2202
- }).then(() => setCssLoaded(true));
2203
- }, []);
2204
- (0, import_react33.useEffect)(() => {
2205
- if (created && cssLoaded) {
2206
- setReady(true);
2207
- }
2208
- }, [created, cssLoaded]);
2209
- return {
2210
- sliderRef,
2211
- instanceRef,
2212
- currentSlide,
2213
- opacities,
2214
- ready,
2215
- created
2216
- };
2217
- }
2218
-
2219
- // src/elements/slideshow/index.tsx
2220
- var Slideshow = (0, import_react35.forwardRef)((props, ref) => {
2221
- let {
2222
- animation,
2223
- showArrows,
2224
- showArrowsOnHover,
2225
- arrowIcon,
2226
- arrowsColor,
2227
- showDots,
2228
- dotsPosition,
2229
- dotsColor,
2230
- children,
2231
- ...rest
2232
- } = props;
2233
- let { sliderRef, instanceRef, currentSlide, opacities, ready, created } = useSlideshowConfigs(props);
2234
- let style = {
2235
- "--slider-opacity": ready ? 1 : 0
2236
- };
2237
- let faderClass = "";
2238
- if (animation === "fade") {
2239
- faderClass = (0, import_react34.css)({
2240
- ".keen-slider__slide": opacities.reduce((acc, opacity, index) => {
2241
- acc[`&:nth-child(${index + 1})`] = {
2242
- opacity
2243
- };
2244
- return acc;
2245
- }, {})
2246
- })().className;
2247
- }
2248
- let _className = (0, import_clsx6.default)(
2249
- faderClass,
2250
- animation === "slide" ? "keen-slider" : "keen-fader"
2251
- );
2252
- let arrowsClass = (0, import_clsx6.default)(
2253
- "wv-slideshow--arrows",
2254
- showArrowsOnHover && "show-on-hover",
2255
- `arrows--${arrowsColor}`
2256
- );
2257
- 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(
2258
- Arrows,
2259
- {
2260
- instanceRef,
2261
- currentSlide,
2262
- className: arrowsClass,
2263
- icon: arrowIcon,
2264
- offset: 20
2265
- }
2266
- ), showDots && created && instanceRef?.current && /* @__PURE__ */ import_react35.default.createElement(
2267
- Dots,
2268
- {
2269
- instanceRef,
2270
- currentSlide,
2271
- className: "wv-slideshow--dots",
2272
- position: dotsPosition,
2273
- color: dotsColor,
2274
- absolute: true
2275
- }
2276
- ));
2277
- });
2278
- var css11 = {
2279
- "@desktop": {
2280
- opacity: "var(--slider-opacity, 0)",
2281
- padding: "32px 0",
2282
- position: "relative",
2283
- ".keen-slider": {
2284
- height: "100%"
2285
- },
2286
- ".keen-fader": {
2287
- position: "relative",
2288
- height: "100%",
2289
- ".keen-slider__slide": {
2290
- position: "absolute",
2291
- inset: 0
2292
- }
2293
- },
2294
- ".wv-slideshow--arrows": {
2295
- ".arrow": {
2296
- borderRadius: "100%",
2297
- backgroundColor: "transparent",
2298
- padding: "6px",
2299
- "&:hover": {
2300
- backgroundColor: "#fff"
2301
- },
2302
- svg: {
2303
- width: "28px",
2304
- height: "28px"
2305
- }
2306
- },
2307
- "&.show-on-hover": {
2308
- opacity: 0,
2309
- transition: "opacity 0.3s ease"
2310
- },
2311
- "&.arrows--dark": {
2312
- ".arrow": {
2313
- color: "#000"
2314
- }
2315
- },
2316
- "&.arrows--light": {
2317
- ".arrow": {
2318
- color: "#fff"
2319
- }
2320
- }
2321
- },
2322
- "&:hover": {
2323
- ".wv-slideshow--arrows": {
2324
- opacity: 1
2325
- }
2326
- }
2327
- }
2328
- };
2329
- Slideshow.defaultProps = {
2330
- animation: "slide",
2331
- slidesPerView: 1,
2332
- spacing: 0,
2333
- showArrows: true,
2334
- showArrowsOnHover: false,
2335
- arrowIcon: "caret",
2336
- arrowsColor: "dark",
2337
- showDots: true,
2338
- dotsPosition: "bottom",
2339
- dotsColor: "dark",
2340
- loop: true,
2341
- autoRotate: false,
2342
- changeSlidesEvery: 5
2343
- };
2344
- var slideshow_default = Slideshow;
2345
-
2346
- // src/elements/slideshow/slide.tsx
2347
- var import_react36 = __toESM(require("react"));
2348
-
2349
- // src/elements/slideshow/position.ts
2350
- var slidePositionMap = {
2351
- "top left": {
2352
- justifyContent: "flex-start",
2353
- alignItems: "flex-start"
2354
- },
2355
- "top center": {
2356
- justifyContent: "flex-start",
2357
- alignItems: "center"
2358
- },
2359
- "top right": {
2360
- justifyContent: "flex-start",
2361
- alignItems: "flex-end"
2362
- },
2363
- "center left": {
2364
- justifyContent: "center",
2365
- alignItems: "flex-start"
2366
- },
2367
- "center center": {
2368
- justifyContent: "center",
2369
- alignItems: "center"
2370
- },
2371
- "center right": {
2372
- justifyContent: "center",
2373
- alignItems: "flex-end"
2374
- },
2375
- "bottom left": {
2376
- justifyContent: "flex-end",
2377
- alignItems: "flex-start"
2378
- },
2379
- "bottom center": {
2380
- justifyContent: "flex-end",
2381
- alignItems: "center"
2382
- },
2383
- "bottom right": {
2384
- justifyContent: "flex-end",
2385
- alignItems: "flex-end"
2386
- }
2387
- };
2388
-
2389
- // src/elements/slideshow/slide.tsx
2390
- var Slide = (0, import_react36.forwardRef)((props, ref) => {
2391
- let {
2392
- contentPosition,
2393
- backgroundColor,
2394
- backgroundImage,
2395
- objectFit,
2396
- objectPosition,
2397
- enableOverlay,
2398
- overlayOpacity,
2399
- backgroundFit,
2400
- backgroundPosition,
2401
- children,
2402
- ...rest
2403
- } = props;
2404
- return /* @__PURE__ */ import_react36.default.createElement("div", { className: "keen-slider__slide" }, /* @__PURE__ */ import_react36.default.createElement(
2405
- Background,
2406
- {
2407
- backgroundColor,
2408
- backgroundImage,
2409
- backgroundFit: objectFit,
2410
- backgroundPosition: objectPosition,
2411
- className: "slide-background"
2412
- }
2413
- ), /* @__PURE__ */ import_react36.default.createElement(
2414
- Overlay2,
2415
- {
2416
- enableOverlay,
2417
- overlayOpacity,
2418
- className: "slide-overlay"
2419
- }
2420
- ), /* @__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")));
2421
- });
2422
- var css12 = {
2423
- "@desktop": {
2424
- position: "relative",
2425
- height: "100%",
2426
- width: "1224px",
2427
- maxWidth: "100%",
2428
- margin: "0 auto",
2429
- display: "flex",
2430
- flexDirection: "column",
2431
- padding: "100px 20px",
2432
- ".wv-slide-placeholder": {
2433
- height: "200px",
2434
- zIndex: 1
2435
- }
2436
- }
2437
- };
2438
- Slide.defaultProps = {
2439
- contentPosition: "center center",
2440
- objectFit: "cover",
2441
- objectPosition: "center center",
2442
- enableOverlay: false,
2443
- overlayOpacity: 30
2444
- };
2445
- var slide_default = Slide;
2446
-
2447
- // src/elements/index.ts
2448
- var Elements = {
2449
- Countdown: {
2450
- Component: countdown_default,
2451
- type: "countdown",
2452
- defaultCss: css3
2453
- },
2454
- Button: {
2455
- Component: button_default,
2456
- type: "button",
2457
- defaultCss: css
2458
- },
2459
- Container: {
2460
- Component: container_default,
2461
- type: "container",
2462
- defaultCss: css2
2463
- },
2464
- Image: {
2465
- Component: image_default,
2466
- type: "image",
2467
- defaultCss: css4
2468
- },
2469
- Instagram: {
2470
- Component: instagram_default,
2471
- type: "instagram",
2472
- defaultCss: css10,
2473
- permanentCss
2474
- },
2475
- Layout: {
2476
- Component: layout_default,
2477
- type: "layout",
2478
- defaultCss: css5
2479
- },
2480
- Map: {
2481
- Component: map_default,
2482
- type: "map",
2483
- defaultCss: css6
2484
- },
2485
- Text: {
2486
- Component: text_default,
2487
- type: "text",
2488
- defaultCss: css7
2489
- },
2490
- ScrollingText: {
2491
- Component: scrolling_text_default,
2492
- type: "scrolling-text",
2493
- defaultCss: css8
2494
- },
2495
- Video: {
2496
- Component: video_default,
2497
- type: "video",
2498
- defaultCss: css9
2499
- },
2500
- Slideshow: {
2501
- Component: slideshow_default,
2502
- type: "slideshow",
2503
- defaultCss: css11
2504
- },
2505
- Slide: {
2506
- Component: slide_default,
2507
- type: "slide",
2508
- defaultCss: css12
2509
- }
2510
- };
2511
-
2512
- // src/context.ts
2513
- var createRootContext = (configs) => {
2514
- let rootContext = new import_core.Weaverse(configs);
2515
- Object.keys(Elements).forEach((key) => {
2516
- rootContext.registerElement(Elements[key]);
2517
- });
2518
- return rootContext;
2519
- };
2520
- var WeaverseContext = (0, import_react37.createContext)({});
2521
- var WeaverseContextProvider = WeaverseContext.Provider;
2522
- var WeaverseContextConsumer = WeaverseContext.Consumer;
2523
-
2524
- // src/renderer.tsx
2525
- var import_core3 = require("@weaverse/core");
2526
- var import_react38 = __toESM(require("react"));
2527
-
2528
- // src/utils/uploadcare.ts
2529
- var import_core2 = require("@weaverse/core");
2530
- var initialized = false;
2531
- function initUploadCareAdaptiveDelivery(baseUrl) {
2532
- try {
2533
- Promise.resolve().then(() => {
2534
- if (!initialized && import_core2.isBrowser && !window.Blinkloader) {
2535
- initialized = true;
2536
- (function(src, cb) {
2537
- let s = document.createElement("script");
2538
- s.setAttribute("src", src);
2539
- s.onload = cb;
2540
- (document.head || document.body).appendChild(s);
2541
- })(baseUrl + "/static/blinkloader.min.js", function() {
2542
- window.Blinkloader.optimize({
2543
- pubkey: "1a22133d1a1bdc089d4c",
2544
- fadeIn: true,
2545
- lazyload: true,
2546
- smartCompression: true,
2547
- responsive: true,
2548
- retina: true,
2549
- webp: true
2550
- });
2551
- });
2552
- }
2553
- });
2554
- } catch (e) {
2555
- console.error(e);
2556
- }
2557
- }
2558
106
 
2559
107
  // src/renderer.tsx
2560
- var import_clsx7 = __toESM(require("clsx"));
2561
- var WeaverseRoot = (0, import_react38.memo)(({ context }) => {
2562
- let [, setData] = (0, import_react38.useState)(context.data);
2563
- 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)();
2564
111
  let renderRoot = () => setData({});
2565
- (0, import_react38.useEffect)(() => {
112
+ (0, import_react2.useEffect)(() => {
2566
113
  context.subscribe(renderRoot);
2567
114
  context.contentRootElement = rootRef.current;
2568
- initUploadCareAdaptiveDelivery(context.weaverseHost);
2569
115
  return () => {
2570
116
  context.unsubscribe(renderRoot);
2571
117
  };
@@ -2573,22 +119,22 @@ var WeaverseRoot = (0, import_react38.memo)(({ context }) => {
2573
119
  let eventHandlers = context?.studioBridge?.eventHandlers || {};
2574
120
  let themeClass = context.stitchesInstance.theme.className;
2575
121
  if (context.data?.rootId) {
2576
- return /* @__PURE__ */ import_react38.default.createElement(
122
+ return /* @__PURE__ */ import_react2.default.createElement(
2577
123
  "div",
2578
124
  {
2579
125
  className: `weaverse-content-root ${themeClass}`,
2580
126
  ...eventHandlers,
2581
127
  ref: rootRef
2582
128
  },
2583
- /* @__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 }))
2584
130
  );
2585
131
  }
2586
132
  return null;
2587
133
  });
2588
- var ItemComponent = (0, import_react38.memo)(({ instance }) => {
2589
- let context = (0, import_react38.useContext)(WeaverseContext);
134
+ var ItemComponent = (0, import_react2.memo)(({ instance }) => {
135
+ let context = (0, import_react2.useContext)(WeaverseContext);
2590
136
  let { stitchesInstance, elementInstances } = context;
2591
- let [data, setData] = (0, import_react38.useState)(instance.data);
137
+ let [data, setData] = (0, import_react2.useState)(instance.data);
2592
138
  let {
2593
139
  id,
2594
140
  type,
@@ -2598,14 +144,13 @@ var ItemComponent = (0, import_react38.memo)(({ instance }) => {
2598
144
  createdAt,
2599
145
  updatedAt,
2600
146
  deletedAt,
2601
- tailwindClasses,
2602
- css: css13,
147
+ css,
2603
148
  ...rest
2604
149
  } = data;
2605
- (0, import_react38.useEffect)(() => {
150
+ (0, import_react2.useEffect)(() => {
2606
151
  let render = (data2) => setData({ ...data2 });
2607
152
  instance.subscribe(render);
2608
- if (import_core3.isBrowser && !instance.ref.current) {
153
+ if (import_core.isBrowser && !instance.ref.current) {
2609
154
  Object.assign(instance.ref, {
2610
155
  current: document.querySelector(`[data-wv-id="${id}"]`)
2611
156
  });
@@ -2618,44 +163,40 @@ var ItemComponent = (0, import_react38.memo)(({ instance }) => {
2618
163
  if (Component.$$typeof === Symbol.for("react.forward_ref")) {
2619
164
  rest.ref = instance.ref;
2620
165
  }
2621
- return /* @__PURE__ */ import_react38.default.createElement(
166
+ return /* @__PURE__ */ import_react2.default.createElement(
2622
167
  Component,
2623
168
  {
2624
169
  key: id,
2625
170
  "data-wv-type": type,
2626
171
  "data-wv-id": id,
2627
- className: (0, import_clsx7.default)(
172
+ className: clsx_m_default(
2628
173
  generateItemClassName(instance, stitchesInstance),
2629
174
  rest?.data?.className
2630
175
  ),
2631
176
  ...rest
2632
177
  },
2633
- childIds.map((cid) => /* @__PURE__ */ import_react38.default.createElement(ItemInstance, { key: cid, id: cid })),
2634
- 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 }))
2635
180
  );
2636
181
  } else {
2637
182
  console.log(`\u274C Unknown element: ${type}`);
2638
183
  return null;
2639
184
  }
2640
185
  });
2641
- var ItemInstance = (0, import_react38.memo)(({ id }) => {
2642
- let context = (0, import_react38.useContext)(WeaverseContext);
186
+ var ItemInstance = (0, import_react2.memo)(({ id }) => {
187
+ let context = (0, import_react2.useContext)(WeaverseContext);
2643
188
  let { itemInstances } = context;
2644
189
  let instance = itemInstances.get(id);
2645
190
  if (!instance) {
2646
191
  console.warn(`Item instance ${id} not found`);
2647
- 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");
2648
193
  }
2649
- return /* @__PURE__ */ import_react38.default.createElement(ItemComponent, { key: id, instance });
194
+ return /* @__PURE__ */ import_react2.default.createElement(ItemComponent, { key: id, instance });
2650
195
  });
2651
196
  // Annotate the CommonJS export names for ESM import in node:
2652
197
  0 && (module.exports = {
2653
- Components,
2654
- Elements,
2655
- SliderComponents,
2656
198
  WeaverseContext,
2657
199
  WeaverseContextConsumer,
2658
200
  WeaverseContextProvider,
2659
- WeaverseRoot,
2660
- createRootContext
201
+ WeaverseRoot
2661
202
  });