@mediaradar/design-components 0.11.0 → 0.12.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 +522 -439
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +74 -2
- package/dist/index.d.ts +74 -2
- package/dist/index.js +381 -299
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/scripts/tailwind-coverage.mjs +11 -0
package/dist/index.cjs
CHANGED
|
@@ -24,6 +24,7 @@ __export(index_exports, {
|
|
|
24
24
|
AdvertiserNoResults: () => AdvertiserNoResults,
|
|
25
25
|
AdvertiserQuickFilter: () => AdvertiserQuickFilter,
|
|
26
26
|
AdvertiserSearchPrompt: () => AdvertiserSearchPrompt,
|
|
27
|
+
Badge: () => Badge,
|
|
27
28
|
BarChartPlaceholder: () => BarChartPlaceholder,
|
|
28
29
|
Button: () => Button,
|
|
29
30
|
Card: () => Card,
|
|
@@ -462,18 +463,86 @@ function OptionRow({
|
|
|
462
463
|
);
|
|
463
464
|
}
|
|
464
465
|
|
|
465
|
-
// src/CheckBox.tsx
|
|
466
|
-
var import_lucide_react4 = require("lucide-react");
|
|
467
|
-
|
|
468
466
|
// src/cn.ts
|
|
469
467
|
var import_clsx = require("clsx");
|
|
470
468
|
var import_tailwind_merge = require("tailwind-merge");
|
|
469
|
+
var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
|
|
470
|
+
extend: {
|
|
471
|
+
classGroups: {
|
|
472
|
+
"font-size": [{ text: ["micro", "dense"] }]
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
});
|
|
471
476
|
function cn(...inputs) {
|
|
472
|
-
return
|
|
477
|
+
return twMerge((0, import_clsx.clsx)(inputs));
|
|
473
478
|
}
|
|
474
479
|
|
|
475
|
-
// src/
|
|
480
|
+
// src/Badge.tsx
|
|
476
481
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
482
|
+
var TONE = {
|
|
483
|
+
neutral: "bg-subtle text-text-secondary",
|
|
484
|
+
brand: "bg-brand-primarySoft text-brand-primaryAction",
|
|
485
|
+
success: "bg-status-success/15 text-text-success",
|
|
486
|
+
// Heavier tint than success and danger on purpose. Equal opacity does not
|
|
487
|
+
// give equal presence: the warning amber (#b8843a) sits far closer to the
|
|
488
|
+
// warm canvas than red or green do, so the same 15% that reads clearly for
|
|
489
|
+
// those two disappeared here and the badge looked neutral.
|
|
490
|
+
warning: "bg-status-warning/30 text-text-warning",
|
|
491
|
+
danger: "bg-status-danger/15 text-text-danger",
|
|
492
|
+
// The gradient is the OUTLINE, not the fill. As a fill it was the most
|
|
493
|
+
// distinct tone by a mile, but white text on it ran from 7.5:1 at the blue
|
|
494
|
+
// end down to 2.1:1 at the amber end -- the last third of every AI badge
|
|
495
|
+
// was unreadable. Outlining keeps the gradient as the signal and puts the
|
|
496
|
+
// text back on a flat tint.
|
|
497
|
+
//
|
|
498
|
+
// Two backgrounds in one box: the tint clipped to the padding box, the
|
|
499
|
+
// gradient to the border box, over a transparent 1px border. The tint is
|
|
500
|
+
// opaque on purpose -- an outline over a transparent centre would let the
|
|
501
|
+
// gradient show through the middle, and the badge has to sit on both the
|
|
502
|
+
// canvas and a card without knowing which.
|
|
503
|
+
ai: "border border-transparent text-ai-ontint",
|
|
504
|
+
// Sits on artwork, not on the canvas, so it carries its own scrim rather
|
|
505
|
+
// than a theme surface -- the image behind it is not a colour we control.
|
|
506
|
+
overlay: "bg-scrim text-brand-onprimary"
|
|
507
|
+
};
|
|
508
|
+
var TONE_STYLE = {
|
|
509
|
+
ai: {
|
|
510
|
+
background: "linear-gradient(var(--mr-color-ai-tint), var(--mr-color-ai-tint)) padding-box, var(--mr-color-ai-gradient) border-box"
|
|
511
|
+
}
|
|
512
|
+
};
|
|
513
|
+
var KIND = {
|
|
514
|
+
label: "px-2 py-0.5",
|
|
515
|
+
// Square-ish and centred, with a floor width so a 1-digit and a 3-digit
|
|
516
|
+
// count are the same shape, and lining figures so the width does not shift
|
|
517
|
+
// as the number changes.
|
|
518
|
+
count: "h-[18px] min-w-[18px] justify-center px-1.5 tabular-nums",
|
|
519
|
+
// The only kind that shouts. Caps need the letterspacing -- caps set tight
|
|
520
|
+
// are harder to read than the sentence case they replaced.
|
|
521
|
+
eyebrow: "px-2 py-0.5 uppercase tracking-wider"
|
|
522
|
+
};
|
|
523
|
+
function Badge({ tone = "neutral", kind = "label", children, className }) {
|
|
524
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
525
|
+
"span",
|
|
526
|
+
{
|
|
527
|
+
style: TONE_STYLE[tone],
|
|
528
|
+
className: cn(
|
|
529
|
+
// `inline-flex` + `gap` so a leading icon sits on the text baseline
|
|
530
|
+
// without every caller re-inventing the spacing. `shrink-0` because a
|
|
531
|
+
// badge is almost always beside flexible text that would otherwise
|
|
532
|
+
// squash it. `whitespace-nowrap` because a wrapped badge is a bug.
|
|
533
|
+
"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full text-micro font-semibold leading-none",
|
|
534
|
+
TONE[tone],
|
|
535
|
+
KIND[kind],
|
|
536
|
+
className
|
|
537
|
+
),
|
|
538
|
+
children
|
|
539
|
+
}
|
|
540
|
+
);
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
// src/CheckBox.tsx
|
|
544
|
+
var import_lucide_react4 = require("lucide-react");
|
|
545
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
477
546
|
function boxClass(on, disabled) {
|
|
478
547
|
return cn(
|
|
479
548
|
"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
|
|
@@ -482,8 +551,8 @@ function boxClass(on, disabled) {
|
|
|
482
551
|
);
|
|
483
552
|
}
|
|
484
553
|
function Glyph({ checked, indeterminate }) {
|
|
485
|
-
if (indeterminate) return /* @__PURE__ */ (0,
|
|
486
|
-
return checked ? /* @__PURE__ */ (0,
|
|
554
|
+
if (indeterminate) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Minus, { size: 13, strokeWidth: 3 });
|
|
555
|
+
return checked ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.Check, { size: 13, strokeWidth: 3 }) : null;
|
|
487
556
|
}
|
|
488
557
|
function CheckBox({
|
|
489
558
|
checked,
|
|
@@ -497,7 +566,7 @@ function CheckBox({
|
|
|
497
566
|
className
|
|
498
567
|
}) {
|
|
499
568
|
const on = checked || !!indeterminate;
|
|
500
|
-
return /* @__PURE__ */ (0,
|
|
569
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
501
570
|
"button",
|
|
502
571
|
{
|
|
503
572
|
type: "button",
|
|
@@ -521,18 +590,18 @@ function CheckBox({
|
|
|
521
590
|
disabled && "hover:border-border-interactive",
|
|
522
591
|
className
|
|
523
592
|
),
|
|
524
|
-
children: /* @__PURE__ */ (0,
|
|
593
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Glyph, { checked, indeterminate })
|
|
525
594
|
}
|
|
526
595
|
);
|
|
527
596
|
}
|
|
528
597
|
function CheckBoxBox({ checked, indeterminate, disabled, className }) {
|
|
529
|
-
return /* @__PURE__ */ (0,
|
|
598
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-hidden": "true", className: cn(boxClass(checked || !!indeterminate, disabled), className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Glyph, { checked, indeterminate }) });
|
|
530
599
|
}
|
|
531
600
|
|
|
532
601
|
// src/DateRangeFilter.tsx
|
|
533
602
|
var import_react3 = require("react");
|
|
534
603
|
var import_lucide_react5 = require("lucide-react");
|
|
535
|
-
var
|
|
604
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
536
605
|
var DEFAULT_SHORTCUTS = [
|
|
537
606
|
"Year to date",
|
|
538
607
|
"Rolling 3 months",
|
|
@@ -738,8 +807,8 @@ function DateRangeFilter({
|
|
|
738
807
|
onRangeChange?.(s, e);
|
|
739
808
|
setOpen(false);
|
|
740
809
|
};
|
|
741
|
-
return /* @__PURE__ */ (0,
|
|
742
|
-
/* @__PURE__ */ (0,
|
|
810
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative", ref, children: [
|
|
811
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
743
812
|
"button",
|
|
744
813
|
{
|
|
745
814
|
type: "button",
|
|
@@ -748,16 +817,16 @@ function DateRangeFilter({
|
|
|
748
817
|
"aria-expanded": open,
|
|
749
818
|
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",
|
|
750
819
|
children: [
|
|
751
|
-
icon && /* @__PURE__ */ (0,
|
|
752
|
-
/* @__PURE__ */ (0,
|
|
753
|
-
/* @__PURE__ */ (0,
|
|
754
|
-
/* @__PURE__ */ (0,
|
|
820
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "shrink-0 text-text-tertiary", children: icon }),
|
|
821
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
822
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: showDates ? "text-[11px] text-text-tertiary" : "text-[10px] uppercase tracking-wide text-text-tertiary", children: showDates ? displayDatesLine : caption }),
|
|
823
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: displayValue })
|
|
755
824
|
] }),
|
|
756
|
-
/* @__PURE__ */ (0,
|
|
825
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.ChevronDown, { size: 14, "aria-hidden": "true", className: `shrink-0 text-text-secondary transition-transform ${open ? "rotate-180" : ""}` })
|
|
757
826
|
]
|
|
758
827
|
}
|
|
759
828
|
),
|
|
760
|
-
open && /* @__PURE__ */ (0,
|
|
829
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
761
830
|
"div",
|
|
762
831
|
{
|
|
763
832
|
"data-testid": testIdPrefix && `${testIdPrefix}-popover`,
|
|
@@ -765,7 +834,7 @@ function DateRangeFilter({
|
|
|
765
834
|
role: "dialog",
|
|
766
835
|
"aria-label": "Select date range",
|
|
767
836
|
children: [
|
|
768
|
-
/* @__PURE__ */ (0,
|
|
837
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)(
|
|
769
838
|
"button",
|
|
770
839
|
{
|
|
771
840
|
type: "button",
|
|
@@ -776,28 +845,28 @@ function DateRangeFilter({
|
|
|
776
845
|
},
|
|
777
846
|
s
|
|
778
847
|
)) }),
|
|
779
|
-
/* @__PURE__ */ (0,
|
|
780
|
-
/* @__PURE__ */ (0,
|
|
781
|
-
/* @__PURE__ */ (0,
|
|
782
|
-
/* @__PURE__ */ (0,
|
|
783
|
-
/* @__PURE__ */ (0,
|
|
848
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col p-4", children: [
|
|
849
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-end gap-3", children: [
|
|
850
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { label: "Start Date", value: start ? fmt(start) : "\u2014" }),
|
|
851
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "pb-2.5 text-text-tertiary", children: "\u2014" }),
|
|
852
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Field, { label: "End Date", value: end ? fmt(end) : start ? fmt(start) : "\u2014" })
|
|
784
853
|
] }),
|
|
785
|
-
/* @__PURE__ */ (0,
|
|
786
|
-
/* @__PURE__ */ (0,
|
|
854
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "my-4 border-t border-border-default" }),
|
|
855
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex gap-8", children: [0, 1].map((offset) => {
|
|
787
856
|
const m = addMonths(leftMonth, offset);
|
|
788
857
|
const grid = monthGrid(m.getFullYear(), m.getMonth());
|
|
789
|
-
return /* @__PURE__ */ (0,
|
|
790
|
-
/* @__PURE__ */ (0,
|
|
791
|
-
offset === 0 ? /* @__PURE__ */ (0,
|
|
792
|
-
/* @__PURE__ */ (0,
|
|
858
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-[252px]", children: [
|
|
859
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
|
|
860
|
+
offset === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, -1)), "aria-label": "Previous month", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.ChevronLeft, { size: 16 }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "h-7 w-7" }),
|
|
861
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "text-[15px] font-semibold text-text-primary", children: [
|
|
793
862
|
MONTHS[m.getMonth()],
|
|
794
863
|
" ",
|
|
795
864
|
m.getFullYear()
|
|
796
865
|
] }),
|
|
797
|
-
offset === 1 ? /* @__PURE__ */ (0,
|
|
866
|
+
offset === 1 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, 1)), "aria-label": "Next month", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react5.ChevronRight, { size: 16 }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "h-7 w-7" })
|
|
798
867
|
] }),
|
|
799
|
-
/* @__PURE__ */ (0,
|
|
800
|
-
WEEKDAYS.map((w) => /* @__PURE__ */ (0,
|
|
868
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "grid grid-cols-7", children: [
|
|
869
|
+
WEEKDAYS.map((w) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex h-8 items-center justify-center text-[12px] font-semibold text-text-secondary", children: w }, w)),
|
|
801
870
|
grid.map((d, i) => {
|
|
802
871
|
const inMonth = d.getMonth() === m.getMonth();
|
|
803
872
|
const hasRange = !!(start && end);
|
|
@@ -812,9 +881,9 @@ function DateRangeFilter({
|
|
|
812
881
|
else if (end && isEnd) band = "left-0 right-1/2";
|
|
813
882
|
else band = "left-0 right-0";
|
|
814
883
|
}
|
|
815
|
-
return /* @__PURE__ */ (0,
|
|
816
|
-
band && /* @__PURE__ */ (0,
|
|
817
|
-
/* @__PURE__ */ (0,
|
|
884
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", onClick: () => pickDay(d), className: "relative flex h-9 items-center justify-center", children: [
|
|
885
|
+
band && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `absolute inset-y-[3px] bg-ai-tint ${band}`, "aria-hidden": "true" }),
|
|
886
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
818
887
|
"span",
|
|
819
888
|
{
|
|
820
889
|
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"}`,
|
|
@@ -826,9 +895,9 @@ function DateRangeFilter({
|
|
|
826
895
|
] })
|
|
827
896
|
] }, offset);
|
|
828
897
|
}) }),
|
|
829
|
-
/* @__PURE__ */ (0,
|
|
830
|
-
/* @__PURE__ */ (0,
|
|
831
|
-
/* @__PURE__ */ (0,
|
|
898
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-4 flex justify-end gap-2", children: [
|
|
899
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.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" }),
|
|
900
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.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" })
|
|
832
901
|
] })
|
|
833
902
|
] })
|
|
834
903
|
]
|
|
@@ -837,19 +906,19 @@ function DateRangeFilter({
|
|
|
837
906
|
] });
|
|
838
907
|
}
|
|
839
908
|
function Field({ label, value }) {
|
|
840
|
-
return /* @__PURE__ */ (0,
|
|
841
|
-
/* @__PURE__ */ (0,
|
|
842
|
-
/* @__PURE__ */ (0,
|
|
909
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
|
|
910
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-[12px] font-medium text-text-secondary", children: label }),
|
|
911
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.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 })
|
|
843
912
|
] });
|
|
844
913
|
}
|
|
845
914
|
function NavBtn({ children, onClick, ...rest }) {
|
|
846
|
-
return /* @__PURE__ */ (0,
|
|
915
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.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 });
|
|
847
916
|
}
|
|
848
917
|
|
|
849
918
|
// src/SearchBar.tsx
|
|
850
919
|
var import_react4 = require("react");
|
|
851
920
|
var import_lucide_react6 = require("lucide-react");
|
|
852
|
-
var
|
|
921
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
853
922
|
var DEFAULT_SEARCH_MATCH = { mode: "anyWord", wordJoin: "Or" };
|
|
854
923
|
var MODE_LABEL = {
|
|
855
924
|
anyWord: "Any Word",
|
|
@@ -886,7 +955,7 @@ function SearchBar({
|
|
|
886
955
|
};
|
|
887
956
|
}, [open]);
|
|
888
957
|
const showMatch = variant === "filterable" && matchValue;
|
|
889
|
-
return /* @__PURE__ */ (0,
|
|
958
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
890
959
|
"div",
|
|
891
960
|
{
|
|
892
961
|
className: cx2(
|
|
@@ -894,9 +963,9 @@ function SearchBar({
|
|
|
894
963
|
className
|
|
895
964
|
),
|
|
896
965
|
children: [
|
|
897
|
-
/* @__PURE__ */ (0,
|
|
898
|
-
/* @__PURE__ */ (0,
|
|
899
|
-
/* @__PURE__ */ (0,
|
|
966
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex min-w-0 flex-1 items-center gap-2 px-2.5", children: [
|
|
967
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.Search, { size: 15, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
|
|
968
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
900
969
|
"input",
|
|
901
970
|
{
|
|
902
971
|
type: "text",
|
|
@@ -920,8 +989,8 @@ function SearchBar({
|
|
|
920
989
|
// token package (insights-studio-prototype's own src/index.css;
|
|
921
990
|
// mr-clientapps' own tailwind.config.ts `colors.border.DEFAULT`) --
|
|
922
991
|
// an alias this shared component can't rely on existing.
|
|
923
|
-
/* @__PURE__ */ (0,
|
|
924
|
-
/* @__PURE__ */ (0,
|
|
992
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative shrink-0 border-l border-border-default", ref, children: [
|
|
993
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
925
994
|
"button",
|
|
926
995
|
{
|
|
927
996
|
type: "button",
|
|
@@ -932,7 +1001,7 @@ function SearchBar({
|
|
|
932
1001
|
className: "flex h-full items-center gap-1 px-2.5 text-[13px] font-medium text-text-primary transition-colors hover:bg-subtle",
|
|
933
1002
|
children: [
|
|
934
1003
|
matchValue.mode === "anyWord" ? `${MODE_LABEL.anyWord} (${matchValue.wordJoin})` : MODE_LABEL[matchValue.mode],
|
|
935
|
-
/* @__PURE__ */ (0,
|
|
1004
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
936
1005
|
import_lucide_react6.ChevronDown,
|
|
937
1006
|
{
|
|
938
1007
|
size: 14,
|
|
@@ -943,25 +1012,25 @@ function SearchBar({
|
|
|
943
1012
|
]
|
|
944
1013
|
}
|
|
945
1014
|
),
|
|
946
|
-
open && /* @__PURE__ */ (0,
|
|
1015
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
947
1016
|
"div",
|
|
948
1017
|
{
|
|
949
1018
|
role: "dialog",
|
|
950
1019
|
"aria-label": "Search match type",
|
|
951
1020
|
"data-testid": testIdPrefix && `${testIdPrefix}-mode-popover`,
|
|
952
1021
|
className: "absolute right-0 top-[calc(100%+8px)] z-50 w-[400px] rounded-card border border-border-default bg-surface p-3 shadow-overlay",
|
|
953
|
-
children: /* @__PURE__ */ (0,
|
|
954
|
-
/* @__PURE__ */ (0,
|
|
1022
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { role: "radiogroup", "aria-label": "Search match type", className: "flex flex-col", children: [
|
|
1023
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
955
1024
|
ModeRow,
|
|
956
1025
|
{
|
|
957
1026
|
title: "Any Word Text Search",
|
|
958
1027
|
selected: matchValue.mode === "anyWord",
|
|
959
1028
|
onSelect: () => onMatchChange?.({ mode: "anyWord", wordJoin: matchValue.wordJoin }),
|
|
960
1029
|
testId: testIdPrefix && `${testIdPrefix}-mode-anyWord`,
|
|
961
|
-
description: /* @__PURE__ */ (0,
|
|
1030
|
+
description: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: "Find creatives that contain your keyword(s) using an \u201COr\u201D (match any) or \u201CAnd\u201D (match all) conditional in any order." }),
|
|
962
1031
|
infoText: "The Or/And choice applies only when Any Word is the active search mode.",
|
|
963
|
-
extra: /* @__PURE__ */ (0,
|
|
964
|
-
/* @__PURE__ */ (0,
|
|
1032
|
+
extra: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex items-center gap-3", children: [
|
|
1033
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
965
1034
|
RadioOption,
|
|
966
1035
|
{
|
|
967
1036
|
label: "Or",
|
|
@@ -970,7 +1039,7 @@ function SearchBar({
|
|
|
970
1039
|
testId: testIdPrefix && `${testIdPrefix}-word-join-or`
|
|
971
1040
|
}
|
|
972
1041
|
),
|
|
973
|
-
/* @__PURE__ */ (0,
|
|
1042
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
974
1043
|
RadioOption,
|
|
975
1044
|
{
|
|
976
1045
|
label: "And",
|
|
@@ -982,8 +1051,8 @@ function SearchBar({
|
|
|
982
1051
|
] })
|
|
983
1052
|
}
|
|
984
1053
|
),
|
|
985
|
-
/* @__PURE__ */ (0,
|
|
986
|
-
/* @__PURE__ */ (0,
|
|
1054
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Divider, {}),
|
|
1055
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
987
1056
|
ModeRow,
|
|
988
1057
|
{
|
|
989
1058
|
title: "Exact Match Text Search",
|
|
@@ -994,8 +1063,8 @@ function SearchBar({
|
|
|
994
1063
|
infoText: "Keywords are matched as a single contiguous phrase, in the order you typed them."
|
|
995
1064
|
}
|
|
996
1065
|
),
|
|
997
|
-
/* @__PURE__ */ (0,
|
|
998
|
-
/* @__PURE__ */ (0,
|
|
1066
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Divider, {}),
|
|
1067
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
999
1068
|
ModeRow,
|
|
1000
1069
|
{
|
|
1001
1070
|
title: "Contextual Search",
|
|
@@ -1007,8 +1076,8 @@ function SearchBar({
|
|
|
1007
1076
|
infoText: "Uses semantic matching, so results can include related terms even when the exact keyword isn't present."
|
|
1008
1077
|
}
|
|
1009
1078
|
),
|
|
1010
|
-
/* @__PURE__ */ (0,
|
|
1011
|
-
/* @__PURE__ */ (0,
|
|
1079
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Divider, {}),
|
|
1080
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1012
1081
|
ModeRow,
|
|
1013
1082
|
{
|
|
1014
1083
|
title: "Ad Code Search",
|
|
@@ -1028,7 +1097,7 @@ function SearchBar({
|
|
|
1028
1097
|
);
|
|
1029
1098
|
}
|
|
1030
1099
|
function Divider() {
|
|
1031
|
-
return /* @__PURE__ */ (0,
|
|
1100
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "my-2.5 border-t border-border-default", "aria-hidden": "true" });
|
|
1032
1101
|
}
|
|
1033
1102
|
function ModeRow({
|
|
1034
1103
|
title,
|
|
@@ -1040,7 +1109,7 @@ function ModeRow({
|
|
|
1040
1109
|
onSelect,
|
|
1041
1110
|
testId
|
|
1042
1111
|
}) {
|
|
1043
|
-
return /* @__PURE__ */ (0,
|
|
1112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1044
1113
|
"div",
|
|
1045
1114
|
{
|
|
1046
1115
|
role: "radio",
|
|
@@ -1056,18 +1125,18 @@ function ModeRow({
|
|
|
1056
1125
|
},
|
|
1057
1126
|
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",
|
|
1058
1127
|
children: [
|
|
1059
|
-
/* @__PURE__ */ (0,
|
|
1060
|
-
/* @__PURE__ */ (0,
|
|
1061
|
-
/* @__PURE__ */ (0,
|
|
1062
|
-
/* @__PURE__ */ (0,
|
|
1063
|
-
/* @__PURE__ */ (0,
|
|
1128
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
|
|
1129
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
|
|
1130
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex items-center gap-1", children: [
|
|
1131
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-[14px] font-semibold text-text-primary", children: title }),
|
|
1132
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RowInfoTip, { text: infoText })
|
|
1064
1133
|
] }),
|
|
1065
|
-
badge && /* @__PURE__ */ (0,
|
|
1134
|
+
badge && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rounded-full bg-subtle px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-text-secondary", children: badge }),
|
|
1066
1135
|
extra
|
|
1067
1136
|
] }),
|
|
1068
|
-
selected && /* @__PURE__ */ (0,
|
|
1137
|
+
selected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.Check, { size: 16, strokeWidth: 2.5, "aria-hidden": "true", className: "shrink-0 text-brand-primaryAction" })
|
|
1069
1138
|
] }),
|
|
1070
|
-
/* @__PURE__ */ (0,
|
|
1139
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "block text-[12.5px] leading-snug text-text-secondary", children: description })
|
|
1071
1140
|
]
|
|
1072
1141
|
}
|
|
1073
1142
|
);
|
|
@@ -1078,7 +1147,7 @@ function RadioOption({
|
|
|
1078
1147
|
onSelect,
|
|
1079
1148
|
testId
|
|
1080
1149
|
}) {
|
|
1081
|
-
return /* @__PURE__ */ (0,
|
|
1150
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
1082
1151
|
"button",
|
|
1083
1152
|
{
|
|
1084
1153
|
type: "button",
|
|
@@ -1091,14 +1160,14 @@ function RadioOption({
|
|
|
1091
1160
|
"aria-checked": checked,
|
|
1092
1161
|
className: "flex items-center gap-1.5 text-[13px] font-medium text-text-primary",
|
|
1093
1162
|
children: [
|
|
1094
|
-
/* @__PURE__ */ (0,
|
|
1163
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1095
1164
|
"span",
|
|
1096
1165
|
{
|
|
1097
1166
|
className: cx2(
|
|
1098
1167
|
"flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
|
|
1099
1168
|
checked ? "border-brand-primaryAction" : "border-border-interactive"
|
|
1100
1169
|
),
|
|
1101
|
-
children: checked && /* @__PURE__ */ (0,
|
|
1170
|
+
children: checked && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "h-2 w-2 rounded-full bg-brand-primaryAction" })
|
|
1102
1171
|
}
|
|
1103
1172
|
),
|
|
1104
1173
|
label
|
|
@@ -1117,8 +1186,8 @@ function RowInfoTip({ text }) {
|
|
|
1117
1186
|
window.addEventListener("mousedown", onDown);
|
|
1118
1187
|
return () => window.removeEventListener("mousedown", onDown);
|
|
1119
1188
|
}, [open]);
|
|
1120
|
-
return /* @__PURE__ */ (0,
|
|
1121
|
-
/* @__PURE__ */ (0,
|
|
1189
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative inline-flex shrink-0 items-center", ref, children: [
|
|
1190
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1122
1191
|
"button",
|
|
1123
1192
|
{
|
|
1124
1193
|
type: "button",
|
|
@@ -1129,10 +1198,10 @@ function RowInfoTip({ text }) {
|
|
|
1129
1198
|
"aria-label": "More information",
|
|
1130
1199
|
"aria-expanded": open,
|
|
1131
1200
|
className: "inline-flex text-text-tertiary transition-colors hover:text-text-primary",
|
|
1132
|
-
children: /* @__PURE__ */ (0,
|
|
1201
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react6.AlertCircle, { size: 13, "aria-hidden": "true" })
|
|
1133
1202
|
}
|
|
1134
1203
|
),
|
|
1135
|
-
open && /* @__PURE__ */ (0,
|
|
1204
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
1136
1205
|
"span",
|
|
1137
1206
|
{
|
|
1138
1207
|
role: "tooltip",
|
|
@@ -1146,7 +1215,7 @@ function RowInfoTip({ text }) {
|
|
|
1146
1215
|
// src/SectionRail.tsx
|
|
1147
1216
|
var import_react5 = require("react");
|
|
1148
1217
|
var import_lucide_react7 = require("lucide-react");
|
|
1149
|
-
var
|
|
1218
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
1150
1219
|
function SectionRail({
|
|
1151
1220
|
title,
|
|
1152
1221
|
titleSerif,
|
|
@@ -1159,20 +1228,20 @@ function SectionRail({
|
|
|
1159
1228
|
const scroll = (direction) => {
|
|
1160
1229
|
scrollRef.current?.scrollBy({ left: direction * 320, behavior: "smooth" });
|
|
1161
1230
|
};
|
|
1162
|
-
return /* @__PURE__ */ (0,
|
|
1163
|
-
/* @__PURE__ */ (0,
|
|
1164
|
-
/* @__PURE__ */ (0,
|
|
1165
|
-
/* @__PURE__ */ (0,
|
|
1231
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { className: "flex flex-col gap-4", children: [
|
|
1232
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
|
|
1233
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
|
|
1234
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1166
1235
|
"h2",
|
|
1167
1236
|
{
|
|
1168
1237
|
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",
|
|
1169
1238
|
children: title
|
|
1170
1239
|
}
|
|
1171
1240
|
),
|
|
1172
|
-
/* @__PURE__ */ (0,
|
|
1241
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "mt-1 text-sm text-text-secondary", children: subtitle })
|
|
1173
1242
|
] }),
|
|
1174
|
-
/* @__PURE__ */ (0,
|
|
1175
|
-
viewAllLabel && viewAllHref && /* @__PURE__ */ (0,
|
|
1243
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1244
|
+
viewAllLabel && viewAllHref && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
1176
1245
|
"a",
|
|
1177
1246
|
{
|
|
1178
1247
|
href: viewAllHref,
|
|
@@ -1183,29 +1252,29 @@ function SectionRail({
|
|
|
1183
1252
|
]
|
|
1184
1253
|
}
|
|
1185
1254
|
),
|
|
1186
|
-
/* @__PURE__ */ (0,
|
|
1255
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1187
1256
|
"button",
|
|
1188
1257
|
{
|
|
1189
1258
|
type: "button",
|
|
1190
1259
|
onClick: () => scroll(-1),
|
|
1191
1260
|
"aria-label": "Previous",
|
|
1192
1261
|
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",
|
|
1193
|
-
children: /* @__PURE__ */ (0,
|
|
1262
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react7.ChevronLeft, { size: 16 })
|
|
1194
1263
|
}
|
|
1195
1264
|
),
|
|
1196
|
-
/* @__PURE__ */ (0,
|
|
1265
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1197
1266
|
"button",
|
|
1198
1267
|
{
|
|
1199
1268
|
type: "button",
|
|
1200
1269
|
onClick: () => scroll(1),
|
|
1201
1270
|
"aria-label": "Next",
|
|
1202
1271
|
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",
|
|
1203
|
-
children: /* @__PURE__ */ (0,
|
|
1272
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react7.ChevronRight, { size: 16 })
|
|
1204
1273
|
}
|
|
1205
1274
|
)
|
|
1206
1275
|
] })
|
|
1207
1276
|
] }),
|
|
1208
|
-
/* @__PURE__ */ (0,
|
|
1277
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
1209
1278
|
"div",
|
|
1210
1279
|
{
|
|
1211
1280
|
ref: scrollRef,
|
|
@@ -1219,7 +1288,7 @@ function SectionRail({
|
|
|
1219
1288
|
// src/DataScopeFilter.tsx
|
|
1220
1289
|
var import_react6 = require("react");
|
|
1221
1290
|
var import_lucide_react8 = require("lucide-react");
|
|
1222
|
-
var
|
|
1291
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
1223
1292
|
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.";
|
|
1224
1293
|
function cx3(...classes) {
|
|
1225
1294
|
return classes.filter(Boolean).join(" ");
|
|
@@ -1245,8 +1314,8 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1245
1314
|
onChange(v);
|
|
1246
1315
|
setOpen(false);
|
|
1247
1316
|
};
|
|
1248
|
-
return /* @__PURE__ */ (0,
|
|
1249
|
-
/* @__PURE__ */ (0,
|
|
1317
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative", ref, children: [
|
|
1318
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1250
1319
|
"button",
|
|
1251
1320
|
{
|
|
1252
1321
|
type: "button",
|
|
@@ -1255,11 +1324,11 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1255
1324
|
"aria-haspopup": "listbox",
|
|
1256
1325
|
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",
|
|
1257
1326
|
children: [
|
|
1258
|
-
/* @__PURE__ */ (0,
|
|
1259
|
-
/* @__PURE__ */ (0,
|
|
1260
|
-
/* @__PURE__ */ (0,
|
|
1327
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
1328
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: "Data" }),
|
|
1329
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: display })
|
|
1261
1330
|
] }),
|
|
1262
|
-
/* @__PURE__ */ (0,
|
|
1331
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
1263
1332
|
import_lucide_react8.ChevronDown,
|
|
1264
1333
|
{
|
|
1265
1334
|
size: 14,
|
|
@@ -1270,7 +1339,7 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1270
1339
|
]
|
|
1271
1340
|
}
|
|
1272
1341
|
),
|
|
1273
|
-
open && /* @__PURE__ */ (0,
|
|
1342
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1274
1343
|
"div",
|
|
1275
1344
|
{
|
|
1276
1345
|
role: "listbox",
|
|
@@ -1280,8 +1349,8 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1280
1349
|
align === "right" ? "right-0" : "left-0"
|
|
1281
1350
|
),
|
|
1282
1351
|
children: [
|
|
1283
|
-
/* @__PURE__ */ (0,
|
|
1284
|
-
/* @__PURE__ */ (0,
|
|
1352
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Option, { label: "All", selected: !value, onClick: () => choose(false) }),
|
|
1353
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Option, { label: "Final only", selected: value, onClick: () => choose(true), hint: FINAL_ONLY_TEXT })
|
|
1285
1354
|
]
|
|
1286
1355
|
}
|
|
1287
1356
|
)
|
|
@@ -1293,7 +1362,7 @@ function Option({
|
|
|
1293
1362
|
onClick,
|
|
1294
1363
|
hint
|
|
1295
1364
|
}) {
|
|
1296
|
-
const option = /* @__PURE__ */ (0,
|
|
1365
|
+
const option = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
1297
1366
|
"button",
|
|
1298
1367
|
{
|
|
1299
1368
|
type: "button",
|
|
@@ -1306,15 +1375,15 @@ function Option({
|
|
|
1306
1375
|
selected ? "font-semibold text-text-primary" : "text-text-secondary"
|
|
1307
1376
|
),
|
|
1308
1377
|
children: [
|
|
1309
|
-
/* @__PURE__ */ (0,
|
|
1378
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react8.Check, { size: 14, "aria-hidden": "true", className: cx3("shrink-0 text-brand-primaryAction", !selected && "invisible") }),
|
|
1310
1379
|
label
|
|
1311
1380
|
]
|
|
1312
1381
|
}
|
|
1313
1382
|
);
|
|
1314
1383
|
if (!hint) return option;
|
|
1315
|
-
return /* @__PURE__ */ (0,
|
|
1384
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center pr-2.5", children: [
|
|
1316
1385
|
option,
|
|
1317
|
-
/* @__PURE__ */ (0,
|
|
1386
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(InfoTip, { text: hint, trigger: "hover", label: `About ${label}` })
|
|
1318
1387
|
] });
|
|
1319
1388
|
}
|
|
1320
1389
|
|
|
@@ -1322,7 +1391,7 @@ function Option({
|
|
|
1322
1391
|
var import_react7 = require("react");
|
|
1323
1392
|
var import_react_dom2 = require("react-dom");
|
|
1324
1393
|
var import_lucide_react9 = require("lucide-react");
|
|
1325
|
-
var
|
|
1394
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1326
1395
|
function cx4(...classes) {
|
|
1327
1396
|
return classes.filter(Boolean).join(" ");
|
|
1328
1397
|
}
|
|
@@ -1372,8 +1441,8 @@ function SelectFilter({
|
|
|
1372
1441
|
window.removeEventListener("scroll", reposition, true);
|
|
1373
1442
|
};
|
|
1374
1443
|
}, [open, close, reposition]);
|
|
1375
|
-
return /* @__PURE__ */ (0,
|
|
1376
|
-
/* @__PURE__ */ (0,
|
|
1444
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cx4("relative", fullWidth && "w-full"), ref, children: [
|
|
1445
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1377
1446
|
"button",
|
|
1378
1447
|
{
|
|
1379
1448
|
type: "button",
|
|
@@ -1387,11 +1456,11 @@ function SelectFilter({
|
|
|
1387
1456
|
className
|
|
1388
1457
|
),
|
|
1389
1458
|
children: [
|
|
1390
|
-
/* @__PURE__ */ (0,
|
|
1391
|
-
/* @__PURE__ */ (0,
|
|
1392
|
-
/* @__PURE__ */ (0,
|
|
1459
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
1460
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
|
|
1461
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
1393
1462
|
] }),
|
|
1394
|
-
/* @__PURE__ */ (0,
|
|
1463
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1395
1464
|
import_lucide_react9.ChevronDown,
|
|
1396
1465
|
{
|
|
1397
1466
|
size: 14,
|
|
@@ -1403,7 +1472,7 @@ function SelectFilter({
|
|
|
1403
1472
|
}
|
|
1404
1473
|
),
|
|
1405
1474
|
open && pos && (0, import_react_dom2.createPortal)(
|
|
1406
|
-
/* @__PURE__ */ (0,
|
|
1475
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1407
1476
|
"div",
|
|
1408
1477
|
{
|
|
1409
1478
|
ref: popoverRef,
|
|
@@ -1415,9 +1484,9 @@ function SelectFilter({
|
|
|
1415
1484
|
),
|
|
1416
1485
|
role: "listbox",
|
|
1417
1486
|
"aria-label": caption,
|
|
1418
|
-
children: /* @__PURE__ */ (0,
|
|
1487
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "max-h-[280px] overflow-y-auto p-1", children: options.map((o) => {
|
|
1419
1488
|
const selected = o === value;
|
|
1420
|
-
return /* @__PURE__ */ (0,
|
|
1489
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
1421
1490
|
"button",
|
|
1422
1491
|
{
|
|
1423
1492
|
type: "button",
|
|
@@ -1430,8 +1499,8 @@ function SelectFilter({
|
|
|
1430
1499
|
},
|
|
1431
1500
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
1432
1501
|
children: [
|
|
1433
|
-
/* @__PURE__ */ (0,
|
|
1434
|
-
/* @__PURE__ */ (0,
|
|
1502
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center text-brand-primaryAction", children: selected && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react9.Check, { size: 15, strokeWidth: 3 }) }),
|
|
1503
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
1435
1504
|
"span",
|
|
1436
1505
|
{
|
|
1437
1506
|
className: cx4("flex-1 text-[14px]", selected ? "font-semibold text-text-primary" : "text-text-primary"),
|
|
@@ -1452,9 +1521,9 @@ function SelectFilter({
|
|
|
1452
1521
|
|
|
1453
1522
|
// src/Card.tsx
|
|
1454
1523
|
var import_react8 = require("react");
|
|
1455
|
-
var
|
|
1524
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1456
1525
|
var Card = (0, import_react8.forwardRef)(function Card2({ staticCard, title, subtitle, action, className, children, ...rest }, ref) {
|
|
1457
|
-
return /* @__PURE__ */ (0,
|
|
1526
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1458
1527
|
"article",
|
|
1459
1528
|
{
|
|
1460
1529
|
ref,
|
|
@@ -1465,15 +1534,15 @@ var Card = (0, import_react8.forwardRef)(function Card2({ staticCard, title, sub
|
|
|
1465
1534
|
className
|
|
1466
1535
|
].filter(Boolean).join(" "),
|
|
1467
1536
|
...rest,
|
|
1468
|
-
children: title ? /* @__PURE__ */ (0,
|
|
1469
|
-
/* @__PURE__ */ (0,
|
|
1470
|
-
/* @__PURE__ */ (0,
|
|
1471
|
-
/* @__PURE__ */ (0,
|
|
1472
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1537
|
+
children: title ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-1 flex-col p-card-padding", children: [
|
|
1538
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
|
|
1539
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
|
|
1540
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-[15px] font-semibold leading-snug text-text-primary", children: title }),
|
|
1541
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "mt-0.5 text-[12px] leading-snug text-text-tertiary", children: subtitle })
|
|
1473
1542
|
] }),
|
|
1474
|
-
action && /* @__PURE__ */ (0,
|
|
1543
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "shrink-0 text-text-tertiary", children: action })
|
|
1475
1544
|
] }),
|
|
1476
|
-
/* @__PURE__ */ (0,
|
|
1545
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-4 flex flex-1 flex-col", children })
|
|
1477
1546
|
] }) : children
|
|
1478
1547
|
}
|
|
1479
1548
|
);
|
|
@@ -1481,7 +1550,7 @@ var Card = (0, import_react8.forwardRef)(function Card2({ staticCard, title, sub
|
|
|
1481
1550
|
|
|
1482
1551
|
// src/NoResultsEmptyState.tsx
|
|
1483
1552
|
var import_lucide_react10 = require("lucide-react");
|
|
1484
|
-
var
|
|
1553
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1485
1554
|
var NO_RESULTS_TITLE = "No results match your filters";
|
|
1486
1555
|
var NO_RESULTS_BODY = "Your filters may be too narrow, conflict with each other, or have no activity in this period.";
|
|
1487
1556
|
function noResultsBody(workspaceName) {
|
|
@@ -1503,12 +1572,12 @@ function NoResultsEmptyState({
|
|
|
1503
1572
|
const showClear = hasFilters !== false && Boolean(onClearFilters);
|
|
1504
1573
|
const showEdit = Boolean(onEditFilters);
|
|
1505
1574
|
const hasActions = showClear || showEdit || Boolean(actions && actions.length > 0);
|
|
1506
|
-
return /* @__PURE__ */ (0,
|
|
1507
|
-
/* @__PURE__ */ (0,
|
|
1508
|
-
/* @__PURE__ */ (0,
|
|
1509
|
-
/* @__PURE__ */ (0,
|
|
1510
|
-
hasActions && /* @__PURE__ */ (0,
|
|
1511
|
-
showClear && /* @__PURE__ */ (0,
|
|
1575
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col items-center justify-center gap-3 text-center", "data-testid": testIdPrefix, children: [
|
|
1576
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex h-11 w-11 items-center justify-center rounded-full bg-subtle text-text-tertiary", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react10.FilterX, { size: 20, "aria-hidden": "true" }) }),
|
|
1577
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { className: "text-base font-semibold text-text-primary", children: title }),
|
|
1578
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "max-w-[420px] text-[13px] leading-relaxed text-text-secondary", children: bodyText }),
|
|
1579
|
+
hasActions && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mt-1 flex flex-col items-center gap-3", children: [
|
|
1580
|
+
showClear && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1512
1581
|
"button",
|
|
1513
1582
|
{
|
|
1514
1583
|
type: "button",
|
|
@@ -1518,7 +1587,7 @@ function NoResultsEmptyState({
|
|
|
1518
1587
|
children: "Clear all filters"
|
|
1519
1588
|
}
|
|
1520
1589
|
),
|
|
1521
|
-
showEdit && /* @__PURE__ */ (0,
|
|
1590
|
+
showEdit && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1522
1591
|
"button",
|
|
1523
1592
|
{
|
|
1524
1593
|
type: "button",
|
|
@@ -1528,7 +1597,7 @@ function NoResultsEmptyState({
|
|
|
1528
1597
|
children: "Edit filters"
|
|
1529
1598
|
}
|
|
1530
1599
|
),
|
|
1531
|
-
actions?.map((action, i) => /* @__PURE__ */ (0,
|
|
1600
|
+
actions?.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
1532
1601
|
"button",
|
|
1533
1602
|
{
|
|
1534
1603
|
type: "button",
|
|
@@ -1545,12 +1614,12 @@ function NoResultsEmptyState({
|
|
|
1545
1614
|
// src/WorkspaceSelectedCard.tsx
|
|
1546
1615
|
var import_react9 = require("react");
|
|
1547
1616
|
var import_lucide_react11 = require("lucide-react");
|
|
1548
|
-
var
|
|
1617
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1549
1618
|
function cx5(...parts) {
|
|
1550
1619
|
return parts.filter(Boolean).join(" ");
|
|
1551
1620
|
}
|
|
1552
1621
|
function WorkspaceSelectedCard({ groups, testIdPrefix }) {
|
|
1553
|
-
return /* @__PURE__ */ (0,
|
|
1622
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)("div", { className: "flex flex-col divide-y divide-border-default", children: groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SummaryGroupItem, { group: g, testIdPrefix }, g.id)) }) });
|
|
1554
1623
|
}
|
|
1555
1624
|
function SummaryGroupItem({
|
|
1556
1625
|
group,
|
|
@@ -1567,8 +1636,8 @@ function SummaryGroupItem({
|
|
|
1567
1636
|
else if (expandCount === 0) setOpen(false);
|
|
1568
1637
|
wasEmpty.current = expandCount === 0;
|
|
1569
1638
|
}, [expandCount]);
|
|
1570
|
-
return /* @__PURE__ */ (0,
|
|
1571
|
-
/* @__PURE__ */ (0,
|
|
1639
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: nested ? "" : "py-3 first:pt-0 last:pb-0", children: [
|
|
1640
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
1572
1641
|
"button",
|
|
1573
1642
|
{
|
|
1574
1643
|
type: "button",
|
|
@@ -1577,7 +1646,7 @@ function SummaryGroupItem({
|
|
|
1577
1646
|
"data-testid": testIdPrefix && `${testIdPrefix}-group-${group.id}`,
|
|
1578
1647
|
className: "flex w-full min-w-0 items-center gap-2 text-left",
|
|
1579
1648
|
children: [
|
|
1580
|
-
/* @__PURE__ */ (0,
|
|
1649
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1581
1650
|
import_lucide_react11.ChevronDown,
|
|
1582
1651
|
{
|
|
1583
1652
|
size: 14,
|
|
@@ -1585,37 +1654,37 @@ function SummaryGroupItem({
|
|
|
1585
1654
|
className: cx5("shrink-0 text-text-secondary transition-transform", !open && "-rotate-90")
|
|
1586
1655
|
}
|
|
1587
1656
|
),
|
|
1588
|
-
/* @__PURE__ */ (0,
|
|
1589
|
-
/* @__PURE__ */ (0,
|
|
1657
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cx5("truncate font-semibold text-text-primary", nested ? "text-[12px]" : "text-[13px]"), children: group.label }),
|
|
1658
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "shrink-0 rounded-full bg-subtle px-1.5 py-0.5 text-[11px] font-semibold text-text-secondary", children: ownCount })
|
|
1590
1659
|
]
|
|
1591
1660
|
}
|
|
1592
1661
|
),
|
|
1593
|
-
open && /* @__PURE__ */ (0,
|
|
1594
|
-
ownCount > 0 && /* @__PURE__ */ (0,
|
|
1595
|
-
group.items.map((item) => /* @__PURE__ */ (0,
|
|
1662
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "pt-2.5", children: ownCount === 0 && subCount === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-[12px] text-text-secondary", children: "Nothing selected." }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-2.5", children: [
|
|
1663
|
+
ownCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
|
|
1664
|
+
group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
1596
1665
|
"div",
|
|
1597
1666
|
{
|
|
1598
1667
|
className: "flex items-center justify-between gap-2 rounded-control border border-border-default bg-canvas px-2 py-1",
|
|
1599
1668
|
children: [
|
|
1600
|
-
/* @__PURE__ */ (0,
|
|
1601
|
-
/* @__PURE__ */ (0,
|
|
1602
|
-
item.meta && /* @__PURE__ */ (0,
|
|
1669
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "min-w-0 flex-1", children: [
|
|
1670
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "block truncate text-[12px] text-text-primary", children: item.name }),
|
|
1671
|
+
item.meta && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "block truncate text-[11px] text-text-secondary", children: item.meta })
|
|
1603
1672
|
] }),
|
|
1604
|
-
/* @__PURE__ */ (0,
|
|
1673
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1605
1674
|
"button",
|
|
1606
1675
|
{
|
|
1607
1676
|
type: "button",
|
|
1608
1677
|
"aria-label": `Remove ${item.name}`,
|
|
1609
1678
|
onClick: () => group.onRemove(item.id),
|
|
1610
1679
|
className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-control text-text-secondary hover:bg-subtle hover:text-text-danger",
|
|
1611
|
-
children: /* @__PURE__ */ (0,
|
|
1680
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react11.X, { size: 12, "aria-hidden": "true" })
|
|
1612
1681
|
}
|
|
1613
1682
|
)
|
|
1614
1683
|
]
|
|
1615
1684
|
},
|
|
1616
1685
|
item.id
|
|
1617
1686
|
)),
|
|
1618
|
-
/* @__PURE__ */ (0,
|
|
1687
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
1619
1688
|
"button",
|
|
1620
1689
|
{
|
|
1621
1690
|
type: "button",
|
|
@@ -1626,13 +1695,13 @@ function SummaryGroupItem({
|
|
|
1626
1695
|
}
|
|
1627
1696
|
)
|
|
1628
1697
|
] }),
|
|
1629
|
-
group.subGroups?.map((sg) => /* @__PURE__ */ (0,
|
|
1698
|
+
group.subGroups?.map((sg) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SummaryGroupItem, { group: sg, nested: true, testIdPrefix }, sg.id))
|
|
1630
1699
|
] }) })
|
|
1631
1700
|
] });
|
|
1632
1701
|
}
|
|
1633
1702
|
|
|
1634
1703
|
// src/chart-placeholder-shared.tsx
|
|
1635
|
-
var
|
|
1704
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
1636
1705
|
var GRID_ROWS = [0, 25, 50, 75, 100];
|
|
1637
1706
|
var Y_TICK_WIDTHS = [26, 30, 30, 26, 20];
|
|
1638
1707
|
var Y_AXIS_W = 48;
|
|
@@ -1644,9 +1713,9 @@ function AxisFrame({
|
|
|
1644
1713
|
children
|
|
1645
1714
|
}) {
|
|
1646
1715
|
const gutter = xTicks > 0 ? X_AXIS_H : 0;
|
|
1647
|
-
return /* @__PURE__ */ (0,
|
|
1648
|
-
/* @__PURE__ */ (0,
|
|
1649
|
-
GRID_ROWS.map((pct) => /* @__PURE__ */ (0,
|
|
1716
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-full", style: { height }, role: "presentation", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative h-full w-full", children: [
|
|
1717
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "absolute inset-y-0 right-0", style: { left: Y_AXIS_W, bottom: gutter }, children: [
|
|
1718
|
+
GRID_ROWS.map((pct) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1650
1719
|
"div",
|
|
1651
1720
|
{
|
|
1652
1721
|
className: "absolute inset-x-0 border-t border-dashed",
|
|
@@ -1654,9 +1723,9 @@ function AxisFrame({
|
|
|
1654
1723
|
},
|
|
1655
1724
|
pct
|
|
1656
1725
|
)),
|
|
1657
|
-
/* @__PURE__ */ (0,
|
|
1726
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute inset-0", children })
|
|
1658
1727
|
] }),
|
|
1659
|
-
/* @__PURE__ */ (0,
|
|
1728
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)(
|
|
1660
1729
|
"div",
|
|
1661
1730
|
{
|
|
1662
1731
|
className: "absolute right-2 h-2 -translate-y-1/2 rounded-xs bg-subtle",
|
|
@@ -1664,27 +1733,27 @@ function AxisFrame({
|
|
|
1664
1733
|
},
|
|
1665
1734
|
pct
|
|
1666
1735
|
)) }),
|
|
1667
|
-
xTicks > 0 && /* @__PURE__ */ (0,
|
|
1736
|
+
xTicks > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1668
1737
|
"div",
|
|
1669
1738
|
{
|
|
1670
1739
|
className: "absolute bottom-0 right-0 flex items-center",
|
|
1671
1740
|
style: { left: Y_AXIS_W, height: X_AXIS_H },
|
|
1672
|
-
children: Array.from({ length: xTicks }, (_, i) => /* @__PURE__ */ (0,
|
|
1741
|
+
children: Array.from({ length: xTicks }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-1 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "h-2 w-full max-w-[26px] rounded-xs bg-subtle" }) }, i))
|
|
1673
1742
|
}
|
|
1674
1743
|
)
|
|
1675
1744
|
] }) });
|
|
1676
1745
|
}
|
|
1677
1746
|
function BlankLegend({ rows, reverse = false }) {
|
|
1678
|
-
return /* @__PURE__ */ (0,
|
|
1747
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1679
1748
|
"ul",
|
|
1680
1749
|
{
|
|
1681
1750
|
className: `flex flex-1 justify-center gap-1.5 ${reverse ? "flex-col-reverse" : "flex-col"}`,
|
|
1682
1751
|
role: "presentation",
|
|
1683
1752
|
"aria-hidden": "true",
|
|
1684
|
-
children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0,
|
|
1685
|
-
/* @__PURE__ */ (0,
|
|
1686
|
-
/* @__PURE__ */ (0,
|
|
1687
|
-
/* @__PURE__ */ (0,
|
|
1753
|
+
children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("li", { className: "flex items-center justify-between gap-2", children: [
|
|
1754
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "flex items-center gap-1.5", children: [
|
|
1755
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "h-2.5 w-2.5 rounded-xs bg-subtle" }),
|
|
1756
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1688
1757
|
"span",
|
|
1689
1758
|
{
|
|
1690
1759
|
className: "h-2 rounded-xs bg-subtle",
|
|
@@ -1692,21 +1761,21 @@ function BlankLegend({ rows, reverse = false }) {
|
|
|
1692
1761
|
}
|
|
1693
1762
|
)
|
|
1694
1763
|
] }),
|
|
1695
|
-
/* @__PURE__ */ (0,
|
|
1764
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "h-2 w-6 rounded-xs bg-subtle" })
|
|
1696
1765
|
] }, i))
|
|
1697
1766
|
}
|
|
1698
1767
|
);
|
|
1699
1768
|
}
|
|
1700
1769
|
|
|
1701
1770
|
// src/BarChartPlaceholder.tsx
|
|
1702
|
-
var
|
|
1771
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1703
1772
|
var BAR_PROFILE = [92, 86, 76, 65, 57, 40, 30, 24, 18, 13];
|
|
1704
1773
|
function BarChartPlaceholder({ height = 220 }) {
|
|
1705
|
-
return /* @__PURE__ */ (0,
|
|
1774
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AxisFrame, { height, xTicks: BAR_PROFILE.length, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex h-full w-full items-end gap-2", children: BAR_PROFILE.map((pct, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-1 rounded-t-[3px] bg-subtle", style: { height: `${pct}%` } }, i)) }) });
|
|
1706
1775
|
}
|
|
1707
1776
|
|
|
1708
1777
|
// src/LineChartPlaceholder.tsx
|
|
1709
|
-
var
|
|
1778
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
1710
1779
|
var LINE_SERIES = [
|
|
1711
1780
|
[58, 52, 55, 41, 45, 33, 36, 25, 28, 17],
|
|
1712
1781
|
[74, 71, 66, 68, 59, 61, 54, 56, 48, 45],
|
|
@@ -1716,9 +1785,9 @@ var LINE_SERIES = [
|
|
|
1716
1785
|
var LINE_FORECAST_FROM = 7;
|
|
1717
1786
|
function LineChartPlaceholder({ height = 280 }) {
|
|
1718
1787
|
const toPath = (pts, from, to) => pts.slice(from, to).map((y, i) => `${(i + from) / (pts.length - 1) * 100},${y}`).join(" ");
|
|
1719
|
-
return /* @__PURE__ */ (0,
|
|
1720
|
-
/* @__PURE__ */ (0,
|
|
1721
|
-
/* @__PURE__ */ (0,
|
|
1788
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(AxisFrame, { height, xTicks: LINE_SERIES[0].length, children: [
|
|
1789
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.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_runtime16.jsxs)("g", { children: [
|
|
1790
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1722
1791
|
"polyline",
|
|
1723
1792
|
{
|
|
1724
1793
|
points: toPath(pts, 0, LINE_FORECAST_FROM + 1),
|
|
@@ -1730,7 +1799,7 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1730
1799
|
strokeLinejoin: "round"
|
|
1731
1800
|
}
|
|
1732
1801
|
),
|
|
1733
|
-
/* @__PURE__ */ (0,
|
|
1802
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1734
1803
|
"polyline",
|
|
1735
1804
|
{
|
|
1736
1805
|
points: toPath(pts, LINE_FORECAST_FROM, pts.length),
|
|
@@ -1745,7 +1814,7 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1745
1814
|
)
|
|
1746
1815
|
] }, s)) }),
|
|
1747
1816
|
LINE_SERIES.map(
|
|
1748
|
-
(pts, s) => pts.map((y, i) => /* @__PURE__ */ (0,
|
|
1817
|
+
(pts, s) => pts.map((y, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
1749
1818
|
"div",
|
|
1750
1819
|
{
|
|
1751
1820
|
className: "absolute h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full",
|
|
@@ -1762,16 +1831,16 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1762
1831
|
}
|
|
1763
1832
|
|
|
1764
1833
|
// src/PieChartPlaceholder.tsx
|
|
1765
|
-
var
|
|
1834
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
1766
1835
|
var PIE_SEAMS = [0, 115, 180, 230, 262, 288, 310, 332];
|
|
1767
1836
|
function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
|
|
1768
1837
|
const r = 45;
|
|
1769
|
-
return /* @__PURE__ */ (0,
|
|
1770
|
-
/* @__PURE__ */ (0,
|
|
1771
|
-
/* @__PURE__ */ (0,
|
|
1838
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex w-full items-center gap-3", style: { height }, role: "presentation", "aria-hidden": "true", children: [
|
|
1839
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex h-full items-center justify-center", style: { width: "60%" }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("svg", { viewBox: "0 0 100 100", className: "h-full", style: { aspectRatio: "1 / 1" }, children: [
|
|
1840
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("circle", { cx: "50", cy: "50", r, fill: "var(--mr-color-subtle)" }),
|
|
1772
1841
|
PIE_SEAMS.map((deg) => {
|
|
1773
1842
|
const rad = (deg - 90) * Math.PI / 180;
|
|
1774
|
-
return /* @__PURE__ */ (0,
|
|
1843
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
1775
1844
|
"line",
|
|
1776
1845
|
{
|
|
1777
1846
|
x1: "50",
|
|
@@ -1785,12 +1854,12 @@ function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
|
|
|
1785
1854
|
);
|
|
1786
1855
|
})
|
|
1787
1856
|
] }) }),
|
|
1788
|
-
/* @__PURE__ */ (0,
|
|
1857
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BlankLegend, { rows: legendRows })
|
|
1789
1858
|
] });
|
|
1790
1859
|
}
|
|
1791
1860
|
|
|
1792
1861
|
// src/StackedColumnPlaceholder.tsx
|
|
1793
|
-
var
|
|
1862
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1794
1863
|
var COLUMN_WEIGHTS = [20, 30, 15, 35, 24, 12, 28, 18];
|
|
1795
1864
|
function columnBands(count) {
|
|
1796
1865
|
const weights = Array.from({ length: count }, (_, i) => COLUMN_WEIGHTS[i % COLUMN_WEIGHTS.length]);
|
|
@@ -1803,7 +1872,7 @@ function StackedColumnPlaceholder({
|
|
|
1803
1872
|
legendRows = 4,
|
|
1804
1873
|
axis = false
|
|
1805
1874
|
}) {
|
|
1806
|
-
const column = /* @__PURE__ */ (0,
|
|
1875
|
+
const column = /* @__PURE__ */ (0, import_jsx_runtime18.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_runtime18.jsx)(
|
|
1807
1876
|
"div",
|
|
1808
1877
|
{
|
|
1809
1878
|
style: {
|
|
@@ -1815,16 +1884,16 @@ function StackedColumnPlaceholder({
|
|
|
1815
1884
|
},
|
|
1816
1885
|
i
|
|
1817
1886
|
)) });
|
|
1818
|
-
return /* @__PURE__ */ (0,
|
|
1819
|
-
axis ? /* @__PURE__ */ (0,
|
|
1820
|
-
/* @__PURE__ */ (0,
|
|
1887
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex w-full gap-4", style: { height }, role: "presentation", "aria-hidden": "true", children: [
|
|
1888
|
+
axis ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { width: "55%" }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AxisFrame, { height, xTicks: 0, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex h-full items-stretch justify-center", children: column }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-stretch py-1", children: column }),
|
|
1889
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BlankLegend, { rows: legendRows, reverse: !axis })
|
|
1821
1890
|
] });
|
|
1822
1891
|
}
|
|
1823
1892
|
|
|
1824
1893
|
// src/Tooltip.tsx
|
|
1825
1894
|
var import_react10 = require("react");
|
|
1826
1895
|
var import_react_dom3 = require("react-dom");
|
|
1827
|
-
var
|
|
1896
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1828
1897
|
function cx6(...parts) {
|
|
1829
1898
|
return parts.filter(Boolean).join(" ");
|
|
1830
1899
|
}
|
|
@@ -1939,7 +2008,7 @@ function Tooltip({
|
|
|
1939
2008
|
}
|
|
1940
2009
|
}
|
|
1941
2010
|
const floating = anchor != null && typeof document !== "undefined" ? (0, import_react_dom3.createPortal)(
|
|
1942
|
-
/* @__PURE__ */ (0,
|
|
2011
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1943
2012
|
"span",
|
|
1944
2013
|
{
|
|
1945
2014
|
ref: boxRef,
|
|
@@ -1961,7 +2030,7 @@ function Tooltip({
|
|
|
1961
2030
|
document.body
|
|
1962
2031
|
) : null;
|
|
1963
2032
|
if (anchorRef) return floating;
|
|
1964
|
-
return /* @__PURE__ */ (0,
|
|
2033
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1965
2034
|
"span",
|
|
1966
2035
|
{
|
|
1967
2036
|
ref,
|
|
@@ -1980,26 +2049,26 @@ function Tooltip({
|
|
|
1980
2049
|
}
|
|
1981
2050
|
|
|
1982
2051
|
// src/AdvertiserNoResults.tsx
|
|
1983
|
-
var
|
|
2052
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1984
2053
|
function AdvertiserNoResults({
|
|
1985
2054
|
query,
|
|
1986
2055
|
hint = "Try checking your spelling or searching for a broader brand name."
|
|
1987
2056
|
}) {
|
|
1988
|
-
return /* @__PURE__ */ (0,
|
|
1989
|
-
/* @__PURE__ */ (0,
|
|
2057
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-col items-center gap-1.5 px-4 py-8 text-center", children: [
|
|
2058
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "text-[13px] font-medium text-text-primary", children: [
|
|
1990
2059
|
"No results found for \u201C",
|
|
1991
2060
|
query,
|
|
1992
2061
|
"\u201D"
|
|
1993
2062
|
] }),
|
|
1994
|
-
/* @__PURE__ */ (0,
|
|
2063
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "text-[12px] leading-snug text-text-tertiary", children: hint })
|
|
1995
2064
|
] });
|
|
1996
2065
|
}
|
|
1997
2066
|
|
|
1998
2067
|
// src/SelectAllVisible.tsx
|
|
1999
2068
|
var import_lucide_react12 = require("lucide-react");
|
|
2000
|
-
var
|
|
2069
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
2001
2070
|
function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
2002
|
-
return /* @__PURE__ */ (0,
|
|
2071
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
2003
2072
|
"button",
|
|
2004
2073
|
{
|
|
2005
2074
|
type: "button",
|
|
@@ -2007,7 +2076,7 @@ function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
|
2007
2076
|
onClick: onToggle,
|
|
2008
2077
|
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",
|
|
2009
2078
|
children: [
|
|
2010
|
-
/* @__PURE__ */ (0,
|
|
2079
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react12.ListChecks, { size: 14, "aria-hidden": "true" }),
|
|
2011
2080
|
allSelected ? `Deselect ${count} visible` : `Select all ${count} visible`
|
|
2012
2081
|
]
|
|
2013
2082
|
}
|
|
@@ -2016,14 +2085,14 @@ function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
|
2016
2085
|
|
|
2017
2086
|
// src/SelectedSection.tsx
|
|
2018
2087
|
var import_lucide_react13 = require("lucide-react");
|
|
2019
|
-
var
|
|
2088
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
2020
2089
|
function cx7(...parts) {
|
|
2021
2090
|
return parts.filter(Boolean).join(" ");
|
|
2022
2091
|
}
|
|
2023
2092
|
function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
|
|
2024
2093
|
if (count === 0) return null;
|
|
2025
|
-
return /* @__PURE__ */ (0,
|
|
2026
|
-
/* @__PURE__ */ (0,
|
|
2094
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col", children: [
|
|
2095
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
2027
2096
|
"button",
|
|
2028
2097
|
{
|
|
2029
2098
|
type: "button",
|
|
@@ -2032,14 +2101,14 @@ function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
|
|
|
2032
2101
|
"aria-expanded": open,
|
|
2033
2102
|
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",
|
|
2034
2103
|
children: [
|
|
2035
|
-
/* @__PURE__ */ (0,
|
|
2104
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react13.ChevronDown, { size: 13, "aria-hidden": "true", className: cx7("transition-transform", !open && "-rotate-90") }),
|
|
2036
2105
|
"Selected (",
|
|
2037
2106
|
count,
|
|
2038
2107
|
")"
|
|
2039
2108
|
]
|
|
2040
2109
|
}
|
|
2041
2110
|
),
|
|
2042
|
-
open && /* @__PURE__ */ (0,
|
|
2111
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex flex-col gap-0.5", children })
|
|
2043
2112
|
] });
|
|
2044
2113
|
}
|
|
2045
2114
|
|
|
@@ -2047,7 +2116,7 @@ function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
|
|
|
2047
2116
|
var import_react11 = require("react");
|
|
2048
2117
|
var import_react_dom4 = require("react-dom");
|
|
2049
2118
|
var import_lucide_react14 = require("lucide-react");
|
|
2050
|
-
var
|
|
2119
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
2051
2120
|
function cx8(...parts) {
|
|
2052
2121
|
return parts.filter(Boolean).join(" ");
|
|
2053
2122
|
}
|
|
@@ -2142,17 +2211,17 @@ function SelectionPicker({
|
|
|
2142
2211
|
}
|
|
2143
2212
|
};
|
|
2144
2213
|
const rowGridCols = showInfoColumn ? "grid-cols-[36px_1fr_44px]" : "grid-cols-[36px_1fr]";
|
|
2145
|
-
return /* @__PURE__ */ (0,
|
|
2146
|
-
helper && /* @__PURE__ */ (0,
|
|
2147
|
-
/* @__PURE__ */ (0,
|
|
2148
|
-
/* @__PURE__ */ (0,
|
|
2214
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-4", children: [
|
|
2215
|
+
helper && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
2216
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[13px] text-text-secondary", children: helper }),
|
|
2217
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("hr", { className: "-mx-5 -mt-2 border-border-default sm:-mx-6" })
|
|
2149
2218
|
] }),
|
|
2150
|
-
hasAccountLists && /* @__PURE__ */ (0,
|
|
2219
|
+
hasAccountLists && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "inline-flex gap-0.5 self-start rounded-control border border-border-default bg-canvas p-0.5", children: [
|
|
2151
2220
|
{ id: "search", label: "Search", icon: import_lucide_react14.Search },
|
|
2152
2221
|
{ id: "lists", label: "Account lists", icon: import_lucide_react14.List }
|
|
2153
2222
|
].map((t) => {
|
|
2154
2223
|
const on = source === t.id;
|
|
2155
|
-
return /* @__PURE__ */ (0,
|
|
2224
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2156
2225
|
"button",
|
|
2157
2226
|
{
|
|
2158
2227
|
type: "button",
|
|
@@ -2163,18 +2232,18 @@ function SelectionPicker({
|
|
|
2163
2232
|
on ? "bg-surface text-text-primary shadow-raised" : "text-text-secondary hover:text-text-primary"
|
|
2164
2233
|
),
|
|
2165
2234
|
children: [
|
|
2166
|
-
/* @__PURE__ */ (0,
|
|
2235
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(t.icon, { size: 14, "aria-hidden": "true" }),
|
|
2167
2236
|
t.label
|
|
2168
2237
|
]
|
|
2169
2238
|
},
|
|
2170
2239
|
t.id
|
|
2171
2240
|
);
|
|
2172
2241
|
}) }),
|
|
2173
|
-
source === "search" && /* @__PURE__ */ (0,
|
|
2174
|
-
/* @__PURE__ */ (0,
|
|
2175
|
-
/* @__PURE__ */ (0,
|
|
2176
|
-
/* @__PURE__ */ (0,
|
|
2177
|
-
/* @__PURE__ */ (0,
|
|
2242
|
+
source === "search" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
|
|
2243
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
2244
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.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: [
|
|
2245
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.Search, { size: 15, className: "text-text-secondary", "aria-hidden": "true" }),
|
|
2246
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2178
2247
|
"input",
|
|
2179
2248
|
{
|
|
2180
2249
|
value: query,
|
|
@@ -2190,7 +2259,7 @@ function SelectionPicker({
|
|
|
2190
2259
|
}
|
|
2191
2260
|
)
|
|
2192
2261
|
] }),
|
|
2193
|
-
filters.map((f) => /* @__PURE__ */ (0,
|
|
2262
|
+
filters.map((f) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2194
2263
|
FilterDropdown,
|
|
2195
2264
|
{
|
|
2196
2265
|
filter: f,
|
|
@@ -2202,14 +2271,14 @@ function SelectionPicker({
|
|
|
2202
2271
|
)),
|
|
2203
2272
|
toolbarExtra
|
|
2204
2273
|
] }),
|
|
2205
|
-
!hasSearched ? /* @__PURE__ */ (0,
|
|
2206
|
-
/* @__PURE__ */ (0,
|
|
2207
|
-
/* @__PURE__ */ (0,
|
|
2208
|
-
/* @__PURE__ */ (0,
|
|
2209
|
-
/* @__PURE__ */ (0,
|
|
2274
|
+
!hasSearched ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
|
|
2275
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.Search, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
|
|
2276
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
2277
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[14px] font-semibold text-text-primary", children: "Search to get started" }),
|
|
2278
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[13px] text-text-tertiary", children: "Use the search or filters above to find and add options." })
|
|
2210
2279
|
] })
|
|
2211
|
-
] }) : /* @__PURE__ */ (0,
|
|
2212
|
-
/* @__PURE__ */ (0,
|
|
2280
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "overflow-hidden rounded-control border border-border-default", children: [
|
|
2281
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2213
2282
|
"div",
|
|
2214
2283
|
{
|
|
2215
2284
|
className: cx8(
|
|
@@ -2217,7 +2286,7 @@ function SelectionPicker({
|
|
|
2217
2286
|
rowGridCols
|
|
2218
2287
|
),
|
|
2219
2288
|
children: [
|
|
2220
|
-
/* @__PURE__ */ (0,
|
|
2289
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2221
2290
|
CheckBox,
|
|
2222
2291
|
{
|
|
2223
2292
|
checked: allSelected,
|
|
@@ -2228,18 +2297,18 @@ function SelectionPicker({
|
|
|
2228
2297
|
testId: testIdPrefix && `${testIdPrefix}-select-all`
|
|
2229
2298
|
}
|
|
2230
2299
|
),
|
|
2231
|
-
/* @__PURE__ */ (0,
|
|
2232
|
-
showInfoColumn && /* @__PURE__ */ (0,
|
|
2300
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cx8("grid gap-2", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: c.className, children: c.header }, c.key)) }),
|
|
2301
|
+
showInfoColumn && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-right", children: "Info" })
|
|
2233
2302
|
]
|
|
2234
2303
|
}
|
|
2235
2304
|
),
|
|
2236
|
-
/* @__PURE__ */ (0,
|
|
2305
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "max-h-[360px] overflow-y-auto", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center py-6", role: "status", "aria-label": "Loading", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.Loader2, { size: 18, className: "animate-spin text-text-tertiary", "aria-hidden": "true" }) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "px-3 py-8 text-center text-[13px] text-text-tertiary", children: errorMessage }) : rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.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) => {
|
|
2237
2306
|
const isSel = selectedIds.has(row.id);
|
|
2238
2307
|
const isLocked = lockedIds?.has(row.id) ?? false;
|
|
2239
2308
|
const kids = getChildren?.(row);
|
|
2240
2309
|
const isOpen = expanded.has(row.id);
|
|
2241
|
-
return /* @__PURE__ */ (0,
|
|
2242
|
-
/* @__PURE__ */ (0,
|
|
2310
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "border-t border-border-default/60 first:border-t-0", children: [
|
|
2311
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2243
2312
|
"div",
|
|
2244
2313
|
{
|
|
2245
2314
|
onClick: isLocked ? void 0 : () => toggleRow(row),
|
|
@@ -2251,7 +2320,7 @@ function SelectionPicker({
|
|
|
2251
2320
|
!isLocked && isSel && "opacity-60"
|
|
2252
2321
|
),
|
|
2253
2322
|
children: [
|
|
2254
|
-
isLocked ? /* @__PURE__ */ (0,
|
|
2323
|
+
isLocked ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2255
2324
|
CheckBox,
|
|
2256
2325
|
{
|
|
2257
2326
|
checked: isSel,
|
|
@@ -2260,8 +2329,8 @@ function SelectionPicker({
|
|
|
2260
2329
|
testId: testIdPrefix && `${testIdPrefix}-row-${slug4(row.id)}`
|
|
2261
2330
|
}
|
|
2262
2331
|
),
|
|
2263
|
-
/* @__PURE__ */ (0,
|
|
2264
|
-
showInfoColumn && /* @__PURE__ */ (0,
|
|
2332
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cx8("grid gap-2 text-[13px] text-text-primary", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: cx8("truncate", c.className), children: c.render(row) }, c.key)) }),
|
|
2333
|
+
showInfoColumn && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-end", children: kids && kids.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2265
2334
|
"button",
|
|
2266
2335
|
{
|
|
2267
2336
|
type: "button",
|
|
@@ -2275,28 +2344,28 @@ function SelectionPicker({
|
|
|
2275
2344
|
});
|
|
2276
2345
|
},
|
|
2277
2346
|
className: "flex h-7 w-7 items-center justify-center rounded-control text-text-secondary hover:bg-canvas hover:text-text-primary",
|
|
2278
|
-
children: /* @__PURE__ */ (0,
|
|
2347
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.ChevronRight, { size: 15, className: cx8("transition-transform", isOpen && "rotate-90") })
|
|
2279
2348
|
}
|
|
2280
|
-
) : /* @__PURE__ */ (0,
|
|
2349
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2281
2350
|
"span",
|
|
2282
2351
|
{
|
|
2283
2352
|
className: "flex h-7 w-7 items-center justify-center text-text-tertiary",
|
|
2284
2353
|
title: "No additional details",
|
|
2285
|
-
children: /* @__PURE__ */ (0,
|
|
2354
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.Info, { size: 14 })
|
|
2286
2355
|
}
|
|
2287
2356
|
) })
|
|
2288
2357
|
]
|
|
2289
2358
|
}
|
|
2290
2359
|
),
|
|
2291
|
-
isOpen && kids && /* @__PURE__ */ (0,
|
|
2360
|
+
isOpen && kids && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "bg-canvas/60 pb-1.5 pl-10 pr-3", children: kids.map((kid) => {
|
|
2292
2361
|
const kidSel = selectedIds.has(kid.id);
|
|
2293
|
-
return /* @__PURE__ */ (0,
|
|
2362
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2294
2363
|
"div",
|
|
2295
2364
|
{
|
|
2296
2365
|
className: "flex items-center justify-between gap-2 border-t border-border-default/40 py-2 first:border-t-0",
|
|
2297
2366
|
children: [
|
|
2298
|
-
/* @__PURE__ */ (0,
|
|
2299
|
-
/* @__PURE__ */ (0,
|
|
2367
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate text-[13px] text-text-secondary", children: kid.name }),
|
|
2368
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2300
2369
|
"button",
|
|
2301
2370
|
{
|
|
2302
2371
|
type: "button",
|
|
@@ -2307,7 +2376,7 @@ function SelectionPicker({
|
|
|
2307
2376
|
kidSel ? "text-text-tertiary" : "text-text-link hover:bg-subtle"
|
|
2308
2377
|
),
|
|
2309
2378
|
children: [
|
|
2310
|
-
kidSel ? /* @__PURE__ */ (0,
|
|
2379
|
+
kidSel ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.Check, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.Plus, { size: 13 }),
|
|
2311
2380
|
kidSel ? "Added" : "Add"
|
|
2312
2381
|
]
|
|
2313
2382
|
}
|
|
@@ -2319,7 +2388,7 @@ function SelectionPicker({
|
|
|
2319
2388
|
}) })
|
|
2320
2389
|
] }, row.id);
|
|
2321
2390
|
}) }),
|
|
2322
|
-
!loading && !error && hasMore && /* @__PURE__ */ (0,
|
|
2391
|
+
!loading && !error && hasMore && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2323
2392
|
"button",
|
|
2324
2393
|
{
|
|
2325
2394
|
type: "button",
|
|
@@ -2328,19 +2397,19 @@ function SelectionPicker({
|
|
|
2328
2397
|
"data-testid": testIdPrefix && `${testIdPrefix}-load-more`,
|
|
2329
2398
|
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",
|
|
2330
2399
|
children: [
|
|
2331
|
-
loadingMore ? /* @__PURE__ */ (0,
|
|
2400
|
+
loadingMore ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.Loader2, { size: 13, className: "animate-spin", "aria-hidden": "true" }) : null,
|
|
2332
2401
|
loadingMore ? "Loading\u2026" : "Load more"
|
|
2333
2402
|
]
|
|
2334
2403
|
}
|
|
2335
2404
|
)
|
|
2336
2405
|
] })
|
|
2337
2406
|
] }),
|
|
2338
|
-
source === "lists" && /* @__PURE__ */ (0,
|
|
2339
|
-
/* @__PURE__ */ (0,
|
|
2340
|
-
accountLists && accountLists.length > 0 ? /* @__PURE__ */ (0,
|
|
2341
|
-
/* @__PURE__ */ (0,
|
|
2407
|
+
source === "lists" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
|
|
2408
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.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." }),
|
|
2409
|
+
accountLists && accountLists.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
2410
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ScrollFade, { className: "flex max-h-[396px] flex-col gap-2 overflow-y-auto pr-0.5", children: accountLists.map((list) => {
|
|
2342
2411
|
const on = (selectedListIds ?? []).includes(list.id);
|
|
2343
|
-
return /* @__PURE__ */ (0,
|
|
2412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2344
2413
|
"button",
|
|
2345
2414
|
{
|
|
2346
2415
|
type: "button",
|
|
@@ -2352,19 +2421,19 @@ function SelectionPicker({
|
|
|
2352
2421
|
on ? "border-brand-primaryAction bg-brand-primarySoft" : "border-border-default bg-surface hover:bg-subtle"
|
|
2353
2422
|
),
|
|
2354
2423
|
children: [
|
|
2355
|
-
/* @__PURE__ */ (0,
|
|
2424
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2356
2425
|
"span",
|
|
2357
2426
|
{
|
|
2358
2427
|
className: cx8(
|
|
2359
2428
|
"flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
|
|
2360
2429
|
on ? "text-brand-primaryAction" : "text-text-secondary"
|
|
2361
2430
|
),
|
|
2362
|
-
children: on ? /* @__PURE__ */ (0,
|
|
2431
|
+
children: on ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.Check, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.Plus, { size: 16 })
|
|
2363
2432
|
}
|
|
2364
2433
|
),
|
|
2365
|
-
/* @__PURE__ */ (0,
|
|
2366
|
-
/* @__PURE__ */ (0,
|
|
2367
|
-
/* @__PURE__ */ (0,
|
|
2434
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "min-w-0 flex-1", children: [
|
|
2435
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate text-[14px] font-medium text-text-primary", children: list.name }) }),
|
|
2436
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "block truncate text-[12px] text-text-secondary", children: [
|
|
2368
2437
|
list.count,
|
|
2369
2438
|
" accounts \xB7 ",
|
|
2370
2439
|
list.entityTypes.join(", "),
|
|
@@ -2372,13 +2441,13 @@ function SelectionPicker({
|
|
|
2372
2441
|
formatListDate(list.updatedAt)
|
|
2373
2442
|
] })
|
|
2374
2443
|
] }),
|
|
2375
|
-
/* @__PURE__ */ (0,
|
|
2444
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: cx8("shrink-0 text-[12px] font-medium", on ? "text-brand-primaryAction" : "text-text-secondary"), children: on ? "Added" : "Add" })
|
|
2376
2445
|
]
|
|
2377
2446
|
},
|
|
2378
2447
|
list.id
|
|
2379
2448
|
);
|
|
2380
2449
|
}) }),
|
|
2381
|
-
/* @__PURE__ */ (0,
|
|
2450
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2382
2451
|
"p",
|
|
2383
2452
|
{
|
|
2384
2453
|
className: "border-t border-border-default pt-2 text-right text-[12px] font-medium text-text-tertiary",
|
|
@@ -2390,11 +2459,11 @@ function SelectionPicker({
|
|
|
2390
2459
|
]
|
|
2391
2460
|
}
|
|
2392
2461
|
)
|
|
2393
|
-
] }) : /* @__PURE__ */ (0,
|
|
2394
|
-
/* @__PURE__ */ (0,
|
|
2395
|
-
/* @__PURE__ */ (0,
|
|
2396
|
-
/* @__PURE__ */ (0,
|
|
2397
|
-
/* @__PURE__ */ (0,
|
|
2462
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
|
|
2463
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.List, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
|
|
2464
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
2465
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[14px] font-semibold text-text-primary", children: "No account lists yet" }),
|
|
2466
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-[13px] text-text-tertiary", children: "Account lists set up for you will appear here." })
|
|
2398
2467
|
] })
|
|
2399
2468
|
] })
|
|
2400
2469
|
] })
|
|
@@ -2426,7 +2495,7 @@ function ScrollFade({ className, children }) {
|
|
|
2426
2495
|
[sync]
|
|
2427
2496
|
);
|
|
2428
2497
|
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;
|
|
2429
|
-
return /* @__PURE__ */ (0,
|
|
2498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref: attach, onScroll: sync, className, style: { maskImage: mask, WebkitMaskImage: mask }, children });
|
|
2430
2499
|
}
|
|
2431
2500
|
function formatListDate(iso) {
|
|
2432
2501
|
try {
|
|
@@ -2476,8 +2545,8 @@ function FilterDropdown({
|
|
|
2476
2545
|
const count = active.size;
|
|
2477
2546
|
const label = count === 0 ? filter.label : count === 1 ? [...active][0] : "Multiple";
|
|
2478
2547
|
const filterSlug = slug4(filter.label);
|
|
2479
|
-
return /* @__PURE__ */ (0,
|
|
2480
|
-
/* @__PURE__ */ (0,
|
|
2548
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", children: [
|
|
2549
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2481
2550
|
"button",
|
|
2482
2551
|
{
|
|
2483
2552
|
ref: btnRef,
|
|
@@ -2489,12 +2558,12 @@ function FilterDropdown({
|
|
|
2489
2558
|
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",
|
|
2490
2559
|
children: [
|
|
2491
2560
|
label,
|
|
2492
|
-
/* @__PURE__ */ (0,
|
|
2561
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.ChevronDown, { size: 13, "aria-hidden": "true", className: cx8("transition-transform", open && "rotate-180") })
|
|
2493
2562
|
]
|
|
2494
2563
|
}
|
|
2495
2564
|
),
|
|
2496
2565
|
open && pos && (0, import_react_dom4.createPortal)(
|
|
2497
|
-
/* @__PURE__ */ (0,
|
|
2566
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2498
2567
|
"div",
|
|
2499
2568
|
{
|
|
2500
2569
|
ref: menuRef,
|
|
@@ -2503,9 +2572,9 @@ function FilterDropdown({
|
|
|
2503
2572
|
style: { top: pos.top, left: pos.left },
|
|
2504
2573
|
className: "fixed z-[80] min-w-[220px] rounded-card border border-border-default bg-surface p-2 shadow-overlay",
|
|
2505
2574
|
children: [
|
|
2506
|
-
searchable && /* @__PURE__ */ (0,
|
|
2507
|
-
/* @__PURE__ */ (0,
|
|
2508
|
-
/* @__PURE__ */ (0,
|
|
2575
|
+
searchable && /* @__PURE__ */ (0, import_jsx_runtime23.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: [
|
|
2576
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react14.Search, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
|
|
2577
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2509
2578
|
"input",
|
|
2510
2579
|
{
|
|
2511
2580
|
autoFocus: true,
|
|
@@ -2516,14 +2585,14 @@ function FilterDropdown({
|
|
|
2516
2585
|
}
|
|
2517
2586
|
)
|
|
2518
2587
|
] }),
|
|
2519
|
-
/* @__PURE__ */ (0,
|
|
2588
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)("p", { className: "px-2 py-3 text-center text-[12px] text-text-secondary", children: "No matches." }) : shownOptions.map((opt) => {
|
|
2520
2589
|
const on = active.has(opt);
|
|
2521
|
-
return /* @__PURE__ */ (0,
|
|
2590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
2522
2591
|
"label",
|
|
2523
2592
|
{
|
|
2524
2593
|
className: "flex cursor-pointer items-center gap-2 rounded-control px-2 py-1.5 text-[13px] text-text-primary hover:bg-subtle",
|
|
2525
2594
|
children: [
|
|
2526
|
-
/* @__PURE__ */ (0,
|
|
2595
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2527
2596
|
CheckBox,
|
|
2528
2597
|
{
|
|
2529
2598
|
checked: on,
|
|
@@ -2554,7 +2623,7 @@ function gridForColumns(columns) {
|
|
|
2554
2623
|
|
|
2555
2624
|
// src/PublisherBreakdownList.tsx
|
|
2556
2625
|
var import_react12 = require("react");
|
|
2557
|
-
var
|
|
2626
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
2558
2627
|
function cx9(...parts) {
|
|
2559
2628
|
return parts.filter(Boolean).join(" ");
|
|
2560
2629
|
}
|
|
@@ -2569,7 +2638,7 @@ function initials(name) {
|
|
|
2569
2638
|
return name.replace(/[^a-zA-Z0-9]/g, "").slice(0, 2).toUpperCase();
|
|
2570
2639
|
}
|
|
2571
2640
|
function Monogram({ name, size = 28 }) {
|
|
2572
|
-
return /* @__PURE__ */ (0,
|
|
2641
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2573
2642
|
"span",
|
|
2574
2643
|
{
|
|
2575
2644
|
"aria-hidden": "true",
|
|
@@ -2580,12 +2649,12 @@ function Monogram({ name, size = 28 }) {
|
|
|
2580
2649
|
);
|
|
2581
2650
|
}
|
|
2582
2651
|
function BreakdownTag({ children }) {
|
|
2583
|
-
return /* @__PURE__ */ (0,
|
|
2652
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.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 });
|
|
2584
2653
|
}
|
|
2585
2654
|
function DelayedTip({ label, children }) {
|
|
2586
|
-
return /* @__PURE__ */ (0,
|
|
2655
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "group/dt relative inline-flex", tabIndex: 0, "aria-label": label, children: [
|
|
2587
2656
|
children,
|
|
2588
|
-
/* @__PURE__ */ (0,
|
|
2657
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2589
2658
|
"span",
|
|
2590
2659
|
{
|
|
2591
2660
|
role: "tooltip",
|
|
@@ -2599,22 +2668,22 @@ var COL_CURRENT = 76;
|
|
|
2599
2668
|
var COL_PREVIOUS = 76;
|
|
2600
2669
|
var COL_YOY = 44;
|
|
2601
2670
|
function MetricListHeader({ className }) {
|
|
2602
|
-
return /* @__PURE__ */ (0,
|
|
2603
|
-
/* @__PURE__ */ (0,
|
|
2604
|
-
/* @__PURE__ */ (0,
|
|
2605
|
-
/* @__PURE__ */ (0,
|
|
2606
|
-
/* @__PURE__ */ (0,
|
|
2607
|
-
/* @__PURE__ */ (0,
|
|
2671
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cx9("flex items-baseline gap-2 pb-2", className), children: [
|
|
2672
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "flex-1" }),
|
|
2673
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
|
|
2674
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_CURRENT }, children: "Current" }),
|
|
2675
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DelayedTip, { label: "Spend during the same time period one year ago.", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_PREVIOUS }, children: "Previous" }) }),
|
|
2676
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DelayedTip, { label: "Percent change from this time period vs. the same time one year ago.", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_YOY }, children: "YoY" }) })
|
|
2608
2677
|
] })
|
|
2609
2678
|
] });
|
|
2610
2679
|
}
|
|
2611
2680
|
function MetricCells({ spendN, yoy }) {
|
|
2612
2681
|
const prior = priorYearAmt(spendN, yoy);
|
|
2613
2682
|
const up = yoy !== "NEW" && yoy >= 0;
|
|
2614
|
-
return /* @__PURE__ */ (0,
|
|
2615
|
-
/* @__PURE__ */ (0,
|
|
2616
|
-
/* @__PURE__ */ (0,
|
|
2617
|
-
/* @__PURE__ */ (0,
|
|
2683
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
|
|
2684
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-right text-[12px] font-bold tabular-nums text-text-primary", style: { width: COL_CURRENT }, children: fmtM(spendN) }),
|
|
2685
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-right text-[12px] font-normal tabular-nums text-text-primary", style: { width: COL_PREVIOUS }, children: prior ?? "\u2014" }),
|
|
2686
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsxs)("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
|
|
2618
2687
|
up ? "+" : "\u2212",
|
|
2619
2688
|
Math.abs(yoy),
|
|
2620
2689
|
"%"
|
|
@@ -2625,35 +2694,35 @@ function PublisherBreakdownList({ rows, defaultVisibleCount = 10, padded = true,
|
|
|
2625
2694
|
const [showAll, setShowAll] = (0, import_react12.useState)(false);
|
|
2626
2695
|
const visible = showAll ? rows : rows.slice(0, defaultVisibleCount);
|
|
2627
2696
|
const rowPad = padded ? "px-5" : "";
|
|
2628
|
-
return /* @__PURE__ */ (0,
|
|
2629
|
-
/* @__PURE__ */ (0,
|
|
2630
|
-
/* @__PURE__ */ (0,
|
|
2631
|
-
visible.map((p) => /* @__PURE__ */ (0,
|
|
2632
|
-
/* @__PURE__ */ (0,
|
|
2633
|
-
renderLogo ? renderLogo(p) : /* @__PURE__ */ (0,
|
|
2634
|
-
/* @__PURE__ */ (0,
|
|
2635
|
-
/* @__PURE__ */ (0,
|
|
2636
|
-
/* @__PURE__ */ (0,
|
|
2637
|
-
p.tags.map((t) => /* @__PURE__ */ (0,
|
|
2697
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col", children: [
|
|
2698
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col", children: [
|
|
2699
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MetricListHeader, { className: rowPad }),
|
|
2700
|
+
visible.map((p) => /* @__PURE__ */ (0, import_jsx_runtime24.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: [
|
|
2701
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
|
|
2702
|
+
renderLogo ? renderLogo(p) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Monogram, { name: p.brand, size: 28 }),
|
|
2703
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "min-w-0", children: [
|
|
2704
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5", children: [
|
|
2705
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-[14px] font-semibold text-text-primary", children: p.brand }),
|
|
2706
|
+
p.tags.map((t) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BreakdownTag, { children: t }, t))
|
|
2638
2707
|
] }),
|
|
2639
|
-
/* @__PURE__ */ (0,
|
|
2708
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "truncate text-[11.5px] text-text-tertiary", children: p.owner })
|
|
2640
2709
|
] })
|
|
2641
2710
|
] }),
|
|
2642
|
-
/* @__PURE__ */ (0,
|
|
2711
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MetricCells, { spendN: p.spendN, yoy: p.yoy })
|
|
2643
2712
|
] }, p.brand))
|
|
2644
2713
|
] }),
|
|
2645
|
-
rows.length > defaultVisibleCount && (viewAllHref ? /* @__PURE__ */ (0,
|
|
2646
|
-
/* @__PURE__ */ (0,
|
|
2714
|
+
rows.length > defaultVisibleCount && (viewAllHref ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cx9("border-t border-border-default py-3", rowPad), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href: viewAllHref, className: "text-[12px] font-semibold text-text-link hover:underline", children: "See all publishers" }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cx9("flex items-center gap-2 border-t border-border-default py-3 text-[12px] text-text-tertiary", rowPad), children: [
|
|
2715
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { children: [
|
|
2647
2716
|
"Showing ",
|
|
2648
2717
|
visible.length,
|
|
2649
2718
|
" of ",
|
|
2650
2719
|
rows.length
|
|
2651
2720
|
] }),
|
|
2652
|
-
!showAll ? /* @__PURE__ */ (0,
|
|
2721
|
+
!showAll ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { type: "button", onClick: () => setShowAll(true), className: "font-semibold text-text-link hover:underline", children: [
|
|
2653
2722
|
"See all (",
|
|
2654
2723
|
rows.length - defaultVisibleCount,
|
|
2655
2724
|
" more)"
|
|
2656
|
-
] }) : /* @__PURE__ */ (0,
|
|
2725
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", onClick: () => setShowAll(false), className: "font-semibold text-text-link hover:underline", children: "Show less" })
|
|
2657
2726
|
] }))
|
|
2658
2727
|
] });
|
|
2659
2728
|
}
|
|
@@ -2663,7 +2732,7 @@ var import_react13 = require("react");
|
|
|
2663
2732
|
var import_react_slot = require("@radix-ui/react-slot");
|
|
2664
2733
|
var import_class_variance_authority = require("class-variance-authority");
|
|
2665
2734
|
var import_lucide_react15 = require("lucide-react");
|
|
2666
|
-
var
|
|
2735
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2667
2736
|
var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
2668
2737
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control font-medium transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-hidden focus-visible:ring-0",
|
|
2669
2738
|
{
|
|
@@ -2691,7 +2760,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
|
2691
2760
|
var Button = (0, import_react13.forwardRef)(
|
|
2692
2761
|
({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {
|
|
2693
2762
|
const Comp = asChild ? import_react_slot.Slot : "button";
|
|
2694
|
-
return /* @__PURE__ */ (0,
|
|
2763
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
2695
2764
|
Comp,
|
|
2696
2765
|
{
|
|
2697
2766
|
className: cn(buttonVariants({ variant, size, className })),
|
|
@@ -2700,7 +2769,7 @@ var Button = (0, import_react13.forwardRef)(
|
|
|
2700
2769
|
"aria-busy": loading || void 0,
|
|
2701
2770
|
...props,
|
|
2702
2771
|
children: [
|
|
2703
|
-
loading && /* @__PURE__ */ (0,
|
|
2772
|
+
loading && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react15.Loader2, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }),
|
|
2704
2773
|
children
|
|
2705
2774
|
]
|
|
2706
2775
|
}
|
|
@@ -2710,14 +2779,14 @@ var Button = (0, import_react13.forwardRef)(
|
|
|
2710
2779
|
Button.displayName = "Button";
|
|
2711
2780
|
|
|
2712
2781
|
// src/FilterDropdownFooter.tsx
|
|
2713
|
-
var
|
|
2782
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2714
2783
|
function FilterDropdownFooter({
|
|
2715
2784
|
onClear,
|
|
2716
2785
|
onApply,
|
|
2717
2786
|
clearLabel = "Clear all",
|
|
2718
2787
|
applyLabel = "Apply"
|
|
2719
2788
|
}) {
|
|
2720
|
-
return /* @__PURE__ */ (0,
|
|
2789
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
2721
2790
|
"div",
|
|
2722
2791
|
{
|
|
2723
2792
|
className: cn(
|
|
@@ -2725,8 +2794,8 @@ function FilterDropdownFooter({
|
|
|
2725
2794
|
onClear ? "justify-between" : "justify-end"
|
|
2726
2795
|
),
|
|
2727
2796
|
children: [
|
|
2728
|
-
onClear && /* @__PURE__ */ (0,
|
|
2729
|
-
/* @__PURE__ */ (0,
|
|
2797
|
+
onClear && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClear, children: clearLabel }),
|
|
2798
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, children: applyLabel })
|
|
2730
2799
|
]
|
|
2731
2800
|
}
|
|
2732
2801
|
);
|
|
@@ -2735,7 +2804,7 @@ function FilterDropdownFooter({
|
|
|
2735
2804
|
// src/NameListModal.tsx
|
|
2736
2805
|
var import_react14 = require("react");
|
|
2737
2806
|
var import_react_dom5 = require("react-dom");
|
|
2738
|
-
var
|
|
2807
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2739
2808
|
function NameListModal({
|
|
2740
2809
|
title,
|
|
2741
2810
|
initialName,
|
|
@@ -2760,12 +2829,12 @@ function NameListModal({
|
|
|
2760
2829
|
// bg-scrim, not a literal: design-tokens gained a scrim token in 2.5.0.
|
|
2761
2830
|
// No in-data-[theme=dark] override needed any more -- the token redefines
|
|
2762
2831
|
// itself under that attribute in dark.css, so one class covers both themes.
|
|
2763
|
-
/* @__PURE__ */ (0,
|
|
2832
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2764
2833
|
"div",
|
|
2765
2834
|
{
|
|
2766
2835
|
className: "fixed inset-0 z-70 flex items-center justify-center bg-scrim px-4",
|
|
2767
2836
|
onMouseDown: (e) => e.target === e.currentTarget && onCancel(),
|
|
2768
|
-
children: /* @__PURE__ */ (0,
|
|
2837
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
|
|
2769
2838
|
"div",
|
|
2770
2839
|
{
|
|
2771
2840
|
role: "dialog",
|
|
@@ -2773,10 +2842,10 @@ function NameListModal({
|
|
|
2773
2842
|
"aria-label": title,
|
|
2774
2843
|
className: "w-full max-w-[420px] rounded-card border border-border-default bg-surface p-5 shadow-overlay",
|
|
2775
2844
|
children: [
|
|
2776
|
-
/* @__PURE__ */ (0,
|
|
2777
|
-
/* @__PURE__ */ (0,
|
|
2778
|
-
/* @__PURE__ */ (0,
|
|
2779
|
-
/* @__PURE__ */ (0,
|
|
2845
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h2", { className: "text-[16px] font-semibold text-text-primary", children: title }),
|
|
2846
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mt-4 flex flex-col gap-1.5", children: [
|
|
2847
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("label", { htmlFor: "account-list-name", className: "text-[12px] font-medium text-text-secondary", children: fieldLabel }),
|
|
2848
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2780
2849
|
"input",
|
|
2781
2850
|
{
|
|
2782
2851
|
id: "account-list-name",
|
|
@@ -2788,13 +2857,13 @@ function NameListModal({
|
|
|
2788
2857
|
}
|
|
2789
2858
|
)
|
|
2790
2859
|
] }),
|
|
2791
|
-
options && options.length > 0 && /* @__PURE__ */ (0,
|
|
2792
|
-
/* @__PURE__ */ (0,
|
|
2860
|
+
options && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mt-4 flex flex-col gap-2.5", children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: "flex cursor-pointer items-center gap-2.5 text-[13px] text-text-primary", children: [
|
|
2861
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CheckBox, { checked: !!checked[o.key], onChange: () => toggle(o.key), ariaLabel: o.label }),
|
|
2793
2862
|
o.label
|
|
2794
2863
|
] }, o.key)) }),
|
|
2795
|
-
/* @__PURE__ */ (0,
|
|
2796
|
-
/* @__PURE__ */ (0,
|
|
2797
|
-
/* @__PURE__ */ (0,
|
|
2864
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mt-5 flex items-center justify-end gap-2", children: [
|
|
2865
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }),
|
|
2866
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button, { disabled: !name.trim(), onClick: () => onSubmit(name.trim(), checked), children: submitLabel })
|
|
2798
2867
|
] })
|
|
2799
2868
|
]
|
|
2800
2869
|
}
|
|
@@ -2806,7 +2875,7 @@ function NameListModal({
|
|
|
2806
2875
|
}
|
|
2807
2876
|
|
|
2808
2877
|
// src/ChipTrigger.tsx
|
|
2809
|
-
var
|
|
2878
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2810
2879
|
function chipTriggerClass(variant = "box") {
|
|
2811
2880
|
return cn(
|
|
2812
2881
|
"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",
|
|
@@ -2817,13 +2886,13 @@ function chipTriggerClass(variant = "box") {
|
|
|
2817
2886
|
);
|
|
2818
2887
|
}
|
|
2819
2888
|
function ChipContent({ caption, value, icon }) {
|
|
2820
|
-
const stack = /* @__PURE__ */ (0,
|
|
2821
|
-
/* @__PURE__ */ (0,
|
|
2822
|
-
/* @__PURE__ */ (0,
|
|
2889
|
+
const stack = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
2890
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
|
|
2891
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
2823
2892
|
] });
|
|
2824
2893
|
if (icon) {
|
|
2825
|
-
return /* @__PURE__ */ (0,
|
|
2826
|
-
/* @__PURE__ */ (0,
|
|
2894
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "flex items-center gap-2", children: [
|
|
2895
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "shrink-0 text-text-tertiary", children: icon }),
|
|
2827
2896
|
stack
|
|
2828
2897
|
] });
|
|
2829
2898
|
}
|
|
@@ -2832,11 +2901,11 @@ function ChipContent({ caption, value, icon }) {
|
|
|
2832
2901
|
|
|
2833
2902
|
// src/FilterChipBar.tsx
|
|
2834
2903
|
var import_lucide_react16 = require("lucide-react");
|
|
2835
|
-
var
|
|
2904
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2836
2905
|
function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
|
|
2837
2906
|
if (chips.length === 0) return null;
|
|
2838
|
-
return /* @__PURE__ */ (0,
|
|
2839
|
-
chips.map((c) => /* @__PURE__ */ (0,
|
|
2907
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-wrap items-center gap-1.5 border-t border-border-default pt-2.5", children: [
|
|
2908
|
+
chips.map((c) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2840
2909
|
Chip,
|
|
2841
2910
|
{
|
|
2842
2911
|
label: c.label,
|
|
@@ -2846,7 +2915,7 @@ function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
|
|
|
2846
2915
|
},
|
|
2847
2916
|
c.key
|
|
2848
2917
|
)),
|
|
2849
|
-
/* @__PURE__ */ (0,
|
|
2918
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", onClick: onClearAll, className: "ml-1 text-[12px] font-medium text-text-link hover:underline", children: "Clear all" })
|
|
2850
2919
|
] });
|
|
2851
2920
|
}
|
|
2852
2921
|
function Chip({
|
|
@@ -2855,8 +2924,8 @@ function Chip({
|
|
|
2855
2924
|
parked,
|
|
2856
2925
|
onRemove
|
|
2857
2926
|
}) {
|
|
2858
|
-
return /* @__PURE__ */ (0,
|
|
2859
|
-
/* @__PURE__ */ (0,
|
|
2927
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "group relative inline-flex", children: [
|
|
2928
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
2860
2929
|
"span",
|
|
2861
2930
|
{
|
|
2862
2931
|
className: cn(
|
|
@@ -2868,22 +2937,22 @@ function Chip({
|
|
|
2868
2937
|
) : "bg-subtle text-text-secondary ring-transparent group-hover:bg-border-default group-hover:text-text-primary group-hover:ring-border-interactive"
|
|
2869
2938
|
),
|
|
2870
2939
|
children: [
|
|
2871
|
-
parked && /* @__PURE__ */ (0,
|
|
2940
|
+
parked && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react16.CircleSlash, { size: 11, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
|
|
2872
2941
|
label,
|
|
2873
|
-
/* @__PURE__ */ (0,
|
|
2942
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2874
2943
|
"button",
|
|
2875
2944
|
{
|
|
2876
2945
|
type: "button",
|
|
2877
2946
|
onClick: onRemove,
|
|
2878
2947
|
"aria-label": `Remove ${groupLabel}: ${label}`,
|
|
2879
2948
|
className: "text-text-tertiary transition-colors hover:text-text-primary",
|
|
2880
|
-
children: /* @__PURE__ */ (0,
|
|
2949
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react16.X, { size: 12 })
|
|
2881
2950
|
}
|
|
2882
2951
|
)
|
|
2883
2952
|
]
|
|
2884
2953
|
}
|
|
2885
2954
|
),
|
|
2886
|
-
/* @__PURE__ */ (0,
|
|
2955
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
2887
2956
|
"span",
|
|
2888
2957
|
{
|
|
2889
2958
|
role: "tooltip",
|
|
@@ -2896,10 +2965,10 @@ function Chip({
|
|
|
2896
2965
|
|
|
2897
2966
|
// src/SortButton.tsx
|
|
2898
2967
|
var import_lucide_react17 = require("lucide-react");
|
|
2899
|
-
var
|
|
2968
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2900
2969
|
function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
|
|
2901
2970
|
const active = !disabled && sort.key === sortKey;
|
|
2902
|
-
return /* @__PURE__ */ (0,
|
|
2971
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
2903
2972
|
"button",
|
|
2904
2973
|
{
|
|
2905
2974
|
type: "button",
|
|
@@ -2909,12 +2978,25 @@ function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
|
|
|
2909
2978
|
className: cn(
|
|
2910
2979
|
// text-left overrides the UA default on <button>, which would centre a
|
|
2911
2980
|
// label that wraps onto two lines, out of step with the column under it.
|
|
2912
|
-
|
|
2981
|
+
// `uppercase` is NOT this control imposing a treatment -- it is
|
|
2982
|
+
// restoring one. Every table header row sets uppercase on the <tr>,
|
|
2983
|
+
// and a <button> does not inherit text-transform from its parent
|
|
2984
|
+
// (measured: the <th> computes `uppercase`, the button inside it
|
|
2985
|
+
// computes `none`), so without this a sortable label renders
|
|
2986
|
+
// sentence case beside caps neighbours in the same band.
|
|
2987
|
+
//
|
|
2988
|
+
// Letter-spacing DOES inherit, which is why no tracking is set here.
|
|
2989
|
+
// This control used to set its own `tracking-wide` while every
|
|
2990
|
+
// header row sets `tracking-wider`, so sortable labels rendered
|
|
2991
|
+
// subtly tighter than the fixed headers next to them. A control
|
|
2992
|
+
// should carry exactly the properties that do not inherit, and
|
|
2993
|
+
// nothing more.
|
|
2994
|
+
"group inline-flex items-center gap-1 text-left uppercase transition-colors",
|
|
2913
2995
|
!disabled && "hover:text-text-primary"
|
|
2914
2996
|
),
|
|
2915
2997
|
children: [
|
|
2916
2998
|
label,
|
|
2917
|
-
!disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */ (0,
|
|
2999
|
+
!disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react17.ArrowUp, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react17.ArrowDown, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2918
3000
|
import_lucide_react17.ArrowUpDown,
|
|
2919
3001
|
{
|
|
2920
3002
|
size: 12,
|
|
@@ -2938,7 +3020,7 @@ function sortProp(sort) {
|
|
|
2938
3020
|
|
|
2939
3021
|
// src/Pager.tsx
|
|
2940
3022
|
var import_lucide_react18 = require("lucide-react");
|
|
2941
|
-
var
|
|
3023
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2942
3024
|
function pageWindow(current, total) {
|
|
2943
3025
|
if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
|
|
2944
3026
|
const keep = /* @__PURE__ */ new Set([1, total, current, current - 1, current + 1]);
|
|
@@ -2954,8 +3036,8 @@ function pageWindow(current, total) {
|
|
|
2954
3036
|
}
|
|
2955
3037
|
function Pager({ page, totalPages, onPage }) {
|
|
2956
3038
|
const btn = "flex h-8 min-w-8 items-center justify-center rounded-control px-2 text-[13px] transition-colors";
|
|
2957
|
-
return /* @__PURE__ */ (0,
|
|
2958
|
-
/* @__PURE__ */ (0,
|
|
3039
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
3040
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2959
3041
|
"button",
|
|
2960
3042
|
{
|
|
2961
3043
|
type: "button",
|
|
@@ -2963,11 +3045,11 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
2963
3045
|
disabled: page === 1,
|
|
2964
3046
|
"aria-label": "Previous page",
|
|
2965
3047
|
className: cn(btn, "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"),
|
|
2966
|
-
children: /* @__PURE__ */ (0,
|
|
3048
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react18.ChevronLeft, { size: 16 })
|
|
2967
3049
|
}
|
|
2968
3050
|
),
|
|
2969
3051
|
pageWindow(page, totalPages).map(
|
|
2970
|
-
(p) => typeof p === "string" ? /* @__PURE__ */ (0,
|
|
3052
|
+
(p) => typeof p === "string" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2971
3053
|
"button",
|
|
2972
3054
|
{
|
|
2973
3055
|
type: "button",
|
|
@@ -2982,7 +3064,7 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
2982
3064
|
p
|
|
2983
3065
|
)
|
|
2984
3066
|
),
|
|
2985
|
-
/* @__PURE__ */ (0,
|
|
3067
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2986
3068
|
"button",
|
|
2987
3069
|
{
|
|
2988
3070
|
type: "button",
|
|
@@ -2990,14 +3072,14 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
2990
3072
|
disabled: page === totalPages,
|
|
2991
3073
|
"aria-label": "Next page",
|
|
2992
3074
|
className: cn(btn, "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"),
|
|
2993
|
-
children: /* @__PURE__ */ (0,
|
|
3075
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react18.ChevronRight, { size: 16 })
|
|
2994
3076
|
}
|
|
2995
3077
|
)
|
|
2996
3078
|
] });
|
|
2997
3079
|
}
|
|
2998
3080
|
|
|
2999
3081
|
// src/WorkspaceAvatar.tsx
|
|
3000
|
-
var
|
|
3082
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
3001
3083
|
function workspaceInitials(name) {
|
|
3002
3084
|
const words = name.trim().split(/\s+/).filter(Boolean);
|
|
3003
3085
|
if (words.length === 0) return "\xB7";
|
|
@@ -3013,7 +3095,7 @@ var SIZES = {
|
|
|
3013
3095
|
lg: "h-11 w-11 text-[15px]"
|
|
3014
3096
|
};
|
|
3015
3097
|
function WorkspaceAvatar({ name, size = "md" }) {
|
|
3016
|
-
return /* @__PURE__ */ (0,
|
|
3098
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
3017
3099
|
"span",
|
|
3018
3100
|
{
|
|
3019
3101
|
"aria-hidden": "true",
|
|
@@ -3027,9 +3109,9 @@ function WorkspaceAvatar({ name, size = "md" }) {
|
|
|
3027
3109
|
}
|
|
3028
3110
|
|
|
3029
3111
|
// src/Tag.tsx
|
|
3030
|
-
var
|
|
3112
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
3031
3113
|
function Tag({ children, className }) {
|
|
3032
|
-
return /* @__PURE__ */ (0,
|
|
3114
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
3033
3115
|
"span",
|
|
3034
3116
|
{
|
|
3035
3117
|
className: cn(
|
|
@@ -3043,7 +3125,7 @@ function Tag({ children, className }) {
|
|
|
3043
3125
|
|
|
3044
3126
|
// src/TablePagination.tsx
|
|
3045
3127
|
var import_lucide_react19 = require("lucide-react");
|
|
3046
|
-
var
|
|
3128
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3047
3129
|
function TablePagination({
|
|
3048
3130
|
page,
|
|
3049
3131
|
perPage,
|
|
@@ -3063,20 +3145,20 @@ function TablePagination({
|
|
|
3063
3145
|
btn,
|
|
3064
3146
|
"text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"
|
|
3065
3147
|
);
|
|
3066
|
-
return /* @__PURE__ */ (0,
|
|
3067
|
-
/* @__PURE__ */ (0,
|
|
3068
|
-
/* @__PURE__ */ (0,
|
|
3069
|
-
/* @__PURE__ */ (0,
|
|
3148
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), children: [
|
|
3149
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
|
|
3150
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "relative", children: [
|
|
3151
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3070
3152
|
"select",
|
|
3071
3153
|
{
|
|
3072
3154
|
value: perPage,
|
|
3073
3155
|
onChange: (e) => onPerPageChange(Number(e.target.value)),
|
|
3074
3156
|
"aria-label": "Items per page",
|
|
3075
3157
|
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",
|
|
3076
|
-
children: perPageOptions.map((n) => /* @__PURE__ */ (0,
|
|
3158
|
+
children: perPageOptions.map((n) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("option", { value: n, children: n }, n))
|
|
3077
3159
|
}
|
|
3078
3160
|
),
|
|
3079
|
-
/* @__PURE__ */ (0,
|
|
3161
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3080
3162
|
import_lucide_react19.ChevronDown,
|
|
3081
3163
|
{
|
|
3082
3164
|
size: 13,
|
|
@@ -3087,8 +3169,8 @@ function TablePagination({
|
|
|
3087
3169
|
] }),
|
|
3088
3170
|
"items per page"
|
|
3089
3171
|
] }),
|
|
3090
|
-
/* @__PURE__ */ (0,
|
|
3091
|
-
/* @__PURE__ */ (0,
|
|
3172
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
|
|
3173
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3092
3174
|
"button",
|
|
3093
3175
|
{
|
|
3094
3176
|
type: "button",
|
|
@@ -3096,10 +3178,10 @@ function TablePagination({
|
|
|
3096
3178
|
disabled: current === 1,
|
|
3097
3179
|
"aria-label": "First page",
|
|
3098
3180
|
className: stepBtn,
|
|
3099
|
-
children: /* @__PURE__ */ (0,
|
|
3181
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react19.ChevronFirst, { size: 16, "aria-hidden": "true" })
|
|
3100
3182
|
}
|
|
3101
3183
|
),
|
|
3102
|
-
/* @__PURE__ */ (0,
|
|
3184
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3103
3185
|
"button",
|
|
3104
3186
|
{
|
|
3105
3187
|
type: "button",
|
|
@@ -3107,11 +3189,11 @@ function TablePagination({
|
|
|
3107
3189
|
disabled: current === 1,
|
|
3108
3190
|
"aria-label": "Previous page",
|
|
3109
3191
|
className: stepBtn,
|
|
3110
|
-
children: /* @__PURE__ */ (0,
|
|
3192
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react19.ChevronLeft, { size: 16, "aria-hidden": "true" })
|
|
3111
3193
|
}
|
|
3112
3194
|
),
|
|
3113
3195
|
pageWindow(current, totalPages).map(
|
|
3114
|
-
(p) => typeof p === "string" ? /* @__PURE__ */ (0,
|
|
3196
|
+
(p) => typeof p === "string" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3115
3197
|
"button",
|
|
3116
3198
|
{
|
|
3117
3199
|
type: "button",
|
|
@@ -3126,7 +3208,7 @@ function TablePagination({
|
|
|
3126
3208
|
p
|
|
3127
3209
|
)
|
|
3128
3210
|
),
|
|
3129
|
-
/* @__PURE__ */ (0,
|
|
3211
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3130
3212
|
"button",
|
|
3131
3213
|
{
|
|
3132
3214
|
type: "button",
|
|
@@ -3134,10 +3216,10 @@ function TablePagination({
|
|
|
3134
3216
|
disabled: current === totalPages,
|
|
3135
3217
|
"aria-label": "Next page",
|
|
3136
3218
|
className: stepBtn,
|
|
3137
|
-
children: /* @__PURE__ */ (0,
|
|
3219
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react19.ChevronRight, { size: 16, "aria-hidden": "true" })
|
|
3138
3220
|
}
|
|
3139
3221
|
),
|
|
3140
|
-
/* @__PURE__ */ (0,
|
|
3222
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3141
3223
|
"button",
|
|
3142
3224
|
{
|
|
3143
3225
|
type: "button",
|
|
@@ -3145,11 +3227,11 @@ function TablePagination({
|
|
|
3145
3227
|
disabled: current === totalPages,
|
|
3146
3228
|
"aria-label": "Last page",
|
|
3147
3229
|
className: stepBtn,
|
|
3148
|
-
children: /* @__PURE__ */ (0,
|
|
3230
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react19.ChevronLast, { size: 16, "aria-hidden": "true" })
|
|
3149
3231
|
}
|
|
3150
3232
|
)
|
|
3151
3233
|
] }),
|
|
3152
|
-
/* @__PURE__ */ (0,
|
|
3234
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
|
|
3153
3235
|
rangeStart.toLocaleString(),
|
|
3154
3236
|
" \u2013 ",
|
|
3155
3237
|
rangeEnd.toLocaleString(),
|
|
@@ -3164,7 +3246,7 @@ function TablePagination({
|
|
|
3164
3246
|
// src/DateRangePicker.tsx
|
|
3165
3247
|
var import_react15 = require("react");
|
|
3166
3248
|
var import_lucide_react20 = require("lucide-react");
|
|
3167
|
-
var
|
|
3249
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3168
3250
|
var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
3169
3251
|
var QUARTER_ABBR = ["Q1", "Q2", "Q3", "Q4"];
|
|
3170
3252
|
var PRESETS = ["Rolling 3 months", "Rolling 6 months", "Rolling 12 months"];
|
|
@@ -3200,7 +3282,7 @@ function spanLabel(label, today) {
|
|
|
3200
3282
|
return `${fmtDate(s)} \u2013 ${fmtDate(e)}`;
|
|
3201
3283
|
}
|
|
3202
3284
|
function MiniSelect({ value, onChange, options }) {
|
|
3203
|
-
return /* @__PURE__ */ (0,
|
|
3285
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3204
3286
|
"select",
|
|
3205
3287
|
{
|
|
3206
3288
|
value: String(value),
|
|
@@ -3209,7 +3291,7 @@ function MiniSelect({ value, onChange, options }) {
|
|
|
3209
3291
|
if (opt) onChange(opt.value);
|
|
3210
3292
|
},
|
|
3211
3293
|
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",
|
|
3212
|
-
children: options.map((o) => /* @__PURE__ */ (0,
|
|
3294
|
+
children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: String(o.value), children: o.label }, String(o.value)))
|
|
3213
3295
|
}
|
|
3214
3296
|
);
|
|
3215
3297
|
}
|
|
@@ -3270,8 +3352,8 @@ function DateRangePicker({
|
|
|
3270
3352
|
if (showFooter) setDraft(label);
|
|
3271
3353
|
else commit(label);
|
|
3272
3354
|
};
|
|
3273
|
-
return /* @__PURE__ */ (0,
|
|
3274
|
-
/* @__PURE__ */ (0,
|
|
3355
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative", ref, children: [
|
|
3356
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
3275
3357
|
"button",
|
|
3276
3358
|
{
|
|
3277
3359
|
type: "button",
|
|
@@ -3280,16 +3362,16 @@ function DateRangePicker({
|
|
|
3280
3362
|
"aria-haspopup": "listbox",
|
|
3281
3363
|
className: chipTriggerClass(),
|
|
3282
3364
|
children: [
|
|
3283
|
-
/* @__PURE__ */ (0,
|
|
3284
|
-
/* @__PURE__ */ (0,
|
|
3285
|
-
/* @__PURE__ */ (0,
|
|
3365
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
3366
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-[10px] text-text-tertiary", children: spanLabel(value, end) }),
|
|
3367
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
3286
3368
|
] }),
|
|
3287
|
-
/* @__PURE__ */ (0,
|
|
3369
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronDown, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
|
|
3288
3370
|
]
|
|
3289
3371
|
}
|
|
3290
3372
|
),
|
|
3291
|
-
open && /* @__PURE__ */ (0,
|
|
3292
|
-
presets.map((p) => /* @__PURE__ */ (0,
|
|
3373
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime35.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: [
|
|
3374
|
+
presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3293
3375
|
"button",
|
|
3294
3376
|
{
|
|
3295
3377
|
type: "button",
|
|
@@ -3299,26 +3381,26 @@ function DateRangePicker({
|
|
|
3299
3381
|
},
|
|
3300
3382
|
p
|
|
3301
3383
|
)),
|
|
3302
|
-
/* @__PURE__ */ (0,
|
|
3303
|
-
/* @__PURE__ */ (0,
|
|
3304
|
-
/* @__PURE__ */ (0,
|
|
3305
|
-
/* @__PURE__ */ (0,
|
|
3384
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
|
|
3385
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
|
|
3386
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "mt-2 flex flex-col gap-2", children: [
|
|
3387
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
|
|
3306
3388
|
"From",
|
|
3307
|
-
/* @__PURE__ */ (0,
|
|
3308
|
-
granularity === "month" && /* @__PURE__ */ (0,
|
|
3309
|
-
granularity === "quarter" && /* @__PURE__ */ (0,
|
|
3310
|
-
/* @__PURE__ */ (0,
|
|
3389
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "flex gap-1", children: [
|
|
3390
|
+
granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
|
|
3391
|
+
granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
|
|
3392
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
|
|
3311
3393
|
] })
|
|
3312
3394
|
] }),
|
|
3313
|
-
/* @__PURE__ */ (0,
|
|
3395
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
|
|
3314
3396
|
"To",
|
|
3315
|
-
/* @__PURE__ */ (0,
|
|
3316
|
-
granularity === "month" && /* @__PURE__ */ (0,
|
|
3317
|
-
granularity === "quarter" && /* @__PURE__ */ (0,
|
|
3318
|
-
/* @__PURE__ */ (0,
|
|
3397
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "flex gap-1", children: [
|
|
3398
|
+
granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
|
|
3399
|
+
granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
|
|
3400
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
|
|
3319
3401
|
] })
|
|
3320
3402
|
] }),
|
|
3321
|
-
/* @__PURE__ */ (0,
|
|
3403
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3322
3404
|
"button",
|
|
3323
3405
|
{
|
|
3324
3406
|
type: "button",
|
|
@@ -3330,7 +3412,7 @@ function DateRangePicker({
|
|
|
3330
3412
|
)
|
|
3331
3413
|
] })
|
|
3332
3414
|
] }),
|
|
3333
|
-
showFooter && /* @__PURE__ */ (0,
|
|
3415
|
+
showFooter && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(FilterDropdownFooter, { onApply: () => commit(draft) })
|
|
3334
3416
|
] })
|
|
3335
3417
|
] });
|
|
3336
3418
|
}
|
|
@@ -3338,7 +3420,7 @@ function DateRangePicker({
|
|
|
3338
3420
|
// src/MultiSelectFilter.tsx
|
|
3339
3421
|
var import_react16 = require("react");
|
|
3340
3422
|
var import_lucide_react21 = require("lucide-react");
|
|
3341
|
-
var
|
|
3423
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3342
3424
|
function MultiSelectFilter({
|
|
3343
3425
|
caption,
|
|
3344
3426
|
options = [],
|
|
@@ -3429,8 +3511,8 @@ function MultiSelectFilter({
|
|
|
3429
3511
|
const kids = live.filter((c) => c.label.toLowerCase().includes(ql));
|
|
3430
3512
|
return kids.length ? { ...g, children: kids } : null;
|
|
3431
3513
|
}).filter((g) => g !== null) : [];
|
|
3432
|
-
return /* @__PURE__ */ (0,
|
|
3433
|
-
/* @__PURE__ */ (0,
|
|
3514
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
|
|
3515
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
3434
3516
|
"button",
|
|
3435
3517
|
{
|
|
3436
3518
|
type: "button",
|
|
@@ -3438,8 +3520,8 @@ function MultiSelectFilter({
|
|
|
3438
3520
|
"aria-expanded": open,
|
|
3439
3521
|
className: cn(chipTriggerClass(variant), fullWidth && "w-full justify-between"),
|
|
3440
3522
|
children: [
|
|
3441
|
-
/* @__PURE__ */ (0,
|
|
3442
|
-
/* @__PURE__ */ (0,
|
|
3523
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChipContent, { caption, value, icon }),
|
|
3524
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3443
3525
|
import_lucide_react21.ChevronDown,
|
|
3444
3526
|
{
|
|
3445
3527
|
size: 14,
|
|
@@ -3450,7 +3532,7 @@ function MultiSelectFilter({
|
|
|
3450
3532
|
]
|
|
3451
3533
|
}
|
|
3452
3534
|
),
|
|
3453
|
-
open && /* @__PURE__ */ (0,
|
|
3535
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
3454
3536
|
"div",
|
|
3455
3537
|
{
|
|
3456
3538
|
className: cn(
|
|
@@ -3461,9 +3543,9 @@ function MultiSelectFilter({
|
|
|
3461
3543
|
role: "dialog",
|
|
3462
3544
|
"aria-label": caption,
|
|
3463
3545
|
children: [
|
|
3464
|
-
searchable && /* @__PURE__ */ (0,
|
|
3465
|
-
/* @__PURE__ */ (0,
|
|
3466
|
-
/* @__PURE__ */ (0,
|
|
3546
|
+
searchable && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
|
|
3547
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.Search, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
|
|
3548
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3467
3549
|
"input",
|
|
3468
3550
|
{
|
|
3469
3551
|
type: "text",
|
|
@@ -3473,37 +3555,37 @@ function MultiSelectFilter({
|
|
|
3473
3555
|
className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
|
|
3474
3556
|
}
|
|
3475
3557
|
),
|
|
3476
|
-
q && /* @__PURE__ */ (0,
|
|
3558
|
+
q && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.X, { size: 13 }) })
|
|
3477
3559
|
] }) }),
|
|
3478
|
-
/* @__PURE__ */ (0,
|
|
3560
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
|
|
3479
3561
|
groups ? visibleGroups.map((g) => {
|
|
3480
3562
|
const state = groupState(g);
|
|
3481
|
-
return /* @__PURE__ */ (0,
|
|
3482
|
-
/* @__PURE__ */ (0,
|
|
3563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
|
|
3564
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
3483
3565
|
"button",
|
|
3484
3566
|
{
|
|
3485
3567
|
type: "button",
|
|
3486
3568
|
onClick: () => toggleGroup(g),
|
|
3487
3569
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3488
3570
|
children: [
|
|
3489
|
-
/* @__PURE__ */ (0,
|
|
3490
|
-
/* @__PURE__ */ (0,
|
|
3491
|
-
counts && /* @__PURE__ */ (0,
|
|
3571
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TriCheck, { state }),
|
|
3572
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
|
|
3573
|
+
counts && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OptionCount, { n: countFor(g.id) })
|
|
3492
3574
|
]
|
|
3493
3575
|
}
|
|
3494
3576
|
),
|
|
3495
3577
|
g.children.map((c) => {
|
|
3496
3578
|
const checked = draft.includes(c.id);
|
|
3497
|
-
return /* @__PURE__ */ (0,
|
|
3579
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
3498
3580
|
"button",
|
|
3499
3581
|
{
|
|
3500
3582
|
type: "button",
|
|
3501
3583
|
onClick: () => toggle(c.id),
|
|
3502
3584
|
className: "flex w-full items-center gap-2.5 rounded-control py-2 pl-9 pr-2 text-left transition-colors hover:bg-subtle",
|
|
3503
3585
|
children: [
|
|
3504
|
-
/* @__PURE__ */ (0,
|
|
3505
|
-
/* @__PURE__ */ (0,
|
|
3506
|
-
counts && /* @__PURE__ */ (0,
|
|
3586
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TriCheck, { state: checked ? "all" : "none" }),
|
|
3587
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
|
|
3588
|
+
counts && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OptionCount, { n: countFor(c.id) })
|
|
3507
3589
|
]
|
|
3508
3590
|
},
|
|
3509
3591
|
c.id
|
|
@@ -3512,33 +3594,33 @@ function MultiSelectFilter({
|
|
|
3512
3594
|
] }, g.id);
|
|
3513
3595
|
}) : items.map((o) => {
|
|
3514
3596
|
const checked = draft.includes(o.id);
|
|
3515
|
-
return /* @__PURE__ */ (0,
|
|
3597
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
3516
3598
|
"button",
|
|
3517
3599
|
{
|
|
3518
3600
|
type: "button",
|
|
3519
3601
|
onClick: () => toggle(o.id),
|
|
3520
3602
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3521
3603
|
children: [
|
|
3522
|
-
/* @__PURE__ */ (0,
|
|
3604
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3523
3605
|
"span",
|
|
3524
3606
|
{
|
|
3525
3607
|
className: cn(
|
|
3526
3608
|
"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
|
|
3527
3609
|
checked ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3528
3610
|
),
|
|
3529
|
-
children: checked && /* @__PURE__ */ (0,
|
|
3611
|
+
children: checked && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.Check, { size: 13, strokeWidth: 3 })
|
|
3530
3612
|
}
|
|
3531
3613
|
),
|
|
3532
|
-
/* @__PURE__ */ (0,
|
|
3533
|
-
counts && /* @__PURE__ */ (0,
|
|
3614
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
|
|
3615
|
+
counts && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(OptionCount, { n: countFor(o.id) })
|
|
3534
3616
|
]
|
|
3535
3617
|
},
|
|
3536
3618
|
o.id
|
|
3537
3619
|
);
|
|
3538
3620
|
}),
|
|
3539
|
-
(groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ (0,
|
|
3621
|
+
(groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
|
|
3540
3622
|
] }),
|
|
3541
|
-
showFooter ? /* @__PURE__ */ (0,
|
|
3623
|
+
showFooter ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
3542
3624
|
"button",
|
|
3543
3625
|
{
|
|
3544
3626
|
type: "button",
|
|
@@ -3557,7 +3639,7 @@ function MultiSelectFilter({
|
|
|
3557
3639
|
}
|
|
3558
3640
|
function TriCheck({ state }) {
|
|
3559
3641
|
const filled = state !== "none";
|
|
3560
|
-
return /* @__PURE__ */ (0,
|
|
3642
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
3561
3643
|
"span",
|
|
3562
3644
|
{
|
|
3563
3645
|
className: cn(
|
|
@@ -3565,14 +3647,14 @@ function TriCheck({ state }) {
|
|
|
3565
3647
|
filled ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3566
3648
|
),
|
|
3567
3649
|
children: [
|
|
3568
|
-
state === "all" && /* @__PURE__ */ (0,
|
|
3569
|
-
state === "some" && /* @__PURE__ */ (0,
|
|
3650
|
+
state === "all" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.Check, { size: 13, strokeWidth: 3 }),
|
|
3651
|
+
state === "some" && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.Minus, { size: 13, strokeWidth: 3 })
|
|
3570
3652
|
]
|
|
3571
3653
|
}
|
|
3572
3654
|
);
|
|
3573
3655
|
}
|
|
3574
3656
|
function OptionCount({ n }) {
|
|
3575
|
-
return /* @__PURE__ */ (0,
|
|
3657
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
|
|
3576
3658
|
"(",
|
|
3577
3659
|
n.toLocaleString(),
|
|
3578
3660
|
")"
|
|
@@ -3580,14 +3662,14 @@ function OptionCount({ n }) {
|
|
|
3580
3662
|
}
|
|
3581
3663
|
|
|
3582
3664
|
// src/Toggle.tsx
|
|
3583
|
-
var
|
|
3665
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3584
3666
|
var SIZES2 = {
|
|
3585
3667
|
sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
|
|
3586
3668
|
md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
|
|
3587
3669
|
};
|
|
3588
3670
|
function Toggle({ checked, onChange, label, size = "md", disabled, className }) {
|
|
3589
3671
|
const s = SIZES2[size];
|
|
3590
|
-
return /* @__PURE__ */ (0,
|
|
3672
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3591
3673
|
"button",
|
|
3592
3674
|
{
|
|
3593
3675
|
type: "button",
|
|
@@ -3603,7 +3685,7 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className })
|
|
|
3603
3685
|
disabled && "cursor-not-allowed opacity-50",
|
|
3604
3686
|
className
|
|
3605
3687
|
),
|
|
3606
|
-
children: /* @__PURE__ */ (0,
|
|
3688
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3607
3689
|
"span",
|
|
3608
3690
|
{
|
|
3609
3691
|
className: cn(
|
|
@@ -3620,20 +3702,20 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className })
|
|
|
3620
3702
|
// src/AISpark.tsx
|
|
3621
3703
|
var import_react17 = require("react");
|
|
3622
3704
|
var import_lucide_react22 = require("lucide-react");
|
|
3623
|
-
var
|
|
3705
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3624
3706
|
function AISpark({ size = 16, className }) {
|
|
3625
3707
|
const id = (0, import_react17.useId)();
|
|
3626
|
-
return /* @__PURE__ */ (0,
|
|
3627
|
-
/* @__PURE__ */ (0,
|
|
3628
|
-
/* @__PURE__ */ (0,
|
|
3629
|
-
/* @__PURE__ */ (0,
|
|
3708
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
|
|
3709
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
|
|
3710
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
|
|
3711
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
|
|
3630
3712
|
] }) }) }),
|
|
3631
|
-
/* @__PURE__ */ (0,
|
|
3713
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react22.Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
|
|
3632
3714
|
] });
|
|
3633
3715
|
}
|
|
3634
3716
|
|
|
3635
3717
|
// src/Freshness.tsx
|
|
3636
|
-
var
|
|
3718
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3637
3719
|
var dotColor = {
|
|
3638
3720
|
fresh: "bg-status-success",
|
|
3639
3721
|
recent: "bg-status-warning",
|
|
@@ -3645,7 +3727,7 @@ var srLabel = {
|
|
|
3645
3727
|
stale: "Older than a day"
|
|
3646
3728
|
};
|
|
3647
3729
|
function Freshness({ level }) {
|
|
3648
|
-
return /* @__PURE__ */ (0,
|
|
3730
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3649
3731
|
"span",
|
|
3650
3732
|
{
|
|
3651
3733
|
className: cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotColor[level]),
|
|
@@ -3660,6 +3742,7 @@ function Freshness({ level }) {
|
|
|
3660
3742
|
AdvertiserNoResults,
|
|
3661
3743
|
AdvertiserQuickFilter,
|
|
3662
3744
|
AdvertiserSearchPrompt,
|
|
3745
|
+
Badge,
|
|
3663
3746
|
BarChartPlaceholder,
|
|
3664
3747
|
Button,
|
|
3665
3748
|
Card,
|