@blocklet/pages-kit-inner-components 0.6.24 → 0.6.26

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.
@@ -1,2780 +0,0 @@
1
- import { jsx as n, jsxs as y, Fragment as J } from "react/jsx-runtime";
2
- import { ErrorOutline as re } from "@mui/icons-material";
3
- import { Box as g, styled as ne, Typography as A, Container as ie, useTheme as ae, useMediaQuery as se, GlobalStyles as le, Card as ce, CircularProgress as de, Grid as kt, CardMedia as ue, CardContent as me, Alert as pe } from "@mui/material";
4
- import he from "lodash/isEmpty";
5
- import Z from "lodash/pick";
6
- import ge, { createContext as It, useMemo as S, useCallback as O, useContext as Lt, useState as tt, useEffect as Y, Fragment as xe, isValidElement as Pt, useRef as pt } from "react";
7
- import M from "lodash/keyBy";
8
- import { styled as $, useTheme as Et } from "@arcblock/ux/lib/Theme";
9
- import { cx as b, css as dt } from "@emotion/css";
10
- import I from "lodash/omit";
11
- import { Link as fe, NavLink as be, useNavigate as ye } from "react-router-dom";
12
- import ve from "@arcblock/ux/lib/Button";
13
- import ut from "is-uri";
14
- import { Icon as Wt } from "@iconify-icon/react";
15
- import { e as j, f as L, i as ht, l as gt } from "./state-DSo43FAB.js";
16
- import we from "@blocklet/pages-kit/builtin/markdown/markdown-renderer";
17
- import { useColorConvert as At } from "@blocklet/pages-kit/contexts/color";
18
- import { materialDark as ke } from "react-syntax-highlighter/dist/esm/styles/prism";
19
- import _e from "@arcblock/react-hooks/lib/useBrowser";
20
- import _t from "@arcblock/ux/lib/Colors";
21
- import { ResponsiveImage as jt, CustomComponentRenderer as $e } from "@blocklet/pages-kit/components";
22
- import { isGradient as Ce, isColorString as Se } from "@blocklet/pages-kit/utils/style";
23
- import Ft from "@mui/material/useMediaQuery";
24
- import { join as q } from "pathe";
25
- import { withoutTrailingSlash as ct, isRelative as Be, parseURL as Ne } from "ufo";
26
- import { useMessage as Re } from "@blocklet/embed/message";
27
- import { useLatest as Me } from "ahooks";
28
- import Ie from "lodash/isEqual";
29
- import { EmbedIframe as Le } from "@blocklet/embed/react";
30
- import { useLocaleContext as Pe } from "@arcblock/ux/lib/Locale/context";
31
- import Tt from "@arcblock/ux/lib/Screenshot";
32
- import { TwitterTimelineEmbed as Ee } from "react-twitter-embed";
33
- import { useUpdate as We, useMount as Ae } from "react-use";
34
- const et = "{{CUSTOM_VALUE}}", je = [
35
- {
36
- title: "None",
37
- value: "none",
38
- sx: {}
39
- },
40
- {
41
- title: "Small",
42
- value: "small",
43
- sx: { py: { xs: 2.5, md: 4, lg: 4, xl: 6 } }
44
- },
45
- {
46
- title: "Normal",
47
- value: "normal",
48
- sx: { py: { xs: 5, md: 7.5, lg: 10, xl: 12.5 } }
49
- },
50
- {
51
- title: "Large",
52
- value: "large",
53
- sx: { py: { xs: 7.5, md: 10, lg: 12.5, xl: 15 } }
54
- }
55
- ], Fe = [
56
- {
57
- title: "None",
58
- value: "none",
59
- sx: {}
60
- },
61
- {
62
- title: "Small",
63
- value: "small",
64
- sx: { py: { xs: 2.5, md: 4, lg: 4, xl: 6 } }
65
- },
66
- {
67
- title: "Normal",
68
- value: "normal",
69
- sx: { py: { xs: 5, md: 7, lg: 7, xl: 9 } }
70
- },
71
- {
72
- title: "Large",
73
- value: "large",
74
- sx: { py: { xs: 6, md: 9, lg: 9, xl: 11 } }
75
- }
76
- ], Te = [
77
- {
78
- title: "None",
79
- value: "none",
80
- sx: {}
81
- },
82
- {
83
- title: "Small",
84
- value: "small",
85
- sx: { px: { xs: 2, md: 4, lg: 4, xl: 6 } }
86
- },
87
- {
88
- title: "Normal",
89
- value: "normal",
90
- sx: { px: { xs: 2.5, md: 7.5, lg: 10, xl: 12.5 } }
91
- },
92
- {
93
- title: "Large",
94
- value: "large",
95
- sx: { px: { xs: 2.5, md: 10, lg: 12.5, xl: 15 } }
96
- }
97
- ], Q = (t, e, o) => {
98
- const r = t.breakpoints.values[o];
99
- return `${e}${r ? ` (${r}px)` : ""}`;
100
- }, ze = [
101
- {
102
- title: "100%",
103
- value: "full",
104
- sx: { maxWidth: "100%" }
105
- },
106
- {
107
- title: (t) => Q(t, "Small", "sm"),
108
- value: "sm",
109
- sx: {
110
- maxWidth: (t) => t.breakpoints.values.sm,
111
- width: "100%",
112
- mx: "auto"
113
- }
114
- },
115
- {
116
- title: (t) => Q(t, "Normal", "md"),
117
- value: "md",
118
- sx: { maxWidth: (t) => t.breakpoints.values.md, width: "100%", mx: "auto" }
119
- },
120
- {
121
- title: (t) => Q(t, "Large", "lg"),
122
- value: "lg",
123
- sx: { maxWidth: (t) => t.breakpoints.values.lg, width: "100%", mx: "auto" }
124
- },
125
- {
126
- title: (t) => Q(t, "Extra Large", "xl"),
127
- value: "xl",
128
- sx: { maxWidth: (t) => t.breakpoints.values.xl, width: "100%", mx: "auto" }
129
- },
130
- {
131
- title: "Custom",
132
- value: "custom",
133
- sx: {
134
- maxWidth: et,
135
- width: "100%",
136
- mx: "auto"
137
- }
138
- }
139
- ], Oe = [
140
- {
141
- title: "None",
142
- value: "none",
143
- sx: { gap: 0 }
144
- },
145
- {
146
- title: "Small",
147
- value: "small",
148
- sx: { gap: { xs: 1, md: 2, lg: 2, xl: 3 } }
149
- },
150
- {
151
- title: "Normal",
152
- value: "normal",
153
- sx: { gap: { xs: 2, md: 3.5, lg: 3.5, xl: 5 } }
154
- },
155
- {
156
- title: "Large",
157
- value: "large",
158
- sx: { gap: { xs: 3, md: 5, lg: 5, xl: 6.5 } }
159
- }
160
- ], Ue = [
161
- {
162
- title: "None",
163
- value: "none",
164
- sx: {}
165
- },
166
- {
167
- title: "Small",
168
- value: "small",
169
- sx: { p: { xs: 1, md: 2, lg: 2, xl: 3 } }
170
- },
171
- {
172
- title: "Normal",
173
- value: "normal",
174
- sx: { p: { xs: 2.5, md: 5, lg: 5, xl: 7.5 } }
175
- },
176
- {
177
- title: "Large",
178
- value: "large",
179
- sx: { p: { xs: 3, md: 6, lg: 6, xl: 9 } }
180
- }
181
- ], De = [
182
- {
183
- title: "Start",
184
- value: "start",
185
- sx: { alignContent: "start" }
186
- },
187
- {
188
- title: "Center",
189
- value: "center",
190
- sx: { alignContent: "center" }
191
- },
192
- {
193
- title: "End",
194
- value: "end",
195
- sx: { alignContent: "end" }
196
- },
197
- {
198
- title: "Space Between",
199
- value: "space-between",
200
- sx: { alignContent: "space-between" }
201
- },
202
- {
203
- title: "Space Around",
204
- value: "space-around",
205
- sx: { alignContent: "space-around" }
206
- },
207
- {
208
- title: "Space Evenly",
209
- value: "space-evenly",
210
- sx: { alignContent: "space-evenly" }
211
- }
212
- ], Ge = [
213
- {
214
- title: "Start",
215
- value: "start",
216
- sx: { justifyContent: "start" }
217
- },
218
- {
219
- title: "Center",
220
- value: "center",
221
- sx: { justifyContent: "center" }
222
- },
223
- {
224
- title: "End",
225
- value: "end",
226
- sx: { justifyContent: "end" }
227
- },
228
- {
229
- title: "Space Between",
230
- value: "space-between",
231
- sx: { justifyContent: "space-between" }
232
- },
233
- {
234
- title: "Space Around",
235
- value: "space-around",
236
- sx: { justifyContent: "space-around" }
237
- },
238
- {
239
- title: "Space Evenly",
240
- value: "space-evenly",
241
- sx: { justifyContent: "space-evenly" }
242
- }
243
- ], He = [
244
- {
245
- title: "Solid",
246
- value: "solid",
247
- sx: { border: "1px solid", borderColor: "divider" },
248
- group: "borderFrame"
249
- },
250
- {
251
- title: "Dashed",
252
- value: "dashed",
253
- sx: { border: "1px dashed", borderColor: "divider" },
254
- group: "borderFrame"
255
- },
256
- {
257
- title: "Dotted",
258
- value: "dotted",
259
- sx: { border: "1px dotted", borderColor: "divider" },
260
- group: "borderFrame"
261
- },
262
- {
263
- title: "Custom",
264
- value: "custom",
265
- sx: {
266
- border: et
267
- },
268
- group: "borderFrame"
269
- }
270
- ], zt = [
271
- // new device frames
272
- { value: "macbook", title: "MacBook", group: "deviceFrame" },
273
- { value: "phone", title: "Phone", group: "deviceFrame" }
274
- // old device frames:
275
- // @FIXME:以下类型不适配 children,先注释掉了,会走以前的逻辑,渲染 p script 有问题
276
- // { value: 'iphone-x', title: 'iPhone X', group: 'deviceFrame' },
277
- // { value: 'iphone-8', title: 'iPhone 8', group: 'deviceFrame' },
278
- // { value: 'ipad-pro', title: 'iPad Pro', group: 'deviceFrame' },
279
- // { value: 'imac-pro', title: 'iMac Pro', group: 'deviceFrame' },
280
- // { value: 'macbook-pro', title: 'MacBook Pro', group: 'deviceFrame' },
281
- // { value: 'surface-pro', title: 'Surface Pro', group: 'deviceFrame' },
282
- // { value: 'surface-book', title: 'Surface Book', group: 'deviceFrame' },
283
- // { value: 'surface-studio', title: 'Surface Studio', group: 'deviceFrame' },
284
- // { value: 'galaxy-s8', title: 'Galaxy S8', group: 'deviceFrame' },
285
- // { value: 'google-pixel', title: 'Google Pixel', group: 'deviceFrame' },
286
- // { value: 'google-pixel-2-xl', title: 'Google Pixel 2 XL', group: 'deviceFrame' },
287
- // { value: 'apple-watch', title: 'Apple Watch', group: 'deviceFrame' },
288
- ], Ve = (t) => zt.some((e) => e.value === t), Je = (t) => Ot.some((e) => e.value === t), Ot = [
289
- {
290
- value: "chrome",
291
- title: "Chrome",
292
- group: "browserFrame",
293
- sx: {}
294
- },
295
- {
296
- value: "chrome-with-url",
297
- title: "Chrome (With URL)",
298
- group: "browserFrame",
299
- sx: {}
300
- }
301
- ], Ye = [
302
- {
303
- value: "shadow-sm",
304
- title: "Shadow Low Elevation",
305
- group: "shadowFrame",
306
- sx: { boxShadow: (t) => t.shadows[2] }
307
- },
308
- {
309
- value: "shadow-md",
310
- title: "Shadow Medium Elevation",
311
- group: "shadowFrame",
312
- sx: { boxShadow: (t) => t.shadows[6] }
313
- },
314
- {
315
- value: "shadow-lg",
316
- title: "Shadow High Elevation",
317
- group: "shadowFrame",
318
- sx: { boxShadow: (t) => t.shadows[12] }
319
- },
320
- {
321
- value: "shadow-xl",
322
- title: "Shadow Extra High Elevation",
323
- group: "shadowFrame",
324
- sx: { boxShadow: (t) => t.shadows[16] }
325
- },
326
- {
327
- value: "shadow-max",
328
- title: "Shadow Max Elevation",
329
- group: "shadowFrame",
330
- sx: { boxShadow: (t) => t.shadows[24] }
331
- }
332
- ], Ke = [
333
- {
334
- title: "None",
335
- value: "none",
336
- sx: { border: "none" },
337
- group: "commonFrame"
338
- },
339
- ...He,
340
- ...Ot,
341
- ...Ye,
342
- ...zt
343
- ], Xe = [
344
- {
345
- title: "None",
346
- value: "none",
347
- sx: { borderRadius: 0 }
348
- },
349
- {
350
- title: "Small",
351
- value: "small",
352
- sx: { borderRadius: 1 }
353
- // theme.shape.borderRadius * 1
354
- },
355
- {
356
- title: "Medium",
357
- value: "medium",
358
- sx: { borderRadius: 2 }
359
- // theme.shape.borderRadius * 2
360
- },
361
- {
362
- title: "Large",
363
- value: "large",
364
- sx: { borderRadius: 3 }
365
- // theme.shape.borderRadius * 3
366
- },
367
- {
368
- title: "Extra Large",
369
- value: "xl",
370
- sx: { borderRadius: 4 }
371
- // theme.shape.borderRadius * 4
372
- },
373
- {
374
- title: "Rounded",
375
- value: "rounded",
376
- sx: { borderRadius: "50%" }
377
- },
378
- {
379
- title: "Custom",
380
- value: "custom",
381
- sx: { borderRadius: et }
382
- }
383
- ], qe = M(je, "value"), Qe = M(Fe, "value"), Ze = M(Te, "value"), to = M(ze, "value"), eo = M(Oe, "value"), oo = M(Ue, "value"), ro = M(De, "value"), no = M(Ge, "value"), io = M(Ke, "value"), ao = M(Xe, "value"), so = /* @__PURE__ */ new Map([
384
- ["baseSectionPaddingY", qe],
385
- ["maxWidth", to],
386
- ["paddingY", Qe],
387
- ["paddingX", Ze],
388
- ["layoutBlockGap", eo],
389
- ["layoutBlockPadding", oo],
390
- ["layoutBlockAlignContent", ro],
391
- ["layoutBlockJustifyContent", no],
392
- ["layoutBlockBorder", io],
393
- ["layoutBlockBorderRadius", ao]
394
- ]);
395
- function W(t) {
396
- const { type: e, value: o, format: r = "sx", defaultValue: i = null } = t, a = so.get(e);
397
- if (!a || typeof o != "string" || !o)
398
- return i;
399
- const l = o.startsWith("custom:"), s = l ? "custom" : o;
400
- if (a?.[s] && a?.[s]?.[r]) {
401
- const c = a[s][r];
402
- if (l) {
403
- const d = o.replace("custom:", "");
404
- try {
405
- return JSON.parse(JSON.stringify(c || {}).replaceAll(et, d));
406
- } catch {
407
- }
408
- }
409
- return c;
410
- }
411
- return i;
412
- }
413
- const Ut = It({
414
- page: null,
415
- getPageMeta: () => ({}),
416
- getPageMetaStyle: () => ({})
417
- });
418
- function lo() {
419
- return Lt(Ut);
420
- }
421
- function cn({
422
- page: t,
423
- children: e,
424
- defaultLocale: o = "en",
425
- currentLocale: r
426
- }) {
427
- const i = S(() => t ? JSON.parse(JSON.stringify(t)) : null, [JSON.stringify(t)]), a = O(() => {
428
- if (!i) return {};
429
- const c = r || o;
430
- return i.locales?.[c] ?? {};
431
- }, [i, o, r]), l = O(
432
- (c = "sx") => {
433
- const d = a();
434
- return !d || !d.style ? {} : Object.entries(d.style || {}).reduce((m, [h, p]) => {
435
- if (!p) return m;
436
- const v = `${h}Custom`;
437
- d.style[v];
438
- const x = W({
439
- type: h,
440
- value: p,
441
- format: c
442
- });
443
- return x ? { ...m, ...x } : m;
444
- }, {});
445
- },
446
- [a]
447
- ), s = S(
448
- () => ({
449
- page: i,
450
- getPageMeta: a,
451
- getPageMetaStyle: l
452
- }),
453
- [i, a, l]
454
- );
455
- return /* @__PURE__ */ n(Ut.Provider, { value: s, children: e });
456
- }
457
- const ot = ["editing", "height", "locale", "dev", "sx"];
458
- function co(t) {
459
- const { className: e, ...o } = t;
460
- return /* @__PURE__ */ n(uo, { ...o, className: b("BlockBase-root", e) });
461
- }
462
- const uo = $(g)`
463
- position: relative;
464
- color: ${({ theme: t }) => t.palette.text.primary};
465
- `, Dt = It({
466
- pages: [],
467
- project: void 0
468
- }), { Provider: dn, Consumer: un } = Dt;
469
- function Gt() {
470
- return Lt(Dt);
471
- }
472
- function mo({ icon: t, ...e }) {
473
- return /* @__PURE__ */ n(Wt, { icon: t, ...e, ref: null });
474
- }
475
- function po({ icon: t, className: e = "", size: o = "1rem", ...r }) {
476
- return /* @__PURE__ */ n(ho, { component: mo, className: b("css-icon", e), size: o, ...r, icon: t });
477
- }
478
- const ho = $(g)`
479
- &.css-icon {
480
- display: inline-block;
481
- width: ${({ size: t }) => t};
482
- height: ${({ size: t }) => t};
483
- }
484
- `;
485
- function go({ icon: t, className: e = "", size: o = "1rem", imageMeta: r, ...i }) {
486
- const a = j(L(t), 540), [l, s] = tt(!1), c = Et();
487
- return l ? /* @__PURE__ */ n(po, { icon: "i-mdi:image", color: c.palette.grey[500], size: o, className: e, ...i }) : /* @__PURE__ */ n(xo, { className: b("image-icon", e), size: o, ...i, children: /* @__PURE__ */ n(
488
- "img",
489
- {
490
- className: "image-icon__image",
491
- src: a,
492
- onError: () => s(!0),
493
- width: r?.naturalWidth,
494
- height: r?.naturalHeight,
495
- alt: r?.filename || "card-icon",
496
- loading: "lazy"
497
- }
498
- ) });
499
- }
500
- const xo = $(g)`
501
- display: inline-block;
502
- width: ${({ size: t }) => t};
503
- height: ${({ size: t }) => t};
504
- .image-icon__image {
505
- object-fit: contain;
506
- height: 100%;
507
- width: 100%;
508
- }
509
- `, xt = (t) => typeof t == "string" && /^[\w-_]+:[\w-_]+$/.test(t);
510
- function mt({ icon: t, size: e = "1rem", imageMeta: o, ...r }) {
511
- const i = window.isNaN(e) ? e : `${e}px`;
512
- return xt(t) ? /* @__PURE__ */ n(Wt, { icon: t }) : /* @__PURE__ */ n(fo, { component: go, imageMeta: o, className: "base-icon", icon: t, size: i, ...r });
513
- }
514
- const fo = $(g)`
515
- flex-shrink: 0;
516
- `;
517
- function V({ text: t, children: e, icon: o = "", endIcon: r, color: i = "primary", link: a = "", href: l = "", ...s }) {
518
- const c = o ? /* @__PURE__ */ n(mt, { icon: o }) : null, d = r ? /* @__PURE__ */ n(mt, { icon: r }) : null, u = a || l, m = { ...s };
519
- return u && (m.href = u, ut(u) && (m.target = m.target || "_blank")), /* @__PURE__ */ n(ve, { startIcon: c, endIcon: d, color: i, ...m, children: t || e });
520
- }
521
- function Ht({ editing: t, text: e, ...o }) {
522
- const { pages: r = [] } = Gt(), i = r.find((a) => a.id === (o.link || o.linkId));
523
- if (t)
524
- return /* @__PURE__ */ n(V, { ...I(o, ["link", "linkId"]), children: e });
525
- if (i) {
526
- const a = i.path || "/";
527
- return /* @__PURE__ */ n(fe, { to: a, children: /* @__PURE__ */ n(V, { ...I(o, ["link", "linkId"]), children: e }) });
528
- }
529
- return /* @__PURE__ */ n(V, { ...I(o, "linkId"), children: e });
530
- }
531
- function U({ actions: t, center: e, className: o, align: r }) {
532
- return t && t?.length ? /* @__PURE__ */ n(
533
- g,
534
- {
535
- className: b(
536
- "flex gap-4 flex-wrap",
537
- "lg:flex-row lg:gap-8",
538
- (e || r === "center") && "justify-center",
539
- !e && r === "right" && "justify-end",
540
- !e && r === "left" && "justify-start",
541
- o
542
- ),
543
- sx: { alignItems: "center" },
544
- children: t
545
- }
546
- ) : null;
547
- }
548
- const bo = "section", yo = ne(g)`
549
- overflow: hidden;
550
-
551
- .section__title {
552
- margin-top: 0;
553
- font-weight: 700;
554
- }
555
- .section__title_non_big {
556
- font-size: 32px;
557
- @media (max-width: 600px) {
558
- font-size: 24px;
559
- }
560
- }
561
- &.base-info .section__tag {
562
- margin-top: 0;
563
- margin-bottom: 2vw;
564
- background-color: ${({ theme: t }) => t.palette.primary.main};
565
- white-space: nowrap;
566
- max-width: 100%;
567
- display: inline-block;
568
- padding: 0 10px;
569
- justify-content: flex-start;
570
- overflow: hidden;
571
- text-overflow: ellipsis;
572
- font-size: 12px;
573
- color: #fff;
574
- border-radius: 4px;
575
- line-height: 20px;
576
- }
577
- .section__title {
578
- color: ${({ theme: t }) => t.palette.text.primary};
579
- a {
580
- color: ${({ theme: t }) => t.palette.primary.main};
581
- }
582
- p {
583
- margin-top: 0;
584
- margin-bottom: 0;
585
- }
586
- }
587
- .section__description {
588
- color: ${({ theme: t }) => t.palette.text.primary};
589
- margin-bottom: 4vw;
590
- margin-top: 0;
591
- a {
592
- color: ${({ theme: t }) => t.palette.primary.main};
593
- }
594
- p {
595
- margin-top: 0;
596
- margin-bottom: 0.5rem;
597
- }
598
- }
599
- @media (min-width: ${({ theme: t }) => t.breakpoints.values[bo]}px) {
600
- .section__tag {
601
- margin-bottom: 32px;
602
- }
603
- .section__title {
604
- margin-bottom: 32px;
605
- }
606
- .section__description {
607
- margin-bottom: 40px;
608
- }
609
- }
610
- `;
611
- function rt({
612
- title: t,
613
- description: e,
614
- descriptionMarkdown: o,
615
- actions: r,
616
- className: i = "",
617
- classes: a = {},
618
- prepend: l,
619
- append: s,
620
- level: c = 2,
621
- tag: d,
622
- badge: u,
623
- center: m,
624
- logo: h,
625
- titleAppearance: p,
626
- descriptionAppearance: v,
627
- ...x
628
- }) {
629
- const w = At();
630
- if (!t && !e && !r && !u && !d && !l && !s && !h) return null;
631
- const k = Math.max(Math.min(5, c + 1), 1), C = {
632
- 1: "xl:!text-3xl lg:!text-2xl md:!text-xl",
633
- 2: "xl:!text-2xl lg:!text-xl md:!text-lg",
634
- 3: "xl:!text-2xl lg:!text-xl md:!text-lg",
635
- 4: "xl:!text-xl lg:!text-lg md:!text-md",
636
- 5: "xl:!text-lg md:!text-md sm:!text-sm",
637
- 6: "!text-sm"
638
- }, N = c === 0 ? "big" : `h${k}`, R = c === 0;
639
- return /* @__PURE__ */ y(yo, { className: b("base-info", "lg:text-left", m && "!text-center", i), ...x, children: [
640
- l && /* @__PURE__ */ n("div", { children: l }),
641
- (d || u) && /* @__PURE__ */ n("div", { className: b("section__tag", a?.tag || a?.badge), children: d || u }),
642
- h && /* @__PURE__ */ n("img", { className: "w-[120px] m-auto mb-8", src: h, alt: "info", loading: "lazy" }),
643
- t && /* @__PURE__ */ n(
644
- A,
645
- {
646
- sx: {
647
- whiteSpace: "pre-wrap",
648
- mb: e ? "2vw" : 0,
649
- ...p?.color && { color: `${w(p.color)} !important` }
650
- },
651
- className: b(
652
- "section__title",
653
- "text-gray-800",
654
- "dark:text-gray-50",
655
- a.title,
656
- "page-kit-section__title",
657
- R ? "" : "section__title_non_big"
658
- ),
659
- component: `h${Math.max(c, 1)}`,
660
- variant: N,
661
- children: t
662
- }
663
- ),
664
- e && (o ? /* @__PURE__ */ n(
665
- g,
666
- {
667
- sx: {
668
- ...v?.color && { color: `${w(v.color)} !important` }
669
- },
670
- className: b(
671
- "section__description",
672
- "text-gray-800",
673
- "dark:text-gray-100",
674
- C[k],
675
- a.description,
676
- "page-kit-section__description"
677
- ),
678
- children: /* @__PURE__ */ n(we, { codeOptions: { showActionButton: !1, theme: ke }, children: e })
679
- }
680
- ) : /* @__PURE__ */ n(
681
- A,
682
- {
683
- sx: {
684
- whiteSpace: "pre-wrap",
685
- ...v?.color && { color: `${w(v.color)} !important` }
686
- },
687
- className: b(
688
- "section__description",
689
- "text-gray-800",
690
- "dark:text-gray-100",
691
- C[k],
692
- a.description,
693
- "page-kit-section__description"
694
- ),
695
- component: "div",
696
- variant: "body1",
697
- gutterBottom: !0,
698
- children: e
699
- }
700
- )),
701
- /* @__PURE__ */ n(U, { actions: r, center: m, className: "mt-8" }),
702
- s && /* @__PURE__ */ n("div", { children: s })
703
- ] });
704
- }
705
- const nt = [
706
- "actions",
707
- "append",
708
- "badge",
709
- "tag",
710
- "center",
711
- "description",
712
- "descriptionMarkdown",
713
- "level",
714
- "logo",
715
- "prepend",
716
- "title",
717
- "titleAppearance",
718
- "descriptionAppearance"
719
- ];
720
- function vo() {
721
- const t = navigator.userAgent.toLowerCase();
722
- return t.includes("safari") && !t.includes("chrome");
723
- }
724
- function wo(t = "") {
725
- if (t.startsWith("data:image/svg+xml,")) return !0;
726
- const e = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/, o = /^(\/|\.\/|\.\.\/)(?:[^/]+\/)*[^/]+$/;
727
- return e.test(t) || o.test(t);
728
- }
729
- function H(t) {
730
- return t?.endsWith(".mp4") || t?.endsWith(".m4v") || t?.endsWith(".webm");
731
- }
732
- function ko(t) {
733
- return t?.endsWith(".mp4") || t?.endsWith(".m4v") ? "video/mp4" : t?.endsWith(".webm") ? "video/webm" : void 0;
734
- }
735
- function _o(t) {
736
- let e = {};
737
- return typeof t == "string" ? Ce(t) ? e.image = t : (e.image = L(t), Se(t) && (e.color = t, e.image = "")) : e = t, e;
738
- }
739
- function $o() {
740
- const [t, e] = tt(Date.now());
741
- return Y(() => {
742
- const o = () => {
743
- e(Date.now());
744
- };
745
- return document.addEventListener("visibilitychange", o), () => {
746
- document.removeEventListener("visibilitychange", o);
747
- };
748
- }, []), t;
749
- }
750
- function $t(t, e, o, r, i) {
751
- let a = null;
752
- const { color: l = "", image: s } = _o(e);
753
- if (s && wo(s)) {
754
- delete o.backgroundColor;
755
- const c = !(t.mobile.apple.device || vo()) && H(s), d = H(s) && r ? j(L(r), 1200, "quality") : "";
756
- c ? a = /* @__PURE__ */ n(
757
- g,
758
- {
759
- component: "video",
760
- className: "section-bg",
761
- autoPlay: !0,
762
- loop: !0,
763
- muted: !0,
764
- controls: !1,
765
- playsInline: !0,
766
- poster: d,
767
- src: H(s) ? s : j(s, 1200, "quality"),
768
- sx: {
769
- width: "100%",
770
- position: "absolute",
771
- zIndex: -9999,
772
- right: 0,
773
- left: 0,
774
- top: 0,
775
- height: "100%",
776
- objectFit: "cover"
777
- }
778
- },
779
- s
780
- ) : a = /* @__PURE__ */ n(
781
- jt,
782
- {
783
- src: H(s) && r ? d : s,
784
- sizesAttr: {
785
- sm: 600,
786
- md: 900,
787
- lg: 1200
788
- },
789
- className: "section-bg",
790
- alt: "",
791
- width: "100%",
792
- loading: "lazy",
793
- sx: {
794
- position: "absolute",
795
- zIndex: -9999,
796
- right: 0,
797
- left: 0,
798
- top: 0,
799
- width: "100%",
800
- height: "100%",
801
- objectFit: "cover"
802
- }
803
- },
804
- i || s
805
- );
806
- } else s ? o.backgroundImage = `${s} !important` : l && (o.backgroundColor = `${l} !important`);
807
- return a;
808
- }
809
- function Co({ autoWidth: t, children: e, ...o }) {
810
- return t ? /* @__PURE__ */ n(
811
- g,
812
- {
813
- ...o,
814
- sx: [
815
- {
816
- display: "flex"
817
- },
818
- ...Array.isArray(o.sx) ? o.sx : [o.sx]
819
- ],
820
- children: e
821
- }
822
- ) : /* @__PURE__ */ n(ie, { ...o, children: e });
823
- }
824
- function it({
825
- dark: t = !1,
826
- children: e,
827
- className: o,
828
- sx: r = {},
829
- boxed: i = { show: !1 },
830
- padding: a = "normal",
831
- boxProps: l,
832
- type: s,
833
- ...c
834
- }) {
835
- const d = { ...r }, u = Ft((p) => p.breakpoints.down("md"));
836
- t && (d.color = _t.common.white, d.backgroundColor = `${_t.grey[900]} !important`), i.show && (d.display = "flex");
837
- const m = S(() => !Number(c.boxMaxWidth) || u ? {
838
- width: "100%"
839
- } : s === "wall" && c.boxMaxWidth ? {
840
- maxWidth: `${c.boxMaxWidth}px !important`,
841
- width: "100%"
842
- } : {
843
- width: "100%"
844
- }, [c.boxMaxWidth, u, s]), h = W({
845
- type: "baseSectionPaddingY",
846
- value: a || "normal",
847
- // section default is normal
848
- defaultValue: ""
849
- });
850
- return /* @__PURE__ */ n(
851
- So,
852
- {
853
- component: "section",
854
- styles: { ...d, ...h },
855
- className: b("base-section", "px-2 md:px-5 lg:px-5 xl:px-10", o, {
856
- dark: t
857
- }),
858
- ...I(
859
- c,
860
- "hoverStyle",
861
- "boxMaxWidth",
862
- "embedUrl",
863
- "autoWidth",
864
- "paddingXY",
865
- "iframeHeight",
866
- "titleAppearance",
867
- "descriptionAppearance"
868
- ),
869
- children: /* @__PURE__ */ n(Co, { autoWidth: c?.autoWidth, className: b("section-content h-full"), sx: m, children: i.show ? /* @__PURE__ */ n(ft, { ...l, boxed: i, children: e }) : e })
870
- }
871
- );
872
- }
873
- function ft({
874
- background: t = "",
875
- backgroundVideoPoster: e,
876
- children: o,
877
- sx: r = {},
878
- boxed: i = { show: !1 },
879
- className: a = "",
880
- styles: l = {},
881
- ...s
882
- }) {
883
- const c = { ...l, ...r }, d = At();
884
- let u = null;
885
- const m = Ft((v) => v.breakpoints.up("sm")), h = _e(), p = $o();
886
- return t && (u = $t(
887
- h,
888
- typeof t == "string" ? d(t) : t,
889
- c,
890
- e,
891
- p
892
- )), i.show && (c.borderRadius = "10px", c.padding === void 0 && (c.padding = m ? "50px" : "20px"), i?.border && (c.border = "1px solid #c0c0c0"), i?.background && (u = $t(
893
- h,
894
- typeof i?.background == "string" ? d(i?.background) : i?.background,
895
- c,
896
- i?.backgroundVideoPoster,
897
- p
898
- ))), /* @__PURE__ */ y(
899
- g,
900
- {
901
- ...s,
902
- sx: {
903
- ...c,
904
- ...u ? { position: "relative", overflow: "hidden", zIndex: 0 } : {}
905
- },
906
- className: b(a, i?.boxShadow && "shadow-xl"),
907
- children: [
908
- u,
909
- o
910
- ]
911
- }
912
- );
913
- }
914
- const So = $(ft)`
915
- &:nth-of-type(even) {
916
- background: #f8f8f8;
917
- }
918
-
919
- @media (max-width: 600px) {
920
- .section__title {
921
- font-size: 24px;
922
- }
923
-
924
- .base-info {
925
- > *:last-child {
926
- margin-bottom: 0;
927
- }
928
- }
929
- }
930
- `;
931
- function Vt(t) {
932
- if (t.type === xe) {
933
- const o = (t.props.children || []).filter((r) => Pt(r));
934
- return o.length === 1 ? Vt(o[0]) : o.length > 1;
935
- }
936
- return Array.isArray(t);
937
- }
938
- const E = "&>*";
939
- function Jt({ children: t, col: e, gap: o, className: r, align: i, sx: a, type: l, ...s } = {
940
- children: null,
941
- className: "",
942
- col: 3,
943
- gap: void 0,
944
- sx: {},
945
- align: "center",
946
- type: "default"
947
- }) {
948
- const c = Et(), d = Number(Math.floor(100 / e * 100) / 100), u = {
949
- center: "justify-center items-center",
950
- left: "justify-start items-center",
951
- right: "justify-end items-center",
952
- top: "justify-center items-start",
953
- bottom: "justify-center items-end",
954
- "top-left": "justify-start items-start",
955
- "top-right": "justify-end items-start",
956
- "bottom-left": "justify-start items-end",
957
- "bottom-right": "justify-end items-end"
958
- }, m = u[i] || u.center;
959
- let p = o ?? ({
960
- 2: 6,
961
- 3: 4,
962
- 4: 4,
963
- 5: 3,
964
- 6: 3
965
- }[e] || 0);
966
- Vt(t) || (p = 0);
967
- const x = (e - 1) * p / e;
968
- let w = { ...a, gap: `${p}rem` };
969
- const k = { [E]: { width: "100%" } }, C = {}, N = {}, R = {};
970
- switch (k.gap = "1rem", C.gap = `${p / 2}rem`, e) {
971
- case 3:
972
- case 4:
973
- C[E] = {
974
- width: `calc(50% - ${p / 2}rem)`
975
- };
976
- break;
977
- case 5:
978
- case 6:
979
- k[E] = {
980
- width: `calc(50% - ${p / 2 / 2}rem)`
981
- }, C[E] = {
982
- width: `calc(50% - ${p / 2 / 2}rem)`
983
- }, N[E] = {
984
- width: `calc(33.33% - ${p * 2 / 3}rem)`
985
- };
986
- break;
987
- }
988
- return w[E] = { width: `calc(${d}% - ${x}rem)` }, w[`@media (max-width: ${c.breakpoints.values.xl}px)`] = R, w[`@media (max-width: ${c.breakpoints.values.lg}px)`] = N, w[`@media (max-width: ${c.breakpoints.values.md}px)`] = C, w[`@media (max-width: ${c.breakpoints.values.sm}px)`] = k, l === "wall" && (w = { ...a, gap: `${p}rem` }, w[E] = { width: `calc(${d}% - ${x}rem)` }, k[E] = { width: `calc(45% - ${p / 2 / 2}rem)` }, w[`@media (max-width: ${c.breakpoints.values.sm}px)`] = k), /* @__PURE__ */ n(g, { className: b("flex flex-wrap flex-row h-full", m, r), sx: w, ...s, children: t });
989
- }
990
- function D({ type: t = "", icon: e = "", size: o = "3rem", className: r = "", ...i }) {
991
- return /* @__PURE__ */ n(
992
- mt,
993
- {
994
- icon: e || t,
995
- size: o,
996
- className: b("content-icon", r),
997
- ...i,
998
- color: typeof i.color > "u" ? "inherit" : i.color
999
- }
1000
- );
1001
- }
1002
- function Bo({
1003
- to: t,
1004
- base: e,
1005
- children: o,
1006
- className: r,
1007
- activeClassName: i = "active",
1008
- target: a = "auto",
1009
- autoExternalMark: l = !1,
1010
- useRouterLink: s,
1011
- ...c
1012
- }) {
1013
- const { pages: d = [], locale: u = "" } = {}, m = e ? q("/", e) : e || "";
1014
- let h = a === "auto" ? "_self" : a, p = q(m, t);
1015
- const v = l ? ut(p) : !1;
1016
- if (e)
1017
- return p = q(m, u, t), /* @__PURE__ */ n(
1018
- "a",
1019
- {
1020
- className: `no-underline ${r}`,
1021
- href: ct(p),
1022
- rel: "noreferrer noopener",
1023
- target: h,
1024
- ...c,
1025
- children: o
1026
- }
1027
- );
1028
- if (ut(t))
1029
- a === "auto" && (h = "_blank"), p = t;
1030
- else {
1031
- Be(p) && (p = q(window.location.pathname, p));
1032
- const x = Ne(`${window.location.origin}${p}`), w = d.some((k) => k.pathname === x.pathname);
1033
- if (s || w)
1034
- return /* @__PURE__ */ n(
1035
- be,
1036
- {
1037
- end: !0,
1038
- to: ct(p),
1039
- className: ({ isActive: k }) => b(r, k ? i : ""),
1040
- ...c,
1041
- children: o
1042
- }
1043
- );
1044
- }
1045
- return /* @__PURE__ */ y(
1046
- "a",
1047
- {
1048
- className: `no-underline ${r}`,
1049
- href: ct(p),
1050
- rel: "noreferrer noopener",
1051
- target: h,
1052
- ...c,
1053
- children: [
1054
- o,
1055
- v && /* @__PURE__ */ n(D, { icon: "i-mdi:arrow-top-right", size: "0.9em", className: "smart-link__mark", style: { marginLeft: 5 } })
1056
- ]
1057
- }
1058
- );
1059
- }
1060
- function K({
1061
- prepend: t,
1062
- append: e,
1063
- children: o,
1064
- className: r = "",
1065
- dark: i = !1,
1066
- border: a = !0,
1067
- ...l
1068
- }) {
1069
- let s = {};
1070
- const { pages: c = [] } = Gt(), d = c.find((h) => h.id === l.link), u = !o || ge.Children.toArray(o).every((h) => h === null);
1071
- l.link && (s = {
1072
- component: Bo,
1073
- to: d?.path || l.link,
1074
- useRouterLink: !0
1075
- });
1076
- const m = ae();
1077
- return /* @__PURE__ */ y(
1078
- No,
1079
- {
1080
- className: b("base-card card", { dark: i, "border-transparent": !a }, r),
1081
- sx: {
1082
- borderColor: m.palette.divider
1083
- },
1084
- ...s,
1085
- ...I(l, ["listType", "dark", "iconColor", "link", "hoverStyle", "imageSize"]),
1086
- children: [
1087
- t,
1088
- !u && /* @__PURE__ */ n("div", { className: "card__body", children: o }),
1089
- e
1090
- ]
1091
- }
1092
- );
1093
- }
1094
- const No = $(g)`
1095
- &.base-card {
1096
- text-align: left;
1097
- border-width: 1px;
1098
- border-style: solid;
1099
- border-radius: 12px;
1100
- overflow: hidden;
1101
- &,
1102
- &:hover {
1103
- text-decoration: none;
1104
- }
1105
- }
1106
- .card__body {
1107
- padding: 15px 15px;
1108
- }
1109
- `;
1110
- function X({
1111
- align: t = "left",
1112
- title: e,
1113
- titleProps: o = {},
1114
- description: r,
1115
- descriptionProps: i = {}
1116
- }) {
1117
- return /* @__PURE__ */ y(J, { children: [
1118
- e && /* @__PURE__ */ n(
1119
- A,
1120
- {
1121
- className: b("card__title text-gray-800", "dark:text-gray-50"),
1122
- component: "h5",
1123
- variant: "h5",
1124
- gutterBottom: !0,
1125
- align: t,
1126
- ...o,
1127
- children: e
1128
- }
1129
- ),
1130
- r && /* @__PURE__ */ n(
1131
- A,
1132
- {
1133
- className: b("card__description", "text-gray-500", "dark:text-gray-400"),
1134
- component: "div",
1135
- variant: "body1",
1136
- gutterBottom: !0,
1137
- align: t,
1138
- ...i,
1139
- children: r
1140
- }
1141
- )
1142
- ] });
1143
- }
1144
- function Ro({
1145
- image: t,
1146
- title: e,
1147
- description: o,
1148
- imageProps: r = {},
1149
- imageMeta: i,
1150
- imageSize: a,
1151
- titleProps: l = {},
1152
- descriptionProps: s = {},
1153
- actions: c,
1154
- align: d,
1155
- ...u
1156
- }) {
1157
- const m = xt(t), h = j(L(t), 540);
1158
- return /* @__PURE__ */ y(
1159
- Mo,
1160
- {
1161
- className: "card-article",
1162
- ...u,
1163
- prepend: /* @__PURE__ */ n("div", { className: "card__image__wrap", children: m && t ? /* @__PURE__ */ n(
1164
- g,
1165
- {
1166
- sx: {
1167
- position: "absolute",
1168
- left: 0,
1169
- top: 0,
1170
- right: 0,
1171
- bottom: 0,
1172
- display: "flex",
1173
- alignItems: "center",
1174
- justifyContent: "center"
1175
- },
1176
- children: /* @__PURE__ */ n(D, { icon: t, color: "primary.main" })
1177
- }
1178
- ) : h && /* @__PURE__ */ n(
1179
- "img",
1180
- {
1181
- className: "card__image",
1182
- src: h,
1183
- ...r,
1184
- alt: r.alt || i?.filename || "card-image",
1185
- width: i?.naturalWidth,
1186
- height: i?.naturalHeight,
1187
- style: { width: "100%", height: "100%", objectFit: a || "cover", objectPosition: "center" },
1188
- loading: "lazy"
1189
- }
1190
- ) }),
1191
- children: [
1192
- e || o ? /* @__PURE__ */ n(
1193
- X,
1194
- {
1195
- align: d,
1196
- title: e,
1197
- titleProps: l,
1198
- description: o,
1199
- descriptionProps: s
1200
- }
1201
- ) : null,
1202
- c?.length ? /* @__PURE__ */ n(U, { align: d, actions: c, className: "mt-4" }) : null
1203
- ]
1204
- }
1205
- );
1206
- }
1207
- const Mo = $(K)`
1208
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1209
- &:hover {
1210
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1211
- }` : ""}
1212
-
1213
- .card__title {
1214
- color: ${({ theme: t }) => t.palette.text.primary};
1215
- a {
1216
- color: ${({ theme: t }) => t.palette.primary.main};
1217
- }
1218
- }
1219
- .card__description {
1220
- color: ${({ theme: t }) => t.palette.text.primary};
1221
- a {
1222
- color: ${({ theme: t }) => t.palette.primary.main};
1223
- }
1224
- }
1225
-
1226
- .card__image__wrap {
1227
- padding-top: 61.8%;
1228
- width: 100%;
1229
- position: relative;
1230
- }
1231
- .card__image {
1232
- position: absolute;
1233
- top: 0;
1234
- left: 0;
1235
- bottom: 0;
1236
- right: 0;
1237
- width: 100%;
1238
- height: 100%;
1239
- object-position: top center;
1240
- }
1241
- `, Ct = "section";
1242
- function St({
1243
- title: t,
1244
- image: e,
1245
- imageMeta: o,
1246
- description: r,
1247
- actions: i,
1248
- align: a,
1249
- listType: l = "",
1250
- className: s = "",
1251
- ...c
1252
- }) {
1253
- return /* @__PURE__ */ y(Io, { className: b("card", `list-type-${l}`, s), align: a, ...c, children: [
1254
- e && /* @__PURE__ */ n(
1255
- D,
1256
- {
1257
- icon: e,
1258
- color: "primary.main",
1259
- size: l === "icon-title" ? "1.2rem" : "3rem",
1260
- imageMeta: o
1261
- }
1262
- ),
1263
- t || r ? /* @__PURE__ */ n(X, { align: a, title: t, description: r }) : null,
1264
- i?.length ? /* @__PURE__ */ n(U, { align: a, actions: i, className: "mt-4" }) : null
1265
- ] });
1266
- }
1267
- const Io = $(K)`
1268
- padding: 5vw 4vw;
1269
- box-sizing: border-box;
1270
- /* min-height: 320px; */
1271
- color: inherit !important;
1272
- border-radius: 0.5rem;
1273
- /* ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`} */
1274
- @media (max-width: ${({ theme: t }) => t.breakpoints.values[Ct]}px) {
1275
- padding: 1.5rem 2rem;
1276
- }
1277
- @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
1278
- height: auto;
1279
- min-height: unset;
1280
- }
1281
-
1282
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1283
- &:hover {
1284
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1285
- }` : ""}
1286
-
1287
- .card__title {
1288
- font-weight: 700;
1289
- margin-top: 24px;
1290
- margin-bottom: 12px;
1291
- color: ${({ theme: t }) => t.palette.text.primary};
1292
- a {
1293
- color: ${({ theme: t }) => t.palette.primary.main};
1294
- }
1295
- }
1296
- .card__description {
1297
- color: ${({ theme: t }) => t.palette.text.primary};
1298
- a {
1299
- color: ${({ theme: t }) => t.palette.primary.main};
1300
- }
1301
- }
1302
- .card__body {
1303
- color: ${({ theme: t }) => t.palette.text.primary};
1304
- padding: 0;
1305
- ${({ align: t }) => `text-align:${t || "left"};`}
1306
- }
1307
-
1308
- &.list-type-icon-title {
1309
- padding: 1.2rem;
1310
- .title-line {
1311
- display: flex;
1312
- }
1313
- .card__title {
1314
- margin: 0;
1315
- font-size: 1em;
1316
- }
1317
- .css-icon {
1318
- margin-right: 0.5rem;
1319
- }
1320
- }
1321
-
1322
- @media (min-width: ${({ theme: t }) => t.breakpoints.values[Ct]}px) {
1323
- padding: 2rem 2rem;
1324
- text-align: left;
1325
- box-sizing: border-box;
1326
- }
1327
- `;
1328
- function Lo({
1329
- image: t,
1330
- title: e,
1331
- description: o,
1332
- imageProps: r = {},
1333
- imageMeta: i,
1334
- imageSize: a,
1335
- titleProps: l = {},
1336
- descriptionProps: s = {},
1337
- actions: c,
1338
- align: d,
1339
- ...u
1340
- }) {
1341
- const m = xt(t), h = j(L(t), 540);
1342
- return /* @__PURE__ */ y(
1343
- Po,
1344
- {
1345
- className: "card-article",
1346
- ...u,
1347
- prepend: /* @__PURE__ */ n("div", { className: "card__image__wrap", children: m && t ? /* @__PURE__ */ n(
1348
- g,
1349
- {
1350
- sx: {
1351
- position: "absolute",
1352
- left: 0,
1353
- top: 0,
1354
- right: 0,
1355
- bottom: 0,
1356
- display: "flex",
1357
- alignItems: "center",
1358
- justifyContent: "center"
1359
- },
1360
- children: /* @__PURE__ */ n(D, { icon: t, color: "primary.main" })
1361
- }
1362
- ) : h && /* @__PURE__ */ n(
1363
- g,
1364
- {
1365
- component: "img",
1366
- className: "card__image",
1367
- src: h,
1368
- ...r,
1369
- alt: r.alt || i?.filename || "card-image",
1370
- style: { width: "100%", height: "100%", objectFit: a || "contain", objectPosition: "center" },
1371
- loading: "lazy",
1372
- sx: [
1373
- {
1374
- width: i?.naturalWidth,
1375
- height: i?.naturalHeight
1376
- },
1377
- ...Array.isArray(r.sx) ? r.sx : [r.sx]
1378
- ]
1379
- }
1380
- ) }),
1381
- children: [
1382
- e || o ? /* @__PURE__ */ n(
1383
- X,
1384
- {
1385
- align: d,
1386
- title: e,
1387
- titleProps: l,
1388
- description: o,
1389
- descriptionProps: s
1390
- }
1391
- ) : null,
1392
- c?.length ? /* @__PURE__ */ n(U, { align: d, actions: c, className: "mt-4" }) : null
1393
- ]
1394
- }
1395
- );
1396
- }
1397
- const Po = $(K)`
1398
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1399
- &:hover {
1400
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1401
- }` : ""}
1402
-
1403
- border-radius: 0 !important;
1404
-
1405
- .card__body {
1406
- ${({ align: t }) => `text-align:${t || "left"};`}
1407
- }
1408
-
1409
- .card__image__wrap {
1410
- width: 100%;
1411
- height: 100%;
1412
- position: relative;
1413
- display: flex;
1414
- justify-content: center;
1415
- align-items: center;
1416
- }
1417
-
1418
- .card__image {
1419
- max-height: 60px;
1420
- }
1421
- `, Bt = "section";
1422
- function Eo({
1423
- title: t,
1424
- image: e,
1425
- imageMeta: o,
1426
- iconSize: r = 100,
1427
- description: i,
1428
- actions: a,
1429
- align: l,
1430
- className: s = "",
1431
- ...c
1432
- }) {
1433
- return /* @__PURE__ */ n(Wo, { className: b("card", s), ...c, children: /* @__PURE__ */ y(g, { className: "flex items-center", children: [
1434
- e && /* @__PURE__ */ n(D, { icon: e, color: "primary.main", size: r, imageMeta: o }),
1435
- /* @__PURE__ */ y(g, { className: "flex-1 ml-4", children: [
1436
- /* @__PURE__ */ n(X, { align: l, title: t, description: i }),
1437
- /* @__PURE__ */ n(U, { align: l, actions: a, className: "mt-4" })
1438
- ] })
1439
- ] }) });
1440
- }
1441
- const Wo = $(K)`
1442
- padding: 5vw 4vw;
1443
- text-align: left;
1444
- box-sizing: border-box;
1445
- /* min-height: 320px; */
1446
- color: inherit !important;
1447
- border-radius: 0.5rem;
1448
- /* ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`} */
1449
- @media (max-width: ${({ theme: t }) => t.breakpoints.values[Bt]}px) {
1450
- padding: 1.5rem 2rem;
1451
- }
1452
- @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
1453
- height: auto;
1454
- min-height: unset;
1455
- }
1456
-
1457
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1458
- &:hover {
1459
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1460
- }` : ""}
1461
-
1462
- .card__title {
1463
- font-weight: 700;
1464
- margin-bottom: 12px;
1465
- color: ${({ theme: t }) => t.palette.text.primary};
1466
- a {
1467
- color: ${({ theme: t }) => t.palette.primary.main};
1468
- }
1469
- }
1470
- .card__description {
1471
- color: ${({ theme: t }) => t.palette.text.primary};
1472
- a {
1473
- color: ${({ theme: t }) => t.palette.primary.main};
1474
- }
1475
- }
1476
- .card__body {
1477
- padding: 0;
1478
- }
1479
-
1480
- &.list-type-icon-title {
1481
- padding: 1.2rem;
1482
- .title-line {
1483
- display: flex;
1484
- }
1485
- .card__title {
1486
- margin: 0;
1487
- font-size: 1em;
1488
- }
1489
- .css-icon {
1490
- margin-right: 0.5rem;
1491
- }
1492
- }
1493
-
1494
- @media (min-width: ${({ theme: t }) => t.breakpoints.values[Bt]}px) {
1495
- padding: 2rem 2rem;
1496
- text-align: left;
1497
- box-sizing: border-box;
1498
- }
1499
- `;
1500
- function Ao({
1501
- title: t,
1502
- titleProps: e = {},
1503
- description: o,
1504
- descriptionProps: r = {},
1505
- image: i,
1506
- imageMeta: a,
1507
- className: l = "",
1508
- align: s,
1509
- hoverStyle: c,
1510
- ...d
1511
- }) {
1512
- return /* @__PURE__ */ y(jo, { className: b("card-simple", l, `hover-style__${c}`), align: s, ...d, children: [
1513
- i && /* @__PURE__ */ n(D, { icon: i, color: "primary.main", imageMeta: a }),
1514
- t || o ? /* @__PURE__ */ n(
1515
- X,
1516
- {
1517
- align: s,
1518
- title: t,
1519
- titleProps: e,
1520
- description: o,
1521
- descriptionProps: r
1522
- }
1523
- ) : null
1524
- ] });
1525
- }
1526
- const jo = $(K)`
1527
- .card__title {
1528
- color: ${({ theme: t }) => t.palette.text.primary};
1529
- a {
1530
- color: ${({ theme: t }) => t.palette.primary.main};
1531
- }
1532
- }
1533
- .card__description {
1534
- color: ${({ theme: t }) => t.palette.text.primary};
1535
- a {
1536
- color: ${({ theme: t }) => t.palette.primary.main};
1537
- }
1538
- }
1539
-
1540
- &.hover-style__default {
1541
- &.card-simple {
1542
- &:hover {
1543
- border-top-right-radius: 36px;
1544
- }
1545
- }
1546
- .card__body {
1547
- &:hover {
1548
- &::before {
1549
- width: 42px;
1550
- height: 42px;
1551
- transform: translate(50%, -50%) rotate(45deg);
1552
- }
1553
- &::after {
1554
- transform: none;
1555
- }
1556
- }
1557
- }
1558
- }
1559
-
1560
- &.card-simple {
1561
- border-radius: 8px;
1562
- border-top-right-radius: 26px;
1563
-
1564
- .card__body {
1565
- ${({ align: t }) => `text-align:${t || "left"};`}
1566
- }
1567
-
1568
- ${(t) => t.link ? `
1569
- cursor: pointer;
1570
- ` : ""}
1571
- /* cursor: pointer; */
1572
- /* &:hover {
1573
- border-top-right-radius: 36px;
1574
- } */
1575
- transition: all 180ms ease 0s;
1576
- overflow: visible;
1577
- .card__title {
1578
- margin: 12px 0;
1579
- }
1580
- .card__body {
1581
- position: relative;
1582
- padding: 20px 16px 18px;
1583
- overflow: hidden;
1584
- transition: all 180ms ease 0s;
1585
- /* &:hover {
1586
- &::before {
1587
- width: 42px;
1588
- height: 42px;
1589
- transform: translate(50%, -50%) rotate(45deg);
1590
- }
1591
- &::after {
1592
- transform: none;
1593
- }
1594
- } */
1595
- &::before,
1596
- &::after {
1597
- content: ${({ border: t }) => t ? '""' : ""};
1598
- transition: inherit;
1599
- position: absolute;
1600
- top: 0px;
1601
- right: 0px;
1602
- }
1603
- &::before {
1604
- z-index: 3;
1605
- background: #fff;
1606
- width: 30px;
1607
- height: 30px;
1608
- transform: translate(50%, -50%) rotate(45deg);
1609
- box-shadow: 0 1px 0 0 #e9eaec;
1610
- }
1611
- &::after {
1612
- z-index: 2;
1613
- width: 28px;
1614
- height: 28px;
1615
- border-bottom-left-radius: 6px;
1616
- background: #fcfcfd;
1617
- box-shadow: -1px 1px 0 0 #e9eaec;
1618
- transform: translate(8px, -8px);
1619
- }
1620
- }
1621
- }
1622
- `;
1623
- function Fo({ type: t = "default", ...e }) {
1624
- const r = {
1625
- article: Ro,
1626
- simple: Ao,
1627
- news: Eo,
1628
- default: St,
1629
- wall: Lo
1630
- }[t] || St;
1631
- return /* @__PURE__ */ n(r, { ...t === "news" ? e : I(e, "iconSize") });
1632
- }
1633
- function To({
1634
- list: t = [],
1635
- align: e = "top",
1636
- cards: o,
1637
- listBorder: r = !0,
1638
- listType: i = "",
1639
- col: a = 3,
1640
- gap: l,
1641
- iconColor: s,
1642
- className: c = "",
1643
- type: d = "default",
1644
- dark: u = !1,
1645
- textAlign: m = "left",
1646
- hoverStyle: h,
1647
- ...p
1648
- }) {
1649
- return /* @__PURE__ */ n(
1650
- Jt,
1651
- {
1652
- type: d,
1653
- className: b("card-list py-1", c, "items-stretch"),
1654
- col: a,
1655
- gap: l,
1656
- align: e,
1657
- ...p,
1658
- children: o || t.map((v) => /* @__PURE__ */ n(
1659
- Fo,
1660
- {
1661
- borderColor: r,
1662
- iconColor: s,
1663
- type: d,
1664
- listType: i,
1665
- dark: u,
1666
- ...v,
1667
- align: m,
1668
- style: l === 0 && t.length > 1 ? {
1669
- borderRadius: 0,
1670
- marginRight: "-1px",
1671
- marginBottom: "-1px"
1672
- } : {}
1673
- },
1674
- v.id
1675
- ))
1676
- }
1677
- );
1678
- }
1679
- const zo = [
1680
- "align",
1681
- "cards",
1682
- "list",
1683
- "listBorder",
1684
- "listType",
1685
- "col",
1686
- "gap",
1687
- "iconColor",
1688
- "type",
1689
- "textAlign"
1690
- ];
1691
- function P(t, e) {
1692
- const o = Z(t, e), r = I(t, e);
1693
- return [o, r];
1694
- }
1695
- const Oo = $(it)`
1696
- a .card {
1697
- color: #404040;
1698
- cursor: pointer;
1699
- }
1700
- a:not(.MuiButton-root) {
1701
- color: ${({ theme: t }) => t.palette.primary.main};
1702
- &:hover,
1703
- &:active {
1704
- color: ${({ theme: t }) => t.palette.primary.main};
1705
- }
1706
- }
1707
- a:hover .card {
1708
- color: #404040;
1709
- }
1710
- `;
1711
- function Uo({ className: t, ...e }) {
1712
- const [o, r] = P(e, nt), [i, a] = P(r, zo);
1713
- return /* @__PURE__ */ y(Oo, { className: b("section--card-list", t), type: e.type, ...a, children: [
1714
- Object.keys(o).length > 0 && /* @__PURE__ */ n(rt, { center: !0, ...o, className: "mb-[2.5vw]" }),
1715
- /* @__PURE__ */ n(To, { ...i, dark: !!e.dark })
1716
- ] });
1717
- }
1718
- const Do = $(Uo)`
1719
- .card__description {
1720
- white-space: pre-wrap;
1721
- }
1722
- .section__description {
1723
- }
1724
- .card {
1725
- /* background: inherit !important; */
1726
- }
1727
- &.dark .card-simple .card__body::before {
1728
- background: #212121 !important;
1729
- }
1730
- .card-simple .card__body::after {
1731
- background: inherit !important;
1732
- }
1733
- `;
1734
- function Go({ section: t, ...e }) {
1735
- const [{ editing: o }, r] = P(e, ot), i = S(() => ({
1736
- ...I(r, ["listBorder", "list", "iconSize", "imageSize"]),
1737
- list: r.list?.map((a) => ({
1738
- ...I(a, "icon", "iconColor"),
1739
- image: ["news", "simple", "default"].includes(r.type) && a.icon ? a.icon : a.image,
1740
- actions: a.actions?.map?.((l) => /* @__PURE__ */ n(Ht, { ...l, editing: o }, l.id)),
1741
- border: r.listBorder,
1742
- iconSize: r.iconSize,
1743
- imageSize: r.imageSize,
1744
- hoverStyle: r.hoverStyle
1745
- }))
1746
- }), [r]);
1747
- return /* @__PURE__ */ n(Do, { style: o ? { pointerEvents: "none" } : {}, ...i });
1748
- }
1749
- function Ho({
1750
- properties: t,
1751
- section: e,
1752
- locale: o,
1753
- dev: r
1754
- }) {
1755
- return e?.config?.componentId ? /* @__PURE__ */ n(
1756
- $e,
1757
- {
1758
- instanceId: e.id,
1759
- componentId: e.config.componentId,
1760
- blockletId: e.config.blockletId,
1761
- blockletTitle: e.config.blockletTitle,
1762
- componentName: e.config.componentName,
1763
- locale: o,
1764
- properties: t,
1765
- dev: r
1766
- }
1767
- ) : /* @__PURE__ */ n(
1768
- g,
1769
- {
1770
- sx: {
1771
- textAlign: "center",
1772
- py: 2
1773
- },
1774
- children: /* @__PURE__ */ n(
1775
- A,
1776
- {
1777
- variant: "caption",
1778
- sx: {
1779
- color: "text.secondary"
1780
- },
1781
- children: "Please select component to render"
1782
- }
1783
- )
1784
- }
1785
- );
1786
- }
1787
- function Vo({
1788
- src: t,
1789
- dataId: e,
1790
- isEdit: o = !1,
1791
- height: r = "100%",
1792
- onLoad: i = () => {
1793
- }
1794
- }) {
1795
- return /* @__PURE__ */ n(
1796
- Le,
1797
- {
1798
- isEdit: o,
1799
- embedId: e,
1800
- src: t,
1801
- height: r,
1802
- onLoad: () => {
1803
- i();
1804
- }
1805
- }
1806
- );
1807
- }
1808
- function Jo({ dataId: t, src: e, actions: o, center: r, onLoad: i, ...a }) {
1809
- const [l, s] = P(a, nt);
1810
- return /* @__PURE__ */ y(it, { ...s, children: [
1811
- Object.keys(l).length > 0 && /* @__PURE__ */ n(rt, { center: r, ...l }),
1812
- /* @__PURE__ */ n(
1813
- Vo,
1814
- {
1815
- dataId: t,
1816
- src: e,
1817
- onLoad: i,
1818
- height: a.iframeHeight ? `${a.iframeHeight}px` : "100%"
1819
- }
1820
- ),
1821
- /* @__PURE__ */ n(U, { actions: o, center: r })
1822
- ] });
1823
- }
1824
- const mn = {
1825
- src: "",
1826
- embedUrl: "",
1827
- title: "",
1828
- description: "",
1829
- dark: !1,
1830
- background: "",
1831
- center: !0,
1832
- config: {},
1833
- id: ""
1834
- };
1835
- function Yo({ section: t, id: e, src: o, ...r }) {
1836
- const i = `${e}-${r.locale}`, [{ editing: a }, l] = P(r, ot), s = pt({}), c = JSON.parse(JSON.stringify(l)), { message: d } = Re(i, "server"), u = Me(JSON.parse(JSON.stringify(l.config) || "{}"));
1837
- return Y(() => {
1838
- d && d.onInit(() => u.current);
1839
- }, [d]), Y(() => {
1840
- const m = JSON.parse(JSON.stringify(l.config) || "{}");
1841
- Ie(s.current, m) || (s.current = m, d?.send("config-set", m));
1842
- }, [d, l.config]), o ? /* @__PURE__ */ n(Jo, { ...c, dataId: i, src: o, style: a ? { pointerEvents: "none" } : {} }) : /* @__PURE__ */ n(Ko, { children: 'Please set the "src" attribute for this block' });
1843
- }
1844
- const Ko = $("div")`
1845
- user-select: none;
1846
- color: #999;
1847
- padding: 8px;
1848
- height: 200px;
1849
- `, Nt = {
1850
- width: "1px",
1851
- style: "solid",
1852
- color: "divider"
1853
- };
1854
- function Yt(t) {
1855
- return typeof t == "string" && t.startsWith("custom:");
1856
- }
1857
- function Xo(t) {
1858
- if (!Yt(t)) return Nt;
1859
- try {
1860
- const e = t?.substring(7) || "", [o = "1px", r = "solid", ...i] = e.split(" ");
1861
- return {
1862
- width: o,
1863
- style: r,
1864
- color: i.join(" ") || "divider"
1865
- };
1866
- } catch {
1867
- return Nt;
1868
- }
1869
- }
1870
- function qo(t) {
1871
- if (!t || t === "none")
1872
- return { border: "none" };
1873
- if (Yt(t)) {
1874
- const { width: e, style: o, color: r } = Xo(t);
1875
- return {
1876
- border: "none",
1877
- // 避免和下面的详细属性冲突
1878
- borderWidth: e,
1879
- borderStyle: o,
1880
- borderColor: r
1881
- };
1882
- }
1883
- return {};
1884
- }
1885
- function Kt(t) {
1886
- return typeof t == "string" && t.startsWith("custom:");
1887
- }
1888
- function Qo(t) {
1889
- if (!Kt(t)) return "0";
1890
- try {
1891
- return t?.substring(7) || "0";
1892
- } catch {
1893
- return "0";
1894
- }
1895
- }
1896
- function Zo(t) {
1897
- return !t || t === "none" ? { borderRadius: 0 } : Kt(t) ? { borderRadius: Qo(t) } : {};
1898
- }
1899
- function tr({ ref: t = void 0, type: e, sx: o, children: r, ...i }) {
1900
- const a = {
1901
- overflow: "hidden !important",
1902
- display: "grid !important"
1903
- }, l = [a, ...Array.isArray(o) ? o : [o]];
1904
- return O(() => {
1905
- const c = Ve(e || ""), d = Je(e || "");
1906
- return c ? (l.push({
1907
- img: {
1908
- objectFit: "contain !important",
1909
- bgcolor: (u) => u.palette.background.default,
1910
- borderRadius: "0 !important",
1911
- position: "relative"
1912
- }
1913
- }), /* @__PURE__ */ n(
1914
- Tt,
1915
- {
1916
- type: e,
1917
- sx: [
1918
- {
1919
- // @ts-ignore
1920
- ".screenshot--container": {
1921
- ...a,
1922
- ...Z(o, ["p", "px", "py", "pl", "pr", "pt", "pb", "ml", "mr", "mt", "mb", "alignItems"])
1923
- }
1924
- }
1925
- ],
1926
- children: r
1927
- }
1928
- )) : d ? /* @__PURE__ */ y(g, { sx: { width: "100%", height: "100%", border: 1, borderColor: "divider", overflow: "hidden" }, children: [
1929
- /* @__PURE__ */ y(
1930
- g,
1931
- {
1932
- sx: {
1933
- height: "30px",
1934
- backgroundColor: "divider",
1935
- display: "flex",
1936
- alignItems: "center",
1937
- px: 1.5
1938
- },
1939
- children: [
1940
- /* @__PURE__ */ y(g, { sx: { display: "flex", gap: 0.7, alignItems: "center" }, children: [
1941
- /* @__PURE__ */ n(
1942
- g,
1943
- {
1944
- sx: {
1945
- width: 12,
1946
- height: 12,
1947
- borderRadius: "50%",
1948
- backgroundColor: "#ff5f57"
1949
- }
1950
- }
1951
- ),
1952
- /* @__PURE__ */ n(
1953
- g,
1954
- {
1955
- sx: {
1956
- width: 12,
1957
- height: 12,
1958
- borderRadius: "50%",
1959
- backgroundColor: "#febc2e"
1960
- }
1961
- }
1962
- ),
1963
- /* @__PURE__ */ n(
1964
- g,
1965
- {
1966
- sx: {
1967
- width: 12,
1968
- height: 12,
1969
- borderRadius: "50%",
1970
- backgroundColor: "#28c840"
1971
- }
1972
- }
1973
- )
1974
- ] }),
1975
- e === "chrome-with-url" && /* @__PURE__ */ n(
1976
- g,
1977
- {
1978
- sx: {
1979
- ml: 2,
1980
- height: "18px",
1981
- width: "calc(100% - 80px)",
1982
- backgroundColor: "white",
1983
- borderRadius: 0.5
1984
- }
1985
- }
1986
- )
1987
- ]
1988
- }
1989
- ),
1990
- /* @__PURE__ */ n(
1991
- g,
1992
- {
1993
- ref: t,
1994
- sx: [
1995
- ...l,
1996
- {
1997
- position: "relative",
1998
- height: "calc(100% - 30px)"
1999
- }
2000
- ],
2001
- ...i,
2002
- children: r
2003
- }
2004
- )
2005
- ] }) : /* @__PURE__ */ n(g, { ref: t, sx: l, ...i, children: r });
2006
- }, [e, r, l])();
2007
- }
2008
- const er = "none", or = "none", rr = "center", nr = "start", ir = "none", ar = "none", sr = 12, lr = ({
2009
- gridSettings: t,
2010
- section: e,
2011
- index: o,
2012
- columns: r,
2013
- simulateMode: i = "desktop",
2014
- isBackground: a
2015
- }) => {
2016
- const l = t?.[i] ?? {}, s = l[e.id], c = cr(l);
2017
- return {
2018
- i: e.id,
2019
- static: e?.locked || a,
2020
- ...a ? {
2021
- x: 0,
2022
- y: 0,
2023
- w: r,
2024
- h: 1,
2025
- isResizable: !1
2026
- } : {
2027
- x: s?.x ?? 0,
2028
- y: s?.y ?? o,
2029
- w: s?.w ?? r,
2030
- h: s?.h ?? 1,
2031
- isResizable: !0
2032
- },
2033
- minH: 1,
2034
- maxH: 1,
2035
- maxY: c
2036
- };
2037
- }, cr = (t) => Object.values(t).reduce((e, o) => Math.max(e, o.y || 0), 0) || 0, dr = (t) => {
2038
- const { dev: e, id: o, section: r, onBlockRender: i } = t, a = e?.mode, l = se((f) => f.breakpoints.down("sm")), { t: s } = Pe(), { sections: c, sectionIds: d, config: u } = r, {
2039
- columns: m = sr,
2040
- gridSettings: h,
2041
- gap: p,
2042
- padding: v,
2043
- background: x,
2044
- backgroundVideoPoster: w,
2045
- alignContent: k,
2046
- justifyContent: C,
2047
- border: N,
2048
- borderRadius: R,
2049
- ignoreMaxWidth: bt
2050
- } = u || {}, at = S(() => {
2051
- const _ = W({
2052
- type: "layoutBlockGap",
2053
- value: p ?? er,
2054
- format: "sx"
2055
- }), F = {
2056
- ..._,
2057
- gap: Object.keys(_.gap || {}).reduce((T, B) => (T[B] = -_.gap[B], T), {})
2058
- };
2059
- return {
2060
- item: _,
2061
- container: F
2062
- };
2063
- }, [p]), Xt = S(() => W({
2064
- type: "layoutBlockPadding",
2065
- value: v ?? or,
2066
- format: "sx"
2067
- }), [v]), st = S(() => W({
2068
- type: "layoutBlockAlignContent",
2069
- value: k ?? rr,
2070
- format: "sx"
2071
- }), [k]), lt = S(() => W({
2072
- type: "layoutBlockJustifyContent",
2073
- value: C ?? nr,
2074
- format: "sx"
2075
- }), [C]), qt = S(() => {
2076
- const f = N ?? ir, _ = qo(f);
2077
- return Object.keys(_).length > 0 ? _ : W({
2078
- type: "layoutBlockBorder",
2079
- value: f,
2080
- format: "sx"
2081
- });
2082
- }, [N]), Qt = S(() => {
2083
- const f = R ?? ar, _ = Zo(f);
2084
- return Object.keys(_).length > 0 ? _ : W({
2085
- type: "layoutBlockBorderRadius",
2086
- value: f,
2087
- format: "sx"
2088
- });
2089
- }, [R]), yt = O(
2090
- (f, _ = !1, F = 0, T) => {
2091
- if (!i || !f || !f.component || f.visibility === "hidden")
2092
- return null;
2093
- const B = lr({
2094
- gridSettings: h,
2095
- section: f,
2096
- index: F,
2097
- columns: m,
2098
- simulateMode: l ? "mobile" : "desktop",
2099
- isBackground: _
2100
- }), G = B?.x ?? 0, z = B?.y ?? 0, Zt = B?.w ?? m, te = B?.h ?? 1, ee = B?.maxY ?? 0, oe = !!r?.config?.backgroundSectionId;
2101
- return /* @__PURE__ */ n(
2102
- g,
2103
- {
2104
- className: _ ? "layout-block-background" : "layout-block-component",
2105
- sx: {
2106
- // 背景元素和普通元素都使用 grid 布局
2107
- ..._ ? {
2108
- // 背景元素覆盖整个网格区域
2109
- gridColumn: "1 / -1",
2110
- gridRow: `1 / ${ee + 1}`,
2111
- zIndex: 0,
2112
- width: "100%",
2113
- height: "100%",
2114
- "& > .BlockBase-root": {
2115
- width: "100%",
2116
- height: "100%"
2117
- }
2118
- } : {
2119
- position: "relative",
2120
- // 使用 grid 定位普通元素
2121
- gridColumn: `${G + 1} / span ${Zt}`,
2122
- // hasBackground 的话,不再 + 1,因为 background 会占用第一行
2123
- gridRow: `${z + (oe ? 0 : 1)} / span ${te}`,
2124
- zIndex: 1,
2125
- // Ensure content is above background
2126
- minWidth: 0,
2127
- // 防止内容撑开网格项
2128
- minHeight: 0,
2129
- // 防止内容撑开网格项
2130
- // overflow: 'hidden', // 防止子内容溢出网格项
2131
- // 只给非第一行添加上边距
2132
- ...z > 0 ? { mt: at?.item?.gap } : {},
2133
- // 只给非第一列添加左边距
2134
- ...G > 0 ? { ml: at?.item?.gap } : {},
2135
- "& > .BlockBase-root": {
2136
- height: "100%",
2137
- width: "100%",
2138
- boxSizing: "border-box",
2139
- position: "relative",
2140
- ...st,
2141
- ...lt
2142
- }
2143
- }
2144
- },
2145
- children: T || i({
2146
- id: f.id,
2147
- type: f.component,
2148
- config: {},
2149
- section: {
2150
- ...f
2151
- },
2152
- mode: a
2153
- })
2154
- },
2155
- f.id
2156
- );
2157
- },
2158
- [
2159
- o,
2160
- a,
2161
- i,
2162
- h,
2163
- m,
2164
- l,
2165
- at,
2166
- st,
2167
- lt,
2168
- bt
2169
- ]
2170
- ), { backgroundElements: vt, contentElements: wt } = S(() => {
2171
- const f = [], _ = [];
2172
- return d?.forEach((F, T) => {
2173
- const B = c?.[F];
2174
- if (!B) return;
2175
- const G = r?.config?.backgroundSectionId === F, z = yt(B, G, T);
2176
- z && (G ? f.push(z) : _.push(z));
2177
- }), { backgroundElements: f || [], contentElements: _ || [] };
2178
- }, [yt, c, d, x, w]);
2179
- return a === "draft" && !vt?.length && !wt?.length ? /* @__PURE__ */ y(
2180
- g,
2181
- {
2182
- sx: {
2183
- gridColumn: "1 / -1",
2184
- gridRow: "1",
2185
- display: "flex",
2186
- flexDirection: "column",
2187
- alignItems: "center",
2188
- justifyContent: "center",
2189
- gap: 2,
2190
- border: (f) => `2px dashed ${f.palette.divider}`,
2191
- borderRadius: 2,
2192
- padding: 4,
2193
- color: "text.secondary",
2194
- textAlign: "center",
2195
- minHeight: "160px",
2196
- position: "relative"
2197
- },
2198
- children: [
2199
- /* @__PURE__ */ n(
2200
- g,
2201
- {
2202
- sx: {
2203
- fontSize: "48px",
2204
- opacity: 0.5
2205
- },
2206
- children: "📐"
2207
- }
2208
- ),
2209
- /* @__PURE__ */ n(
2210
- g,
2211
- {
2212
- sx: {
2213
- fontSize: "16px",
2214
- fontWeight: 500,
2215
- marginBottom: 1
2216
- },
2217
- children: "Section Layout"
2218
- }
2219
- ),
2220
- /* @__PURE__ */ n(
2221
- g,
2222
- {
2223
- sx: {
2224
- opacity: 0.7,
2225
- whiteSpace: "pre-line"
2226
- },
2227
- children: s("maker.layoutBlock.draftPlaceholder")
2228
- }
2229
- ),
2230
- /* @__PURE__ */ n(
2231
- g,
2232
- {
2233
- sx: {
2234
- position: "absolute",
2235
- top: 0,
2236
- left: 0,
2237
- right: 0,
2238
- bottom: 0,
2239
- pointerEvents: "none",
2240
- opacity: 0.1,
2241
- background: (f) => `
2242
- repeating-linear-gradient(
2243
- 90deg,
2244
- transparent,
2245
- transparent calc(100% / ${m} - 1px),
2246
- ${f.palette.grey[400]} calc(100% / ${m} - 1px),
2247
- ${f.palette.grey[400]} calc(100% / ${m})
2248
- )
2249
- `
2250
- }
2251
- }
2252
- )
2253
- ]
2254
- }
2255
- ) : /* @__PURE__ */ y(
2256
- tr,
2257
- {
2258
- type: N,
2259
- sx: {
2260
- position: "relative",
2261
- display: "grid",
2262
- gridTemplateColumns: `repeat(${m}, minmax(0, 1fr))`,
2263
- alignItems: "stretch",
2264
- width: "100%",
2265
- height: "100%",
2266
- minWidth: 0,
2267
- boxSizing: "border-box",
2268
- overflow: "hidden",
2269
- // Prevent content overflow
2270
- ...Xt,
2271
- ...st,
2272
- ...lt
2273
- },
2274
- children: [
2275
- x && /* @__PURE__ */ n(
2276
- g,
2277
- {
2278
- sx: {
2279
- position: "absolute",
2280
- zIndex: -1,
2281
- top: 0,
2282
- left: 0,
2283
- right: 0,
2284
- bottom: 0,
2285
- width: "100%",
2286
- height: "100%",
2287
- overflow: "hidden"
2288
- },
2289
- children: /* @__PURE__ */ n(
2290
- ft,
2291
- {
2292
- background: x,
2293
- backgroundVideoPoster: w,
2294
- sx: {
2295
- width: "inherit",
2296
- height: "inherit"
2297
- }
2298
- }
2299
- )
2300
- }
2301
- ),
2302
- /* @__PURE__ */ y(J, { children: [
2303
- r?.id && /* @__PURE__ */ n(
2304
- le,
2305
- {
2306
- styles: (f) => f.unstable_sx({
2307
- [`#BlockBase-${r.id}`]: {
2308
- ...bt && {
2309
- maxWidth: "unset !important",
2310
- px: 0
2311
- },
2312
- "& > div": {
2313
- ...qt,
2314
- ...Qt,
2315
- overflow: "hidden"
2316
- }
2317
- }
2318
- })
2319
- }
2320
- ),
2321
- vt,
2322
- wt
2323
- ] })
2324
- ]
2325
- }
2326
- );
2327
- }, ur = ["title", "description", "actions", "badge", "tag", "prepend", "append", "logo"];
2328
- function mr({
2329
- image: t,
2330
- imageBorder: e,
2331
- imageShadow: o,
2332
- className: r,
2333
- reverse: i = !1,
2334
- fullSizeImage: a,
2335
- ...l
2336
- }) {
2337
- const [s, c] = P(l, nt), d = Object.keys(s).length > 0 && Object.values(Z(s, ur)).filter(Boolean).length > 0 && /* @__PURE__ */ n(rt, { ...s }), u = Pt(t) ? t : /* @__PURE__ */ n(g, { component: "img", src: t, alt: "", className: "block" }), m = ["phone", "macbook"].includes(e), h = t && /* @__PURE__ */ n(
2338
- g,
2339
- {
2340
- className: b(
2341
- "section__image",
2342
- "m-auto, leading-[1] text-center",
2343
- o && "shadow-xl",
2344
- s?.center ? "flex justify-center items-center" : ""
2345
- ),
2346
- sx: {
2347
- border: e === !0 ? "1px solid #c0c0c0" : void 0,
2348
- borderRadius: 2,
2349
- overflow: "hidden",
2350
- // FIXME: Screenshot 组件无法设置最外层 div 的样式,只能通过父元素设置
2351
- "> div": m ? { width: "100%", video: { borderRadius: "0 !important" } } : void 0
2352
- },
2353
- children: m ? (
2354
- // @ts-ignore
2355
- /* @__PURE__ */ n(Tt, { type: e, sx: { width: "100%" }, children: u })
2356
- ) : u
2357
- }
2358
- );
2359
- return /* @__PURE__ */ n(
2360
- it,
2361
- {
2362
- className: b(
2363
- "section--block",
2364
- r,
2365
- a && !i && dt`
2366
- .section-bg {
2367
- height: 80%;
2368
- }
2369
- `
2370
- ),
2371
- ...c,
2372
- boxProps: a ? { sx: { padding: 0, overflow: "hidden" } } : void 0,
2373
- children: /* @__PURE__ */ n(
2374
- Jt,
2375
- {
2376
- col: t ? 2 : 1,
2377
- className: a ? dt`
2378
- display: flex;
2379
- flex-direction: column;
2380
-
2381
- > .base-info,
2382
- > .section__image {
2383
- width: 100%;
2384
-
2385
- > img,
2386
- > video {
2387
- width: 100%;
2388
- }
2389
- }
2390
- ` : void 0,
2391
- children: i ? /* @__PURE__ */ y(J, { children: [
2392
- h,
2393
- d
2394
- ] }) : /* @__PURE__ */ y(J, { children: [
2395
- d,
2396
- h
2397
- ] })
2398
- }
2399
- )
2400
- }
2401
- );
2402
- }
2403
- const pr = [
2404
- /youtu\.be\/([^#&?]{11})/,
2405
- // youtu.be/<id>
2406
- /\?v=([^#&?]{11})/,
2407
- // ?v=<id>
2408
- /&v=([^#&?]{11})/,
2409
- // &v=<id>
2410
- /embed\/([^#&?]{11})/,
2411
- // embed/<id>
2412
- /\/v\/([^#&?]{11})/
2413
- // /v/<id>
2414
- ];
2415
- function hr(t) {
2416
- if (/youtu\.?be/.test(t))
2417
- for (const e of pr) {
2418
- const o = e.exec(t)?.[1];
2419
- if (o)
2420
- return o;
2421
- }
2422
- }
2423
- function gr(t) {
2424
- const e = hr(t);
2425
- if (e)
2426
- return `https://youtube.com/embed/${e}`;
2427
- }
2428
- function xr({ src: t }) {
2429
- return Y(() => {
2430
- import("@lottiefiles/lottie-player");
2431
- }, []), /* @__PURE__ */ n("lottie-player", { autoplay: !0, loop: !0, mode: "normal", src: t });
2432
- }
2433
- function fr(t) {
2434
- return /* @__PURE__ */ n(
2435
- g,
2436
- {
2437
- sx: {
2438
- maxHeight: 400,
2439
- overflow: "hidden auto"
2440
- },
2441
- children: /* @__PURE__ */ n(Ee, { ...t })
2442
- }
2443
- );
2444
- }
2445
- function br({ url: t }) {
2446
- const e = pt(null), o = 495, [r, i] = tt(
2447
- e.current ? e.current.offsetWidth * 0.5625 : o
2448
- ), a = O(() => {
2449
- const l = window.innerWidth > 990 ? 1 : window.innerWidth > 522 ? 1.2 : window.innerWidth > 400 ? 1.45 : 1.85, s = e.current ? e.current.offsetWidth * 0.5625 : o;
2450
- return i(Math.floor(s * l));
2451
- }, []);
2452
- return Y(() => {
2453
- window.addEventListener("resize", a);
2454
- const l = window.innerWidth > 990 ? 1 : window.innerWidth > 522 ? 1.2 : window.innerWidth > 400 ? 1.45 : 1.85, s = e.current ? e.current.offsetWidth * 0.5625 : o;
2455
- return i(Math.floor(s * l)), function() {
2456
- window.removeEventListener("resize", a);
2457
- };
2458
- }, [r, a]), /* @__PURE__ */ n(
2459
- g,
2460
- {
2461
- component: "iframe",
2462
- ref: e,
2463
- title: "youtube",
2464
- src: t,
2465
- frameBorder: "0",
2466
- allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
2467
- allowFullScreen: !0,
2468
- sx: {
2469
- width: "100%",
2470
- height: `${r}px`,
2471
- display: "block"
2472
- }
2473
- }
2474
- );
2475
- }
2476
- const pn = {
2477
- image: "https://www.arcblock.io/static/ead0cabde7f2b7ff34db8f3e8ceca271/afc4b/builder.png",
2478
- badge: "Develop · Deploy · Run",
2479
- title: "The Future is Here: Blockchain and Decentralized Application Development",
2480
- description: "ArcBlock, your exclusive new decentralized development platform, makes developing decentralized applications, blockchain, and distributed ledger technology straightforward.",
2481
- reverse: !1,
2482
- dark: !1,
2483
- background: "",
2484
- actions: void 0,
2485
- hasImage: !0,
2486
- center: !1
2487
- }, yr = $(mr)`
2488
- .section__description {
2489
- }
2490
- `;
2491
- function vr({
2492
- hasImage: t,
2493
- fullSizeImage: e,
2494
- boxed: o,
2495
- videoPoster: r,
2496
- imageMeta: i,
2497
- imageOptimization: a,
2498
- imageSize: l,
2499
- section: s,
2500
- ...c
2501
- }) {
2502
- const [{ editing: d }, u] = P({ ...c, boxed: e ? void 0 : o }, ot);
2503
- let m = wr(u.image, r, e, i, a, l);
2504
- t || (m = null);
2505
- let h = null;
2506
- return u.actions && (h = u.actions?.map?.((p, v) => /* @__PURE__ */ n(Ht, { ...p, editing: d }, v))), /* @__PURE__ */ n(
2507
- yr,
2508
- {
2509
- ...u,
2510
- style: d ? { pointerEvents: "none" } : {},
2511
- image: m,
2512
- fullSizeImage: t && e,
2513
- actions: h
2514
- }
2515
- );
2516
- }
2517
- function wr(t, e, o, r, i, a) {
2518
- if (t) {
2519
- if (t.endsWith(".json"))
2520
- return /* @__PURE__ */ n(xr, { src: t });
2521
- if (t.indexOf("twitter.com") !== -1)
2522
- return /* @__PURE__ */ n(fr, { sourceType: "url", url: t });
2523
- const l = gr(t);
2524
- if (l)
2525
- return /* @__PURE__ */ n(br, { url: l });
2526
- const { naturalWidth: s, naturalHeight: c, filename: d } = r || {};
2527
- if (H(t))
2528
- return /* @__PURE__ */ n(
2529
- "video",
2530
- {
2531
- width: s && `${s}px`,
2532
- height: c && `${c}px`,
2533
- controls: !0,
2534
- autoPlay: !0,
2535
- muted: !0,
2536
- style: {
2537
- display: "block",
2538
- objectFit: a || "contain",
2539
- borderRadius: "8px",
2540
- width: "100%",
2541
- height: "100%"
2542
- },
2543
- poster: j(L(e), o ? 1200 : 540, i),
2544
- children: /* @__PURE__ */ n("source", { src: L(t), type: ko(t) })
2545
- },
2546
- t
2547
- );
2548
- const u = i === "quality" ? 1 : 0.6;
2549
- return /* @__PURE__ */ n(
2550
- jt,
2551
- {
2552
- src: L(t),
2553
- sizesAttr: {
2554
- sm: 600 * u,
2555
- md: 450 * u,
2556
- lg: 540 * u,
2557
- ...o && {
2558
- md: 900 * u,
2559
- lg: 1200 * u
2560
- }
2561
- },
2562
- width: s && `${s}px`,
2563
- height: c && `${c}px`,
2564
- alt: d ?? t,
2565
- style: { objectFit: a || "contain", display: "block", width: "100%", height: "100%" },
2566
- loading: "lazy"
2567
- }
2568
- );
2569
- }
2570
- return null;
2571
- }
2572
- const hn = ["production", "draft"];
2573
- function gn({ mode: t, version: e } = {}) {
2574
- const o = e && typeof e == "number" ? { mode: t, version: e } : { mode: t };
2575
- return ht.get(`/api/${gt()}/pages`, { params: o }).then((r) => r.data);
2576
- }
2577
- function xn({ mode: t, routes: e }) {
2578
- return ht.post(`/api/${gt()}/pages/publish`, { mode: t, routes: e }).then((o) => o.data);
2579
- }
2580
- function kr({
2581
- locale: t,
2582
- sort: e,
2583
- page: o,
2584
- limit: r,
2585
- mode: i
2586
- } = {}) {
2587
- return ht.get(`/api/${gt()}/pages/toc`, { params: { locale: t, sort: e, page: o, limit: r, mode: i } }).then((a) => a.data);
2588
- }
2589
- const fn = {
2590
- style: "list",
2591
- sort: "-updatedAt"
2592
- }, Rt = 20;
2593
- function _r({ style: t, sort: e, section: o, ...r }) {
2594
- const [{ editing: i, locale: a }, l] = P(r, ot), [s, c] = P(l, nt), [d, u] = tt(), m = pt(!1), h = We(), p = ye(), v = O(async () => {
2595
- if (!m.current) {
2596
- m.current = !0, h();
2597
- try {
2598
- const x = d ? Math.floor(d.list.length / Rt) + 1 : 1, { list: w, total: k } = await kr({ locale: a, sort: e, page: x, limit: Rt });
2599
- u((C) => ({
2600
- list: (C?.list ?? []).concat(w),
2601
- total: k
2602
- }));
2603
- } finally {
2604
- m.current = !1, h();
2605
- }
2606
- }
2607
- }, [d, a, e, h]);
2608
- return Ae(() => {
2609
- v();
2610
- }), /* @__PURE__ */ y(it, { ...c, sx: i ? { pointerEvents: "none" } : {}, children: [
2611
- Object.keys(s).length > 0 && /* @__PURE__ */ n(rt, { ...s }),
2612
- d ? /* @__PURE__ */ y(J, { children: [
2613
- /* @__PURE__ */ n(
2614
- kt,
2615
- {
2616
- container: !0,
2617
- spacing: 2,
2618
- sx: {
2619
- justifyContent: "center"
2620
- },
2621
- children: d?.list.map((x) => /* @__PURE__ */ n(
2622
- kt,
2623
- {
2624
- size: {
2625
- xs: 12,
2626
- sm: t === "card" ? 6 : 12,
2627
- md: t === "card" ? 3 : 12
2628
- },
2629
- children: /* @__PURE__ */ y(
2630
- $r,
2631
- {
2632
- elevation: 0,
2633
- className: b(t === "card" && "style-card"),
2634
- onClick: i ? void 0 : () => p(x.slug),
2635
- children: [
2636
- !!x.image && /* @__PURE__ */ n(
2637
- ue,
2638
- {
2639
- component: "img",
2640
- alt: "",
2641
- image: j(L(x.image), 540),
2642
- loading: "lazy"
2643
- }
2644
- ),
2645
- /* @__PURE__ */ y(me, { children: [
2646
- /* @__PURE__ */ n(A, { variant: "h6", component: "div", className: Mt, children: x.title || x.id }),
2647
- /* @__PURE__ */ n(A, { variant: "body2", className: Mt, children: x.description })
2648
- ] })
2649
- ]
2650
- }
2651
- )
2652
- },
2653
- x.id
2654
- ))
2655
- }
2656
- ),
2657
- /* @__PURE__ */ n(
2658
- g,
2659
- {
2660
- sx: {
2661
- textAlign: "center",
2662
- mt: 2
2663
- },
2664
- children: d.total > d.list.length ? /* @__PURE__ */ n(V, { variant: "outlined", color: "secondary", onClick: v, loading: m.current, children: "More" }) : /* @__PURE__ */ n(V, { variant: "outlined", color: "secondary", disabled: !0, children: "No More" })
2665
- }
2666
- )
2667
- ] }) : /* @__PURE__ */ n(
2668
- g,
2669
- {
2670
- sx: {
2671
- p: 2,
2672
- textAlign: "center"
2673
- },
2674
- children: /* @__PURE__ */ n(de, { size: 24 })
2675
- }
2676
- )
2677
- ] });
2678
- }
2679
- const Mt = dt`
2680
- display: -webkit-box;
2681
- -webkit-box-orient: vertical;
2682
- -webkit-line-clamp: 2;
2683
- overflow: hidden;
2684
- text-overflow: ellipsis;
2685
- `, $r = $(ce)`
2686
- border: 1px solid #e0e0e0;
2687
- background-color: transparent;
2688
- cursor: pointer;
2689
- display: flex;
2690
- color: inherit;
2691
-
2692
- > .MuiCardMedia-root {
2693
- width: 30vw;
2694
- max-height: 50vw;
2695
- }
2696
-
2697
- &.style-card {
2698
- display: block;
2699
-
2700
- > .MuiCardMedia-root {
2701
- width: 100%;
2702
- max-height: 50vw;
2703
- }
2704
- }
2705
- `, Cr = {
2706
- iframe: Yo,
2707
- section: vr,
2708
- "section-card-list": Go,
2709
- toc: _r,
2710
- "custom-component": Ho,
2711
- "layout-block": dr
2712
- };
2713
- function Sr({
2714
- id: t,
2715
- type: e,
2716
- mode: o,
2717
- config: r,
2718
- section: i,
2719
- ignorePageMetaStyle: a,
2720
- page: l,
2721
- ...s
2722
- }) {
2723
- const c = Cr[e], { getPageMetaStyle: d } = lo(), u = S(() => {
2724
- const { height: p, ...v } = r;
2725
- return e === "layout-block" && (v.onBlockRender = (x) => {
2726
- const w = {
2727
- ...r?.dev,
2728
- ...x?.config?.dev
2729
- }, { defaultLocale: k } = w, C = {
2730
- ...Z(r, ["locale", "editing"]),
2731
- ...x?.config,
2732
- dev: w
2733
- }, { locale: N } = C;
2734
- let R = l?.dataSource?.[x?.id]?.[N];
2735
- return he(R) && (R = l?.dataSource?.[x?.id]?.[k ?? "en"]), /* @__PURE__ */ n(
2736
- Sr,
2737
- {
2738
- ...x,
2739
- config: {
2740
- ...x?.section?.properties,
2741
- ...R,
2742
- ...C
2743
- },
2744
- page: l,
2745
- ignorePageMetaStyle: !0
2746
- }
2747
- );
2748
- }), v;
2749
- }, [r, e]), m = S(() => {
2750
- const p = {};
2751
- return e !== "custom-component" && (p.height = r.height), p.sx = a ? void 0 : d("sx"), p.id = `BlockBase-${t}`, p;
2752
- }, [r.height, a, e, d]), h = c && /* @__PURE__ */ n(c, { mode: o, ...u, id: t, section: i });
2753
- return h ? /* @__PURE__ */ n(co, { ...s, ...m, children: h }) : /* @__PURE__ */ n(Br, { type: e });
2754
- }
2755
- function Br({ type: t }) {
2756
- return /* @__PURE__ */ n(
2757
- g,
2758
- {
2759
- sx: {
2760
- p: 2
2761
- },
2762
- children: /* @__PURE__ */ y(pe, { icon: /* @__PURE__ */ n(re, {}), color: "error", children: [
2763
- "Unsupported Block `",
2764
- t,
2765
- "`"
2766
- ] })
2767
- }
2768
- );
2769
- }
2770
- export {
2771
- Sr as B,
2772
- mn as I,
2773
- dn as P,
2774
- hn as S,
2775
- fn as T,
2776
- cn as a,
2777
- pn as b,
2778
- gn as g,
2779
- xn as p
2780
- };