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