@blocklet/pages-kit-inner-components 0.4.116 → 0.4.117

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,2142 +0,0 @@
1
- import { jsx as o, jsxs as w, Fragment as J } from "react/jsx-runtime";
2
- import "@mui/icons-material";
3
- import { Box as g, Tooltip as Ft, styled as bt, Stack as yt, Typography as P, Container as Vt, useTheme as Ut, createTheme as Ht, ThemeProvider as Dt, Card as Mt, CircularProgress as Yt, Grid as lt, CardMedia as Jt, CardContent as Gt } from "@mui/material";
4
- import wt, { createContext as vt, useMemo as R, useCallback as E, useContext as kt, forwardRef as Kt, useState as T, useRef as G, Fragment as Xt, isValidElement as _t, useEffect as O } from "react";
5
- import K from "lodash/keyBy";
6
- import { h as j, b as N, E as qt, i as ot, m as nt } from "./state-BgKqNapt.js";
7
- import { AIForm as ct, AIFormResult as dt } from "@blocklet/ai-runtime/components";
8
- import { deepmerge as Qt } from "@mui/utils";
9
- import rt from "lodash/pick";
10
- import { ErrorBoundary as Zt } from "react-error-boundary";
11
- import { useColorConvert as $t } from "@blocklet/pages-kit/contexts/color";
12
- import { cx as b, css as q } from "@emotion/css";
13
- import { Icon as Q } from "@iconify/react";
14
- import te from "react-markdown";
15
- import ee from "remark-gfm";
16
- import { LoadingButton as oe } from "@mui/lab";
17
- import { useTheme as St, styled as _ } from "@arcblock/ux/lib/Theme";
18
- import ne from "@arcblock/react-hooks/lib/useBrowser";
19
- import mt from "@arcblock/ux/lib/Colors";
20
- import { ResponsiveImage as Nt, CustomComponentRenderer as re } from "@blocklet/pages-kit/components";
21
- import { isGradient as ie, isColorString as ae } from "@blocklet/pages-kit/utils/style";
22
- import Ct from "@mui/material/useMediaQuery";
23
- import C from "lodash/omit";
24
- import { Icon as Pt } from "@iconify-icon/react";
25
- import se from "@arcblock/ux/lib/Screenshot";
26
- import { Link as le, NavLink as ce, useNavigate as de } from "react-router-dom";
27
- import me from "@arcblock/ux/lib/Button";
28
- import Z from "is-uri";
29
- import { join as M } from "pathe";
30
- import { withoutTrailingSlash as X, isRelative as pe, parseURL as ue } from "ufo";
31
- import { useMessage as he } from "@blocklet/embed/message";
32
- import { useLatest as fe } from "ahooks";
33
- import ge from "lodash/isEqual";
34
- import { EmbedIframe as xe } from "@blocklet/embed/react";
35
- import { TwitterTimelineEmbed as be } from "react-twitter-embed";
36
- import { useUpdate as ye, useMount as we } from "react-use";
37
- const Bt = "{{CUSTOM_VALUE}}", ve = [
38
- {
39
- title: "None",
40
- value: "none",
41
- sx: { py: 0 }
42
- },
43
- {
44
- title: "Small",
45
- value: "small",
46
- sx: { py: { xs: 2.5, md: 4, lg: 4, xl: 6 } }
47
- },
48
- {
49
- title: "Normal",
50
- value: "normal",
51
- sx: { py: { xs: 5, md: 7.5, lg: 10, xl: 12.5 } }
52
- },
53
- {
54
- title: "Large",
55
- value: "large",
56
- sx: { py: { xs: 7.5, md: 10, lg: 12.5, xl: 15 } }
57
- }
58
- ], ke = [
59
- {
60
- title: "None",
61
- value: "none",
62
- sx: { py: 0 }
63
- },
64
- {
65
- title: "Small",
66
- value: "small",
67
- sx: { py: { xs: 2.5, md: 4, lg: 4, xl: 6 } }
68
- },
69
- {
70
- title: "Normal",
71
- value: "normal",
72
- sx: { py: { xs: 5, md: 7, lg: 7, xl: 9 } }
73
- },
74
- {
75
- title: "Large",
76
- value: "large",
77
- sx: { py: { xs: 6, md: 9, lg: 9, xl: 11 } }
78
- }
79
- ], _e = [
80
- {
81
- title: "None",
82
- value: "none",
83
- sx: { px: 0 }
84
- },
85
- {
86
- title: "Small",
87
- value: "small",
88
- sx: { px: { xs: 2.5, md: 4, lg: 4, xl: 6 } }
89
- },
90
- {
91
- title: "Normal",
92
- value: "normal",
93
- sx: { px: { xs: 5, md: 7.5, lg: 10, xl: 12.5 } }
94
- },
95
- {
96
- title: "Large",
97
- value: "large",
98
- sx: { px: { xs: 7.5, md: 10, lg: 12.5, xl: 15 } }
99
- }
100
- ], Y = (t, e, n) => {
101
- const i = t.breakpoints.values[n];
102
- return `${e}${i ? ` (${i}px)` : ""}`;
103
- }, $e = [
104
- {
105
- title: "100%",
106
- value: "full",
107
- sx: { maxWidth: "100%" }
108
- },
109
- {
110
- title: (t) => Y(t, "Small", "sm"),
111
- value: "sm",
112
- sx: {
113
- maxWidth: (t) => t.breakpoints.values.sm,
114
- width: "100%",
115
- mx: "auto"
116
- }
117
- },
118
- {
119
- title: (t) => Y(t, "Normal", "md"),
120
- value: "md",
121
- sx: { maxWidth: (t) => t.breakpoints.values.md, width: "100%", mx: "auto" }
122
- },
123
- {
124
- title: (t) => Y(t, "Large", "lg"),
125
- value: "lg",
126
- sx: { maxWidth: (t) => t.breakpoints.values.lg, width: "100%", mx: "auto" }
127
- },
128
- {
129
- title: (t) => Y(t, "Extra Large", "xl"),
130
- value: "xl",
131
- sx: { maxWidth: (t) => t.breakpoints.values.xl, width: "100%", mx: "auto" }
132
- },
133
- {
134
- title: "Custom",
135
- value: "custom",
136
- sx: {
137
- maxWidth: Bt,
138
- width: "100%",
139
- mx: "auto"
140
- }
141
- }
142
- ], Se = K(ve, "value"), Ne = K(ke, "value"), Ce = K(_e, "value"), Pe = K($e, "value"), Be = /* @__PURE__ */ new Map([
143
- ["baseSectionPaddingY", Se],
144
- ["maxWidth", Pe],
145
- ["paddingY", Ne],
146
- ["paddingX", Ce]
147
- ]);
148
- function It(t) {
149
- var l;
150
- const { type: e, value: n, format: i = "sx", defaultValue: r = null } = t, a = Be.get(e);
151
- if (!a)
152
- return r;
153
- const c = n.startsWith("custom:"), s = c ? "custom" : n;
154
- if (a != null && a[s] && ((l = a == null ? void 0 : a[s]) != null && l[i])) {
155
- const d = a[s][i];
156
- if (c) {
157
- const m = n.replace("custom:", "");
158
- try {
159
- return JSON.parse(JSON.stringify(d || {}).replaceAll(Bt, m));
160
- } catch {
161
- }
162
- }
163
- return d;
164
- }
165
- return r;
166
- }
167
- const Wt = vt({
168
- page: null,
169
- getPageMeta: () => ({}),
170
- getPageMetaStyle: () => ({})
171
- });
172
- function Ie() {
173
- return kt(Wt);
174
- }
175
- function wn({
176
- page: t,
177
- children: e,
178
- defaultLocale: n = "en",
179
- currentLocale: i
180
- }) {
181
- const r = R(() => t ? JSON.parse(JSON.stringify(t)) : null, [JSON.stringify(t)]), a = E(() => {
182
- var d;
183
- if (!r) return {};
184
- const l = i || n;
185
- return ((d = r.locales) == null ? void 0 : d[l]) ?? {};
186
- }, [r, n, i]), c = E(
187
- (l = "sx") => {
188
- const d = a();
189
- return !d || !d.style ? {} : Object.entries(d.style || {}).reduce((p, [h, u]) => {
190
- if (!u) return p;
191
- const x = `${h}Custom`;
192
- d.style[x];
193
- const y = It({
194
- type: h,
195
- value: u,
196
- format: l
197
- });
198
- return y ? { ...p, ...y } : p;
199
- }, {});
200
- },
201
- [a]
202
- ), s = R(
203
- () => ({
204
- page: r,
205
- getPageMeta: a,
206
- getPageMetaStyle: c
207
- }),
208
- [r, a, c]
209
- );
210
- return /* @__PURE__ */ o(Wt.Provider, { value: s, children: e });
211
- }
212
- const We = Kt(({ onClick: t, ...e }, n) => {
213
- const [i, r] = T(!1), a = E(
214
- async (c) => {
215
- try {
216
- r(!0), await (t == null ? void 0 : t(c));
217
- } finally {
218
- r(!1);
219
- }
220
- },
221
- [t]
222
- );
223
- return /* @__PURE__ */ o(oe, { ref: n, ...e, loading: e.loading || i, onClick: a });
224
- });
225
- function Re({
226
- tip: t,
227
- tipSucceed: e,
228
- title: n,
229
- titleSucceed: i,
230
- icon: r,
231
- iconSucceed: a,
232
- autoReset: c,
233
- placement: s = "top",
234
- ...l
235
- }) {
236
- const [d, m] = T(!1), [p, h] = T(), u = G(), x = () => {
237
- h(void 0), c && (u.current = window.setTimeout(() => {
238
- m(!1);
239
- }, 3e3));
240
- }, y = () => {
241
- clearTimeout(u.current);
242
- }, f = d ? a : r, v = p ? /* @__PURE__ */ o(g, { color: "error", children: p.message }) : d && e || t;
243
- return /* @__PURE__ */ o(Ft, { title: v, disableInteractive: !0, placement: s, onClose: x, onOpen: y, children: /* @__PURE__ */ o("span", { children: /* @__PURE__ */ o(
244
- We,
245
- {
246
- startIcon: f && (typeof f == "string" ? /* @__PURE__ */ o(Q, { icon: f }) : f),
247
- loadingPosition: f ? "start" : void 0,
248
- ...l,
249
- onClick: async (S) => {
250
- if (l.onClick)
251
- try {
252
- await l.onClick(S), m(!0);
253
- } catch (B) {
254
- h(B);
255
- }
256
- },
257
- children: d ? i : n
258
- }
259
- ) }) });
260
- }
261
- const Te = wt.lazy(() => import("react-syntax-highlighter").then((t) => ({ default: t.Prism }))), je = bt((t) => /* @__PURE__ */ o(
262
- te,
263
- {
264
- ...t,
265
- remarkPlugins: [ee],
266
- components: {
267
- pre: ze,
268
- code: ({ node: e, inline: n, className: i, children: r, ...a }) => {
269
- if (!r) return null;
270
- const c = /language-(\w+)/.exec(i || "");
271
- return n ? /* @__PURE__ */ o(g, { component: "code", className: i, ...a, children: r }) : /* @__PURE__ */ o(g, { component: Te, language: c == null ? void 0 : c[1], ...a, sx: { borderRadius: 1 }, children: String(r).replace(/\n$/, "") });
272
- },
273
- table: ({ className: e, children: n }) => /* @__PURE__ */ o(g, { sx: { overflow: "auto", my: 1 }, children: /* @__PURE__ */ o("table", { className: e, children: n }) })
274
- }
275
- }
276
- ))`
277
- width: 100%;
278
- overflow: hidden;
279
- word-break: break-word;
280
-
281
- > * {
282
- &:first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
283
- margin-top: 0;
284
- }
285
- &:last-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */ {
286
- margin-bottom: 0;
287
- }
288
- }
289
-
290
- pre {
291
- overflow: auto;
292
- }
293
-
294
- li {
295
- margin: 0;
296
- padding: 0;
297
- }
298
-
299
- li p {
300
- display: inline-block;
301
- vertical-align: top;
302
- margin: 0;
303
- padding: 0;
304
- }
305
-
306
- table {
307
- border-collapse: collapse;
308
- white-space: nowrap;
309
-
310
- th,
311
- td {
312
- border: 1px solid grey;
313
- padding: 4px 8px;
314
- }
315
- }
316
-
317
- a {
318
- color: ${({ theme: t }) => t.palette.primary.main};
319
-
320
- :hover {
321
- text-decoration: underline;
322
- }
323
- }
324
-
325
- &.writing > *:last-child {
326
- &:after {
327
- content: '';
328
- display: inline-block;
329
- vertical-align: middle;
330
- height: 1.2em;
331
- margin-top: -0.2em;
332
- margin-left: 0.1em;
333
- border-right: 0.2em solid orange;
334
- border-radius: 10px;
335
- animation: blink-caret 0.75s step-end infinite;
336
-
337
- @keyframes blink-caret {
338
- from,
339
- to {
340
- border-color: transparent;
341
- }
342
- 50% {
343
- border-color: ${({ theme: t }) => t.palette.secondary.main};
344
- }
345
- }
346
- }
347
- }
348
- `;
349
- function ze({ children: t }) {
350
- const e = t == null ? void 0 : t.props;
351
- if (!(e != null && e.children)) return null;
352
- const n = /language-(\w+)/.exec(e.className || ""), i = n == null ? void 0 : n[1];
353
- return /* @__PURE__ */ w(
354
- g,
355
- {
356
- component: "div",
357
- sx: {
358
- fontSize: 14,
359
- borderRadius: 1,
360
- bgcolor: "rgb(245, 242, 240)",
361
- "> pre": { mt: "0 !important" }
362
- },
363
- children: [
364
- /* @__PURE__ */ w(yt, { direction: "row", alignItems: "center", p: 0.5, pl: 1.5, borderBottom: 1, borderColor: "grey.200", children: [
365
- /* @__PURE__ */ o(g, { children: i }),
366
- /* @__PURE__ */ o(g, { flex: 1 }),
367
- /* @__PURE__ */ o(
368
- Re,
369
- {
370
- autoReset: !0,
371
- title: /* @__PURE__ */ o(Q, { icon: "tabler:copy" }),
372
- titleSucceed: /* @__PURE__ */ o(Q, { icon: "tabler:copy-check" }),
373
- sx: { minWidth: 32, minHeight: 32, p: 0, fontSize: 18 },
374
- onClick: () => {
375
- window.navigator.clipboard.writeText(e.children);
376
- }
377
- }
378
- )
379
- ] }),
380
- t
381
- ]
382
- }
383
- );
384
- }
385
- function z({ actions: t, center: e, className: n, align: i }) {
386
- return t && (t != null && t.length) ? /* @__PURE__ */ o(
387
- g,
388
- {
389
- className: b(
390
- "flex gap-4 flex-wrap",
391
- "lg:flex-row lg:gap-8",
392
- (e || i === "center") && "justify-center",
393
- !e && i === "right" && "justify-end",
394
- !e && i === "left" && "justify-start",
395
- n
396
- ),
397
- sx: { alignItems: "center" },
398
- children: t
399
- }
400
- ) : null;
401
- }
402
- const Le = "section", Ee = bt(g)`
403
- overflow: hidden;
404
-
405
- .section__title {
406
- margin-top: 0;
407
- font-weight: 700;
408
- }
409
- .section__title_non_big {
410
- font-size: 32px;
411
- @media (max-width: 600px) {
412
- font-size: 24px;
413
- }
414
- }
415
- &.base-info .section__tag {
416
- margin-top: 0;
417
- margin-bottom: 2vw;
418
- background-color: ${({ theme: t }) => t.palette.primary.main};
419
- white-space: nowrap;
420
- max-width: 100%;
421
- display: inline-block;
422
- padding: 0 10px;
423
- justify-content: flex-start;
424
- overflow: hidden;
425
- text-overflow: ellipsis;
426
- font-size: 12px;
427
- color: #fff;
428
- border-radius: 4px;
429
- line-height: 20px;
430
- }
431
- .section__title {
432
- color: ${({ theme: t }) => t.palette.text.primary};
433
- a {
434
- color: ${({ theme: t }) => t.palette.primary.main};
435
- }
436
- p {
437
- margin-top: 0;
438
- margin-bottom: 0;
439
- }
440
- }
441
- .section__description {
442
- color: ${({ theme: t }) => t.palette.text.primary};
443
- margin-bottom: 4vw;
444
- margin-top: 0;
445
- a {
446
- color: ${({ theme: t }) => t.palette.primary.main};
447
- }
448
- p {
449
- margin-top: 0;
450
- margin-bottom: 0.5rem;
451
- }
452
- }
453
- @media (min-width: ${({ theme: t }) => t.breakpoints.values[Le]}px) {
454
- .section__tag {
455
- margin-bottom: 32px;
456
- }
457
- .section__title {
458
- margin-bottom: 32px;
459
- }
460
- .section__description {
461
- margin-bottom: 40px;
462
- }
463
- }
464
- `;
465
- function A({
466
- title: t,
467
- description: e,
468
- descriptionMarkdown: n,
469
- actions: i,
470
- className: r = "",
471
- classes: a = {},
472
- prepend: c,
473
- append: s,
474
- level: l = 2,
475
- tag: d,
476
- badge: m,
477
- center: p,
478
- logo: h,
479
- titleAppearance: u,
480
- descriptionAppearance: x,
481
- ...y
482
- }) {
483
- const f = $t();
484
- if (!t && !e && !i && !m && !d && !c && !s && !h) return null;
485
- const v = Math.max(Math.min(5, l + 1), 1), k = {
486
- 1: "xl:!text-3xl lg:!text-2xl md:!text-xl",
487
- 2: "xl:!text-2xl lg:!text-xl md:!text-lg",
488
- 3: "xl:!text-2xl lg:!text-xl md:!text-lg",
489
- 4: "xl:!text-xl lg:!text-lg md:!text-md",
490
- 5: "xl:!text-lg md:!text-md sm:!text-sm",
491
- 6: "!text-sm"
492
- }, S = l === 0 ? "big" : `h${v}`, B = l === 0;
493
- return /* @__PURE__ */ w(Ee, { className: b("base-info", "lg:text-left", p && "!text-center", r), ...y, children: [
494
- c && /* @__PURE__ */ o("div", { children: c }),
495
- (d || m) && /* @__PURE__ */ o("div", { className: b("section__tag", (a == null ? void 0 : a.tag) || (a == null ? void 0 : a.badge)), children: d || m }),
496
- h && /* @__PURE__ */ o("img", { className: "w-[120px] m-auto mb-8", src: h, alt: "info", loading: "lazy" }),
497
- t && /* @__PURE__ */ o(
498
- P,
499
- {
500
- sx: {
501
- whiteSpace: "pre-wrap",
502
- mb: e ? "2vw" : 0,
503
- ...(u == null ? void 0 : u.color) && { color: `${f(u.color)} !important` }
504
- },
505
- className: b(
506
- "section__title",
507
- "text-gray-800",
508
- "dark:text-gray-50",
509
- a.title,
510
- "page-kit-section__title",
511
- B ? "" : "section__title_non_big"
512
- ),
513
- component: `h${Math.max(l, 1)}`,
514
- variant: S,
515
- children: t
516
- }
517
- ),
518
- e && (n ? /* @__PURE__ */ o(
519
- g,
520
- {
521
- sx: {
522
- ...(x == null ? void 0 : x.color) && { color: `${f(x.color)} !important` }
523
- },
524
- component: je,
525
- className: b(
526
- "section__description",
527
- "text-gray-800",
528
- "dark:text-gray-100",
529
- k[v],
530
- a.description,
531
- "page-kit-section__description"
532
- ),
533
- children: e
534
- }
535
- ) : /* @__PURE__ */ o(
536
- P,
537
- {
538
- sx: {
539
- whiteSpace: "pre-wrap",
540
- ...(x == null ? void 0 : x.color) && { color: `${f(x.color)} !important` }
541
- },
542
- className: b(
543
- "section__description",
544
- "text-gray-800",
545
- "dark:text-gray-100",
546
- k[v],
547
- a.description,
548
- "page-kit-section__description"
549
- ),
550
- component: "div",
551
- variant: "body1",
552
- gutterBottom: !0,
553
- children: e
554
- }
555
- )),
556
- /* @__PURE__ */ o(z, { actions: i, center: p, className: "mt-8" }),
557
- s && /* @__PURE__ */ o("div", { children: s })
558
- ] });
559
- }
560
- const F = [
561
- "actions",
562
- "append",
563
- "badge",
564
- "tag",
565
- "center",
566
- "description",
567
- "descriptionMarkdown",
568
- "level",
569
- "logo",
570
- "prepend",
571
- "title",
572
- "titleAppearance",
573
- "descriptionAppearance"
574
- ];
575
- function Rt(t) {
576
- if (t.type === Xt) {
577
- const n = (t.props.children || []).filter((i) => _t(i));
578
- return n.length === 1 ? Rt(n[0]) : n.length > 1;
579
- }
580
- return Array.isArray(t);
581
- }
582
- const I = "&>*";
583
- function it({ children: t, col: e, gap: n, className: i, align: r, sx: a, type: c, ...s } = {
584
- children: null,
585
- className: "",
586
- col: 3,
587
- gap: void 0,
588
- sx: {},
589
- align: "center",
590
- type: "default"
591
- }) {
592
- const l = St(), d = Number(Math.floor(100 / e * 100) / 100), m = {
593
- center: "justify-center items-center",
594
- left: "justify-start items-center",
595
- right: "justify-end items-center",
596
- top: "justify-center items-start",
597
- bottom: "justify-center items-end",
598
- "top-left": "justify-start items-start",
599
- "top-right": "justify-end items-start",
600
- "bottom-left": "justify-start items-end",
601
- "bottom-right": "justify-end items-end"
602
- }, p = m[r] || m.center;
603
- let u = n ?? ({
604
- 2: 6,
605
- 3: 4,
606
- 4: 4,
607
- 5: 3,
608
- 6: 3
609
- }[e] || 0);
610
- Rt(t) || (u = 0);
611
- const y = (e - 1) * u / e;
612
- let f = { ...a, gap: `${u}rem` };
613
- const v = { [I]: { width: "100%" } }, k = {}, S = {}, B = {};
614
- switch (v.gap = "1rem", k.gap = `${u / 2}rem`, e) {
615
- case 3:
616
- case 4:
617
- k[I] = {
618
- width: `calc(50% - ${u / 2}rem)`
619
- };
620
- break;
621
- case 5:
622
- case 6:
623
- v[I] = {
624
- width: `calc(50% - ${u / 2 / 2}rem)`
625
- }, k[I] = {
626
- width: `calc(50% - ${u / 2 / 2}rem)`
627
- }, S[I] = {
628
- width: `calc(33.33% - ${u * 2 / 3}rem)`
629
- };
630
- break;
631
- }
632
- return f[I] = { width: `calc(${d}% - ${y}rem)` }, f[`@media (max-width: ${l.breakpoints.values.xl}px)`] = B, f[`@media (max-width: ${l.breakpoints.values.lg}px)`] = S, f[`@media (max-width: ${l.breakpoints.values.md}px)`] = k, f[`@media (max-width: ${l.breakpoints.values.sm}px)`] = v, c === "wall" && (f = { ...a, gap: `${u}rem` }, f[I] = { width: `calc(${d}% - ${y}rem)` }, v[I] = { width: `calc(45% - ${u / 2 / 2}rem)` }, f[`@media (max-width: ${l.breakpoints.values.sm}px)`] = v), /* @__PURE__ */ o(g, { className: b("flex flex-wrap flex-row h-full", p, i), sx: f, ...s, children: t });
633
- }
634
- function Oe() {
635
- const t = navigator.userAgent.toLowerCase();
636
- return t.includes("safari") && !t.includes("chrome");
637
- }
638
- function Ae(t = "") {
639
- if (t.startsWith("data:image/svg+xml,")) return !0;
640
- const e = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/, n = /^(\/|\.\/|\.\.\/)(?:[^/]+\/)*[^/]+$/;
641
- return e.test(t) || n.test(t);
642
- }
643
- function tt(t) {
644
- return (t == null ? void 0 : t.endsWith(".mp4")) || (t == null ? void 0 : t.endsWith(".m4v")) || (t == null ? void 0 : t.endsWith(".webm"));
645
- }
646
- function Fe(t) {
647
- return t != null && t.endsWith(".mp4") || t != null && t.endsWith(".m4v") ? "video/mp4" : t != null && t.endsWith(".webm") ? "video/webm" : void 0;
648
- }
649
- function Ve(t) {
650
- let e = {};
651
- return typeof t == "string" ? ie(t) ? e.image = t : (e.image = N(t), ae(t) && (e.color = t, e.image = "")) : e = t, e;
652
- }
653
- function Ue() {
654
- const [t, e] = T(Date.now());
655
- return O(() => {
656
- const n = () => {
657
- e(Date.now());
658
- };
659
- return document.addEventListener("visibilitychange", n), () => {
660
- document.removeEventListener("visibilitychange", n);
661
- };
662
- }, []), t;
663
- }
664
- function pt(t, e, n, i, r) {
665
- let a = null;
666
- const { color: c = "", image: s } = Ve(e);
667
- return s && Ae(s) ? (delete n.backgroundColor, !(t.mobile.apple.device || Oe()) && tt(s) ? a = /* @__PURE__ */ o(
668
- g,
669
- {
670
- component: "video",
671
- className: "section-bg",
672
- width: "100%",
673
- autoPlay: !0,
674
- loop: !0,
675
- muted: !0,
676
- controls: !1,
677
- playsInline: !0,
678
- poster: j(N(i), 1200, "quality"),
679
- src: tt(s) ? s : j(s, 1200, "quality"),
680
- sx: {
681
- position: "absolute",
682
- zIndex: -9999,
683
- right: 0,
684
- left: 0,
685
- top: 0,
686
- width: "100%",
687
- height: "100%",
688
- objectFit: "cover"
689
- }
690
- },
691
- s
692
- ) : a = /* @__PURE__ */ o(
693
- Nt,
694
- {
695
- src: s,
696
- sizesAttr: {
697
- sm: 600,
698
- md: 900,
699
- lg: 1200
700
- },
701
- className: "section-bg",
702
- alt: "",
703
- width: "100%",
704
- loading: "lazy",
705
- sx: {
706
- position: "absolute",
707
- zIndex: -9999,
708
- right: 0,
709
- left: 0,
710
- top: 0,
711
- width: "100%",
712
- height: "100%",
713
- objectFit: "cover"
714
- }
715
- },
716
- r || s
717
- )) : s ? n.backgroundImage = `${s} !important` : c && (n.backgroundColor = `${c} !important`), a;
718
- }
719
- function He({ autoWidth: t, children: e, ...n }) {
720
- return t ? /* @__PURE__ */ o(g, { display: "flex", ...n, children: e }) : /* @__PURE__ */ o(Vt, { ...n, children: e });
721
- }
722
- function V({
723
- dark: t = !1,
724
- children: e,
725
- className: n,
726
- sx: i = {},
727
- boxed: r = { show: !1 },
728
- padding: a = "normal",
729
- boxProps: c,
730
- type: s,
731
- ...l
732
- }) {
733
- const d = { ...i }, m = Ct((u) => u.breakpoints.down("md"));
734
- t && (d.color = mt.common.white, d.backgroundColor = `${mt.grey[900]} !important`), r.show && (d.display = "flex");
735
- const p = R(() => !Number(l.boxMaxWidth) || m ? {
736
- width: "100%"
737
- } : s === "wall" && l.boxMaxWidth ? {
738
- maxWidth: `${l.boxMaxWidth}px !important`,
739
- width: "100%"
740
- } : {
741
- width: "100%"
742
- }, [l.boxMaxWidth, m, s]), h = It({
743
- type: "baseSectionPaddingY",
744
- value: a || "normal",
745
- // section default is normal
746
- defaultValue: ""
747
- });
748
- return /* @__PURE__ */ o(
749
- De,
750
- {
751
- component: "section",
752
- styles: { ...d, ...h },
753
- className: b("base-section", "px-2 md:px-5 lg:px-5 xl:px-10", n, {
754
- dark: t
755
- }),
756
- ...C(
757
- l,
758
- "hoverStyle",
759
- "boxMaxWidth",
760
- "embedUrl",
761
- "autoWidth",
762
- "paddingXY",
763
- "iframeHeight",
764
- "titleAppearance",
765
- "descriptionAppearance"
766
- ),
767
- children: /* @__PURE__ */ o(He, { autoWidth: l == null ? void 0 : l.autoWidth, className: b("section-content h-full"), sx: p, children: r.show ? /* @__PURE__ */ o(Tt, { ...c, boxed: r, children: e }) : e })
768
- }
769
- );
770
- }
771
- function Tt({
772
- background: t = "",
773
- backgroundVideoPoster: e,
774
- children: n,
775
- sx: i = {},
776
- boxed: r = { show: !1 },
777
- className: a = "",
778
- styles: c = {},
779
- ...s
780
- }) {
781
- const l = { ...c, ...i }, d = $t();
782
- let m = null;
783
- const p = Ct((x) => x.breakpoints.up("sm")), h = ne(), u = Ue();
784
- return t && (m = pt(
785
- h,
786
- typeof t == "string" ? d(t) : t,
787
- l,
788
- e,
789
- u
790
- )), r.show && (l.borderRadius = "10px", l.padding === void 0 && (l.padding = p ? "50px" : "20px"), r != null && r.border && (l.border = "1px solid #c0c0c0"), r != null && r.background && (m = pt(
791
- h,
792
- typeof (r == null ? void 0 : r.background) == "string" ? d(r == null ? void 0 : r.background) : r == null ? void 0 : r.background,
793
- l,
794
- r == null ? void 0 : r.backgroundVideoPoster,
795
- u
796
- ))), /* @__PURE__ */ w(
797
- g,
798
- {
799
- ...s,
800
- sx: {
801
- ...l,
802
- ...m ? { position: "relative", overflow: "hidden", zIndex: 0 } : {}
803
- },
804
- className: b(a, (r == null ? void 0 : r.boxShadow) && "shadow-xl"),
805
- children: [
806
- m,
807
- n
808
- ]
809
- }
810
- );
811
- }
812
- const De = _(Tt)`
813
- &:nth-of-type(even) {
814
- background: #f8f8f8;
815
- }
816
-
817
- @media (max-width: 600px) {
818
- .section__title {
819
- font-size: 24px;
820
- }
821
-
822
- .base-info {
823
- > *:last-child {
824
- margin-bottom: 0;
825
- }
826
- }
827
- }
828
- `;
829
- function jt({ icon: t, ...e }) {
830
- return /* @__PURE__ */ o(Pt, { icon: t, ...e, ref: null });
831
- }
832
- function $(t, e) {
833
- const n = rt(t, e), i = C(t, e);
834
- return [n, i];
835
- }
836
- const zt = ["title", "description", "actions", "badge", "tag", "prepend", "append", "logo"];
837
- function Me({
838
- image: t,
839
- imageBorder: e,
840
- imageShadow: n,
841
- className: i,
842
- reverse: r = !1,
843
- fullSizeImage: a,
844
- ...c
845
- }) {
846
- const [s, l] = $(c, F), d = Object.keys(s).length > 0 && Object.values(rt(s, zt)).filter(Boolean).length > 0 && /* @__PURE__ */ o(A, { ...s }), m = _t(t) ? t : /* @__PURE__ */ o(g, { component: "img", src: t, alt: "", className: "block" }), p = ["phone", "macbook"].includes(e), h = t && /* @__PURE__ */ o(
847
- g,
848
- {
849
- className: b(
850
- "section__image",
851
- "m-auto, leading-[1] text-center",
852
- n && "shadow-xl",
853
- s != null && s.center ? "flex justify-center items-center" : ""
854
- ),
855
- sx: {
856
- border: e === !0 ? "1px solid #c0c0c0" : void 0,
857
- borderRadius: 2,
858
- overflow: "hidden",
859
- // FIXME: Screenshot 组件无法设置最外层 div 的样式,只能通过父元素设置
860
- "> div": p ? { width: "100%", video: { borderRadius: "0 !important" } } : void 0
861
- },
862
- children: p ? (
863
- // @ts-ignore
864
- /* @__PURE__ */ o(se, { type: e, sx: { width: "100%" }, children: m })
865
- ) : m
866
- }
867
- );
868
- return /* @__PURE__ */ o(
869
- V,
870
- {
871
- className: b(
872
- "section--block",
873
- i,
874
- a && !r && q`
875
- .section-bg {
876
- height: 80%;
877
- }
878
- `
879
- ),
880
- ...l,
881
- boxProps: a ? { sx: { padding: 0, overflow: "hidden" } } : void 0,
882
- children: /* @__PURE__ */ o(
883
- it,
884
- {
885
- col: t ? 2 : 1,
886
- className: a ? q`
887
- display: flex;
888
- flex-direction: column;
889
-
890
- > .base-info,
891
- > .section__image {
892
- width: 100%;
893
-
894
- > img,
895
- > video {
896
- width: 100%;
897
- }
898
- }
899
- ` : void 0,
900
- children: r ? /* @__PURE__ */ w(J, { children: [
901
- h,
902
- d
903
- ] }) : /* @__PURE__ */ w(J, { children: [
904
- d,
905
- h
906
- ] })
907
- }
908
- )
909
- }
910
- );
911
- }
912
- const U = ["editing", "height", "locale", "dev", "sx"];
913
- function Ye(t) {
914
- const { className: e, ...n } = t;
915
- return /* @__PURE__ */ o(Je, { ...n, className: b("BlockBase-root", e) });
916
- }
917
- const Je = _(g)`
918
- position: relative;
919
- color: ${({ theme: t }) => t.palette.text.primary};
920
- `;
921
- function Ge({
922
- widget: t,
923
- reverse: e,
924
- projectId: n,
925
- assistantId: i,
926
- working: r,
927
- submitTitle: a,
928
- submitIcon: c,
929
- submitColor: s,
930
- placeholder: l,
931
- loadingIndicator: d,
932
- section: m,
933
- ...p
934
- }) {
935
- const [{ editing: h }, u] = $(p, U), [x, y] = $(u, F), f = n && i ? { projectId: n, gitRef: "main", assistantId: i, working: !0 } : void 0, v = {
936
- children: a,
937
- endIcon: c ? /* @__PURE__ */ o(jt, { icon: c }) : void 0,
938
- sx: {
939
- background: s || void 0,
940
- ":hover": {
941
- background: s || void 0,
942
- opacity: 0.8
943
- }
944
- }
945
- }, k = [], S = l && /* @__PURE__ */ o(P, { variant: "caption", color: "text.disabled", children: l }), B = d && /* @__PURE__ */ o(P, { variant: "caption", color: "text.disabled", children: d });
946
- Object.keys(x).length > 0 && Object.values(rt(x, zt)).filter(Boolean).length > 0 && k.push(/* @__PURE__ */ o(A, { ...x }, "base-info")), f && (t === "form" ? k.push(/* @__PURE__ */ o(ct, { identifier: f, SubmitProps: v }, "form")) : t === "result" ? k.push(
947
- /* @__PURE__ */ o(
948
- dt,
949
- {
950
- identifier: f,
951
- placeholder: S,
952
- loadingIndicator: B
953
- },
954
- "result"
955
- )
956
- ) : k.push(
957
- /* @__PURE__ */ w(yt, { width: "100%", gap: 2, direction: "row", children: [
958
- /* @__PURE__ */ o(ct, { identifier: f, BoxProps: { flex: 1 }, SubmitProps: v }),
959
- /* @__PURE__ */ o(
960
- dt,
961
- {
962
- identifier: f,
963
- BoxProps: { flex: 1 },
964
- placeholder: S,
965
- loadingIndicator: B
966
- }
967
- )
968
- ] }, "form-result")
969
- )), e && k.reverse();
970
- const st = Ut(), At = R(
971
- () => Ht(Qt(st, { palette: { primary: s ? { main: s } : void 0 } })),
972
- [s, st]
973
- );
974
- return /* @__PURE__ */ o(Zt, { fallbackRender: qt, children: /* @__PURE__ */ o(Dt, { theme: At, children: /* @__PURE__ */ o(V, { ...y, sx: h ? { pointerEvents: "none" } : {}, children: /* @__PURE__ */ o(it, { col: k.length, children: k }) }) }) });
975
- }
976
- const Lt = vt({
977
- pages: [],
978
- project: void 0
979
- }), { Provider: vn, Consumer: kn } = Lt;
980
- function Et() {
981
- return kt(Lt);
982
- }
983
- function Ke({ icon: t, className: e = "", size: n = "1rem", ...i }) {
984
- return /* @__PURE__ */ o(Xe, { component: jt, className: b("css-icon", e), size: n, ...i, icon: t });
985
- }
986
- const Xe = _(g)`
987
- &.css-icon {
988
- display: inline-block;
989
- width: ${({ size: t }) => t};
990
- height: ${({ size: t }) => t};
991
- }
992
- `;
993
- function qe({ icon: t, className: e = "", size: n = "1rem", imageMeta: i, ...r }) {
994
- const a = j(N(t), 540), [c, s] = T(!1), l = St();
995
- return c ? /* @__PURE__ */ o(Ke, { icon: "i-mdi:image", color: l.palette.grey[500], size: n, className: e, ...r }) : /* @__PURE__ */ o(Qe, { className: b("image-icon", e), size: n, ...r, children: /* @__PURE__ */ o(
996
- "img",
997
- {
998
- className: "image-icon__image",
999
- src: a,
1000
- onError: () => s(!0),
1001
- width: i == null ? void 0 : i.naturalWidth,
1002
- height: i == null ? void 0 : i.naturalHeight,
1003
- alt: (i == null ? void 0 : i.filename) || "card-icon",
1004
- loading: "lazy"
1005
- }
1006
- ) });
1007
- }
1008
- const Qe = _(g)`
1009
- display: inline-block;
1010
- width: ${({ size: t }) => t};
1011
- height: ${({ size: t }) => t};
1012
- .image-icon__image {
1013
- object-fit: contain;
1014
- height: 100%;
1015
- width: 100%;
1016
- }
1017
- `, at = (t) => typeof t == "string" && /^[\w-_]+:[\w-_]+$/.test(t);
1018
- function et({ icon: t, size: e = "1rem", imageMeta: n, ...i }) {
1019
- const r = window.isNaN(e) ? e : `${e}px`;
1020
- return at(t) ? /* @__PURE__ */ o(Pt, { icon: t }) : /* @__PURE__ */ o(Ze, { component: qe, imageMeta: n, className: "base-icon", icon: t, size: r, ...i });
1021
- }
1022
- const Ze = _(g)`
1023
- flex-shrink: 0;
1024
- `;
1025
- function L({ text: t, children: e, icon: n = "", endIcon: i, color: r = "primary", link: a = "", href: c = "", ...s }) {
1026
- const l = n ? /* @__PURE__ */ o(et, { icon: n }) : null, d = i ? /* @__PURE__ */ o(et, { icon: i }) : null, m = a || c, p = { ...s };
1027
- return m && (p.href = m, Z(m) && (p.target = p.target || "_blank")), /* @__PURE__ */ o(me, { startIcon: l, endIcon: d, color: r, ...p, children: t || e });
1028
- }
1029
- function Ot({ editing: t, text: e, ...n }) {
1030
- const { pages: i = [] } = Et(), r = i.find((a) => a.id === (n.link || n.linkId));
1031
- if (t)
1032
- return /* @__PURE__ */ o(L, { ...C(n, ["link", "linkId"]), children: e });
1033
- if (r) {
1034
- const a = r.path || "/";
1035
- return /* @__PURE__ */ o(le, { to: a, children: /* @__PURE__ */ o(L, { ...C(n, ["link", "linkId"]), children: e }) });
1036
- }
1037
- return /* @__PURE__ */ o(L, { ...C(n, "linkId"), children: e });
1038
- }
1039
- function W({ type: t = "", icon: e = "", size: n = "3rem", className: i = "", ...r }) {
1040
- return /* @__PURE__ */ o(et, { icon: e || t, size: n, className: b("content-icon", i), ...r });
1041
- }
1042
- W.propTypes = {};
1043
- W.defaultProps = {
1044
- type: "",
1045
- icon: "",
1046
- size: "3rem",
1047
- color: "inherit",
1048
- className: ""
1049
- };
1050
- function to({
1051
- to: t,
1052
- base: e,
1053
- children: n,
1054
- className: i,
1055
- activeClassName: r = "active",
1056
- target: a = "auto",
1057
- autoExternalMark: c = !1,
1058
- useRouterLink: s,
1059
- ...l
1060
- }) {
1061
- const { pages: d = [], locale: m = "" } = {}, p = e ? M("/", e) : e || "";
1062
- let h = a === "auto" ? "_self" : a, u = M(p, t);
1063
- const x = c ? Z(u) : !1;
1064
- if (e)
1065
- return u = M(p, m, t), /* @__PURE__ */ o(
1066
- "a",
1067
- {
1068
- className: `no-underline ${i}`,
1069
- href: X(u),
1070
- rel: "noreferrer noopener",
1071
- target: h,
1072
- ...l,
1073
- children: n
1074
- }
1075
- );
1076
- if (Z(t))
1077
- a === "auto" && (h = "_blank"), u = t;
1078
- else {
1079
- pe(u) && (u = M(window.location.pathname, u));
1080
- const y = ue(`${window.location.origin}${u}`), f = d.some((v) => v.pathname === y.pathname);
1081
- if (s || f)
1082
- return /* @__PURE__ */ o(
1083
- ce,
1084
- {
1085
- end: !0,
1086
- to: X(u),
1087
- className: ({ isActive: v }) => b(i, v ? r : ""),
1088
- ...l,
1089
- children: n
1090
- }
1091
- );
1092
- }
1093
- return /* @__PURE__ */ w(
1094
- "a",
1095
- {
1096
- className: `no-underline ${i}`,
1097
- href: X(u),
1098
- rel: "noreferrer noopener",
1099
- target: h,
1100
- ...l,
1101
- children: [
1102
- n,
1103
- x && /* @__PURE__ */ o(W, { icon: "i-mdi:arrow-top-right", size: "0.9em", className: "smart-link__mark", style: { marginLeft: 5 } })
1104
- ]
1105
- }
1106
- );
1107
- }
1108
- function H({
1109
- prepend: t,
1110
- append: e,
1111
- children: n,
1112
- className: i = "",
1113
- dark: r = !1,
1114
- border: a = !0,
1115
- ...c
1116
- }) {
1117
- let s = {};
1118
- const { pages: l = [] } = Et(), d = l.find((h) => h.id === c.link), m = !n || wt.Children.toArray(n).every((h) => h === null);
1119
- return c.link && (s = {
1120
- component: to,
1121
- to: (d == null ? void 0 : d.path) || c.link,
1122
- useRouterLink: !0
1123
- }), /* @__PURE__ */ w(
1124
- eo,
1125
- {
1126
- className: b(
1127
- "base-card card",
1128
- { "border-gray-200": a },
1129
- { "dark:border-gray-500": r && a },
1130
- { dark: r, "border-transparent": !a },
1131
- i
1132
- ),
1133
- ...s,
1134
- ...C(c, ["listType", "dark", "iconColor", "link", "hoverStyle", "imageSize"]),
1135
- children: [
1136
- t,
1137
- !m && /* @__PURE__ */ o("div", { className: "card__body", children: n }),
1138
- e
1139
- ]
1140
- }
1141
- );
1142
- }
1143
- const eo = _(g)`
1144
- &.base-card {
1145
- text-align: left;
1146
- border-width: 1px;
1147
- border-style: solid;
1148
- border-radius: 12px;
1149
- overflow: hidden;
1150
- &,
1151
- &:hover {
1152
- text-decoration: none;
1153
- }
1154
- }
1155
- .card__body {
1156
- padding: 15px 15px;
1157
- }
1158
- `;
1159
- function D({
1160
- align: t = "left",
1161
- title: e,
1162
- titleProps: n = {},
1163
- description: i,
1164
- descriptionProps: r = {}
1165
- }) {
1166
- return /* @__PURE__ */ w(J, { children: [
1167
- e && /* @__PURE__ */ o(
1168
- P,
1169
- {
1170
- className: b("card__title text-gray-800", "dark:text-gray-50"),
1171
- component: "h5",
1172
- variant: "h5",
1173
- gutterBottom: !0,
1174
- align: t,
1175
- ...n,
1176
- children: e
1177
- }
1178
- ),
1179
- i && /* @__PURE__ */ o(
1180
- P,
1181
- {
1182
- className: b("card__description", "text-gray-500", "dark:text-gray-400"),
1183
- component: "div",
1184
- variant: "body1",
1185
- gutterBottom: !0,
1186
- align: t,
1187
- ...r,
1188
- children: i
1189
- }
1190
- )
1191
- ] });
1192
- }
1193
- function oo({
1194
- image: t,
1195
- title: e,
1196
- description: n,
1197
- imageProps: i = {},
1198
- imageMeta: r,
1199
- imageSize: a,
1200
- titleProps: c = {},
1201
- descriptionProps: s = {},
1202
- actions: l,
1203
- align: d,
1204
- ...m
1205
- }) {
1206
- const p = at(t), h = j(N(t), 540);
1207
- return /* @__PURE__ */ w(
1208
- no,
1209
- {
1210
- className: "card-article",
1211
- ...m,
1212
- prepend: /* @__PURE__ */ o("div", { className: "card__image__wrap", children: p && t ? /* @__PURE__ */ o(
1213
- g,
1214
- {
1215
- sx: {
1216
- position: "absolute",
1217
- left: 0,
1218
- top: 0,
1219
- right: 0,
1220
- bottom: 0,
1221
- display: "flex",
1222
- alignItems: "center",
1223
- justifyContent: "center"
1224
- },
1225
- children: /* @__PURE__ */ o(W, { icon: t, color: "primary.main" })
1226
- }
1227
- ) : h && /* @__PURE__ */ o(
1228
- "img",
1229
- {
1230
- className: "card__image",
1231
- src: h,
1232
- ...i,
1233
- alt: i.alt || (r == null ? void 0 : r.filename) || "card-image",
1234
- width: r == null ? void 0 : r.naturalWidth,
1235
- height: r == null ? void 0 : r.naturalHeight,
1236
- style: { width: "100%", height: "100%", objectFit: a || "cover", objectPosition: "center" },
1237
- loading: "lazy"
1238
- }
1239
- ) }),
1240
- children: [
1241
- e || n ? /* @__PURE__ */ o(
1242
- D,
1243
- {
1244
- align: d,
1245
- title: e,
1246
- titleProps: c,
1247
- description: n,
1248
- descriptionProps: s
1249
- }
1250
- ) : null,
1251
- l != null && l.length ? /* @__PURE__ */ o(z, { align: d, actions: l, className: "mt-4" }) : null
1252
- ]
1253
- }
1254
- );
1255
- }
1256
- const no = _(H)`
1257
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1258
- &:hover {
1259
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1260
- }` : ""}
1261
-
1262
- .card__image__wrap {
1263
- padding-top: 61.8%;
1264
- width: 100%;
1265
- position: relative;
1266
- }
1267
- .card__image {
1268
- position: absolute;
1269
- top: 0;
1270
- left: 0;
1271
- bottom: 0;
1272
- right: 0;
1273
- width: 100%;
1274
- height: 100%;
1275
- object-position: top center;
1276
- }
1277
- `, ut = "section";
1278
- function ht({
1279
- title: t,
1280
- image: e,
1281
- imageMeta: n,
1282
- description: i,
1283
- actions: r,
1284
- align: a,
1285
- listType: c = "",
1286
- className: s = "",
1287
- ...l
1288
- }) {
1289
- return /* @__PURE__ */ w(ro, { className: b("card", `list-type-${c}`, s), align: a, ...l, children: [
1290
- e && /* @__PURE__ */ o(
1291
- W,
1292
- {
1293
- icon: e,
1294
- color: "primary.main",
1295
- size: c === "icon-title" ? "1.2rem" : "3rem",
1296
- imageMeta: n
1297
- }
1298
- ),
1299
- t || i ? /* @__PURE__ */ o(D, { align: a, title: t, description: i }) : null,
1300
- r != null && r.length ? /* @__PURE__ */ o(z, { align: a, actions: r, className: "mt-4" }) : null
1301
- ] });
1302
- }
1303
- const ro = _(H)`
1304
- padding: 5vw 4vw;
1305
- box-sizing: border-box;
1306
- /* min-height: 320px; */
1307
- color: inherit !important;
1308
- border-radius: 0.5rem;
1309
- /* ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`} */
1310
- @media (max-width: ${({ theme: t }) => t.breakpoints.values[ut]}px) {
1311
- padding: 1.5rem 2rem;
1312
- }
1313
- @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
1314
- height: auto;
1315
- min-height: unset;
1316
- }
1317
-
1318
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1319
- &:hover {
1320
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1321
- }` : ""}
1322
-
1323
- .card__title {
1324
- font-weight: 700;
1325
- margin-top: 24px;
1326
- margin-bottom: 12px;
1327
- color: ${({ theme: t }) => t.palette.text.primary};
1328
- a {
1329
- color: ${({ theme: t }) => t.palette.primary.main};
1330
- }
1331
- }
1332
- .card__description {
1333
- color: ${({ theme: t }) => t.palette.text.primary};
1334
- a {
1335
- color: ${({ theme: t }) => t.palette.primary.main};
1336
- }
1337
- }
1338
- .card__body {
1339
- color: ${({ theme: t }) => t.palette.text.primary};
1340
- padding: 0;
1341
- ${({ align: t }) => `text-align:${t || "left"};`}
1342
- }
1343
-
1344
- &.list-type-icon-title {
1345
- padding: 1.2rem;
1346
- .title-line {
1347
- display: flex;
1348
- }
1349
- .card__title {
1350
- margin: 0;
1351
- font-size: 1em;
1352
- }
1353
- .css-icon {
1354
- margin-right: 0.5rem;
1355
- }
1356
- }
1357
-
1358
- @media (min-width: ${({ theme: t }) => t.breakpoints.values[ut]}px) {
1359
- padding: 2rem 2rem;
1360
- text-align: left;
1361
- box-sizing: border-box;
1362
- }
1363
- `;
1364
- function io({
1365
- image: t,
1366
- title: e,
1367
- description: n,
1368
- imageProps: i = {},
1369
- imageMeta: r,
1370
- imageSize: a,
1371
- titleProps: c = {},
1372
- descriptionProps: s = {},
1373
- actions: l,
1374
- align: d,
1375
- ...m
1376
- }) {
1377
- const p = at(t), h = j(N(t), 540);
1378
- return /* @__PURE__ */ w(
1379
- ao,
1380
- {
1381
- className: "card-article",
1382
- ...m,
1383
- prepend: /* @__PURE__ */ o("div", { className: "card__image__wrap", children: p && t ? /* @__PURE__ */ o(
1384
- g,
1385
- {
1386
- sx: {
1387
- position: "absolute",
1388
- left: 0,
1389
- top: 0,
1390
- right: 0,
1391
- bottom: 0,
1392
- display: "flex",
1393
- alignItems: "center",
1394
- justifyContent: "center"
1395
- },
1396
- children: /* @__PURE__ */ o(W, { icon: t, color: "primary.main" })
1397
- }
1398
- ) : h && /* @__PURE__ */ o(
1399
- g,
1400
- {
1401
- component: "img",
1402
- className: "card__image",
1403
- src: h,
1404
- ...i,
1405
- alt: i.alt || (r == null ? void 0 : r.filename) || "card-image",
1406
- width: r == null ? void 0 : r.naturalWidth,
1407
- height: r == null ? void 0 : r.naturalHeight,
1408
- style: { width: "100%", height: "100%", objectFit: a || "contain", objectPosition: "center" },
1409
- loading: "lazy"
1410
- }
1411
- ) }),
1412
- children: [
1413
- e || n ? /* @__PURE__ */ o(
1414
- D,
1415
- {
1416
- align: d,
1417
- title: e,
1418
- titleProps: c,
1419
- description: n,
1420
- descriptionProps: s
1421
- }
1422
- ) : null,
1423
- l != null && l.length ? /* @__PURE__ */ o(z, { align: d, actions: l, className: "mt-4" }) : null
1424
- ]
1425
- }
1426
- );
1427
- }
1428
- const ao = _(H)`
1429
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1430
- &:hover {
1431
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1432
- }` : ""}
1433
-
1434
- border-radius: 0 !important;
1435
-
1436
- .card__body {
1437
- ${({ align: t }) => `text-align:${t || "left"};`}
1438
- }
1439
-
1440
- .card__image__wrap {
1441
- width: 100%;
1442
- height: 100%;
1443
- position: relative;
1444
- display: flex;
1445
- justify-content: center;
1446
- align-items: center;
1447
- }
1448
-
1449
- .card__image {
1450
- max-height: 60px;
1451
- }
1452
- `, ft = "section";
1453
- function so({
1454
- title: t,
1455
- image: e,
1456
- imageMeta: n,
1457
- iconSize: i = 100,
1458
- description: r,
1459
- actions: a,
1460
- align: c,
1461
- className: s = "",
1462
- ...l
1463
- }) {
1464
- return /* @__PURE__ */ o(lo, { className: b("card", s), ...l, children: /* @__PURE__ */ w(g, { className: "flex items-center", children: [
1465
- e && /* @__PURE__ */ o(W, { icon: e, color: "primary.main", size: i, imageMeta: n }),
1466
- /* @__PURE__ */ w(g, { className: "flex-1 ml-4", children: [
1467
- /* @__PURE__ */ o(D, { align: c, title: t, description: r }),
1468
- /* @__PURE__ */ o(z, { align: c, actions: a, className: "mt-4" })
1469
- ] })
1470
- ] }) });
1471
- }
1472
- const lo = _(H)`
1473
- padding: 5vw 4vw;
1474
- text-align: left;
1475
- box-sizing: border-box;
1476
- /* min-height: 320px; */
1477
- color: inherit !important;
1478
- border-radius: 0.5rem;
1479
- /* ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`} */
1480
- @media (max-width: ${({ theme: t }) => t.breakpoints.values[ft]}px) {
1481
- padding: 1.5rem 2rem;
1482
- }
1483
- @media (max-width: ${({ theme: t }) => t.breakpoints.values.sm}px) {
1484
- height: auto;
1485
- min-height: unset;
1486
- }
1487
-
1488
- ${(t) => t.hoverStyle === "none" ? "" : t.link ? `transition: box-shadow ease .3s;
1489
- &:hover {
1490
- box-shadow: 0 0 10px rgba(95, 142, 244, 0.42);
1491
- }` : ""}
1492
-
1493
- .card__title {
1494
- font-weight: 700;
1495
- margin-bottom: 12px;
1496
- a {
1497
- color: ${({ theme: t }) => t.palette.primary.main};
1498
- }
1499
- }
1500
- .card__description {
1501
- a {
1502
- color: ${({ theme: t }) => t.palette.primary.main};
1503
- }
1504
- }
1505
- .card__body {
1506
- padding: 0;
1507
- }
1508
-
1509
- &.list-type-icon-title {
1510
- padding: 1.2rem;
1511
- .title-line {
1512
- display: flex;
1513
- }
1514
- .card__title {
1515
- margin: 0;
1516
- font-size: 1em;
1517
- }
1518
- .css-icon {
1519
- margin-right: 0.5rem;
1520
- }
1521
- }
1522
-
1523
- @media (min-width: ${({ theme: t }) => t.breakpoints.values[ft]}px) {
1524
- padding: 2rem 2rem;
1525
- text-align: left;
1526
- box-sizing: border-box;
1527
- }
1528
- `;
1529
- function co({
1530
- title: t,
1531
- titleProps: e = {},
1532
- description: n,
1533
- descriptionProps: i = {},
1534
- image: r,
1535
- imageMeta: a,
1536
- className: c = "",
1537
- align: s,
1538
- hoverStyle: l,
1539
- ...d
1540
- }) {
1541
- return /* @__PURE__ */ w(mo, { className: b("card-simple", c, `hover-style__${l}`), align: s, ...d, children: [
1542
- r && /* @__PURE__ */ o(W, { icon: r, color: "primary.main", imageMeta: a }),
1543
- t || n ? /* @__PURE__ */ o(
1544
- D,
1545
- {
1546
- align: s,
1547
- title: t,
1548
- titleProps: e,
1549
- description: n,
1550
- descriptionProps: i
1551
- }
1552
- ) : null
1553
- ] });
1554
- }
1555
- const mo = _(H)`
1556
- ${({ dark: t, theme: e }) => `background-color:${t ? e.palette.grey[900] : e.palette.common.white};`}
1557
-
1558
- &.hover-style__default {
1559
- &.card-simple {
1560
- &:hover {
1561
- border-top-right-radius: 36px;
1562
- }
1563
- }
1564
- .card__body {
1565
- &:hover {
1566
- &::before {
1567
- width: 42px;
1568
- height: 42px;
1569
- transform: translate(50%, -50%) rotate(45deg);
1570
- }
1571
- &::after {
1572
- transform: none;
1573
- }
1574
- }
1575
- }
1576
- }
1577
-
1578
- &.card-simple {
1579
- border-radius: 8px;
1580
- border-top-right-radius: 26px;
1581
-
1582
- .card__body {
1583
- ${({ align: t }) => `text-align:${t || "left"};`}
1584
- }
1585
-
1586
- ${(t) => t.link ? `
1587
- cursor: pointer;
1588
- ` : ""}
1589
- /* cursor: pointer; */
1590
- /* &:hover {
1591
- border-top-right-radius: 36px;
1592
- } */
1593
- transition: all 180ms ease 0s;
1594
- overflow: visible;
1595
- .card__title {
1596
- margin: 12px 0;
1597
- }
1598
- .card__body {
1599
- position: relative;
1600
- padding: 20px 16px 18px;
1601
- overflow: hidden;
1602
- transition: all 180ms ease 0s;
1603
- /* &:hover {
1604
- &::before {
1605
- width: 42px;
1606
- height: 42px;
1607
- transform: translate(50%, -50%) rotate(45deg);
1608
- }
1609
- &::after {
1610
- transform: none;
1611
- }
1612
- } */
1613
- &::before,
1614
- &::after {
1615
- content: ${({ border: t }) => t ? '""' : ""};
1616
- transition: inherit;
1617
- position: absolute;
1618
- top: 0px;
1619
- right: 0px;
1620
- }
1621
- &::before {
1622
- z-index: 3;
1623
- background: #fff;
1624
- width: 30px;
1625
- height: 30px;
1626
- transform: translate(50%, -50%) rotate(45deg);
1627
- box-shadow: 0 1px 0 0 #e9eaec;
1628
- }
1629
- &::after {
1630
- z-index: 2;
1631
- width: 28px;
1632
- height: 28px;
1633
- border-bottom-left-radius: 6px;
1634
- background: #fcfcfd;
1635
- box-shadow: -1px 1px 0 0 #e9eaec;
1636
- transform: translate(8px, -8px);
1637
- }
1638
- }
1639
- }
1640
- `;
1641
- function po({ type: t = "default", ...e }) {
1642
- const i = {
1643
- article: oo,
1644
- simple: co,
1645
- news: so,
1646
- default: ht,
1647
- wall: io
1648
- }[t] || ht;
1649
- return /* @__PURE__ */ o(i, { ...t === "news" ? e : C(e, "iconSize") });
1650
- }
1651
- function uo({
1652
- list: t = [],
1653
- align: e = "top",
1654
- cards: n,
1655
- listBorder: i = !0,
1656
- listType: r = "",
1657
- col: a = 3,
1658
- gap: c,
1659
- iconColor: s,
1660
- className: l = "",
1661
- type: d = "default",
1662
- dark: m = !1,
1663
- textAlign: p = "left",
1664
- hoverStyle: h,
1665
- ...u
1666
- }) {
1667
- return /* @__PURE__ */ o(
1668
- it,
1669
- {
1670
- type: d,
1671
- className: b("card-list py-1", l, "items-stretch"),
1672
- col: a,
1673
- gap: c,
1674
- align: e,
1675
- ...u,
1676
- children: n || t.map((x) => /* @__PURE__ */ o(
1677
- po,
1678
- {
1679
- borderColor: i,
1680
- iconColor: s,
1681
- type: d,
1682
- listType: r,
1683
- dark: m,
1684
- ...x,
1685
- align: p,
1686
- sx: {
1687
- bgcolor: d === "wall" ? void 0 : m ? "grey.900" : "common.white"
1688
- },
1689
- style: c === 0 && t.length > 1 ? {
1690
- borderRadius: 0,
1691
- marginRight: "-1px",
1692
- marginBottom: "-1px"
1693
- } : {}
1694
- },
1695
- x.id
1696
- ))
1697
- }
1698
- );
1699
- }
1700
- const ho = [
1701
- "align",
1702
- "cards",
1703
- "list",
1704
- "listBorder",
1705
- "listType",
1706
- "col",
1707
- "gap",
1708
- "iconColor",
1709
- "type",
1710
- "textAlign"
1711
- ], fo = _(V)`
1712
- a .card {
1713
- color: #404040;
1714
- cursor: pointer;
1715
- }
1716
- a:not(.MuiButton-root) {
1717
- color: ${({ theme: t }) => t.palette.primary.main};
1718
- &:hover,
1719
- &:active {
1720
- color: ${({ theme: t }) => t.palette.primary.main};
1721
- }
1722
- }
1723
- a:hover .card {
1724
- color: #404040;
1725
- }
1726
- `;
1727
- function go({ className: t, ...e }) {
1728
- const [n, i] = $(e, F), [r, a] = $(i, ho);
1729
- return /* @__PURE__ */ w(fo, { className: b("section--card-list", t), type: e.type, ...a, children: [
1730
- Object.keys(n).length > 0 && /* @__PURE__ */ o(A, { center: !0, ...n, className: "mb-[2.5vw]" }),
1731
- /* @__PURE__ */ o(uo, { ...r, dark: !!e.dark })
1732
- ] });
1733
- }
1734
- const xo = _(go)`
1735
- .card__description {
1736
- white-space: pre-wrap;
1737
- }
1738
- .section__description {
1739
- }
1740
- .card {
1741
- /* background: inherit !important; */
1742
- }
1743
- &.dark .card-simple .card__body::before {
1744
- background: #212121 !important;
1745
- }
1746
- .card-simple .card__body::after {
1747
- background: inherit !important;
1748
- }
1749
- `;
1750
- function bo({ section: t, ...e }) {
1751
- const [{ editing: n }, i] = $(e, U), r = R(() => {
1752
- var a;
1753
- return {
1754
- ...C(i, ["listBorder", "list", "iconSize", "imageSize"]),
1755
- list: (a = i.list) == null ? void 0 : a.map((c) => {
1756
- var s, l;
1757
- return {
1758
- ...C(c, "icon", "iconColor"),
1759
- image: ["news", "simple", "default"].includes(i.type) && c.icon ? c.icon : c.image,
1760
- actions: (l = (s = c.actions) == null ? void 0 : s.map) == null ? void 0 : l.call(s, (d) => /* @__PURE__ */ o(Ot, { ...d, editing: n }, d.id)),
1761
- border: i.listBorder,
1762
- iconSize: i.iconSize,
1763
- imageSize: i.imageSize,
1764
- hoverStyle: i.hoverStyle
1765
- };
1766
- })
1767
- };
1768
- }, [i]);
1769
- return /* @__PURE__ */ o(xo, { style: n ? { pointerEvents: "none" } : {}, ...r });
1770
- }
1771
- function yo({
1772
- properties: t,
1773
- section: e,
1774
- locale: n,
1775
- dev: i
1776
- }) {
1777
- var r;
1778
- return (r = e == null ? void 0 : e.config) != null && r.componentId ? /* @__PURE__ */ o(
1779
- re,
1780
- {
1781
- instanceId: e.id,
1782
- componentId: e.config.componentId,
1783
- blockletId: e.config.blockletId,
1784
- blockletTitle: e.config.blockletTitle,
1785
- componentName: e.config.componentName,
1786
- locale: n,
1787
- properties: t,
1788
- dev: i
1789
- }
1790
- ) : /* @__PURE__ */ o(g, { textAlign: "center", py: 2, children: /* @__PURE__ */ o(P, { variant: "caption", color: "text.secondary", children: "Please select component to render" }) });
1791
- }
1792
- function wo({
1793
- src: t,
1794
- dataId: e,
1795
- isEdit: n = !1,
1796
- height: i = "100%",
1797
- onLoad: r = () => {
1798
- }
1799
- }) {
1800
- return /* @__PURE__ */ o(
1801
- xe,
1802
- {
1803
- isEdit: n,
1804
- embedId: e,
1805
- src: t,
1806
- height: i,
1807
- onLoad: () => {
1808
- r();
1809
- }
1810
- }
1811
- );
1812
- }
1813
- function vo({ dataId: t, src: e, actions: n, center: i, onLoad: r, ...a }) {
1814
- const [c, s] = $(a, F);
1815
- return /* @__PURE__ */ w(V, { ...s, children: [
1816
- Object.keys(c).length > 0 && /* @__PURE__ */ o(A, { center: i, ...c }),
1817
- /* @__PURE__ */ o(
1818
- wo,
1819
- {
1820
- dataId: t,
1821
- src: e,
1822
- onLoad: r,
1823
- height: a.iframeHeight ? `${a.iframeHeight}px` : "100%"
1824
- }
1825
- ),
1826
- /* @__PURE__ */ o(z, { actions: n, center: i })
1827
- ] });
1828
- }
1829
- const _n = {
1830
- src: "",
1831
- embedUrl: "",
1832
- title: "",
1833
- description: "",
1834
- dark: !1,
1835
- background: "",
1836
- center: !0,
1837
- config: {},
1838
- id: ""
1839
- };
1840
- function ko({ section: t, id: e, src: n, ...i }) {
1841
- const r = `${e}-${i.locale}`, [{ editing: a }, c] = $(i, U), s = G({}), l = JSON.parse(JSON.stringify(c)), { message: d } = he(r, "server"), m = fe(JSON.parse(JSON.stringify(c.config) || "{}"));
1842
- return O(() => {
1843
- d && d.onInit(() => m.current);
1844
- }, [d]), O(() => {
1845
- const p = JSON.parse(JSON.stringify(c.config) || "{}");
1846
- ge(s.current, p) || (s.current = p, d == null || d.send("config-set", p));
1847
- }, [d, c.config]), n ? /* @__PURE__ */ o(vo, { ...l, dataId: r, src: n, style: a ? { pointerEvents: "none" } : {} }) : /* @__PURE__ */ o(_o, { children: 'Please set the "src" attribute for this block' });
1848
- }
1849
- const _o = _("div")`
1850
- user-select: none;
1851
- color: #999;
1852
- padding: 8px;
1853
- height: 200px;
1854
- `, $o = [
1855
- /youtu\.be\/([^#&?]{11})/,
1856
- // youtu.be/<id>
1857
- /\?v=([^#&?]{11})/,
1858
- // ?v=<id>
1859
- /&v=([^#&?]{11})/,
1860
- // &v=<id>
1861
- /embed\/([^#&?]{11})/,
1862
- // embed/<id>
1863
- /\/v\/([^#&?]{11})/
1864
- // /v/<id>
1865
- ];
1866
- function So(t) {
1867
- var e;
1868
- if (/youtu\.?be/.test(t))
1869
- for (const n of $o) {
1870
- const i = (e = n.exec(t)) == null ? void 0 : e[1];
1871
- if (i)
1872
- return i;
1873
- }
1874
- }
1875
- function No(t) {
1876
- const e = So(t);
1877
- if (e)
1878
- return `https://youtube.com/embed/${e}`;
1879
- }
1880
- function Co({ src: t }) {
1881
- return O(() => {
1882
- import("@lottiefiles/lottie-player");
1883
- }, []), /* @__PURE__ */ o("lottie-player", { autoplay: !0, loop: !0, mode: "normal", src: t });
1884
- }
1885
- function Po(t) {
1886
- return /* @__PURE__ */ o(g, { maxHeight: 400, overflow: "hidden auto", children: /* @__PURE__ */ o(be, { ...t }) });
1887
- }
1888
- function Bo({ url: t }) {
1889
- const e = G(null), n = 495, [i, r] = T(
1890
- e.current ? e.current.offsetWidth * 0.5625 : n
1891
- ), a = E(() => {
1892
- const c = window.innerWidth > 990 ? 1 : window.innerWidth > 522 ? 1.2 : window.innerWidth > 400 ? 1.45 : 1.85, s = e.current ? e.current.offsetWidth * 0.5625 : n;
1893
- return r(Math.floor(s * c));
1894
- }, []);
1895
- return O(() => {
1896
- window.addEventListener("resize", a);
1897
- const c = window.innerWidth > 990 ? 1 : window.innerWidth > 522 ? 1.2 : window.innerWidth > 400 ? 1.45 : 1.85, s = e.current ? e.current.offsetWidth * 0.5625 : n;
1898
- return r(Math.floor(s * c)), function() {
1899
- window.removeEventListener("resize", a);
1900
- };
1901
- }, [i, a]), /* @__PURE__ */ o(
1902
- g,
1903
- {
1904
- component: "iframe",
1905
- ref: e,
1906
- title: "youtube",
1907
- width: "100%",
1908
- height: `${i}px`,
1909
- src: t,
1910
- frameBorder: "0",
1911
- allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
1912
- allowFullScreen: !0,
1913
- sx: { display: "block" }
1914
- }
1915
- );
1916
- }
1917
- const $n = {
1918
- image: "https://www.arcblock.io/static/ead0cabde7f2b7ff34db8f3e8ceca271/afc4b/builder.png",
1919
- badge: "Develop · Deploy · Run",
1920
- title: "The Future is Here: Blockchain and Decentralized Application Development",
1921
- description: "ArcBlock, your exclusive new decentralized development platform, makes developing decentralized applications, blockchain, and distributed ledger technology straightforward.",
1922
- reverse: !1,
1923
- dark: !1,
1924
- background: "",
1925
- actions: void 0,
1926
- hasImage: !0,
1927
- center: !1
1928
- }, Io = _(Me)`
1929
- .section__description {
1930
- }
1931
- `;
1932
- function Wo({
1933
- hasImage: t,
1934
- fullSizeImage: e,
1935
- boxed: n,
1936
- videoPoster: i,
1937
- imageMeta: r,
1938
- imageOptimization: a,
1939
- imageSize: c,
1940
- section: s,
1941
- ...l
1942
- }) {
1943
- var u, x;
1944
- const [{ editing: d }, m] = $({ ...l, boxed: e ? void 0 : n }, U);
1945
- let p = Ro(m.image, i, e, r, a, c);
1946
- t || (p = null);
1947
- let h = null;
1948
- return m.actions && (h = (x = (u = m.actions) == null ? void 0 : u.map) == null ? void 0 : x.call(u, (y, f) => /* @__PURE__ */ o(Ot, { ...y, editing: d }, f))), /* @__PURE__ */ o(
1949
- Io,
1950
- {
1951
- ...m,
1952
- style: d ? { pointerEvents: "none" } : {},
1953
- image: p,
1954
- fullSizeImage: t && e,
1955
- actions: h
1956
- }
1957
- );
1958
- }
1959
- function Ro(t, e, n, i, r, a) {
1960
- if (t) {
1961
- if (t.endsWith(".json"))
1962
- return /* @__PURE__ */ o(Co, { src: t });
1963
- if (t.indexOf("twitter.com") !== -1)
1964
- return /* @__PURE__ */ o(Po, { sourceType: "url", url: t });
1965
- const c = No(t);
1966
- if (c)
1967
- return /* @__PURE__ */ o(Bo, { url: c });
1968
- const { naturalWidth: s, naturalHeight: l, filename: d } = i || {};
1969
- if (tt(t))
1970
- return /* @__PURE__ */ o(
1971
- "video",
1972
- {
1973
- width: s && `${s}px`,
1974
- height: l && `${l}px`,
1975
- controls: !0,
1976
- autoPlay: !0,
1977
- muted: !0,
1978
- style: {
1979
- display: "block",
1980
- objectFit: a || "contain",
1981
- borderRadius: "8px",
1982
- width: "100%",
1983
- height: "100%"
1984
- },
1985
- poster: j(N(e), n ? 1200 : 540, r),
1986
- children: /* @__PURE__ */ o("source", { src: N(t), type: Fe(t) })
1987
- },
1988
- t
1989
- );
1990
- const m = r === "quality" ? 1 : 0.6;
1991
- return /* @__PURE__ */ o(
1992
- Nt,
1993
- {
1994
- src: N(t),
1995
- sizesAttr: {
1996
- sm: 600 * m,
1997
- md: 450 * m,
1998
- lg: 540 * m,
1999
- ...n && {
2000
- md: 900 * m,
2001
- lg: 1200 * m
2002
- }
2003
- },
2004
- width: s && `${s}px`,
2005
- height: l && `${l}px`,
2006
- alt: d ?? t,
2007
- style: { objectFit: a || "contain", display: "block", width: "100%", height: "100%" },
2008
- loading: "lazy"
2009
- }
2010
- );
2011
- }
2012
- return null;
2013
- }
2014
- const Sn = ["production", "draft"];
2015
- function Nn({ mode: t, version: e } = {}) {
2016
- const n = e && typeof e == "number" ? { mode: t, version: e } : { mode: t };
2017
- return ot.get(`/api/${nt()}/pages`, { params: n }).then((i) => i.data);
2018
- }
2019
- function Cn({ mode: t, pages: e }) {
2020
- return ot.post(`/api/${nt()}/pages/publish`, { mode: t, pages: e }).then((n) => n.data);
2021
- }
2022
- function To({
2023
- locale: t,
2024
- sort: e,
2025
- page: n,
2026
- limit: i,
2027
- mode: r
2028
- } = {}) {
2029
- return ot.get(`/api/${nt()}/pages/toc`, { params: { locale: t, sort: e, page: n, limit: i, mode: r } }).then((a) => a.data);
2030
- }
2031
- const Pn = {
2032
- style: "list",
2033
- sort: "-updatedAt"
2034
- }, gt = 20;
2035
- function jo({ style: t, sort: e, section: n, ...i }) {
2036
- const [{ editing: r, locale: a }, c] = $(i, U), [s, l] = $(c, F), [d, m] = T(), p = G(!1), h = ye(), u = de(), x = E(async () => {
2037
- if (!p.current) {
2038
- p.current = !0, h();
2039
- try {
2040
- const y = d ? Math.floor(d.list.length / gt) + 1 : 1, { list: f, total: v } = await To({ locale: a, sort: e, page: y, limit: gt });
2041
- m((k) => ({
2042
- list: ((k == null ? void 0 : k.list) ?? []).concat(f),
2043
- total: v
2044
- }));
2045
- } finally {
2046
- p.current = !1, h();
2047
- }
2048
- }
2049
- }, [d, a, e, h]);
2050
- return we(() => {
2051
- x();
2052
- }), /* @__PURE__ */ w(V, { ...l, sx: r ? { pointerEvents: "none" } : {}, children: [
2053
- Object.keys(s).length > 0 && /* @__PURE__ */ o(A, { ...s }),
2054
- d ? /* @__PURE__ */ w(J, { children: [
2055
- /* @__PURE__ */ o(lt, { container: !0, spacing: 2, justifyContent: "center", children: d == null ? void 0 : d.list.map((y) => /* @__PURE__ */ o(lt, { item: !0, xs: 12, sm: t === "card" ? 6 : 12, md: t === "card" ? 3 : 12, children: /* @__PURE__ */ w(
2056
- zo,
2057
- {
2058
- elevation: 0,
2059
- className: b(t === "card" && "style-card"),
2060
- onClick: r ? void 0 : () => u(y.slug),
2061
- children: [
2062
- !!y.image && /* @__PURE__ */ o(
2063
- Jt,
2064
- {
2065
- component: "img",
2066
- alt: "",
2067
- image: j(N(y.image), 540),
2068
- loading: "lazy"
2069
- }
2070
- ),
2071
- /* @__PURE__ */ w(Gt, { children: [
2072
- /* @__PURE__ */ o(P, { variant: "h6", component: "div", className: xt, children: y.title || y.id }),
2073
- /* @__PURE__ */ o(P, { variant: "body2", className: xt, children: y.description })
2074
- ] })
2075
- ]
2076
- }
2077
- ) }, y.id)) }),
2078
- /* @__PURE__ */ o(g, { textAlign: "center", mt: 2, children: d.total > d.list.length ? /* @__PURE__ */ o(L, { variant: "outlined", color: "secondary", onClick: x, loading: p.current, children: "More" }) : /* @__PURE__ */ o(L, { variant: "outlined", color: "secondary", disabled: !0, children: "No More" }) })
2079
- ] }) : /* @__PURE__ */ o(g, { p: 2, textAlign: "center", children: /* @__PURE__ */ o(Yt, { size: 24 }) })
2080
- ] });
2081
- }
2082
- const xt = q`
2083
- display: -webkit-box;
2084
- -webkit-box-orient: vertical;
2085
- -webkit-line-clamp: 2;
2086
- overflow: hidden;
2087
- text-overflow: ellipsis;
2088
- `, zo = _(Mt)`
2089
- border: 1px solid #e0e0e0;
2090
- background-color: transparent;
2091
- cursor: pointer;
2092
- display: flex;
2093
- color: inherit;
2094
-
2095
- > .MuiCardMedia-root {
2096
- width: 30vw;
2097
- max-height: 50vw;
2098
- }
2099
-
2100
- &.style-card {
2101
- display: block;
2102
-
2103
- > .MuiCardMedia-root {
2104
- width: 100%;
2105
- max-height: 50vw;
2106
- }
2107
- }
2108
- `, Lo = {
2109
- iframe: ko,
2110
- section: Wo,
2111
- "section-card-list": bo,
2112
- toc: jo,
2113
- "ai-runtime": Ge,
2114
- "custom-component": yo
2115
- };
2116
- function Bn({ id: t, type: e, mode: n, config: i, section: r, ...a }) {
2117
- const c = Lo[e], { getPageMetaStyle: s } = Ie(), l = R(() => {
2118
- const { height: p, ...h } = i;
2119
- return h;
2120
- }, [i]), d = R(() => {
2121
- const p = {};
2122
- return e !== "custom-component" && (p.height = i.height), p.sx = s("sx"), p;
2123
- }, [i.height, e, s]), m = c && /* @__PURE__ */ o(c, { mode: n, ...l, id: t, section: r });
2124
- return /* @__PURE__ */ o(Ye, { ...a, ...d, children: m });
2125
- }
2126
- function In(t) {
2127
- return t != null;
2128
- }
2129
- export {
2130
- Ot as A,
2131
- Bn as B,
2132
- jt as I,
2133
- vn as P,
2134
- Sn as S,
2135
- Pn as T,
2136
- wn as a,
2137
- $n as b,
2138
- _n as c,
2139
- Nn as g,
2140
- In as n,
2141
- Cn as p
2142
- };