@mediaradar/design-components 0.15.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +535 -471
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +103 -12
- package/dist/index.d.ts +103 -12
- package/dist/index.js +507 -444
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -35,6 +35,7 @@ __export(index_exports, {
|
|
|
35
35
|
DataScopeFilter: () => DataScopeFilter,
|
|
36
36
|
DateRangeFilter: () => DateRangeFilter,
|
|
37
37
|
DateRangePicker: () => DateRangePicker,
|
|
38
|
+
Delta: () => Delta,
|
|
38
39
|
FilterChipBar: () => FilterChipBar,
|
|
39
40
|
FilterDropdownFooter: () => FilterDropdownFooter,
|
|
40
41
|
Freshness: () => Freshness,
|
|
@@ -554,9 +555,33 @@ function Badge({ tone = "neutral", kind = "label", dot = false, children, classN
|
|
|
554
555
|
);
|
|
555
556
|
}
|
|
556
557
|
|
|
557
|
-
// src/
|
|
558
|
+
// src/Delta.tsx
|
|
558
559
|
var import_lucide_react4 = require("lucide-react");
|
|
559
560
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
561
|
+
function Delta({ value, suffix = "%", arrow = false, period, className }) {
|
|
562
|
+
const up = value >= 0;
|
|
563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
564
|
+
"span",
|
|
565
|
+
{
|
|
566
|
+
className: cn(
|
|
567
|
+
"inline-flex items-center gap-0.5 font-medium tabular-nums",
|
|
568
|
+
up ? "text-text-success" : "text-text-danger",
|
|
569
|
+
className
|
|
570
|
+
),
|
|
571
|
+
children: [
|
|
572
|
+
arrow && (up ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.ArrowUpRight, { size: 13, "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.ArrowDownRight, { size: 13, "aria-hidden": "true" })),
|
|
573
|
+
up ? "+" : "\u2212",
|
|
574
|
+
Math.abs(value).toFixed(1),
|
|
575
|
+
suffix,
|
|
576
|
+
period && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ml-0.5", children: period })
|
|
577
|
+
]
|
|
578
|
+
}
|
|
579
|
+
);
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
// src/CheckBox.tsx
|
|
583
|
+
var import_lucide_react5 = require("lucide-react");
|
|
584
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
560
585
|
function boxClass(on, disabled) {
|
|
561
586
|
return cn(
|
|
562
587
|
"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
|
|
@@ -565,8 +590,8 @@ function boxClass(on, disabled) {
|
|
|
565
590
|
);
|
|
566
591
|
}
|
|
567
592
|
function Glyph({ checked, indeterminate }) {
|
|
568
|
-
if (indeterminate) return /* @__PURE__ */ (0,
|
|
569
|
-
return checked ? /* @__PURE__ */ (0,
|
|
593
|
+
if (indeterminate) return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Minus, { size: 13, strokeWidth: 3 });
|
|
594
|
+
return checked ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.Check, { size: 13, strokeWidth: 3 }) : null;
|
|
570
595
|
}
|
|
571
596
|
function CheckBox({
|
|
572
597
|
checked,
|
|
@@ -580,7 +605,7 @@ function CheckBox({
|
|
|
580
605
|
className
|
|
581
606
|
}) {
|
|
582
607
|
const on = checked || !!indeterminate;
|
|
583
|
-
return /* @__PURE__ */ (0,
|
|
608
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
584
609
|
"button",
|
|
585
610
|
{
|
|
586
611
|
type: "button",
|
|
@@ -604,18 +629,18 @@ function CheckBox({
|
|
|
604
629
|
disabled && "hover:border-border-interactive",
|
|
605
630
|
className
|
|
606
631
|
),
|
|
607
|
-
children: /* @__PURE__ */ (0,
|
|
632
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Glyph, { checked, indeterminate })
|
|
608
633
|
}
|
|
609
634
|
);
|
|
610
635
|
}
|
|
611
636
|
function CheckBoxBox({ checked, indeterminate, disabled, className }) {
|
|
612
|
-
return /* @__PURE__ */ (0,
|
|
637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": "true", className: cn(boxClass(checked || !!indeterminate, disabled), className), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Glyph, { checked, indeterminate }) });
|
|
613
638
|
}
|
|
614
639
|
|
|
615
640
|
// src/DateRangeFilter.tsx
|
|
616
641
|
var import_react3 = require("react");
|
|
617
|
-
var
|
|
618
|
-
var
|
|
642
|
+
var import_lucide_react6 = require("lucide-react");
|
|
643
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
619
644
|
var DEFAULT_SHORTCUTS = [
|
|
620
645
|
"Year to date",
|
|
621
646
|
"Rolling 3 months",
|
|
@@ -821,8 +846,8 @@ function DateRangeFilter({
|
|
|
821
846
|
onRangeChange?.(s, e);
|
|
822
847
|
setOpen(false);
|
|
823
848
|
};
|
|
824
|
-
return /* @__PURE__ */ (0,
|
|
825
|
-
/* @__PURE__ */ (0,
|
|
849
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", ref, children: [
|
|
850
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
826
851
|
"button",
|
|
827
852
|
{
|
|
828
853
|
type: "button",
|
|
@@ -831,16 +856,16 @@ function DateRangeFilter({
|
|
|
831
856
|
"aria-expanded": open,
|
|
832
857
|
className: "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
|
|
833
858
|
children: [
|
|
834
|
-
icon && /* @__PURE__ */ (0,
|
|
835
|
-
/* @__PURE__ */ (0,
|
|
836
|
-
/* @__PURE__ */ (0,
|
|
837
|
-
/* @__PURE__ */ (0,
|
|
859
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "shrink-0 text-text-tertiary", children: icon }),
|
|
860
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
861
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: showDates ? "text-[11px] text-text-tertiary" : "text-[10px] uppercase tracking-wide text-text-tertiary", children: showDates ? displayDatesLine : caption }),
|
|
862
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: displayValue })
|
|
838
863
|
] }),
|
|
839
|
-
/* @__PURE__ */ (0,
|
|
864
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.ChevronDown, { size: 14, "aria-hidden": "true", className: `shrink-0 text-text-secondary transition-transform ${open ? "rotate-180" : ""}` })
|
|
840
865
|
]
|
|
841
866
|
}
|
|
842
867
|
),
|
|
843
|
-
open && /* @__PURE__ */ (0,
|
|
868
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
844
869
|
"div",
|
|
845
870
|
{
|
|
846
871
|
"data-testid": testIdPrefix && `${testIdPrefix}-popover`,
|
|
@@ -848,7 +873,7 @@ function DateRangeFilter({
|
|
|
848
873
|
role: "dialog",
|
|
849
874
|
"aria-label": "Select date range",
|
|
850
875
|
children: [
|
|
851
|
-
/* @__PURE__ */ (0,
|
|
876
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex w-44 shrink-0 flex-col gap-0.5 border-r border-border-default p-2", children: SHORTCUTS.map((s) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
852
877
|
"button",
|
|
853
878
|
{
|
|
854
879
|
type: "button",
|
|
@@ -859,28 +884,28 @@ function DateRangeFilter({
|
|
|
859
884
|
},
|
|
860
885
|
s
|
|
861
886
|
)) }),
|
|
862
|
-
/* @__PURE__ */ (0,
|
|
863
|
-
/* @__PURE__ */ (0,
|
|
864
|
-
/* @__PURE__ */ (0,
|
|
865
|
-
/* @__PURE__ */ (0,
|
|
866
|
-
/* @__PURE__ */ (0,
|
|
887
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col p-4", children: [
|
|
888
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-end gap-3", children: [
|
|
889
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Field, { label: "Start Date", value: start ? fmt(start) : "\u2014" }),
|
|
890
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "pb-2.5 text-text-tertiary", children: "\u2014" }),
|
|
891
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Field, { label: "End Date", value: end ? fmt(end) : start ? fmt(start) : "\u2014" })
|
|
867
892
|
] }),
|
|
868
|
-
/* @__PURE__ */ (0,
|
|
869
|
-
/* @__PURE__ */ (0,
|
|
893
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "my-4 border-t border-border-default" }),
|
|
894
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex gap-8", children: [0, 1].map((offset) => {
|
|
870
895
|
const m = addMonths(leftMonth, offset);
|
|
871
896
|
const grid = monthGrid(m.getFullYear(), m.getMonth());
|
|
872
|
-
return /* @__PURE__ */ (0,
|
|
873
|
-
/* @__PURE__ */ (0,
|
|
874
|
-
offset === 0 ? /* @__PURE__ */ (0,
|
|
875
|
-
/* @__PURE__ */ (0,
|
|
897
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-[252px]", children: [
|
|
898
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
|
|
899
|
+
offset === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, -1)), "aria-label": "Previous month", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.ChevronLeft, { size: 16 }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "h-7 w-7" }),
|
|
900
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "text-[15px] font-semibold text-text-primary", children: [
|
|
876
901
|
MONTHS[m.getMonth()],
|
|
877
902
|
" ",
|
|
878
903
|
m.getFullYear()
|
|
879
904
|
] }),
|
|
880
|
-
offset === 1 ? /* @__PURE__ */ (0,
|
|
905
|
+
offset === 1 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, 1)), "aria-label": "Next month", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.ChevronRight, { size: 16 }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "h-7 w-7" })
|
|
881
906
|
] }),
|
|
882
|
-
/* @__PURE__ */ (0,
|
|
883
|
-
WEEKDAYS.map((w) => /* @__PURE__ */ (0,
|
|
907
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid grid-cols-7", children: [
|
|
908
|
+
WEEKDAYS.map((w) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-8 items-center justify-center text-[12px] font-semibold text-text-secondary", children: w }, w)),
|
|
884
909
|
grid.map((d, i) => {
|
|
885
910
|
const inMonth = d.getMonth() === m.getMonth();
|
|
886
911
|
const hasRange = !!(start && end);
|
|
@@ -895,9 +920,9 @@ function DateRangeFilter({
|
|
|
895
920
|
else if (end && isEnd) band = "left-0 right-1/2";
|
|
896
921
|
else band = "left-0 right-0";
|
|
897
922
|
}
|
|
898
|
-
return /* @__PURE__ */ (0,
|
|
899
|
-
band && /* @__PURE__ */ (0,
|
|
900
|
-
/* @__PURE__ */ (0,
|
|
923
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", onClick: () => pickDay(d), className: "relative flex h-9 items-center justify-center", children: [
|
|
924
|
+
band && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: `absolute inset-y-[3px] bg-ai-tint ${band}`, "aria-hidden": "true" }),
|
|
925
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
901
926
|
"span",
|
|
902
927
|
{
|
|
903
928
|
className: `relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[13px] tabular-nums ${endpoint ? "bg-brand-primaryAction font-semibold text-white" : inMonth ? "text-text-primary hover:bg-subtle" : "text-text-tertiary"}`,
|
|
@@ -909,9 +934,9 @@ function DateRangeFilter({
|
|
|
909
934
|
] })
|
|
910
935
|
] }, offset);
|
|
911
936
|
}) }),
|
|
912
|
-
/* @__PURE__ */ (0,
|
|
913
|
-
/* @__PURE__ */ (0,
|
|
914
|
-
/* @__PURE__ */ (0,
|
|
937
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mt-4 flex justify-end gap-2", children: [
|
|
938
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-cancel`, onClick: () => setOpen(false), className: "rounded-control border border-border-default bg-surface px-5 py-2 text-[13px] font-semibold text-text-primary transition-colors hover:bg-subtle", children: "Cancel" }),
|
|
939
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-apply`, onClick: apply, className: "rounded-control bg-brand-primaryAction px-5 py-2 text-[13px] font-semibold text-white transition-[filter] hover:brightness-110", children: "Apply" })
|
|
915
940
|
] })
|
|
916
941
|
] })
|
|
917
942
|
]
|
|
@@ -920,19 +945,19 @@ function DateRangeFilter({
|
|
|
920
945
|
] });
|
|
921
946
|
}
|
|
922
947
|
function Field({ label, value }) {
|
|
923
|
-
return /* @__PURE__ */ (0,
|
|
924
|
-
/* @__PURE__ */ (0,
|
|
925
|
-
/* @__PURE__ */ (0,
|
|
948
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
|
|
949
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[12px] font-medium text-text-secondary", children: label }),
|
|
950
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex h-10 min-w-[140px] items-center rounded-control border border-border-default bg-input px-3 text-[14px] font-medium text-text-primary", children: value })
|
|
926
951
|
] });
|
|
927
952
|
}
|
|
928
953
|
function NavBtn({ children, onClick, ...rest }) {
|
|
929
|
-
return /* @__PURE__ */ (0,
|
|
954
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick, className: "flex h-7 w-7 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary", ...rest, children });
|
|
930
955
|
}
|
|
931
956
|
|
|
932
957
|
// src/SearchBar.tsx
|
|
933
958
|
var import_react4 = require("react");
|
|
934
|
-
var
|
|
935
|
-
var
|
|
959
|
+
var import_lucide_react7 = require("lucide-react");
|
|
960
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
936
961
|
var DEFAULT_SEARCH_MATCH = { mode: "anyWord", wordJoin: "Or" };
|
|
937
962
|
var MODE_LABEL = {
|
|
938
963
|
anyWord: "Any Word",
|
|
@@ -969,7 +994,7 @@ function SearchBar({
|
|
|
969
994
|
};
|
|
970
995
|
}, [open]);
|
|
971
996
|
const showMatch = variant === "filterable" && matchValue;
|
|
972
|
-
return /* @__PURE__ */ (0,
|
|
997
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
973
998
|
"div",
|
|
974
999
|
{
|
|
975
1000
|
className: cx2(
|
|
@@ -977,9 +1002,9 @@ function SearchBar({
|
|
|
977
1002
|
className
|
|
978
1003
|
),
|
|
979
1004
|
children: [
|
|
980
|
-
/* @__PURE__ */ (0,
|
|
981
|
-
/* @__PURE__ */ (0,
|
|
982
|
-
/* @__PURE__ */ (0,
|
|
1005
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex min-w-0 flex-1 items-center gap-2 px-2.5", children: [
|
|
1006
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react7.Search, { size: 15, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
|
|
1007
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
983
1008
|
"input",
|
|
984
1009
|
{
|
|
985
1010
|
type: "text",
|
|
@@ -1003,8 +1028,8 @@ function SearchBar({
|
|
|
1003
1028
|
// token package (insights-studio-prototype's own src/index.css;
|
|
1004
1029
|
// mr-clientapps' own tailwind.config.ts `colors.border.DEFAULT`) --
|
|
1005
1030
|
// an alias this shared component can't rely on existing.
|
|
1006
|
-
/* @__PURE__ */ (0,
|
|
1007
|
-
/* @__PURE__ */ (0,
|
|
1031
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative shrink-0 border-l border-border-default", ref, children: [
|
|
1032
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1008
1033
|
"button",
|
|
1009
1034
|
{
|
|
1010
1035
|
type: "button",
|
|
@@ -1015,8 +1040,8 @@ function SearchBar({
|
|
|
1015
1040
|
className: "flex h-full items-center gap-1 px-2.5 text-[13px] font-medium text-text-primary transition-colors hover:bg-subtle",
|
|
1016
1041
|
children: [
|
|
1017
1042
|
matchValue.mode === "anyWord" ? `${MODE_LABEL.anyWord} (${matchValue.wordJoin})` : MODE_LABEL[matchValue.mode],
|
|
1018
|
-
/* @__PURE__ */ (0,
|
|
1019
|
-
|
|
1043
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1044
|
+
import_lucide_react7.ChevronDown,
|
|
1020
1045
|
{
|
|
1021
1046
|
size: 14,
|
|
1022
1047
|
"aria-hidden": "true",
|
|
@@ -1026,25 +1051,25 @@ function SearchBar({
|
|
|
1026
1051
|
]
|
|
1027
1052
|
}
|
|
1028
1053
|
),
|
|
1029
|
-
open && /* @__PURE__ */ (0,
|
|
1054
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1030
1055
|
"div",
|
|
1031
1056
|
{
|
|
1032
1057
|
role: "dialog",
|
|
1033
1058
|
"aria-label": "Search match type",
|
|
1034
1059
|
"data-testid": testIdPrefix && `${testIdPrefix}-mode-popover`,
|
|
1035
1060
|
className: "absolute right-0 top-[calc(100%+8px)] z-50 w-[400px] rounded-card border border-border-default bg-surface p-3 shadow-overlay",
|
|
1036
|
-
children: /* @__PURE__ */ (0,
|
|
1037
|
-
/* @__PURE__ */ (0,
|
|
1061
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { role: "radiogroup", "aria-label": "Search match type", className: "flex flex-col", children: [
|
|
1062
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1038
1063
|
ModeRow,
|
|
1039
1064
|
{
|
|
1040
1065
|
title: "Any Word Text Search",
|
|
1041
1066
|
selected: matchValue.mode === "anyWord",
|
|
1042
1067
|
onSelect: () => onMatchChange?.({ mode: "anyWord", wordJoin: matchValue.wordJoin }),
|
|
1043
1068
|
testId: testIdPrefix && `${testIdPrefix}-mode-anyWord`,
|
|
1044
|
-
description: /* @__PURE__ */ (0,
|
|
1069
|
+
description: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: "Find creatives that contain your keyword(s) using an \u201COr\u201D (match any) or \u201CAnd\u201D (match all) conditional in any order." }),
|
|
1045
1070
|
infoText: "The Or/And choice applies only when Any Word is the active search mode.",
|
|
1046
|
-
extra: /* @__PURE__ */ (0,
|
|
1047
|
-
/* @__PURE__ */ (0,
|
|
1071
|
+
extra: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center gap-3", children: [
|
|
1072
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1048
1073
|
RadioOption,
|
|
1049
1074
|
{
|
|
1050
1075
|
label: "Or",
|
|
@@ -1053,7 +1078,7 @@ function SearchBar({
|
|
|
1053
1078
|
testId: testIdPrefix && `${testIdPrefix}-word-join-or`
|
|
1054
1079
|
}
|
|
1055
1080
|
),
|
|
1056
|
-
/* @__PURE__ */ (0,
|
|
1081
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1057
1082
|
RadioOption,
|
|
1058
1083
|
{
|
|
1059
1084
|
label: "And",
|
|
@@ -1065,8 +1090,8 @@ function SearchBar({
|
|
|
1065
1090
|
] })
|
|
1066
1091
|
}
|
|
1067
1092
|
),
|
|
1068
|
-
/* @__PURE__ */ (0,
|
|
1069
|
-
/* @__PURE__ */ (0,
|
|
1093
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, {}),
|
|
1094
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1070
1095
|
ModeRow,
|
|
1071
1096
|
{
|
|
1072
1097
|
title: "Exact Match Text Search",
|
|
@@ -1077,8 +1102,8 @@ function SearchBar({
|
|
|
1077
1102
|
infoText: "Keywords are matched as a single contiguous phrase, in the order you typed them."
|
|
1078
1103
|
}
|
|
1079
1104
|
),
|
|
1080
|
-
/* @__PURE__ */ (0,
|
|
1081
|
-
/* @__PURE__ */ (0,
|
|
1105
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, {}),
|
|
1106
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1082
1107
|
ModeRow,
|
|
1083
1108
|
{
|
|
1084
1109
|
title: "Contextual Search",
|
|
@@ -1090,8 +1115,8 @@ function SearchBar({
|
|
|
1090
1115
|
infoText: "Uses semantic matching, so results can include related terms even when the exact keyword isn't present."
|
|
1091
1116
|
}
|
|
1092
1117
|
),
|
|
1093
|
-
/* @__PURE__ */ (0,
|
|
1094
|
-
/* @__PURE__ */ (0,
|
|
1118
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Divider, {}),
|
|
1119
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1095
1120
|
ModeRow,
|
|
1096
1121
|
{
|
|
1097
1122
|
title: "Ad Code Search",
|
|
@@ -1111,7 +1136,7 @@ function SearchBar({
|
|
|
1111
1136
|
);
|
|
1112
1137
|
}
|
|
1113
1138
|
function Divider() {
|
|
1114
|
-
return /* @__PURE__ */ (0,
|
|
1139
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "my-2.5 border-t border-border-default", "aria-hidden": "true" });
|
|
1115
1140
|
}
|
|
1116
1141
|
function ModeRow({
|
|
1117
1142
|
title,
|
|
@@ -1123,7 +1148,7 @@ function ModeRow({
|
|
|
1123
1148
|
onSelect,
|
|
1124
1149
|
testId
|
|
1125
1150
|
}) {
|
|
1126
|
-
return /* @__PURE__ */ (0,
|
|
1151
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1127
1152
|
"div",
|
|
1128
1153
|
{
|
|
1129
1154
|
role: "radio",
|
|
@@ -1139,18 +1164,18 @@ function ModeRow({
|
|
|
1139
1164
|
},
|
|
1140
1165
|
className: "flex cursor-pointer flex-col items-stretch gap-1 rounded-control p-1.5 text-left transition-colors hover:bg-subtle focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
|
|
1141
1166
|
children: [
|
|
1142
|
-
/* @__PURE__ */ (0,
|
|
1143
|
-
/* @__PURE__ */ (0,
|
|
1144
|
-
/* @__PURE__ */ (0,
|
|
1145
|
-
/* @__PURE__ */ (0,
|
|
1146
|
-
/* @__PURE__ */ (0,
|
|
1167
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
|
|
1168
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
|
|
1169
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center gap-1", children: [
|
|
1170
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[14px] font-semibold text-text-primary", children: title }),
|
|
1171
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RowInfoTip, { text: infoText })
|
|
1147
1172
|
] }),
|
|
1148
|
-
badge && /* @__PURE__ */ (0,
|
|
1173
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "rounded-full bg-subtle px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-text-secondary", children: badge }),
|
|
1149
1174
|
extra
|
|
1150
1175
|
] }),
|
|
1151
|
-
selected && /* @__PURE__ */ (0,
|
|
1176
|
+
selected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react7.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": "true", className: "shrink-0 text-brand-primaryAction" })
|
|
1152
1177
|
] }),
|
|
1153
|
-
/* @__PURE__ */ (0,
|
|
1178
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "block text-[12.5px] leading-snug text-text-secondary", children: description })
|
|
1154
1179
|
]
|
|
1155
1180
|
}
|
|
1156
1181
|
);
|
|
@@ -1161,7 +1186,7 @@ function RadioOption({
|
|
|
1161
1186
|
onSelect,
|
|
1162
1187
|
testId
|
|
1163
1188
|
}) {
|
|
1164
|
-
return /* @__PURE__ */ (0,
|
|
1189
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1165
1190
|
"button",
|
|
1166
1191
|
{
|
|
1167
1192
|
type: "button",
|
|
@@ -1174,14 +1199,14 @@ function RadioOption({
|
|
|
1174
1199
|
"aria-checked": checked,
|
|
1175
1200
|
className: "flex items-center gap-1.5 text-[13px] font-medium text-text-primary",
|
|
1176
1201
|
children: [
|
|
1177
|
-
/* @__PURE__ */ (0,
|
|
1202
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1178
1203
|
"span",
|
|
1179
1204
|
{
|
|
1180
1205
|
className: cx2(
|
|
1181
1206
|
"flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
|
|
1182
1207
|
checked ? "border-brand-primaryAction" : "border-border-interactive"
|
|
1183
1208
|
),
|
|
1184
|
-
children: checked && /* @__PURE__ */ (0,
|
|
1209
|
+
children: checked && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "h-2 w-2 rounded-full bg-brand-primaryAction" })
|
|
1185
1210
|
}
|
|
1186
1211
|
),
|
|
1187
1212
|
label
|
|
@@ -1200,8 +1225,8 @@ function RowInfoTip({ text }) {
|
|
|
1200
1225
|
window.addEventListener("mousedown", onDown);
|
|
1201
1226
|
return () => window.removeEventListener("mousedown", onDown);
|
|
1202
1227
|
}, [open]);
|
|
1203
|
-
return /* @__PURE__ */ (0,
|
|
1204
|
-
/* @__PURE__ */ (0,
|
|
1228
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "relative inline-flex shrink-0 items-center", ref, children: [
|
|
1229
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1205
1230
|
"button",
|
|
1206
1231
|
{
|
|
1207
1232
|
type: "button",
|
|
@@ -1212,10 +1237,10 @@ function RowInfoTip({ text }) {
|
|
|
1212
1237
|
"aria-label": "More information",
|
|
1213
1238
|
"aria-expanded": open,
|
|
1214
1239
|
className: "inline-flex text-text-tertiary transition-colors hover:text-text-primary",
|
|
1215
|
-
children: /* @__PURE__ */ (0,
|
|
1240
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react7.AlertCircle, { size: 13, "aria-hidden": "true" })
|
|
1216
1241
|
}
|
|
1217
1242
|
),
|
|
1218
|
-
open && /* @__PURE__ */ (0,
|
|
1243
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1219
1244
|
"span",
|
|
1220
1245
|
{
|
|
1221
1246
|
role: "tooltip",
|
|
@@ -1228,8 +1253,8 @@ function RowInfoTip({ text }) {
|
|
|
1228
1253
|
|
|
1229
1254
|
// src/SectionRail.tsx
|
|
1230
1255
|
var import_react5 = require("react");
|
|
1231
|
-
var
|
|
1232
|
-
var
|
|
1256
|
+
var import_lucide_react8 = require("lucide-react");
|
|
1257
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1233
1258
|
function SectionRail({
|
|
1234
1259
|
title,
|
|
1235
1260
|
titleSerif,
|
|
@@ -1242,20 +1267,20 @@ function SectionRail({
|
|
|
1242
1267
|
const scroll = (direction) => {
|
|
1243
1268
|
scrollRef.current?.scrollBy({ left: direction * 320, behavior: "smooth" });
|
|
1244
1269
|
};
|
|
1245
|
-
return /* @__PURE__ */ (0,
|
|
1246
|
-
/* @__PURE__ */ (0,
|
|
1247
|
-
/* @__PURE__ */ (0,
|
|
1248
|
-
/* @__PURE__ */ (0,
|
|
1270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { className: "flex flex-col gap-4", children: [
|
|
1271
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
|
|
1272
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
|
|
1273
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1249
1274
|
"h2",
|
|
1250
1275
|
{
|
|
1251
1276
|
className: titleSerif ? "font-serif text-2xl font-normal tracking-tight text-text-primary sm:text-[28px]" : "text-xl font-medium tracking-tight text-text-primary sm:text-2xl",
|
|
1252
1277
|
children: title
|
|
1253
1278
|
}
|
|
1254
1279
|
),
|
|
1255
|
-
/* @__PURE__ */ (0,
|
|
1280
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "mt-1 text-sm text-text-secondary", children: subtitle })
|
|
1256
1281
|
] }),
|
|
1257
|
-
/* @__PURE__ */ (0,
|
|
1258
|
-
viewAllLabel && viewAllHref && /* @__PURE__ */ (0,
|
|
1282
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1283
|
+
viewAllLabel && viewAllHref && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1259
1284
|
"a",
|
|
1260
1285
|
{
|
|
1261
1286
|
href: viewAllHref,
|
|
@@ -1266,29 +1291,29 @@ function SectionRail({
|
|
|
1266
1291
|
]
|
|
1267
1292
|
}
|
|
1268
1293
|
),
|
|
1269
|
-
/* @__PURE__ */ (0,
|
|
1294
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1270
1295
|
"button",
|
|
1271
1296
|
{
|
|
1272
1297
|
type: "button",
|
|
1273
1298
|
onClick: () => scroll(-1),
|
|
1274
1299
|
"aria-label": "Previous",
|
|
1275
1300
|
className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border-default text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
|
|
1276
|
-
children: /* @__PURE__ */ (0,
|
|
1301
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react8.ChevronLeft, { size: 16 })
|
|
1277
1302
|
}
|
|
1278
1303
|
),
|
|
1279
|
-
/* @__PURE__ */ (0,
|
|
1304
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1280
1305
|
"button",
|
|
1281
1306
|
{
|
|
1282
1307
|
type: "button",
|
|
1283
1308
|
onClick: () => scroll(1),
|
|
1284
1309
|
"aria-label": "Next",
|
|
1285
1310
|
className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border-default text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
|
|
1286
|
-
children: /* @__PURE__ */ (0,
|
|
1311
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react8.ChevronRight, { size: 16 })
|
|
1287
1312
|
}
|
|
1288
1313
|
)
|
|
1289
1314
|
] })
|
|
1290
1315
|
] }),
|
|
1291
|
-
/* @__PURE__ */ (0,
|
|
1316
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1292
1317
|
"div",
|
|
1293
1318
|
{
|
|
1294
1319
|
ref: scrollRef,
|
|
@@ -1301,8 +1326,8 @@ function SectionRail({
|
|
|
1301
1326
|
|
|
1302
1327
|
// src/DataScopeFilter.tsx
|
|
1303
1328
|
var import_react6 = require("react");
|
|
1304
|
-
var
|
|
1305
|
-
var
|
|
1329
|
+
var import_lucide_react9 = require("lucide-react");
|
|
1330
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1306
1331
|
var FINAL_ONLY_TEXT = "Trims time periods to data that has finalized across the selected media formats. Some formats (e.g. Network TV and Cinema) finalize later, so the most recent periods may still change. Turn on for stable, report-ready numbers.";
|
|
1307
1332
|
function cx3(...classes) {
|
|
1308
1333
|
return classes.filter(Boolean).join(" ");
|
|
@@ -1328,8 +1353,8 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1328
1353
|
onChange(v);
|
|
1329
1354
|
setOpen(false);
|
|
1330
1355
|
};
|
|
1331
|
-
return /* @__PURE__ */ (0,
|
|
1332
|
-
/* @__PURE__ */ (0,
|
|
1356
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative", ref, children: [
|
|
1357
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1333
1358
|
"button",
|
|
1334
1359
|
{
|
|
1335
1360
|
type: "button",
|
|
@@ -1338,12 +1363,12 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1338
1363
|
"aria-haspopup": "listbox",
|
|
1339
1364
|
className: "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
|
|
1340
1365
|
children: [
|
|
1341
|
-
/* @__PURE__ */ (0,
|
|
1342
|
-
/* @__PURE__ */ (0,
|
|
1343
|
-
/* @__PURE__ */ (0,
|
|
1366
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
1367
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: "Data" }),
|
|
1368
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: display })
|
|
1344
1369
|
] }),
|
|
1345
|
-
/* @__PURE__ */ (0,
|
|
1346
|
-
|
|
1370
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1371
|
+
import_lucide_react9.ChevronDown,
|
|
1347
1372
|
{
|
|
1348
1373
|
size: 14,
|
|
1349
1374
|
"aria-hidden": "true",
|
|
@@ -1353,7 +1378,7 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1353
1378
|
]
|
|
1354
1379
|
}
|
|
1355
1380
|
),
|
|
1356
|
-
open && /* @__PURE__ */ (0,
|
|
1381
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1357
1382
|
"div",
|
|
1358
1383
|
{
|
|
1359
1384
|
role: "listbox",
|
|
@@ -1363,8 +1388,8 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1363
1388
|
align === "right" ? "right-0" : "left-0"
|
|
1364
1389
|
),
|
|
1365
1390
|
children: [
|
|
1366
|
-
/* @__PURE__ */ (0,
|
|
1367
|
-
/* @__PURE__ */ (0,
|
|
1391
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Option, { label: "All", selected: !value, onClick: () => choose(false) }),
|
|
1392
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Option, { label: "Final only", selected: value, onClick: () => choose(true), hint: FINAL_ONLY_TEXT })
|
|
1368
1393
|
]
|
|
1369
1394
|
}
|
|
1370
1395
|
)
|
|
@@ -1376,7 +1401,7 @@ function Option({
|
|
|
1376
1401
|
onClick,
|
|
1377
1402
|
hint
|
|
1378
1403
|
}) {
|
|
1379
|
-
const option = /* @__PURE__ */ (0,
|
|
1404
|
+
const option = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1380
1405
|
"button",
|
|
1381
1406
|
{
|
|
1382
1407
|
type: "button",
|
|
@@ -1389,23 +1414,23 @@ function Option({
|
|
|
1389
1414
|
selected ? "font-semibold text-text-primary" : "text-text-secondary"
|
|
1390
1415
|
),
|
|
1391
1416
|
children: [
|
|
1392
|
-
/* @__PURE__ */ (0,
|
|
1417
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react9.Check, { size: 14, "aria-hidden": "true", className: cx3("shrink-0 text-brand-primaryAction", !selected && "invisible") }),
|
|
1393
1418
|
label
|
|
1394
1419
|
]
|
|
1395
1420
|
}
|
|
1396
1421
|
);
|
|
1397
1422
|
if (!hint) return option;
|
|
1398
|
-
return /* @__PURE__ */ (0,
|
|
1423
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center pr-2.5", children: [
|
|
1399
1424
|
option,
|
|
1400
|
-
/* @__PURE__ */ (0,
|
|
1425
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InfoTip, { text: hint, trigger: "hover", label: `About ${label}` })
|
|
1401
1426
|
] });
|
|
1402
1427
|
}
|
|
1403
1428
|
|
|
1404
1429
|
// src/SelectFilter.tsx
|
|
1405
1430
|
var import_react7 = require("react");
|
|
1406
1431
|
var import_react_dom2 = require("react-dom");
|
|
1407
|
-
var
|
|
1408
|
-
var
|
|
1432
|
+
var import_lucide_react10 = require("lucide-react");
|
|
1433
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1409
1434
|
function cx4(...classes) {
|
|
1410
1435
|
return classes.filter(Boolean).join(" ");
|
|
1411
1436
|
}
|
|
@@ -1455,8 +1480,8 @@ function SelectFilter({
|
|
|
1455
1480
|
window.removeEventListener("scroll", reposition, true);
|
|
1456
1481
|
};
|
|
1457
1482
|
}, [open, close, reposition]);
|
|
1458
|
-
return /* @__PURE__ */ (0,
|
|
1459
|
-
/* @__PURE__ */ (0,
|
|
1483
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cx4("relative", fullWidth && "w-full"), ref, children: [
|
|
1484
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
1460
1485
|
"button",
|
|
1461
1486
|
{
|
|
1462
1487
|
type: "button",
|
|
@@ -1470,12 +1495,12 @@ function SelectFilter({
|
|
|
1470
1495
|
className
|
|
1471
1496
|
),
|
|
1472
1497
|
children: [
|
|
1473
|
-
/* @__PURE__ */ (0,
|
|
1474
|
-
/* @__PURE__ */ (0,
|
|
1475
|
-
/* @__PURE__ */ (0,
|
|
1498
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
1499
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
|
|
1500
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
1476
1501
|
] }),
|
|
1477
|
-
/* @__PURE__ */ (0,
|
|
1478
|
-
|
|
1502
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1503
|
+
import_lucide_react10.ChevronDown,
|
|
1479
1504
|
{
|
|
1480
1505
|
size: 14,
|
|
1481
1506
|
"aria-hidden": "true",
|
|
@@ -1486,7 +1511,7 @@ function SelectFilter({
|
|
|
1486
1511
|
}
|
|
1487
1512
|
),
|
|
1488
1513
|
open && pos && (0, import_react_dom2.createPortal)(
|
|
1489
|
-
/* @__PURE__ */ (0,
|
|
1514
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1490
1515
|
"div",
|
|
1491
1516
|
{
|
|
1492
1517
|
ref: popoverRef,
|
|
@@ -1498,9 +1523,9 @@ function SelectFilter({
|
|
|
1498
1523
|
),
|
|
1499
1524
|
role: "listbox",
|
|
1500
1525
|
"aria-label": caption,
|
|
1501
|
-
children: /* @__PURE__ */ (0,
|
|
1526
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "max-h-[280px] overflow-y-auto p-1", children: options.map((o) => {
|
|
1502
1527
|
const selected = o === value;
|
|
1503
|
-
return /* @__PURE__ */ (0,
|
|
1528
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
1504
1529
|
"button",
|
|
1505
1530
|
{
|
|
1506
1531
|
type: "button",
|
|
@@ -1513,8 +1538,8 @@ function SelectFilter({
|
|
|
1513
1538
|
},
|
|
1514
1539
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
1515
1540
|
children: [
|
|
1516
|
-
/* @__PURE__ */ (0,
|
|
1517
|
-
/* @__PURE__ */ (0,
|
|
1541
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center text-brand-primaryAction", children: selected && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react10.Check, { size: 15, strokeWidth: 3 }) }),
|
|
1542
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1518
1543
|
"span",
|
|
1519
1544
|
{
|
|
1520
1545
|
className: cx4("flex-1 text-[14px]", selected ? "font-semibold text-text-primary" : "text-text-primary"),
|
|
@@ -1535,9 +1560,9 @@ function SelectFilter({
|
|
|
1535
1560
|
|
|
1536
1561
|
// src/Card.tsx
|
|
1537
1562
|
var import_react8 = require("react");
|
|
1538
|
-
var
|
|
1563
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1539
1564
|
var Card = (0, import_react8.forwardRef)(function Card2({ staticCard, title, subtitle, action, className, children, ...rest }, ref) {
|
|
1540
|
-
return /* @__PURE__ */ (0,
|
|
1565
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1541
1566
|
"article",
|
|
1542
1567
|
{
|
|
1543
1568
|
ref,
|
|
@@ -1548,23 +1573,23 @@ var Card = (0, import_react8.forwardRef)(function Card2({ staticCard, title, sub
|
|
|
1548
1573
|
className
|
|
1549
1574
|
].filter(Boolean).join(" "),
|
|
1550
1575
|
...rest,
|
|
1551
|
-
children: title ? /* @__PURE__ */ (0,
|
|
1552
|
-
/* @__PURE__ */ (0,
|
|
1553
|
-
/* @__PURE__ */ (0,
|
|
1554
|
-
/* @__PURE__ */ (0,
|
|
1555
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1576
|
+
children: title ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-1 flex-col p-card-padding", children: [
|
|
1577
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
|
|
1578
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
|
|
1579
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-[15px] font-semibold leading-snug text-text-primary", children: title }),
|
|
1580
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 text-[12px] leading-snug text-text-tertiary", children: subtitle })
|
|
1556
1581
|
] }),
|
|
1557
|
-
action && /* @__PURE__ */ (0,
|
|
1582
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "shrink-0 text-text-tertiary", children: action })
|
|
1558
1583
|
] }),
|
|
1559
|
-
/* @__PURE__ */ (0,
|
|
1584
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-4 flex flex-1 flex-col", children })
|
|
1560
1585
|
] }) : children
|
|
1561
1586
|
}
|
|
1562
1587
|
);
|
|
1563
1588
|
});
|
|
1564
1589
|
|
|
1565
1590
|
// src/NoResultsEmptyState.tsx
|
|
1566
|
-
var
|
|
1567
|
-
var
|
|
1591
|
+
var import_lucide_react11 = require("lucide-react");
|
|
1592
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1568
1593
|
var NO_RESULTS_TITLE = "No results match your filters";
|
|
1569
1594
|
var NO_RESULTS_BODY = "Your filters may be too narrow, conflict with each other, or have no activity in this period.";
|
|
1570
1595
|
function noResultsBody(workspaceName) {
|
|
@@ -1586,12 +1611,12 @@ function NoResultsEmptyState({
|
|
|
1586
1611
|
const showClear = hasFilters !== false && Boolean(onClearFilters);
|
|
1587
1612
|
const showEdit = Boolean(onEditFilters);
|
|
1588
1613
|
const hasActions = showClear || showEdit || Boolean(actions && actions.length > 0);
|
|
1589
|
-
return /* @__PURE__ */ (0,
|
|
1590
|
-
/* @__PURE__ */ (0,
|
|
1591
|
-
/* @__PURE__ */ (0,
|
|
1592
|
-
/* @__PURE__ */ (0,
|
|
1593
|
-
hasActions && /* @__PURE__ */ (0,
|
|
1594
|
-
showClear && /* @__PURE__ */ (0,
|
|
1614
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col items-center justify-center gap-3 text-center", "data-testid": testIdPrefix, children: [
|
|
1615
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex h-11 w-11 items-center justify-center rounded-full bg-subtle text-text-tertiary", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react11.FilterX, { size: 20, "aria-hidden": "true" }) }),
|
|
1616
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-base font-semibold text-text-primary", children: title }),
|
|
1617
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "max-w-[420px] text-[13px] leading-relaxed text-text-secondary", children: bodyText }),
|
|
1618
|
+
hasActions && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-1 flex flex-col items-center gap-3", children: [
|
|
1619
|
+
showClear && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1595
1620
|
"button",
|
|
1596
1621
|
{
|
|
1597
1622
|
type: "button",
|
|
@@ -1601,7 +1626,7 @@ function NoResultsEmptyState({
|
|
|
1601
1626
|
children: "Clear all filters"
|
|
1602
1627
|
}
|
|
1603
1628
|
),
|
|
1604
|
-
showEdit && /* @__PURE__ */ (0,
|
|
1629
|
+
showEdit && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1605
1630
|
"button",
|
|
1606
1631
|
{
|
|
1607
1632
|
type: "button",
|
|
@@ -1611,7 +1636,7 @@ function NoResultsEmptyState({
|
|
|
1611
1636
|
children: "Edit filters"
|
|
1612
1637
|
}
|
|
1613
1638
|
),
|
|
1614
|
-
actions?.map((action, i) => /* @__PURE__ */ (0,
|
|
1639
|
+
actions?.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1615
1640
|
"button",
|
|
1616
1641
|
{
|
|
1617
1642
|
type: "button",
|
|
@@ -1627,13 +1652,13 @@ function NoResultsEmptyState({
|
|
|
1627
1652
|
|
|
1628
1653
|
// src/WorkspaceSelectedCard.tsx
|
|
1629
1654
|
var import_react9 = require("react");
|
|
1630
|
-
var
|
|
1631
|
-
var
|
|
1655
|
+
var import_lucide_react12 = require("lucide-react");
|
|
1656
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1632
1657
|
function cx5(...parts) {
|
|
1633
1658
|
return parts.filter(Boolean).join(" ");
|
|
1634
1659
|
}
|
|
1635
1660
|
function WorkspaceSelectedCard({ groups, testIdPrefix }) {
|
|
1636
|
-
return /* @__PURE__ */ (0,
|
|
1661
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("aside", { className: "sticky top-4 flex min-w-0 flex-col gap-4 self-start rounded-card border border-border-default bg-surface px-5 pb-5 pt-4 shadow-raised sm:px-6 sm:pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col divide-y divide-border-default", children: groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SummaryGroupItem, { group: g, testIdPrefix }, g.id)) }) });
|
|
1637
1662
|
}
|
|
1638
1663
|
function SummaryGroupItem({
|
|
1639
1664
|
group,
|
|
@@ -1650,8 +1675,8 @@ function SummaryGroupItem({
|
|
|
1650
1675
|
else if (expandCount === 0) setOpen(false);
|
|
1651
1676
|
wasEmpty.current = expandCount === 0;
|
|
1652
1677
|
}, [expandCount]);
|
|
1653
|
-
return /* @__PURE__ */ (0,
|
|
1654
|
-
/* @__PURE__ */ (0,
|
|
1678
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: nested ? "" : "py-3 first:pt-0 last:pb-0", children: [
|
|
1679
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1655
1680
|
"button",
|
|
1656
1681
|
{
|
|
1657
1682
|
type: "button",
|
|
@@ -1660,45 +1685,45 @@ function SummaryGroupItem({
|
|
|
1660
1685
|
"data-testid": testIdPrefix && `${testIdPrefix}-group-${group.id}`,
|
|
1661
1686
|
className: "flex w-full min-w-0 items-center gap-2 text-left",
|
|
1662
1687
|
children: [
|
|
1663
|
-
/* @__PURE__ */ (0,
|
|
1664
|
-
|
|
1688
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1689
|
+
import_lucide_react12.ChevronDown,
|
|
1665
1690
|
{
|
|
1666
1691
|
size: 14,
|
|
1667
1692
|
"aria-hidden": "true",
|
|
1668
1693
|
className: cx5("shrink-0 text-text-secondary transition-transform", !open && "-rotate-90")
|
|
1669
1694
|
}
|
|
1670
1695
|
),
|
|
1671
|
-
/* @__PURE__ */ (0,
|
|
1672
|
-
/* @__PURE__ */ (0,
|
|
1696
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cx5("truncate font-semibold text-text-primary", nested ? "text-[12px]" : "text-[13px]"), children: group.label }),
|
|
1697
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "shrink-0 rounded-full bg-subtle px-1.5 py-0.5 text-[11px] font-semibold text-text-secondary", children: ownCount })
|
|
1673
1698
|
]
|
|
1674
1699
|
}
|
|
1675
1700
|
),
|
|
1676
|
-
open && /* @__PURE__ */ (0,
|
|
1677
|
-
ownCount > 0 && /* @__PURE__ */ (0,
|
|
1678
|
-
group.items.map((item) => /* @__PURE__ */ (0,
|
|
1701
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "pt-2.5", children: ownCount === 0 && subCount === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-[12px] text-text-secondary", children: "Nothing selected." }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
|
|
1702
|
+
ownCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
|
|
1703
|
+
group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1679
1704
|
"div",
|
|
1680
1705
|
{
|
|
1681
1706
|
className: "flex items-center justify-between gap-2 rounded-control border border-border-default bg-canvas px-2 py-1",
|
|
1682
1707
|
children: [
|
|
1683
|
-
/* @__PURE__ */ (0,
|
|
1684
|
-
/* @__PURE__ */ (0,
|
|
1685
|
-
item.meta && /* @__PURE__ */ (0,
|
|
1708
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "min-w-0 flex-1", children: [
|
|
1709
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "block truncate text-[12px] text-text-primary", children: item.name }),
|
|
1710
|
+
item.meta && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "block truncate text-[11px] text-text-secondary", children: item.meta })
|
|
1686
1711
|
] }),
|
|
1687
|
-
/* @__PURE__ */ (0,
|
|
1712
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1688
1713
|
"button",
|
|
1689
1714
|
{
|
|
1690
1715
|
type: "button",
|
|
1691
1716
|
"aria-label": `Remove ${item.name}`,
|
|
1692
1717
|
onClick: () => group.onRemove(item.id),
|
|
1693
1718
|
className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-control text-text-secondary hover:bg-subtle hover:text-text-danger",
|
|
1694
|
-
children: /* @__PURE__ */ (0,
|
|
1719
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react12.X, { size: 12, "aria-hidden": "true" })
|
|
1695
1720
|
}
|
|
1696
1721
|
)
|
|
1697
1722
|
]
|
|
1698
1723
|
},
|
|
1699
1724
|
item.id
|
|
1700
1725
|
)),
|
|
1701
|
-
/* @__PURE__ */ (0,
|
|
1726
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1702
1727
|
"button",
|
|
1703
1728
|
{
|
|
1704
1729
|
type: "button",
|
|
@@ -1709,13 +1734,13 @@ function SummaryGroupItem({
|
|
|
1709
1734
|
}
|
|
1710
1735
|
)
|
|
1711
1736
|
] }),
|
|
1712
|
-
group.subGroups?.map((sg) => /* @__PURE__ */ (0,
|
|
1737
|
+
group.subGroups?.map((sg) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SummaryGroupItem, { group: sg, nested: true, testIdPrefix }, sg.id))
|
|
1713
1738
|
] }) })
|
|
1714
1739
|
] });
|
|
1715
1740
|
}
|
|
1716
1741
|
|
|
1717
1742
|
// src/chart-placeholder-shared.tsx
|
|
1718
|
-
var
|
|
1743
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1719
1744
|
var GRID_ROWS = [0, 25, 50, 75, 100];
|
|
1720
1745
|
var Y_TICK_WIDTHS = [26, 30, 30, 26, 20];
|
|
1721
1746
|
var Y_AXIS_W = 48;
|
|
@@ -1727,9 +1752,9 @@ function AxisFrame({
|
|
|
1727
1752
|
children
|
|
1728
1753
|
}) {
|
|
1729
1754
|
const gutter = xTicks > 0 ? X_AXIS_H : 0;
|
|
1730
|
-
return /* @__PURE__ */ (0,
|
|
1731
|
-
/* @__PURE__ */ (0,
|
|
1732
|
-
GRID_ROWS.map((pct) => /* @__PURE__ */ (0,
|
|
1755
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-full", style: { height }, role: "presentation", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative h-full w-full", children: [
|
|
1756
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "absolute inset-y-0 right-0", style: { left: Y_AXIS_W, bottom: gutter }, children: [
|
|
1757
|
+
GRID_ROWS.map((pct) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1733
1758
|
"div",
|
|
1734
1759
|
{
|
|
1735
1760
|
className: "absolute inset-x-0 border-t border-dashed",
|
|
@@ -1737,9 +1762,9 @@ function AxisFrame({
|
|
|
1737
1762
|
},
|
|
1738
1763
|
pct
|
|
1739
1764
|
)),
|
|
1740
|
-
/* @__PURE__ */ (0,
|
|
1765
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute inset-0", children })
|
|
1741
1766
|
] }),
|
|
1742
|
-
/* @__PURE__ */ (0,
|
|
1767
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute left-0 top-0", style: { width: Y_AXIS_W, bottom: gutter }, children: GRID_ROWS.map((pct, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1743
1768
|
"div",
|
|
1744
1769
|
{
|
|
1745
1770
|
className: "absolute right-2 h-2 -translate-y-1/2 rounded-xs bg-subtle",
|
|
@@ -1747,27 +1772,27 @@ function AxisFrame({
|
|
|
1747
1772
|
},
|
|
1748
1773
|
pct
|
|
1749
1774
|
)) }),
|
|
1750
|
-
xTicks > 0 && /* @__PURE__ */ (0,
|
|
1775
|
+
xTicks > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1751
1776
|
"div",
|
|
1752
1777
|
{
|
|
1753
1778
|
className: "absolute bottom-0 right-0 flex items-center",
|
|
1754
1779
|
style: { left: Y_AXIS_W, height: X_AXIS_H },
|
|
1755
|
-
children: Array.from({ length: xTicks }, (_, i) => /* @__PURE__ */ (0,
|
|
1780
|
+
children: Array.from({ length: xTicks }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex flex-1 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "h-2 w-full max-w-[26px] rounded-xs bg-subtle" }) }, i))
|
|
1756
1781
|
}
|
|
1757
1782
|
)
|
|
1758
1783
|
] }) });
|
|
1759
1784
|
}
|
|
1760
1785
|
function BlankLegend({ rows, reverse = false }) {
|
|
1761
|
-
return /* @__PURE__ */ (0,
|
|
1786
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1762
1787
|
"ul",
|
|
1763
1788
|
{
|
|
1764
1789
|
className: `flex flex-1 justify-center gap-1.5 ${reverse ? "flex-col-reverse" : "flex-col"}`,
|
|
1765
1790
|
role: "presentation",
|
|
1766
1791
|
"aria-hidden": "true",
|
|
1767
|
-
children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0,
|
|
1768
|
-
/* @__PURE__ */ (0,
|
|
1769
|
-
/* @__PURE__ */ (0,
|
|
1770
|
-
/* @__PURE__ */ (0,
|
|
1792
|
+
children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { className: "flex items-center justify-between gap-2", children: [
|
|
1793
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "flex items-center gap-1.5", children: [
|
|
1794
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "h-2.5 w-2.5 rounded-xs bg-subtle" }),
|
|
1795
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
1771
1796
|
"span",
|
|
1772
1797
|
{
|
|
1773
1798
|
className: "h-2 rounded-xs bg-subtle",
|
|
@@ -1775,21 +1800,21 @@ function BlankLegend({ rows, reverse = false }) {
|
|
|
1775
1800
|
}
|
|
1776
1801
|
)
|
|
1777
1802
|
] }),
|
|
1778
|
-
/* @__PURE__ */ (0,
|
|
1803
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "h-2 w-6 rounded-xs bg-subtle" })
|
|
1779
1804
|
] }, i))
|
|
1780
1805
|
}
|
|
1781
1806
|
);
|
|
1782
1807
|
}
|
|
1783
1808
|
|
|
1784
1809
|
// src/BarChartPlaceholder.tsx
|
|
1785
|
-
var
|
|
1810
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1786
1811
|
var BAR_PROFILE = [92, 86, 76, 65, 57, 40, 30, 24, 18, 13];
|
|
1787
1812
|
function BarChartPlaceholder({ height = 220 }) {
|
|
1788
|
-
return /* @__PURE__ */ (0,
|
|
1813
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AxisFrame, { height, xTicks: BAR_PROFILE.length, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex h-full w-full items-end gap-2", children: BAR_PROFILE.map((pct, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex-1 rounded-t-[3px] bg-subtle", style: { height: `${pct}%` } }, i)) }) });
|
|
1789
1814
|
}
|
|
1790
1815
|
|
|
1791
1816
|
// src/LineChartPlaceholder.tsx
|
|
1792
|
-
var
|
|
1817
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1793
1818
|
var LINE_SERIES = [
|
|
1794
1819
|
[58, 52, 55, 41, 45, 33, 36, 25, 28, 17],
|
|
1795
1820
|
[74, 71, 66, 68, 59, 61, 54, 56, 48, 45],
|
|
@@ -1799,9 +1824,9 @@ var LINE_SERIES = [
|
|
|
1799
1824
|
var LINE_FORECAST_FROM = 7;
|
|
1800
1825
|
function LineChartPlaceholder({ height = 280 }) {
|
|
1801
1826
|
const toPath = (pts, from, to) => pts.slice(from, to).map((y, i) => `${(i + from) / (pts.length - 1) * 100},${y}`).join(" ");
|
|
1802
|
-
return /* @__PURE__ */ (0,
|
|
1803
|
-
/* @__PURE__ */ (0,
|
|
1804
|
-
/* @__PURE__ */ (0,
|
|
1827
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(AxisFrame, { height, xTicks: LINE_SERIES[0].length, children: [
|
|
1828
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 h-full w-full", children: LINE_SERIES.map((pts, s) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("g", { children: [
|
|
1829
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1805
1830
|
"polyline",
|
|
1806
1831
|
{
|
|
1807
1832
|
points: toPath(pts, 0, LINE_FORECAST_FROM + 1),
|
|
@@ -1813,7 +1838,7 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1813
1838
|
strokeLinejoin: "round"
|
|
1814
1839
|
}
|
|
1815
1840
|
),
|
|
1816
|
-
/* @__PURE__ */ (0,
|
|
1841
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1817
1842
|
"polyline",
|
|
1818
1843
|
{
|
|
1819
1844
|
points: toPath(pts, LINE_FORECAST_FROM, pts.length),
|
|
@@ -1828,7 +1853,7 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1828
1853
|
)
|
|
1829
1854
|
] }, s)) }),
|
|
1830
1855
|
LINE_SERIES.map(
|
|
1831
|
-
(pts, s) => pts.map((y, i) => /* @__PURE__ */ (0,
|
|
1856
|
+
(pts, s) => pts.map((y, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1832
1857
|
"div",
|
|
1833
1858
|
{
|
|
1834
1859
|
className: "absolute h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full",
|
|
@@ -1845,16 +1870,16 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1845
1870
|
}
|
|
1846
1871
|
|
|
1847
1872
|
// src/PieChartPlaceholder.tsx
|
|
1848
|
-
var
|
|
1873
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1849
1874
|
var PIE_SEAMS = [0, 115, 180, 230, 262, 288, 310, 332];
|
|
1850
1875
|
function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
|
|
1851
1876
|
const r = 45;
|
|
1852
|
-
return /* @__PURE__ */ (0,
|
|
1853
|
-
/* @__PURE__ */ (0,
|
|
1854
|
-
/* @__PURE__ */ (0,
|
|
1877
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex w-full items-center gap-3", style: { height }, role: "presentation", "aria-hidden": "true", children: [
|
|
1878
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex h-full items-center justify-center", style: { width: "60%" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { viewBox: "0 0 100 100", className: "h-full", style: { aspectRatio: "1 / 1" }, children: [
|
|
1879
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("circle", { cx: "50", cy: "50", r, fill: "var(--mr-color-subtle)" }),
|
|
1855
1880
|
PIE_SEAMS.map((deg) => {
|
|
1856
1881
|
const rad = (deg - 90) * Math.PI / 180;
|
|
1857
|
-
return /* @__PURE__ */ (0,
|
|
1882
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1858
1883
|
"line",
|
|
1859
1884
|
{
|
|
1860
1885
|
x1: "50",
|
|
@@ -1868,12 +1893,12 @@ function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
|
|
|
1868
1893
|
);
|
|
1869
1894
|
})
|
|
1870
1895
|
] }) }),
|
|
1871
|
-
/* @__PURE__ */ (0,
|
|
1896
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BlankLegend, { rows: legendRows })
|
|
1872
1897
|
] });
|
|
1873
1898
|
}
|
|
1874
1899
|
|
|
1875
1900
|
// src/StackedColumnPlaceholder.tsx
|
|
1876
|
-
var
|
|
1901
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1877
1902
|
var COLUMN_WEIGHTS = [20, 30, 15, 35, 24, 12, 28, 18];
|
|
1878
1903
|
function columnBands(count) {
|
|
1879
1904
|
const weights = Array.from({ length: count }, (_, i) => COLUMN_WEIGHTS[i % COLUMN_WEIGHTS.length]);
|
|
@@ -1886,7 +1911,7 @@ function StackedColumnPlaceholder({
|
|
|
1886
1911
|
legendRows = 4,
|
|
1887
1912
|
axis = false
|
|
1888
1913
|
}) {
|
|
1889
|
-
const column = /* @__PURE__ */ (0,
|
|
1914
|
+
const column = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex h-full flex-col overflow-hidden rounded-control bg-subtle", style: { width }, children: columnBands(legendRows).map((pct, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1890
1915
|
"div",
|
|
1891
1916
|
{
|
|
1892
1917
|
style: {
|
|
@@ -1898,16 +1923,16 @@ function StackedColumnPlaceholder({
|
|
|
1898
1923
|
},
|
|
1899
1924
|
i
|
|
1900
1925
|
)) });
|
|
1901
|
-
return /* @__PURE__ */ (0,
|
|
1902
|
-
axis ? /* @__PURE__ */ (0,
|
|
1903
|
-
/* @__PURE__ */ (0,
|
|
1926
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex w-full gap-4", style: { height }, role: "presentation", "aria-hidden": "true", children: [
|
|
1927
|
+
axis ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { width: "55%" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AxisFrame, { height, xTicks: 0, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex h-full items-stretch justify-center", children: column }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-stretch py-1", children: column }),
|
|
1928
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BlankLegend, { rows: legendRows, reverse: !axis })
|
|
1904
1929
|
] });
|
|
1905
1930
|
}
|
|
1906
1931
|
|
|
1907
1932
|
// src/Tooltip.tsx
|
|
1908
1933
|
var import_react10 = require("react");
|
|
1909
1934
|
var import_react_dom3 = require("react-dom");
|
|
1910
|
-
var
|
|
1935
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1911
1936
|
function cx6(...parts) {
|
|
1912
1937
|
return parts.filter(Boolean).join(" ");
|
|
1913
1938
|
}
|
|
@@ -2077,7 +2102,7 @@ function Tooltip({
|
|
|
2077
2102
|
}
|
|
2078
2103
|
}
|
|
2079
2104
|
const floating = anchor != null && typeof document !== "undefined" ? (0, import_react_dom3.createPortal)(
|
|
2080
|
-
/* @__PURE__ */ (0,
|
|
2105
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
2081
2106
|
"span",
|
|
2082
2107
|
{
|
|
2083
2108
|
ref: boxRef,
|
|
@@ -2108,7 +2133,7 @@ function Tooltip({
|
|
|
2108
2133
|
document.body
|
|
2109
2134
|
) : null;
|
|
2110
2135
|
if (anchorRef) return floating;
|
|
2111
|
-
return /* @__PURE__ */ (0,
|
|
2136
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
2112
2137
|
"span",
|
|
2113
2138
|
{
|
|
2114
2139
|
ref,
|
|
@@ -2127,26 +2152,26 @@ function Tooltip({
|
|
|
2127
2152
|
}
|
|
2128
2153
|
|
|
2129
2154
|
// src/AdvertiserNoResults.tsx
|
|
2130
|
-
var
|
|
2155
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
2131
2156
|
function AdvertiserNoResults({
|
|
2132
2157
|
query,
|
|
2133
2158
|
hint = "Try checking your spelling or searching for a broader brand name."
|
|
2134
2159
|
}) {
|
|
2135
|
-
return /* @__PURE__ */ (0,
|
|
2136
|
-
/* @__PURE__ */ (0,
|
|
2160
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-col items-center gap-1.5 px-4 py-8 text-center", children: [
|
|
2161
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "text-[13px] font-medium text-text-primary", children: [
|
|
2137
2162
|
"No results found for \u201C",
|
|
2138
2163
|
query,
|
|
2139
2164
|
"\u201D"
|
|
2140
2165
|
] }),
|
|
2141
|
-
/* @__PURE__ */ (0,
|
|
2166
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "text-[12px] leading-snug text-text-tertiary", children: hint })
|
|
2142
2167
|
] });
|
|
2143
2168
|
}
|
|
2144
2169
|
|
|
2145
2170
|
// src/SelectAllVisible.tsx
|
|
2146
|
-
var
|
|
2147
|
-
var
|
|
2171
|
+
var import_lucide_react13 = require("lucide-react");
|
|
2172
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2148
2173
|
function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
2149
|
-
return /* @__PURE__ */ (0,
|
|
2174
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2150
2175
|
"button",
|
|
2151
2176
|
{
|
|
2152
2177
|
type: "button",
|
|
@@ -2154,7 +2179,7 @@ function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
|
2154
2179
|
onClick: onToggle,
|
|
2155
2180
|
className: "flex w-full items-center gap-2 rounded-control px-2 py-1.5 text-left text-[12px] font-semibold text-text-link transition-colors hover:bg-subtle",
|
|
2156
2181
|
children: [
|
|
2157
|
-
/* @__PURE__ */ (0,
|
|
2182
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react13.ListChecks, { size: 14, "aria-hidden": "true" }),
|
|
2158
2183
|
allSelected ? `Deselect ${count} visible` : `Select all ${count} visible`
|
|
2159
2184
|
]
|
|
2160
2185
|
}
|
|
@@ -2162,15 +2187,15 @@ function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
|
2162
2187
|
}
|
|
2163
2188
|
|
|
2164
2189
|
// src/SelectedSection.tsx
|
|
2165
|
-
var
|
|
2166
|
-
var
|
|
2190
|
+
var import_lucide_react14 = require("lucide-react");
|
|
2191
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2167
2192
|
function cx7(...parts) {
|
|
2168
2193
|
return parts.filter(Boolean).join(" ");
|
|
2169
2194
|
}
|
|
2170
2195
|
function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
|
|
2171
2196
|
if (count === 0) return null;
|
|
2172
|
-
return /* @__PURE__ */ (0,
|
|
2173
|
-
/* @__PURE__ */ (0,
|
|
2197
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col", children: [
|
|
2198
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2174
2199
|
"button",
|
|
2175
2200
|
{
|
|
2176
2201
|
type: "button",
|
|
@@ -2179,22 +2204,22 @@ function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
|
|
|
2179
2204
|
"aria-expanded": open,
|
|
2180
2205
|
className: "flex w-full items-center gap-1.5 rounded-control px-2 py-1 text-left text-[11px] font-semibold uppercase tracking-wide text-text-tertiary transition-colors hover:text-text-primary",
|
|
2181
2206
|
children: [
|
|
2182
|
-
/* @__PURE__ */ (0,
|
|
2207
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.ChevronDown, { size: 13, "aria-hidden": "true", className: cx7("transition-transform", !open && "-rotate-90") }),
|
|
2183
2208
|
"Selected (",
|
|
2184
2209
|
count,
|
|
2185
2210
|
")"
|
|
2186
2211
|
]
|
|
2187
2212
|
}
|
|
2188
2213
|
),
|
|
2189
|
-
open && /* @__PURE__ */ (0,
|
|
2214
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-col gap-0.5", children })
|
|
2190
2215
|
] });
|
|
2191
2216
|
}
|
|
2192
2217
|
|
|
2193
2218
|
// src/SelectionPicker.tsx
|
|
2194
2219
|
var import_react11 = require("react");
|
|
2195
2220
|
var import_react_dom4 = require("react-dom");
|
|
2196
|
-
var
|
|
2197
|
-
var
|
|
2221
|
+
var import_lucide_react15 = require("lucide-react");
|
|
2222
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2198
2223
|
function cx8(...parts) {
|
|
2199
2224
|
return parts.filter(Boolean).join(" ");
|
|
2200
2225
|
}
|
|
@@ -2289,17 +2314,17 @@ function SelectionPicker({
|
|
|
2289
2314
|
}
|
|
2290
2315
|
};
|
|
2291
2316
|
const rowGridCols = showInfoColumn ? "grid-cols-[36px_1fr_44px]" : "grid-cols-[36px_1fr]";
|
|
2292
|
-
return /* @__PURE__ */ (0,
|
|
2293
|
-
helper && /* @__PURE__ */ (0,
|
|
2294
|
-
/* @__PURE__ */ (0,
|
|
2295
|
-
/* @__PURE__ */ (0,
|
|
2317
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-4", children: [
|
|
2318
|
+
helper && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
2319
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-[13px] text-text-secondary", children: helper }),
|
|
2320
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("hr", { className: "-mx-5 -mt-2 border-border-default sm:-mx-6" })
|
|
2296
2321
|
] }),
|
|
2297
|
-
hasAccountLists && /* @__PURE__ */ (0,
|
|
2298
|
-
{ id: "search", label: "Search", icon:
|
|
2299
|
-
{ id: "lists", label: "Account lists", icon:
|
|
2322
|
+
hasAccountLists && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "inline-flex gap-0.5 self-start rounded-control border border-border-default bg-canvas p-0.5", children: [
|
|
2323
|
+
{ id: "search", label: "Search", icon: import_lucide_react15.Search },
|
|
2324
|
+
{ id: "lists", label: "Account lists", icon: import_lucide_react15.List }
|
|
2300
2325
|
].map((t) => {
|
|
2301
2326
|
const on = source === t.id;
|
|
2302
|
-
return /* @__PURE__ */ (0,
|
|
2327
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2303
2328
|
"button",
|
|
2304
2329
|
{
|
|
2305
2330
|
type: "button",
|
|
@@ -2310,18 +2335,18 @@ function SelectionPicker({
|
|
|
2310
2335
|
on ? "bg-surface text-text-primary shadow-raised" : "text-text-secondary hover:text-text-primary"
|
|
2311
2336
|
),
|
|
2312
2337
|
children: [
|
|
2313
|
-
/* @__PURE__ */ (0,
|
|
2338
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(t.icon, { size: 14, "aria-hidden": "true" }),
|
|
2314
2339
|
t.label
|
|
2315
2340
|
]
|
|
2316
2341
|
},
|
|
2317
2342
|
t.id
|
|
2318
2343
|
);
|
|
2319
2344
|
}) }),
|
|
2320
|
-
source === "search" && /* @__PURE__ */ (0,
|
|
2321
|
-
/* @__PURE__ */ (0,
|
|
2322
|
-
/* @__PURE__ */ (0,
|
|
2323
|
-
/* @__PURE__ */ (0,
|
|
2324
|
-
/* @__PURE__ */ (0,
|
|
2345
|
+
source === "search" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
|
|
2346
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
2347
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex h-9 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-default bg-input px-3", children: [
|
|
2348
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Search, { size: 15, className: "text-text-secondary", "aria-hidden": "true" }),
|
|
2349
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2325
2350
|
"input",
|
|
2326
2351
|
{
|
|
2327
2352
|
value: query,
|
|
@@ -2337,7 +2362,7 @@ function SelectionPicker({
|
|
|
2337
2362
|
}
|
|
2338
2363
|
)
|
|
2339
2364
|
] }),
|
|
2340
|
-
filters.map((f) => /* @__PURE__ */ (0,
|
|
2365
|
+
filters.map((f) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2341
2366
|
FilterDropdown,
|
|
2342
2367
|
{
|
|
2343
2368
|
filter: f,
|
|
@@ -2349,14 +2374,14 @@ function SelectionPicker({
|
|
|
2349
2374
|
)),
|
|
2350
2375
|
toolbarExtra
|
|
2351
2376
|
] }),
|
|
2352
|
-
!hasSearched ? /* @__PURE__ */ (0,
|
|
2353
|
-
/* @__PURE__ */ (0,
|
|
2354
|
-
/* @__PURE__ */ (0,
|
|
2355
|
-
/* @__PURE__ */ (0,
|
|
2356
|
-
/* @__PURE__ */ (0,
|
|
2377
|
+
!hasSearched ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
|
|
2378
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Search, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
|
|
2379
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
2380
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-[14px] font-semibold text-text-primary", children: "Search to get started" }),
|
|
2381
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-[13px] text-text-tertiary", children: "Use the search or filters above to find and add options." })
|
|
2357
2382
|
] })
|
|
2358
|
-
] }) : /* @__PURE__ */ (0,
|
|
2359
|
-
/* @__PURE__ */ (0,
|
|
2383
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "overflow-hidden rounded-control border border-border-default", children: [
|
|
2384
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2360
2385
|
"div",
|
|
2361
2386
|
{
|
|
2362
2387
|
className: cx8(
|
|
@@ -2364,7 +2389,7 @@ function SelectionPicker({
|
|
|
2364
2389
|
rowGridCols
|
|
2365
2390
|
),
|
|
2366
2391
|
children: [
|
|
2367
|
-
/* @__PURE__ */ (0,
|
|
2392
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2368
2393
|
CheckBox,
|
|
2369
2394
|
{
|
|
2370
2395
|
checked: allSelected,
|
|
@@ -2375,18 +2400,18 @@ function SelectionPicker({
|
|
|
2375
2400
|
testId: testIdPrefix && `${testIdPrefix}-select-all`
|
|
2376
2401
|
}
|
|
2377
2402
|
),
|
|
2378
|
-
/* @__PURE__ */ (0,
|
|
2379
|
-
showInfoColumn && /* @__PURE__ */ (0,
|
|
2403
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cx8("grid gap-2", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: c.className, children: c.header }, c.key)) }),
|
|
2404
|
+
showInfoColumn && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-right", children: "Info" })
|
|
2380
2405
|
]
|
|
2381
2406
|
}
|
|
2382
2407
|
),
|
|
2383
|
-
/* @__PURE__ */ (0,
|
|
2408
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "max-h-[360px] overflow-y-auto", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-center py-6", role: "status", "aria-label": "Loading", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Loader2, { size: 18, className: "animate-spin text-text-tertiary", "aria-hidden": "true" }) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "px-3 py-8 text-center text-[13px] text-text-tertiary", children: errorMessage }) : rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "px-3 py-8 text-center text-[13px] text-text-tertiary", children: "No matches. Try a different search or filter." }) : rows.map((row) => {
|
|
2384
2409
|
const isSel = selectedIds.has(row.id);
|
|
2385
2410
|
const isLocked = lockedIds?.has(row.id) ?? false;
|
|
2386
2411
|
const kids = getChildren?.(row);
|
|
2387
2412
|
const isOpen = expanded.has(row.id);
|
|
2388
|
-
return /* @__PURE__ */ (0,
|
|
2389
|
-
/* @__PURE__ */ (0,
|
|
2413
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "border-t border-border-default/60 first:border-t-0", children: [
|
|
2414
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2390
2415
|
"div",
|
|
2391
2416
|
{
|
|
2392
2417
|
onClick: isLocked ? void 0 : () => toggleRow(row),
|
|
@@ -2398,7 +2423,7 @@ function SelectionPicker({
|
|
|
2398
2423
|
!isLocked && isSel && "opacity-60"
|
|
2399
2424
|
),
|
|
2400
2425
|
children: [
|
|
2401
|
-
isLocked ? /* @__PURE__ */ (0,
|
|
2426
|
+
isLocked ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2402
2427
|
CheckBox,
|
|
2403
2428
|
{
|
|
2404
2429
|
checked: isSel,
|
|
@@ -2407,8 +2432,8 @@ function SelectionPicker({
|
|
|
2407
2432
|
testId: testIdPrefix && `${testIdPrefix}-row-${slug4(row.id)}`
|
|
2408
2433
|
}
|
|
2409
2434
|
),
|
|
2410
|
-
/* @__PURE__ */ (0,
|
|
2411
|
-
showInfoColumn && /* @__PURE__ */ (0,
|
|
2435
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cx8("grid gap-2 text-[13px] text-text-primary", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: cx8("truncate", c.className), children: c.render(row) }, c.key)) }),
|
|
2436
|
+
showInfoColumn && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-end", children: kids && kids.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2412
2437
|
"button",
|
|
2413
2438
|
{
|
|
2414
2439
|
type: "button",
|
|
@@ -2422,28 +2447,28 @@ function SelectionPicker({
|
|
|
2422
2447
|
});
|
|
2423
2448
|
},
|
|
2424
2449
|
className: "flex h-7 w-7 items-center justify-center rounded-control text-text-secondary hover:bg-canvas hover:text-text-primary",
|
|
2425
|
-
children: /* @__PURE__ */ (0,
|
|
2450
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.ChevronRight, { size: 15, className: cx8("transition-transform", isOpen && "rotate-90") })
|
|
2426
2451
|
}
|
|
2427
|
-
) : /* @__PURE__ */ (0,
|
|
2452
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2428
2453
|
"span",
|
|
2429
2454
|
{
|
|
2430
2455
|
className: "flex h-7 w-7 items-center justify-center text-text-tertiary",
|
|
2431
2456
|
title: "No additional details",
|
|
2432
|
-
children: /* @__PURE__ */ (0,
|
|
2457
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Info, { size: 14 })
|
|
2433
2458
|
}
|
|
2434
2459
|
) })
|
|
2435
2460
|
]
|
|
2436
2461
|
}
|
|
2437
2462
|
),
|
|
2438
|
-
isOpen && kids && /* @__PURE__ */ (0,
|
|
2463
|
+
isOpen && kids && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "bg-canvas/60 pb-1.5 pl-10 pr-3", children: kids.map((kid) => {
|
|
2439
2464
|
const kidSel = selectedIds.has(kid.id);
|
|
2440
|
-
return /* @__PURE__ */ (0,
|
|
2465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2441
2466
|
"div",
|
|
2442
2467
|
{
|
|
2443
2468
|
className: "flex items-center justify-between gap-2 border-t border-border-default/40 py-2 first:border-t-0",
|
|
2444
2469
|
children: [
|
|
2445
|
-
/* @__PURE__ */ (0,
|
|
2446
|
-
/* @__PURE__ */ (0,
|
|
2470
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate text-[13px] text-text-secondary", children: kid.name }),
|
|
2471
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2447
2472
|
"button",
|
|
2448
2473
|
{
|
|
2449
2474
|
type: "button",
|
|
@@ -2454,7 +2479,7 @@ function SelectionPicker({
|
|
|
2454
2479
|
kidSel ? "text-text-tertiary" : "text-text-link hover:bg-subtle"
|
|
2455
2480
|
),
|
|
2456
2481
|
children: [
|
|
2457
|
-
kidSel ? /* @__PURE__ */ (0,
|
|
2482
|
+
kidSel ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Check, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Plus, { size: 13 }),
|
|
2458
2483
|
kidSel ? "Added" : "Add"
|
|
2459
2484
|
]
|
|
2460
2485
|
}
|
|
@@ -2466,7 +2491,7 @@ function SelectionPicker({
|
|
|
2466
2491
|
}) })
|
|
2467
2492
|
] }, row.id);
|
|
2468
2493
|
}) }),
|
|
2469
|
-
!loading && !error && hasMore && /* @__PURE__ */ (0,
|
|
2494
|
+
!loading && !error && hasMore && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2470
2495
|
"button",
|
|
2471
2496
|
{
|
|
2472
2497
|
type: "button",
|
|
@@ -2475,19 +2500,19 @@ function SelectionPicker({
|
|
|
2475
2500
|
"data-testid": testIdPrefix && `${testIdPrefix}-load-more`,
|
|
2476
2501
|
className: "flex w-full items-center justify-center gap-2 border-t border-border-default px-2 py-1.5 text-[13px] text-brand-primaryAction transition-colors hover:bg-subtle disabled:opacity-50",
|
|
2477
2502
|
children: [
|
|
2478
|
-
loadingMore ? /* @__PURE__ */ (0,
|
|
2503
|
+
loadingMore ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Loader2, { size: 13, className: "animate-spin", "aria-hidden": "true" }) : null,
|
|
2479
2504
|
loadingMore ? "Loading\u2026" : "Load more"
|
|
2480
2505
|
]
|
|
2481
2506
|
}
|
|
2482
2507
|
)
|
|
2483
2508
|
] })
|
|
2484
2509
|
] }),
|
|
2485
|
-
source === "lists" && /* @__PURE__ */ (0,
|
|
2486
|
-
/* @__PURE__ */ (0,
|
|
2487
|
-
accountLists && accountLists.length > 0 ? /* @__PURE__ */ (0,
|
|
2488
|
-
/* @__PURE__ */ (0,
|
|
2510
|
+
source === "lists" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
|
|
2511
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-[13px] text-text-secondary", children: "Select an account list to add all of its accounts at once. Your workspace stays in sync as the list is updated." }),
|
|
2512
|
+
accountLists && accountLists.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
|
|
2513
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ScrollFade, { className: "flex max-h-[396px] flex-col gap-2 overflow-y-auto pr-0.5", children: accountLists.map((list) => {
|
|
2489
2514
|
const on = (selectedListIds ?? []).includes(list.id);
|
|
2490
|
-
return /* @__PURE__ */ (0,
|
|
2515
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2491
2516
|
"button",
|
|
2492
2517
|
{
|
|
2493
2518
|
type: "button",
|
|
@@ -2499,19 +2524,19 @@ function SelectionPicker({
|
|
|
2499
2524
|
on ? "border-brand-primaryAction bg-brand-primarySoft" : "border-border-default bg-surface hover:bg-subtle"
|
|
2500
2525
|
),
|
|
2501
2526
|
children: [
|
|
2502
|
-
/* @__PURE__ */ (0,
|
|
2527
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2503
2528
|
"span",
|
|
2504
2529
|
{
|
|
2505
2530
|
className: cx8(
|
|
2506
2531
|
"flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
|
|
2507
2532
|
on ? "text-brand-primaryAction" : "text-text-secondary"
|
|
2508
2533
|
),
|
|
2509
|
-
children: on ? /* @__PURE__ */ (0,
|
|
2534
|
+
children: on ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Plus, { size: 16 })
|
|
2510
2535
|
}
|
|
2511
2536
|
),
|
|
2512
|
-
/* @__PURE__ */ (0,
|
|
2513
|
-
/* @__PURE__ */ (0,
|
|
2514
|
-
/* @__PURE__ */ (0,
|
|
2537
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "min-w-0 flex-1", children: [
|
|
2538
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate text-[14px] font-medium text-text-primary", children: list.name }) }),
|
|
2539
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "block truncate text-[12px] text-text-secondary", children: [
|
|
2515
2540
|
list.count,
|
|
2516
2541
|
" accounts \xB7 ",
|
|
2517
2542
|
list.entityTypes.join(", "),
|
|
@@ -2519,13 +2544,13 @@ function SelectionPicker({
|
|
|
2519
2544
|
formatListDate(list.updatedAt)
|
|
2520
2545
|
] })
|
|
2521
2546
|
] }),
|
|
2522
|
-
/* @__PURE__ */ (0,
|
|
2547
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: cx8("shrink-0 text-[12px] font-medium", on ? "text-brand-primaryAction" : "text-text-secondary"), children: on ? "Added" : "Add" })
|
|
2523
2548
|
]
|
|
2524
2549
|
},
|
|
2525
2550
|
list.id
|
|
2526
2551
|
);
|
|
2527
2552
|
}) }),
|
|
2528
|
-
/* @__PURE__ */ (0,
|
|
2553
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2529
2554
|
"p",
|
|
2530
2555
|
{
|
|
2531
2556
|
className: "border-t border-border-default pt-2 text-right text-[12px] font-medium text-text-tertiary",
|
|
@@ -2537,11 +2562,11 @@ function SelectionPicker({
|
|
|
2537
2562
|
]
|
|
2538
2563
|
}
|
|
2539
2564
|
)
|
|
2540
|
-
] }) : /* @__PURE__ */ (0,
|
|
2541
|
-
/* @__PURE__ */ (0,
|
|
2542
|
-
/* @__PURE__ */ (0,
|
|
2543
|
-
/* @__PURE__ */ (0,
|
|
2544
|
-
/* @__PURE__ */ (0,
|
|
2565
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
|
|
2566
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.List, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
|
|
2567
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
2568
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-[14px] font-semibold text-text-primary", children: "No account lists yet" }),
|
|
2569
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-[13px] text-text-tertiary", children: "Account lists set up for you will appear here." })
|
|
2545
2570
|
] })
|
|
2546
2571
|
] })
|
|
2547
2572
|
] })
|
|
@@ -2573,7 +2598,7 @@ function ScrollFade({ className, children }) {
|
|
|
2573
2598
|
[sync]
|
|
2574
2599
|
);
|
|
2575
2600
|
const mask = edges.top || edges.bottom ? `linear-gradient(to bottom, transparent 0, #000 ${edges.top ? EDGE_FADE : 0}px, #000 calc(100% - ${edges.bottom ? EDGE_FADE : 0}px), transparent 100%)` : void 0;
|
|
2576
|
-
return /* @__PURE__ */ (0,
|
|
2601
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref: attach, onScroll: sync, className, style: { maskImage: mask, WebkitMaskImage: mask }, children });
|
|
2577
2602
|
}
|
|
2578
2603
|
function formatListDate(iso) {
|
|
2579
2604
|
try {
|
|
@@ -2623,8 +2648,8 @@ function FilterDropdown({
|
|
|
2623
2648
|
const count = active.size;
|
|
2624
2649
|
const label = count === 0 ? filter.label : count === 1 ? [...active][0] : "Multiple";
|
|
2625
2650
|
const filterSlug = slug4(filter.label);
|
|
2626
|
-
return /* @__PURE__ */ (0,
|
|
2627
|
-
/* @__PURE__ */ (0,
|
|
2651
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "relative", children: [
|
|
2652
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2628
2653
|
"button",
|
|
2629
2654
|
{
|
|
2630
2655
|
ref: btnRef,
|
|
@@ -2636,12 +2661,12 @@ function FilterDropdown({
|
|
|
2636
2661
|
className: "inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-default bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
|
|
2637
2662
|
children: [
|
|
2638
2663
|
label,
|
|
2639
|
-
/* @__PURE__ */ (0,
|
|
2664
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.ChevronDown, { size: 13, "aria-hidden": "true", className: cx8("transition-transform", open && "rotate-180") })
|
|
2640
2665
|
]
|
|
2641
2666
|
}
|
|
2642
2667
|
),
|
|
2643
2668
|
open && pos && (0, import_react_dom4.createPortal)(
|
|
2644
|
-
/* @__PURE__ */ (0,
|
|
2669
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2645
2670
|
"div",
|
|
2646
2671
|
{
|
|
2647
2672
|
ref: menuRef,
|
|
@@ -2650,9 +2675,9 @@ function FilterDropdown({
|
|
|
2650
2675
|
style: { top: pos.top, left: pos.left },
|
|
2651
2676
|
className: "fixed z-[80] min-w-[220px] rounded-card border border-border-default bg-surface p-2 shadow-overlay",
|
|
2652
2677
|
children: [
|
|
2653
|
-
searchable && /* @__PURE__ */ (0,
|
|
2654
|
-
/* @__PURE__ */ (0,
|
|
2655
|
-
/* @__PURE__ */ (0,
|
|
2678
|
+
searchable && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mb-1.5 flex h-8 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
|
|
2679
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react15.Search, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
|
|
2680
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2656
2681
|
"input",
|
|
2657
2682
|
{
|
|
2658
2683
|
autoFocus: true,
|
|
@@ -2663,14 +2688,14 @@ function FilterDropdown({
|
|
|
2663
2688
|
}
|
|
2664
2689
|
)
|
|
2665
2690
|
] }),
|
|
2666
|
-
/* @__PURE__ */ (0,
|
|
2691
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cx8("flex flex-col gap-0.5", searchable && "max-h-[240px] overflow-y-auto"), children: shownOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "px-2 py-3 text-center text-[12px] text-text-secondary", children: "No matches." }) : shownOptions.map((opt) => {
|
|
2667
2692
|
const on = active.has(opt);
|
|
2668
|
-
return /* @__PURE__ */ (0,
|
|
2693
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
2669
2694
|
"label",
|
|
2670
2695
|
{
|
|
2671
2696
|
className: "flex cursor-pointer items-center gap-2 rounded-control px-2 py-1.5 text-[13px] text-text-primary hover:bg-subtle",
|
|
2672
2697
|
children: [
|
|
2673
|
-
/* @__PURE__ */ (0,
|
|
2698
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2674
2699
|
CheckBox,
|
|
2675
2700
|
{
|
|
2676
2701
|
checked: on,
|
|
@@ -2701,7 +2726,7 @@ function gridForColumns(columns) {
|
|
|
2701
2726
|
|
|
2702
2727
|
// src/PublisherBreakdownList.tsx
|
|
2703
2728
|
var import_react12 = require("react");
|
|
2704
|
-
var
|
|
2729
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2705
2730
|
function cx9(...parts) {
|
|
2706
2731
|
return parts.filter(Boolean).join(" ");
|
|
2707
2732
|
}
|
|
@@ -2716,7 +2741,7 @@ function initials(name) {
|
|
|
2716
2741
|
return name.replace(/[^a-zA-Z0-9]/g, "").slice(0, 2).toUpperCase();
|
|
2717
2742
|
}
|
|
2718
2743
|
function Monogram({ name, size = 28 }) {
|
|
2719
|
-
return /* @__PURE__ */ (0,
|
|
2744
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2720
2745
|
"span",
|
|
2721
2746
|
{
|
|
2722
2747
|
"aria-hidden": "true",
|
|
@@ -2727,12 +2752,12 @@ function Monogram({ name, size = 28 }) {
|
|
|
2727
2752
|
);
|
|
2728
2753
|
}
|
|
2729
2754
|
function BreakdownTag({ children }) {
|
|
2730
|
-
return /* @__PURE__ */ (0,
|
|
2755
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "inline-flex items-center whitespace-nowrap rounded-full bg-subtle px-2 py-0.5 text-[11px] font-medium text-text-secondary", children });
|
|
2731
2756
|
}
|
|
2732
2757
|
function DelayedTip({ label, children }) {
|
|
2733
|
-
return /* @__PURE__ */ (0,
|
|
2758
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "group/dt relative inline-flex", tabIndex: 0, "aria-label": label, children: [
|
|
2734
2759
|
children,
|
|
2735
|
-
/* @__PURE__ */ (0,
|
|
2760
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2736
2761
|
"span",
|
|
2737
2762
|
{
|
|
2738
2763
|
role: "tooltip",
|
|
@@ -2746,22 +2771,22 @@ var COL_CURRENT = 76;
|
|
|
2746
2771
|
var COL_PREVIOUS = 76;
|
|
2747
2772
|
var COL_YOY = 44;
|
|
2748
2773
|
function MetricListHeader({ className }) {
|
|
2749
|
-
return /* @__PURE__ */ (0,
|
|
2750
|
-
/* @__PURE__ */ (0,
|
|
2751
|
-
/* @__PURE__ */ (0,
|
|
2752
|
-
/* @__PURE__ */ (0,
|
|
2753
|
-
/* @__PURE__ */ (0,
|
|
2754
|
-
/* @__PURE__ */ (0,
|
|
2774
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cx9("flex items-baseline gap-2 pb-2", className), children: [
|
|
2775
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex-1" }),
|
|
2776
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
|
|
2777
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_CURRENT }, children: "Current" }),
|
|
2778
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DelayedTip, { label: "Spend during the same time period one year ago.", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_PREVIOUS }, children: "Previous" }) }),
|
|
2779
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DelayedTip, { label: "Percent change from this time period vs. the same time one year ago.", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_YOY }, children: "YoY" }) })
|
|
2755
2780
|
] })
|
|
2756
2781
|
] });
|
|
2757
2782
|
}
|
|
2758
2783
|
function MetricCells({ spendN, yoy }) {
|
|
2759
2784
|
const prior = priorYearAmt(spendN, yoy);
|
|
2760
2785
|
const up = yoy !== "NEW" && yoy >= 0;
|
|
2761
|
-
return /* @__PURE__ */ (0,
|
|
2762
|
-
/* @__PURE__ */ (0,
|
|
2763
|
-
/* @__PURE__ */ (0,
|
|
2764
|
-
/* @__PURE__ */ (0,
|
|
2786
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
|
|
2787
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[12px] font-bold tabular-nums text-text-primary", style: { width: COL_CURRENT }, children: fmtM(spendN) }),
|
|
2788
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-right text-[12px] font-normal tabular-nums text-text-primary", style: { width: COL_PREVIOUS }, children: prior ?? "\u2014" }),
|
|
2789
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-[10px] font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
|
|
2765
2790
|
up ? "+" : "\u2212",
|
|
2766
2791
|
Math.abs(yoy),
|
|
2767
2792
|
"%"
|
|
@@ -2772,35 +2797,35 @@ function PublisherBreakdownList({ rows, defaultVisibleCount = 10, padded = true,
|
|
|
2772
2797
|
const [showAll, setShowAll] = (0, import_react12.useState)(false);
|
|
2773
2798
|
const visible = showAll ? rows : rows.slice(0, defaultVisibleCount);
|
|
2774
2799
|
const rowPad = padded ? "px-5" : "";
|
|
2775
|
-
return /* @__PURE__ */ (0,
|
|
2776
|
-
/* @__PURE__ */ (0,
|
|
2777
|
-
/* @__PURE__ */ (0,
|
|
2778
|
-
visible.map((p) => /* @__PURE__ */ (0,
|
|
2779
|
-
/* @__PURE__ */ (0,
|
|
2780
|
-
renderLogo ? renderLogo(p) : /* @__PURE__ */ (0,
|
|
2781
|
-
/* @__PURE__ */ (0,
|
|
2782
|
-
/* @__PURE__ */ (0,
|
|
2783
|
-
/* @__PURE__ */ (0,
|
|
2784
|
-
p.tags.map((t) => /* @__PURE__ */ (0,
|
|
2800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col", children: [
|
|
2801
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col", children: [
|
|
2802
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MetricListHeader, { className: rowPad }),
|
|
2803
|
+
visible.map((p) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cx9("flex items-center justify-between gap-3 border-t border-border-default/60 py-2.5 first:border-t-0", rowPad), children: [
|
|
2804
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
|
|
2805
|
+
renderLogo ? renderLogo(p) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Monogram, { name: p.brand, size: 28 }),
|
|
2806
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "min-w-0", children: [
|
|
2807
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", children: [
|
|
2808
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-[14px] font-semibold text-text-primary", children: p.brand }),
|
|
2809
|
+
p.tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(BreakdownTag, { children: t }, t))
|
|
2785
2810
|
] }),
|
|
2786
|
-
/* @__PURE__ */ (0,
|
|
2811
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "truncate text-[11.5px] text-text-tertiary", children: p.owner })
|
|
2787
2812
|
] })
|
|
2788
2813
|
] }),
|
|
2789
|
-
/* @__PURE__ */ (0,
|
|
2814
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MetricCells, { spendN: p.spendN, yoy: p.yoy })
|
|
2790
2815
|
] }, p.brand))
|
|
2791
2816
|
] }),
|
|
2792
|
-
rows.length > defaultVisibleCount && (viewAllHref ? /* @__PURE__ */ (0,
|
|
2793
|
-
/* @__PURE__ */ (0,
|
|
2817
|
+
rows.length > defaultVisibleCount && (viewAllHref ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cx9("border-t border-border-default py-3", rowPad), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("a", { href: viewAllHref, className: "text-[12px] font-semibold text-text-link hover:underline", children: "See all publishers" }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cx9("flex items-center gap-2 border-t border-border-default py-3 text-[12px] text-text-tertiary", rowPad), children: [
|
|
2818
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { children: [
|
|
2794
2819
|
"Showing ",
|
|
2795
2820
|
visible.length,
|
|
2796
2821
|
" of ",
|
|
2797
2822
|
rows.length
|
|
2798
2823
|
] }),
|
|
2799
|
-
!showAll ? /* @__PURE__ */ (0,
|
|
2824
|
+
!showAll ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("button", { type: "button", onClick: () => setShowAll(true), className: "font-semibold text-text-link hover:underline", children: [
|
|
2800
2825
|
"See all (",
|
|
2801
2826
|
rows.length - defaultVisibleCount,
|
|
2802
2827
|
" more)"
|
|
2803
|
-
] }) : /* @__PURE__ */ (0,
|
|
2828
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", onClick: () => setShowAll(false), className: "font-semibold text-text-link hover:underline", children: "Show less" })
|
|
2804
2829
|
] }))
|
|
2805
2830
|
] });
|
|
2806
2831
|
}
|
|
@@ -2809,45 +2834,77 @@ function PublisherBreakdownList({ rows, defaultVisibleCount = 10, padded = true,
|
|
|
2809
2834
|
var import_react13 = require("react");
|
|
2810
2835
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
2811
2836
|
var import_class_variance_authority = require("class-variance-authority");
|
|
2812
|
-
var
|
|
2813
|
-
var
|
|
2837
|
+
var import_lucide_react16 = require("lucide-react");
|
|
2838
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2814
2839
|
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
2815
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control
|
|
2840
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-hidden focus-visible:ring-0",
|
|
2816
2841
|
{
|
|
2817
2842
|
variants: {
|
|
2818
2843
|
variant: {
|
|
2819
2844
|
primary: "bg-brand-primaryAction text-brand-onprimary hover:brightness-110",
|
|
2820
|
-
|
|
2845
|
+
// border-strong, not border-interactive. The interactive token is #6b6358
|
|
2846
|
+
// -- 5.9:1 against the surface, nearly as dark as body text -- which is
|
|
2847
|
+
// right for an input the eye must find in a form, and far too heavy for
|
|
2848
|
+
// a button sitting beside other buttons. It reads heaviest on icon-only,
|
|
2849
|
+
// where there is least fill inside the line to balance it.
|
|
2850
|
+
secondary: "bg-surface text-text-primary border border-border-strong hover:bg-subtle hover:border-border-interactive",
|
|
2821
2851
|
ghost: "text-text-primary hover:bg-subtle",
|
|
2822
2852
|
danger: "bg-status-danger text-status-onstatus hover:brightness-110",
|
|
2853
|
+
// Quiet destructive: neutral at rest, red only on hover. This is what
|
|
2854
|
+
// the product actually reaches for -- nearly every hand-rolled
|
|
2855
|
+
// destructive control is an icon that reddens on hover, while filled
|
|
2856
|
+
// `danger` is right only for the confirm button in a dialog the user
|
|
2857
|
+
// already opened.
|
|
2858
|
+
dangerGhost: "text-text-secondary hover:bg-subtle hover:text-text-danger",
|
|
2823
2859
|
link: "text-text-link underline-offset-4 hover:underline px-0"
|
|
2824
2860
|
},
|
|
2861
|
+
// Type scales with the box. One size across all three left xs cramped --
|
|
2862
|
+
// 14px inside a 24px box leaves five pixels above and below, so the label
|
|
2863
|
+
// fills the button instead of sitting in it.
|
|
2825
2864
|
size: {
|
|
2865
|
+
xs: "h-6 px-2 text-xs",
|
|
2826
2866
|
sm: "h-8 px-3 text-sm",
|
|
2827
|
-
md: "h-10 px-4 text-sm"
|
|
2828
|
-
|
|
2829
|
-
|
|
2867
|
+
md: "h-10 px-4 text-sm"
|
|
2868
|
+
},
|
|
2869
|
+
// Shape is orthogonal to size. As a fourth SIZE, `icon` could only ever
|
|
2870
|
+
// be one dimension, so an icon button never lined up with the labelled
|
|
2871
|
+
// buttons beside it in a toolbar. As a shape it squares the box at
|
|
2872
|
+
// whichever height you picked.
|
|
2873
|
+
iconOnly: {
|
|
2874
|
+
true: "p-0",
|
|
2875
|
+
false: ""
|
|
2830
2876
|
}
|
|
2831
2877
|
},
|
|
2878
|
+
compoundVariants: [
|
|
2879
|
+
{ size: "xs", iconOnly: true, class: "w-6" },
|
|
2880
|
+
{ size: "sm", iconOnly: true, class: "w-8" },
|
|
2881
|
+
{ size: "md", iconOnly: true, class: "w-10" },
|
|
2882
|
+
// A boxed button is a target you aim at, so its label carries the weight
|
|
2883
|
+
// of one. `link` sits inline in a sentence, where semibold reads as
|
|
2884
|
+
// emphasis on the words rather than as a control.
|
|
2885
|
+
{ variant: ["primary", "secondary", "ghost", "danger", "dangerGhost"], class: "font-semibold" },
|
|
2886
|
+
{ variant: "link", class: "font-medium h-auto p-0" }
|
|
2887
|
+
],
|
|
2832
2888
|
defaultVariants: {
|
|
2833
2889
|
variant: "primary",
|
|
2834
|
-
size: "md"
|
|
2890
|
+
size: "md",
|
|
2891
|
+
iconOnly: false
|
|
2835
2892
|
}
|
|
2836
2893
|
}
|
|
2837
2894
|
);
|
|
2838
2895
|
var Button = (0, import_react13.forwardRef)(
|
|
2839
|
-
({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {
|
|
2896
|
+
({ className, variant, size, iconOnly, asChild = false, loading = false, disabled, children, ...props }, ref) => {
|
|
2840
2897
|
const shared = {
|
|
2841
|
-
className: cn(buttonVariants({ variant, size, className })),
|
|
2898
|
+
className: cn(buttonVariants({ variant, size, iconOnly, className })),
|
|
2842
2899
|
disabled: disabled || loading,
|
|
2843
2900
|
"aria-busy": loading || void 0,
|
|
2844
2901
|
...props
|
|
2845
2902
|
};
|
|
2846
2903
|
if (asChild) {
|
|
2847
|
-
return /* @__PURE__ */ (0,
|
|
2904
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_slot.Slot, { ref, ...shared, children });
|
|
2848
2905
|
}
|
|
2849
|
-
return /* @__PURE__ */ (0,
|
|
2850
|
-
loading && /* @__PURE__ */ (0,
|
|
2906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("button", { ref, ...shared, children: [
|
|
2907
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react16.Loader2, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }),
|
|
2851
2908
|
children
|
|
2852
2909
|
] });
|
|
2853
2910
|
}
|
|
@@ -2855,14 +2912,14 @@ var Button = (0, import_react13.forwardRef)(
|
|
|
2855
2912
|
Button.displayName = "Button";
|
|
2856
2913
|
|
|
2857
2914
|
// src/FilterDropdownFooter.tsx
|
|
2858
|
-
var
|
|
2915
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2859
2916
|
function FilterDropdownFooter({
|
|
2860
2917
|
onClear,
|
|
2861
2918
|
onApply,
|
|
2862
2919
|
clearLabel = "Clear all",
|
|
2863
2920
|
applyLabel = "Apply"
|
|
2864
2921
|
}) {
|
|
2865
|
-
return /* @__PURE__ */ (0,
|
|
2922
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2866
2923
|
"div",
|
|
2867
2924
|
{
|
|
2868
2925
|
className: cn(
|
|
@@ -2870,8 +2927,8 @@ function FilterDropdownFooter({
|
|
|
2870
2927
|
onClear ? "justify-between" : "justify-end"
|
|
2871
2928
|
),
|
|
2872
2929
|
children: [
|
|
2873
|
-
onClear && /* @__PURE__ */ (0,
|
|
2874
|
-
/* @__PURE__ */ (0,
|
|
2930
|
+
onClear && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClear, children: clearLabel }),
|
|
2931
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, children: applyLabel })
|
|
2875
2932
|
]
|
|
2876
2933
|
}
|
|
2877
2934
|
);
|
|
@@ -2880,7 +2937,7 @@ function FilterDropdownFooter({
|
|
|
2880
2937
|
// src/NameListModal.tsx
|
|
2881
2938
|
var import_react14 = require("react");
|
|
2882
2939
|
var import_react_dom5 = require("react-dom");
|
|
2883
|
-
var
|
|
2940
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2884
2941
|
function NameListModal({
|
|
2885
2942
|
title,
|
|
2886
2943
|
initialName,
|
|
@@ -2905,12 +2962,12 @@ function NameListModal({
|
|
|
2905
2962
|
// bg-scrim, not a literal: design-tokens gained a scrim token in 2.5.0.
|
|
2906
2963
|
// No in-data-[theme=dark] override needed any more -- the token redefines
|
|
2907
2964
|
// itself under that attribute in dark.css, so one class covers both themes.
|
|
2908
|
-
/* @__PURE__ */ (0,
|
|
2965
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2909
2966
|
"div",
|
|
2910
2967
|
{
|
|
2911
2968
|
className: "fixed inset-0 z-70 flex items-center justify-center bg-scrim px-4",
|
|
2912
2969
|
onMouseDown: (e) => e.target === e.currentTarget && onCancel(),
|
|
2913
|
-
children: /* @__PURE__ */ (0,
|
|
2970
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
2914
2971
|
"div",
|
|
2915
2972
|
{
|
|
2916
2973
|
role: "dialog",
|
|
@@ -2918,10 +2975,10 @@ function NameListModal({
|
|
|
2918
2975
|
"aria-label": title,
|
|
2919
2976
|
className: "w-full max-w-[420px] rounded-card border border-border-default bg-surface p-5 shadow-overlay",
|
|
2920
2977
|
children: [
|
|
2921
|
-
/* @__PURE__ */ (0,
|
|
2922
|
-
/* @__PURE__ */ (0,
|
|
2923
|
-
/* @__PURE__ */ (0,
|
|
2924
|
-
/* @__PURE__ */ (0,
|
|
2978
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("h2", { className: "text-[16px] font-semibold text-text-primary", children: title }),
|
|
2979
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-4 flex flex-col gap-1.5", children: [
|
|
2980
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("label", { htmlFor: "account-list-name", className: "text-[12px] font-medium text-text-secondary", children: fieldLabel }),
|
|
2981
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2925
2982
|
"input",
|
|
2926
2983
|
{
|
|
2927
2984
|
id: "account-list-name",
|
|
@@ -2933,13 +2990,13 @@ function NameListModal({
|
|
|
2933
2990
|
}
|
|
2934
2991
|
)
|
|
2935
2992
|
] }),
|
|
2936
|
-
options && options.length > 0 && /* @__PURE__ */ (0,
|
|
2937
|
-
/* @__PURE__ */ (0,
|
|
2993
|
+
options && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mt-4 flex flex-col gap-2.5", children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("label", { className: "flex cursor-pointer items-center gap-2.5 text-[13px] text-text-primary", children: [
|
|
2994
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CheckBox, { checked: !!checked[o.key], onChange: () => toggle(o.key), ariaLabel: o.label }),
|
|
2938
2995
|
o.label
|
|
2939
2996
|
] }, o.key)) }),
|
|
2940
|
-
/* @__PURE__ */ (0,
|
|
2941
|
-
/* @__PURE__ */ (0,
|
|
2942
|
-
/* @__PURE__ */ (0,
|
|
2997
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "mt-5 flex items-center justify-end gap-2", children: [
|
|
2998
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }),
|
|
2999
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { disabled: !name.trim(), onClick: () => onSubmit(name.trim(), checked), children: submitLabel })
|
|
2943
3000
|
] })
|
|
2944
3001
|
]
|
|
2945
3002
|
}
|
|
@@ -2951,7 +3008,7 @@ function NameListModal({
|
|
|
2951
3008
|
}
|
|
2952
3009
|
|
|
2953
3010
|
// src/ChipTrigger.tsx
|
|
2954
|
-
var
|
|
3011
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2955
3012
|
function chipTriggerClass(variant = "box") {
|
|
2956
3013
|
return cn(
|
|
2957
3014
|
"flex h-11 items-center gap-2 rounded-control border bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
|
|
@@ -2962,13 +3019,13 @@ function chipTriggerClass(variant = "box") {
|
|
|
2962
3019
|
);
|
|
2963
3020
|
}
|
|
2964
3021
|
function ChipContent({ caption, value, icon }) {
|
|
2965
|
-
const stack = /* @__PURE__ */ (0,
|
|
2966
|
-
/* @__PURE__ */ (0,
|
|
2967
|
-
/* @__PURE__ */ (0,
|
|
3022
|
+
const stack = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
3023
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
|
|
3024
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
2968
3025
|
] });
|
|
2969
3026
|
if (icon) {
|
|
2970
|
-
return /* @__PURE__ */ (0,
|
|
2971
|
-
/* @__PURE__ */ (0,
|
|
3027
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "flex items-center gap-2", children: [
|
|
3028
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "shrink-0 text-text-tertiary", children: icon }),
|
|
2972
3029
|
stack
|
|
2973
3030
|
] });
|
|
2974
3031
|
}
|
|
@@ -2976,12 +3033,12 @@ function ChipContent({ caption, value, icon }) {
|
|
|
2976
3033
|
}
|
|
2977
3034
|
|
|
2978
3035
|
// src/FilterChipBar.tsx
|
|
2979
|
-
var
|
|
2980
|
-
var
|
|
3036
|
+
var import_lucide_react17 = require("lucide-react");
|
|
3037
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2981
3038
|
function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
|
|
2982
3039
|
if (chips.length === 0) return null;
|
|
2983
|
-
return /* @__PURE__ */ (0,
|
|
2984
|
-
chips.map((c) => /* @__PURE__ */ (0,
|
|
3040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5 border-t border-border-default pt-2.5", children: [
|
|
3041
|
+
chips.map((c) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2985
3042
|
Chip,
|
|
2986
3043
|
{
|
|
2987
3044
|
label: c.label,
|
|
@@ -2991,7 +3048,7 @@ function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
|
|
|
2991
3048
|
},
|
|
2992
3049
|
c.key
|
|
2993
3050
|
)),
|
|
2994
|
-
/* @__PURE__ */ (0,
|
|
3051
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { type: "button", onClick: onClearAll, className: "ml-1 text-[12px] font-medium text-text-link hover:underline", children: "Clear all" })
|
|
2995
3052
|
] });
|
|
2996
3053
|
}
|
|
2997
3054
|
function Chip({
|
|
@@ -3000,8 +3057,8 @@ function Chip({
|
|
|
3000
3057
|
parked,
|
|
3001
3058
|
onRemove
|
|
3002
3059
|
}) {
|
|
3003
|
-
return /* @__PURE__ */ (0,
|
|
3004
|
-
/* @__PURE__ */ (0,
|
|
3060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "group relative inline-flex", children: [
|
|
3061
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
3005
3062
|
"span",
|
|
3006
3063
|
{
|
|
3007
3064
|
className: cn(
|
|
@@ -3013,22 +3070,22 @@ function Chip({
|
|
|
3013
3070
|
) : "bg-subtle text-text-secondary ring-transparent group-hover:bg-border-default group-hover:text-text-primary group-hover:ring-border-interactive"
|
|
3014
3071
|
),
|
|
3015
3072
|
children: [
|
|
3016
|
-
parked && /* @__PURE__ */ (0,
|
|
3073
|
+
parked && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react17.CircleSlash, { size: 11, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
|
|
3017
3074
|
label,
|
|
3018
|
-
/* @__PURE__ */ (0,
|
|
3075
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3019
3076
|
"button",
|
|
3020
3077
|
{
|
|
3021
3078
|
type: "button",
|
|
3022
3079
|
onClick: onRemove,
|
|
3023
3080
|
"aria-label": `Remove ${groupLabel}: ${label}`,
|
|
3024
3081
|
className: "text-text-tertiary transition-colors hover:text-text-primary",
|
|
3025
|
-
children: /* @__PURE__ */ (0,
|
|
3082
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react17.X, { size: 12 })
|
|
3026
3083
|
}
|
|
3027
3084
|
)
|
|
3028
3085
|
]
|
|
3029
3086
|
}
|
|
3030
3087
|
),
|
|
3031
|
-
/* @__PURE__ */ (0,
|
|
3088
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
3032
3089
|
"span",
|
|
3033
3090
|
{
|
|
3034
3091
|
role: "tooltip",
|
|
@@ -3040,11 +3097,11 @@ function Chip({
|
|
|
3040
3097
|
}
|
|
3041
3098
|
|
|
3042
3099
|
// src/SortButton.tsx
|
|
3043
|
-
var
|
|
3044
|
-
var
|
|
3100
|
+
var import_lucide_react18 = require("lucide-react");
|
|
3101
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
3045
3102
|
function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
|
|
3046
3103
|
const active = !disabled && sort.key === sortKey;
|
|
3047
|
-
return /* @__PURE__ */ (0,
|
|
3104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
3048
3105
|
"button",
|
|
3049
3106
|
{
|
|
3050
3107
|
type: "button",
|
|
@@ -3072,8 +3129,8 @@ function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
|
|
|
3072
3129
|
),
|
|
3073
3130
|
children: [
|
|
3074
3131
|
label,
|
|
3075
|
-
!disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */ (0,
|
|
3076
|
-
|
|
3132
|
+
!disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react18.ArrowUp, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react18.ArrowDown, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
3133
|
+
import_lucide_react18.ArrowUpDown,
|
|
3077
3134
|
{
|
|
3078
3135
|
size: 12,
|
|
3079
3136
|
className: "shrink-0 text-text-tertiary opacity-50 transition-opacity group-hover:opacity-100"
|
|
@@ -3095,8 +3152,8 @@ function sortProp(sort) {
|
|
|
3095
3152
|
}
|
|
3096
3153
|
|
|
3097
3154
|
// src/Pager.tsx
|
|
3098
|
-
var
|
|
3099
|
-
var
|
|
3155
|
+
var import_lucide_react19 = require("lucide-react");
|
|
3156
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
3100
3157
|
function pageWindow(current, total) {
|
|
3101
3158
|
if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
|
|
3102
3159
|
const keep = /* @__PURE__ */ new Set([1, total, current, current - 1, current + 1]);
|
|
@@ -3112,8 +3169,8 @@ function pageWindow(current, total) {
|
|
|
3112
3169
|
}
|
|
3113
3170
|
function Pager({ page, totalPages, onPage }) {
|
|
3114
3171
|
const btn = "flex h-8 min-w-8 items-center justify-center rounded-control px-2 text-[13px] transition-colors";
|
|
3115
|
-
return /* @__PURE__ */ (0,
|
|
3116
|
-
/* @__PURE__ */ (0,
|
|
3172
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
3173
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3117
3174
|
"button",
|
|
3118
3175
|
{
|
|
3119
3176
|
type: "button",
|
|
@@ -3121,11 +3178,11 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
3121
3178
|
disabled: page === 1,
|
|
3122
3179
|
"aria-label": "Previous page",
|
|
3123
3180
|
className: cn(btn, "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"),
|
|
3124
|
-
children: /* @__PURE__ */ (0,
|
|
3181
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.ChevronLeft, { size: 16 })
|
|
3125
3182
|
}
|
|
3126
3183
|
),
|
|
3127
3184
|
pageWindow(page, totalPages).map(
|
|
3128
|
-
(p) => typeof p === "string" ? /* @__PURE__ */ (0,
|
|
3185
|
+
(p) => typeof p === "string" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3129
3186
|
"button",
|
|
3130
3187
|
{
|
|
3131
3188
|
type: "button",
|
|
@@ -3140,7 +3197,7 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
3140
3197
|
p
|
|
3141
3198
|
)
|
|
3142
3199
|
),
|
|
3143
|
-
/* @__PURE__ */ (0,
|
|
3200
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3144
3201
|
"button",
|
|
3145
3202
|
{
|
|
3146
3203
|
type: "button",
|
|
@@ -3148,14 +3205,14 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
3148
3205
|
disabled: page === totalPages,
|
|
3149
3206
|
"aria-label": "Next page",
|
|
3150
3207
|
className: cn(btn, "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"),
|
|
3151
|
-
children: /* @__PURE__ */ (0,
|
|
3208
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react19.ChevronRight, { size: 16 })
|
|
3152
3209
|
}
|
|
3153
3210
|
)
|
|
3154
3211
|
] });
|
|
3155
3212
|
}
|
|
3156
3213
|
|
|
3157
3214
|
// src/WorkspaceAvatar.tsx
|
|
3158
|
-
var
|
|
3215
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
3159
3216
|
function workspaceInitials(name) {
|
|
3160
3217
|
const words = name.trim().split(/\s+/).filter(Boolean);
|
|
3161
3218
|
if (words.length === 0) return "\xB7";
|
|
@@ -3171,7 +3228,7 @@ var SIZES = {
|
|
|
3171
3228
|
lg: "h-11 w-11 text-[15px]"
|
|
3172
3229
|
};
|
|
3173
3230
|
function WorkspaceAvatar({ name, size = "md" }) {
|
|
3174
|
-
return /* @__PURE__ */ (0,
|
|
3231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3175
3232
|
"span",
|
|
3176
3233
|
{
|
|
3177
3234
|
"aria-hidden": "true",
|
|
@@ -3185,13 +3242,19 @@ function WorkspaceAvatar({ name, size = "md" }) {
|
|
|
3185
3242
|
}
|
|
3186
3243
|
|
|
3187
3244
|
// src/Tag.tsx
|
|
3188
|
-
var
|
|
3245
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3189
3246
|
function Tag({ children, className }) {
|
|
3190
|
-
return /* @__PURE__ */ (0,
|
|
3247
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3191
3248
|
"span",
|
|
3192
3249
|
{
|
|
3193
3250
|
className: cn(
|
|
3194
|
-
|
|
3251
|
+
// text-micro and tertiary ink. The component used to sit at 11px in
|
|
3252
|
+
// secondary -- a step darker than the ten hand-rolled copies the audit
|
|
3253
|
+
// found, which had independently drifted to tertiary. Ten people
|
|
3254
|
+
// reaching for "quieter" is worth more than the component's original
|
|
3255
|
+
// guess: a tag names what a row IS, which is background to the row
|
|
3256
|
+
// itself rather than part of it.
|
|
3257
|
+
"inline-flex items-center whitespace-nowrap rounded-full bg-subtle px-2 py-0.5 text-micro font-medium text-text-tertiary",
|
|
3195
3258
|
className
|
|
3196
3259
|
),
|
|
3197
3260
|
children
|
|
@@ -3200,8 +3263,8 @@ function Tag({ children, className }) {
|
|
|
3200
3263
|
}
|
|
3201
3264
|
|
|
3202
3265
|
// src/TablePagination.tsx
|
|
3203
|
-
var
|
|
3204
|
-
var
|
|
3266
|
+
var import_lucide_react20 = require("lucide-react");
|
|
3267
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3205
3268
|
function TablePagination({
|
|
3206
3269
|
page,
|
|
3207
3270
|
perPage,
|
|
@@ -3221,21 +3284,21 @@ function TablePagination({
|
|
|
3221
3284
|
btn,
|
|
3222
3285
|
"text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"
|
|
3223
3286
|
);
|
|
3224
|
-
return /* @__PURE__ */ (0,
|
|
3225
|
-
/* @__PURE__ */ (0,
|
|
3226
|
-
/* @__PURE__ */ (0,
|
|
3227
|
-
/* @__PURE__ */ (0,
|
|
3287
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), children: [
|
|
3288
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
|
|
3289
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "relative", children: [
|
|
3290
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3228
3291
|
"select",
|
|
3229
3292
|
{
|
|
3230
3293
|
value: perPage,
|
|
3231
3294
|
onChange: (e) => onPerPageChange(Number(e.target.value)),
|
|
3232
3295
|
"aria-label": "Items per page",
|
|
3233
3296
|
className: "appearance-none rounded-control border border-border-default bg-input py-1 pl-2.5 pr-7 text-[13px] font-medium text-text-primary focus:outline focus:outline-2 focus:outline-border-focus",
|
|
3234
|
-
children: perPageOptions.map((n) => /* @__PURE__ */ (0,
|
|
3297
|
+
children: perPageOptions.map((n) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: n, children: n }, n))
|
|
3235
3298
|
}
|
|
3236
3299
|
),
|
|
3237
|
-
/* @__PURE__ */ (0,
|
|
3238
|
-
|
|
3300
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3301
|
+
import_lucide_react20.ChevronDown,
|
|
3239
3302
|
{
|
|
3240
3303
|
size: 13,
|
|
3241
3304
|
"aria-hidden": "true",
|
|
@@ -3245,8 +3308,8 @@ function TablePagination({
|
|
|
3245
3308
|
] }),
|
|
3246
3309
|
"items per page"
|
|
3247
3310
|
] }),
|
|
3248
|
-
/* @__PURE__ */ (0,
|
|
3249
|
-
/* @__PURE__ */ (0,
|
|
3311
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
|
|
3312
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3250
3313
|
"button",
|
|
3251
3314
|
{
|
|
3252
3315
|
type: "button",
|
|
@@ -3254,10 +3317,10 @@ function TablePagination({
|
|
|
3254
3317
|
disabled: current === 1,
|
|
3255
3318
|
"aria-label": "First page",
|
|
3256
3319
|
className: stepBtn,
|
|
3257
|
-
children: /* @__PURE__ */ (0,
|
|
3320
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronFirst, { size: 16, "aria-hidden": "true" })
|
|
3258
3321
|
}
|
|
3259
3322
|
),
|
|
3260
|
-
/* @__PURE__ */ (0,
|
|
3323
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3261
3324
|
"button",
|
|
3262
3325
|
{
|
|
3263
3326
|
type: "button",
|
|
@@ -3265,11 +3328,11 @@ function TablePagination({
|
|
|
3265
3328
|
disabled: current === 1,
|
|
3266
3329
|
"aria-label": "Previous page",
|
|
3267
3330
|
className: stepBtn,
|
|
3268
|
-
children: /* @__PURE__ */ (0,
|
|
3331
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronLeft, { size: 16, "aria-hidden": "true" })
|
|
3269
3332
|
}
|
|
3270
3333
|
),
|
|
3271
3334
|
pageWindow(current, totalPages).map(
|
|
3272
|
-
(p) => typeof p === "string" ? /* @__PURE__ */ (0,
|
|
3335
|
+
(p) => typeof p === "string" ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3273
3336
|
"button",
|
|
3274
3337
|
{
|
|
3275
3338
|
type: "button",
|
|
@@ -3284,7 +3347,7 @@ function TablePagination({
|
|
|
3284
3347
|
p
|
|
3285
3348
|
)
|
|
3286
3349
|
),
|
|
3287
|
-
/* @__PURE__ */ (0,
|
|
3350
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3288
3351
|
"button",
|
|
3289
3352
|
{
|
|
3290
3353
|
type: "button",
|
|
@@ -3292,10 +3355,10 @@ function TablePagination({
|
|
|
3292
3355
|
disabled: current === totalPages,
|
|
3293
3356
|
"aria-label": "Next page",
|
|
3294
3357
|
className: stepBtn,
|
|
3295
|
-
children: /* @__PURE__ */ (0,
|
|
3358
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronRight, { size: 16, "aria-hidden": "true" })
|
|
3296
3359
|
}
|
|
3297
3360
|
),
|
|
3298
|
-
/* @__PURE__ */ (0,
|
|
3361
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3299
3362
|
"button",
|
|
3300
3363
|
{
|
|
3301
3364
|
type: "button",
|
|
@@ -3303,11 +3366,11 @@ function TablePagination({
|
|
|
3303
3366
|
disabled: current === totalPages,
|
|
3304
3367
|
"aria-label": "Last page",
|
|
3305
3368
|
className: stepBtn,
|
|
3306
|
-
children: /* @__PURE__ */ (0,
|
|
3369
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronLast, { size: 16, "aria-hidden": "true" })
|
|
3307
3370
|
}
|
|
3308
3371
|
)
|
|
3309
3372
|
] }),
|
|
3310
|
-
/* @__PURE__ */ (0,
|
|
3373
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
|
|
3311
3374
|
rangeStart.toLocaleString(),
|
|
3312
3375
|
" \u2013 ",
|
|
3313
3376
|
rangeEnd.toLocaleString(),
|
|
@@ -3321,8 +3384,8 @@ function TablePagination({
|
|
|
3321
3384
|
|
|
3322
3385
|
// src/DateRangePicker.tsx
|
|
3323
3386
|
var import_react15 = require("react");
|
|
3324
|
-
var
|
|
3325
|
-
var
|
|
3387
|
+
var import_lucide_react21 = require("lucide-react");
|
|
3388
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3326
3389
|
var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
3327
3390
|
var QUARTER_ABBR = ["Q1", "Q2", "Q3", "Q4"];
|
|
3328
3391
|
var PRESETS = ["Rolling 3 months", "Rolling 6 months", "Rolling 12 months"];
|
|
@@ -3358,7 +3421,7 @@ function spanLabel(label, today) {
|
|
|
3358
3421
|
return `${fmtDate(s)} \u2013 ${fmtDate(e)}`;
|
|
3359
3422
|
}
|
|
3360
3423
|
function MiniSelect({ value, onChange, options }) {
|
|
3361
|
-
return /* @__PURE__ */ (0,
|
|
3424
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3362
3425
|
"select",
|
|
3363
3426
|
{
|
|
3364
3427
|
value: String(value),
|
|
@@ -3367,7 +3430,7 @@ function MiniSelect({ value, onChange, options }) {
|
|
|
3367
3430
|
if (opt) onChange(opt.value);
|
|
3368
3431
|
},
|
|
3369
3432
|
className: "rounded-control border border-border-default bg-input px-1.5 py-1 text-[12px] text-text-primary outline-hidden focus:border-border-focus",
|
|
3370
|
-
children: options.map((o) => /* @__PURE__ */ (0,
|
|
3433
|
+
children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: String(o.value), children: o.label }, String(o.value)))
|
|
3371
3434
|
}
|
|
3372
3435
|
);
|
|
3373
3436
|
}
|
|
@@ -3428,8 +3491,8 @@ function DateRangePicker({
|
|
|
3428
3491
|
if (showFooter) setDraft(label);
|
|
3429
3492
|
else commit(label);
|
|
3430
3493
|
};
|
|
3431
|
-
return /* @__PURE__ */ (0,
|
|
3432
|
-
/* @__PURE__ */ (0,
|
|
3494
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative", ref, children: [
|
|
3495
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
3433
3496
|
"button",
|
|
3434
3497
|
{
|
|
3435
3498
|
type: "button",
|
|
@@ -3438,16 +3501,16 @@ function DateRangePicker({
|
|
|
3438
3501
|
"aria-haspopup": "listbox",
|
|
3439
3502
|
className: chipTriggerClass(),
|
|
3440
3503
|
children: [
|
|
3441
|
-
/* @__PURE__ */ (0,
|
|
3442
|
-
/* @__PURE__ */ (0,
|
|
3443
|
-
/* @__PURE__ */ (0,
|
|
3504
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
3505
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-[10px] text-text-tertiary", children: spanLabel(value, end) }),
|
|
3506
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
3444
3507
|
] }),
|
|
3445
|
-
/* @__PURE__ */ (0,
|
|
3508
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronDown, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
|
|
3446
3509
|
]
|
|
3447
3510
|
}
|
|
3448
3511
|
),
|
|
3449
|
-
open && /* @__PURE__ */ (0,
|
|
3450
|
-
presets.map((p) => /* @__PURE__ */ (0,
|
|
3512
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("absolute top-[calc(100%+8px)] z-30 w-[280px] overflow-hidden rounded-card border border-border-default bg-surface py-1 shadow-overlay", align === "right" ? "right-0" : "left-0"), children: [
|
|
3513
|
+
presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3451
3514
|
"button",
|
|
3452
3515
|
{
|
|
3453
3516
|
type: "button",
|
|
@@ -3457,26 +3520,26 @@ function DateRangePicker({
|
|
|
3457
3520
|
},
|
|
3458
3521
|
p
|
|
3459
3522
|
)),
|
|
3460
|
-
/* @__PURE__ */ (0,
|
|
3461
|
-
/* @__PURE__ */ (0,
|
|
3462
|
-
/* @__PURE__ */ (0,
|
|
3463
|
-
/* @__PURE__ */ (0,
|
|
3523
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
|
|
3524
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
|
|
3525
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "mt-2 flex flex-col gap-2", children: [
|
|
3526
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
|
|
3464
3527
|
"From",
|
|
3465
|
-
/* @__PURE__ */ (0,
|
|
3466
|
-
granularity === "month" && /* @__PURE__ */ (0,
|
|
3467
|
-
granularity === "quarter" && /* @__PURE__ */ (0,
|
|
3468
|
-
/* @__PURE__ */ (0,
|
|
3528
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "flex gap-1", children: [
|
|
3529
|
+
granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
|
|
3530
|
+
granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
|
|
3531
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
|
|
3469
3532
|
] })
|
|
3470
3533
|
] }),
|
|
3471
|
-
/* @__PURE__ */ (0,
|
|
3534
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
|
|
3472
3535
|
"To",
|
|
3473
|
-
/* @__PURE__ */ (0,
|
|
3474
|
-
granularity === "month" && /* @__PURE__ */ (0,
|
|
3475
|
-
granularity === "quarter" && /* @__PURE__ */ (0,
|
|
3476
|
-
/* @__PURE__ */ (0,
|
|
3536
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "flex gap-1", children: [
|
|
3537
|
+
granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
|
|
3538
|
+
granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
|
|
3539
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
|
|
3477
3540
|
] })
|
|
3478
3541
|
] }),
|
|
3479
|
-
/* @__PURE__ */ (0,
|
|
3542
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3480
3543
|
"button",
|
|
3481
3544
|
{
|
|
3482
3545
|
type: "button",
|
|
@@ -3488,15 +3551,15 @@ function DateRangePicker({
|
|
|
3488
3551
|
)
|
|
3489
3552
|
] })
|
|
3490
3553
|
] }),
|
|
3491
|
-
showFooter && /* @__PURE__ */ (0,
|
|
3554
|
+
showFooter && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(FilterDropdownFooter, { onApply: () => commit(draft) })
|
|
3492
3555
|
] })
|
|
3493
3556
|
] });
|
|
3494
3557
|
}
|
|
3495
3558
|
|
|
3496
3559
|
// src/MultiSelectFilter.tsx
|
|
3497
3560
|
var import_react16 = require("react");
|
|
3498
|
-
var
|
|
3499
|
-
var
|
|
3561
|
+
var import_lucide_react22 = require("lucide-react");
|
|
3562
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3500
3563
|
function MultiSelectFilter({
|
|
3501
3564
|
caption,
|
|
3502
3565
|
options = [],
|
|
@@ -3587,8 +3650,8 @@ function MultiSelectFilter({
|
|
|
3587
3650
|
const kids = live.filter((c) => c.label.toLowerCase().includes(ql));
|
|
3588
3651
|
return kids.length ? { ...g, children: kids } : null;
|
|
3589
3652
|
}).filter((g) => g !== null) : [];
|
|
3590
|
-
return /* @__PURE__ */ (0,
|
|
3591
|
-
/* @__PURE__ */ (0,
|
|
3653
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
|
|
3654
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3592
3655
|
"button",
|
|
3593
3656
|
{
|
|
3594
3657
|
type: "button",
|
|
@@ -3596,9 +3659,9 @@ function MultiSelectFilter({
|
|
|
3596
3659
|
"aria-expanded": open,
|
|
3597
3660
|
className: cn(chipTriggerClass(variant), fullWidth && "w-full justify-between"),
|
|
3598
3661
|
children: [
|
|
3599
|
-
/* @__PURE__ */ (0,
|
|
3600
|
-
/* @__PURE__ */ (0,
|
|
3601
|
-
|
|
3662
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChipContent, { caption, value, icon }),
|
|
3663
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3664
|
+
import_lucide_react22.ChevronDown,
|
|
3602
3665
|
{
|
|
3603
3666
|
size: 14,
|
|
3604
3667
|
"aria-hidden": "true",
|
|
@@ -3608,7 +3671,7 @@ function MultiSelectFilter({
|
|
|
3608
3671
|
]
|
|
3609
3672
|
}
|
|
3610
3673
|
),
|
|
3611
|
-
open && /* @__PURE__ */ (0,
|
|
3674
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3612
3675
|
"div",
|
|
3613
3676
|
{
|
|
3614
3677
|
className: cn(
|
|
@@ -3619,9 +3682,9 @@ function MultiSelectFilter({
|
|
|
3619
3682
|
role: "dialog",
|
|
3620
3683
|
"aria-label": caption,
|
|
3621
3684
|
children: [
|
|
3622
|
-
searchable && /* @__PURE__ */ (0,
|
|
3623
|
-
/* @__PURE__ */ (0,
|
|
3624
|
-
/* @__PURE__ */ (0,
|
|
3685
|
+
searchable && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
|
|
3686
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Search, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
|
|
3687
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3625
3688
|
"input",
|
|
3626
3689
|
{
|
|
3627
3690
|
type: "text",
|
|
@@ -3631,37 +3694,37 @@ function MultiSelectFilter({
|
|
|
3631
3694
|
className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
|
|
3632
3695
|
}
|
|
3633
3696
|
),
|
|
3634
|
-
q && /* @__PURE__ */ (0,
|
|
3697
|
+
q && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.X, { size: 13 }) })
|
|
3635
3698
|
] }) }),
|
|
3636
|
-
/* @__PURE__ */ (0,
|
|
3699
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
|
|
3637
3700
|
groups ? visibleGroups.map((g) => {
|
|
3638
3701
|
const state = groupState(g);
|
|
3639
|
-
return /* @__PURE__ */ (0,
|
|
3640
|
-
/* @__PURE__ */ (0,
|
|
3702
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
|
|
3703
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3641
3704
|
"button",
|
|
3642
3705
|
{
|
|
3643
3706
|
type: "button",
|
|
3644
3707
|
onClick: () => toggleGroup(g),
|
|
3645
3708
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3646
3709
|
children: [
|
|
3647
|
-
/* @__PURE__ */ (0,
|
|
3648
|
-
/* @__PURE__ */ (0,
|
|
3649
|
-
counts && /* @__PURE__ */ (0,
|
|
3710
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TriCheck, { state }),
|
|
3711
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
|
|
3712
|
+
counts && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OptionCount, { n: countFor(g.id) })
|
|
3650
3713
|
]
|
|
3651
3714
|
}
|
|
3652
3715
|
),
|
|
3653
3716
|
g.children.map((c) => {
|
|
3654
3717
|
const checked = draft.includes(c.id);
|
|
3655
|
-
return /* @__PURE__ */ (0,
|
|
3718
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3656
3719
|
"button",
|
|
3657
3720
|
{
|
|
3658
3721
|
type: "button",
|
|
3659
3722
|
onClick: () => toggle(c.id),
|
|
3660
3723
|
className: "flex w-full items-center gap-2.5 rounded-control py-2 pl-9 pr-2 text-left transition-colors hover:bg-subtle",
|
|
3661
3724
|
children: [
|
|
3662
|
-
/* @__PURE__ */ (0,
|
|
3663
|
-
/* @__PURE__ */ (0,
|
|
3664
|
-
counts && /* @__PURE__ */ (0,
|
|
3725
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TriCheck, { state: checked ? "all" : "none" }),
|
|
3726
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
|
|
3727
|
+
counts && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OptionCount, { n: countFor(c.id) })
|
|
3665
3728
|
]
|
|
3666
3729
|
},
|
|
3667
3730
|
c.id
|
|
@@ -3670,33 +3733,33 @@ function MultiSelectFilter({
|
|
|
3670
3733
|
] }, g.id);
|
|
3671
3734
|
}) : items.map((o) => {
|
|
3672
3735
|
const checked = draft.includes(o.id);
|
|
3673
|
-
return /* @__PURE__ */ (0,
|
|
3736
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3674
3737
|
"button",
|
|
3675
3738
|
{
|
|
3676
3739
|
type: "button",
|
|
3677
3740
|
onClick: () => toggle(o.id),
|
|
3678
3741
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3679
3742
|
children: [
|
|
3680
|
-
/* @__PURE__ */ (0,
|
|
3743
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3681
3744
|
"span",
|
|
3682
3745
|
{
|
|
3683
3746
|
className: cn(
|
|
3684
3747
|
"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
|
|
3685
3748
|
checked ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3686
3749
|
),
|
|
3687
|
-
children: checked && /* @__PURE__ */ (0,
|
|
3750
|
+
children: checked && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Check, { size: 13, strokeWidth: 3 })
|
|
3688
3751
|
}
|
|
3689
3752
|
),
|
|
3690
|
-
/* @__PURE__ */ (0,
|
|
3691
|
-
counts && /* @__PURE__ */ (0,
|
|
3753
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
|
|
3754
|
+
counts && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OptionCount, { n: countFor(o.id) })
|
|
3692
3755
|
]
|
|
3693
3756
|
},
|
|
3694
3757
|
o.id
|
|
3695
3758
|
);
|
|
3696
3759
|
}),
|
|
3697
|
-
(groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ (0,
|
|
3760
|
+
(groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
|
|
3698
3761
|
] }),
|
|
3699
|
-
showFooter ? /* @__PURE__ */ (0,
|
|
3762
|
+
showFooter ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3700
3763
|
"button",
|
|
3701
3764
|
{
|
|
3702
3765
|
type: "button",
|
|
@@ -3715,7 +3778,7 @@ function MultiSelectFilter({
|
|
|
3715
3778
|
}
|
|
3716
3779
|
function TriCheck({ state }) {
|
|
3717
3780
|
const filled = state !== "none";
|
|
3718
|
-
return /* @__PURE__ */ (0,
|
|
3781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3719
3782
|
"span",
|
|
3720
3783
|
{
|
|
3721
3784
|
className: cn(
|
|
@@ -3723,14 +3786,14 @@ function TriCheck({ state }) {
|
|
|
3723
3786
|
filled ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3724
3787
|
),
|
|
3725
3788
|
children: [
|
|
3726
|
-
state === "all" && /* @__PURE__ */ (0,
|
|
3727
|
-
state === "some" && /* @__PURE__ */ (0,
|
|
3789
|
+
state === "all" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Check, { size: 13, strokeWidth: 3 }),
|
|
3790
|
+
state === "some" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.Minus, { size: 13, strokeWidth: 3 })
|
|
3728
3791
|
]
|
|
3729
3792
|
}
|
|
3730
3793
|
);
|
|
3731
3794
|
}
|
|
3732
3795
|
function OptionCount({ n }) {
|
|
3733
|
-
return /* @__PURE__ */ (0,
|
|
3796
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
|
|
3734
3797
|
"(",
|
|
3735
3798
|
n.toLocaleString(),
|
|
3736
3799
|
")"
|
|
@@ -3738,14 +3801,14 @@ function OptionCount({ n }) {
|
|
|
3738
3801
|
}
|
|
3739
3802
|
|
|
3740
3803
|
// src/Toggle.tsx
|
|
3741
|
-
var
|
|
3804
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3742
3805
|
var SIZES2 = {
|
|
3743
3806
|
sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
|
|
3744
3807
|
md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
|
|
3745
3808
|
};
|
|
3746
3809
|
function Toggle({ checked, onChange, label, size = "md", disabled, className }) {
|
|
3747
3810
|
const s = SIZES2[size];
|
|
3748
|
-
return /* @__PURE__ */ (0,
|
|
3811
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3749
3812
|
"button",
|
|
3750
3813
|
{
|
|
3751
3814
|
type: "button",
|
|
@@ -3761,7 +3824,7 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className })
|
|
|
3761
3824
|
disabled && "cursor-not-allowed opacity-50",
|
|
3762
3825
|
className
|
|
3763
3826
|
),
|
|
3764
|
-
children: /* @__PURE__ */ (0,
|
|
3827
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3765
3828
|
"span",
|
|
3766
3829
|
{
|
|
3767
3830
|
className: cn(
|
|
@@ -3777,21 +3840,21 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className })
|
|
|
3777
3840
|
|
|
3778
3841
|
// src/AISpark.tsx
|
|
3779
3842
|
var import_react17 = require("react");
|
|
3780
|
-
var
|
|
3781
|
-
var
|
|
3843
|
+
var import_lucide_react23 = require("lucide-react");
|
|
3844
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3782
3845
|
function AISpark({ size = 16, className }) {
|
|
3783
3846
|
const id = (0, import_react17.useId)();
|
|
3784
|
-
return /* @__PURE__ */ (0,
|
|
3785
|
-
/* @__PURE__ */ (0,
|
|
3786
|
-
/* @__PURE__ */ (0,
|
|
3787
|
-
/* @__PURE__ */ (0,
|
|
3847
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
|
|
3848
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
|
|
3849
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
|
|
3850
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
|
|
3788
3851
|
] }) }) }),
|
|
3789
|
-
/* @__PURE__ */ (0,
|
|
3852
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react23.Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
|
|
3790
3853
|
] });
|
|
3791
3854
|
}
|
|
3792
3855
|
|
|
3793
3856
|
// src/Freshness.tsx
|
|
3794
|
-
var
|
|
3857
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3795
3858
|
var dotColor = {
|
|
3796
3859
|
fresh: "bg-status-success",
|
|
3797
3860
|
recent: "bg-status-warning",
|
|
@@ -3803,7 +3866,7 @@ var srLabel = {
|
|
|
3803
3866
|
stale: "Older than a day"
|
|
3804
3867
|
};
|
|
3805
3868
|
function Freshness({ level }) {
|
|
3806
|
-
return /* @__PURE__ */ (0,
|
|
3869
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3807
3870
|
"span",
|
|
3808
3871
|
{
|
|
3809
3872
|
className: cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotColor[level]),
|
|
@@ -3829,6 +3892,7 @@ function Freshness({ level }) {
|
|
|
3829
3892
|
DataScopeFilter,
|
|
3830
3893
|
DateRangeFilter,
|
|
3831
3894
|
DateRangePicker,
|
|
3895
|
+
Delta,
|
|
3832
3896
|
FilterChipBar,
|
|
3833
3897
|
FilterDropdownFooter,
|
|
3834
3898
|
Freshness,
|