@doneisbetter/gds-core 2.6.4 → 2.6.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-4YTMKBGW.mjs +905 -0
- package/dist/{chunk-BAS4ZGKL.mjs → chunk-IAP3JU55.mjs} +870 -807
- package/dist/client.d.mts +7 -3
- package/dist/client.d.ts +7 -3
- package/dist/client.js +1291 -926
- package/dist/client.mjs +10 -2
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1291 -926
- package/dist/index.mjs +10 -2
- package/dist/{server-BqFksoV3.d.mts → server-CF4gCYQ-.d.mts} +45 -13
- package/dist/{server-BqFksoV3.d.ts → server-CF4gCYQ-.d.ts} +45 -13
- package/dist/server.d.mts +1 -1
- package/dist/server.d.ts +1 -1
- package/dist/server.js +679 -611
- package/dist/server.mjs +7 -1
- package/package.json +2 -2
- package/dist/chunk-EN3TN22M.mjs +0 -585
package/dist/index.js
CHANGED
|
@@ -64,6 +64,10 @@ __export(index_exports, {
|
|
|
64
64
|
PublicProductCard: () => PublicProductCard,
|
|
65
65
|
PublicShell: () => PublicShell,
|
|
66
66
|
PublicSiteFooter: () => PublicSiteFooter,
|
|
67
|
+
ReferenceLinkGrid: () => ReferenceLinkGrid,
|
|
68
|
+
ReferenceLocaleNotice: () => ReferenceLocaleNotice,
|
|
69
|
+
ReferenceSection: () => ReferenceSection,
|
|
70
|
+
ReferenceThemeExplorer: () => ReferenceThemeExplorer,
|
|
67
71
|
SectionPanel: () => SectionPanel,
|
|
68
72
|
SemanticButton: () => SemanticButton,
|
|
69
73
|
ShareButtonGroup: () => ShareButtonGroup,
|
|
@@ -472,9 +476,678 @@ function ThemeToggle({ size = "md" }) {
|
|
|
472
476
|
);
|
|
473
477
|
}
|
|
474
478
|
|
|
479
|
+
// src/AccentPanel.tsx
|
|
480
|
+
var import_core6 = require("@mantine/core");
|
|
481
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
482
|
+
var toneStyles = {
|
|
483
|
+
gray: {
|
|
484
|
+
bg: "light-dark(var(--mantine-color-gray-0), color-mix(in srgb, var(--mantine-color-gray-7) 88%, black))",
|
|
485
|
+
border: "light-dark(var(--mantine-color-gray-2), color-mix(in srgb, var(--mantine-color-gray-4) 70%, transparent))",
|
|
486
|
+
color: "light-dark(var(--mantine-color-gray-9), var(--mantine-color-gray-0))"
|
|
487
|
+
},
|
|
488
|
+
violet: {
|
|
489
|
+
bg: "light-dark(var(--mantine-color-violet-0), color-mix(in srgb, var(--mantine-color-violet-9) 70%, black))",
|
|
490
|
+
border: "light-dark(var(--mantine-color-violet-2), color-mix(in srgb, var(--mantine-color-violet-4) 75%, transparent))",
|
|
491
|
+
color: "light-dark(var(--mantine-color-violet-9), var(--mantine-color-violet-0))"
|
|
492
|
+
},
|
|
493
|
+
green: {
|
|
494
|
+
bg: "light-dark(var(--mantine-color-green-0), color-mix(in srgb, var(--mantine-color-green-9) 72%, black))",
|
|
495
|
+
border: "light-dark(var(--mantine-color-green-2), color-mix(in srgb, var(--mantine-color-green-4) 78%, transparent))",
|
|
496
|
+
color: "light-dark(var(--mantine-color-green-9), var(--mantine-color-green-0))"
|
|
497
|
+
},
|
|
498
|
+
red: {
|
|
499
|
+
bg: "light-dark(var(--mantine-color-red-0), color-mix(in srgb, var(--mantine-color-red-9) 72%, black))",
|
|
500
|
+
border: "light-dark(var(--mantine-color-red-2), color-mix(in srgb, var(--mantine-color-red-4) 78%, transparent))",
|
|
501
|
+
color: "light-dark(var(--mantine-color-red-9), var(--mantine-color-red-0))"
|
|
502
|
+
},
|
|
503
|
+
amber: {
|
|
504
|
+
bg: "light-dark(var(--mantine-color-yellow-0), color-mix(in srgb, var(--mantine-color-yellow-8) 78%, black))",
|
|
505
|
+
border: "light-dark(var(--mantine-color-yellow-3), color-mix(in srgb, var(--mantine-color-yellow-5) 70%, transparent))",
|
|
506
|
+
color: "light-dark(var(--mantine-color-yellow-9), var(--mantine-color-yellow-0))"
|
|
507
|
+
},
|
|
508
|
+
blue: {
|
|
509
|
+
bg: "light-dark(var(--mantine-color-blue-0), color-mix(in srgb, var(--mantine-color-blue-9) 74%, black))",
|
|
510
|
+
border: "light-dark(var(--mantine-color-blue-2), color-mix(in srgb, var(--mantine-color-blue-4) 75%, transparent))",
|
|
511
|
+
color: "light-dark(var(--mantine-color-blue-9), var(--mantine-color-blue-0))"
|
|
512
|
+
}
|
|
513
|
+
};
|
|
514
|
+
function resolveAccentPanelStyles(tone = "violet", variant = "subtle") {
|
|
515
|
+
const token = toneStyles[tone];
|
|
516
|
+
if (variant === "soft-outline") {
|
|
517
|
+
return {
|
|
518
|
+
backgroundColor: "light-dark(var(--mantine-color-body), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))",
|
|
519
|
+
border: `1px solid ${token.border}`,
|
|
520
|
+
color: token.color
|
|
521
|
+
};
|
|
522
|
+
}
|
|
523
|
+
return {
|
|
524
|
+
backgroundColor: token.bg,
|
|
525
|
+
border: `1px solid ${token.border}`,
|
|
526
|
+
color: token.color
|
|
527
|
+
};
|
|
528
|
+
}
|
|
529
|
+
function AccentPanel({
|
|
530
|
+
tone = "violet",
|
|
531
|
+
variant = "subtle",
|
|
532
|
+
title,
|
|
533
|
+
badge,
|
|
534
|
+
children
|
|
535
|
+
}) {
|
|
536
|
+
const styles = resolveAccentPanelStyles(tone, variant);
|
|
537
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Paper, { withBorder: true, radius: "lg", p: "lg", style: styles, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Stack, { gap: "sm", children: [
|
|
538
|
+
title || badge ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
|
|
539
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Title, { order: 4, c: "inherit", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Box, {}),
|
|
540
|
+
badge ? typeof badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Badge, { color: tone === "amber" ? "yellow" : tone, variant: "filled", children: badge }) : badge : null
|
|
541
|
+
] }) : null,
|
|
542
|
+
typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Text, { c: "inherit", children }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Box, { c: "inherit", children })
|
|
543
|
+
] }) });
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
// src/ReferenceLocaleNotice.tsx
|
|
547
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
548
|
+
function ReferenceLocaleNotice({ localeLabel, detail }) {
|
|
549
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AccentPanel, { tone: "amber", variant: "soft-outline", title: "Localization status", badge: localeLabel, children: detail });
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
// src/ReferenceLinkGrid.tsx
|
|
553
|
+
var import_core7 = require("@mantine/core");
|
|
554
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
555
|
+
function ReferenceLinkGrid({
|
|
556
|
+
items,
|
|
557
|
+
columns = 3
|
|
558
|
+
}) {
|
|
559
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), xl: columns }, spacing: "lg", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core7.Stack, { gap: "md", children: [
|
|
560
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core7.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
|
|
561
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core7.Stack, { gap: 6, maw: 540, children: [
|
|
562
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Title, { order: 4, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Anchor, { href: item.href, underline: "never", children: item.title }) }),
|
|
563
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Text, { size: "sm", c: "dimmed", children: item.description })
|
|
564
|
+
] }),
|
|
565
|
+
item.badge ? typeof item.badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Badge, { variant: "light", color: "violet", children: item.badge }) : item.badge : null
|
|
566
|
+
] }),
|
|
567
|
+
item.meta ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Text, { size: "sm", c: "dimmed", children: item.meta }) : null,
|
|
568
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core7.Anchor, { href: item.href, fw: 600, children: "Open section" })
|
|
569
|
+
] }) }, item.id)) });
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
// src/ReferenceSection.tsx
|
|
573
|
+
var import_core9 = require("@mantine/core");
|
|
574
|
+
|
|
575
|
+
// src/SectionPanel.tsx
|
|
576
|
+
var import_core8 = require("@mantine/core");
|
|
577
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
578
|
+
var toneBackgrounds = {
|
|
579
|
+
default: "var(--mantine-color-body)",
|
|
580
|
+
supporting: "light-dark(var(--mantine-color-gray-0), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))",
|
|
581
|
+
warning: "light-dark(var(--mantine-color-yellow-0), color-mix(in srgb, var(--mantine-color-yellow-9) 18%, var(--mantine-color-body)))",
|
|
582
|
+
critical: "light-dark(var(--mantine-color-red-0), color-mix(in srgb, var(--mantine-color-red-9) 18%, var(--mantine-color-body)))"
|
|
583
|
+
};
|
|
584
|
+
function SectionPanel({
|
|
585
|
+
title,
|
|
586
|
+
description,
|
|
587
|
+
action,
|
|
588
|
+
children,
|
|
589
|
+
tone = "default",
|
|
590
|
+
id,
|
|
591
|
+
divided = true
|
|
592
|
+
}) {
|
|
593
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Paper, { id, withBorder: true, radius: "xl", p: "lg", style: { background: toneBackgrounds[tone] }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Stack, { gap: "md", children: [
|
|
594
|
+
title || description || action ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
|
|
595
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
|
|
596
|
+
title || description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core8.Stack, { gap: 4, children: [
|
|
597
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Title, { order: 3, children: title }) : null,
|
|
598
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Text, { size: "sm", c: "dimmed", children: description }) : null
|
|
599
|
+
] }) : null,
|
|
600
|
+
action
|
|
601
|
+
] }),
|
|
602
|
+
divided ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core8.Divider, {}) : null
|
|
603
|
+
] }) : null,
|
|
604
|
+
children
|
|
605
|
+
] }) });
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
// src/ReferenceSection.tsx
|
|
609
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
610
|
+
function ReferenceSection({
|
|
611
|
+
title,
|
|
612
|
+
description,
|
|
613
|
+
eyebrow,
|
|
614
|
+
action,
|
|
615
|
+
href,
|
|
616
|
+
linkLabel = "Open section",
|
|
617
|
+
tone = "default",
|
|
618
|
+
children
|
|
619
|
+
}) {
|
|
620
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
621
|
+
SectionPanel,
|
|
622
|
+
{
|
|
623
|
+
tone,
|
|
624
|
+
title: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core9.Stack, { gap: 4, children: [
|
|
625
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Text, { size: "xs", fw: 700, c: "dimmed", children: eyebrow }) : null,
|
|
626
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core9.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
|
|
627
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core9.Stack, { gap: 4, children: [
|
|
628
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Text, { component: "span", fw: 700, size: "xl", children: title }),
|
|
629
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Text, { size: "sm", c: "dimmed", children: description }) : null
|
|
630
|
+
] }),
|
|
631
|
+
href ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core9.Anchor, { href, fw: 600, children: linkLabel }) : null
|
|
632
|
+
] })
|
|
633
|
+
] }),
|
|
634
|
+
action,
|
|
635
|
+
divided: false,
|
|
636
|
+
children
|
|
637
|
+
}
|
|
638
|
+
);
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
// src/ReferenceThemeExplorer.tsx
|
|
642
|
+
var import_react2 = require("react");
|
|
643
|
+
var import_core14 = require("@mantine/core");
|
|
644
|
+
|
|
645
|
+
// src/ActionBar.tsx
|
|
646
|
+
var import_core10 = require("@mantine/core");
|
|
647
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
648
|
+
function renderSemanticAction(action, slot, vocabularyPacks) {
|
|
649
|
+
const { action: actionId, variant, ariaLabel, ...props } = action;
|
|
650
|
+
const fallbackVariant = slot === "primary" ? "filled" : slot === "secondary" ? "default" : "subtle";
|
|
651
|
+
const config = resolveSemanticActionConfig(actionId, vocabularyPacks);
|
|
652
|
+
const Icon = config.icon;
|
|
653
|
+
const label = getSemanticActionLabel(actionId, void 0, vocabularyPacks);
|
|
654
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
655
|
+
import_core10.Button,
|
|
656
|
+
{
|
|
657
|
+
leftSection: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { size: "1rem", stroke: 1.75 }),
|
|
658
|
+
"aria-label": ariaLabel ?? label,
|
|
659
|
+
variant: variant ?? fallbackVariant,
|
|
660
|
+
...props,
|
|
661
|
+
children: label
|
|
662
|
+
},
|
|
663
|
+
`${slot}-${actionId}`
|
|
664
|
+
);
|
|
665
|
+
}
|
|
666
|
+
function ActionBar({
|
|
667
|
+
primary,
|
|
668
|
+
secondary = [],
|
|
669
|
+
tertiary = [],
|
|
670
|
+
iconOnly = [],
|
|
671
|
+
gap = "sm",
|
|
672
|
+
vocabularyPacks = []
|
|
673
|
+
}) {
|
|
674
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core10.Stack, { gap, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core10.Group, { justify: "space-between", align: "center", gap, wrap: "wrap", children: [
|
|
675
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core10.Group, { gap, wrap: "wrap", children: [
|
|
676
|
+
secondary.map((action) => renderSemanticAction(action, "secondary", vocabularyPacks)),
|
|
677
|
+
tertiary.map((action) => renderSemanticAction(action, "tertiary", vocabularyPacks))
|
|
678
|
+
] }),
|
|
679
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core10.Group, { gap, wrap: "wrap", justify: "flex-end", style: { marginInlineStart: "auto" }, children: [
|
|
680
|
+
iconOnly.map(({ action, ariaLabel, ...props }) => {
|
|
681
|
+
const config = resolveSemanticActionConfig(action, vocabularyPacks);
|
|
682
|
+
const Icon = config.icon;
|
|
683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
684
|
+
import_core10.ActionIcon,
|
|
685
|
+
{
|
|
686
|
+
variant: "subtle",
|
|
687
|
+
size: "lg",
|
|
688
|
+
"aria-label": ariaLabel ?? getSemanticActionLabel(action, void 0, vocabularyPacks),
|
|
689
|
+
...props,
|
|
690
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { size: "1rem", stroke: 1.75 })
|
|
691
|
+
},
|
|
692
|
+
`icon-${action}`
|
|
693
|
+
);
|
|
694
|
+
}),
|
|
695
|
+
primary ? renderSemanticAction(primary, "primary", vocabularyPacks) : null
|
|
696
|
+
] })
|
|
697
|
+
] }) });
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
// src/FormField.tsx
|
|
701
|
+
var import_core11 = require("@mantine/core");
|
|
702
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
703
|
+
function FormField({ label, description, error, children }) {
|
|
704
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Box, { component: "label", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Stack, { gap: 4, children: [
|
|
705
|
+
typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "xs", fw: 600, c: "dimmed", children: label }) : label,
|
|
706
|
+
description ? typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "xs", c: "dimmed", children: description }) : description : null,
|
|
707
|
+
children,
|
|
708
|
+
error ? typeof error === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "xs", c: "red.7", children: error }) : error : null
|
|
709
|
+
] }) });
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
// src/ListingCard.tsx
|
|
713
|
+
var import_core12 = require("@mantine/core");
|
|
714
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
715
|
+
var ratioMap = {
|
|
716
|
+
"1:1": 1,
|
|
717
|
+
"4:3": 4 / 3,
|
|
718
|
+
"16:9": 16 / 9
|
|
719
|
+
};
|
|
720
|
+
var toneColorMap = {
|
|
721
|
+
default: void 0,
|
|
722
|
+
positive: "teal",
|
|
723
|
+
warning: "orange",
|
|
724
|
+
muted: "gray"
|
|
725
|
+
};
|
|
726
|
+
function ListingImageFallback({ mediaRatio }) {
|
|
727
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.AspectRatio, { ratio: ratioMap[mediaRatio], children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
728
|
+
import_core12.ThemeIcon,
|
|
729
|
+
{
|
|
730
|
+
size: "100%",
|
|
731
|
+
radius: "md",
|
|
732
|
+
variant: "light",
|
|
733
|
+
color: "gray",
|
|
734
|
+
"aria-label": "No listing image available",
|
|
735
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(GdsIcons.Gallery, { size: "2rem" })
|
|
736
|
+
}
|
|
737
|
+
) });
|
|
738
|
+
}
|
|
739
|
+
function ListingAffordance({ affordance }) {
|
|
740
|
+
const config = GdsVocabulary[affordance.action];
|
|
741
|
+
const Icon = config.icon;
|
|
742
|
+
const label = affordance.ariaLabel ?? getSemanticActionLabel(affordance.action);
|
|
743
|
+
if (affordance.href) {
|
|
744
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
745
|
+
import_core12.ActionIcon,
|
|
746
|
+
{
|
|
747
|
+
component: "a",
|
|
748
|
+
href: affordance.href,
|
|
749
|
+
variant: "subtle",
|
|
750
|
+
size: "lg",
|
|
751
|
+
"aria-label": label,
|
|
752
|
+
disabled: affordance.disabled,
|
|
753
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: "1rem", stroke: 1.75 })
|
|
754
|
+
}
|
|
755
|
+
);
|
|
756
|
+
}
|
|
757
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
758
|
+
import_core12.ActionIcon,
|
|
759
|
+
{
|
|
760
|
+
variant: "subtle",
|
|
761
|
+
size: "lg",
|
|
762
|
+
"aria-label": label,
|
|
763
|
+
onClick: affordance.onClick,
|
|
764
|
+
disabled: affordance.disabled,
|
|
765
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: "1rem", stroke: 1.75 })
|
|
766
|
+
}
|
|
767
|
+
);
|
|
768
|
+
}
|
|
769
|
+
function ListingCard({
|
|
770
|
+
title,
|
|
771
|
+
href,
|
|
772
|
+
description,
|
|
773
|
+
image,
|
|
774
|
+
mediaRatio = "4:3",
|
|
775
|
+
metadata = [],
|
|
776
|
+
featured = false,
|
|
777
|
+
sponsoredDisclosure,
|
|
778
|
+
price,
|
|
779
|
+
primaryAction,
|
|
780
|
+
saveAction,
|
|
781
|
+
shareAction,
|
|
782
|
+
compact = false
|
|
783
|
+
}) {
|
|
784
|
+
const titleContent = href && typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { component: "a", href, inherit: true, td: "none", children: title }) : title;
|
|
785
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: compact ? "sm" : "md", children: [
|
|
786
|
+
image ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ListingImageFallback, { mediaRatio }),
|
|
787
|
+
featured || sponsoredDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { justify: "space-between", gap: "sm", wrap: "wrap", children: [
|
|
788
|
+
featured ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Badge, { variant: "light", color: "violet", children: "Featured" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", {}),
|
|
789
|
+
sponsoredDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "xs", c: "dimmed", children: sponsoredDisclosure }) : null
|
|
790
|
+
] }) : null,
|
|
791
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: 4, children: [
|
|
792
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Title, { order: compact ? 5 : 4, lineClamp: 2, children: titleContent }),
|
|
793
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
|
|
794
|
+
] }),
|
|
795
|
+
metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Stack, { gap: "xs", children: metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "nowrap", children: [
|
|
796
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { gap: "xs", wrap: "nowrap", style: { minWidth: 0, flex: 1 }, children: [
|
|
797
|
+
item.icon,
|
|
798
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: item.tone ? toneColorMap[item.tone] : "dimmed", lineClamp: 1, children: item.label })
|
|
799
|
+
] }),
|
|
800
|
+
item.value ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", fw: 500, ta: "right", children: item.value }) : null
|
|
801
|
+
] }, item.id)) }) : null,
|
|
802
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { justify: "space-between", align: "center", gap: "sm", wrap: "wrap", children: [
|
|
803
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: price ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { fw: 700, size: compact ? "md" : "lg", children: price }) : null }),
|
|
804
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { gap: "xs", wrap: "nowrap", justify: "flex-end", style: { marginInlineStart: "auto" }, children: [
|
|
805
|
+
saveAction ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ListingAffordance, { affordance: saveAction }) : null,
|
|
806
|
+
shareAction ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ListingAffordance, { affordance: shareAction }) : null,
|
|
807
|
+
primaryAction
|
|
808
|
+
] })
|
|
809
|
+
] })
|
|
810
|
+
] }) });
|
|
811
|
+
}
|
|
812
|
+
|
|
813
|
+
// src/StateBlock.tsx
|
|
814
|
+
var import_core13 = require("@mantine/core");
|
|
815
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
816
|
+
var variantConfig = {
|
|
817
|
+
loading: { color: "violet", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Loader, { size: "sm" }) },
|
|
818
|
+
empty: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Inbox, { size: "1.1rem" }) },
|
|
819
|
+
error: { color: "red", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Danger, { size: "1.1rem" }) },
|
|
820
|
+
permission: { color: "orange", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Verify, { size: "1.1rem" }) },
|
|
821
|
+
disabled: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Toggle, { size: "1.1rem" }) },
|
|
822
|
+
success: { color: "teal", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Success, { size: "1.1rem" }) },
|
|
823
|
+
info: { color: "blue", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Info, { size: "1.1rem" }) },
|
|
824
|
+
"not-enough-data": { color: "yellow", icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(GdsIcons.Analytics, { size: "1.1rem" }) }
|
|
825
|
+
};
|
|
826
|
+
function StateBlock({
|
|
827
|
+
variant,
|
|
828
|
+
title,
|
|
829
|
+
description,
|
|
830
|
+
action,
|
|
831
|
+
icon,
|
|
832
|
+
compact = false
|
|
833
|
+
}) {
|
|
834
|
+
const config = variantConfig[variant];
|
|
835
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
836
|
+
import_core13.Stack,
|
|
837
|
+
{
|
|
838
|
+
align: compact ? "flex-start" : "center",
|
|
839
|
+
justify: "center",
|
|
840
|
+
gap: "md",
|
|
841
|
+
py: compact ? "md" : "xl",
|
|
842
|
+
ta: compact ? "left" : "center",
|
|
843
|
+
children: [
|
|
844
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.ThemeIcon, { variant: "light", color: config.color, size: compact ? "lg" : "xl", radius: "xl", children: icon ?? config.icon }),
|
|
845
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: 6, align: compact ? "flex-start" : "center", children: [
|
|
846
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Title, { order: compact ? 4 : 3, children: title }),
|
|
847
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Text, { c: "dimmed", maw: compact ? void 0 : 480, children: description }) : null
|
|
848
|
+
] }),
|
|
849
|
+
action
|
|
850
|
+
]
|
|
851
|
+
}
|
|
852
|
+
);
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
// src/ReferenceThemeExplorer.tsx
|
|
856
|
+
var import_gds_theme3 = require("@doneisbetter/gds-theme");
|
|
857
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
858
|
+
var themePresetCatalog = {
|
|
859
|
+
default: {
|
|
860
|
+
label: "Default runtime theme",
|
|
861
|
+
bestFor: "Balanced multi-surface products that need the baseline GDS system.",
|
|
862
|
+
summary: "The default shared runtime lane for most adopters.",
|
|
863
|
+
themeKey: "gdsTheme"
|
|
864
|
+
},
|
|
865
|
+
"dark-public": {
|
|
866
|
+
label: "Dark public theme",
|
|
867
|
+
bestFor: "Dark-first public experiences and campaign-style landing surfaces.",
|
|
868
|
+
summary: "A darker public presentation lane with the shipped runtime rhythm intact.",
|
|
869
|
+
themeKey: "gdsDarkPublicTheme"
|
|
870
|
+
},
|
|
871
|
+
"flat-surface": {
|
|
872
|
+
label: "Flat surface theme",
|
|
873
|
+
bestFor: "Operational products that prefer quieter elevation and flatter surface contrast.",
|
|
874
|
+
summary: "Removes some visual weight without creating a second token authority.",
|
|
875
|
+
themeKey: "gdsFlatSurfaceTheme"
|
|
876
|
+
},
|
|
877
|
+
editorial: {
|
|
878
|
+
label: "Editorial serif theme",
|
|
879
|
+
bestFor: "Documentation, editorial, and content-led experiences.",
|
|
880
|
+
summary: "Adds a more expressive public reading tone while staying inside GDS contracts.",
|
|
881
|
+
themeKey: "gdsEditorialPublicTheme"
|
|
882
|
+
},
|
|
883
|
+
brand: {
|
|
884
|
+
label: "Brand theme generator",
|
|
885
|
+
bestFor: "Consumer teams that need controlled brand expression without forking the system.",
|
|
886
|
+
summary: "Composes the shipped helpers into a governed product-authored theme lane.",
|
|
887
|
+
themeKey: "createPublicBrandTheme(...)"
|
|
888
|
+
}
|
|
889
|
+
};
|
|
890
|
+
function ThemePreviewSurface({
|
|
891
|
+
preset,
|
|
892
|
+
colorScheme
|
|
893
|
+
}) {
|
|
894
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "lg", children: [
|
|
895
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", align: "flex-start", wrap: "wrap", children: [
|
|
896
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 4, children: [
|
|
897
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { fw: 700, children: preset.label }),
|
|
898
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: preset.summary }),
|
|
899
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Text, { size: "sm", children: [
|
|
900
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Best for:" }),
|
|
901
|
+
" ",
|
|
902
|
+
preset.bestFor
|
|
903
|
+
] }),
|
|
904
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Text, { size: "sm", children: [
|
|
905
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Color scheme:" }),
|
|
906
|
+
" ",
|
|
907
|
+
colorScheme
|
|
908
|
+
] })
|
|
909
|
+
] }),
|
|
910
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemeToggle, {})
|
|
911
|
+
] }),
|
|
912
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
913
|
+
ActionBar,
|
|
914
|
+
{
|
|
915
|
+
primary: { action: "save", size: "sm" },
|
|
916
|
+
secondary: [{ action: "cancel", size: "sm" }],
|
|
917
|
+
tertiary: [{ action: "preview", size: "sm" }]
|
|
918
|
+
}
|
|
919
|
+
),
|
|
920
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.SimpleGrid, { cols: { base: 1, md: 2 }, spacing: "md", children: [
|
|
921
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "sm", children: [
|
|
922
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { fw: 700, size: "sm", children: "Token-backed controls" }),
|
|
923
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Reference input", description: "Inputs stay inside the theme lane instead of drifting into route-local styling.", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.TextInput, { placeholder: "Search or type a route name" }) }),
|
|
924
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { gap: "xs", wrap: "wrap", children: [
|
|
925
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Badge, { color: "teal", variant: "light", children: "Success" }),
|
|
926
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Badge, { color: "orange", variant: "light", children: "Warning" }),
|
|
927
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Badge, { color: "red", variant: "light", children: "Critical" })
|
|
928
|
+
] })
|
|
929
|
+
] }) }),
|
|
930
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
931
|
+
ListingCard,
|
|
932
|
+
{
|
|
933
|
+
title: "Reference site proof surface",
|
|
934
|
+
description: "This preview uses the real shipped design-system runtime rather than a docs-only styling lane.",
|
|
935
|
+
metadata: [
|
|
936
|
+
{ id: "runtime", label: "Runtime lane", value: preset.themeKey },
|
|
937
|
+
{ id: "scheme", label: "Color scheme", value: colorScheme }
|
|
938
|
+
],
|
|
939
|
+
primaryAction: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Button, { size: "sm", children: "Inspect route" })
|
|
940
|
+
}
|
|
941
|
+
)
|
|
942
|
+
] })
|
|
943
|
+
] }) });
|
|
944
|
+
}
|
|
945
|
+
function ReferenceThemeExplorer() {
|
|
946
|
+
const [preset, setPreset] = (0, import_react2.useState)("default");
|
|
947
|
+
const [colorScheme, setColorScheme] = (0, import_react2.useState)("light");
|
|
948
|
+
const [brandPrimary, setBrandPrimary] = (0, import_react2.useState)("blue");
|
|
949
|
+
const [brandFlatSurfaces, setBrandFlatSurfaces] = (0, import_react2.useState)(true);
|
|
950
|
+
const [brandEditorialSerif, setBrandEditorialSerif] = (0, import_react2.useState)(false);
|
|
951
|
+
const [comparisonEnabled, setComparisonEnabled] = (0, import_react2.useState)(false);
|
|
952
|
+
const [comparisonPreset, setComparisonPreset] = (0, import_react2.useState)("editorial");
|
|
953
|
+
const resolveTheme = (presetId) => {
|
|
954
|
+
switch (presetId) {
|
|
955
|
+
case "dark-public":
|
|
956
|
+
return import_gds_theme3.gdsDarkPublicTheme;
|
|
957
|
+
case "flat-surface":
|
|
958
|
+
return import_gds_theme3.gdsFlatSurfaceTheme;
|
|
959
|
+
case "editorial":
|
|
960
|
+
return import_gds_theme3.gdsEditorialPublicTheme;
|
|
961
|
+
case "brand":
|
|
962
|
+
return (0, import_gds_theme3.createPublicBrandTheme)({
|
|
963
|
+
flatSurfaces: brandFlatSurfaces,
|
|
964
|
+
editorialSerif: brandEditorialSerif,
|
|
965
|
+
overrides: { primaryColor: brandPrimary }
|
|
966
|
+
});
|
|
967
|
+
default:
|
|
968
|
+
return import_gds_theme3.gdsTheme;
|
|
969
|
+
}
|
|
970
|
+
};
|
|
971
|
+
const selectionSummary = themePresetCatalog[preset];
|
|
972
|
+
const comparisonSummary = themePresetCatalog[comparisonPreset];
|
|
973
|
+
const selectedTheme = (0, import_react2.useMemo)(() => resolveTheme(preset), [preset, brandPrimary, brandFlatSurfaces, brandEditorialSerif]);
|
|
974
|
+
const comparedTheme = (0, import_react2.useMemo)(() => resolveTheme(comparisonPreset), [comparisonPreset, brandPrimary, brandFlatSurfaces, brandEditorialSerif]);
|
|
975
|
+
const previewKey = `${preset}-${colorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}`;
|
|
976
|
+
const comparisonPreviewKey = `${comparisonPreset}-${colorScheme}-${brandPrimary}-${brandFlatSurfaces}-${brandEditorialSerif}`;
|
|
977
|
+
const reset = () => {
|
|
978
|
+
setPreset("default");
|
|
979
|
+
setColorScheme("light");
|
|
980
|
+
setBrandPrimary("blue");
|
|
981
|
+
setBrandFlatSurfaces(true);
|
|
982
|
+
setBrandEditorialSerif(false);
|
|
983
|
+
setComparisonEnabled(false);
|
|
984
|
+
setComparisonPreset("editorial");
|
|
985
|
+
};
|
|
986
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "xl", children: [
|
|
987
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
988
|
+
ReferenceSection,
|
|
989
|
+
{
|
|
990
|
+
title: "Theme Lab",
|
|
991
|
+
description: "Test the actual shipped GDS theme presets, color-scheme behavior, and the governed brand-theme generator. This page is part of the live demo, not a separate styling experiment.",
|
|
992
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.SimpleGrid, { cols: { base: 1, md: 2, xl: 3 }, spacing: "lg", children: [
|
|
993
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "md", children: [
|
|
994
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Title, { order: 4, children: "Theme preset" }),
|
|
995
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Preset", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
996
|
+
import_core14.NativeSelect,
|
|
997
|
+
{
|
|
998
|
+
"aria-label": "Preset",
|
|
999
|
+
value: preset,
|
|
1000
|
+
onChange: (event) => setPreset(event.currentTarget.value || "default"),
|
|
1001
|
+
data: Object.entries(themePresetCatalog).map(([value, item]) => ({ value, label: item.label }))
|
|
1002
|
+
}
|
|
1003
|
+
) }),
|
|
1004
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Preview color scheme", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1005
|
+
import_core14.NativeSelect,
|
|
1006
|
+
{
|
|
1007
|
+
"aria-label": "Preview color scheme",
|
|
1008
|
+
value: colorScheme,
|
|
1009
|
+
onChange: (event) => setColorScheme(event.currentTarget.value || "light"),
|
|
1010
|
+
data: [
|
|
1011
|
+
{ value: "light", label: "Light" },
|
|
1012
|
+
{ value: "dark", label: "Dark" },
|
|
1013
|
+
{ value: "auto", label: "Auto" }
|
|
1014
|
+
]
|
|
1015
|
+
}
|
|
1016
|
+
) }),
|
|
1017
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Button, { variant: "default", size: "sm", onClick: reset, children: "Reset theme lab" }),
|
|
1018
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: "The reference site remounts an isolated provider here so visitors can test shipped presets without changing the whole docs shell." })
|
|
1019
|
+
] }) }),
|
|
1020
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "md", children: [
|
|
1021
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Title, { order: 4, children: "Brand builder options" }),
|
|
1022
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Brand primary color", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1023
|
+
import_core14.NativeSelect,
|
|
1024
|
+
{
|
|
1025
|
+
"aria-label": "Brand primary color",
|
|
1026
|
+
value: brandPrimary,
|
|
1027
|
+
onChange: (event) => setBrandPrimary(event.currentTarget.value || "blue"),
|
|
1028
|
+
data: ["blue", "violet", "teal", "grape", "indigo", "orange"],
|
|
1029
|
+
disabled: preset !== "brand"
|
|
1030
|
+
}
|
|
1031
|
+
) }),
|
|
1032
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1033
|
+
import_core14.Checkbox,
|
|
1034
|
+
{
|
|
1035
|
+
label: "Use flat surfaces",
|
|
1036
|
+
checked: brandFlatSurfaces,
|
|
1037
|
+
onChange: (event) => setBrandFlatSurfaces(event.currentTarget.checked),
|
|
1038
|
+
disabled: preset !== "brand"
|
|
1039
|
+
}
|
|
1040
|
+
),
|
|
1041
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1042
|
+
import_core14.Checkbox,
|
|
1043
|
+
{
|
|
1044
|
+
label: "Use editorial serif headings",
|
|
1045
|
+
checked: brandEditorialSerif,
|
|
1046
|
+
onChange: (event) => setBrandEditorialSerif(event.currentTarget.checked),
|
|
1047
|
+
disabled: preset !== "brand"
|
|
1048
|
+
}
|
|
1049
|
+
),
|
|
1050
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: "The generator composes shipped helpers instead of creating a second theme authority inside the website." })
|
|
1051
|
+
] }) }),
|
|
1052
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "md", children: [
|
|
1053
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Title, { order: 4, children: "Current selection summary" }),
|
|
1054
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 6, children: [
|
|
1055
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { fw: 700, children: selectionSummary.label }),
|
|
1056
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: selectionSummary.summary }),
|
|
1057
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Text, { size: "sm", children: [
|
|
1058
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Best for:" }),
|
|
1059
|
+
" ",
|
|
1060
|
+
selectionSummary.bestFor
|
|
1061
|
+
] }),
|
|
1062
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Text, { size: "sm", children: [
|
|
1063
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Runtime lane:" }),
|
|
1064
|
+
" ",
|
|
1065
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Code, { children: selectionSummary.themeKey })
|
|
1066
|
+
] }),
|
|
1067
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Text, { size: "sm", children: [
|
|
1068
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { children: "Color scheme:" }),
|
|
1069
|
+
" ",
|
|
1070
|
+
colorScheme
|
|
1071
|
+
] })
|
|
1072
|
+
] }),
|
|
1073
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1074
|
+
import_core14.Checkbox,
|
|
1075
|
+
{
|
|
1076
|
+
"aria-label": "Compare against a second shipped preset",
|
|
1077
|
+
label: "Compare against a second shipped preset",
|
|
1078
|
+
checked: comparisonEnabled,
|
|
1079
|
+
onChange: (event) => setComparisonEnabled(event.currentTarget.checked)
|
|
1080
|
+
}
|
|
1081
|
+
),
|
|
1082
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FormField, { label: "Comparison preset", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1083
|
+
import_core14.NativeSelect,
|
|
1084
|
+
{
|
|
1085
|
+
"aria-label": "Comparison preset",
|
|
1086
|
+
value: comparisonPreset,
|
|
1087
|
+
onChange: (event) => setComparisonPreset(event.currentTarget.value || "editorial"),
|
|
1088
|
+
disabled: !comparisonEnabled,
|
|
1089
|
+
data: Object.entries(themePresetCatalog).filter(([value]) => value !== preset).map(([value, item]) => ({ value, label: item.label }))
|
|
1090
|
+
}
|
|
1091
|
+
) })
|
|
1092
|
+
] }) })
|
|
1093
|
+
] })
|
|
1094
|
+
}
|
|
1095
|
+
),
|
|
1096
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1097
|
+
ReferenceSection,
|
|
1098
|
+
{
|
|
1099
|
+
title: "Shipped theme lanes",
|
|
1100
|
+
description: "Every lane below is part of the supported system. The website uses these exact helpers as its live runtime proof.",
|
|
1101
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.SimpleGrid, { cols: { base: 1, md: 2, xl: 5 }, spacing: "md", children: Object.values(themePresetCatalog).map((lane) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 6, children: [
|
|
1102
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { fw: 700, size: "sm", children: lane.label }),
|
|
1103
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: lane.summary }),
|
|
1104
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Code, { block: true, fz: "10px", children: lane.themeKey })
|
|
1105
|
+
] }) }, lane.themeKey)) })
|
|
1106
|
+
}
|
|
1107
|
+
),
|
|
1108
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1109
|
+
ReferenceSection,
|
|
1110
|
+
{
|
|
1111
|
+
title: "Live Theme Preview",
|
|
1112
|
+
description: "Visitors can test the shipped presets, compare lanes, and inspect actual GDS surfaces under each theme.",
|
|
1113
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.SimpleGrid, { cols: { base: 1, xl: comparisonEnabled ? 2 : 1 }, spacing: "lg", children: [
|
|
1114
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_gds_theme3.GdsProvider, { theme: selectedTheme, defaultColorScheme: colorScheme, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemePreviewSurface, { preset: selectionSummary, colorScheme }) }, previewKey),
|
|
1115
|
+
comparisonEnabled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_gds_theme3.GdsProvider, { theme: comparedTheme, defaultColorScheme: colorScheme, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: "md", children: [
|
|
1116
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Group, { justify: "space-between", align: "flex-start", wrap: "wrap", children: [
|
|
1117
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_core14.Stack, { gap: 4, children: [
|
|
1118
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { fw: 700, children: "Comparison Preview Surface" }),
|
|
1119
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Text, { size: "sm", c: "dimmed", children: "Compare another shipped theme against the current selection before adopting it downstream." })
|
|
1120
|
+
] }),
|
|
1121
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_core14.Badge, { color: "violet", variant: "light", children: comparisonSummary.label })
|
|
1122
|
+
] }),
|
|
1123
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemePreviewSurface, { preset: comparisonSummary, colorScheme })
|
|
1124
|
+
] }) }) }, comparisonPreviewKey) : null
|
|
1125
|
+
] })
|
|
1126
|
+
}
|
|
1127
|
+
),
|
|
1128
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1129
|
+
ReferenceSection,
|
|
1130
|
+
{
|
|
1131
|
+
title: "Creator-Authored Experience Boundary",
|
|
1132
|
+
description: "Creator-authored expression is allowed only through the sanctioned theme helpers and narrow exception process.",
|
|
1133
|
+
tone: "supporting",
|
|
1134
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1135
|
+
StateBlock,
|
|
1136
|
+
{
|
|
1137
|
+
variant: "info",
|
|
1138
|
+
title: "Shipped first, custom second",
|
|
1139
|
+
description: "The official site uses shipped presets and the public brand generator first. Product-authored overrides must stay reviewable, testable, and scoped.",
|
|
1140
|
+
compact: true
|
|
1141
|
+
}
|
|
1142
|
+
)
|
|
1143
|
+
}
|
|
1144
|
+
)
|
|
1145
|
+
] });
|
|
1146
|
+
}
|
|
1147
|
+
|
|
475
1148
|
// src/ChoiceChip.tsx
|
|
476
|
-
var
|
|
477
|
-
var
|
|
1149
|
+
var import_core15 = require("@mantine/core");
|
|
1150
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
478
1151
|
function ChoiceChip({
|
|
479
1152
|
label,
|
|
480
1153
|
active = false,
|
|
@@ -491,8 +1164,8 @@ function ChoiceChip({
|
|
|
491
1164
|
};
|
|
492
1165
|
if (href) {
|
|
493
1166
|
const LinkComponent = component || "a";
|
|
494
|
-
return /* @__PURE__ */ (0,
|
|
495
|
-
|
|
1167
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1168
|
+
import_core15.Badge,
|
|
496
1169
|
{
|
|
497
1170
|
component: LinkComponent,
|
|
498
1171
|
href,
|
|
@@ -504,8 +1177,8 @@ function ChoiceChip({
|
|
|
504
1177
|
}
|
|
505
1178
|
if (onClick || component) {
|
|
506
1179
|
const ButtonComponent = component || "button";
|
|
507
|
-
return /* @__PURE__ */ (0,
|
|
508
|
-
|
|
1180
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1181
|
+
import_core15.Badge,
|
|
509
1182
|
{
|
|
510
1183
|
component: ButtonComponent,
|
|
511
1184
|
type: component ? void 0 : "button",
|
|
@@ -516,92 +1189,37 @@ function ChoiceChip({
|
|
|
516
1189
|
}
|
|
517
1190
|
);
|
|
518
1191
|
}
|
|
519
|
-
return /* @__PURE__ */ (0,
|
|
520
|
-
}
|
|
521
|
-
|
|
522
|
-
// src/ActionBar.tsx
|
|
523
|
-
var import_core7 = require("@mantine/core");
|
|
524
|
-
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
525
|
-
function renderSemanticAction(action, slot, vocabularyPacks) {
|
|
526
|
-
const { action: actionId, variant, ariaLabel, ...props } = action;
|
|
527
|
-
const fallbackVariant = slot === "primary" ? "filled" : slot === "secondary" ? "default" : "subtle";
|
|
528
|
-
const config = resolveSemanticActionConfig(actionId, vocabularyPacks);
|
|
529
|
-
const Icon = config.icon;
|
|
530
|
-
const label = getSemanticActionLabel(actionId, void 0, vocabularyPacks);
|
|
531
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
532
|
-
import_core7.Button,
|
|
533
|
-
{
|
|
534
|
-
leftSection: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "1rem", stroke: 1.75 }),
|
|
535
|
-
"aria-label": ariaLabel ?? label,
|
|
536
|
-
variant: variant ?? fallbackVariant,
|
|
537
|
-
...props,
|
|
538
|
-
children: label
|
|
539
|
-
},
|
|
540
|
-
`${slot}-${actionId}`
|
|
541
|
-
);
|
|
542
|
-
}
|
|
543
|
-
function ActionBar({
|
|
544
|
-
primary,
|
|
545
|
-
secondary = [],
|
|
546
|
-
tertiary = [],
|
|
547
|
-
iconOnly = [],
|
|
548
|
-
gap = "sm",
|
|
549
|
-
vocabularyPacks = []
|
|
550
|
-
}) {
|
|
551
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Stack, { gap, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Group, { justify: "space-between", align: "center", gap, wrap: "wrap", children: [
|
|
552
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Group, { gap, wrap: "wrap", children: [
|
|
553
|
-
secondary.map((action) => renderSemanticAction(action, "secondary", vocabularyPacks)),
|
|
554
|
-
tertiary.map((action) => renderSemanticAction(action, "tertiary", vocabularyPacks))
|
|
555
|
-
] }),
|
|
556
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Group, { gap, wrap: "wrap", justify: "flex-end", style: { marginInlineStart: "auto" }, children: [
|
|
557
|
-
iconOnly.map(({ action, ariaLabel, ...props }) => {
|
|
558
|
-
const config = resolveSemanticActionConfig(action, vocabularyPacks);
|
|
559
|
-
const Icon = config.icon;
|
|
560
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
561
|
-
import_core7.ActionIcon,
|
|
562
|
-
{
|
|
563
|
-
variant: "subtle",
|
|
564
|
-
size: "lg",
|
|
565
|
-
"aria-label": ariaLabel ?? getSemanticActionLabel(action, void 0, vocabularyPacks),
|
|
566
|
-
...props,
|
|
567
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "1rem", stroke: 1.75 })
|
|
568
|
-
},
|
|
569
|
-
`icon-${action}`
|
|
570
|
-
);
|
|
571
|
-
}),
|
|
572
|
-
primary ? renderSemanticAction(primary, "primary", vocabularyPacks) : null
|
|
573
|
-
] })
|
|
574
|
-
] }) });
|
|
1192
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_core15.Badge, { ...sharedProps, children: label });
|
|
575
1193
|
}
|
|
576
1194
|
|
|
577
1195
|
// src/MetricCard.tsx
|
|
578
|
-
var
|
|
579
|
-
var
|
|
1196
|
+
var import_core16 = require("@mantine/core");
|
|
1197
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
580
1198
|
var trendColors = {
|
|
581
1199
|
positive: "teal",
|
|
582
1200
|
negative: "red",
|
|
583
1201
|
neutral: "gray"
|
|
584
1202
|
};
|
|
585
1203
|
function MetricCard({ label, value, description, trend, icon, footer }) {
|
|
586
|
-
return /* @__PURE__ */ (0,
|
|
587
|
-
/* @__PURE__ */ (0,
|
|
588
|
-
/* @__PURE__ */ (0,
|
|
589
|
-
/* @__PURE__ */ (0,
|
|
590
|
-
/* @__PURE__ */ (0,
|
|
1204
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: "md", children: [
|
|
1205
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
|
|
1206
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Stack, { gap: 4, children: [
|
|
1207
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", c: "dimmed", fw: 600, children: label }),
|
|
1208
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Title, { order: 3, children: value })
|
|
591
1209
|
] }),
|
|
592
|
-
icon ? /* @__PURE__ */ (0,
|
|
1210
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.ThemeIcon, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null
|
|
593
1211
|
] }),
|
|
594
|
-
description || trend ? /* @__PURE__ */ (0,
|
|
595
|
-
description ? /* @__PURE__ */ (0,
|
|
596
|
-
trend ? /* @__PURE__ */ (0,
|
|
1212
|
+
description || trend ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_core16.Group, { justify: "space-between", align: "center", gap: "sm", children: [
|
|
1213
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Text, { size: "sm", c: "dimmed", flex: 1, children: description }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", {}),
|
|
1214
|
+
trend ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_core16.Badge, { color: trendColors[trend.tone ?? "neutral"], variant: "light", children: trend.label }) : null
|
|
597
1215
|
] }) : null,
|
|
598
1216
|
footer
|
|
599
1217
|
] }) });
|
|
600
1218
|
}
|
|
601
1219
|
|
|
602
1220
|
// src/ProgressCard.tsx
|
|
603
|
-
var
|
|
604
|
-
var
|
|
1221
|
+
var import_core17 = require("@mantine/core");
|
|
1222
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
605
1223
|
function ProgressCard({
|
|
606
1224
|
label,
|
|
607
1225
|
value,
|
|
@@ -610,63 +1228,30 @@ function ProgressCard({
|
|
|
610
1228
|
description,
|
|
611
1229
|
action
|
|
612
1230
|
}) {
|
|
613
|
-
return /* @__PURE__ */ (0,
|
|
614
|
-
/* @__PURE__ */ (0,
|
|
615
|
-
/* @__PURE__ */ (0,
|
|
616
|
-
/* @__PURE__ */ (0,
|
|
617
|
-
/* @__PURE__ */ (0,
|
|
1231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: "md", children: [
|
|
1232
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Group, { justify: "space-between", align: "flex-start", children: [
|
|
1233
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: 4, children: [
|
|
1234
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", c: "dimmed", fw: 600, children: label }),
|
|
1235
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Title, { order: 3, children: value })
|
|
618
1236
|
] }),
|
|
619
1237
|
action
|
|
620
1238
|
] }),
|
|
621
|
-
description ? /* @__PURE__ */ (0,
|
|
622
|
-
/* @__PURE__ */ (0,
|
|
623
|
-
/* @__PURE__ */ (0,
|
|
624
|
-
/* @__PURE__ */ (0,
|
|
625
|
-
/* @__PURE__ */ (0,
|
|
1239
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", c: "dimmed", children: description }) : null,
|
|
1240
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: 6, children: [
|
|
1241
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Group, { justify: "space-between", gap: "sm", children: [
|
|
1242
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", fw: 500, children: progressLabel ?? "Progress" }),
|
|
1243
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Text, { size: "sm", c: "dimmed", children: [
|
|
626
1244
|
Math.round(progress),
|
|
627
1245
|
"%"
|
|
628
1246
|
] })
|
|
629
1247
|
] }),
|
|
630
|
-
/* @__PURE__ */ (0,
|
|
1248
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Progress, { value: progress, radius: "xl", size: "md" })
|
|
631
1249
|
] })
|
|
632
1250
|
] }) });
|
|
633
1251
|
}
|
|
634
1252
|
|
|
635
|
-
// src/SectionPanel.tsx
|
|
636
|
-
var import_core10 = require("@mantine/core");
|
|
637
|
-
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
638
|
-
var toneBackgrounds = {
|
|
639
|
-
default: "var(--mantine-color-body)",
|
|
640
|
-
supporting: "light-dark(var(--mantine-color-gray-0), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))",
|
|
641
|
-
warning: "light-dark(var(--mantine-color-yellow-0), color-mix(in srgb, var(--mantine-color-yellow-9) 18%, var(--mantine-color-body)))",
|
|
642
|
-
critical: "light-dark(var(--mantine-color-red-0), color-mix(in srgb, var(--mantine-color-red-9) 18%, var(--mantine-color-body)))"
|
|
643
|
-
};
|
|
644
|
-
function SectionPanel({
|
|
645
|
-
title,
|
|
646
|
-
description,
|
|
647
|
-
action,
|
|
648
|
-
children,
|
|
649
|
-
tone = "default",
|
|
650
|
-
id,
|
|
651
|
-
divided = true
|
|
652
|
-
}) {
|
|
653
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Paper, { id, withBorder: true, radius: "xl", p: "lg", style: { background: toneBackgrounds[tone] }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Stack, { gap: "md", children: [
|
|
654
|
-
title || description || action ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
|
|
655
|
-
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
|
|
656
|
-
title || description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Stack, { gap: 4, children: [
|
|
657
|
-
title ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Title, { order: 3, children: title }) : null,
|
|
658
|
-
description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Text, { size: "sm", c: "dimmed", children: description }) : null
|
|
659
|
-
] }) : null,
|
|
660
|
-
action
|
|
661
|
-
] }),
|
|
662
|
-
divided ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Divider, {}) : null
|
|
663
|
-
] }) : null,
|
|
664
|
-
children
|
|
665
|
-
] }) });
|
|
666
|
-
}
|
|
667
|
-
|
|
668
1253
|
// src/ConsumerSection.tsx
|
|
669
|
-
var
|
|
1254
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
670
1255
|
function ConsumerSection({
|
|
671
1256
|
title,
|
|
672
1257
|
description,
|
|
@@ -674,23 +1259,23 @@ function ConsumerSection({
|
|
|
674
1259
|
children,
|
|
675
1260
|
tone = "default"
|
|
676
1261
|
}) {
|
|
677
|
-
return /* @__PURE__ */ (0,
|
|
1262
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SectionPanel, { title, description, action, tone, children });
|
|
678
1263
|
}
|
|
679
1264
|
|
|
680
1265
|
// src/ConsumerDashboardGrid.tsx
|
|
681
|
-
var
|
|
682
|
-
var
|
|
1266
|
+
var import_core18 = require("@mantine/core");
|
|
1267
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
683
1268
|
function ConsumerDashboardGrid({
|
|
684
1269
|
children,
|
|
685
1270
|
columns = 3
|
|
686
1271
|
}) {
|
|
687
|
-
return /* @__PURE__ */ (0,
|
|
1272
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_core18.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children });
|
|
688
1273
|
}
|
|
689
1274
|
|
|
690
1275
|
// src/GameBoardTile.tsx
|
|
691
|
-
var
|
|
1276
|
+
var import_core19 = require("@mantine/core");
|
|
692
1277
|
var import_hooks = require("@mantine/hooks");
|
|
693
|
-
var
|
|
1278
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
694
1279
|
function GameBoardTile({
|
|
695
1280
|
face,
|
|
696
1281
|
revealed,
|
|
@@ -699,12 +1284,12 @@ function GameBoardTile({
|
|
|
699
1284
|
onPress,
|
|
700
1285
|
highlightColor
|
|
701
1286
|
}) {
|
|
702
|
-
const theme = (0,
|
|
1287
|
+
const theme = (0, import_core19.useMantineTheme)();
|
|
703
1288
|
const reduceMotion = (0, import_hooks.useMediaQuery)("(prefers-reduced-motion: reduce)");
|
|
704
1289
|
const highlighted = revealed && !matched;
|
|
705
1290
|
const revealBg = highlightColor ?? (typeof theme.primaryColor === "string" ? `${theme.primaryColor}.5` : "violet.5");
|
|
706
|
-
return /* @__PURE__ */ (0,
|
|
707
|
-
|
|
1291
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.UnstyledButton, { w: "100%", disabled, onClick: onPress, "aria-pressed": revealed, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1292
|
+
import_core19.Paper,
|
|
708
1293
|
{
|
|
709
1294
|
withBorder: true,
|
|
710
1295
|
radius: "md",
|
|
@@ -719,14 +1304,14 @@ function GameBoardTile({
|
|
|
719
1304
|
transform: reduceMotion || !highlighted ? "scale(1)" : "scale(1.02)"
|
|
720
1305
|
}
|
|
721
1306
|
},
|
|
722
|
-
children: /* @__PURE__ */ (0,
|
|
1307
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Center, { h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core19.Text, { size: "xl", fw: 700, children: face }) })
|
|
723
1308
|
}
|
|
724
1309
|
) });
|
|
725
1310
|
}
|
|
726
1311
|
|
|
727
1312
|
// src/EditorialCard.tsx
|
|
728
|
-
var
|
|
729
|
-
var
|
|
1313
|
+
var import_core20 = require("@mantine/core");
|
|
1314
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
730
1315
|
var tonePalette = {
|
|
731
1316
|
default: {
|
|
732
1317
|
accent: "violet",
|
|
@@ -746,8 +1331,8 @@ var tonePalette = {
|
|
|
746
1331
|
}
|
|
747
1332
|
};
|
|
748
1333
|
function EditorialMediaFallback({ compact }) {
|
|
749
|
-
return /* @__PURE__ */ (0,
|
|
750
|
-
|
|
1334
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.AspectRatio, { ratio: compact ? 16 / 10 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1335
|
+
import_core20.Box,
|
|
751
1336
|
{
|
|
752
1337
|
style: {
|
|
753
1338
|
display: "grid",
|
|
@@ -757,7 +1342,7 @@ function EditorialMediaFallback({ compact }) {
|
|
|
757
1342
|
background: "var(--mantine-color-gray-0)",
|
|
758
1343
|
borderRadius: "var(--mantine-radius-md)"
|
|
759
1344
|
},
|
|
760
|
-
children: /* @__PURE__ */ (0,
|
|
1345
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
|
|
761
1346
|
}
|
|
762
1347
|
) });
|
|
763
1348
|
}
|
|
@@ -780,8 +1365,8 @@ function EditorialCard({
|
|
|
780
1365
|
const featured = variant === "featured";
|
|
781
1366
|
const palette = tonePalette[tone];
|
|
782
1367
|
const interactiveProps = href ? { component: "a", href } : onClick ? { component: "button", onClick, type: "button" } : {};
|
|
783
|
-
return /* @__PURE__ */ (0,
|
|
784
|
-
|
|
1368
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
1369
|
+
import_core20.Card,
|
|
785
1370
|
{
|
|
786
1371
|
className: classNames?.root,
|
|
787
1372
|
withBorder: true,
|
|
@@ -795,21 +1380,21 @@ function EditorialCard({
|
|
|
795
1380
|
cursor: href || onClick ? "pointer" : "default"
|
|
796
1381
|
},
|
|
797
1382
|
children: [
|
|
798
|
-
/* @__PURE__ */ (0,
|
|
799
|
-
/* @__PURE__ */ (0,
|
|
800
|
-
/* @__PURE__ */ (0,
|
|
801
|
-
/* @__PURE__ */ (0,
|
|
802
|
-
eyebrow ? /* @__PURE__ */ (0,
|
|
803
|
-
/* @__PURE__ */ (0,
|
|
1383
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Card.Section, { className: classNames?.media, children: media ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(EditorialMediaFallback, { compact }) }),
|
|
1384
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Stack, { gap: "md", p: compact ? "md" : "lg", className: classNames?.body, children: [
|
|
1385
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
|
|
1386
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Stack, { gap: 4, flex: 1, children: [
|
|
1387
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Text, { size: "xs", fw: 700, c: "dimmed", children: eyebrow }) : null,
|
|
1388
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Title, { order: compact ? 4 : 3, className: classNames?.title, children: title })
|
|
804
1389
|
] }),
|
|
805
|
-
badge ? typeof badge === "string" ? /* @__PURE__ */ (0,
|
|
1390
|
+
badge ? typeof badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Badge, { color: palette.accent, variant: "light", children: badge }) : badge : null
|
|
806
1391
|
] }),
|
|
807
|
-
description ? /* @__PURE__ */ (0,
|
|
808
|
-
meta ? /* @__PURE__ */ (0,
|
|
809
|
-
href || onClick || ctaLabel ? /* @__PURE__ */ (0,
|
|
810
|
-
/* @__PURE__ */ (0,
|
|
811
|
-
/* @__PURE__ */ (0,
|
|
812
|
-
|
|
1392
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Text, { size: "sm", c: "dimmed", children: description }) : null,
|
|
1393
|
+
meta ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Text, { size: "sm", c: "dimmed", className: classNames?.meta, children: meta }) : null,
|
|
1394
|
+
href || onClick || ctaLabel ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_core20.Group, { gap: 6, c: `${palette.accent}.7`, className: classNames?.action, children: [
|
|
1395
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_core20.Text, { fw: 600, size: "sm", children: ctaLabel }),
|
|
1396
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1397
|
+
import_core20.Anchor,
|
|
813
1398
|
{
|
|
814
1399
|
component: "span",
|
|
815
1400
|
underline: "never",
|
|
@@ -826,8 +1411,8 @@ function EditorialCard({
|
|
|
826
1411
|
}
|
|
827
1412
|
|
|
828
1413
|
// src/ProductCard.tsx
|
|
829
|
-
var
|
|
830
|
-
var
|
|
1414
|
+
var import_core21 = require("@mantine/core");
|
|
1415
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
831
1416
|
function ProductCard({
|
|
832
1417
|
title,
|
|
833
1418
|
description,
|
|
@@ -840,39 +1425,39 @@ function ProductCard({
|
|
|
840
1425
|
footer
|
|
841
1426
|
}) {
|
|
842
1427
|
const MoreIcon = GdsIcons.Menu;
|
|
843
|
-
return /* @__PURE__ */ (0,
|
|
1428
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Stack, { gap: "md", children: [
|
|
844
1429
|
media,
|
|
845
|
-
/* @__PURE__ */ (0,
|
|
846
|
-
/* @__PURE__ */ (0,
|
|
847
|
-
icon ? /* @__PURE__ */ (0,
|
|
848
|
-
/* @__PURE__ */ (0,
|
|
849
|
-
/* @__PURE__ */ (0,
|
|
850
|
-
description ? /* @__PURE__ */ (0,
|
|
1430
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
|
|
1431
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Group, { align: "flex-start", gap: "sm", wrap: "nowrap", children: [
|
|
1432
|
+
icon ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.ThemeIcon, { variant: "light", size: "xl", radius: "xl", "aria-hidden": true, children: icon }) : null,
|
|
1433
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Stack, { gap: 4, children: [
|
|
1434
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Title, { order: 4, children: title }),
|
|
1435
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Text, { size: "sm", c: "dimmed", lineClamp: 3, children: description }) : null
|
|
851
1436
|
] })
|
|
852
1437
|
] }),
|
|
853
|
-
/* @__PURE__ */ (0,
|
|
854
|
-
typeof status === "string" ? /* @__PURE__ */ (0,
|
|
855
|
-
secondaryActions.length ? /* @__PURE__ */ (0,
|
|
856
|
-
/* @__PURE__ */ (0,
|
|
857
|
-
/* @__PURE__ */ (0,
|
|
858
|
-
(action) => action.href ? /* @__PURE__ */ (0,
|
|
1438
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Group, { gap: "xs", align: "center", wrap: "nowrap", children: [
|
|
1439
|
+
typeof status === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Badge, { variant: "light", children: status }) : status,
|
|
1440
|
+
secondaryActions.length ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Menu, { position: "bottom-end", withinPortal: true, children: [
|
|
1441
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.ActionIcon, { variant: "subtle", "aria-label": "More actions", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MoreIcon, { size: "1rem" }) }) }),
|
|
1442
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Menu.Dropdown, { children: secondaryActions.map(
|
|
1443
|
+
(action) => action.href ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Menu.Item, { component: "a", href: action.href, color: action.color, children: action.label }, action.label) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Menu.Item, { onClick: action.onClick, color: action.color, children: action.label }, action.label)
|
|
859
1444
|
) })
|
|
860
1445
|
] }) : null
|
|
861
1446
|
] })
|
|
862
1447
|
] }),
|
|
863
|
-
metadata.length ? /* @__PURE__ */ (0,
|
|
864
|
-
/* @__PURE__ */ (0,
|
|
865
|
-
/* @__PURE__ */ (0,
|
|
1448
|
+
metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Stack, { gap: 6, children: metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core21.Group, { justify: "space-between", gap: "sm", children: [
|
|
1449
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Text, { size: "sm", c: "dimmed", children: item.label }),
|
|
1450
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Text, { size: "sm", fw: 500, ta: "right", children: item.value })
|
|
866
1451
|
] }, item.label)) }) : null,
|
|
867
|
-
primaryAction ? /* @__PURE__ */ (0,
|
|
1452
|
+
primaryAction ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core21.Group, { justify: "space-between", children: primaryAction }) : null,
|
|
868
1453
|
footer
|
|
869
1454
|
] }) });
|
|
870
1455
|
}
|
|
871
1456
|
|
|
872
1457
|
// src/PublicProductCard.tsx
|
|
873
|
-
var
|
|
874
|
-
var
|
|
875
|
-
var
|
|
1458
|
+
var import_react3 = require("react");
|
|
1459
|
+
var import_core22 = require("@mantine/core");
|
|
1460
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
876
1461
|
var stateConfig = {
|
|
877
1462
|
available: { label: "Available", color: "teal" },
|
|
878
1463
|
limited: { label: "Limited", color: "yellow" },
|
|
@@ -880,38 +1465,38 @@ var stateConfig = {
|
|
|
880
1465
|
preorder: { label: "Preorder", color: "violet" }
|
|
881
1466
|
};
|
|
882
1467
|
function enhanceAction(action, disabled) {
|
|
883
|
-
if (!(0,
|
|
1468
|
+
if (!(0, import_react3.isValidElement)(action)) {
|
|
884
1469
|
return action;
|
|
885
1470
|
}
|
|
886
|
-
return (0,
|
|
1471
|
+
return (0, import_react3.cloneElement)(action, {
|
|
887
1472
|
disabled: disabled || Boolean(action.props.disabled),
|
|
888
1473
|
"aria-disabled": disabled || void 0
|
|
889
1474
|
});
|
|
890
1475
|
}
|
|
891
1476
|
function ImageFallback({ compact }) {
|
|
892
|
-
return /* @__PURE__ */ (0,
|
|
893
|
-
|
|
1477
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.AspectRatio, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1478
|
+
import_core22.ThemeIcon,
|
|
894
1479
|
{
|
|
895
1480
|
size: "100%",
|
|
896
1481
|
radius: "md",
|
|
897
1482
|
variant: "light",
|
|
898
1483
|
color: "gray",
|
|
899
1484
|
"aria-label": "No product image available",
|
|
900
|
-
children: /* @__PURE__ */ (0,
|
|
1485
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GdsIcons.Gallery, { size: compact ? "1.5rem" : "2rem" })
|
|
901
1486
|
}
|
|
902
1487
|
) });
|
|
903
1488
|
}
|
|
904
1489
|
function LoadingCard({ compact }) {
|
|
905
|
-
return /* @__PURE__ */ (0,
|
|
906
|
-
/* @__PURE__ */ (0,
|
|
907
|
-
/* @__PURE__ */ (0,
|
|
908
|
-
/* @__PURE__ */ (0,
|
|
909
|
-
/* @__PURE__ */ (0,
|
|
910
|
-
/* @__PURE__ */ (0,
|
|
1490
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: "md", children: [
|
|
1491
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.AspectRatio, { ratio: compact ? 16 / 9 : 4 / 3, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Skeleton, { radius: "md" }) }),
|
|
1492
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: "xs", children: [
|
|
1493
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Skeleton, { height: 20, radius: "sm", width: "70%" }),
|
|
1494
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Skeleton, { height: 14, radius: "sm", width: "100%" }),
|
|
1495
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Skeleton, { height: 14, radius: "sm", width: "85%" })
|
|
911
1496
|
] }),
|
|
912
|
-
/* @__PURE__ */ (0,
|
|
913
|
-
/* @__PURE__ */ (0,
|
|
914
|
-
/* @__PURE__ */ (0,
|
|
1497
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", align: "center", children: [
|
|
1498
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Skeleton, { height: 18, radius: "sm", width: 72 }),
|
|
1499
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Skeleton, { height: 36, radius: "md", width: 120 })
|
|
915
1500
|
] })
|
|
916
1501
|
] }) });
|
|
917
1502
|
}
|
|
@@ -934,7 +1519,7 @@ function PublicProductCard({
|
|
|
934
1519
|
disabled = false
|
|
935
1520
|
}) {
|
|
936
1521
|
if (loading) {
|
|
937
|
-
return /* @__PURE__ */ (0,
|
|
1522
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LoadingCard, { compact });
|
|
938
1523
|
}
|
|
939
1524
|
const isActionDisabled = disabled || state === "sold-out";
|
|
940
1525
|
const resolvedPrimaryAction = enhanceAction(primaryAction, isActionDisabled);
|
|
@@ -947,45 +1532,45 @@ function PublicProductCard({
|
|
|
947
1532
|
const pickupHelper = helperKind === "pickup" ? helperText : pickupNote;
|
|
948
1533
|
const inventoryHelper = helperKind === "inventory" ? helperText : inventoryNote;
|
|
949
1534
|
const hasSupportingRegion = Boolean(price || supportingHelper || pickupHelper || inventoryHelper);
|
|
950
|
-
return /* @__PURE__ */ (0,
|
|
951
|
-
image ?? /* @__PURE__ */ (0,
|
|
952
|
-
/* @__PURE__ */ (0,
|
|
953
|
-
/* @__PURE__ */ (0,
|
|
954
|
-
/* @__PURE__ */ (0,
|
|
955
|
-
description ? /* @__PURE__ */ (0,
|
|
1535
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: compact ? "sm" : "md", children: [
|
|
1536
|
+
image ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ImageFallback, { compact }),
|
|
1537
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", gap: "sm", children: [
|
|
1538
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
|
|
1539
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Title, { order: compact ? 5 : 4, lineClamp: 2, children: title }),
|
|
1540
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
|
|
956
1541
|
] }),
|
|
957
|
-
/* @__PURE__ */ (0,
|
|
1542
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label })
|
|
958
1543
|
] }),
|
|
959
|
-
hasSupportingRegion ? /* @__PURE__ */ (0,
|
|
960
|
-
/* @__PURE__ */ (0,
|
|
961
|
-
price ? /* @__PURE__ */ (0,
|
|
962
|
-
supportingHelper ? /* @__PURE__ */ (0,
|
|
1544
|
+
hasSupportingRegion ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", align: "flex-end", gap: "sm", wrap: "nowrap", children: [
|
|
1545
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
|
|
1546
|
+
price ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { fw: 700, size: compact ? "md" : "lg", children: price }) : null,
|
|
1547
|
+
supportingHelper ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "xs", c: "dimmed", children: supportingHelper }) : null
|
|
963
1548
|
] }),
|
|
964
1549
|
resolvedPrimaryAction
|
|
965
|
-
] }) : resolvedPrimaryAction ? /* @__PURE__ */ (0,
|
|
966
|
-
pickupHelper || inventoryHelper || metadata.length ? /* @__PURE__ */ (0,
|
|
967
|
-
pickupHelper ? /* @__PURE__ */ (0,
|
|
968
|
-
/* @__PURE__ */ (0,
|
|
969
|
-
/* @__PURE__ */ (0,
|
|
1550
|
+
] }) : resolvedPrimaryAction ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Group, { justify: "flex-end", children: resolvedPrimaryAction }) : null,
|
|
1551
|
+
pickupHelper || inventoryHelper || metadata.length ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Stack, { gap: 6, children: [
|
|
1552
|
+
pickupHelper ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", gap: "sm", children: [
|
|
1553
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", c: "dimmed", children: "Pickup" }),
|
|
1554
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", fw: 500, ta: "right", children: pickupHelper })
|
|
970
1555
|
] }) : null,
|
|
971
|
-
inventoryHelper ? /* @__PURE__ */ (0,
|
|
972
|
-
/* @__PURE__ */ (0,
|
|
973
|
-
/* @__PURE__ */ (0,
|
|
1556
|
+
inventoryHelper ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", gap: "sm", children: [
|
|
1557
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", c: "dimmed", children: "Availability" }),
|
|
1558
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", fw: 500, ta: "right", children: inventoryHelper })
|
|
974
1559
|
] }) : null,
|
|
975
|
-
metadata.map((item) => /* @__PURE__ */ (0,
|
|
976
|
-
/* @__PURE__ */ (0,
|
|
977
|
-
/* @__PURE__ */ (0,
|
|
1560
|
+
metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_core22.Group, { justify: "space-between", gap: "sm", children: [
|
|
1561
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", c: "dimmed", children: item.label }),
|
|
1562
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Text, { size: "sm", fw: 500, ta: "right", children: item.value })
|
|
978
1563
|
] }, item.label))
|
|
979
1564
|
] }) : null,
|
|
980
|
-
resolvedSecondaryAction ? /* @__PURE__ */ (0,
|
|
1565
|
+
resolvedSecondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_core22.Group, { justify: "flex-end", children: resolvedSecondaryAction }) : null
|
|
981
1566
|
] }) });
|
|
982
1567
|
}
|
|
983
1568
|
|
|
984
1569
|
// src/PublicFoodCard.tsx
|
|
985
|
-
var
|
|
986
|
-
var
|
|
987
|
-
var
|
|
988
|
-
var
|
|
1570
|
+
var import_react4 = require("react");
|
|
1571
|
+
var import_core23 = require("@mantine/core");
|
|
1572
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1573
|
+
var ratioMap2 = {
|
|
989
1574
|
square: 1,
|
|
990
1575
|
dish: 4 / 3,
|
|
991
1576
|
landscape: 16 / 9
|
|
@@ -1004,28 +1589,28 @@ var markerToneMap = {
|
|
|
1004
1589
|
muted: "dark"
|
|
1005
1590
|
};
|
|
1006
1591
|
function enhanceAction2(action, disabled) {
|
|
1007
|
-
if (!(0,
|
|
1592
|
+
if (!(0, import_react4.isValidElement)(action)) {
|
|
1008
1593
|
return action;
|
|
1009
1594
|
}
|
|
1010
|
-
return (0,
|
|
1595
|
+
return (0, import_react4.cloneElement)(action, {
|
|
1011
1596
|
disabled: disabled || Boolean(action.props.disabled),
|
|
1012
1597
|
"aria-disabled": disabled || void 0
|
|
1013
1598
|
});
|
|
1014
1599
|
}
|
|
1015
1600
|
function FoodImageFallback({ mediaRatio }) {
|
|
1016
|
-
return /* @__PURE__ */ (0,
|
|
1601
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.AspectRatio, { ratio: ratioMap2[mediaRatio], children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.ThemeIcon, { size: "100%", radius: "md", variant: "light", color: "gray", "aria-label": "No food image available", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(GdsIcons.Gallery, { size: "2rem" }) }) });
|
|
1017
1602
|
}
|
|
1018
1603
|
function LoadingFoodCard({ mediaRatio }) {
|
|
1019
|
-
return /* @__PURE__ */ (0,
|
|
1020
|
-
/* @__PURE__ */ (0,
|
|
1021
|
-
/* @__PURE__ */ (0,
|
|
1022
|
-
/* @__PURE__ */ (0,
|
|
1023
|
-
/* @__PURE__ */ (0,
|
|
1024
|
-
/* @__PURE__ */ (0,
|
|
1604
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Stack, { gap: "md", children: [
|
|
1605
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.AspectRatio, { ratio: ratioMap2[mediaRatio], children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Skeleton, { radius: "md" }) }),
|
|
1606
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Stack, { gap: "xs", children: [
|
|
1607
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Skeleton, { height: 20, radius: "sm", width: "72%" }),
|
|
1608
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Skeleton, { height: 14, radius: "sm", width: "96%" }),
|
|
1609
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Skeleton, { height: 14, radius: "sm", width: "78%" })
|
|
1025
1610
|
] }),
|
|
1026
|
-
/* @__PURE__ */ (0,
|
|
1027
|
-
/* @__PURE__ */ (0,
|
|
1028
|
-
/* @__PURE__ */ (0,
|
|
1611
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { justify: "space-between", align: "center", children: [
|
|
1612
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Skeleton, { height: 18, radius: "sm", width: 96 }),
|
|
1613
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Skeleton, { height: 36, radius: "md", width: 112 })
|
|
1029
1614
|
] })
|
|
1030
1615
|
] }) });
|
|
1031
1616
|
}
|
|
@@ -1049,54 +1634,54 @@ function PublicFoodCard({
|
|
|
1049
1634
|
disabled = false
|
|
1050
1635
|
}) {
|
|
1051
1636
|
if (loading) {
|
|
1052
|
-
return /* @__PURE__ */ (0,
|
|
1637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LoadingFoodCard, { mediaRatio });
|
|
1053
1638
|
}
|
|
1054
1639
|
const stateBadge = stateConfig2[state];
|
|
1055
1640
|
const isActionDisabled = disabled || state === "sold-out" || state === "coming-soon";
|
|
1056
1641
|
const resolvedPrimaryAction = enhanceAction2(primaryAction, isActionDisabled);
|
|
1057
1642
|
const resolvedSecondaryAction = enhanceAction2(secondaryAction, disabled);
|
|
1058
|
-
return /* @__PURE__ */ (0,
|
|
1059
|
-
image ?? /* @__PURE__ */ (0,
|
|
1060
|
-
markers.length > 0 || quantityHint ? /* @__PURE__ */ (0,
|
|
1061
|
-
/* @__PURE__ */ (0,
|
|
1062
|
-
quantityHint ? /* @__PURE__ */ (0,
|
|
1643
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Stack, { gap: "md", children: [
|
|
1644
|
+
image ?? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(FoodImageFallback, { mediaRatio }),
|
|
1645
|
+
markers.length > 0 || quantityHint ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { justify: "space-between", align: "center", wrap: "wrap", gap: "xs", children: [
|
|
1646
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Group, { gap: "xs", wrap: "wrap", children: markers.map((marker) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Badge, { variant: "light", color: markerToneMap[marker.tone ?? "default"], children: marker.label }, marker.id)) }),
|
|
1647
|
+
quantityHint ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "xs", fw: 600, c: "dimmed", children: quantityHint }) : null
|
|
1063
1648
|
] }) : null,
|
|
1064
|
-
/* @__PURE__ */ (0,
|
|
1065
|
-
/* @__PURE__ */ (0,
|
|
1066
|
-
/* @__PURE__ */ (0,
|
|
1067
|
-
description ? /* @__PURE__ */ (0,
|
|
1649
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "nowrap", children: [
|
|
1650
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Stack, { gap: 4, style: { minWidth: 0, flex: 1 }, children: [
|
|
1651
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Title, { order: 4, lineClamp: 2, children: title }),
|
|
1652
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", c: "dimmed", lineClamp: 3, children: description }) : null
|
|
1068
1653
|
] }),
|
|
1069
|
-
/* @__PURE__ */ (0,
|
|
1654
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label })
|
|
1070
1655
|
] }),
|
|
1071
|
-
/* @__PURE__ */ (0,
|
|
1072
|
-
/* @__PURE__ */ (0,
|
|
1073
|
-
price ? /* @__PURE__ */ (0,
|
|
1074
|
-
priceNote ? /* @__PURE__ */ (0,
|
|
1075
|
-
helperText ? /* @__PURE__ */ (0,
|
|
1656
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { justify: "space-between", align: "flex-end", gap: "sm", wrap: "nowrap", children: [
|
|
1657
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Stack, { gap: 2, style: { minWidth: 0, flex: 1 }, children: [
|
|
1658
|
+
price ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { fw: 800, size: "lg", children: price }) : null,
|
|
1659
|
+
priceNote ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "xs", c: "dimmed", children: priceNote }) : null,
|
|
1660
|
+
helperText ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", c: "dimmed", children: helperText }) : null
|
|
1076
1661
|
] }),
|
|
1077
1662
|
resolvedPrimaryAction
|
|
1078
1663
|
] }),
|
|
1079
|
-
pickupNote || freshnessNote || metadata.length > 0 ? /* @__PURE__ */ (0,
|
|
1080
|
-
pickupNote ? /* @__PURE__ */ (0,
|
|
1081
|
-
/* @__PURE__ */ (0,
|
|
1082
|
-
/* @__PURE__ */ (0,
|
|
1664
|
+
pickupNote || freshnessNote || metadata.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Stack, { gap: 6, children: [
|
|
1665
|
+
pickupNote ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
|
|
1666
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", c: "dimmed", children: "Pickup" }),
|
|
1667
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", fw: 500, ta: "right", children: pickupNote })
|
|
1083
1668
|
] }) : null,
|
|
1084
|
-
freshnessNote ? /* @__PURE__ */ (0,
|
|
1085
|
-
/* @__PURE__ */ (0,
|
|
1086
|
-
/* @__PURE__ */ (0,
|
|
1669
|
+
freshnessNote ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
|
|
1670
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", c: "dimmed", children: "Freshness" }),
|
|
1671
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", fw: 500, ta: "right", children: freshnessNote })
|
|
1087
1672
|
] }) : null,
|
|
1088
|
-
metadata.map((item) => /* @__PURE__ */ (0,
|
|
1673
|
+
metadata.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_core23.Group, { gap: "xs", wrap: "nowrap", children: [
|
|
1089
1674
|
item.icon,
|
|
1090
|
-
/* @__PURE__ */ (0,
|
|
1675
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Text, { size: "sm", c: "dimmed", children: item.label })
|
|
1091
1676
|
] }) }, item.id))
|
|
1092
1677
|
] }) : null,
|
|
1093
|
-
resolvedSecondaryAction ? /* @__PURE__ */ (0,
|
|
1678
|
+
resolvedSecondaryAction ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_core23.Group, { justify: "flex-end", children: resolvedSecondaryAction }) : null
|
|
1094
1679
|
] }) });
|
|
1095
1680
|
}
|
|
1096
1681
|
|
|
1097
1682
|
// src/FoodMenuSection.tsx
|
|
1098
|
-
var
|
|
1099
|
-
var
|
|
1683
|
+
var import_core24 = require("@mantine/core");
|
|
1684
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1100
1685
|
function FoodMenuSection({
|
|
1101
1686
|
title,
|
|
1102
1687
|
description,
|
|
@@ -1108,151 +1693,50 @@ function FoodMenuSection({
|
|
|
1108
1693
|
columns = 3,
|
|
1109
1694
|
showEmptyCategories = false
|
|
1110
1695
|
}) {
|
|
1111
|
-
const normalizedCategories = (categories ?? []).filter(Boolean);
|
|
1112
|
-
const visibleCategories = showEmptyCategories ? normalizedCategories : normalizedCategories.filter((category) => category.items.length > 0);
|
|
1113
|
-
if (!visibleCategories.length) {
|
|
1114
|
-
return emptyState ? /* @__PURE__ */ (0,
|
|
1115
|
-
EmptyState,
|
|
1116
|
-
{
|
|
1117
|
-
title: "No active menu available",
|
|
1118
|
-
description: "Publish grouped menu categories here when the current weekly or seasonal menu is ready."
|
|
1119
|
-
}
|
|
1120
|
-
);
|
|
1121
|
-
}
|
|
1122
|
-
return /* @__PURE__ */ (0,
|
|
1123
|
-
/* @__PURE__ */ (0,
|
|
1124
|
-
/* @__PURE__ */ (0,
|
|
1125
|
-
eyebrow ? /* @__PURE__ */ (0,
|
|
1126
|
-
/* @__PURE__ */ (0,
|
|
1127
|
-
description ? /* @__PURE__ */ (0,
|
|
1128
|
-
sectionNote ? /* @__PURE__ */ (0,
|
|
1129
|
-
] }),
|
|
1130
|
-
action
|
|
1131
|
-
] }),
|
|
1132
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Stack, { gap: "xl", children: visibleCategories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: "md", children: [
|
|
1133
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_core17.Stack, { gap: 4, children: [
|
|
1134
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Title, { order: 3, children: category.title }),
|
|
1135
|
-
category.description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", c: "dimmed", children: category.description }) : null,
|
|
1136
|
-
category.helperNote ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.Text, { size: "sm", c: "dimmed", children: category.helperNote }) : null
|
|
1137
|
-
] }),
|
|
1138
|
-
category.items.length ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_core17.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: category.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PublicFoodCard, { ...item }, item.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1139
|
-
EmptyState,
|
|
1140
|
-
{
|
|
1141
|
-
title: "No items in this category",
|
|
1142
|
-
description: "This category is defined, but it does not currently have any visible dishes or bundles."
|
|
1143
|
-
}
|
|
1144
|
-
)
|
|
1145
|
-
] }, category.id)) })
|
|
1146
|
-
] }) });
|
|
1147
|
-
}
|
|
1148
|
-
|
|
1149
|
-
// src/ListingCard.tsx
|
|
1150
|
-
var import_core18 = require("@mantine/core");
|
|
1151
|
-
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1152
|
-
var ratioMap2 = {
|
|
1153
|
-
"1:1": 1,
|
|
1154
|
-
"4:3": 4 / 3,
|
|
1155
|
-
"16:9": 16 / 9
|
|
1156
|
-
};
|
|
1157
|
-
var toneColorMap = {
|
|
1158
|
-
default: void 0,
|
|
1159
|
-
positive: "teal",
|
|
1160
|
-
warning: "orange",
|
|
1161
|
-
muted: "gray"
|
|
1162
|
-
};
|
|
1163
|
-
function ListingImageFallback({ mediaRatio }) {
|
|
1164
|
-
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.AspectRatio, { ratio: ratioMap2[mediaRatio], children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1165
|
-
import_core18.ThemeIcon,
|
|
1166
|
-
{
|
|
1167
|
-
size: "100%",
|
|
1168
|
-
radius: "md",
|
|
1169
|
-
variant: "light",
|
|
1170
|
-
color: "gray",
|
|
1171
|
-
"aria-label": "No listing image available",
|
|
1172
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(GdsIcons.Gallery, { size: "2rem" })
|
|
1173
|
-
}
|
|
1174
|
-
) });
|
|
1175
|
-
}
|
|
1176
|
-
function ListingAffordance({ affordance }) {
|
|
1177
|
-
const config = GdsVocabulary[affordance.action];
|
|
1178
|
-
const Icon = config.icon;
|
|
1179
|
-
const label = affordance.ariaLabel ?? getSemanticActionLabel(affordance.action);
|
|
1180
|
-
if (affordance.href) {
|
|
1181
|
-
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1182
|
-
import_core18.ActionIcon,
|
|
1183
|
-
{
|
|
1184
|
-
component: "a",
|
|
1185
|
-
href: affordance.href,
|
|
1186
|
-
variant: "subtle",
|
|
1187
|
-
size: "lg",
|
|
1188
|
-
"aria-label": label,
|
|
1189
|
-
disabled: affordance.disabled,
|
|
1190
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { size: "1rem", stroke: 1.75 })
|
|
1191
|
-
}
|
|
1192
|
-
);
|
|
1193
|
-
}
|
|
1194
|
-
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1195
|
-
import_core18.ActionIcon,
|
|
1196
|
-
{
|
|
1197
|
-
variant: "subtle",
|
|
1198
|
-
size: "lg",
|
|
1199
|
-
"aria-label": label,
|
|
1200
|
-
onClick: affordance.onClick,
|
|
1201
|
-
disabled: affordance.disabled,
|
|
1202
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { size: "1rem", stroke: 1.75 })
|
|
1203
|
-
}
|
|
1204
|
-
);
|
|
1205
|
-
}
|
|
1206
|
-
function ListingCard({
|
|
1207
|
-
title,
|
|
1208
|
-
href,
|
|
1209
|
-
description,
|
|
1210
|
-
image,
|
|
1211
|
-
mediaRatio = "4:3",
|
|
1212
|
-
metadata = [],
|
|
1213
|
-
featured = false,
|
|
1214
|
-
sponsoredDisclosure,
|
|
1215
|
-
price,
|
|
1216
|
-
primaryAction,
|
|
1217
|
-
saveAction,
|
|
1218
|
-
shareAction,
|
|
1219
|
-
compact = false
|
|
1220
|
-
}) {
|
|
1221
|
-
const titleContent = href && typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Text, { component: "a", href, inherit: true, td: "none", children: title }) : title;
|
|
1222
|
-
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Card, { withBorder: true, radius: "lg", padding: compact ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Stack, { gap: compact ? "sm" : "md", children: [
|
|
1223
|
-
image ?? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ListingImageFallback, { mediaRatio }),
|
|
1224
|
-
featured || sponsoredDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Group, { justify: "space-between", gap: "sm", wrap: "wrap", children: [
|
|
1225
|
-
featured ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Badge, { variant: "light", color: "violet", children: "Featured" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", {}),
|
|
1226
|
-
sponsoredDisclosure ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Text, { size: "xs", c: "dimmed", children: sponsoredDisclosure }) : null
|
|
1227
|
-
] }) : null,
|
|
1228
|
-
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_core18.Stack, { gap: 4, children: [
|
|
1229
|
-
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Title, { order: compact ? 5 : 4, lineClamp: 2, children: titleContent }),
|
|
1230
|
-
description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_core18.Text, { size: "sm", c: "dimmed", lineClamp: compact ? 2 : 3, children: description }) : null
|
|
1696
|
+
const normalizedCategories = (categories ?? []).filter(Boolean);
|
|
1697
|
+
const visibleCategories = showEmptyCategories ? normalizedCategories : normalizedCategories.filter((category) => category.items.length > 0);
|
|
1698
|
+
if (!visibleCategories.length) {
|
|
1699
|
+
return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1700
|
+
EmptyState,
|
|
1701
|
+
{
|
|
1702
|
+
title: "No active menu available",
|
|
1703
|
+
description: "Publish grouped menu categories here when the current weekly or seasonal menu is ready."
|
|
1704
|
+
}
|
|
1705
|
+
);
|
|
1706
|
+
}
|
|
1707
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Box, { component: "section", "aria-label": typeof title === "string" ? title : "Food menu section", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Stack, { gap: "xl", children: [
|
|
1708
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
|
|
1709
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Stack, { gap: 4, children: [
|
|
1710
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Text, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
|
|
1711
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Title, { order: 2, children: title }),
|
|
1712
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Text, { size: "sm", c: "dimmed", maw: 760, children: description }) : null,
|
|
1713
|
+
sectionNote ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Text, { size: "sm", c: "dimmed", children: sectionNote }) : null
|
|
1714
|
+
] }),
|
|
1715
|
+
action
|
|
1231
1716
|
] }),
|
|
1232
|
-
|
|
1233
|
-
/* @__PURE__ */ (0,
|
|
1234
|
-
|
|
1235
|
-
/* @__PURE__ */ (0,
|
|
1717
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Stack, { gap: "xl", children: visibleCategories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Stack, { gap: "md", children: [
|
|
1718
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_core24.Stack, { gap: 4, children: [
|
|
1719
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Title, { order: 3, children: category.title }),
|
|
1720
|
+
category.description ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Text, { size: "sm", c: "dimmed", children: category.description }) : null,
|
|
1721
|
+
category.helperNote ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.Text, { size: "sm", c: "dimmed", children: category.helperNote }) : null
|
|
1236
1722
|
] }),
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
] })
|
|
1246
|
-
] })
|
|
1723
|
+
category.items.length ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core24.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: category.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PublicFoodCard, { ...item }, item.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
1724
|
+
EmptyState,
|
|
1725
|
+
{
|
|
1726
|
+
title: "No items in this category",
|
|
1727
|
+
description: "This category is defined, but it does not currently have any visible dishes or bundles."
|
|
1728
|
+
}
|
|
1729
|
+
)
|
|
1730
|
+
] }, category.id)) })
|
|
1247
1731
|
] }) });
|
|
1248
1732
|
}
|
|
1249
1733
|
|
|
1250
1734
|
// src/BrowseSurface.tsx
|
|
1251
|
-
var
|
|
1735
|
+
var import_core26 = require("@mantine/core");
|
|
1252
1736
|
|
|
1253
1737
|
// src/DataToolbar.tsx
|
|
1254
|
-
var
|
|
1255
|
-
var
|
|
1738
|
+
var import_core25 = require("@mantine/core");
|
|
1739
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1256
1740
|
function DataToolbar({
|
|
1257
1741
|
searchSlot,
|
|
1258
1742
|
filterSlot,
|
|
@@ -1261,20 +1745,20 @@ function DataToolbar({
|
|
|
1261
1745
|
createAction,
|
|
1262
1746
|
activeFilters = []
|
|
1263
1747
|
}) {
|
|
1264
|
-
return /* @__PURE__ */ (0,
|
|
1265
|
-
/* @__PURE__ */ (0,
|
|
1266
|
-
/* @__PURE__ */ (0,
|
|
1748
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core25.Stack, { gap: "sm", children: [
|
|
1749
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core25.Group, { justify: "space-between", align: "flex-start", gap: "sm", children: [
|
|
1750
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core25.Group, { flex: 1, align: "flex-start", gap: "sm", children: [
|
|
1267
1751
|
searchSlot,
|
|
1268
1752
|
filterSlot,
|
|
1269
1753
|
sortSlot
|
|
1270
1754
|
] }),
|
|
1271
|
-
/* @__PURE__ */ (0,
|
|
1755
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_core25.Group, { gap: "sm", children: [
|
|
1272
1756
|
resetAction,
|
|
1273
1757
|
createAction
|
|
1274
1758
|
] })
|
|
1275
1759
|
] }),
|
|
1276
|
-
activeFilters.length ? /* @__PURE__ */ (0,
|
|
1277
|
-
|
|
1760
|
+
activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core25.Group, { gap: "xs", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1761
|
+
import_core25.Badge,
|
|
1278
1762
|
{
|
|
1279
1763
|
variant: "light",
|
|
1280
1764
|
rightSection: filter.onRemove ? "\xD7" : void 0,
|
|
@@ -1287,50 +1771,8 @@ function DataToolbar({
|
|
|
1287
1771
|
] });
|
|
1288
1772
|
}
|
|
1289
1773
|
|
|
1290
|
-
// src/StateBlock.tsx
|
|
1291
|
-
var import_core20 = require("@mantine/core");
|
|
1292
|
-
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1293
|
-
var variantConfig = {
|
|
1294
|
-
loading: { color: "violet", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Loader, { size: "sm" }) },
|
|
1295
|
-
empty: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Inbox, { size: "1.1rem" }) },
|
|
1296
|
-
error: { color: "red", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Danger, { size: "1.1rem" }) },
|
|
1297
|
-
permission: { color: "orange", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Verify, { size: "1.1rem" }) },
|
|
1298
|
-
disabled: { color: "gray", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Toggle, { size: "1.1rem" }) },
|
|
1299
|
-
success: { color: "teal", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Success, { size: "1.1rem" }) },
|
|
1300
|
-
info: { color: "blue", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Info, { size: "1.1rem" }) },
|
|
1301
|
-
"not-enough-data": { color: "yellow", icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GdsIcons.Analytics, { size: "1.1rem" }) }
|
|
1302
|
-
};
|
|
1303
|
-
function StateBlock({
|
|
1304
|
-
variant,
|
|
1305
|
-
title,
|
|
1306
|
-
description,
|
|
1307
|
-
action,
|
|
1308
|
-
icon,
|
|
1309
|
-
compact = false
|
|
1310
|
-
}) {
|
|
1311
|
-
const config = variantConfig[variant];
|
|
1312
|
-
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1313
|
-
import_core20.Stack,
|
|
1314
|
-
{
|
|
1315
|
-
align: compact ? "flex-start" : "center",
|
|
1316
|
-
justify: "center",
|
|
1317
|
-
gap: "md",
|
|
1318
|
-
py: compact ? "md" : "xl",
|
|
1319
|
-
ta: compact ? "left" : "center",
|
|
1320
|
-
children: [
|
|
1321
|
-
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.ThemeIcon, { variant: "light", color: config.color, size: compact ? "lg" : "xl", radius: "xl", children: icon ?? config.icon }),
|
|
1322
|
-
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_core20.Stack, { gap: 6, align: compact ? "flex-start" : "center", children: [
|
|
1323
|
-
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Title, { order: compact ? 4 : 3, children: title }),
|
|
1324
|
-
description ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_core20.Text, { c: "dimmed", maw: compact ? void 0 : 480, children: description }) : null
|
|
1325
|
-
] }),
|
|
1326
|
-
action
|
|
1327
|
-
]
|
|
1328
|
-
}
|
|
1329
|
-
);
|
|
1330
|
-
}
|
|
1331
|
-
|
|
1332
1774
|
// src/BrowseSurface.tsx
|
|
1333
|
-
var
|
|
1775
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1334
1776
|
function BrowseSurface({
|
|
1335
1777
|
eyebrow,
|
|
1336
1778
|
title,
|
|
@@ -1364,22 +1806,22 @@ function BrowseSurface({
|
|
|
1364
1806
|
}));
|
|
1365
1807
|
let body = content;
|
|
1366
1808
|
if (loading) {
|
|
1367
|
-
body = /* @__PURE__ */ (0,
|
|
1809
|
+
body = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StateBlock, { variant: "loading", title: loadingTitle, description: loadingDescription, compact: true });
|
|
1368
1810
|
} else if (error) {
|
|
1369
|
-
body = /* @__PURE__ */ (0,
|
|
1811
|
+
body = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StateBlock, { variant: "error", title: errorTitle, description: error, action: errorAction ?? emptyAction, compact: true });
|
|
1370
1812
|
} else if (empty) {
|
|
1371
|
-
body = /* @__PURE__ */ (0,
|
|
1813
|
+
body = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, action: emptyAction, compact: true });
|
|
1372
1814
|
}
|
|
1373
|
-
return /* @__PURE__ */ (0,
|
|
1374
|
-
/* @__PURE__ */ (0,
|
|
1375
|
-
/* @__PURE__ */ (0,
|
|
1376
|
-
/* @__PURE__ */ (0,
|
|
1377
|
-
eyebrow ? /* @__PURE__ */ (0,
|
|
1378
|
-
/* @__PURE__ */ (0,
|
|
1379
|
-
description ? /* @__PURE__ */ (0,
|
|
1815
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "lg", children: [
|
|
1816
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Paper, { withBorder: true, radius: "xl", p: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "lg", children: [
|
|
1817
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Group, { justify: "space-between", align: "flex-start", gap: "md", children: [
|
|
1818
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "xs", maw: 760, children: [
|
|
1819
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "xs", fw: 700, tt: "uppercase", c: "dimmed", style: { letterSpacing: "0.18em" }, children: eyebrow }) : null,
|
|
1820
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Title, { order: 1, children: title }),
|
|
1821
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "lg", c: "dimmed", children: description }) : null
|
|
1380
1822
|
] }),
|
|
1381
|
-
/* @__PURE__ */ (0,
|
|
1382
|
-
typeof resultCount === "number" ? /* @__PURE__ */ (0,
|
|
1823
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { align: "flex-end", gap: "xs", children: [
|
|
1824
|
+
typeof resultCount === "number" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Badge, { size: "lg", radius: "xl", variant: "light", color: "violet", children: [
|
|
1383
1825
|
resultCount,
|
|
1384
1826
|
" ",
|
|
1385
1827
|
resultLabel
|
|
@@ -1387,10 +1829,10 @@ function BrowseSurface({
|
|
|
1387
1829
|
primaryControls
|
|
1388
1830
|
] })
|
|
1389
1831
|
] }),
|
|
1390
|
-
scopeOptions.length ? /* @__PURE__ */ (0,
|
|
1391
|
-
/* @__PURE__ */ (0,
|
|
1392
|
-
/* @__PURE__ */ (0,
|
|
1393
|
-
|
|
1832
|
+
scopeOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "xs", children: [
|
|
1833
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "sm", fw: 600, c: "dimmed", children: scopeLabel }),
|
|
1834
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Group, { gap: "xs", wrap: "wrap", children: scopeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1835
|
+
import_core26.Button,
|
|
1394
1836
|
{
|
|
1395
1837
|
variant: option.active ? "filled" : "default",
|
|
1396
1838
|
color: option.active ? "violet" : "gray",
|
|
@@ -1402,30 +1844,30 @@ function BrowseSurface({
|
|
|
1402
1844
|
option.id
|
|
1403
1845
|
)) })
|
|
1404
1846
|
] }) : null,
|
|
1405
|
-
locationControls ? /* @__PURE__ */ (0,
|
|
1406
|
-
/* @__PURE__ */ (0,
|
|
1847
|
+
locationControls ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "xs", children: [
|
|
1848
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "sm", fw: 600, c: "dimmed", children: "Location" }),
|
|
1407
1849
|
locationControls
|
|
1408
1850
|
] }) : null,
|
|
1409
|
-
toolbar || sortControl ? /* @__PURE__ */ (0,
|
|
1410
|
-
toolbar ? /* @__PURE__ */ (0,
|
|
1851
|
+
toolbar || sortControl ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.SimpleGrid, { cols: { base: 1, lg: sortControl ? 2 : 1 }, spacing: "md", children: [
|
|
1852
|
+
toolbar ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1411
1853
|
DataToolbar,
|
|
1412
1854
|
{
|
|
1413
1855
|
...toolbar,
|
|
1414
1856
|
activeFilters: toolbarFilters.length ? toolbarFilters : toolbar.fallbackActiveFilters
|
|
1415
1857
|
}
|
|
1416
|
-
) : /* @__PURE__ */ (0,
|
|
1417
|
-
sortControl ? /* @__PURE__ */ (0,
|
|
1418
|
-
/* @__PURE__ */ (0,
|
|
1858
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Box, {}),
|
|
1859
|
+
sortControl ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { gap: "xs", align: "stretch", children: [
|
|
1860
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "sm", fw: 600, c: "dimmed", children: "Sort" }),
|
|
1419
1861
|
sortControl
|
|
1420
1862
|
] }) : null
|
|
1421
1863
|
] }) : null,
|
|
1422
|
-
mobileFilters ? /* @__PURE__ */ (0,
|
|
1423
|
-
/* @__PURE__ */ (0,
|
|
1864
|
+
mobileFilters ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_core26.Stack, { hiddenFrom: "lg", gap: "xs", children: [
|
|
1865
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Text, { size: "sm", fw: 600, c: "dimmed", children: "Filters" }),
|
|
1424
1866
|
mobileFilters
|
|
1425
1867
|
] }) : null,
|
|
1426
|
-
filterDrawer ? /* @__PURE__ */ (0,
|
|
1427
|
-
activeFilters.length ? /* @__PURE__ */ (0,
|
|
1428
|
-
|
|
1868
|
+
filterDrawer ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Box, { hiddenFrom: "lg", children: filterDrawer }) : null,
|
|
1869
|
+
activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core26.Group, { gap: "xs", wrap: "wrap", children: activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1870
|
+
import_core26.Badge,
|
|
1429
1871
|
{
|
|
1430
1872
|
variant: "light",
|
|
1431
1873
|
color: "violet",
|
|
@@ -1441,76 +1883,9 @@ function BrowseSurface({
|
|
|
1441
1883
|
] });
|
|
1442
1884
|
}
|
|
1443
1885
|
|
|
1444
|
-
// src/AccentPanel.tsx
|
|
1445
|
-
var import_core22 = require("@mantine/core");
|
|
1446
|
-
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1447
|
-
var toneStyles = {
|
|
1448
|
-
gray: {
|
|
1449
|
-
bg: "light-dark(var(--mantine-color-gray-0), color-mix(in srgb, var(--mantine-color-gray-7) 88%, black))",
|
|
1450
|
-
border: "light-dark(var(--mantine-color-gray-2), color-mix(in srgb, var(--mantine-color-gray-4) 70%, transparent))",
|
|
1451
|
-
color: "light-dark(var(--mantine-color-gray-9), var(--mantine-color-gray-0))"
|
|
1452
|
-
},
|
|
1453
|
-
violet: {
|
|
1454
|
-
bg: "light-dark(var(--mantine-color-violet-0), color-mix(in srgb, var(--mantine-color-violet-9) 70%, black))",
|
|
1455
|
-
border: "light-dark(var(--mantine-color-violet-2), color-mix(in srgb, var(--mantine-color-violet-4) 75%, transparent))",
|
|
1456
|
-
color: "light-dark(var(--mantine-color-violet-9), var(--mantine-color-violet-0))"
|
|
1457
|
-
},
|
|
1458
|
-
green: {
|
|
1459
|
-
bg: "light-dark(var(--mantine-color-green-0), color-mix(in srgb, var(--mantine-color-green-9) 72%, black))",
|
|
1460
|
-
border: "light-dark(var(--mantine-color-green-2), color-mix(in srgb, var(--mantine-color-green-4) 78%, transparent))",
|
|
1461
|
-
color: "light-dark(var(--mantine-color-green-9), var(--mantine-color-green-0))"
|
|
1462
|
-
},
|
|
1463
|
-
red: {
|
|
1464
|
-
bg: "light-dark(var(--mantine-color-red-0), color-mix(in srgb, var(--mantine-color-red-9) 72%, black))",
|
|
1465
|
-
border: "light-dark(var(--mantine-color-red-2), color-mix(in srgb, var(--mantine-color-red-4) 78%, transparent))",
|
|
1466
|
-
color: "light-dark(var(--mantine-color-red-9), var(--mantine-color-red-0))"
|
|
1467
|
-
},
|
|
1468
|
-
amber: {
|
|
1469
|
-
bg: "light-dark(var(--mantine-color-yellow-0), color-mix(in srgb, var(--mantine-color-yellow-8) 78%, black))",
|
|
1470
|
-
border: "light-dark(var(--mantine-color-yellow-3), color-mix(in srgb, var(--mantine-color-yellow-5) 70%, transparent))",
|
|
1471
|
-
color: "light-dark(var(--mantine-color-yellow-9), var(--mantine-color-yellow-0))"
|
|
1472
|
-
},
|
|
1473
|
-
blue: {
|
|
1474
|
-
bg: "light-dark(var(--mantine-color-blue-0), color-mix(in srgb, var(--mantine-color-blue-9) 74%, black))",
|
|
1475
|
-
border: "light-dark(var(--mantine-color-blue-2), color-mix(in srgb, var(--mantine-color-blue-4) 75%, transparent))",
|
|
1476
|
-
color: "light-dark(var(--mantine-color-blue-9), var(--mantine-color-blue-0))"
|
|
1477
|
-
}
|
|
1478
|
-
};
|
|
1479
|
-
function resolveAccentPanelStyles(tone = "violet", variant = "subtle") {
|
|
1480
|
-
const token = toneStyles[tone];
|
|
1481
|
-
if (variant === "soft-outline") {
|
|
1482
|
-
return {
|
|
1483
|
-
backgroundColor: "light-dark(var(--mantine-color-body), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))",
|
|
1484
|
-
border: `1px solid ${token.border}`,
|
|
1485
|
-
color: token.color
|
|
1486
|
-
};
|
|
1487
|
-
}
|
|
1488
|
-
return {
|
|
1489
|
-
backgroundColor: token.bg,
|
|
1490
|
-
border: `1px solid ${token.border}`,
|
|
1491
|
-
color: token.color
|
|
1492
|
-
};
|
|
1493
|
-
}
|
|
1494
|
-
function AccentPanel({
|
|
1495
|
-
tone = "violet",
|
|
1496
|
-
variant = "subtle",
|
|
1497
|
-
title,
|
|
1498
|
-
badge,
|
|
1499
|
-
children
|
|
1500
|
-
}) {
|
|
1501
|
-
const styles = resolveAccentPanelStyles(tone, variant);
|
|
1502
|
-
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Paper, { withBorder: true, radius: "lg", p: "lg", style: styles, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Stack, { gap: "sm", children: [
|
|
1503
|
-
title || badge ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_core22.Group, { justify: "space-between", align: "flex-start", gap: "sm", wrap: "wrap", children: [
|
|
1504
|
-
title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Title, { order: 4, c: "inherit", children: title }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Box, {}),
|
|
1505
|
-
badge ? typeof badge === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Badge, { color: tone === "amber" ? "yellow" : tone, variant: "filled", children: badge }) : badge : null
|
|
1506
|
-
] }) : null,
|
|
1507
|
-
typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Text, { c: "inherit", children }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_core22.Box, { c: "inherit", children })
|
|
1508
|
-
] }) });
|
|
1509
|
-
}
|
|
1510
|
-
|
|
1511
1886
|
// src/DetailProfileShell.tsx
|
|
1512
|
-
var
|
|
1513
|
-
var
|
|
1887
|
+
var import_core27 = require("@mantine/core");
|
|
1888
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1514
1889
|
function DetailProfileShell({
|
|
1515
1890
|
mode = "page",
|
|
1516
1891
|
hero,
|
|
@@ -1521,34 +1896,34 @@ function DetailProfileShell({
|
|
|
1521
1896
|
showDividers = true
|
|
1522
1897
|
}) {
|
|
1523
1898
|
const content = sections.filter(Boolean);
|
|
1524
|
-
return /* @__PURE__ */ (0,
|
|
1899
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Paper, { withBorder: mode === "drawer", radius: mode === "drawer" ? "xl" : "md", p: padding, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core27.Stack, { gap: "lg", children: [
|
|
1525
1900
|
hero,
|
|
1526
1901
|
actions,
|
|
1527
|
-
content.map((section, index) => /* @__PURE__ */ (0,
|
|
1528
|
-
index > 0 && showDividers ? /* @__PURE__ */ (0,
|
|
1902
|
+
content.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_core27.Stack, { gap: "lg", children: [
|
|
1903
|
+
index > 0 && showDividers ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Divider, {}) : null,
|
|
1529
1904
|
section
|
|
1530
1905
|
] }, index)),
|
|
1531
|
-
related ? /* @__PURE__ */ (0,
|
|
1532
|
-
content.length && showDividers ? /* @__PURE__ */ (0,
|
|
1906
|
+
related ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
|
|
1907
|
+
content.length && showDividers ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_core27.Divider, {}) : null,
|
|
1533
1908
|
related
|
|
1534
1909
|
] }) : null
|
|
1535
1910
|
] }) });
|
|
1536
1911
|
}
|
|
1537
1912
|
|
|
1538
1913
|
// src/PublicShell.tsx
|
|
1539
|
-
var
|
|
1914
|
+
var import_core29 = require("@mantine/core");
|
|
1540
1915
|
|
|
1541
1916
|
// src/PublicNav.tsx
|
|
1542
|
-
var
|
|
1543
|
-
var
|
|
1917
|
+
var import_core28 = require("@mantine/core");
|
|
1918
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1544
1919
|
function PublicNav({ items, activeId, renderLink }) {
|
|
1545
|
-
return /* @__PURE__ */ (0,
|
|
1920
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_core28.Group, { component: "nav", "aria-label": "Primary", gap: "lg", wrap: "nowrap", children: items.map((item) => {
|
|
1546
1921
|
const active = item.id === activeId;
|
|
1547
1922
|
if (renderLink) {
|
|
1548
|
-
return /* @__PURE__ */ (0,
|
|
1923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: renderLink(item, active) }, item.id);
|
|
1549
1924
|
}
|
|
1550
|
-
return /* @__PURE__ */ (0,
|
|
1551
|
-
|
|
1925
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1926
|
+
import_core28.Anchor,
|
|
1552
1927
|
{
|
|
1553
1928
|
href: item.href,
|
|
1554
1929
|
"aria-current": active ? "page" : void 0,
|
|
@@ -1565,15 +1940,15 @@ function PublicNav({ items, activeId, renderLink }) {
|
|
|
1565
1940
|
}
|
|
1566
1941
|
|
|
1567
1942
|
// src/PublicShell.tsx
|
|
1568
|
-
var
|
|
1943
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1569
1944
|
function InlineMobileNavigation({
|
|
1570
1945
|
mobileNavigation,
|
|
1571
1946
|
className,
|
|
1572
1947
|
mode
|
|
1573
1948
|
}) {
|
|
1574
|
-
return /* @__PURE__ */ (0,
|
|
1575
|
-
/* @__PURE__ */ (0,
|
|
1576
|
-
|
|
1949
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Box, { component: "details", hiddenFrom: "sm", className, children: [
|
|
1950
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
1951
|
+
import_core29.Box,
|
|
1577
1952
|
{
|
|
1578
1953
|
component: "summary",
|
|
1579
1954
|
"aria-label": mode === "drawer" ? "Open site navigation drawer" : "Open site navigation",
|
|
@@ -1585,13 +1960,13 @@ function InlineMobileNavigation({
|
|
|
1585
1960
|
gap: "0.5rem"
|
|
1586
1961
|
},
|
|
1587
1962
|
children: [
|
|
1588
|
-
/* @__PURE__ */ (0,
|
|
1589
|
-
/* @__PURE__ */ (0,
|
|
1963
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Burger, { opened: false, "aria-hidden": true }),
|
|
1964
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Text, { size: "sm", fw: 600, children: "Menu" })
|
|
1590
1965
|
]
|
|
1591
1966
|
}
|
|
1592
1967
|
),
|
|
1593
|
-
/* @__PURE__ */ (0,
|
|
1594
|
-
|
|
1968
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1969
|
+
import_core29.Box,
|
|
1595
1970
|
{
|
|
1596
1971
|
mt: "sm",
|
|
1597
1972
|
p: "sm",
|
|
@@ -1600,7 +1975,7 @@ function InlineMobileNavigation({
|
|
|
1600
1975
|
border: "1px solid var(--mantine-color-default-border)",
|
|
1601
1976
|
background: mode === "drawer" ? "light-dark(var(--mantine-color-white), color-mix(in srgb, var(--mantine-color-dark-7) 92%, black))" : "var(--mantine-color-body)"
|
|
1602
1977
|
},
|
|
1603
|
-
children: /* @__PURE__ */ (0,
|
|
1978
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Stack, { gap: "sm", children: mobileNavigation })
|
|
1604
1979
|
}
|
|
1605
1980
|
)
|
|
1606
1981
|
] });
|
|
@@ -1621,30 +1996,30 @@ function PublicShell({
|
|
|
1621
1996
|
mobileNavigationMode = "sheet",
|
|
1622
1997
|
classNames
|
|
1623
1998
|
}) {
|
|
1624
|
-
const resolvedNavigation = navigation ?? (navItems ? /* @__PURE__ */ (0,
|
|
1999
|
+
const resolvedNavigation = navigation ?? (navItems ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(PublicNav, { items: navItems, activeId: activeNavId }) : null);
|
|
1625
2000
|
const containerSize = maxContentWidth ?? (compact ? "md" : "lg");
|
|
1626
2001
|
const headerHeight = headerVariant === "compact" ? 64 : headerVariant === "branded-quiet" ? 88 : 72;
|
|
1627
2002
|
const mainPadding = headerVariant === "compact" ? "lg" : "xl";
|
|
1628
2003
|
const usesInlineMobileNavigation = Boolean(mobileNavigation) && mobileNavigationMode !== "sheet";
|
|
1629
2004
|
const usesSheetMobileNavigation = Boolean(mobileNavigation) && mobileNavigationMode === "sheet";
|
|
1630
|
-
return /* @__PURE__ */ (0,
|
|
1631
|
-
|
|
2005
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
2006
|
+
import_core29.AppShell,
|
|
1632
2007
|
{
|
|
1633
2008
|
className: classNames?.root,
|
|
1634
2009
|
header: { height: headerHeight },
|
|
1635
2010
|
footer: usesSheetMobileNavigation ? { height: 68 } : void 0,
|
|
1636
2011
|
padding: 0,
|
|
1637
2012
|
children: [
|
|
1638
|
-
/* @__PURE__ */ (0,
|
|
1639
|
-
|
|
2013
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.AppShell.Header, { withBorder: headerBordered, className: classNames?.header, "data-header-variant": headerVariant, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Container, { size: containerSize, h: "100%", py: headerVariant === "branded-quiet" ? "sm" : 0, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
2014
|
+
import_core29.Group,
|
|
1640
2015
|
{
|
|
1641
2016
|
h: "100%",
|
|
1642
2017
|
justify: "space-between",
|
|
1643
2018
|
wrap: "nowrap",
|
|
1644
2019
|
gap: headerVariant === "compact" ? "sm" : "lg",
|
|
1645
2020
|
children: [
|
|
1646
|
-
/* @__PURE__ */ (0,
|
|
1647
|
-
usesInlineMobileNavigation ? /* @__PURE__ */ (0,
|
|
2021
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.Group, { wrap: "nowrap", gap: headerVariant === "compact" ? "xs" : "sm", className: classNames?.brand, children: [
|
|
2022
|
+
usesInlineMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
1648
2023
|
InlineMobileNavigation,
|
|
1649
2024
|
{
|
|
1650
2025
|
mobileNavigation,
|
|
@@ -1652,17 +2027,17 @@ function PublicShell({
|
|
|
1652
2027
|
mode: mobileNavigationMode
|
|
1653
2028
|
}
|
|
1654
2029
|
) : null,
|
|
1655
|
-
/* @__PURE__ */ (0,
|
|
2030
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { children: brand })
|
|
1656
2031
|
] }),
|
|
1657
|
-
/* @__PURE__ */ (0,
|
|
1658
|
-
/* @__PURE__ */ (0,
|
|
2032
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { visibleFrom: "sm", gap: headerVariant === "compact" ? "md" : "lg", className: classNames?.navigation, children: resolvedNavigation }),
|
|
2033
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { gap: "sm", className: classNames?.actions, children: actions })
|
|
1659
2034
|
]
|
|
1660
2035
|
}
|
|
1661
2036
|
) }) }),
|
|
1662
|
-
usesSheetMobileNavigation ? /* @__PURE__ */ (0,
|
|
1663
|
-
/* @__PURE__ */ (0,
|
|
1664
|
-
/* @__PURE__ */ (0,
|
|
1665
|
-
footer ? /* @__PURE__ */ (0,
|
|
2037
|
+
usesSheetMobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.AppShell.Footer, { withBorder: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Container, { size: containerSize, h: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Group, { h: "100%", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) }) : null,
|
|
2038
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_core29.AppShell.Main, { children: [
|
|
2039
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Container, { size: containerSize, py: mainPadding, className: classNames?.content, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Stack, { gap: "xl", children }) }),
|
|
2040
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Box, { component: typeof footer === "string" ? "footer" : "div", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Container, { size: containerSize, children: typeof footer === "string" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_core29.Text, { size: "sm", c: "dimmed", children: footer }) : footer }) }) : null
|
|
1666
2041
|
] })
|
|
1667
2042
|
]
|
|
1668
2043
|
}
|
|
@@ -1670,9 +2045,9 @@ function PublicShell({
|
|
|
1670
2045
|
}
|
|
1671
2046
|
|
|
1672
2047
|
// src/DiscoveryShell.tsx
|
|
1673
|
-
var
|
|
2048
|
+
var import_core30 = require("@mantine/core");
|
|
1674
2049
|
var import_hooks2 = require("@mantine/hooks");
|
|
1675
|
-
var
|
|
2050
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1676
2051
|
function DiscoveryShell({
|
|
1677
2052
|
header,
|
|
1678
2053
|
sidebar,
|
|
@@ -1687,8 +2062,8 @@ function DiscoveryShell({
|
|
|
1687
2062
|
collapseBreakpoint = "sm"
|
|
1688
2063
|
}) {
|
|
1689
2064
|
const [opened, { toggle, close }] = (0, import_hooks2.useDisclosure)(defaultSidebarOpen);
|
|
1690
|
-
return /* @__PURE__ */ (0,
|
|
1691
|
-
|
|
2065
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
2066
|
+
import_core30.AppShell,
|
|
1692
2067
|
{
|
|
1693
2068
|
header: { height: headerHeight },
|
|
1694
2069
|
footer: footer ? { height: 68 } : void 0,
|
|
@@ -1699,9 +2074,9 @@ function DiscoveryShell({
|
|
|
1699
2074
|
},
|
|
1700
2075
|
padding: shellPadding,
|
|
1701
2076
|
children: [
|
|
1702
|
-
/* @__PURE__ */ (0,
|
|
1703
|
-
/* @__PURE__ */ (0,
|
|
1704
|
-
|
|
2077
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AppShell.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_core30.Group, { h: "100%", px: "md", gap: "sm", wrap: "nowrap", children: [
|
|
2078
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2079
|
+
import_core30.Burger,
|
|
1705
2080
|
{
|
|
1706
2081
|
opened,
|
|
1707
2082
|
onClick: toggle,
|
|
@@ -1710,10 +2085,10 @@ function DiscoveryShell({
|
|
|
1710
2085
|
"aria-label": mobileNavigationLabel
|
|
1711
2086
|
}
|
|
1712
2087
|
),
|
|
1713
|
-
/* @__PURE__ */ (0,
|
|
2088
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Box, { style: { flex: 1, minWidth: 0 }, children: header })
|
|
1714
2089
|
] }) }),
|
|
1715
|
-
/* @__PURE__ */ (0,
|
|
1716
|
-
|
|
2090
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AppShell.Navbar, { p: "md", "data-sticky-sidebar": stickySidebar || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.ScrollArea, { h: "100%", type: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2091
|
+
import_core30.Box,
|
|
1717
2092
|
{
|
|
1718
2093
|
h: "100%",
|
|
1719
2094
|
style: stickySidebar ? {
|
|
@@ -1723,28 +2098,28 @@ function DiscoveryShell({
|
|
|
1723
2098
|
children: sidebar
|
|
1724
2099
|
}
|
|
1725
2100
|
) }) }),
|
|
1726
|
-
footer ? /* @__PURE__ */ (0,
|
|
1727
|
-
/* @__PURE__ */ (0,
|
|
2101
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AppShell.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.Group, { h: "100%", px: "md", justify: "space-around", wrap: "nowrap", children: footer }) }) : null,
|
|
2102
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_core30.AppShell.Main, { onClick: () => close(), children })
|
|
1728
2103
|
]
|
|
1729
2104
|
}
|
|
1730
2105
|
);
|
|
1731
2106
|
}
|
|
1732
2107
|
|
|
1733
2108
|
// src/SidebarNav.tsx
|
|
1734
|
-
var
|
|
1735
|
-
var
|
|
1736
|
-
var
|
|
1737
|
-
var
|
|
2109
|
+
var import_react5 = require("react");
|
|
2110
|
+
var import_core31 = require("@mantine/core");
|
|
2111
|
+
var import_gds_theme4 = require("@doneisbetter/gds-theme");
|
|
2112
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1738
2113
|
function SidebarNav({ children, ariaLabel = "Primary navigation", gap = "md" }) {
|
|
1739
|
-
return /* @__PURE__ */ (0,
|
|
2114
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Stack, { component: "nav", "aria-label": ariaLabel, gap, h: "100%", children });
|
|
1740
2115
|
}
|
|
1741
2116
|
function SidebarNavSection({ label, children, pushToBottom = false }) {
|
|
1742
|
-
return /* @__PURE__ */ (0,
|
|
1743
|
-
label ? /* @__PURE__ */ (0,
|
|
1744
|
-
/* @__PURE__ */ (0,
|
|
2117
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_core31.Stack, { gap: "xs", mt: pushToBottom ? "auto" : void 0, children: [
|
|
2118
|
+
label ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Text, { size: "xs", fw: 700, c: "dimmed", children: label }) : null,
|
|
2119
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Stack, { gap: 4, children })
|
|
1745
2120
|
] });
|
|
1746
2121
|
}
|
|
1747
|
-
var _SidebarNavItem = (0,
|
|
2122
|
+
var _SidebarNavItem = (0, import_react5.forwardRef)(
|
|
1748
2123
|
({
|
|
1749
2124
|
action,
|
|
1750
2125
|
label,
|
|
@@ -1756,18 +2131,18 @@ var _SidebarNavItem = (0, import_react4.forwardRef)(
|
|
|
1756
2131
|
vocabularyPacks = [],
|
|
1757
2132
|
...props
|
|
1758
2133
|
}, ref) => {
|
|
1759
|
-
const { t } = (0,
|
|
2134
|
+
const { t } = (0, import_gds_theme4.useGdsTranslation)();
|
|
1760
2135
|
const config = action ? resolveSemanticActionConfig(action, vocabularyPacks) : null;
|
|
1761
2136
|
const Icon = config?.icon;
|
|
1762
2137
|
const resolvedLabel = label ?? (action ? getSemanticActionLabel(action, t, vocabularyPacks) : void 0);
|
|
1763
|
-
return /* @__PURE__ */ (0,
|
|
1764
|
-
|
|
2138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2139
|
+
import_core31.NavLink,
|
|
1765
2140
|
{
|
|
1766
2141
|
ref,
|
|
1767
2142
|
label: resolvedLabel,
|
|
1768
2143
|
description,
|
|
1769
|
-
leftSection: icon ?? (Icon ? /* @__PURE__ */ (0,
|
|
1770
|
-
rightSection: badge ? /* @__PURE__ */ (0,
|
|
2144
|
+
leftSection: icon ?? (Icon ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { size: "1rem", stroke: 1.5 }) : void 0),
|
|
2145
|
+
rightSection: badge ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_core31.Box, { children: badge }) : props.rightSection,
|
|
1771
2146
|
"aria-label": ariaLabel ?? (typeof resolvedLabel === "string" ? resolvedLabel : void 0),
|
|
1772
2147
|
"aria-current": props.active ? "page" : ariaCurrent,
|
|
1773
2148
|
...props
|
|
@@ -1775,21 +2150,21 @@ var _SidebarNavItem = (0, import_react4.forwardRef)(
|
|
|
1775
2150
|
);
|
|
1776
2151
|
}
|
|
1777
2152
|
);
|
|
1778
|
-
var SidebarNavItem = (0,
|
|
2153
|
+
var SidebarNavItem = (0, import_core31.createPolymorphicComponent)(_SidebarNavItem);
|
|
1779
2154
|
|
|
1780
2155
|
// src/PublicSiteFooter.tsx
|
|
1781
|
-
var
|
|
1782
|
-
var
|
|
2156
|
+
var import_core32 = require("@mantine/core");
|
|
2157
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1783
2158
|
function PublicSiteFooter({ children, meta }) {
|
|
1784
|
-
return /* @__PURE__ */ (0,
|
|
1785
|
-
children ? /* @__PURE__ */ (0,
|
|
1786
|
-
meta ? /* @__PURE__ */ (0,
|
|
2159
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_core32.Stack, { component: "footer", gap: "xs", children: [
|
|
2160
|
+
children ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Text, { size: "sm", children }) : null,
|
|
2161
|
+
meta ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Group, { gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_core32.Text, { size: "xs", c: "dimmed", children: meta }) }) : null
|
|
1787
2162
|
] });
|
|
1788
2163
|
}
|
|
1789
2164
|
|
|
1790
2165
|
// src/PublicBrandFooter.tsx
|
|
1791
|
-
var
|
|
1792
|
-
var
|
|
2166
|
+
var import_core33 = require("@mantine/core");
|
|
2167
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1793
2168
|
function PublicBrandFooter({
|
|
1794
2169
|
media,
|
|
1795
2170
|
brandTitle,
|
|
@@ -1804,8 +2179,8 @@ function PublicBrandFooter({
|
|
|
1804
2179
|
const mediaSpan = layoutVariant === "immersive-media" ? 5 : 4;
|
|
1805
2180
|
const primarySpan = media ? layoutVariant === "balanced-quote" ? 4 : 4 : secondary ? 6 : 12;
|
|
1806
2181
|
const secondarySpan = media ? Math.max(3, 12 - mediaSpan - primarySpan) : Math.max(4, 12 - primarySpan);
|
|
1807
|
-
return /* @__PURE__ */ (0,
|
|
1808
|
-
|
|
2182
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
2183
|
+
import_core33.Paper,
|
|
1809
2184
|
{
|
|
1810
2185
|
component: "footer",
|
|
1811
2186
|
withBorder: true,
|
|
@@ -1813,19 +2188,19 @@ function PublicBrandFooter({
|
|
|
1813
2188
|
p: compact ? "lg" : "xl",
|
|
1814
2189
|
className: classNames?.root,
|
|
1815
2190
|
"data-layout-variant": layoutVariant,
|
|
1816
|
-
children: /* @__PURE__ */ (0,
|
|
1817
|
-
/* @__PURE__ */ (0,
|
|
1818
|
-
media ? /* @__PURE__ */ (0,
|
|
1819
|
-
/* @__PURE__ */ (0,
|
|
1820
|
-
brandTitle ? /* @__PURE__ */ (0,
|
|
1821
|
-
description ? /* @__PURE__ */ (0,
|
|
1822
|
-
actions ? /* @__PURE__ */ (0,
|
|
2191
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { gap: "lg", children: [
|
|
2192
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Grid, { gutter: compact ? "lg" : "xl", align: "flex-start", children: [
|
|
2193
|
+
media ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Grid.Col, { span: { base: 12, md: mediaSpan }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Box, { className: classNames?.media, children: media }) }) : null,
|
|
2194
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Grid.Col, { span: { base: 12, md: primarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_core33.Stack, { gap: compact ? "xs" : "sm", className: classNames?.primary, children: [
|
|
2195
|
+
brandTitle ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Title, { order: 4, children: brandTitle }) : null,
|
|
2196
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Text, { c: "dimmed", children: description }) : null,
|
|
2197
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Box, { children: actions }) : null
|
|
1823
2198
|
] }) }),
|
|
1824
|
-
secondary ? /* @__PURE__ */ (0,
|
|
2199
|
+
secondary ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Grid.Col, { span: { base: 12, md: secondarySpan }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Stack, { gap: compact ? "xs" : "sm", className: classNames?.secondary, children: secondary }) }) : null
|
|
1825
2200
|
] }),
|
|
1826
|
-
legal ? /* @__PURE__ */ (0,
|
|
1827
|
-
/* @__PURE__ */ (0,
|
|
1828
|
-
/* @__PURE__ */ (0,
|
|
2201
|
+
legal ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
2202
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Divider, {}),
|
|
2203
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Group, { justify: "space-between", gap: "sm", wrap: "wrap", className: classNames?.legal, children: typeof legal === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core33.Text, { size: "sm", c: "dimmed", children: legal }) : legal })
|
|
1829
2204
|
] }) : null
|
|
1830
2205
|
] })
|
|
1831
2206
|
}
|
|
@@ -1833,8 +2208,8 @@ function PublicBrandFooter({
|
|
|
1833
2208
|
}
|
|
1834
2209
|
|
|
1835
2210
|
// src/AuthShell.tsx
|
|
1836
|
-
var
|
|
1837
|
-
var
|
|
2211
|
+
var import_core34 = require("@mantine/core");
|
|
2212
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1838
2213
|
function AuthShell({
|
|
1839
2214
|
title,
|
|
1840
2215
|
description,
|
|
@@ -1846,28 +2221,28 @@ function AuthShell({
|
|
|
1846
2221
|
dividerLabel = "Or continue with your account",
|
|
1847
2222
|
children
|
|
1848
2223
|
}) {
|
|
1849
|
-
return /* @__PURE__ */ (0,
|
|
1850
|
-
brand || headerActions ? /* @__PURE__ */ (0,
|
|
1851
|
-
brand ? /* @__PURE__ */ (0,
|
|
1852
|
-
headerActions ? /* @__PURE__ */ (0,
|
|
2224
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { py: { base: "xl", md: "4rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Container, { size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "xl", children: [
|
|
2225
|
+
brand || headerActions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Group, { justify: brand && headerActions ? "space-between" : "center", align: "center", children: [
|
|
2226
|
+
brand ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { children: brand }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, {}),
|
|
2227
|
+
headerActions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Group, { gap: "sm", children: headerActions }) : null
|
|
1853
2228
|
] }) : null,
|
|
1854
|
-
/* @__PURE__ */ (0,
|
|
1855
|
-
/* @__PURE__ */ (0,
|
|
1856
|
-
/* @__PURE__ */ (0,
|
|
1857
|
-
description ? /* @__PURE__ */ (0,
|
|
2229
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Card, { withBorder: true, radius: "lg", padding: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "lg", children: [
|
|
2230
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_core34.Stack, { gap: "xs", ta: "center", children: [
|
|
2231
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Title, { order: 2, children: title }),
|
|
2232
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { c: "dimmed", size: "sm", children: description }) : null
|
|
1858
2233
|
] }),
|
|
1859
|
-
socialAuth ? /* @__PURE__ */ (0,
|
|
1860
|
-
socialAuth ? /* @__PURE__ */ (0,
|
|
2234
|
+
socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Box, { children: socialAuth }) : null,
|
|
2235
|
+
socialAuth ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Divider, { label: dividerLabel, labelPosition: "center" }) : null,
|
|
1861
2236
|
children,
|
|
1862
|
-
helper ? /* @__PURE__ */ (0,
|
|
2237
|
+
helper ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { size: "sm", c: "dimmed", ta: "center", children: helper }) : null
|
|
1863
2238
|
] }) }),
|
|
1864
|
-
footer ? /* @__PURE__ */ (0,
|
|
2239
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_core34.Text, { size: "sm", c: "dimmed", ta: "center", children: footer }) : null
|
|
1865
2240
|
] }) }) });
|
|
1866
2241
|
}
|
|
1867
2242
|
|
|
1868
2243
|
// src/SocialAuthButtons.tsx
|
|
1869
|
-
var
|
|
1870
|
-
var
|
|
2244
|
+
var import_core35 = require("@mantine/core");
|
|
2245
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1871
2246
|
var providerConfig = {
|
|
1872
2247
|
google: { label: "Google", mark: "G", color: "red" },
|
|
1873
2248
|
apple: { label: "Apple", mark: "A", color: "dark" },
|
|
@@ -1881,26 +2256,26 @@ var providerConfig = {
|
|
|
1881
2256
|
};
|
|
1882
2257
|
function ProviderMark({ id }) {
|
|
1883
2258
|
const config = providerConfig[id] ?? { label: id, mark: id.slice(0, 2).toUpperCase(), color: "gray" };
|
|
1884
|
-
return /* @__PURE__ */ (0,
|
|
2259
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.ThemeIcon, { variant: "light", color: config.color, radius: "xl", size: "md", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "xs", fw: 700, children: config.mark }) });
|
|
1885
2260
|
}
|
|
1886
2261
|
function SocialAuthButton({ provider, compact = false }) {
|
|
1887
2262
|
const config = providerConfig[provider.id] ?? { label: provider.id, mark: provider.id.slice(0, 2).toUpperCase(), color: "gray" };
|
|
1888
2263
|
const label = provider.label ?? `Continue with ${config.label}`;
|
|
1889
2264
|
const buttonProps = provider.href ? { component: "a", href: provider.href } : { onClick: provider.onClick };
|
|
1890
|
-
return /* @__PURE__ */ (0,
|
|
1891
|
-
|
|
2265
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
2266
|
+
import_core35.Button,
|
|
1892
2267
|
{
|
|
1893
2268
|
variant: "default",
|
|
1894
2269
|
justify: "space-between",
|
|
1895
2270
|
fullWidth: true,
|
|
1896
2271
|
size: compact ? "sm" : "md",
|
|
1897
|
-
leftSection: /* @__PURE__ */ (0,
|
|
2272
|
+
leftSection: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ProviderMark, { id: provider.id }),
|
|
1898
2273
|
disabled: provider.disabled,
|
|
1899
2274
|
loading: provider.loading,
|
|
1900
2275
|
...buttonProps,
|
|
1901
|
-
children: /* @__PURE__ */ (0,
|
|
1902
|
-
/* @__PURE__ */ (0,
|
|
1903
|
-
provider.description ? /* @__PURE__ */ (0,
|
|
2276
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: 0, align: "flex-start", children: [
|
|
2277
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { inherit: true, children: label }),
|
|
2278
|
+
provider.description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "xs", c: "dimmed", lh: 1.2, children: provider.description }) : null
|
|
1904
2279
|
] })
|
|
1905
2280
|
}
|
|
1906
2281
|
);
|
|
@@ -1915,44 +2290,44 @@ function SocialAuthButtons({
|
|
|
1915
2290
|
if (!providers.length) {
|
|
1916
2291
|
return null;
|
|
1917
2292
|
}
|
|
1918
|
-
const content = providers.map((provider) => /* @__PURE__ */ (0,
|
|
1919
|
-
return /* @__PURE__ */ (0,
|
|
1920
|
-
/* @__PURE__ */ (0,
|
|
1921
|
-
/* @__PURE__ */ (0,
|
|
1922
|
-
/* @__PURE__ */ (0,
|
|
1923
|
-
/* @__PURE__ */ (0,
|
|
2293
|
+
const content = providers.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SocialAuthButton, { provider, compact }, provider.id));
|
|
2294
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: "md", children: [
|
|
2295
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Stack, { gap: 4, ta: "center", children: [
|
|
2296
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_core35.Group, { justify: "center", gap: "xs", children: [
|
|
2297
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(GdsIcons.Login, { size: "1rem" }),
|
|
2298
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { fw: 600, children: title })
|
|
1924
2299
|
] }),
|
|
1925
|
-
description ? /* @__PURE__ */ (0,
|
|
2300
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Text, { size: "sm", c: "dimmed", children: description }) : null
|
|
1926
2301
|
] }),
|
|
1927
|
-
/* @__PURE__ */ (0,
|
|
1928
|
-
layout === "grid" ? /* @__PURE__ */ (0,
|
|
2302
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Divider, {}),
|
|
2303
|
+
layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "sm", children: content }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core35.Stack, { gap: "sm", children: content })
|
|
1929
2304
|
] });
|
|
1930
2305
|
}
|
|
1931
2306
|
|
|
1932
2307
|
// src/ArticleShell.tsx
|
|
1933
|
-
var
|
|
1934
|
-
var
|
|
2308
|
+
var import_core36 = require("@mantine/core");
|
|
2309
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
1935
2310
|
function ArticleShell({ eyebrow, title, lead, meta, sideRail, children }) {
|
|
1936
|
-
return /* @__PURE__ */ (0,
|
|
1937
|
-
/* @__PURE__ */ (0,
|
|
1938
|
-
/* @__PURE__ */ (0,
|
|
1939
|
-
eyebrow ? /* @__PURE__ */ (0,
|
|
1940
|
-
/* @__PURE__ */ (0,
|
|
1941
|
-
lead ? /* @__PURE__ */ (0,
|
|
1942
|
-
meta ? /* @__PURE__ */ (0,
|
|
2311
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Container, { size: "lg", py: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
|
|
2312
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Stack, { gap: "lg", maw: 760, flex: 1, children: [
|
|
2313
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_core36.Stack, { gap: "sm", children: [
|
|
2314
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
|
|
2315
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Title, { order: 1, children: title }),
|
|
2316
|
+
lead ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Text, { size: "lg", c: "dimmed", children: lead }) : null,
|
|
2317
|
+
meta ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Group, { gap: "md", children: meta }) : null
|
|
1943
2318
|
] }),
|
|
1944
|
-
/* @__PURE__ */ (0,
|
|
2319
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Stack, { gap: "md", children })
|
|
1945
2320
|
] }),
|
|
1946
|
-
sideRail ? /* @__PURE__ */ (0,
|
|
2321
|
+
sideRail ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_core36.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
|
|
1947
2322
|
] }) });
|
|
1948
2323
|
}
|
|
1949
2324
|
|
|
1950
2325
|
// src/DocsCodeBlock.tsx
|
|
1951
|
-
var
|
|
1952
|
-
var
|
|
1953
|
-
var
|
|
2326
|
+
var import_react6 = require("react");
|
|
2327
|
+
var import_core37 = require("@mantine/core");
|
|
2328
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
1954
2329
|
function DocsCodeBlock({ code, language, title, withCopy = true }) {
|
|
1955
|
-
const [copied, setCopied] = (0,
|
|
2330
|
+
const [copied, setCopied] = (0, import_react6.useState)(false);
|
|
1956
2331
|
const handleCopy = async () => {
|
|
1957
2332
|
if (!navigator?.clipboard) {
|
|
1958
2333
|
return;
|
|
@@ -1961,44 +2336,44 @@ function DocsCodeBlock({ code, language, title, withCopy = true }) {
|
|
|
1961
2336
|
setCopied(true);
|
|
1962
2337
|
window.setTimeout(() => setCopied(false), 1200);
|
|
1963
2338
|
};
|
|
1964
|
-
return /* @__PURE__ */ (0,
|
|
1965
|
-
title || withCopy ? /* @__PURE__ */ (0,
|
|
1966
|
-
/* @__PURE__ */ (0,
|
|
1967
|
-
title ? /* @__PURE__ */ (0,
|
|
1968
|
-
language ? /* @__PURE__ */ (0,
|
|
2339
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Paper, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Stack, { gap: "sm", children: [
|
|
2340
|
+
title || withCopy ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Group, { justify: "space-between", align: "center", children: [
|
|
2341
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_core37.Stack, { gap: 0, children: [
|
|
2342
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { fw: 600, children: title }) : null,
|
|
2343
|
+
language ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Text, { size: "xs", c: "dimmed", children: language }) : null
|
|
1969
2344
|
] }),
|
|
1970
|
-
withCopy ? /* @__PURE__ */ (0,
|
|
1971
|
-
|
|
2345
|
+
withCopy ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2346
|
+
import_core37.ActionIcon,
|
|
1972
2347
|
{
|
|
1973
2348
|
variant: "subtle",
|
|
1974
2349
|
"aria-label": copied ? "Copied code block" : "Copy code block",
|
|
1975
2350
|
onClick: () => {
|
|
1976
2351
|
void handleCopy();
|
|
1977
2352
|
},
|
|
1978
|
-
children: /* @__PURE__ */ (0,
|
|
2353
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(GdsIcons.Copy, { size: "1rem" })
|
|
1979
2354
|
}
|
|
1980
2355
|
) : null
|
|
1981
2356
|
] }) : null,
|
|
1982
|
-
/* @__PURE__ */ (0,
|
|
2357
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_core37.Code, { block: true, children: code })
|
|
1983
2358
|
] }) });
|
|
1984
2359
|
}
|
|
1985
2360
|
|
|
1986
2361
|
// src/CtaButtonGroup.tsx
|
|
1987
|
-
var
|
|
1988
|
-
var
|
|
2362
|
+
var import_core38 = require("@mantine/core");
|
|
2363
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
1989
2364
|
function CtaButtonGroup({ primary, secondary, tertiary }) {
|
|
1990
|
-
return /* @__PURE__ */ (0,
|
|
1991
|
-
/* @__PURE__ */ (0,
|
|
1992
|
-
/* @__PURE__ */ (0,
|
|
1993
|
-
secondary ? /* @__PURE__ */ (0,
|
|
2365
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Stack, { gap: "sm", children: [
|
|
2366
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_core38.Group, { gap: "sm", align: "stretch", children: [
|
|
2367
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: primary }),
|
|
2368
|
+
secondary ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: secondary }) : null
|
|
1994
2369
|
] }),
|
|
1995
|
-
tertiary ? /* @__PURE__ */ (0,
|
|
2370
|
+
tertiary ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: tertiary }) : null
|
|
1996
2371
|
] });
|
|
1997
2372
|
}
|
|
1998
2373
|
|
|
1999
2374
|
// src/DocsPageShell.tsx
|
|
2000
|
-
var
|
|
2001
|
-
var
|
|
2375
|
+
var import_core39 = require("@mantine/core");
|
|
2376
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2002
2377
|
function DocsPageShell({
|
|
2003
2378
|
breadcrumbs = [],
|
|
2004
2379
|
title,
|
|
@@ -2009,27 +2384,27 @@ function DocsPageShell({
|
|
|
2009
2384
|
footerNext,
|
|
2010
2385
|
children
|
|
2011
2386
|
}) {
|
|
2012
|
-
return /* @__PURE__ */ (0,
|
|
2013
|
-
/* @__PURE__ */ (0,
|
|
2014
|
-
breadcrumbs.length ? /* @__PURE__ */ (0,
|
|
2015
|
-
(crumb) => crumb.href ? /* @__PURE__ */ (0,
|
|
2387
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Container, { fluid: true, py: "xl", px: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Group, { align: "flex-start", gap: "xl", wrap: "nowrap", children: [
|
|
2388
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Stack, { component: "article", gap: "lg", flex: 1, miw: 0, children: [
|
|
2389
|
+
breadcrumbs.length ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Breadcrumbs, { children: breadcrumbs.map(
|
|
2390
|
+
(crumb) => crumb.href ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Anchor, { href: crumb.href, children: crumb.label }, `${crumb.label}-${crumb.href}`) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Text, { children: crumb.label }, crumb.label)
|
|
2016
2391
|
) }) : null,
|
|
2017
|
-
/* @__PURE__ */ (0,
|
|
2018
|
-
eyebrow ? /* @__PURE__ */ (0,
|
|
2019
|
-
/* @__PURE__ */ (0,
|
|
2020
|
-
lead ? /* @__PURE__ */ (0,
|
|
2021
|
-
meta ? /* @__PURE__ */ (0,
|
|
2392
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_core39.Stack, { gap: "sm", children: [
|
|
2393
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Text, { size: "sm", fw: 700, c: "dimmed", children: eyebrow }) : null,
|
|
2394
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Title, { order: 1, children: title }),
|
|
2395
|
+
lead ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Text, { size: "lg", c: "dimmed", maw: 920, children: lead }) : null,
|
|
2396
|
+
meta ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Group, { gap: "md", children: meta }) : null
|
|
2022
2397
|
] }),
|
|
2023
|
-
/* @__PURE__ */ (0,
|
|
2024
|
-
footerNext ? /* @__PURE__ */ (0,
|
|
2398
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Stack, { gap: "md", children }),
|
|
2399
|
+
footerNext ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Anchor, { href: footerNext.href, fw: 600, children: footerNext.label }) : null
|
|
2025
2400
|
] }),
|
|
2026
|
-
sideRail ? /* @__PURE__ */ (0,
|
|
2401
|
+
sideRail ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_core39.Stack, { visibleFrom: "lg", gap: "md", w: 240, children: sideRail }) : null
|
|
2027
2402
|
] }) });
|
|
2028
2403
|
}
|
|
2029
2404
|
|
|
2030
2405
|
// src/EditorialHero.tsx
|
|
2031
|
-
var
|
|
2032
|
-
var
|
|
2406
|
+
var import_core40 = require("@mantine/core");
|
|
2407
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
2033
2408
|
function resolveActionVariant(action, index, seenPrimary) {
|
|
2034
2409
|
const requested = action.variant ?? (index === 0 ? "primary" : "secondary");
|
|
2035
2410
|
if (requested === "primary" && !seenPrimary) {
|
|
@@ -2041,8 +2416,8 @@ function resolveActionVariant(action, index, seenPrimary) {
|
|
|
2041
2416
|
return { variant: "default", seenPrimary };
|
|
2042
2417
|
}
|
|
2043
2418
|
function HeroAction({ action, variant }) {
|
|
2044
|
-
const content = /* @__PURE__ */ (0,
|
|
2045
|
-
|
|
2419
|
+
const content = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2420
|
+
import_core40.Anchor,
|
|
2046
2421
|
{
|
|
2047
2422
|
href: action.href,
|
|
2048
2423
|
onClick: action.onClick,
|
|
@@ -2066,8 +2441,8 @@ function HeroAction({ action, variant }) {
|
|
|
2066
2441
|
}
|
|
2067
2442
|
);
|
|
2068
2443
|
if (!action.href) {
|
|
2069
|
-
return /* @__PURE__ */ (0,
|
|
2070
|
-
|
|
2444
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2445
|
+
import_core40.Box,
|
|
2071
2446
|
{
|
|
2072
2447
|
component: "button",
|
|
2073
2448
|
type: "button",
|
|
@@ -2094,30 +2469,30 @@ function HeroAction({ action, variant }) {
|
|
|
2094
2469
|
return content;
|
|
2095
2470
|
}
|
|
2096
2471
|
function LoadingHero({ compact }) {
|
|
2097
|
-
return /* @__PURE__ */ (0,
|
|
2098
|
-
/* @__PURE__ */ (0,
|
|
2099
|
-
/* @__PURE__ */ (0,
|
|
2100
|
-
/* @__PURE__ */ (0,
|
|
2101
|
-
/* @__PURE__ */ (0,
|
|
2102
|
-
/* @__PURE__ */ (0,
|
|
2103
|
-
/* @__PURE__ */ (0,
|
|
2104
|
-
/* @__PURE__ */ (0,
|
|
2105
|
-
/* @__PURE__ */ (0,
|
|
2472
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Paper, { withBorder: true, radius: "xl", p: compact ? "lg" : "xl", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
|
|
2473
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Stack, { gap: "md", children: [
|
|
2474
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 16, width: 96, radius: "xl" }),
|
|
2475
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 48, width: "90%", radius: "md" }),
|
|
2476
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 18, width: "100%", radius: "md" }),
|
|
2477
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 18, width: "82%", radius: "md" }),
|
|
2478
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Group, { children: [
|
|
2479
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 40, width: 140, radius: "md" }),
|
|
2480
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { height: 40, width: 140, radius: "md" })
|
|
2106
2481
|
] })
|
|
2107
2482
|
] }) }),
|
|
2108
|
-
/* @__PURE__ */ (0,
|
|
2483
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Grid.Col, { span: { base: 12, md: 6 }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Skeleton, { radius: "lg" }) }) })
|
|
2109
2484
|
] }) });
|
|
2110
2485
|
}
|
|
2111
2486
|
function MediaFallback() {
|
|
2112
|
-
return /* @__PURE__ */ (0,
|
|
2113
|
-
|
|
2487
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.AspectRatio, { ratio: 16 / 11, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2488
|
+
import_core40.ThemeIcon,
|
|
2114
2489
|
{
|
|
2115
2490
|
size: "100%",
|
|
2116
2491
|
radius: "lg",
|
|
2117
2492
|
color: "gray",
|
|
2118
2493
|
variant: "light",
|
|
2119
2494
|
"aria-label": "Hero media is unavailable",
|
|
2120
|
-
children: /* @__PURE__ */ (0,
|
|
2495
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(GdsIcons.Gallery, { size: "2.5rem" })
|
|
2121
2496
|
}
|
|
2122
2497
|
) });
|
|
2123
2498
|
}
|
|
@@ -2137,8 +2512,8 @@ function MediaFrame({
|
|
|
2137
2512
|
} else if (mediaFade === "soft-start") {
|
|
2138
2513
|
overlayBackground = "linear-gradient(90deg, light-dark(rgba(255,255,255,0.9), rgba(17,24,39,0.72)) 0%, rgba(255,255,255,0) 28%)";
|
|
2139
2514
|
}
|
|
2140
|
-
return /* @__PURE__ */ (0,
|
|
2141
|
-
|
|
2515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2516
|
+
import_core40.Box,
|
|
2142
2517
|
{
|
|
2143
2518
|
component: "figure",
|
|
2144
2519
|
m: 0,
|
|
@@ -2151,9 +2526,9 @@ function MediaFrame({
|
|
|
2151
2526
|
},
|
|
2152
2527
|
"aria-label": mediaAlt,
|
|
2153
2528
|
children: [
|
|
2154
|
-
media ?? /* @__PURE__ */ (0,
|
|
2155
|
-
media && overlayBackground ? /* @__PURE__ */ (0,
|
|
2156
|
-
|
|
2529
|
+
media ?? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MediaFallback, {}),
|
|
2530
|
+
media && overlayBackground ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2531
|
+
import_core40.Box,
|
|
2157
2532
|
{
|
|
2158
2533
|
"aria-hidden": true,
|
|
2159
2534
|
style: {
|
|
@@ -2186,7 +2561,7 @@ function EditorialHero({
|
|
|
2186
2561
|
classNames
|
|
2187
2562
|
}) {
|
|
2188
2563
|
if (loading) {
|
|
2189
|
-
return /* @__PURE__ */ (0,
|
|
2564
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(LoadingHero, { compact });
|
|
2190
2565
|
}
|
|
2191
2566
|
const stackAlign = align === "center" ? "center" : "flex-start";
|
|
2192
2567
|
const textAlign = align === "center" ? "center" : "left";
|
|
@@ -2194,15 +2569,15 @@ function EditorialHero({
|
|
|
2194
2569
|
const renderedActions = actions.slice(0, 3).map((action, index) => {
|
|
2195
2570
|
const resolved = resolveActionVariant(action, index, seenPrimary);
|
|
2196
2571
|
seenPrimary = resolved.seenPrimary;
|
|
2197
|
-
return /* @__PURE__ */ (0,
|
|
2572
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(HeroAction, { action, variant: resolved.variant }, `${action.label}-${index}`);
|
|
2198
2573
|
});
|
|
2199
|
-
const textSlot = /* @__PURE__ */ (0,
|
|
2200
|
-
/* @__PURE__ */ (0,
|
|
2201
|
-
eyebrow ? /* @__PURE__ */ (0,
|
|
2202
|
-
/* @__PURE__ */ (0,
|
|
2203
|
-
description ? /* @__PURE__ */ (0,
|
|
2574
|
+
const textSlot = /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Stack, { gap: compact ? "md" : "lg", justify: "center", h: "100%", className: classNames?.content, children: [
|
|
2575
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Stack, { gap: "sm", align: stackAlign, children: [
|
|
2576
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Text, { size: "sm", fw: 700, c: "dimmed", ta: textAlign, children: eyebrow }) : null,
|
|
2577
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Title, { order: 1, maw: 760, ta: textAlign, children: title }),
|
|
2578
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Text, { size: compact ? "md" : "lg", c: "dimmed", maw: 720, ta: textAlign, children: description }) : null
|
|
2204
2579
|
] }),
|
|
2205
|
-
renderedActions.length ? /* @__PURE__ */ (0,
|
|
2580
|
+
renderedActions.length ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Box, { className: classNames?.actions, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2206
2581
|
CtaButtonGroup,
|
|
2207
2582
|
{
|
|
2208
2583
|
primary: renderedActions[0],
|
|
@@ -2210,8 +2585,8 @@ function EditorialHero({
|
|
|
2210
2585
|
tertiary: renderedActions[2]
|
|
2211
2586
|
}
|
|
2212
2587
|
) }) : null,
|
|
2213
|
-
meta.length ? /* @__PURE__ */ (0,
|
|
2214
|
-
|
|
2588
|
+
meta.length ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Group, { gap: "sm", wrap: "wrap", "aria-label": "Supporting details", className: classNames?.meta, children: meta.map((item) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
2589
|
+
import_core40.Group,
|
|
2215
2590
|
{
|
|
2216
2591
|
gap: 6,
|
|
2217
2592
|
px: "sm",
|
|
@@ -2222,17 +2597,17 @@ function EditorialHero({
|
|
|
2222
2597
|
},
|
|
2223
2598
|
children: [
|
|
2224
2599
|
item.icon,
|
|
2225
|
-
/* @__PURE__ */ (0,
|
|
2600
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Text, { size: "sm", c: "dimmed", children: item.label })
|
|
2226
2601
|
]
|
|
2227
2602
|
},
|
|
2228
2603
|
item.id
|
|
2229
2604
|
)) }) : null
|
|
2230
2605
|
] });
|
|
2231
|
-
const mediaSlot = error ? /* @__PURE__ */ (0,
|
|
2232
|
-
const textCol = /* @__PURE__ */ (0,
|
|
2233
|
-
const mediaCol = /* @__PURE__ */ (0,
|
|
2234
|
-
return /* @__PURE__ */ (0,
|
|
2235
|
-
|
|
2606
|
+
const mediaSlot = error ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AccentPanel, { tone: "red", variant: "soft-outline", title: "Media unavailable", children: error }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(MediaFrame, { media, mediaAlt, mediaFade, className: classNames?.media });
|
|
2607
|
+
const textCol = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 1, md: mediaPosition === "left" ? 2 : 1 }, children: textSlot });
|
|
2608
|
+
const mediaCol = /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_core40.Grid.Col, { span: { base: 12, md: 6 }, order: { base: 2, md: mediaPosition === "left" ? 1 : 2 }, children: mediaSlot });
|
|
2609
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
2610
|
+
import_core40.Paper,
|
|
2236
2611
|
{
|
|
2237
2612
|
component: "section",
|
|
2238
2613
|
withBorder: true,
|
|
@@ -2240,7 +2615,7 @@ function EditorialHero({
|
|
|
2240
2615
|
p: compact ? "lg" : "xl",
|
|
2241
2616
|
className: classNames?.root,
|
|
2242
2617
|
style: surfaceVariant === "flat-public" ? { boxShadow: "none" } : void 0,
|
|
2243
|
-
children: /* @__PURE__ */ (0,
|
|
2618
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_core40.Grid, { gutter: compact ? "lg" : "xl", align: "center", children: [
|
|
2244
2619
|
textCol,
|
|
2245
2620
|
mediaCol
|
|
2246
2621
|
] })
|
|
@@ -2249,19 +2624,19 @@ function EditorialHero({
|
|
|
2249
2624
|
}
|
|
2250
2625
|
|
|
2251
2626
|
// src/FeatureBand.tsx
|
|
2252
|
-
var
|
|
2253
|
-
var
|
|
2627
|
+
var import_core41 = require("@mantine/core");
|
|
2628
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
2254
2629
|
function FeatureBandSkeleton({
|
|
2255
2630
|
columns = 3,
|
|
2256
2631
|
bordered = true,
|
|
2257
2632
|
variant = "default"
|
|
2258
2633
|
}) {
|
|
2259
|
-
return /* @__PURE__ */ (0,
|
|
2260
|
-
/* @__PURE__ */ (0,
|
|
2261
|
-
/* @__PURE__ */ (0,
|
|
2262
|
-
/* @__PURE__ */ (0,
|
|
2263
|
-
/* @__PURE__ */ (0,
|
|
2264
|
-
/* @__PURE__ */ (0,
|
|
2634
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "md", children: [
|
|
2635
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Skeleton, { height: variant === "process" ? 28 : 42, width: variant === "process" ? 72 : 42, radius: "xl" }),
|
|
2636
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "xs", children: [
|
|
2637
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Skeleton, { height: 20, width: "75%", radius: "md" }),
|
|
2638
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Skeleton, { height: 14, width: "100%", radius: "md" }),
|
|
2639
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Skeleton, { height: 14, width: "82%", radius: "md" })
|
|
2265
2640
|
] })
|
|
2266
2641
|
] }) }, index)) });
|
|
2267
2642
|
}
|
|
@@ -2274,10 +2649,10 @@ function FeatureBand({
|
|
|
2274
2649
|
variant = "default"
|
|
2275
2650
|
}) {
|
|
2276
2651
|
if (loading) {
|
|
2277
|
-
return /* @__PURE__ */ (0,
|
|
2652
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(FeatureBandSkeleton, { columns, bordered, variant });
|
|
2278
2653
|
}
|
|
2279
2654
|
if (!items.length) {
|
|
2280
|
-
return emptyState ? /* @__PURE__ */ (0,
|
|
2655
|
+
return emptyState ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_jsx_runtime43.Fragment, { children: emptyState }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
2281
2656
|
EmptyState,
|
|
2282
2657
|
{
|
|
2283
2658
|
title: "No supporting details available",
|
|
@@ -2285,9 +2660,9 @@ function FeatureBand({
|
|
|
2285
2660
|
}
|
|
2286
2661
|
);
|
|
2287
2662
|
}
|
|
2288
|
-
return /* @__PURE__ */ (0,
|
|
2289
|
-
variant === "process" ? /* @__PURE__ */ (0,
|
|
2290
|
-
|
|
2663
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Box, { component: "section", "aria-label": "Supporting features", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.SimpleGrid, { cols: { base: 1, sm: Math.min(columns, 2), lg: columns }, spacing: "lg", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Paper, { withBorder: bordered, radius: "lg", p: variant === "compact" ? "md" : "lg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "md", children: [
|
|
2664
|
+
variant === "process" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
2665
|
+
import_core41.Text,
|
|
2291
2666
|
{
|
|
2292
2667
|
fw: 800,
|
|
2293
2668
|
size: "sm",
|
|
@@ -2299,18 +2674,18 @@ function FeatureBand({
|
|
|
2299
2674
|
},
|
|
2300
2675
|
children: item.stepLabel ?? `Step ${index + 1}`
|
|
2301
2676
|
}
|
|
2302
|
-
) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ (0,
|
|
2303
|
-
/* @__PURE__ */ (0,
|
|
2304
|
-
/* @__PURE__ */ (0,
|
|
2305
|
-
item.description ? /* @__PURE__ */ (0,
|
|
2306
|
-
item.meta ? /* @__PURE__ */ (0,
|
|
2677
|
+
) }) : item.media ? item.media : item.icon ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "violet", children: item.icon }) }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.ThemeIcon, { size: "xl", radius: "xl", variant: "light", color: "gray", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(GdsIcons.Info, { size: "1.25rem" }) }) }),
|
|
2678
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_core41.Stack, { gap: "xs", children: [
|
|
2679
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Title, { order: 4, children: item.title }),
|
|
2680
|
+
item.description ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Text, { c: "dimmed", children: item.description }) : null,
|
|
2681
|
+
item.meta ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_core41.Text, { size: "sm", c: "dimmed", children: item.meta }) : null
|
|
2307
2682
|
] })
|
|
2308
2683
|
] }) }, item.id)) }) });
|
|
2309
2684
|
}
|
|
2310
2685
|
|
|
2311
2686
|
// src/MapPanel.tsx
|
|
2312
|
-
var
|
|
2313
|
-
var
|
|
2687
|
+
var import_core42 = require("@mantine/core");
|
|
2688
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2314
2689
|
function MapPanel({
|
|
2315
2690
|
title,
|
|
2316
2691
|
description,
|
|
@@ -2326,7 +2701,7 @@ function MapPanel({
|
|
|
2326
2701
|
}) {
|
|
2327
2702
|
let body;
|
|
2328
2703
|
if (loading) {
|
|
2329
|
-
body = /* @__PURE__ */ (0,
|
|
2704
|
+
body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
2330
2705
|
StateBlock,
|
|
2331
2706
|
{
|
|
2332
2707
|
variant: "loading",
|
|
@@ -2336,9 +2711,9 @@ function MapPanel({
|
|
|
2336
2711
|
}
|
|
2337
2712
|
);
|
|
2338
2713
|
} else if (error) {
|
|
2339
|
-
body = /* @__PURE__ */ (0,
|
|
2714
|
+
body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(StateBlock, { variant: "error", title: "Map unavailable", description: error, compact: true });
|
|
2340
2715
|
} else if (!iframeSrc && !renderMap) {
|
|
2341
|
-
body = /* @__PURE__ */ (0,
|
|
2716
|
+
body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
2342
2717
|
StateBlock,
|
|
2343
2718
|
{
|
|
2344
2719
|
variant: "empty",
|
|
@@ -2348,9 +2723,9 @@ function MapPanel({
|
|
|
2348
2723
|
}
|
|
2349
2724
|
);
|
|
2350
2725
|
} else if (renderMap) {
|
|
2351
|
-
body = /* @__PURE__ */ (0,
|
|
2726
|
+
body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Box, { style: { minHeight }, children: renderMap() });
|
|
2352
2727
|
} else {
|
|
2353
|
-
body = /* @__PURE__ */ (0,
|
|
2728
|
+
body = /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.AspectRatio, { ratio: 16 / 9, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
2354
2729
|
"iframe",
|
|
2355
2730
|
{
|
|
2356
2731
|
src: iframeSrc,
|
|
@@ -2362,21 +2737,21 @@ function MapPanel({
|
|
|
2362
2737
|
}
|
|
2363
2738
|
) });
|
|
2364
2739
|
}
|
|
2365
|
-
return /* @__PURE__ */ (0,
|
|
2366
|
-
/* @__PURE__ */ (0,
|
|
2367
|
-
/* @__PURE__ */ (0,
|
|
2368
|
-
/* @__PURE__ */ (0,
|
|
2369
|
-
description ? /* @__PURE__ */ (0,
|
|
2740
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Stack, { gap: "md", children: [
|
|
2741
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
|
|
2742
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core42.Stack, { gap: 4, children: [
|
|
2743
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Title, { order: 3, children: title }),
|
|
2744
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core42.Text, { size: "sm", c: "dimmed", children: description }) : null
|
|
2370
2745
|
] }),
|
|
2371
|
-
actions ? /* @__PURE__ */ (0,
|
|
2746
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ActionBar, { ...actions }) : null
|
|
2372
2747
|
] }),
|
|
2373
2748
|
body
|
|
2374
2749
|
] }) });
|
|
2375
2750
|
}
|
|
2376
2751
|
|
|
2377
2752
|
// src/PublicFlowShell.tsx
|
|
2378
|
-
var
|
|
2379
|
-
var
|
|
2753
|
+
var import_core43 = require("@mantine/core");
|
|
2754
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
2380
2755
|
var stageTone = {
|
|
2381
2756
|
idle: { label: "Idle", color: "gray" },
|
|
2382
2757
|
loading: { label: "Loading", color: "blue" },
|
|
@@ -2428,7 +2803,7 @@ function PublicFlowShell({
|
|
|
2428
2803
|
const actionBar = toActionBar(stage.actions);
|
|
2429
2804
|
let body = stage.body;
|
|
2430
2805
|
if (stage.status === "loading") {
|
|
2431
|
-
body = /* @__PURE__ */ (0,
|
|
2806
|
+
body = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2432
2807
|
StateBlock,
|
|
2433
2808
|
{
|
|
2434
2809
|
variant: "loading",
|
|
@@ -2437,7 +2812,7 @@ function PublicFlowShell({
|
|
|
2437
2812
|
}
|
|
2438
2813
|
);
|
|
2439
2814
|
} else if (stage.status === "error") {
|
|
2440
|
-
body = errorState ?? /* @__PURE__ */ (0,
|
|
2815
|
+
body = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2441
2816
|
StateBlock,
|
|
2442
2817
|
{
|
|
2443
2818
|
variant: "error",
|
|
@@ -2446,7 +2821,7 @@ function PublicFlowShell({
|
|
|
2446
2821
|
}
|
|
2447
2822
|
);
|
|
2448
2823
|
} else if (!stage.body && !hardwareSurface) {
|
|
2449
|
-
body = emptyState ?? /* @__PURE__ */ (0,
|
|
2824
|
+
body = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
2450
2825
|
EmptyState,
|
|
2451
2826
|
{
|
|
2452
2827
|
title: "No stage content available",
|
|
@@ -2454,29 +2829,29 @@ function PublicFlowShell({
|
|
|
2454
2829
|
}
|
|
2455
2830
|
);
|
|
2456
2831
|
}
|
|
2457
|
-
return /* @__PURE__ */ (0,
|
|
2458
|
-
/* @__PURE__ */ (0,
|
|
2459
|
-
/* @__PURE__ */ (0,
|
|
2460
|
-
eyebrow ? /* @__PURE__ */ (0,
|
|
2461
|
-
/* @__PURE__ */ (0,
|
|
2462
|
-
/* @__PURE__ */ (0,
|
|
2463
|
-
/* @__PURE__ */ (0,
|
|
2832
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Stack, { gap: "lg", children: [
|
|
2833
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
|
|
2834
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Stack, { gap: 4, children: [
|
|
2835
|
+
eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Text, { size: "xs", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
|
|
2836
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_core43.Group, { gap: "sm", wrap: "wrap", children: [
|
|
2837
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Title, { order: 2, children: stage.title }),
|
|
2838
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Badge, { variant: "light", color: tone.color, children: tone.label })
|
|
2464
2839
|
] }),
|
|
2465
|
-
stage.description ? /* @__PURE__ */ (0,
|
|
2840
|
+
stage.description ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Text, { size: "sm", c: "dimmed", children: stage.description }) : null
|
|
2466
2841
|
] }),
|
|
2467
2842
|
exitAction
|
|
2468
2843
|
] }),
|
|
2469
|
-
stage.notice ? /* @__PURE__ */ (0,
|
|
2844
|
+
stage.notice ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core43.Text, { size: "sm", c: "dimmed", children: stage.notice }) : null,
|
|
2470
2845
|
body,
|
|
2471
2846
|
hardwareSurface,
|
|
2472
2847
|
stage.aside,
|
|
2473
|
-
actionBar ? /* @__PURE__ */ (0,
|
|
2848
|
+
actionBar ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ActionBar, { ...actionBar }) : null
|
|
2474
2849
|
] }) });
|
|
2475
2850
|
}
|
|
2476
2851
|
|
|
2477
2852
|
// src/PlaybackSurface.tsx
|
|
2478
|
-
var
|
|
2479
|
-
var
|
|
2853
|
+
var import_core44 = require("@mantine/core");
|
|
2854
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2480
2855
|
var stateTone = {
|
|
2481
2856
|
loading: { label: "Loading", color: "blue" },
|
|
2482
2857
|
ready: { label: "Ready", color: "teal" },
|
|
@@ -2499,7 +2874,7 @@ function PlaybackSurface({
|
|
|
2499
2874
|
const tone = stateTone[state];
|
|
2500
2875
|
let content;
|
|
2501
2876
|
if (state === "loading") {
|
|
2502
|
-
content = /* @__PURE__ */ (0,
|
|
2877
|
+
content = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2503
2878
|
StateBlock,
|
|
2504
2879
|
{
|
|
2505
2880
|
variant: "loading",
|
|
@@ -2508,7 +2883,7 @@ function PlaybackSurface({
|
|
|
2508
2883
|
}
|
|
2509
2884
|
);
|
|
2510
2885
|
} else if (state === "empty") {
|
|
2511
|
-
content = emptyState ?? /* @__PURE__ */ (0,
|
|
2886
|
+
content = emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2512
2887
|
EmptyState,
|
|
2513
2888
|
{
|
|
2514
2889
|
title: "No playback content available",
|
|
@@ -2516,7 +2891,7 @@ function PlaybackSurface({
|
|
|
2516
2891
|
}
|
|
2517
2892
|
);
|
|
2518
2893
|
} else if (state === "error") {
|
|
2519
|
-
content = errorState ?? /* @__PURE__ */ (0,
|
|
2894
|
+
content = errorState ?? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2520
2895
|
StateBlock,
|
|
2521
2896
|
{
|
|
2522
2897
|
variant: "error",
|
|
@@ -2525,23 +2900,23 @@ function PlaybackSurface({
|
|
|
2525
2900
|
}
|
|
2526
2901
|
);
|
|
2527
2902
|
} else {
|
|
2528
|
-
content = /* @__PURE__ */ (0,
|
|
2903
|
+
content = /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Stack, { gap: "md", children: [
|
|
2529
2904
|
media,
|
|
2530
2905
|
overlays
|
|
2531
2906
|
] });
|
|
2532
2907
|
}
|
|
2533
|
-
return /* @__PURE__ */ (0,
|
|
2534
|
-
title || statusMessage || controls ? /* @__PURE__ */ (0,
|
|
2535
|
-
/* @__PURE__ */ (0,
|
|
2536
|
-
title ? /* @__PURE__ */ (0,
|
|
2537
|
-
statusMessage ? /* @__PURE__ */ (0,
|
|
2908
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Paper, { withBorder: true, radius: "xl", p: "lg", "data-playback-mode": mode, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Stack, { gap: "md", children: [
|
|
2909
|
+
title || statusMessage || controls ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
|
|
2910
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Stack, { gap: 4, children: [
|
|
2911
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Title, { order: 3, children: title }) : null,
|
|
2912
|
+
statusMessage ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Text, { size: "sm", c: "dimmed", children: statusMessage }) : null
|
|
2538
2913
|
] }),
|
|
2539
|
-
/* @__PURE__ */ (0,
|
|
2540
|
-
/* @__PURE__ */ (0,
|
|
2914
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_core44.Group, { gap: "sm", align: "center", wrap: "wrap", children: [
|
|
2915
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_core44.Badge, { variant: "light", color: tone.color, children: tone.label }),
|
|
2541
2916
|
controls
|
|
2542
2917
|
] })
|
|
2543
2918
|
] }) : null,
|
|
2544
|
-
state === "degraded" ? /* @__PURE__ */ (0,
|
|
2919
|
+
state === "degraded" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
2545
2920
|
StateBlock,
|
|
2546
2921
|
{
|
|
2547
2922
|
variant: "info",
|
|
@@ -2555,9 +2930,9 @@ function PlaybackSurface({
|
|
|
2555
2930
|
}
|
|
2556
2931
|
|
|
2557
2932
|
// src/ShareButtonGroup.tsx
|
|
2558
|
-
var
|
|
2559
|
-
var
|
|
2560
|
-
var
|
|
2933
|
+
var import_react7 = require("react");
|
|
2934
|
+
var import_core45 = require("@mantine/core");
|
|
2935
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2561
2936
|
var channelLabels = {
|
|
2562
2937
|
native: "Share",
|
|
2563
2938
|
copy: "Copy link",
|
|
@@ -2592,9 +2967,9 @@ function ShareAction({
|
|
|
2592
2967
|
const label = channelLabels[channel];
|
|
2593
2968
|
const Icon = channel === "copy" ? GdsIcons.Copy : channel === "mail" ? GdsIcons.Mail : channel === "message" ? GdsIcons.Message : GdsIcons.Refer;
|
|
2594
2969
|
if (compact) {
|
|
2595
|
-
return href ? /* @__PURE__ */ (0,
|
|
2970
|
+
return href ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.ActionIcon, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "subtle", size: "lg", "aria-label": label, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { size: "1rem", stroke: 1.75 }) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.ActionIcon, { variant: "subtle", size: "lg", "aria-label": label, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { size: "1rem", stroke: 1.75 }) });
|
|
2596
2971
|
}
|
|
2597
|
-
return href ? /* @__PURE__ */ (0,
|
|
2972
|
+
return href ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Button, { component: "a", href, target: "_blank", rel: "noreferrer", variant: "default", leftSection: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { size: "1rem", stroke: 1.75 }), children: label }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Button, { variant: "default", leftSection: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { size: "1rem", stroke: 1.75 }), onClick, children: label });
|
|
2598
2973
|
}
|
|
2599
2974
|
function ShareButtonGroup({
|
|
2600
2975
|
url,
|
|
@@ -2605,8 +2980,8 @@ function ShareButtonGroup({
|
|
|
2605
2980
|
label = "Share this",
|
|
2606
2981
|
description
|
|
2607
2982
|
}) {
|
|
2608
|
-
const [copied, setCopied] = (0,
|
|
2609
|
-
const [shared, setShared] = (0,
|
|
2983
|
+
const [copied, setCopied] = (0, import_react7.useState)(false);
|
|
2984
|
+
const [shared, setShared] = (0, import_react7.useState)(false);
|
|
2610
2985
|
const hrefs = encodeShare(url, title, text);
|
|
2611
2986
|
async function handleCopy() {
|
|
2612
2987
|
await navigator.clipboard?.writeText?.(url);
|
|
@@ -2622,29 +2997,29 @@ function ShareButtonGroup({
|
|
|
2622
2997
|
}
|
|
2623
2998
|
await handleCopy();
|
|
2624
2999
|
}
|
|
2625
|
-
return /* @__PURE__ */ (0,
|
|
2626
|
-
/* @__PURE__ */ (0,
|
|
2627
|
-
/* @__PURE__ */ (0,
|
|
2628
|
-
description ? /* @__PURE__ */ (0,
|
|
3000
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core45.Stack, { gap: "sm", children: [
|
|
3001
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_core45.Stack, { gap: 2, children: [
|
|
3002
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { fw: 600, children: label }),
|
|
3003
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "sm", c: "dimmed", children: description }) : null
|
|
2629
3004
|
] }),
|
|
2630
|
-
/* @__PURE__ */ (0,
|
|
3005
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Group, { gap: "sm", wrap: "wrap", children: channels.map((channel) => {
|
|
2631
3006
|
if (channel === "copy") {
|
|
2632
|
-
return /* @__PURE__ */ (0,
|
|
3007
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ShareAction, { channel, compact, onClick: () => void handleCopy() }, channel);
|
|
2633
3008
|
}
|
|
2634
3009
|
if (channel === "native") {
|
|
2635
|
-
return /* @__PURE__ */ (0,
|
|
3010
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ShareAction, { channel, compact, onClick: () => void handleNativeShare() }, channel);
|
|
2636
3011
|
}
|
|
2637
|
-
return /* @__PURE__ */ (0,
|
|
3012
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ShareAction, { channel, compact, href: hrefs[channel] }, channel);
|
|
2638
3013
|
}) }),
|
|
2639
|
-
copied ? /* @__PURE__ */ (0,
|
|
2640
|
-
shared ? /* @__PURE__ */ (0,
|
|
3014
|
+
copied ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "sm", c: "teal", children: "Link copied." }) : null,
|
|
3015
|
+
shared ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_core45.Text, { size: "sm", c: "teal", children: "Share sheet opened." }) : null
|
|
2641
3016
|
] });
|
|
2642
3017
|
}
|
|
2643
3018
|
|
|
2644
3019
|
// src/UploadDropzone.tsx
|
|
2645
|
-
var
|
|
2646
|
-
var
|
|
2647
|
-
var
|
|
3020
|
+
var import_react8 = require("react");
|
|
3021
|
+
var import_core46 = require("@mantine/core");
|
|
3022
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
2648
3023
|
function UploadDropzone({
|
|
2649
3024
|
title,
|
|
2650
3025
|
description,
|
|
@@ -2654,8 +3029,8 @@ function UploadDropzone({
|
|
|
2654
3029
|
actionLabel = "Choose files",
|
|
2655
3030
|
mode = "panel"
|
|
2656
3031
|
}) {
|
|
2657
|
-
const inputRef = (0,
|
|
2658
|
-
const [dragging, setDragging] = (0,
|
|
3032
|
+
const inputRef = (0, import_react8.useRef)(null);
|
|
3033
|
+
const [dragging, setDragging] = (0, import_react8.useState)(false);
|
|
2659
3034
|
const UploadIcon = GdsIcons.Upload;
|
|
2660
3035
|
const forwardFiles = (files) => {
|
|
2661
3036
|
if (!files?.length || !onFilesSelected) {
|
|
@@ -2663,8 +3038,8 @@ function UploadDropzone({
|
|
|
2663
3038
|
}
|
|
2664
3039
|
onFilesSelected(Array.from(files));
|
|
2665
3040
|
};
|
|
2666
|
-
return /* @__PURE__ */ (0,
|
|
2667
|
-
|
|
3041
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
|
|
3042
|
+
import_core46.Box,
|
|
2668
3043
|
{
|
|
2669
3044
|
onDragOver: (event) => {
|
|
2670
3045
|
event.preventDefault();
|
|
@@ -2683,7 +3058,7 @@ function UploadDropzone({
|
|
|
2683
3058
|
background: dragging ? "var(--mantine-color-violet-light)" : "transparent"
|
|
2684
3059
|
},
|
|
2685
3060
|
children: [
|
|
2686
|
-
/* @__PURE__ */ (0,
|
|
3061
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
2687
3062
|
"input",
|
|
2688
3063
|
{
|
|
2689
3064
|
ref: inputRef,
|
|
@@ -2694,11 +3069,11 @@ function UploadDropzone({
|
|
|
2694
3069
|
onChange: (event) => forwardFiles(event.currentTarget.files)
|
|
2695
3070
|
}
|
|
2696
3071
|
),
|
|
2697
|
-
/* @__PURE__ */ (0,
|
|
2698
|
-
/* @__PURE__ */ (0,
|
|
2699
|
-
/* @__PURE__ */ (0,
|
|
2700
|
-
description ? /* @__PURE__ */ (0,
|
|
2701
|
-
/* @__PURE__ */ (0,
|
|
3072
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_core46.Stack, { align: mode === "inline" ? "flex-start" : "center", ta: mode === "inline" ? "left" : "center", gap: "sm", children: [
|
|
3073
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(UploadIcon, { size: "1.5rem" }),
|
|
3074
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Text, { fw: 600, children: title }),
|
|
3075
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Text, { size: "sm", c: "dimmed", children: description }) : null,
|
|
3076
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_core46.Button, { variant: "light", onClick: () => inputRef.current?.click(), children: actionLabel }) })
|
|
2702
3077
|
] })
|
|
2703
3078
|
]
|
|
2704
3079
|
}
|
|
@@ -2706,22 +3081,8 @@ function UploadDropzone({
|
|
|
2706
3081
|
}
|
|
2707
3082
|
|
|
2708
3083
|
// src/MediaField.tsx
|
|
2709
|
-
var
|
|
2710
|
-
|
|
2711
|
-
// src/FormField.tsx
|
|
2712
|
-
var import_core43 = require("@mantine/core");
|
|
2713
|
-
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
2714
|
-
function FormField({ label, description, error, children }) {
|
|
2715
|
-
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core43.Box, { component: "label", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_core43.Stack, { gap: 4, children: [
|
|
2716
|
-
typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core43.Text, { size: "xs", fw: 600, c: "dimmed", children: label }) : label,
|
|
2717
|
-
description ? typeof description === "string" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core43.Text, { size: "xs", c: "dimmed", children: description }) : description : null,
|
|
2718
|
-
children,
|
|
2719
|
-
error ? typeof error === "string" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_core43.Text, { size: "xs", c: "red.7", children: error }) : error : null
|
|
2720
|
-
] }) });
|
|
2721
|
-
}
|
|
2722
|
-
|
|
2723
|
-
// src/MediaField.tsx
|
|
2724
|
-
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
3084
|
+
var import_core47 = require("@mantine/core");
|
|
3085
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
2725
3086
|
var stateLabels = {
|
|
2726
3087
|
empty: { label: "Empty", color: "gray" },
|
|
2727
3088
|
selected: { label: "Selected", color: "blue" },
|
|
@@ -2749,32 +3110,32 @@ function MediaField({
|
|
|
2749
3110
|
mode = "stacked"
|
|
2750
3111
|
}) {
|
|
2751
3112
|
const stateBadge = stateLabels[state];
|
|
2752
|
-
const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ (0,
|
|
2753
|
-
const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ (0,
|
|
2754
|
-
return /* @__PURE__ */ (0,
|
|
3113
|
+
const resolvedRemoveAction = removeAction ?? (onRemove ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Button, { type: "button", variant: "light", color: "red", onClick: onRemove, children: "Remove" }) : null);
|
|
3114
|
+
const resolvedResetAction = resetAction ?? (onReset ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Button, { type: "button", variant: "default", onClick: onReset, children: "Reset" }) : null);
|
|
3115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
2755
3116
|
FormField,
|
|
2756
3117
|
{
|
|
2757
3118
|
label,
|
|
2758
3119
|
description,
|
|
2759
3120
|
error,
|
|
2760
|
-
children: /* @__PURE__ */ (0,
|
|
2761
|
-
/* @__PURE__ */ (0,
|
|
2762
|
-
/* @__PURE__ */ (0,
|
|
3121
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Paper, { withBorder: true, radius: "xl", p: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Stack, { gap: "md", children: [
|
|
3122
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Group, { justify: "flex-end", align: "center", gap: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Group, { gap: "xs", justify: "flex-end", children: [
|
|
3123
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Badge, { variant: "light", color: stateBadge.color, children: stateBadge.label }),
|
|
2763
3124
|
statusAction
|
|
2764
3125
|
] }) }),
|
|
2765
3126
|
preview ? preview : null,
|
|
2766
|
-
uploadControl || urlInput ? /* @__PURE__ */ (0,
|
|
2767
|
-
/* @__PURE__ */ (0,
|
|
2768
|
-
/* @__PURE__ */ (0,
|
|
3127
|
+
uploadControl || urlInput ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
|
|
3128
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Divider, {}),
|
|
3129
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Stack, { gap: "sm", style: mode === "split" ? { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" } : void 0, children: [
|
|
2769
3130
|
uploadControl,
|
|
2770
3131
|
urlInput
|
|
2771
3132
|
] })
|
|
2772
3133
|
] }) : null,
|
|
2773
|
-
value ? /* @__PURE__ */ (0,
|
|
2774
|
-
helpText ? /* @__PURE__ */ (0,
|
|
2775
|
-
policyText ? /* @__PURE__ */ (0,
|
|
3134
|
+
value ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Text, { size: "sm", c: "dimmed", style: { wordBreak: "break-all" }, children: value }) : null,
|
|
3135
|
+
helpText ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Text, { size: "sm", c: "dimmed", children: helpText }) : null,
|
|
3136
|
+
policyText ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_core47.Text, { size: "sm", c: error ? "red.7" : "dimmed", children: policyText }) : null,
|
|
2776
3137
|
typeof error !== "string" && error ? error : null,
|
|
2777
|
-
resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ (0,
|
|
3138
|
+
resolvedRemoveAction || resolvedResetAction ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_core47.Group, { gap: "sm", children: [
|
|
2778
3139
|
resolvedResetAction,
|
|
2779
3140
|
retryAction,
|
|
2780
3141
|
resolvedRemoveAction
|
|
@@ -2785,50 +3146,50 @@ function MediaField({
|
|
|
2785
3146
|
}
|
|
2786
3147
|
|
|
2787
3148
|
// src/MediaCard.tsx
|
|
2788
|
-
var
|
|
2789
|
-
var
|
|
3149
|
+
var import_core48 = require("@mantine/core");
|
|
3150
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2790
3151
|
function MediaCard({ title, image, description, status, overlay, actions = [] }) {
|
|
2791
3152
|
const EyeIcon = GdsIcons.Eye;
|
|
2792
|
-
return /* @__PURE__ */ (0,
|
|
2793
|
-
/* @__PURE__ */ (0,
|
|
3153
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Card, { withBorder: true, radius: "lg", padding: "md", children: [
|
|
3154
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Card.Section, { pos: "relative", children: [
|
|
2794
3155
|
image,
|
|
2795
|
-
overlay ? /* @__PURE__ */ (0,
|
|
3156
|
+
overlay ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { position: "absolute", inset: 12, display: "flex", justifyContent: "flex-end", alignItems: "flex-start" }, children: overlay }) : null
|
|
2796
3157
|
] }),
|
|
2797
|
-
/* @__PURE__ */ (0,
|
|
2798
|
-
/* @__PURE__ */ (0,
|
|
2799
|
-
/* @__PURE__ */ (0,
|
|
2800
|
-
/* @__PURE__ */ (0,
|
|
2801
|
-
description ? /* @__PURE__ */ (0,
|
|
3158
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Stack, { gap: "sm", mt: "md", children: [
|
|
3159
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Group, { justify: "space-between", align: "flex-start", children: [
|
|
3160
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_core48.Stack, { gap: 4, children: [
|
|
3161
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Title, { order: 4, children: title }),
|
|
3162
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Text, { size: "sm", c: "dimmed", lineClamp: 2, children: description }) : null
|
|
2802
3163
|
] }),
|
|
2803
|
-
status ? /* @__PURE__ */ (0,
|
|
3164
|
+
status ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Badge, { variant: "light", children: status }) : null
|
|
2804
3165
|
] }),
|
|
2805
|
-
actions.length ? /* @__PURE__ */ (0,
|
|
3166
|
+
actions.length ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.Group, { justify: "flex-end", gap: "xs", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_core48.ActionIcon, { variant: "light", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(EyeIcon, { size: "1rem" }) }, action.label)) }) : null
|
|
2806
3167
|
] })
|
|
2807
3168
|
] });
|
|
2808
3169
|
}
|
|
2809
3170
|
|
|
2810
3171
|
// src/AccessSummary.tsx
|
|
2811
|
-
var
|
|
2812
|
-
var
|
|
3172
|
+
var import_core49 = require("@mantine/core");
|
|
3173
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
2813
3174
|
function AccessSummary({ title, roles, scope, blocked = false, description }) {
|
|
2814
|
-
return /* @__PURE__ */ (0,
|
|
2815
|
-
/* @__PURE__ */ (0,
|
|
2816
|
-
/* @__PURE__ */ (0,
|
|
2817
|
-
/* @__PURE__ */ (0,
|
|
3175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Card, { withBorder: true, radius: "lg", padding: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Stack, { gap: "sm", children: [
|
|
3176
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Group, { justify: "space-between", align: "center", children: [
|
|
3177
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Title, { order: 4, children: title }),
|
|
3178
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Badge, { color: blocked ? "red" : "teal", variant: "light", children: blocked ? "Blocked" : "Allowed" })
|
|
2818
3179
|
] }),
|
|
2819
|
-
/* @__PURE__ */ (0,
|
|
2820
|
-
scope ? /* @__PURE__ */ (0,
|
|
3180
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Group, { gap: "xs", children: roles.map((role) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Badge, { variant: "outline", children: role }, role)) }),
|
|
3181
|
+
scope ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_core49.Text, { size: "sm", c: "dimmed", children: [
|
|
2821
3182
|
"Scope: ",
|
|
2822
3183
|
scope
|
|
2823
3184
|
] }) : null,
|
|
2824
|
-
description ? /* @__PURE__ */ (0,
|
|
3185
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_core49.Text, { size: "sm", children: description }) : null
|
|
2825
3186
|
] }) });
|
|
2826
3187
|
}
|
|
2827
3188
|
|
|
2828
3189
|
// src/AccessRecoveryPanel.tsx
|
|
2829
|
-
var
|
|
2830
|
-
var
|
|
2831
|
-
var
|
|
3190
|
+
var import_core50 = require("@mantine/core");
|
|
3191
|
+
var import_gds_theme5 = require("@doneisbetter/gds-theme");
|
|
3192
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
2832
3193
|
var stateBlockVariantByState = {
|
|
2833
3194
|
unauthenticated: "permission",
|
|
2834
3195
|
"expired-session": "info",
|
|
@@ -2897,7 +3258,7 @@ function ActionGroup({
|
|
|
2897
3258
|
if (actions.length === 0) {
|
|
2898
3259
|
return null;
|
|
2899
3260
|
}
|
|
2900
|
-
return /* @__PURE__ */ (0,
|
|
3261
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_core50.Group, { gap: "sm", justify: "center", wrap: "wrap", children: actions.map((actionConfig, index) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
2901
3262
|
SemanticButton,
|
|
2902
3263
|
{
|
|
2903
3264
|
action: actionConfig.action,
|
|
@@ -2923,7 +3284,7 @@ function AccessRecoveryPanel({
|
|
|
2923
3284
|
supportAction,
|
|
2924
3285
|
compact = false
|
|
2925
3286
|
}) {
|
|
2926
|
-
const { t } = (0,
|
|
3287
|
+
const { t } = (0, import_gds_theme5.useGdsTranslation)();
|
|
2927
3288
|
const defaultCopy = defaultCopyByState[state];
|
|
2928
3289
|
const defaults = defaultActionsForState(state, {
|
|
2929
3290
|
onRetry,
|
|
@@ -2931,14 +3292,14 @@ function AccessRecoveryPanel({
|
|
|
2931
3292
|
onBack,
|
|
2932
3293
|
supportAction
|
|
2933
3294
|
});
|
|
2934
|
-
return /* @__PURE__ */ (0,
|
|
3295
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
2935
3296
|
StateBlock,
|
|
2936
3297
|
{
|
|
2937
3298
|
variant: stateBlockVariantByState[state],
|
|
2938
3299
|
compact,
|
|
2939
3300
|
title: title ?? t(`gds.accessRecovery.${state}.title`, defaultCopy.title),
|
|
2940
3301
|
description: description ?? t(`gds.accessRecovery.${state}.description`, defaultCopy.description),
|
|
2941
|
-
action: /* @__PURE__ */ (0,
|
|
3302
|
+
action: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
2942
3303
|
ActionGroup,
|
|
2943
3304
|
{
|
|
2944
3305
|
primaryAction: primaryAction ?? defaults.primary,
|
|
@@ -2951,8 +3312,8 @@ function AccessRecoveryPanel({
|
|
|
2951
3312
|
}
|
|
2952
3313
|
|
|
2953
3314
|
// src/PageHeader.tsx
|
|
2954
|
-
var
|
|
2955
|
-
var
|
|
3315
|
+
var import_core51 = require("@mantine/core");
|
|
3316
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
2956
3317
|
function PageHeader({
|
|
2957
3318
|
title,
|
|
2958
3319
|
description,
|
|
@@ -2963,19 +3324,19 @@ function PageHeader({
|
|
|
2963
3324
|
}) {
|
|
2964
3325
|
const resolvedDescription = description ?? subtitle;
|
|
2965
3326
|
const eyebrowProps = eyebrowVariant === "ornamental" ? { tt: "uppercase", style: { letterSpacing: "0.12em" } } : {};
|
|
2966
|
-
return /* @__PURE__ */ (0,
|
|
2967
|
-
/* @__PURE__ */ (0,
|
|
2968
|
-
eyebrow && /* @__PURE__ */ (0,
|
|
2969
|
-
/* @__PURE__ */ (0,
|
|
2970
|
-
resolvedDescription && /* @__PURE__ */ (0,
|
|
3327
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core51.Group, { justify: "space-between", align: "flex-start", gap: "lg", wrap: "wrap", children: [
|
|
3328
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_core51.Stack, { gap: "xs", children: [
|
|
3329
|
+
eyebrow && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Text, { size: "xs", fw: 700, c: "dimmed", ...eyebrowProps, children: eyebrow }),
|
|
3330
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Title, { order: 1, children: title }),
|
|
3331
|
+
resolvedDescription && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Text, { c: "dimmed", maw: 720, children: resolvedDescription })
|
|
2971
3332
|
] }),
|
|
2972
|
-
actions ? /* @__PURE__ */ (0,
|
|
3333
|
+
actions ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_core51.Box, { children: actions }) : null
|
|
2973
3334
|
] });
|
|
2974
3335
|
}
|
|
2975
3336
|
|
|
2976
3337
|
// src/FilterDrawer.tsx
|
|
2977
|
-
var
|
|
2978
|
-
var
|
|
3338
|
+
var import_core52 = require("@mantine/core");
|
|
3339
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
2979
3340
|
function FilterDrawer({
|
|
2980
3341
|
opened,
|
|
2981
3342
|
onClose,
|
|
@@ -2991,8 +3352,8 @@ function FilterDrawer({
|
|
|
2991
3352
|
}) {
|
|
2992
3353
|
const resolvedPrimaryAction = applyAction ?? primaryAction;
|
|
2993
3354
|
const resolvedSecondaryAction = resetAction ?? secondaryAction;
|
|
2994
|
-
return /* @__PURE__ */ (0,
|
|
2995
|
-
|
|
3355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
3356
|
+
import_core52.Drawer,
|
|
2996
3357
|
{
|
|
2997
3358
|
opened,
|
|
2998
3359
|
onClose,
|
|
@@ -3000,11 +3361,11 @@ function FilterDrawer({
|
|
|
3000
3361
|
position: mode === "bottom-sheet" ? "bottom" : "right",
|
|
3001
3362
|
size: mode === "bottom-sheet" ? "auto" : "md",
|
|
3002
3363
|
radius: mode === "bottom-sheet" ? "xl" : void 0,
|
|
3003
|
-
children: /* @__PURE__ */ (0,
|
|
3004
|
-
description ? /* @__PURE__ */ (0,
|
|
3364
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core52.Stack, { gap: "md", children: [
|
|
3365
|
+
description ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_core52.Text, { size: "sm", c: "dimmed", children: description }) : null,
|
|
3005
3366
|
children,
|
|
3006
|
-
resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ (0,
|
|
3007
|
-
/* @__PURE__ */ (0,
|
|
3367
|
+
resolvedPrimaryAction || resolvedSecondaryAction || closeAction ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core52.Group, { justify: "space-between", mt: "md", children: [
|
|
3368
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_core52.Group, { gap: "sm", children: [
|
|
3008
3369
|
closeAction,
|
|
3009
3370
|
resolvedSecondaryAction
|
|
3010
3371
|
] }),
|
|
@@ -3016,8 +3377,8 @@ function FilterDrawer({
|
|
|
3016
3377
|
}
|
|
3017
3378
|
|
|
3018
3379
|
// src/PlaceholderPanel.tsx
|
|
3019
|
-
var
|
|
3020
|
-
var
|
|
3380
|
+
var import_core53 = require("@mantine/core");
|
|
3381
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
3021
3382
|
function PlaceholderPanel({
|
|
3022
3383
|
title,
|
|
3023
3384
|
description,
|
|
@@ -3027,16 +3388,16 @@ function PlaceholderPanel({
|
|
|
3027
3388
|
mode
|
|
3028
3389
|
}) {
|
|
3029
3390
|
if (mode === "live" && children) {
|
|
3030
|
-
return /* @__PURE__ */ (0,
|
|
3391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, { children });
|
|
3031
3392
|
}
|
|
3032
|
-
return /* @__PURE__ */ (0,
|
|
3033
|
-
badge ? /* @__PURE__ */ (0,
|
|
3034
|
-
/* @__PURE__ */ (0,
|
|
3035
|
-
/* @__PURE__ */ (0,
|
|
3036
|
-
/* @__PURE__ */ (0,
|
|
3393
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Card, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_core53.Stack, { gap: "md", children: [
|
|
3394
|
+
badge ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Badge, { variant: "light", color: "blue", w: "fit-content", children: badge }) : null,
|
|
3395
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_core53.Stack, { gap: "xs", children: [
|
|
3396
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Title, { order: 4, children: title }),
|
|
3397
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Text, { c: "dimmed", children: description })
|
|
3037
3398
|
] }),
|
|
3038
|
-
footer ? /* @__PURE__ */ (0,
|
|
3039
|
-
/* @__PURE__ */ (0,
|
|
3399
|
+
footer ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_core53.Text, { size: "sm", children: footer }) : null,
|
|
3400
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
3040
3401
|
StateBlock,
|
|
3041
3402
|
{
|
|
3042
3403
|
variant: "not-enough-data",
|
|
@@ -3049,8 +3410,8 @@ function PlaceholderPanel({
|
|
|
3049
3410
|
}
|
|
3050
3411
|
|
|
3051
3412
|
// src/SimpleDataTable.tsx
|
|
3052
|
-
var
|
|
3053
|
-
var
|
|
3413
|
+
var import_core54 = require("@mantine/core");
|
|
3414
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
3054
3415
|
function SimpleDataTable({
|
|
3055
3416
|
columns,
|
|
3056
3417
|
rows,
|
|
@@ -3061,23 +3422,23 @@ function SimpleDataTable({
|
|
|
3061
3422
|
getRowKey
|
|
3062
3423
|
}) {
|
|
3063
3424
|
if (error) {
|
|
3064
|
-
return /* @__PURE__ */ (0,
|
|
3425
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StateBlock, { variant: "error", title: "Unable to load data", description: error, compact: true });
|
|
3065
3426
|
}
|
|
3066
3427
|
if (loading) {
|
|
3067
|
-
return /* @__PURE__ */ (0,
|
|
3428
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StateBlock, { variant: "loading", title: "Loading data", description: "Please wait while the shared dataset is prepared.", compact: true });
|
|
3068
3429
|
}
|
|
3069
3430
|
if (!rows.length) {
|
|
3070
|
-
return /* @__PURE__ */ (0,
|
|
3431
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, compact: true });
|
|
3071
3432
|
}
|
|
3072
|
-
return /* @__PURE__ */ (0,
|
|
3073
|
-
/* @__PURE__ */ (0,
|
|
3074
|
-
/* @__PURE__ */ (0,
|
|
3433
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_core54.Table, { striped: true, highlightOnHover: true, withTableBorder: true, withColumnBorders: true, children: [
|
|
3434
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Th, { children: column.header }, String(column.key))) }) }),
|
|
3435
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Tbody, { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Tr, { children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_core54.Table.Td, { children: column.render ? column.render(row) : String(row[column.key] ?? "") }, String(column.key))) }, getRowKey ? getRowKey(row, index) : index)) })
|
|
3075
3436
|
] }) });
|
|
3076
3437
|
}
|
|
3077
3438
|
|
|
3078
3439
|
// src/StatsSection.tsx
|
|
3079
|
-
var
|
|
3080
|
-
var
|
|
3440
|
+
var import_core55 = require("@mantine/core");
|
|
3441
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
3081
3442
|
function StatsSection({
|
|
3082
3443
|
title,
|
|
3083
3444
|
loading = false,
|
|
@@ -3089,11 +3450,11 @@ function StatsSection({
|
|
|
3089
3450
|
}) {
|
|
3090
3451
|
let content = children;
|
|
3091
3452
|
if (error) {
|
|
3092
|
-
content = /* @__PURE__ */ (0,
|
|
3453
|
+
content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StateBlock, { variant: "error", title: "Unable to load statistics", description: error, compact: true });
|
|
3093
3454
|
} else if (loading) {
|
|
3094
|
-
content = /* @__PURE__ */ (0,
|
|
3455
|
+
content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(StateBlock, { variant: "loading", title: "Loading statistics", description: "This shared data surface is still synchronizing.", compact: true });
|
|
3095
3456
|
} else if (belowThreshold) {
|
|
3096
|
-
content = /* @__PURE__ */ (0,
|
|
3457
|
+
content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
3097
3458
|
StateBlock,
|
|
3098
3459
|
{
|
|
3099
3460
|
variant: "not-enough-data",
|
|
@@ -3103,10 +3464,10 @@ function StatsSection({
|
|
|
3103
3464
|
}
|
|
3104
3465
|
);
|
|
3105
3466
|
} else if (placeholder) {
|
|
3106
|
-
content = /* @__PURE__ */ (0,
|
|
3467
|
+
content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PlaceholderPanel, { ...placeholder, mode: "placeholder" });
|
|
3107
3468
|
}
|
|
3108
|
-
return /* @__PURE__ */ (0,
|
|
3109
|
-
/* @__PURE__ */ (0,
|
|
3469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_core55.Stack, { gap: "md", children: [
|
|
3470
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_core55.Title, { order: 3, children: title }),
|
|
3110
3471
|
content
|
|
3111
3472
|
] });
|
|
3112
3473
|
}
|
|
@@ -4459,6 +4820,10 @@ function getGdsMessages(locale) {
|
|
|
4459
4820
|
PublicProductCard,
|
|
4460
4821
|
PublicShell,
|
|
4461
4822
|
PublicSiteFooter,
|
|
4823
|
+
ReferenceLinkGrid,
|
|
4824
|
+
ReferenceLocaleNotice,
|
|
4825
|
+
ReferenceSection,
|
|
4826
|
+
ReferenceThemeExplorer,
|
|
4462
4827
|
SectionPanel,
|
|
4463
4828
|
SemanticButton,
|
|
4464
4829
|
ShareButtonGroup,
|