@mediaradar/design-components 0.11.0 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +522 -439
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +74 -2
- package/dist/index.d.ts +74 -2
- package/dist/index.js +381 -299
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/scripts/tailwind-coverage.mjs +11 -0
package/dist/index.js
CHANGED
|
@@ -388,18 +388,86 @@ function OptionRow({
|
|
|
388
388
|
);
|
|
389
389
|
}
|
|
390
390
|
|
|
391
|
-
// src/CheckBox.tsx
|
|
392
|
-
import { Check as Check2, Minus } from "lucide-react";
|
|
393
|
-
|
|
394
391
|
// src/cn.ts
|
|
395
392
|
import { clsx } from "clsx";
|
|
396
|
-
import {
|
|
393
|
+
import { extendTailwindMerge } from "tailwind-merge";
|
|
394
|
+
var twMerge = extendTailwindMerge({
|
|
395
|
+
extend: {
|
|
396
|
+
classGroups: {
|
|
397
|
+
"font-size": [{ text: ["micro", "dense"] }]
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
});
|
|
397
401
|
function cn(...inputs) {
|
|
398
402
|
return twMerge(clsx(inputs));
|
|
399
403
|
}
|
|
400
404
|
|
|
401
|
-
// src/
|
|
405
|
+
// src/Badge.tsx
|
|
402
406
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
407
|
+
var TONE = {
|
|
408
|
+
neutral: "bg-subtle text-text-secondary",
|
|
409
|
+
brand: "bg-brand-primarySoft text-brand-primaryAction",
|
|
410
|
+
success: "bg-status-success/15 text-text-success",
|
|
411
|
+
// Heavier tint than success and danger on purpose. Equal opacity does not
|
|
412
|
+
// give equal presence: the warning amber (#b8843a) sits far closer to the
|
|
413
|
+
// warm canvas than red or green do, so the same 15% that reads clearly for
|
|
414
|
+
// those two disappeared here and the badge looked neutral.
|
|
415
|
+
warning: "bg-status-warning/30 text-text-warning",
|
|
416
|
+
danger: "bg-status-danger/15 text-text-danger",
|
|
417
|
+
// The gradient is the OUTLINE, not the fill. As a fill it was the most
|
|
418
|
+
// distinct tone by a mile, but white text on it ran from 7.5:1 at the blue
|
|
419
|
+
// end down to 2.1:1 at the amber end -- the last third of every AI badge
|
|
420
|
+
// was unreadable. Outlining keeps the gradient as the signal and puts the
|
|
421
|
+
// text back on a flat tint.
|
|
422
|
+
//
|
|
423
|
+
// Two backgrounds in one box: the tint clipped to the padding box, the
|
|
424
|
+
// gradient to the border box, over a transparent 1px border. The tint is
|
|
425
|
+
// opaque on purpose -- an outline over a transparent centre would let the
|
|
426
|
+
// gradient show through the middle, and the badge has to sit on both the
|
|
427
|
+
// canvas and a card without knowing which.
|
|
428
|
+
ai: "border border-transparent text-ai-ontint",
|
|
429
|
+
// Sits on artwork, not on the canvas, so it carries its own scrim rather
|
|
430
|
+
// than a theme surface -- the image behind it is not a colour we control.
|
|
431
|
+
overlay: "bg-scrim text-brand-onprimary"
|
|
432
|
+
};
|
|
433
|
+
var TONE_STYLE = {
|
|
434
|
+
ai: {
|
|
435
|
+
background: "linear-gradient(var(--mr-color-ai-tint), var(--mr-color-ai-tint)) padding-box, var(--mr-color-ai-gradient) border-box"
|
|
436
|
+
}
|
|
437
|
+
};
|
|
438
|
+
var KIND = {
|
|
439
|
+
label: "px-2 py-0.5",
|
|
440
|
+
// Square-ish and centred, with a floor width so a 1-digit and a 3-digit
|
|
441
|
+
// count are the same shape, and lining figures so the width does not shift
|
|
442
|
+
// as the number changes.
|
|
443
|
+
count: "h-[18px] min-w-[18px] justify-center px-1.5 tabular-nums",
|
|
444
|
+
// The only kind that shouts. Caps need the letterspacing -- caps set tight
|
|
445
|
+
// are harder to read than the sentence case they replaced.
|
|
446
|
+
eyebrow: "px-2 py-0.5 uppercase tracking-wider"
|
|
447
|
+
};
|
|
448
|
+
function Badge({ tone = "neutral", kind = "label", children, className }) {
|
|
449
|
+
return /* @__PURE__ */ jsx4(
|
|
450
|
+
"span",
|
|
451
|
+
{
|
|
452
|
+
style: TONE_STYLE[tone],
|
|
453
|
+
className: cn(
|
|
454
|
+
// `inline-flex` + `gap` so a leading icon sits on the text baseline
|
|
455
|
+
// without every caller re-inventing the spacing. `shrink-0` because a
|
|
456
|
+
// badge is almost always beside flexible text that would otherwise
|
|
457
|
+
// squash it. `whitespace-nowrap` because a wrapped badge is a bug.
|
|
458
|
+
"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-full text-micro font-semibold leading-none",
|
|
459
|
+
TONE[tone],
|
|
460
|
+
KIND[kind],
|
|
461
|
+
className
|
|
462
|
+
),
|
|
463
|
+
children
|
|
464
|
+
}
|
|
465
|
+
);
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
// src/CheckBox.tsx
|
|
469
|
+
import { Check as Check2, Minus } from "lucide-react";
|
|
470
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
403
471
|
function boxClass(on, disabled) {
|
|
404
472
|
return cn(
|
|
405
473
|
"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
|
|
@@ -408,8 +476,8 @@ function boxClass(on, disabled) {
|
|
|
408
476
|
);
|
|
409
477
|
}
|
|
410
478
|
function Glyph({ checked, indeterminate }) {
|
|
411
|
-
if (indeterminate) return /* @__PURE__ */
|
|
412
|
-
return checked ? /* @__PURE__ */
|
|
479
|
+
if (indeterminate) return /* @__PURE__ */ jsx5(Minus, { size: 13, strokeWidth: 3 });
|
|
480
|
+
return checked ? /* @__PURE__ */ jsx5(Check2, { size: 13, strokeWidth: 3 }) : null;
|
|
413
481
|
}
|
|
414
482
|
function CheckBox({
|
|
415
483
|
checked,
|
|
@@ -423,7 +491,7 @@ function CheckBox({
|
|
|
423
491
|
className
|
|
424
492
|
}) {
|
|
425
493
|
const on = checked || !!indeterminate;
|
|
426
|
-
return /* @__PURE__ */
|
|
494
|
+
return /* @__PURE__ */ jsx5(
|
|
427
495
|
"button",
|
|
428
496
|
{
|
|
429
497
|
type: "button",
|
|
@@ -447,18 +515,18 @@ function CheckBox({
|
|
|
447
515
|
disabled && "hover:border-border-interactive",
|
|
448
516
|
className
|
|
449
517
|
),
|
|
450
|
-
children: /* @__PURE__ */
|
|
518
|
+
children: /* @__PURE__ */ jsx5(Glyph, { checked, indeterminate })
|
|
451
519
|
}
|
|
452
520
|
);
|
|
453
521
|
}
|
|
454
522
|
function CheckBoxBox({ checked, indeterminate, disabled, className }) {
|
|
455
|
-
return /* @__PURE__ */
|
|
523
|
+
return /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", className: cn(boxClass(checked || !!indeterminate, disabled), className), children: /* @__PURE__ */ jsx5(Glyph, { checked, indeterminate }) });
|
|
456
524
|
}
|
|
457
525
|
|
|
458
526
|
// src/DateRangeFilter.tsx
|
|
459
527
|
import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
|
|
460
528
|
import { ChevronDown as ChevronDown2, ChevronLeft, ChevronRight } from "lucide-react";
|
|
461
|
-
import { jsx as
|
|
529
|
+
import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
462
530
|
var DEFAULT_SHORTCUTS = [
|
|
463
531
|
"Year to date",
|
|
464
532
|
"Rolling 3 months",
|
|
@@ -674,12 +742,12 @@ function DateRangeFilter({
|
|
|
674
742
|
"aria-expanded": open,
|
|
675
743
|
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",
|
|
676
744
|
children: [
|
|
677
|
-
icon && /* @__PURE__ */
|
|
745
|
+
icon && /* @__PURE__ */ jsx6("span", { className: "shrink-0 text-text-tertiary", children: icon }),
|
|
678
746
|
/* @__PURE__ */ jsxs4("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
679
|
-
/* @__PURE__ */
|
|
680
|
-
/* @__PURE__ */
|
|
747
|
+
/* @__PURE__ */ jsx6("span", { className: showDates ? "text-[11px] text-text-tertiary" : "text-[10px] uppercase tracking-wide text-text-tertiary", children: showDates ? displayDatesLine : caption }),
|
|
748
|
+
/* @__PURE__ */ jsx6("span", { className: "text-[12px] font-medium text-text-primary", children: displayValue })
|
|
681
749
|
] }),
|
|
682
|
-
/* @__PURE__ */
|
|
750
|
+
/* @__PURE__ */ jsx6(ChevronDown2, { size: 14, "aria-hidden": "true", className: `shrink-0 text-text-secondary transition-transform ${open ? "rotate-180" : ""}` })
|
|
683
751
|
]
|
|
684
752
|
}
|
|
685
753
|
),
|
|
@@ -691,7 +759,7 @@ function DateRangeFilter({
|
|
|
691
759
|
role: "dialog",
|
|
692
760
|
"aria-label": "Select date range",
|
|
693
761
|
children: [
|
|
694
|
-
/* @__PURE__ */
|
|
762
|
+
/* @__PURE__ */ jsx6("div", { className: "flex w-44 shrink-0 flex-col gap-0.5 border-r border-border-default p-2", children: SHORTCUTS.map((s) => /* @__PURE__ */ jsx6(
|
|
695
763
|
"button",
|
|
696
764
|
{
|
|
697
765
|
type: "button",
|
|
@@ -704,26 +772,26 @@ function DateRangeFilter({
|
|
|
704
772
|
)) }),
|
|
705
773
|
/* @__PURE__ */ jsxs4("div", { className: "flex flex-col p-4", children: [
|
|
706
774
|
/* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-3", children: [
|
|
707
|
-
/* @__PURE__ */
|
|
708
|
-
/* @__PURE__ */
|
|
709
|
-
/* @__PURE__ */
|
|
775
|
+
/* @__PURE__ */ jsx6(Field, { label: "Start Date", value: start ? fmt(start) : "\u2014" }),
|
|
776
|
+
/* @__PURE__ */ jsx6("span", { className: "pb-2.5 text-text-tertiary", children: "\u2014" }),
|
|
777
|
+
/* @__PURE__ */ jsx6(Field, { label: "End Date", value: end ? fmt(end) : start ? fmt(start) : "\u2014" })
|
|
710
778
|
] }),
|
|
711
|
-
/* @__PURE__ */
|
|
712
|
-
/* @__PURE__ */
|
|
779
|
+
/* @__PURE__ */ jsx6("div", { className: "my-4 border-t border-border-default" }),
|
|
780
|
+
/* @__PURE__ */ jsx6("div", { className: "flex gap-8", children: [0, 1].map((offset) => {
|
|
713
781
|
const m = addMonths(leftMonth, offset);
|
|
714
782
|
const grid = monthGrid(m.getFullYear(), m.getMonth());
|
|
715
783
|
return /* @__PURE__ */ jsxs4("div", { className: "w-[252px]", children: [
|
|
716
784
|
/* @__PURE__ */ jsxs4("div", { className: "mb-2 flex items-center justify-between", children: [
|
|
717
|
-
offset === 0 ? /* @__PURE__ */
|
|
785
|
+
offset === 0 ? /* @__PURE__ */ jsx6(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, -1)), "aria-label": "Previous month", children: /* @__PURE__ */ jsx6(ChevronLeft, { size: 16 }) }) : /* @__PURE__ */ jsx6("span", { className: "h-7 w-7" }),
|
|
718
786
|
/* @__PURE__ */ jsxs4("span", { className: "text-[15px] font-semibold text-text-primary", children: [
|
|
719
787
|
MONTHS[m.getMonth()],
|
|
720
788
|
" ",
|
|
721
789
|
m.getFullYear()
|
|
722
790
|
] }),
|
|
723
|
-
offset === 1 ? /* @__PURE__ */
|
|
791
|
+
offset === 1 ? /* @__PURE__ */ jsx6(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, 1)), "aria-label": "Next month", children: /* @__PURE__ */ jsx6(ChevronRight, { size: 16 }) }) : /* @__PURE__ */ jsx6("span", { className: "h-7 w-7" })
|
|
724
792
|
] }),
|
|
725
793
|
/* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-7", children: [
|
|
726
|
-
WEEKDAYS.map((w) => /* @__PURE__ */
|
|
794
|
+
WEEKDAYS.map((w) => /* @__PURE__ */ jsx6("div", { className: "flex h-8 items-center justify-center text-[12px] font-semibold text-text-secondary", children: w }, w)),
|
|
727
795
|
grid.map((d, i) => {
|
|
728
796
|
const inMonth = d.getMonth() === m.getMonth();
|
|
729
797
|
const hasRange = !!(start && end);
|
|
@@ -739,8 +807,8 @@ function DateRangeFilter({
|
|
|
739
807
|
else band = "left-0 right-0";
|
|
740
808
|
}
|
|
741
809
|
return /* @__PURE__ */ jsxs4("button", { type: "button", onClick: () => pickDay(d), className: "relative flex h-9 items-center justify-center", children: [
|
|
742
|
-
band && /* @__PURE__ */
|
|
743
|
-
/* @__PURE__ */
|
|
810
|
+
band && /* @__PURE__ */ jsx6("span", { className: `absolute inset-y-[3px] bg-ai-tint ${band}`, "aria-hidden": "true" }),
|
|
811
|
+
/* @__PURE__ */ jsx6(
|
|
744
812
|
"span",
|
|
745
813
|
{
|
|
746
814
|
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"}`,
|
|
@@ -753,8 +821,8 @@ function DateRangeFilter({
|
|
|
753
821
|
] }, offset);
|
|
754
822
|
}) }),
|
|
755
823
|
/* @__PURE__ */ jsxs4("div", { className: "mt-4 flex justify-end gap-2", children: [
|
|
756
|
-
/* @__PURE__ */
|
|
757
|
-
/* @__PURE__ */
|
|
824
|
+
/* @__PURE__ */ jsx6("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" }),
|
|
825
|
+
/* @__PURE__ */ jsx6("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" })
|
|
758
826
|
] })
|
|
759
827
|
] })
|
|
760
828
|
]
|
|
@@ -764,18 +832,18 @@ function DateRangeFilter({
|
|
|
764
832
|
}
|
|
765
833
|
function Field({ label, value }) {
|
|
766
834
|
return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", children: [
|
|
767
|
-
/* @__PURE__ */
|
|
768
|
-
/* @__PURE__ */
|
|
835
|
+
/* @__PURE__ */ jsx6("span", { className: "text-[12px] font-medium text-text-secondary", children: label }),
|
|
836
|
+
/* @__PURE__ */ jsx6("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 })
|
|
769
837
|
] });
|
|
770
838
|
}
|
|
771
839
|
function NavBtn({ children, onClick, ...rest }) {
|
|
772
|
-
return /* @__PURE__ */
|
|
840
|
+
return /* @__PURE__ */ jsx6("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 });
|
|
773
841
|
}
|
|
774
842
|
|
|
775
843
|
// src/SearchBar.tsx
|
|
776
844
|
import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
|
|
777
845
|
import { AlertCircle, Check as Check3, ChevronDown as ChevronDown3, Search as Search3 } from "lucide-react";
|
|
778
|
-
import { Fragment as Fragment3, jsx as
|
|
846
|
+
import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
779
847
|
var DEFAULT_SEARCH_MATCH = { mode: "anyWord", wordJoin: "Or" };
|
|
780
848
|
var MODE_LABEL = {
|
|
781
849
|
anyWord: "Any Word",
|
|
@@ -821,8 +889,8 @@ function SearchBar({
|
|
|
821
889
|
),
|
|
822
890
|
children: [
|
|
823
891
|
/* @__PURE__ */ jsxs5("label", { className: "flex min-w-0 flex-1 items-center gap-2 px-2.5", children: [
|
|
824
|
-
/* @__PURE__ */
|
|
825
|
-
/* @__PURE__ */
|
|
892
|
+
/* @__PURE__ */ jsx7(Search3, { size: 15, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
|
|
893
|
+
/* @__PURE__ */ jsx7(
|
|
826
894
|
"input",
|
|
827
895
|
{
|
|
828
896
|
type: "text",
|
|
@@ -858,7 +926,7 @@ function SearchBar({
|
|
|
858
926
|
className: "flex h-full items-center gap-1 px-2.5 text-[13px] font-medium text-text-primary transition-colors hover:bg-subtle",
|
|
859
927
|
children: [
|
|
860
928
|
matchValue.mode === "anyWord" ? `${MODE_LABEL.anyWord} (${matchValue.wordJoin})` : MODE_LABEL[matchValue.mode],
|
|
861
|
-
/* @__PURE__ */
|
|
929
|
+
/* @__PURE__ */ jsx7(
|
|
862
930
|
ChevronDown3,
|
|
863
931
|
{
|
|
864
932
|
size: 14,
|
|
@@ -869,7 +937,7 @@ function SearchBar({
|
|
|
869
937
|
]
|
|
870
938
|
}
|
|
871
939
|
),
|
|
872
|
-
open && /* @__PURE__ */
|
|
940
|
+
open && /* @__PURE__ */ jsx7(
|
|
873
941
|
"div",
|
|
874
942
|
{
|
|
875
943
|
role: "dialog",
|
|
@@ -877,17 +945,17 @@ function SearchBar({
|
|
|
877
945
|
"data-testid": testIdPrefix && `${testIdPrefix}-mode-popover`,
|
|
878
946
|
className: "absolute right-0 top-[calc(100%+8px)] z-50 w-[400px] rounded-card border border-border-default bg-surface p-3 shadow-overlay",
|
|
879
947
|
children: /* @__PURE__ */ jsxs5("div", { role: "radiogroup", "aria-label": "Search match type", className: "flex flex-col", children: [
|
|
880
|
-
/* @__PURE__ */
|
|
948
|
+
/* @__PURE__ */ jsx7(
|
|
881
949
|
ModeRow,
|
|
882
950
|
{
|
|
883
951
|
title: "Any Word Text Search",
|
|
884
952
|
selected: matchValue.mode === "anyWord",
|
|
885
953
|
onSelect: () => onMatchChange?.({ mode: "anyWord", wordJoin: matchValue.wordJoin }),
|
|
886
954
|
testId: testIdPrefix && `${testIdPrefix}-mode-anyWord`,
|
|
887
|
-
description: /* @__PURE__ */
|
|
955
|
+
description: /* @__PURE__ */ jsx7(Fragment3, { children: "Find creatives that contain your keyword(s) using an \u201COr\u201D (match any) or \u201CAnd\u201D (match all) conditional in any order." }),
|
|
888
956
|
infoText: "The Or/And choice applies only when Any Word is the active search mode.",
|
|
889
957
|
extra: /* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-3", children: [
|
|
890
|
-
/* @__PURE__ */
|
|
958
|
+
/* @__PURE__ */ jsx7(
|
|
891
959
|
RadioOption,
|
|
892
960
|
{
|
|
893
961
|
label: "Or",
|
|
@@ -896,7 +964,7 @@ function SearchBar({
|
|
|
896
964
|
testId: testIdPrefix && `${testIdPrefix}-word-join-or`
|
|
897
965
|
}
|
|
898
966
|
),
|
|
899
|
-
/* @__PURE__ */
|
|
967
|
+
/* @__PURE__ */ jsx7(
|
|
900
968
|
RadioOption,
|
|
901
969
|
{
|
|
902
970
|
label: "And",
|
|
@@ -908,8 +976,8 @@ function SearchBar({
|
|
|
908
976
|
] })
|
|
909
977
|
}
|
|
910
978
|
),
|
|
911
|
-
/* @__PURE__ */
|
|
912
|
-
/* @__PURE__ */
|
|
979
|
+
/* @__PURE__ */ jsx7(Divider, {}),
|
|
980
|
+
/* @__PURE__ */ jsx7(
|
|
913
981
|
ModeRow,
|
|
914
982
|
{
|
|
915
983
|
title: "Exact Match Text Search",
|
|
@@ -920,8 +988,8 @@ function SearchBar({
|
|
|
920
988
|
infoText: "Keywords are matched as a single contiguous phrase, in the order you typed them."
|
|
921
989
|
}
|
|
922
990
|
),
|
|
923
|
-
/* @__PURE__ */
|
|
924
|
-
/* @__PURE__ */
|
|
991
|
+
/* @__PURE__ */ jsx7(Divider, {}),
|
|
992
|
+
/* @__PURE__ */ jsx7(
|
|
925
993
|
ModeRow,
|
|
926
994
|
{
|
|
927
995
|
title: "Contextual Search",
|
|
@@ -933,8 +1001,8 @@ function SearchBar({
|
|
|
933
1001
|
infoText: "Uses semantic matching, so results can include related terms even when the exact keyword isn't present."
|
|
934
1002
|
}
|
|
935
1003
|
),
|
|
936
|
-
/* @__PURE__ */
|
|
937
|
-
/* @__PURE__ */
|
|
1004
|
+
/* @__PURE__ */ jsx7(Divider, {}),
|
|
1005
|
+
/* @__PURE__ */ jsx7(
|
|
938
1006
|
ModeRow,
|
|
939
1007
|
{
|
|
940
1008
|
title: "Ad Code Search",
|
|
@@ -954,7 +1022,7 @@ function SearchBar({
|
|
|
954
1022
|
);
|
|
955
1023
|
}
|
|
956
1024
|
function Divider() {
|
|
957
|
-
return /* @__PURE__ */
|
|
1025
|
+
return /* @__PURE__ */ jsx7("div", { className: "my-2.5 border-t border-border-default", "aria-hidden": "true" });
|
|
958
1026
|
}
|
|
959
1027
|
function ModeRow({
|
|
960
1028
|
title,
|
|
@@ -985,15 +1053,15 @@ function ModeRow({
|
|
|
985
1053
|
/* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between gap-2", children: [
|
|
986
1054
|
/* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-3", children: [
|
|
987
1055
|
/* @__PURE__ */ jsxs5("span", { className: "flex items-center gap-1", children: [
|
|
988
|
-
/* @__PURE__ */
|
|
989
|
-
/* @__PURE__ */
|
|
1056
|
+
/* @__PURE__ */ jsx7("span", { className: "text-[14px] font-semibold text-text-primary", children: title }),
|
|
1057
|
+
/* @__PURE__ */ jsx7(RowInfoTip, { text: infoText })
|
|
990
1058
|
] }),
|
|
991
|
-
badge && /* @__PURE__ */
|
|
1059
|
+
badge && /* @__PURE__ */ jsx7("span", { className: "rounded-full bg-subtle px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-text-secondary", children: badge }),
|
|
992
1060
|
extra
|
|
993
1061
|
] }),
|
|
994
|
-
selected && /* @__PURE__ */
|
|
1062
|
+
selected && /* @__PURE__ */ jsx7(Check3, { size: 16, strokeWidth: 2.5, "aria-hidden": "true", className: "shrink-0 text-brand-primaryAction" })
|
|
995
1063
|
] }),
|
|
996
|
-
/* @__PURE__ */
|
|
1064
|
+
/* @__PURE__ */ jsx7("span", { className: "block text-[12.5px] leading-snug text-text-secondary", children: description })
|
|
997
1065
|
]
|
|
998
1066
|
}
|
|
999
1067
|
);
|
|
@@ -1017,14 +1085,14 @@ function RadioOption({
|
|
|
1017
1085
|
"aria-checked": checked,
|
|
1018
1086
|
className: "flex items-center gap-1.5 text-[13px] font-medium text-text-primary",
|
|
1019
1087
|
children: [
|
|
1020
|
-
/* @__PURE__ */
|
|
1088
|
+
/* @__PURE__ */ jsx7(
|
|
1021
1089
|
"span",
|
|
1022
1090
|
{
|
|
1023
1091
|
className: cx2(
|
|
1024
1092
|
"flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
|
|
1025
1093
|
checked ? "border-brand-primaryAction" : "border-border-interactive"
|
|
1026
1094
|
),
|
|
1027
|
-
children: checked && /* @__PURE__ */
|
|
1095
|
+
children: checked && /* @__PURE__ */ jsx7("span", { className: "h-2 w-2 rounded-full bg-brand-primaryAction" })
|
|
1028
1096
|
}
|
|
1029
1097
|
),
|
|
1030
1098
|
label
|
|
@@ -1044,7 +1112,7 @@ function RowInfoTip({ text }) {
|
|
|
1044
1112
|
return () => window.removeEventListener("mousedown", onDown);
|
|
1045
1113
|
}, [open]);
|
|
1046
1114
|
return /* @__PURE__ */ jsxs5("span", { className: "relative inline-flex shrink-0 items-center", ref, children: [
|
|
1047
|
-
/* @__PURE__ */
|
|
1115
|
+
/* @__PURE__ */ jsx7(
|
|
1048
1116
|
"button",
|
|
1049
1117
|
{
|
|
1050
1118
|
type: "button",
|
|
@@ -1055,10 +1123,10 @@ function RowInfoTip({ text }) {
|
|
|
1055
1123
|
"aria-label": "More information",
|
|
1056
1124
|
"aria-expanded": open,
|
|
1057
1125
|
className: "inline-flex text-text-tertiary transition-colors hover:text-text-primary",
|
|
1058
|
-
children: /* @__PURE__ */
|
|
1126
|
+
children: /* @__PURE__ */ jsx7(AlertCircle, { size: 13, "aria-hidden": "true" })
|
|
1059
1127
|
}
|
|
1060
1128
|
),
|
|
1061
|
-
open && /* @__PURE__ */
|
|
1129
|
+
open && /* @__PURE__ */ jsx7(
|
|
1062
1130
|
"span",
|
|
1063
1131
|
{
|
|
1064
1132
|
role: "tooltip",
|
|
@@ -1072,7 +1140,7 @@ function RowInfoTip({ text }) {
|
|
|
1072
1140
|
// src/SectionRail.tsx
|
|
1073
1141
|
import { useRef as useRef5 } from "react";
|
|
1074
1142
|
import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
|
|
1075
|
-
import { jsx as
|
|
1143
|
+
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1076
1144
|
function SectionRail({
|
|
1077
1145
|
title,
|
|
1078
1146
|
titleSerif,
|
|
@@ -1088,14 +1156,14 @@ function SectionRail({
|
|
|
1088
1156
|
return /* @__PURE__ */ jsxs6("section", { className: "flex flex-col gap-4", children: [
|
|
1089
1157
|
/* @__PURE__ */ jsxs6("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
|
|
1090
1158
|
/* @__PURE__ */ jsxs6("div", { children: [
|
|
1091
|
-
/* @__PURE__ */
|
|
1159
|
+
/* @__PURE__ */ jsx8(
|
|
1092
1160
|
"h2",
|
|
1093
1161
|
{
|
|
1094
1162
|
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",
|
|
1095
1163
|
children: title
|
|
1096
1164
|
}
|
|
1097
1165
|
),
|
|
1098
|
-
/* @__PURE__ */
|
|
1166
|
+
/* @__PURE__ */ jsx8("p", { className: "mt-1 text-sm text-text-secondary", children: subtitle })
|
|
1099
1167
|
] }),
|
|
1100
1168
|
/* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
|
|
1101
1169
|
viewAllLabel && viewAllHref && /* @__PURE__ */ jsxs6(
|
|
@@ -1109,29 +1177,29 @@ function SectionRail({
|
|
|
1109
1177
|
]
|
|
1110
1178
|
}
|
|
1111
1179
|
),
|
|
1112
|
-
/* @__PURE__ */
|
|
1180
|
+
/* @__PURE__ */ jsx8(
|
|
1113
1181
|
"button",
|
|
1114
1182
|
{
|
|
1115
1183
|
type: "button",
|
|
1116
1184
|
onClick: () => scroll(-1),
|
|
1117
1185
|
"aria-label": "Previous",
|
|
1118
1186
|
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",
|
|
1119
|
-
children: /* @__PURE__ */
|
|
1187
|
+
children: /* @__PURE__ */ jsx8(ChevronLeft2, { size: 16 })
|
|
1120
1188
|
}
|
|
1121
1189
|
),
|
|
1122
|
-
/* @__PURE__ */
|
|
1190
|
+
/* @__PURE__ */ jsx8(
|
|
1123
1191
|
"button",
|
|
1124
1192
|
{
|
|
1125
1193
|
type: "button",
|
|
1126
1194
|
onClick: () => scroll(1),
|
|
1127
1195
|
"aria-label": "Next",
|
|
1128
1196
|
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",
|
|
1129
|
-
children: /* @__PURE__ */
|
|
1197
|
+
children: /* @__PURE__ */ jsx8(ChevronRight2, { size: 16 })
|
|
1130
1198
|
}
|
|
1131
1199
|
)
|
|
1132
1200
|
] })
|
|
1133
1201
|
] }),
|
|
1134
|
-
/* @__PURE__ */
|
|
1202
|
+
/* @__PURE__ */ jsx8(
|
|
1135
1203
|
"div",
|
|
1136
1204
|
{
|
|
1137
1205
|
ref: scrollRef,
|
|
@@ -1145,7 +1213,7 @@ function SectionRail({
|
|
|
1145
1213
|
// src/DataScopeFilter.tsx
|
|
1146
1214
|
import { useEffect as useEffect5, useRef as useRef6, useState as useState5 } from "react";
|
|
1147
1215
|
import { Check as Check4, ChevronDown as ChevronDown4 } from "lucide-react";
|
|
1148
|
-
import { jsx as
|
|
1216
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1149
1217
|
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.";
|
|
1150
1218
|
function cx3(...classes) {
|
|
1151
1219
|
return classes.filter(Boolean).join(" ");
|
|
@@ -1182,10 +1250,10 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1182
1250
|
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",
|
|
1183
1251
|
children: [
|
|
1184
1252
|
/* @__PURE__ */ jsxs7("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
1185
|
-
/* @__PURE__ */
|
|
1186
|
-
/* @__PURE__ */
|
|
1253
|
+
/* @__PURE__ */ jsx9("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: "Data" }),
|
|
1254
|
+
/* @__PURE__ */ jsx9("span", { className: "text-[12px] font-medium text-text-primary", children: display })
|
|
1187
1255
|
] }),
|
|
1188
|
-
/* @__PURE__ */
|
|
1256
|
+
/* @__PURE__ */ jsx9(
|
|
1189
1257
|
ChevronDown4,
|
|
1190
1258
|
{
|
|
1191
1259
|
size: 14,
|
|
@@ -1206,8 +1274,8 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1206
1274
|
align === "right" ? "right-0" : "left-0"
|
|
1207
1275
|
),
|
|
1208
1276
|
children: [
|
|
1209
|
-
/* @__PURE__ */
|
|
1210
|
-
/* @__PURE__ */
|
|
1277
|
+
/* @__PURE__ */ jsx9(Option, { label: "All", selected: !value, onClick: () => choose(false) }),
|
|
1278
|
+
/* @__PURE__ */ jsx9(Option, { label: "Final only", selected: value, onClick: () => choose(true), hint: FINAL_ONLY_TEXT })
|
|
1211
1279
|
]
|
|
1212
1280
|
}
|
|
1213
1281
|
)
|
|
@@ -1232,7 +1300,7 @@ function Option({
|
|
|
1232
1300
|
selected ? "font-semibold text-text-primary" : "text-text-secondary"
|
|
1233
1301
|
),
|
|
1234
1302
|
children: [
|
|
1235
|
-
/* @__PURE__ */
|
|
1303
|
+
/* @__PURE__ */ jsx9(Check4, { size: 14, "aria-hidden": "true", className: cx3("shrink-0 text-brand-primaryAction", !selected && "invisible") }),
|
|
1236
1304
|
label
|
|
1237
1305
|
]
|
|
1238
1306
|
}
|
|
@@ -1240,7 +1308,7 @@ function Option({
|
|
|
1240
1308
|
if (!hint) return option;
|
|
1241
1309
|
return /* @__PURE__ */ jsxs7("div", { className: "flex items-center pr-2.5", children: [
|
|
1242
1310
|
option,
|
|
1243
|
-
/* @__PURE__ */
|
|
1311
|
+
/* @__PURE__ */ jsx9(InfoTip, { text: hint, trigger: "hover", label: `About ${label}` })
|
|
1244
1312
|
] });
|
|
1245
1313
|
}
|
|
1246
1314
|
|
|
@@ -1248,7 +1316,7 @@ function Option({
|
|
|
1248
1316
|
import { useCallback as useCallback2, useEffect as useEffect6, useLayoutEffect, useRef as useRef7, useState as useState6 } from "react";
|
|
1249
1317
|
import { createPortal as createPortal2 } from "react-dom";
|
|
1250
1318
|
import { Check as Check5, ChevronDown as ChevronDown5 } from "lucide-react";
|
|
1251
|
-
import { jsx as
|
|
1319
|
+
import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1252
1320
|
function cx4(...classes) {
|
|
1253
1321
|
return classes.filter(Boolean).join(" ");
|
|
1254
1322
|
}
|
|
@@ -1314,10 +1382,10 @@ function SelectFilter({
|
|
|
1314
1382
|
),
|
|
1315
1383
|
children: [
|
|
1316
1384
|
/* @__PURE__ */ jsxs8("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
1317
|
-
/* @__PURE__ */
|
|
1318
|
-
/* @__PURE__ */
|
|
1385
|
+
/* @__PURE__ */ jsx10("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
|
|
1386
|
+
/* @__PURE__ */ jsx10("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
1319
1387
|
] }),
|
|
1320
|
-
/* @__PURE__ */
|
|
1388
|
+
/* @__PURE__ */ jsx10(
|
|
1321
1389
|
ChevronDown5,
|
|
1322
1390
|
{
|
|
1323
1391
|
size: 14,
|
|
@@ -1329,7 +1397,7 @@ function SelectFilter({
|
|
|
1329
1397
|
}
|
|
1330
1398
|
),
|
|
1331
1399
|
open && pos && createPortal2(
|
|
1332
|
-
/* @__PURE__ */
|
|
1400
|
+
/* @__PURE__ */ jsx10(
|
|
1333
1401
|
"div",
|
|
1334
1402
|
{
|
|
1335
1403
|
ref: popoverRef,
|
|
@@ -1341,7 +1409,7 @@ function SelectFilter({
|
|
|
1341
1409
|
),
|
|
1342
1410
|
role: "listbox",
|
|
1343
1411
|
"aria-label": caption,
|
|
1344
|
-
children: /* @__PURE__ */
|
|
1412
|
+
children: /* @__PURE__ */ jsx10("div", { className: "max-h-[280px] overflow-y-auto p-1", children: options.map((o) => {
|
|
1345
1413
|
const selected = o === value;
|
|
1346
1414
|
return /* @__PURE__ */ jsxs8(
|
|
1347
1415
|
"button",
|
|
@@ -1356,8 +1424,8 @@ function SelectFilter({
|
|
|
1356
1424
|
},
|
|
1357
1425
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
1358
1426
|
children: [
|
|
1359
|
-
/* @__PURE__ */
|
|
1360
|
-
/* @__PURE__ */
|
|
1427
|
+
/* @__PURE__ */ jsx10("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center text-brand-primaryAction", children: selected && /* @__PURE__ */ jsx10(Check5, { size: 15, strokeWidth: 3 }) }),
|
|
1428
|
+
/* @__PURE__ */ jsx10(
|
|
1361
1429
|
"span",
|
|
1362
1430
|
{
|
|
1363
1431
|
className: cx4("flex-1 text-[14px]", selected ? "font-semibold text-text-primary" : "text-text-primary"),
|
|
@@ -1378,9 +1446,9 @@ function SelectFilter({
|
|
|
1378
1446
|
|
|
1379
1447
|
// src/Card.tsx
|
|
1380
1448
|
import { forwardRef } from "react";
|
|
1381
|
-
import { jsx as
|
|
1449
|
+
import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1382
1450
|
var Card = forwardRef(function Card2({ staticCard, title, subtitle, action, className, children, ...rest }, ref) {
|
|
1383
|
-
return /* @__PURE__ */
|
|
1451
|
+
return /* @__PURE__ */ jsx11(
|
|
1384
1452
|
"article",
|
|
1385
1453
|
{
|
|
1386
1454
|
ref,
|
|
@@ -1394,12 +1462,12 @@ var Card = forwardRef(function Card2({ staticCard, title, subtitle, action, clas
|
|
|
1394
1462
|
children: title ? /* @__PURE__ */ jsxs9("div", { className: "flex flex-1 flex-col p-card-padding", children: [
|
|
1395
1463
|
/* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between gap-2", children: [
|
|
1396
1464
|
/* @__PURE__ */ jsxs9("div", { children: [
|
|
1397
|
-
/* @__PURE__ */
|
|
1398
|
-
subtitle && /* @__PURE__ */
|
|
1465
|
+
/* @__PURE__ */ jsx11("h3", { className: "text-[15px] font-semibold leading-snug text-text-primary", children: title }),
|
|
1466
|
+
subtitle && /* @__PURE__ */ jsx11("p", { className: "mt-0.5 text-[12px] leading-snug text-text-tertiary", children: subtitle })
|
|
1399
1467
|
] }),
|
|
1400
|
-
action && /* @__PURE__ */
|
|
1468
|
+
action && /* @__PURE__ */ jsx11("div", { className: "shrink-0 text-text-tertiary", children: action })
|
|
1401
1469
|
] }),
|
|
1402
|
-
/* @__PURE__ */
|
|
1470
|
+
/* @__PURE__ */ jsx11("div", { className: "mt-4 flex flex-1 flex-col", children })
|
|
1403
1471
|
] }) : children
|
|
1404
1472
|
}
|
|
1405
1473
|
);
|
|
@@ -1407,7 +1475,7 @@ var Card = forwardRef(function Card2({ staticCard, title, subtitle, action, clas
|
|
|
1407
1475
|
|
|
1408
1476
|
// src/NoResultsEmptyState.tsx
|
|
1409
1477
|
import { FilterX } from "lucide-react";
|
|
1410
|
-
import { jsx as
|
|
1478
|
+
import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1411
1479
|
var NO_RESULTS_TITLE = "No results match your filters";
|
|
1412
1480
|
var NO_RESULTS_BODY = "Your filters may be too narrow, conflict with each other, or have no activity in this period.";
|
|
1413
1481
|
function noResultsBody(workspaceName) {
|
|
@@ -1430,11 +1498,11 @@ function NoResultsEmptyState({
|
|
|
1430
1498
|
const showEdit = Boolean(onEditFilters);
|
|
1431
1499
|
const hasActions = showClear || showEdit || Boolean(actions && actions.length > 0);
|
|
1432
1500
|
return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-center justify-center gap-3 text-center", "data-testid": testIdPrefix, children: [
|
|
1433
|
-
/* @__PURE__ */
|
|
1434
|
-
/* @__PURE__ */
|
|
1435
|
-
/* @__PURE__ */
|
|
1501
|
+
/* @__PURE__ */ jsx12("span", { className: "flex h-11 w-11 items-center justify-center rounded-full bg-subtle text-text-tertiary", children: /* @__PURE__ */ jsx12(FilterX, { size: 20, "aria-hidden": "true" }) }),
|
|
1502
|
+
/* @__PURE__ */ jsx12("h2", { className: "text-base font-semibold text-text-primary", children: title }),
|
|
1503
|
+
/* @__PURE__ */ jsx12("p", { className: "max-w-[420px] text-[13px] leading-relaxed text-text-secondary", children: bodyText }),
|
|
1436
1504
|
hasActions && /* @__PURE__ */ jsxs10("div", { className: "mt-1 flex flex-col items-center gap-3", children: [
|
|
1437
|
-
showClear && /* @__PURE__ */
|
|
1505
|
+
showClear && /* @__PURE__ */ jsx12(
|
|
1438
1506
|
"button",
|
|
1439
1507
|
{
|
|
1440
1508
|
type: "button",
|
|
@@ -1444,7 +1512,7 @@ function NoResultsEmptyState({
|
|
|
1444
1512
|
children: "Clear all filters"
|
|
1445
1513
|
}
|
|
1446
1514
|
),
|
|
1447
|
-
showEdit && /* @__PURE__ */
|
|
1515
|
+
showEdit && /* @__PURE__ */ jsx12(
|
|
1448
1516
|
"button",
|
|
1449
1517
|
{
|
|
1450
1518
|
type: "button",
|
|
@@ -1454,7 +1522,7 @@ function NoResultsEmptyState({
|
|
|
1454
1522
|
children: "Edit filters"
|
|
1455
1523
|
}
|
|
1456
1524
|
),
|
|
1457
|
-
actions?.map((action, i) => /* @__PURE__ */
|
|
1525
|
+
actions?.map((action, i) => /* @__PURE__ */ jsx12(
|
|
1458
1526
|
"button",
|
|
1459
1527
|
{
|
|
1460
1528
|
type: "button",
|
|
@@ -1471,12 +1539,12 @@ function NoResultsEmptyState({
|
|
|
1471
1539
|
// src/WorkspaceSelectedCard.tsx
|
|
1472
1540
|
import { useEffect as useEffect7, useRef as useRef8, useState as useState7 } from "react";
|
|
1473
1541
|
import { ChevronDown as ChevronDown6, X as X2 } from "lucide-react";
|
|
1474
|
-
import { jsx as
|
|
1542
|
+
import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1475
1543
|
function cx5(...parts) {
|
|
1476
1544
|
return parts.filter(Boolean).join(" ");
|
|
1477
1545
|
}
|
|
1478
1546
|
function WorkspaceSelectedCard({ groups, testIdPrefix }) {
|
|
1479
|
-
return /* @__PURE__ */
|
|
1547
|
+
return /* @__PURE__ */ jsx13("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__ */ jsx13("div", { className: "flex flex-col divide-y divide-border-default", children: groups.map((g) => /* @__PURE__ */ jsx13(SummaryGroupItem, { group: g, testIdPrefix }, g.id)) }) });
|
|
1480
1548
|
}
|
|
1481
1549
|
function SummaryGroupItem({
|
|
1482
1550
|
group,
|
|
@@ -1503,7 +1571,7 @@ function SummaryGroupItem({
|
|
|
1503
1571
|
"data-testid": testIdPrefix && `${testIdPrefix}-group-${group.id}`,
|
|
1504
1572
|
className: "flex w-full min-w-0 items-center gap-2 text-left",
|
|
1505
1573
|
children: [
|
|
1506
|
-
/* @__PURE__ */
|
|
1574
|
+
/* @__PURE__ */ jsx13(
|
|
1507
1575
|
ChevronDown6,
|
|
1508
1576
|
{
|
|
1509
1577
|
size: 14,
|
|
@@ -1511,12 +1579,12 @@ function SummaryGroupItem({
|
|
|
1511
1579
|
className: cx5("shrink-0 text-text-secondary transition-transform", !open && "-rotate-90")
|
|
1512
1580
|
}
|
|
1513
1581
|
),
|
|
1514
|
-
/* @__PURE__ */
|
|
1515
|
-
/* @__PURE__ */
|
|
1582
|
+
/* @__PURE__ */ jsx13("span", { className: cx5("truncate font-semibold text-text-primary", nested ? "text-[12px]" : "text-[13px]"), children: group.label }),
|
|
1583
|
+
/* @__PURE__ */ jsx13("span", { className: "shrink-0 rounded-full bg-subtle px-1.5 py-0.5 text-[11px] font-semibold text-text-secondary", children: ownCount })
|
|
1516
1584
|
]
|
|
1517
1585
|
}
|
|
1518
1586
|
),
|
|
1519
|
-
open && /* @__PURE__ */
|
|
1587
|
+
open && /* @__PURE__ */ jsx13("div", { className: "pt-2.5", children: ownCount === 0 && subCount === 0 ? /* @__PURE__ */ jsx13("p", { className: "text-[12px] text-text-secondary", children: "Nothing selected." }) : /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2.5", children: [
|
|
1520
1588
|
ownCount > 0 && /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1.5", children: [
|
|
1521
1589
|
group.items.map((item) => /* @__PURE__ */ jsxs11(
|
|
1522
1590
|
"div",
|
|
@@ -1524,24 +1592,24 @@ function SummaryGroupItem({
|
|
|
1524
1592
|
className: "flex items-center justify-between gap-2 rounded-control border border-border-default bg-canvas px-2 py-1",
|
|
1525
1593
|
children: [
|
|
1526
1594
|
/* @__PURE__ */ jsxs11("span", { className: "min-w-0 flex-1", children: [
|
|
1527
|
-
/* @__PURE__ */
|
|
1528
|
-
item.meta && /* @__PURE__ */
|
|
1595
|
+
/* @__PURE__ */ jsx13("span", { className: "block truncate text-[12px] text-text-primary", children: item.name }),
|
|
1596
|
+
item.meta && /* @__PURE__ */ jsx13("span", { className: "block truncate text-[11px] text-text-secondary", children: item.meta })
|
|
1529
1597
|
] }),
|
|
1530
|
-
/* @__PURE__ */
|
|
1598
|
+
/* @__PURE__ */ jsx13(
|
|
1531
1599
|
"button",
|
|
1532
1600
|
{
|
|
1533
1601
|
type: "button",
|
|
1534
1602
|
"aria-label": `Remove ${item.name}`,
|
|
1535
1603
|
onClick: () => group.onRemove(item.id),
|
|
1536
1604
|
className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-control text-text-secondary hover:bg-subtle hover:text-text-danger",
|
|
1537
|
-
children: /* @__PURE__ */
|
|
1605
|
+
children: /* @__PURE__ */ jsx13(X2, { size: 12, "aria-hidden": "true" })
|
|
1538
1606
|
}
|
|
1539
1607
|
)
|
|
1540
1608
|
]
|
|
1541
1609
|
},
|
|
1542
1610
|
item.id
|
|
1543
1611
|
)),
|
|
1544
|
-
/* @__PURE__ */
|
|
1612
|
+
/* @__PURE__ */ jsx13(
|
|
1545
1613
|
"button",
|
|
1546
1614
|
{
|
|
1547
1615
|
type: "button",
|
|
@@ -1552,13 +1620,13 @@ function SummaryGroupItem({
|
|
|
1552
1620
|
}
|
|
1553
1621
|
)
|
|
1554
1622
|
] }),
|
|
1555
|
-
group.subGroups?.map((sg) => /* @__PURE__ */
|
|
1623
|
+
group.subGroups?.map((sg) => /* @__PURE__ */ jsx13(SummaryGroupItem, { group: sg, nested: true, testIdPrefix }, sg.id))
|
|
1556
1624
|
] }) })
|
|
1557
1625
|
] });
|
|
1558
1626
|
}
|
|
1559
1627
|
|
|
1560
1628
|
// src/chart-placeholder-shared.tsx
|
|
1561
|
-
import { jsx as
|
|
1629
|
+
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1562
1630
|
var GRID_ROWS = [0, 25, 50, 75, 100];
|
|
1563
1631
|
var Y_TICK_WIDTHS = [26, 30, 30, 26, 20];
|
|
1564
1632
|
var Y_AXIS_W = 48;
|
|
@@ -1570,9 +1638,9 @@ function AxisFrame({
|
|
|
1570
1638
|
children
|
|
1571
1639
|
}) {
|
|
1572
1640
|
const gutter = xTicks > 0 ? X_AXIS_H : 0;
|
|
1573
|
-
return /* @__PURE__ */
|
|
1641
|
+
return /* @__PURE__ */ jsx14("div", { className: "w-full", style: { height }, role: "presentation", "aria-hidden": "true", children: /* @__PURE__ */ jsxs12("div", { className: "relative h-full w-full", children: [
|
|
1574
1642
|
/* @__PURE__ */ jsxs12("div", { className: "absolute inset-y-0 right-0", style: { left: Y_AXIS_W, bottom: gutter }, children: [
|
|
1575
|
-
GRID_ROWS.map((pct) => /* @__PURE__ */
|
|
1643
|
+
GRID_ROWS.map((pct) => /* @__PURE__ */ jsx14(
|
|
1576
1644
|
"div",
|
|
1577
1645
|
{
|
|
1578
1646
|
className: "absolute inset-x-0 border-t border-dashed",
|
|
@@ -1580,9 +1648,9 @@ function AxisFrame({
|
|
|
1580
1648
|
},
|
|
1581
1649
|
pct
|
|
1582
1650
|
)),
|
|
1583
|
-
/* @__PURE__ */
|
|
1651
|
+
/* @__PURE__ */ jsx14("div", { className: "absolute inset-0", children })
|
|
1584
1652
|
] }),
|
|
1585
|
-
/* @__PURE__ */
|
|
1653
|
+
/* @__PURE__ */ jsx14("div", { className: "absolute left-0 top-0", style: { width: Y_AXIS_W, bottom: gutter }, children: GRID_ROWS.map((pct, i) => /* @__PURE__ */ jsx14(
|
|
1586
1654
|
"div",
|
|
1587
1655
|
{
|
|
1588
1656
|
className: "absolute right-2 h-2 -translate-y-1/2 rounded-xs bg-subtle",
|
|
@@ -1590,18 +1658,18 @@ function AxisFrame({
|
|
|
1590
1658
|
},
|
|
1591
1659
|
pct
|
|
1592
1660
|
)) }),
|
|
1593
|
-
xTicks > 0 && /* @__PURE__ */
|
|
1661
|
+
xTicks > 0 && /* @__PURE__ */ jsx14(
|
|
1594
1662
|
"div",
|
|
1595
1663
|
{
|
|
1596
1664
|
className: "absolute bottom-0 right-0 flex items-center",
|
|
1597
1665
|
style: { left: Y_AXIS_W, height: X_AXIS_H },
|
|
1598
|
-
children: Array.from({ length: xTicks }, (_, i) => /* @__PURE__ */
|
|
1666
|
+
children: Array.from({ length: xTicks }, (_, i) => /* @__PURE__ */ jsx14("div", { className: "flex flex-1 justify-center", children: /* @__PURE__ */ jsx14("div", { className: "h-2 w-full max-w-[26px] rounded-xs bg-subtle" }) }, i))
|
|
1599
1667
|
}
|
|
1600
1668
|
)
|
|
1601
1669
|
] }) });
|
|
1602
1670
|
}
|
|
1603
1671
|
function BlankLegend({ rows, reverse = false }) {
|
|
1604
|
-
return /* @__PURE__ */
|
|
1672
|
+
return /* @__PURE__ */ jsx14(
|
|
1605
1673
|
"ul",
|
|
1606
1674
|
{
|
|
1607
1675
|
className: `flex flex-1 justify-center gap-1.5 ${reverse ? "flex-col-reverse" : "flex-col"}`,
|
|
@@ -1609,8 +1677,8 @@ function BlankLegend({ rows, reverse = false }) {
|
|
|
1609
1677
|
"aria-hidden": "true",
|
|
1610
1678
|
children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxs12("li", { className: "flex items-center justify-between gap-2", children: [
|
|
1611
1679
|
/* @__PURE__ */ jsxs12("span", { className: "flex items-center gap-1.5", children: [
|
|
1612
|
-
/* @__PURE__ */
|
|
1613
|
-
/* @__PURE__ */
|
|
1680
|
+
/* @__PURE__ */ jsx14("span", { className: "h-2.5 w-2.5 rounded-xs bg-subtle" }),
|
|
1681
|
+
/* @__PURE__ */ jsx14(
|
|
1614
1682
|
"span",
|
|
1615
1683
|
{
|
|
1616
1684
|
className: "h-2 rounded-xs bg-subtle",
|
|
@@ -1618,21 +1686,21 @@ function BlankLegend({ rows, reverse = false }) {
|
|
|
1618
1686
|
}
|
|
1619
1687
|
)
|
|
1620
1688
|
] }),
|
|
1621
|
-
/* @__PURE__ */
|
|
1689
|
+
/* @__PURE__ */ jsx14("span", { className: "h-2 w-6 rounded-xs bg-subtle" })
|
|
1622
1690
|
] }, i))
|
|
1623
1691
|
}
|
|
1624
1692
|
);
|
|
1625
1693
|
}
|
|
1626
1694
|
|
|
1627
1695
|
// src/BarChartPlaceholder.tsx
|
|
1628
|
-
import { jsx as
|
|
1696
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
1629
1697
|
var BAR_PROFILE = [92, 86, 76, 65, 57, 40, 30, 24, 18, 13];
|
|
1630
1698
|
function BarChartPlaceholder({ height = 220 }) {
|
|
1631
|
-
return /* @__PURE__ */
|
|
1699
|
+
return /* @__PURE__ */ jsx15(AxisFrame, { height, xTicks: BAR_PROFILE.length, children: /* @__PURE__ */ jsx15("div", { className: "flex h-full w-full items-end gap-2", children: BAR_PROFILE.map((pct, i) => /* @__PURE__ */ jsx15("div", { className: "flex-1 rounded-t-[3px] bg-subtle", style: { height: `${pct}%` } }, i)) }) });
|
|
1632
1700
|
}
|
|
1633
1701
|
|
|
1634
1702
|
// src/LineChartPlaceholder.tsx
|
|
1635
|
-
import { jsx as
|
|
1703
|
+
import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1636
1704
|
var LINE_SERIES = [
|
|
1637
1705
|
[58, 52, 55, 41, 45, 33, 36, 25, 28, 17],
|
|
1638
1706
|
[74, 71, 66, 68, 59, 61, 54, 56, 48, 45],
|
|
@@ -1643,8 +1711,8 @@ var LINE_FORECAST_FROM = 7;
|
|
|
1643
1711
|
function LineChartPlaceholder({ height = 280 }) {
|
|
1644
1712
|
const toPath = (pts, from, to) => pts.slice(from, to).map((y, i) => `${(i + from) / (pts.length - 1) * 100},${y}`).join(" ");
|
|
1645
1713
|
return /* @__PURE__ */ jsxs13(AxisFrame, { height, xTicks: LINE_SERIES[0].length, children: [
|
|
1646
|
-
/* @__PURE__ */
|
|
1647
|
-
/* @__PURE__ */
|
|
1714
|
+
/* @__PURE__ */ jsx16("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 h-full w-full", children: LINE_SERIES.map((pts, s) => /* @__PURE__ */ jsxs13("g", { children: [
|
|
1715
|
+
/* @__PURE__ */ jsx16(
|
|
1648
1716
|
"polyline",
|
|
1649
1717
|
{
|
|
1650
1718
|
points: toPath(pts, 0, LINE_FORECAST_FROM + 1),
|
|
@@ -1656,7 +1724,7 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1656
1724
|
strokeLinejoin: "round"
|
|
1657
1725
|
}
|
|
1658
1726
|
),
|
|
1659
|
-
/* @__PURE__ */
|
|
1727
|
+
/* @__PURE__ */ jsx16(
|
|
1660
1728
|
"polyline",
|
|
1661
1729
|
{
|
|
1662
1730
|
points: toPath(pts, LINE_FORECAST_FROM, pts.length),
|
|
@@ -1671,7 +1739,7 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1671
1739
|
)
|
|
1672
1740
|
] }, s)) }),
|
|
1673
1741
|
LINE_SERIES.map(
|
|
1674
|
-
(pts, s) => pts.map((y, i) => /* @__PURE__ */
|
|
1742
|
+
(pts, s) => pts.map((y, i) => /* @__PURE__ */ jsx16(
|
|
1675
1743
|
"div",
|
|
1676
1744
|
{
|
|
1677
1745
|
className: "absolute h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full",
|
|
@@ -1688,16 +1756,16 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1688
1756
|
}
|
|
1689
1757
|
|
|
1690
1758
|
// src/PieChartPlaceholder.tsx
|
|
1691
|
-
import { jsx as
|
|
1759
|
+
import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1692
1760
|
var PIE_SEAMS = [0, 115, 180, 230, 262, 288, 310, 332];
|
|
1693
1761
|
function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
|
|
1694
1762
|
const r = 45;
|
|
1695
1763
|
return /* @__PURE__ */ jsxs14("div", { className: "flex w-full items-center gap-3", style: { height }, role: "presentation", "aria-hidden": "true", children: [
|
|
1696
|
-
/* @__PURE__ */
|
|
1697
|
-
/* @__PURE__ */
|
|
1764
|
+
/* @__PURE__ */ jsx17("div", { className: "flex h-full items-center justify-center", style: { width: "60%" }, children: /* @__PURE__ */ jsxs14("svg", { viewBox: "0 0 100 100", className: "h-full", style: { aspectRatio: "1 / 1" }, children: [
|
|
1765
|
+
/* @__PURE__ */ jsx17("circle", { cx: "50", cy: "50", r, fill: "var(--mr-color-subtle)" }),
|
|
1698
1766
|
PIE_SEAMS.map((deg) => {
|
|
1699
1767
|
const rad = (deg - 90) * Math.PI / 180;
|
|
1700
|
-
return /* @__PURE__ */
|
|
1768
|
+
return /* @__PURE__ */ jsx17(
|
|
1701
1769
|
"line",
|
|
1702
1770
|
{
|
|
1703
1771
|
x1: "50",
|
|
@@ -1711,12 +1779,12 @@ function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
|
|
|
1711
1779
|
);
|
|
1712
1780
|
})
|
|
1713
1781
|
] }) }),
|
|
1714
|
-
/* @__PURE__ */
|
|
1782
|
+
/* @__PURE__ */ jsx17(BlankLegend, { rows: legendRows })
|
|
1715
1783
|
] });
|
|
1716
1784
|
}
|
|
1717
1785
|
|
|
1718
1786
|
// src/StackedColumnPlaceholder.tsx
|
|
1719
|
-
import { jsx as
|
|
1787
|
+
import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1720
1788
|
var COLUMN_WEIGHTS = [20, 30, 15, 35, 24, 12, 28, 18];
|
|
1721
1789
|
function columnBands(count) {
|
|
1722
1790
|
const weights = Array.from({ length: count }, (_, i) => COLUMN_WEIGHTS[i % COLUMN_WEIGHTS.length]);
|
|
@@ -1729,7 +1797,7 @@ function StackedColumnPlaceholder({
|
|
|
1729
1797
|
legendRows = 4,
|
|
1730
1798
|
axis = false
|
|
1731
1799
|
}) {
|
|
1732
|
-
const column = /* @__PURE__ */
|
|
1800
|
+
const column = /* @__PURE__ */ jsx18("div", { className: "flex h-full flex-col overflow-hidden rounded-control bg-subtle", style: { width }, children: columnBands(legendRows).map((pct, i) => /* @__PURE__ */ jsx18(
|
|
1733
1801
|
"div",
|
|
1734
1802
|
{
|
|
1735
1803
|
style: {
|
|
@@ -1742,15 +1810,15 @@ function StackedColumnPlaceholder({
|
|
|
1742
1810
|
i
|
|
1743
1811
|
)) });
|
|
1744
1812
|
return /* @__PURE__ */ jsxs15("div", { className: "flex w-full gap-4", style: { height }, role: "presentation", "aria-hidden": "true", children: [
|
|
1745
|
-
axis ? /* @__PURE__ */
|
|
1746
|
-
/* @__PURE__ */
|
|
1813
|
+
axis ? /* @__PURE__ */ jsx18("div", { style: { width: "55%" }, children: /* @__PURE__ */ jsx18(AxisFrame, { height, xTicks: 0, children: /* @__PURE__ */ jsx18("div", { className: "flex h-full items-stretch justify-center", children: column }) }) }) : /* @__PURE__ */ jsx18("div", { className: "flex items-stretch py-1", children: column }),
|
|
1814
|
+
/* @__PURE__ */ jsx18(BlankLegend, { rows: legendRows, reverse: !axis })
|
|
1747
1815
|
] });
|
|
1748
1816
|
}
|
|
1749
1817
|
|
|
1750
1818
|
// src/Tooltip.tsx
|
|
1751
1819
|
import { useEffect as useEffect8, useId, useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState8 } from "react";
|
|
1752
1820
|
import { createPortal as createPortal3 } from "react-dom";
|
|
1753
|
-
import { jsx as
|
|
1821
|
+
import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1754
1822
|
function cx6(...parts) {
|
|
1755
1823
|
return parts.filter(Boolean).join(" ");
|
|
1756
1824
|
}
|
|
@@ -1865,7 +1933,7 @@ function Tooltip({
|
|
|
1865
1933
|
}
|
|
1866
1934
|
}
|
|
1867
1935
|
const floating = anchor != null && typeof document !== "undefined" ? createPortal3(
|
|
1868
|
-
/* @__PURE__ */
|
|
1936
|
+
/* @__PURE__ */ jsx19(
|
|
1869
1937
|
"span",
|
|
1870
1938
|
{
|
|
1871
1939
|
ref: boxRef,
|
|
@@ -1906,7 +1974,7 @@ function Tooltip({
|
|
|
1906
1974
|
}
|
|
1907
1975
|
|
|
1908
1976
|
// src/AdvertiserNoResults.tsx
|
|
1909
|
-
import { jsx as
|
|
1977
|
+
import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1910
1978
|
function AdvertiserNoResults({
|
|
1911
1979
|
query,
|
|
1912
1980
|
hint = "Try checking your spelling or searching for a broader brand name."
|
|
@@ -1917,13 +1985,13 @@ function AdvertiserNoResults({
|
|
|
1917
1985
|
query,
|
|
1918
1986
|
"\u201D"
|
|
1919
1987
|
] }),
|
|
1920
|
-
/* @__PURE__ */
|
|
1988
|
+
/* @__PURE__ */ jsx20("p", { className: "text-[12px] leading-snug text-text-tertiary", children: hint })
|
|
1921
1989
|
] });
|
|
1922
1990
|
}
|
|
1923
1991
|
|
|
1924
1992
|
// src/SelectAllVisible.tsx
|
|
1925
1993
|
import { ListChecks as ListChecks2 } from "lucide-react";
|
|
1926
|
-
import { jsx as
|
|
1994
|
+
import { jsx as jsx21, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1927
1995
|
function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
1928
1996
|
return /* @__PURE__ */ jsxs18(
|
|
1929
1997
|
"button",
|
|
@@ -1933,7 +2001,7 @@ function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
|
1933
2001
|
onClick: onToggle,
|
|
1934
2002
|
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",
|
|
1935
2003
|
children: [
|
|
1936
|
-
/* @__PURE__ */
|
|
2004
|
+
/* @__PURE__ */ jsx21(ListChecks2, { size: 14, "aria-hidden": "true" }),
|
|
1937
2005
|
allSelected ? `Deselect ${count} visible` : `Select all ${count} visible`
|
|
1938
2006
|
]
|
|
1939
2007
|
}
|
|
@@ -1942,7 +2010,7 @@ function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
|
1942
2010
|
|
|
1943
2011
|
// src/SelectedSection.tsx
|
|
1944
2012
|
import { ChevronDown as ChevronDown7 } from "lucide-react";
|
|
1945
|
-
import { jsx as
|
|
2013
|
+
import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1946
2014
|
function cx7(...parts) {
|
|
1947
2015
|
return parts.filter(Boolean).join(" ");
|
|
1948
2016
|
}
|
|
@@ -1958,14 +2026,14 @@ function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
|
|
|
1958
2026
|
"aria-expanded": open,
|
|
1959
2027
|
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",
|
|
1960
2028
|
children: [
|
|
1961
|
-
/* @__PURE__ */
|
|
2029
|
+
/* @__PURE__ */ jsx22(ChevronDown7, { size: 13, "aria-hidden": "true", className: cx7("transition-transform", !open && "-rotate-90") }),
|
|
1962
2030
|
"Selected (",
|
|
1963
2031
|
count,
|
|
1964
2032
|
")"
|
|
1965
2033
|
]
|
|
1966
2034
|
}
|
|
1967
2035
|
),
|
|
1968
|
-
open && /* @__PURE__ */
|
|
2036
|
+
open && /* @__PURE__ */ jsx22("div", { className: "flex flex-col gap-0.5", children })
|
|
1969
2037
|
] });
|
|
1970
2038
|
}
|
|
1971
2039
|
|
|
@@ -1973,7 +2041,7 @@ function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
|
|
|
1973
2041
|
import { useCallback as useCallback3, useEffect as useEffect9, useLayoutEffect as useLayoutEffect3, useMemo as useMemo3, useRef as useRef10, useState as useState9 } from "react";
|
|
1974
2042
|
import { createPortal as createPortal4 } from "react-dom";
|
|
1975
2043
|
import { Search as Search4, Plus, Info as Info2, ChevronRight as ChevronRight3, ChevronDown as ChevronDown8, Check as Check6, List, Loader2 } from "lucide-react";
|
|
1976
|
-
import { Fragment as Fragment4, jsx as
|
|
2044
|
+
import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1977
2045
|
function cx8(...parts) {
|
|
1978
2046
|
return parts.filter(Boolean).join(" ");
|
|
1979
2047
|
}
|
|
@@ -2070,10 +2138,10 @@ function SelectionPicker({
|
|
|
2070
2138
|
const rowGridCols = showInfoColumn ? "grid-cols-[36px_1fr_44px]" : "grid-cols-[36px_1fr]";
|
|
2071
2139
|
return /* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-4", children: [
|
|
2072
2140
|
helper && /* @__PURE__ */ jsxs20(Fragment4, { children: [
|
|
2073
|
-
/* @__PURE__ */
|
|
2074
|
-
/* @__PURE__ */
|
|
2141
|
+
/* @__PURE__ */ jsx23("p", { className: "text-[13px] text-text-secondary", children: helper }),
|
|
2142
|
+
/* @__PURE__ */ jsx23("hr", { className: "-mx-5 -mt-2 border-border-default sm:-mx-6" })
|
|
2075
2143
|
] }),
|
|
2076
|
-
hasAccountLists && /* @__PURE__ */
|
|
2144
|
+
hasAccountLists && /* @__PURE__ */ jsx23("div", { className: "inline-flex gap-0.5 self-start rounded-control border border-border-default bg-canvas p-0.5", children: [
|
|
2077
2145
|
{ id: "search", label: "Search", icon: Search4 },
|
|
2078
2146
|
{ id: "lists", label: "Account lists", icon: List }
|
|
2079
2147
|
].map((t) => {
|
|
@@ -2089,7 +2157,7 @@ function SelectionPicker({
|
|
|
2089
2157
|
on ? "bg-surface text-text-primary shadow-raised" : "text-text-secondary hover:text-text-primary"
|
|
2090
2158
|
),
|
|
2091
2159
|
children: [
|
|
2092
|
-
/* @__PURE__ */
|
|
2160
|
+
/* @__PURE__ */ jsx23(t.icon, { size: 14, "aria-hidden": "true" }),
|
|
2093
2161
|
t.label
|
|
2094
2162
|
]
|
|
2095
2163
|
},
|
|
@@ -2099,8 +2167,8 @@ function SelectionPicker({
|
|
|
2099
2167
|
source === "search" && /* @__PURE__ */ jsxs20("div", { className: "flex min-w-0 flex-col gap-3", children: [
|
|
2100
2168
|
/* @__PURE__ */ jsxs20("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
2101
2169
|
/* @__PURE__ */ jsxs20("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: [
|
|
2102
|
-
/* @__PURE__ */
|
|
2103
|
-
/* @__PURE__ */
|
|
2170
|
+
/* @__PURE__ */ jsx23(Search4, { size: 15, className: "text-text-secondary", "aria-hidden": "true" }),
|
|
2171
|
+
/* @__PURE__ */ jsx23(
|
|
2104
2172
|
"input",
|
|
2105
2173
|
{
|
|
2106
2174
|
value: query,
|
|
@@ -2116,7 +2184,7 @@ function SelectionPicker({
|
|
|
2116
2184
|
}
|
|
2117
2185
|
)
|
|
2118
2186
|
] }),
|
|
2119
|
-
filters.map((f) => /* @__PURE__ */
|
|
2187
|
+
filters.map((f) => /* @__PURE__ */ jsx23(
|
|
2120
2188
|
FilterDropdown,
|
|
2121
2189
|
{
|
|
2122
2190
|
filter: f,
|
|
@@ -2129,10 +2197,10 @@ function SelectionPicker({
|
|
|
2129
2197
|
toolbarExtra
|
|
2130
2198
|
] }),
|
|
2131
2199
|
!hasSearched ? /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
|
|
2132
|
-
/* @__PURE__ */
|
|
2200
|
+
/* @__PURE__ */ jsx23("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ jsx23(Search4, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
|
|
2133
2201
|
/* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1", children: [
|
|
2134
|
-
/* @__PURE__ */
|
|
2135
|
-
/* @__PURE__ */
|
|
2202
|
+
/* @__PURE__ */ jsx23("p", { className: "text-[14px] font-semibold text-text-primary", children: "Search to get started" }),
|
|
2203
|
+
/* @__PURE__ */ jsx23("p", { className: "text-[13px] text-text-tertiary", children: "Use the search or filters above to find and add options." })
|
|
2136
2204
|
] })
|
|
2137
2205
|
] }) : /* @__PURE__ */ jsxs20("div", { className: "overflow-hidden rounded-control border border-border-default", children: [
|
|
2138
2206
|
/* @__PURE__ */ jsxs20(
|
|
@@ -2143,7 +2211,7 @@ function SelectionPicker({
|
|
|
2143
2211
|
rowGridCols
|
|
2144
2212
|
),
|
|
2145
2213
|
children: [
|
|
2146
|
-
/* @__PURE__ */
|
|
2214
|
+
/* @__PURE__ */ jsx23(
|
|
2147
2215
|
CheckBox,
|
|
2148
2216
|
{
|
|
2149
2217
|
checked: allSelected,
|
|
@@ -2154,12 +2222,12 @@ function SelectionPicker({
|
|
|
2154
2222
|
testId: testIdPrefix && `${testIdPrefix}-select-all`
|
|
2155
2223
|
}
|
|
2156
2224
|
),
|
|
2157
|
-
/* @__PURE__ */
|
|
2158
|
-
showInfoColumn && /* @__PURE__ */
|
|
2225
|
+
/* @__PURE__ */ jsx23("div", { className: cx8("grid gap-2", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ jsx23("span", { className: c.className, children: c.header }, c.key)) }),
|
|
2226
|
+
showInfoColumn && /* @__PURE__ */ jsx23("span", { className: "text-right", children: "Info" })
|
|
2159
2227
|
]
|
|
2160
2228
|
}
|
|
2161
2229
|
),
|
|
2162
|
-
/* @__PURE__ */
|
|
2230
|
+
/* @__PURE__ */ jsx23("div", { className: "max-h-[360px] overflow-y-auto", children: loading ? /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-center py-6", role: "status", "aria-label": "Loading", children: /* @__PURE__ */ jsx23(Loader2, { size: 18, className: "animate-spin text-text-tertiary", "aria-hidden": "true" }) }) : error ? /* @__PURE__ */ jsx23("p", { className: "px-3 py-8 text-center text-[13px] text-text-tertiary", children: errorMessage }) : rows.length === 0 ? /* @__PURE__ */ jsx23("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) => {
|
|
2163
2231
|
const isSel = selectedIds.has(row.id);
|
|
2164
2232
|
const isLocked = lockedIds?.has(row.id) ?? false;
|
|
2165
2233
|
const kids = getChildren?.(row);
|
|
@@ -2177,7 +2245,7 @@ function SelectionPicker({
|
|
|
2177
2245
|
!isLocked && isSel && "opacity-60"
|
|
2178
2246
|
),
|
|
2179
2247
|
children: [
|
|
2180
|
-
isLocked ? /* @__PURE__ */
|
|
2248
|
+
isLocked ? /* @__PURE__ */ jsx23("span", { "aria-hidden": "true" }) : /* @__PURE__ */ jsx23(
|
|
2181
2249
|
CheckBox,
|
|
2182
2250
|
{
|
|
2183
2251
|
checked: isSel,
|
|
@@ -2186,8 +2254,8 @@ function SelectionPicker({
|
|
|
2186
2254
|
testId: testIdPrefix && `${testIdPrefix}-row-${slug4(row.id)}`
|
|
2187
2255
|
}
|
|
2188
2256
|
),
|
|
2189
|
-
/* @__PURE__ */
|
|
2190
|
-
showInfoColumn && /* @__PURE__ */
|
|
2257
|
+
/* @__PURE__ */ jsx23("div", { className: cx8("grid gap-2 text-[13px] text-text-primary", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ jsx23("span", { className: cx8("truncate", c.className), children: c.render(row) }, c.key)) }),
|
|
2258
|
+
showInfoColumn && /* @__PURE__ */ jsx23("div", { className: "flex items-center justify-end", children: kids && kids.length > 0 ? /* @__PURE__ */ jsx23(
|
|
2191
2259
|
"button",
|
|
2192
2260
|
{
|
|
2193
2261
|
type: "button",
|
|
@@ -2201,27 +2269,27 @@ function SelectionPicker({
|
|
|
2201
2269
|
});
|
|
2202
2270
|
},
|
|
2203
2271
|
className: "flex h-7 w-7 items-center justify-center rounded-control text-text-secondary hover:bg-canvas hover:text-text-primary",
|
|
2204
|
-
children: /* @__PURE__ */
|
|
2272
|
+
children: /* @__PURE__ */ jsx23(ChevronRight3, { size: 15, className: cx8("transition-transform", isOpen && "rotate-90") })
|
|
2205
2273
|
}
|
|
2206
|
-
) : /* @__PURE__ */
|
|
2274
|
+
) : /* @__PURE__ */ jsx23(
|
|
2207
2275
|
"span",
|
|
2208
2276
|
{
|
|
2209
2277
|
className: "flex h-7 w-7 items-center justify-center text-text-tertiary",
|
|
2210
2278
|
title: "No additional details",
|
|
2211
|
-
children: /* @__PURE__ */
|
|
2279
|
+
children: /* @__PURE__ */ jsx23(Info2, { size: 14 })
|
|
2212
2280
|
}
|
|
2213
2281
|
) })
|
|
2214
2282
|
]
|
|
2215
2283
|
}
|
|
2216
2284
|
),
|
|
2217
|
-
isOpen && kids && /* @__PURE__ */
|
|
2285
|
+
isOpen && kids && /* @__PURE__ */ jsx23("div", { className: "bg-canvas/60 pb-1.5 pl-10 pr-3", children: kids.map((kid) => {
|
|
2218
2286
|
const kidSel = selectedIds.has(kid.id);
|
|
2219
2287
|
return /* @__PURE__ */ jsxs20(
|
|
2220
2288
|
"div",
|
|
2221
2289
|
{
|
|
2222
2290
|
className: "flex items-center justify-between gap-2 border-t border-border-default/40 py-2 first:border-t-0",
|
|
2223
2291
|
children: [
|
|
2224
|
-
/* @__PURE__ */
|
|
2292
|
+
/* @__PURE__ */ jsx23("span", { className: "truncate text-[13px] text-text-secondary", children: kid.name }),
|
|
2225
2293
|
/* @__PURE__ */ jsxs20(
|
|
2226
2294
|
"button",
|
|
2227
2295
|
{
|
|
@@ -2233,7 +2301,7 @@ function SelectionPicker({
|
|
|
2233
2301
|
kidSel ? "text-text-tertiary" : "text-text-link hover:bg-subtle"
|
|
2234
2302
|
),
|
|
2235
2303
|
children: [
|
|
2236
|
-
kidSel ? /* @__PURE__ */
|
|
2304
|
+
kidSel ? /* @__PURE__ */ jsx23(Check6, { size: 13 }) : /* @__PURE__ */ jsx23(Plus, { size: 13 }),
|
|
2237
2305
|
kidSel ? "Added" : "Add"
|
|
2238
2306
|
]
|
|
2239
2307
|
}
|
|
@@ -2254,7 +2322,7 @@ function SelectionPicker({
|
|
|
2254
2322
|
"data-testid": testIdPrefix && `${testIdPrefix}-load-more`,
|
|
2255
2323
|
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",
|
|
2256
2324
|
children: [
|
|
2257
|
-
loadingMore ? /* @__PURE__ */
|
|
2325
|
+
loadingMore ? /* @__PURE__ */ jsx23(Loader2, { size: 13, className: "animate-spin", "aria-hidden": "true" }) : null,
|
|
2258
2326
|
loadingMore ? "Loading\u2026" : "Load more"
|
|
2259
2327
|
]
|
|
2260
2328
|
}
|
|
@@ -2262,9 +2330,9 @@ function SelectionPicker({
|
|
|
2262
2330
|
] })
|
|
2263
2331
|
] }),
|
|
2264
2332
|
source === "lists" && /* @__PURE__ */ jsxs20("div", { className: "flex min-w-0 flex-col gap-3", children: [
|
|
2265
|
-
/* @__PURE__ */
|
|
2333
|
+
/* @__PURE__ */ jsx23("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." }),
|
|
2266
2334
|
accountLists && accountLists.length > 0 ? /* @__PURE__ */ jsxs20(Fragment4, { children: [
|
|
2267
|
-
/* @__PURE__ */
|
|
2335
|
+
/* @__PURE__ */ jsx23(ScrollFade, { className: "flex max-h-[396px] flex-col gap-2 overflow-y-auto pr-0.5", children: accountLists.map((list) => {
|
|
2268
2336
|
const on = (selectedListIds ?? []).includes(list.id);
|
|
2269
2337
|
return /* @__PURE__ */ jsxs20(
|
|
2270
2338
|
"button",
|
|
@@ -2278,18 +2346,18 @@ function SelectionPicker({
|
|
|
2278
2346
|
on ? "border-brand-primaryAction bg-brand-primarySoft" : "border-border-default bg-surface hover:bg-subtle"
|
|
2279
2347
|
),
|
|
2280
2348
|
children: [
|
|
2281
|
-
/* @__PURE__ */
|
|
2349
|
+
/* @__PURE__ */ jsx23(
|
|
2282
2350
|
"span",
|
|
2283
2351
|
{
|
|
2284
2352
|
className: cx8(
|
|
2285
2353
|
"flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
|
|
2286
2354
|
on ? "text-brand-primaryAction" : "text-text-secondary"
|
|
2287
2355
|
),
|
|
2288
|
-
children: on ? /* @__PURE__ */
|
|
2356
|
+
children: on ? /* @__PURE__ */ jsx23(Check6, { size: 16 }) : /* @__PURE__ */ jsx23(Plus, { size: 16 })
|
|
2289
2357
|
}
|
|
2290
2358
|
),
|
|
2291
2359
|
/* @__PURE__ */ jsxs20("span", { className: "min-w-0 flex-1", children: [
|
|
2292
|
-
/* @__PURE__ */
|
|
2360
|
+
/* @__PURE__ */ jsx23("span", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsx23("span", { className: "truncate text-[14px] font-medium text-text-primary", children: list.name }) }),
|
|
2293
2361
|
/* @__PURE__ */ jsxs20("span", { className: "block truncate text-[12px] text-text-secondary", children: [
|
|
2294
2362
|
list.count,
|
|
2295
2363
|
" accounts \xB7 ",
|
|
@@ -2298,7 +2366,7 @@ function SelectionPicker({
|
|
|
2298
2366
|
formatListDate(list.updatedAt)
|
|
2299
2367
|
] })
|
|
2300
2368
|
] }),
|
|
2301
|
-
/* @__PURE__ */
|
|
2369
|
+
/* @__PURE__ */ jsx23("span", { className: cx8("shrink-0 text-[12px] font-medium", on ? "text-brand-primaryAction" : "text-text-secondary"), children: on ? "Added" : "Add" })
|
|
2302
2370
|
]
|
|
2303
2371
|
},
|
|
2304
2372
|
list.id
|
|
@@ -2317,10 +2385,10 @@ function SelectionPicker({
|
|
|
2317
2385
|
}
|
|
2318
2386
|
)
|
|
2319
2387
|
] }) : /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
|
|
2320
|
-
/* @__PURE__ */
|
|
2388
|
+
/* @__PURE__ */ jsx23("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ jsx23(List, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
|
|
2321
2389
|
/* @__PURE__ */ jsxs20("div", { className: "flex flex-col gap-1", children: [
|
|
2322
|
-
/* @__PURE__ */
|
|
2323
|
-
/* @__PURE__ */
|
|
2390
|
+
/* @__PURE__ */ jsx23("p", { className: "text-[14px] font-semibold text-text-primary", children: "No account lists yet" }),
|
|
2391
|
+
/* @__PURE__ */ jsx23("p", { className: "text-[13px] text-text-tertiary", children: "Account lists set up for you will appear here." })
|
|
2324
2392
|
] })
|
|
2325
2393
|
] })
|
|
2326
2394
|
] })
|
|
@@ -2352,7 +2420,7 @@ function ScrollFade({ className, children }) {
|
|
|
2352
2420
|
[sync]
|
|
2353
2421
|
);
|
|
2354
2422
|
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;
|
|
2355
|
-
return /* @__PURE__ */
|
|
2423
|
+
return /* @__PURE__ */ jsx23("div", { ref: attach, onScroll: sync, className, style: { maskImage: mask, WebkitMaskImage: mask }, children });
|
|
2356
2424
|
}
|
|
2357
2425
|
function formatListDate(iso) {
|
|
2358
2426
|
try {
|
|
@@ -2415,7 +2483,7 @@ function FilterDropdown({
|
|
|
2415
2483
|
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",
|
|
2416
2484
|
children: [
|
|
2417
2485
|
label,
|
|
2418
|
-
/* @__PURE__ */
|
|
2486
|
+
/* @__PURE__ */ jsx23(ChevronDown8, { size: 13, "aria-hidden": "true", className: cx8("transition-transform", open && "rotate-180") })
|
|
2419
2487
|
]
|
|
2420
2488
|
}
|
|
2421
2489
|
),
|
|
@@ -2430,8 +2498,8 @@ function FilterDropdown({
|
|
|
2430
2498
|
className: "fixed z-[80] min-w-[220px] rounded-card border border-border-default bg-surface p-2 shadow-overlay",
|
|
2431
2499
|
children: [
|
|
2432
2500
|
searchable && /* @__PURE__ */ jsxs20("div", { className: "mb-1.5 flex h-8 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
|
|
2433
|
-
/* @__PURE__ */
|
|
2434
|
-
/* @__PURE__ */
|
|
2501
|
+
/* @__PURE__ */ jsx23(Search4, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
|
|
2502
|
+
/* @__PURE__ */ jsx23(
|
|
2435
2503
|
"input",
|
|
2436
2504
|
{
|
|
2437
2505
|
autoFocus: true,
|
|
@@ -2442,14 +2510,14 @@ function FilterDropdown({
|
|
|
2442
2510
|
}
|
|
2443
2511
|
)
|
|
2444
2512
|
] }),
|
|
2445
|
-
/* @__PURE__ */
|
|
2513
|
+
/* @__PURE__ */ jsx23("div", { className: cx8("flex flex-col gap-0.5", searchable && "max-h-[240px] overflow-y-auto"), children: shownOptions.length === 0 ? /* @__PURE__ */ jsx23("p", { className: "px-2 py-3 text-center text-[12px] text-text-secondary", children: "No matches." }) : shownOptions.map((opt) => {
|
|
2446
2514
|
const on = active.has(opt);
|
|
2447
2515
|
return /* @__PURE__ */ jsxs20(
|
|
2448
2516
|
"label",
|
|
2449
2517
|
{
|
|
2450
2518
|
className: "flex cursor-pointer items-center gap-2 rounded-control px-2 py-1.5 text-[13px] text-text-primary hover:bg-subtle",
|
|
2451
2519
|
children: [
|
|
2452
|
-
/* @__PURE__ */
|
|
2520
|
+
/* @__PURE__ */ jsx23(
|
|
2453
2521
|
CheckBox,
|
|
2454
2522
|
{
|
|
2455
2523
|
checked: on,
|
|
@@ -2480,7 +2548,7 @@ function gridForColumns(columns) {
|
|
|
2480
2548
|
|
|
2481
2549
|
// src/PublisherBreakdownList.tsx
|
|
2482
2550
|
import { useState as useState10 } from "react";
|
|
2483
|
-
import { jsx as
|
|
2551
|
+
import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2484
2552
|
function cx9(...parts) {
|
|
2485
2553
|
return parts.filter(Boolean).join(" ");
|
|
2486
2554
|
}
|
|
@@ -2495,7 +2563,7 @@ function initials(name) {
|
|
|
2495
2563
|
return name.replace(/[^a-zA-Z0-9]/g, "").slice(0, 2).toUpperCase();
|
|
2496
2564
|
}
|
|
2497
2565
|
function Monogram({ name, size = 28 }) {
|
|
2498
|
-
return /* @__PURE__ */
|
|
2566
|
+
return /* @__PURE__ */ jsx24(
|
|
2499
2567
|
"span",
|
|
2500
2568
|
{
|
|
2501
2569
|
"aria-hidden": "true",
|
|
@@ -2506,12 +2574,12 @@ function Monogram({ name, size = 28 }) {
|
|
|
2506
2574
|
);
|
|
2507
2575
|
}
|
|
2508
2576
|
function BreakdownTag({ children }) {
|
|
2509
|
-
return /* @__PURE__ */
|
|
2577
|
+
return /* @__PURE__ */ jsx24("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 });
|
|
2510
2578
|
}
|
|
2511
2579
|
function DelayedTip({ label, children }) {
|
|
2512
2580
|
return /* @__PURE__ */ jsxs21("span", { className: "group/dt relative inline-flex", tabIndex: 0, "aria-label": label, children: [
|
|
2513
2581
|
children,
|
|
2514
|
-
/* @__PURE__ */
|
|
2582
|
+
/* @__PURE__ */ jsx24(
|
|
2515
2583
|
"span",
|
|
2516
2584
|
{
|
|
2517
2585
|
role: "tooltip",
|
|
@@ -2526,11 +2594,11 @@ var COL_PREVIOUS = 76;
|
|
|
2526
2594
|
var COL_YOY = 44;
|
|
2527
2595
|
function MetricListHeader({ className }) {
|
|
2528
2596
|
return /* @__PURE__ */ jsxs21("div", { className: cx9("flex items-baseline gap-2 pb-2", className), children: [
|
|
2529
|
-
/* @__PURE__ */
|
|
2597
|
+
/* @__PURE__ */ jsx24("span", { className: "flex-1" }),
|
|
2530
2598
|
/* @__PURE__ */ jsxs21("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
|
|
2531
|
-
/* @__PURE__ */
|
|
2532
|
-
/* @__PURE__ */
|
|
2533
|
-
/* @__PURE__ */
|
|
2599
|
+
/* @__PURE__ */ jsx24("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_CURRENT }, children: "Current" }),
|
|
2600
|
+
/* @__PURE__ */ jsx24(DelayedTip, { label: "Spend during the same time period one year ago.", children: /* @__PURE__ */ jsx24("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_PREVIOUS }, children: "Previous" }) }),
|
|
2601
|
+
/* @__PURE__ */ jsx24(DelayedTip, { label: "Percent change from this time period vs. the same time one year ago.", children: /* @__PURE__ */ jsx24("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_YOY }, children: "YoY" }) })
|
|
2534
2602
|
] })
|
|
2535
2603
|
] });
|
|
2536
2604
|
}
|
|
@@ -2538,9 +2606,9 @@ function MetricCells({ spendN, yoy }) {
|
|
|
2538
2606
|
const prior = priorYearAmt(spendN, yoy);
|
|
2539
2607
|
const up = yoy !== "NEW" && yoy >= 0;
|
|
2540
2608
|
return /* @__PURE__ */ jsxs21("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
|
|
2541
|
-
/* @__PURE__ */
|
|
2542
|
-
/* @__PURE__ */
|
|
2543
|
-
/* @__PURE__ */
|
|
2609
|
+
/* @__PURE__ */ jsx24("span", { className: "text-right text-[12px] font-bold tabular-nums text-text-primary", style: { width: COL_CURRENT }, children: fmtM(spendN) }),
|
|
2610
|
+
/* @__PURE__ */ jsx24("span", { className: "text-right text-[12px] font-normal tabular-nums text-text-primary", style: { width: COL_PREVIOUS }, children: prior ?? "\u2014" }),
|
|
2611
|
+
/* @__PURE__ */ jsx24("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ jsx24("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-[10px] font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ jsxs21("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
|
|
2544
2612
|
up ? "+" : "\u2212",
|
|
2545
2613
|
Math.abs(yoy),
|
|
2546
2614
|
"%"
|
|
@@ -2553,22 +2621,22 @@ function PublisherBreakdownList({ rows, defaultVisibleCount = 10, padded = true,
|
|
|
2553
2621
|
const rowPad = padded ? "px-5" : "";
|
|
2554
2622
|
return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col", children: [
|
|
2555
2623
|
/* @__PURE__ */ jsxs21("div", { className: "flex flex-col", children: [
|
|
2556
|
-
/* @__PURE__ */
|
|
2624
|
+
/* @__PURE__ */ jsx24(MetricListHeader, { className: rowPad }),
|
|
2557
2625
|
visible.map((p) => /* @__PURE__ */ jsxs21("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: [
|
|
2558
2626
|
/* @__PURE__ */ jsxs21("div", { className: "flex min-w-0 items-center gap-2.5", children: [
|
|
2559
|
-
renderLogo ? renderLogo(p) : /* @__PURE__ */
|
|
2627
|
+
renderLogo ? renderLogo(p) : /* @__PURE__ */ jsx24(Monogram, { name: p.brand, size: 28 }),
|
|
2560
2628
|
/* @__PURE__ */ jsxs21("div", { className: "min-w-0", children: [
|
|
2561
2629
|
/* @__PURE__ */ jsxs21("div", { className: "flex flex-wrap items-center gap-1.5", children: [
|
|
2562
|
-
/* @__PURE__ */
|
|
2563
|
-
p.tags.map((t) => /* @__PURE__ */
|
|
2630
|
+
/* @__PURE__ */ jsx24("span", { className: "text-[14px] font-semibold text-text-primary", children: p.brand }),
|
|
2631
|
+
p.tags.map((t) => /* @__PURE__ */ jsx24(BreakdownTag, { children: t }, t))
|
|
2564
2632
|
] }),
|
|
2565
|
-
/* @__PURE__ */
|
|
2633
|
+
/* @__PURE__ */ jsx24("div", { className: "truncate text-[11.5px] text-text-tertiary", children: p.owner })
|
|
2566
2634
|
] })
|
|
2567
2635
|
] }),
|
|
2568
|
-
/* @__PURE__ */
|
|
2636
|
+
/* @__PURE__ */ jsx24(MetricCells, { spendN: p.spendN, yoy: p.yoy })
|
|
2569
2637
|
] }, p.brand))
|
|
2570
2638
|
] }),
|
|
2571
|
-
rows.length > defaultVisibleCount && (viewAllHref ? /* @__PURE__ */
|
|
2639
|
+
rows.length > defaultVisibleCount && (viewAllHref ? /* @__PURE__ */ jsx24("div", { className: cx9("border-t border-border-default py-3", rowPad), children: /* @__PURE__ */ jsx24("a", { href: viewAllHref, className: "text-[12px] font-semibold text-text-link hover:underline", children: "See all publishers" }) }) : /* @__PURE__ */ jsxs21("div", { className: cx9("flex items-center gap-2 border-t border-border-default py-3 text-[12px] text-text-tertiary", rowPad), children: [
|
|
2572
2640
|
/* @__PURE__ */ jsxs21("span", { children: [
|
|
2573
2641
|
"Showing ",
|
|
2574
2642
|
visible.length,
|
|
@@ -2579,7 +2647,7 @@ function PublisherBreakdownList({ rows, defaultVisibleCount = 10, padded = true,
|
|
|
2579
2647
|
"See all (",
|
|
2580
2648
|
rows.length - defaultVisibleCount,
|
|
2581
2649
|
" more)"
|
|
2582
|
-
] }) : /* @__PURE__ */
|
|
2650
|
+
] }) : /* @__PURE__ */ jsx24("button", { type: "button", onClick: () => setShowAll(false), className: "font-semibold text-text-link hover:underline", children: "Show less" })
|
|
2583
2651
|
] }))
|
|
2584
2652
|
] });
|
|
2585
2653
|
}
|
|
@@ -2589,7 +2657,7 @@ import { forwardRef as forwardRef2 } from "react";
|
|
|
2589
2657
|
import { Slot } from "@radix-ui/react-slot";
|
|
2590
2658
|
import { cva } from "class-variance-authority";
|
|
2591
2659
|
import { Loader2 as Loader22 } from "lucide-react";
|
|
2592
|
-
import { jsx as
|
|
2660
|
+
import { jsx as jsx25, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2593
2661
|
var buttonVariants = cva(
|
|
2594
2662
|
"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",
|
|
2595
2663
|
{
|
|
@@ -2626,7 +2694,7 @@ var Button = forwardRef2(
|
|
|
2626
2694
|
"aria-busy": loading || void 0,
|
|
2627
2695
|
...props,
|
|
2628
2696
|
children: [
|
|
2629
|
-
loading && /* @__PURE__ */
|
|
2697
|
+
loading && /* @__PURE__ */ jsx25(Loader22, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }),
|
|
2630
2698
|
children
|
|
2631
2699
|
]
|
|
2632
2700
|
}
|
|
@@ -2636,7 +2704,7 @@ var Button = forwardRef2(
|
|
|
2636
2704
|
Button.displayName = "Button";
|
|
2637
2705
|
|
|
2638
2706
|
// src/FilterDropdownFooter.tsx
|
|
2639
|
-
import { jsx as
|
|
2707
|
+
import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2640
2708
|
function FilterDropdownFooter({
|
|
2641
2709
|
onClear,
|
|
2642
2710
|
onApply,
|
|
@@ -2651,8 +2719,8 @@ function FilterDropdownFooter({
|
|
|
2651
2719
|
onClear ? "justify-between" : "justify-end"
|
|
2652
2720
|
),
|
|
2653
2721
|
children: [
|
|
2654
|
-
onClear && /* @__PURE__ */
|
|
2655
|
-
/* @__PURE__ */
|
|
2722
|
+
onClear && /* @__PURE__ */ jsx26(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClear, children: clearLabel }),
|
|
2723
|
+
/* @__PURE__ */ jsx26(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, children: applyLabel })
|
|
2656
2724
|
]
|
|
2657
2725
|
}
|
|
2658
2726
|
);
|
|
@@ -2661,7 +2729,7 @@ function FilterDropdownFooter({
|
|
|
2661
2729
|
// src/NameListModal.tsx
|
|
2662
2730
|
import { useEffect as useEffect10, useState as useState11 } from "react";
|
|
2663
2731
|
import { createPortal as createPortal5 } from "react-dom";
|
|
2664
|
-
import { jsx as
|
|
2732
|
+
import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2665
2733
|
function NameListModal({
|
|
2666
2734
|
title,
|
|
2667
2735
|
initialName,
|
|
@@ -2686,7 +2754,7 @@ function NameListModal({
|
|
|
2686
2754
|
// bg-scrim, not a literal: design-tokens gained a scrim token in 2.5.0.
|
|
2687
2755
|
// No in-data-[theme=dark] override needed any more -- the token redefines
|
|
2688
2756
|
// itself under that attribute in dark.css, so one class covers both themes.
|
|
2689
|
-
/* @__PURE__ */
|
|
2757
|
+
/* @__PURE__ */ jsx27(
|
|
2690
2758
|
"div",
|
|
2691
2759
|
{
|
|
2692
2760
|
className: "fixed inset-0 z-70 flex items-center justify-center bg-scrim px-4",
|
|
@@ -2699,10 +2767,10 @@ function NameListModal({
|
|
|
2699
2767
|
"aria-label": title,
|
|
2700
2768
|
className: "w-full max-w-[420px] rounded-card border border-border-default bg-surface p-5 shadow-overlay",
|
|
2701
2769
|
children: [
|
|
2702
|
-
/* @__PURE__ */
|
|
2770
|
+
/* @__PURE__ */ jsx27("h2", { className: "text-[16px] font-semibold text-text-primary", children: title }),
|
|
2703
2771
|
/* @__PURE__ */ jsxs24("div", { className: "mt-4 flex flex-col gap-1.5", children: [
|
|
2704
|
-
/* @__PURE__ */
|
|
2705
|
-
/* @__PURE__ */
|
|
2772
|
+
/* @__PURE__ */ jsx27("label", { htmlFor: "account-list-name", className: "text-[12px] font-medium text-text-secondary", children: fieldLabel }),
|
|
2773
|
+
/* @__PURE__ */ jsx27(
|
|
2706
2774
|
"input",
|
|
2707
2775
|
{
|
|
2708
2776
|
id: "account-list-name",
|
|
@@ -2714,13 +2782,13 @@ function NameListModal({
|
|
|
2714
2782
|
}
|
|
2715
2783
|
)
|
|
2716
2784
|
] }),
|
|
2717
|
-
options && options.length > 0 && /* @__PURE__ */
|
|
2718
|
-
/* @__PURE__ */
|
|
2785
|
+
options && options.length > 0 && /* @__PURE__ */ jsx27("div", { className: "mt-4 flex flex-col gap-2.5", children: options.map((o) => /* @__PURE__ */ jsxs24("label", { className: "flex cursor-pointer items-center gap-2.5 text-[13px] text-text-primary", children: [
|
|
2786
|
+
/* @__PURE__ */ jsx27(CheckBox, { checked: !!checked[o.key], onChange: () => toggle(o.key), ariaLabel: o.label }),
|
|
2719
2787
|
o.label
|
|
2720
2788
|
] }, o.key)) }),
|
|
2721
2789
|
/* @__PURE__ */ jsxs24("div", { className: "mt-5 flex items-center justify-end gap-2", children: [
|
|
2722
|
-
/* @__PURE__ */
|
|
2723
|
-
/* @__PURE__ */
|
|
2790
|
+
/* @__PURE__ */ jsx27(Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }),
|
|
2791
|
+
/* @__PURE__ */ jsx27(Button, { disabled: !name.trim(), onClick: () => onSubmit(name.trim(), checked), children: submitLabel })
|
|
2724
2792
|
] })
|
|
2725
2793
|
]
|
|
2726
2794
|
}
|
|
@@ -2732,7 +2800,7 @@ function NameListModal({
|
|
|
2732
2800
|
}
|
|
2733
2801
|
|
|
2734
2802
|
// src/ChipTrigger.tsx
|
|
2735
|
-
import { jsx as
|
|
2803
|
+
import { jsx as jsx28, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2736
2804
|
function chipTriggerClass(variant = "box") {
|
|
2737
2805
|
return cn(
|
|
2738
2806
|
"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",
|
|
@@ -2744,12 +2812,12 @@ function chipTriggerClass(variant = "box") {
|
|
|
2744
2812
|
}
|
|
2745
2813
|
function ChipContent({ caption, value, icon }) {
|
|
2746
2814
|
const stack = /* @__PURE__ */ jsxs25("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
2747
|
-
/* @__PURE__ */
|
|
2748
|
-
/* @__PURE__ */
|
|
2815
|
+
/* @__PURE__ */ jsx28("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
|
|
2816
|
+
/* @__PURE__ */ jsx28("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
2749
2817
|
] });
|
|
2750
2818
|
if (icon) {
|
|
2751
2819
|
return /* @__PURE__ */ jsxs25("span", { className: "flex items-center gap-2", children: [
|
|
2752
|
-
/* @__PURE__ */
|
|
2820
|
+
/* @__PURE__ */ jsx28("span", { className: "shrink-0 text-text-tertiary", children: icon }),
|
|
2753
2821
|
stack
|
|
2754
2822
|
] });
|
|
2755
2823
|
}
|
|
@@ -2758,11 +2826,11 @@ function ChipContent({ caption, value, icon }) {
|
|
|
2758
2826
|
|
|
2759
2827
|
// src/FilterChipBar.tsx
|
|
2760
2828
|
import { CircleSlash, X as X3 } from "lucide-react";
|
|
2761
|
-
import { jsx as
|
|
2829
|
+
import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2762
2830
|
function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
|
|
2763
2831
|
if (chips.length === 0) return null;
|
|
2764
2832
|
return /* @__PURE__ */ jsxs26("div", { className: "flex flex-wrap items-center gap-1.5 border-t border-border-default pt-2.5", children: [
|
|
2765
|
-
chips.map((c) => /* @__PURE__ */
|
|
2833
|
+
chips.map((c) => /* @__PURE__ */ jsx29(
|
|
2766
2834
|
Chip,
|
|
2767
2835
|
{
|
|
2768
2836
|
label: c.label,
|
|
@@ -2772,7 +2840,7 @@ function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
|
|
|
2772
2840
|
},
|
|
2773
2841
|
c.key
|
|
2774
2842
|
)),
|
|
2775
|
-
/* @__PURE__ */
|
|
2843
|
+
/* @__PURE__ */ jsx29("button", { type: "button", onClick: onClearAll, className: "ml-1 text-[12px] font-medium text-text-link hover:underline", children: "Clear all" })
|
|
2776
2844
|
] });
|
|
2777
2845
|
}
|
|
2778
2846
|
function Chip({
|
|
@@ -2794,22 +2862,22 @@ function Chip({
|
|
|
2794
2862
|
) : "bg-subtle text-text-secondary ring-transparent group-hover:bg-border-default group-hover:text-text-primary group-hover:ring-border-interactive"
|
|
2795
2863
|
),
|
|
2796
2864
|
children: [
|
|
2797
|
-
parked && /* @__PURE__ */
|
|
2865
|
+
parked && /* @__PURE__ */ jsx29(CircleSlash, { size: 11, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
|
|
2798
2866
|
label,
|
|
2799
|
-
/* @__PURE__ */
|
|
2867
|
+
/* @__PURE__ */ jsx29(
|
|
2800
2868
|
"button",
|
|
2801
2869
|
{
|
|
2802
2870
|
type: "button",
|
|
2803
2871
|
onClick: onRemove,
|
|
2804
2872
|
"aria-label": `Remove ${groupLabel}: ${label}`,
|
|
2805
2873
|
className: "text-text-tertiary transition-colors hover:text-text-primary",
|
|
2806
|
-
children: /* @__PURE__ */
|
|
2874
|
+
children: /* @__PURE__ */ jsx29(X3, { size: 12 })
|
|
2807
2875
|
}
|
|
2808
2876
|
)
|
|
2809
2877
|
]
|
|
2810
2878
|
}
|
|
2811
2879
|
),
|
|
2812
|
-
/* @__PURE__ */
|
|
2880
|
+
/* @__PURE__ */ jsx29(
|
|
2813
2881
|
"span",
|
|
2814
2882
|
{
|
|
2815
2883
|
role: "tooltip",
|
|
@@ -2822,7 +2890,7 @@ function Chip({
|
|
|
2822
2890
|
|
|
2823
2891
|
// src/SortButton.tsx
|
|
2824
2892
|
import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
|
|
2825
|
-
import { jsx as
|
|
2893
|
+
import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2826
2894
|
function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
|
|
2827
2895
|
const active = !disabled && sort.key === sortKey;
|
|
2828
2896
|
return /* @__PURE__ */ jsxs27(
|
|
@@ -2835,12 +2903,25 @@ function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
|
|
|
2835
2903
|
className: cn(
|
|
2836
2904
|
// text-left overrides the UA default on <button>, which would centre a
|
|
2837
2905
|
// label that wraps onto two lines, out of step with the column under it.
|
|
2838
|
-
|
|
2906
|
+
// `uppercase` is NOT this control imposing a treatment -- it is
|
|
2907
|
+
// restoring one. Every table header row sets uppercase on the <tr>,
|
|
2908
|
+
// and a <button> does not inherit text-transform from its parent
|
|
2909
|
+
// (measured: the <th> computes `uppercase`, the button inside it
|
|
2910
|
+
// computes `none`), so without this a sortable label renders
|
|
2911
|
+
// sentence case beside caps neighbours in the same band.
|
|
2912
|
+
//
|
|
2913
|
+
// Letter-spacing DOES inherit, which is why no tracking is set here.
|
|
2914
|
+
// This control used to set its own `tracking-wide` while every
|
|
2915
|
+
// header row sets `tracking-wider`, so sortable labels rendered
|
|
2916
|
+
// subtly tighter than the fixed headers next to them. A control
|
|
2917
|
+
// should carry exactly the properties that do not inherit, and
|
|
2918
|
+
// nothing more.
|
|
2919
|
+
"group inline-flex items-center gap-1 text-left uppercase transition-colors",
|
|
2839
2920
|
!disabled && "hover:text-text-primary"
|
|
2840
2921
|
),
|
|
2841
2922
|
children: [
|
|
2842
2923
|
label,
|
|
2843
|
-
!disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */
|
|
2924
|
+
!disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */ jsx30(ArrowUp, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ jsx30(ArrowDown, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ jsx30(
|
|
2844
2925
|
ArrowUpDown,
|
|
2845
2926
|
{
|
|
2846
2927
|
size: 12,
|
|
@@ -2864,7 +2945,7 @@ function sortProp(sort) {
|
|
|
2864
2945
|
|
|
2865
2946
|
// src/Pager.tsx
|
|
2866
2947
|
import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight4 } from "lucide-react";
|
|
2867
|
-
import { jsx as
|
|
2948
|
+
import { jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2868
2949
|
function pageWindow(current, total) {
|
|
2869
2950
|
if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
|
|
2870
2951
|
const keep = /* @__PURE__ */ new Set([1, total, current, current - 1, current + 1]);
|
|
@@ -2881,7 +2962,7 @@ function pageWindow(current, total) {
|
|
|
2881
2962
|
function Pager({ page, totalPages, onPage }) {
|
|
2882
2963
|
const btn = "flex h-8 min-w-8 items-center justify-center rounded-control px-2 text-[13px] transition-colors";
|
|
2883
2964
|
return /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-1", children: [
|
|
2884
|
-
/* @__PURE__ */
|
|
2965
|
+
/* @__PURE__ */ jsx31(
|
|
2885
2966
|
"button",
|
|
2886
2967
|
{
|
|
2887
2968
|
type: "button",
|
|
@@ -2889,11 +2970,11 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
2889
2970
|
disabled: page === 1,
|
|
2890
2971
|
"aria-label": "Previous page",
|
|
2891
2972
|
className: cn(btn, "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"),
|
|
2892
|
-
children: /* @__PURE__ */
|
|
2973
|
+
children: /* @__PURE__ */ jsx31(ChevronLeft3, { size: 16 })
|
|
2893
2974
|
}
|
|
2894
2975
|
),
|
|
2895
2976
|
pageWindow(page, totalPages).map(
|
|
2896
|
-
(p) => typeof p === "string" ? /* @__PURE__ */
|
|
2977
|
+
(p) => typeof p === "string" ? /* @__PURE__ */ jsx31("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ jsx31(
|
|
2897
2978
|
"button",
|
|
2898
2979
|
{
|
|
2899
2980
|
type: "button",
|
|
@@ -2908,7 +2989,7 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
2908
2989
|
p
|
|
2909
2990
|
)
|
|
2910
2991
|
),
|
|
2911
|
-
/* @__PURE__ */
|
|
2992
|
+
/* @__PURE__ */ jsx31(
|
|
2912
2993
|
"button",
|
|
2913
2994
|
{
|
|
2914
2995
|
type: "button",
|
|
@@ -2916,14 +2997,14 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
2916
2997
|
disabled: page === totalPages,
|
|
2917
2998
|
"aria-label": "Next page",
|
|
2918
2999
|
className: cn(btn, "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"),
|
|
2919
|
-
children: /* @__PURE__ */
|
|
3000
|
+
children: /* @__PURE__ */ jsx31(ChevronRight4, { size: 16 })
|
|
2920
3001
|
}
|
|
2921
3002
|
)
|
|
2922
3003
|
] });
|
|
2923
3004
|
}
|
|
2924
3005
|
|
|
2925
3006
|
// src/WorkspaceAvatar.tsx
|
|
2926
|
-
import { jsx as
|
|
3007
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
2927
3008
|
function workspaceInitials(name) {
|
|
2928
3009
|
const words = name.trim().split(/\s+/).filter(Boolean);
|
|
2929
3010
|
if (words.length === 0) return "\xB7";
|
|
@@ -2939,7 +3020,7 @@ var SIZES = {
|
|
|
2939
3020
|
lg: "h-11 w-11 text-[15px]"
|
|
2940
3021
|
};
|
|
2941
3022
|
function WorkspaceAvatar({ name, size = "md" }) {
|
|
2942
|
-
return /* @__PURE__ */
|
|
3023
|
+
return /* @__PURE__ */ jsx32(
|
|
2943
3024
|
"span",
|
|
2944
3025
|
{
|
|
2945
3026
|
"aria-hidden": "true",
|
|
@@ -2953,9 +3034,9 @@ function WorkspaceAvatar({ name, size = "md" }) {
|
|
|
2953
3034
|
}
|
|
2954
3035
|
|
|
2955
3036
|
// src/Tag.tsx
|
|
2956
|
-
import { jsx as
|
|
3037
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
2957
3038
|
function Tag({ children, className }) {
|
|
2958
|
-
return /* @__PURE__ */
|
|
3039
|
+
return /* @__PURE__ */ jsx33(
|
|
2959
3040
|
"span",
|
|
2960
3041
|
{
|
|
2961
3042
|
className: cn(
|
|
@@ -2969,7 +3050,7 @@ function Tag({ children, className }) {
|
|
|
2969
3050
|
|
|
2970
3051
|
// src/TablePagination.tsx
|
|
2971
3052
|
import { ChevronDown as ChevronDown9, ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft4, ChevronRight as ChevronRight5 } from "lucide-react";
|
|
2972
|
-
import { jsx as
|
|
3053
|
+
import { jsx as jsx34, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2973
3054
|
function TablePagination({
|
|
2974
3055
|
page,
|
|
2975
3056
|
perPage,
|
|
@@ -2992,17 +3073,17 @@ function TablePagination({
|
|
|
2992
3073
|
return /* @__PURE__ */ jsxs29("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), children: [
|
|
2993
3074
|
/* @__PURE__ */ jsxs29("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
|
|
2994
3075
|
/* @__PURE__ */ jsxs29("span", { className: "relative", children: [
|
|
2995
|
-
/* @__PURE__ */
|
|
3076
|
+
/* @__PURE__ */ jsx34(
|
|
2996
3077
|
"select",
|
|
2997
3078
|
{
|
|
2998
3079
|
value: perPage,
|
|
2999
3080
|
onChange: (e) => onPerPageChange(Number(e.target.value)),
|
|
3000
3081
|
"aria-label": "Items per page",
|
|
3001
3082
|
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",
|
|
3002
|
-
children: perPageOptions.map((n) => /* @__PURE__ */
|
|
3083
|
+
children: perPageOptions.map((n) => /* @__PURE__ */ jsx34("option", { value: n, children: n }, n))
|
|
3003
3084
|
}
|
|
3004
3085
|
),
|
|
3005
|
-
/* @__PURE__ */
|
|
3086
|
+
/* @__PURE__ */ jsx34(
|
|
3006
3087
|
ChevronDown9,
|
|
3007
3088
|
{
|
|
3008
3089
|
size: 13,
|
|
@@ -3014,7 +3095,7 @@ function TablePagination({
|
|
|
3014
3095
|
"items per page"
|
|
3015
3096
|
] }),
|
|
3016
3097
|
/* @__PURE__ */ jsxs29("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
|
|
3017
|
-
/* @__PURE__ */
|
|
3098
|
+
/* @__PURE__ */ jsx34(
|
|
3018
3099
|
"button",
|
|
3019
3100
|
{
|
|
3020
3101
|
type: "button",
|
|
@@ -3022,10 +3103,10 @@ function TablePagination({
|
|
|
3022
3103
|
disabled: current === 1,
|
|
3023
3104
|
"aria-label": "First page",
|
|
3024
3105
|
className: stepBtn,
|
|
3025
|
-
children: /* @__PURE__ */
|
|
3106
|
+
children: /* @__PURE__ */ jsx34(ChevronFirst, { size: 16, "aria-hidden": "true" })
|
|
3026
3107
|
}
|
|
3027
3108
|
),
|
|
3028
|
-
/* @__PURE__ */
|
|
3109
|
+
/* @__PURE__ */ jsx34(
|
|
3029
3110
|
"button",
|
|
3030
3111
|
{
|
|
3031
3112
|
type: "button",
|
|
@@ -3033,11 +3114,11 @@ function TablePagination({
|
|
|
3033
3114
|
disabled: current === 1,
|
|
3034
3115
|
"aria-label": "Previous page",
|
|
3035
3116
|
className: stepBtn,
|
|
3036
|
-
children: /* @__PURE__ */
|
|
3117
|
+
children: /* @__PURE__ */ jsx34(ChevronLeft4, { size: 16, "aria-hidden": "true" })
|
|
3037
3118
|
}
|
|
3038
3119
|
),
|
|
3039
3120
|
pageWindow(current, totalPages).map(
|
|
3040
|
-
(p) => typeof p === "string" ? /* @__PURE__ */
|
|
3121
|
+
(p) => typeof p === "string" ? /* @__PURE__ */ jsx34("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ jsx34(
|
|
3041
3122
|
"button",
|
|
3042
3123
|
{
|
|
3043
3124
|
type: "button",
|
|
@@ -3052,7 +3133,7 @@ function TablePagination({
|
|
|
3052
3133
|
p
|
|
3053
3134
|
)
|
|
3054
3135
|
),
|
|
3055
|
-
/* @__PURE__ */
|
|
3136
|
+
/* @__PURE__ */ jsx34(
|
|
3056
3137
|
"button",
|
|
3057
3138
|
{
|
|
3058
3139
|
type: "button",
|
|
@@ -3060,10 +3141,10 @@ function TablePagination({
|
|
|
3060
3141
|
disabled: current === totalPages,
|
|
3061
3142
|
"aria-label": "Next page",
|
|
3062
3143
|
className: stepBtn,
|
|
3063
|
-
children: /* @__PURE__ */
|
|
3144
|
+
children: /* @__PURE__ */ jsx34(ChevronRight5, { size: 16, "aria-hidden": "true" })
|
|
3064
3145
|
}
|
|
3065
3146
|
),
|
|
3066
|
-
/* @__PURE__ */
|
|
3147
|
+
/* @__PURE__ */ jsx34(
|
|
3067
3148
|
"button",
|
|
3068
3149
|
{
|
|
3069
3150
|
type: "button",
|
|
@@ -3071,7 +3152,7 @@ function TablePagination({
|
|
|
3071
3152
|
disabled: current === totalPages,
|
|
3072
3153
|
"aria-label": "Last page",
|
|
3073
3154
|
className: stepBtn,
|
|
3074
|
-
children: /* @__PURE__ */
|
|
3155
|
+
children: /* @__PURE__ */ jsx34(ChevronLast, { size: 16, "aria-hidden": "true" })
|
|
3075
3156
|
}
|
|
3076
3157
|
)
|
|
3077
3158
|
] }),
|
|
@@ -3090,7 +3171,7 @@ function TablePagination({
|
|
|
3090
3171
|
// src/DateRangePicker.tsx
|
|
3091
3172
|
import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef11, useState as useState12 } from "react";
|
|
3092
3173
|
import { ChevronDown as ChevronDown10 } from "lucide-react";
|
|
3093
|
-
import { jsx as
|
|
3174
|
+
import { jsx as jsx35, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
3094
3175
|
var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
3095
3176
|
var QUARTER_ABBR = ["Q1", "Q2", "Q3", "Q4"];
|
|
3096
3177
|
var PRESETS = ["Rolling 3 months", "Rolling 6 months", "Rolling 12 months"];
|
|
@@ -3126,7 +3207,7 @@ function spanLabel(label, today) {
|
|
|
3126
3207
|
return `${fmtDate(s)} \u2013 ${fmtDate(e)}`;
|
|
3127
3208
|
}
|
|
3128
3209
|
function MiniSelect({ value, onChange, options }) {
|
|
3129
|
-
return /* @__PURE__ */
|
|
3210
|
+
return /* @__PURE__ */ jsx35(
|
|
3130
3211
|
"select",
|
|
3131
3212
|
{
|
|
3132
3213
|
value: String(value),
|
|
@@ -3135,7 +3216,7 @@ function MiniSelect({ value, onChange, options }) {
|
|
|
3135
3216
|
if (opt) onChange(opt.value);
|
|
3136
3217
|
},
|
|
3137
3218
|
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",
|
|
3138
|
-
children: options.map((o) => /* @__PURE__ */
|
|
3219
|
+
children: options.map((o) => /* @__PURE__ */ jsx35("option", { value: String(o.value), children: o.label }, String(o.value)))
|
|
3139
3220
|
}
|
|
3140
3221
|
);
|
|
3141
3222
|
}
|
|
@@ -3207,15 +3288,15 @@ function DateRangePicker({
|
|
|
3207
3288
|
className: chipTriggerClass(),
|
|
3208
3289
|
children: [
|
|
3209
3290
|
/* @__PURE__ */ jsxs30("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
3210
|
-
/* @__PURE__ */
|
|
3211
|
-
/* @__PURE__ */
|
|
3291
|
+
/* @__PURE__ */ jsx35("span", { className: "text-[10px] text-text-tertiary", children: spanLabel(value, end) }),
|
|
3292
|
+
/* @__PURE__ */ jsx35("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
3212
3293
|
] }),
|
|
3213
|
-
/* @__PURE__ */
|
|
3294
|
+
/* @__PURE__ */ jsx35(ChevronDown10, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
|
|
3214
3295
|
]
|
|
3215
3296
|
}
|
|
3216
3297
|
),
|
|
3217
3298
|
open && /* @__PURE__ */ jsxs30("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: [
|
|
3218
|
-
presets.map((p) => /* @__PURE__ */
|
|
3299
|
+
presets.map((p) => /* @__PURE__ */ jsx35(
|
|
3219
3300
|
"button",
|
|
3220
3301
|
{
|
|
3221
3302
|
type: "button",
|
|
@@ -3226,25 +3307,25 @@ function DateRangePicker({
|
|
|
3226
3307
|
p
|
|
3227
3308
|
)),
|
|
3228
3309
|
/* @__PURE__ */ jsxs30("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
|
|
3229
|
-
/* @__PURE__ */
|
|
3310
|
+
/* @__PURE__ */ jsx35("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
|
|
3230
3311
|
/* @__PURE__ */ jsxs30("div", { className: "mt-2 flex flex-col gap-2", children: [
|
|
3231
3312
|
/* @__PURE__ */ jsxs30("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
|
|
3232
3313
|
"From",
|
|
3233
3314
|
/* @__PURE__ */ jsxs30("span", { className: "flex gap-1", children: [
|
|
3234
|
-
granularity === "month" && /* @__PURE__ */
|
|
3235
|
-
granularity === "quarter" && /* @__PURE__ */
|
|
3236
|
-
/* @__PURE__ */
|
|
3315
|
+
granularity === "month" && /* @__PURE__ */ jsx35(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
|
|
3316
|
+
granularity === "quarter" && /* @__PURE__ */ jsx35(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
|
|
3317
|
+
/* @__PURE__ */ jsx35(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
|
|
3237
3318
|
] })
|
|
3238
3319
|
] }),
|
|
3239
3320
|
/* @__PURE__ */ jsxs30("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
|
|
3240
3321
|
"To",
|
|
3241
3322
|
/* @__PURE__ */ jsxs30("span", { className: "flex gap-1", children: [
|
|
3242
|
-
granularity === "month" && /* @__PURE__ */
|
|
3243
|
-
granularity === "quarter" && /* @__PURE__ */
|
|
3244
|
-
/* @__PURE__ */
|
|
3323
|
+
granularity === "month" && /* @__PURE__ */ jsx35(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
|
|
3324
|
+
granularity === "quarter" && /* @__PURE__ */ jsx35(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
|
|
3325
|
+
/* @__PURE__ */ jsx35(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
|
|
3245
3326
|
] })
|
|
3246
3327
|
] }),
|
|
3247
|
-
/* @__PURE__ */
|
|
3328
|
+
/* @__PURE__ */ jsx35(
|
|
3248
3329
|
"button",
|
|
3249
3330
|
{
|
|
3250
3331
|
type: "button",
|
|
@@ -3256,7 +3337,7 @@ function DateRangePicker({
|
|
|
3256
3337
|
)
|
|
3257
3338
|
] })
|
|
3258
3339
|
] }),
|
|
3259
|
-
showFooter && /* @__PURE__ */
|
|
3340
|
+
showFooter && /* @__PURE__ */ jsx35(FilterDropdownFooter, { onApply: () => commit(draft) })
|
|
3260
3341
|
] })
|
|
3261
3342
|
] });
|
|
3262
3343
|
}
|
|
@@ -3264,7 +3345,7 @@ function DateRangePicker({
|
|
|
3264
3345
|
// src/MultiSelectFilter.tsx
|
|
3265
3346
|
import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef12, useState as useState13 } from "react";
|
|
3266
3347
|
import { ChevronDown as ChevronDown11, Check as Check7, Minus as Minus2, Search as Search5, X as X4 } from "lucide-react";
|
|
3267
|
-
import { jsx as
|
|
3348
|
+
import { jsx as jsx36, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3268
3349
|
function MultiSelectFilter({
|
|
3269
3350
|
caption,
|
|
3270
3351
|
options = [],
|
|
@@ -3364,8 +3445,8 @@ function MultiSelectFilter({
|
|
|
3364
3445
|
"aria-expanded": open,
|
|
3365
3446
|
className: cn(chipTriggerClass(variant), fullWidth && "w-full justify-between"),
|
|
3366
3447
|
children: [
|
|
3367
|
-
/* @__PURE__ */
|
|
3368
|
-
/* @__PURE__ */
|
|
3448
|
+
/* @__PURE__ */ jsx36(ChipContent, { caption, value, icon }),
|
|
3449
|
+
/* @__PURE__ */ jsx36(
|
|
3369
3450
|
ChevronDown11,
|
|
3370
3451
|
{
|
|
3371
3452
|
size: 14,
|
|
@@ -3387,9 +3468,9 @@ function MultiSelectFilter({
|
|
|
3387
3468
|
role: "dialog",
|
|
3388
3469
|
"aria-label": caption,
|
|
3389
3470
|
children: [
|
|
3390
|
-
searchable && /* @__PURE__ */
|
|
3391
|
-
/* @__PURE__ */
|
|
3392
|
-
/* @__PURE__ */
|
|
3471
|
+
searchable && /* @__PURE__ */ jsx36("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs31("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
|
|
3472
|
+
/* @__PURE__ */ jsx36(Search5, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
|
|
3473
|
+
/* @__PURE__ */ jsx36(
|
|
3393
3474
|
"input",
|
|
3394
3475
|
{
|
|
3395
3476
|
type: "text",
|
|
@@ -3399,7 +3480,7 @@ function MultiSelectFilter({
|
|
|
3399
3480
|
className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
|
|
3400
3481
|
}
|
|
3401
3482
|
),
|
|
3402
|
-
q && /* @__PURE__ */
|
|
3483
|
+
q && /* @__PURE__ */ jsx36("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ jsx36(X4, { size: 13 }) })
|
|
3403
3484
|
] }) }),
|
|
3404
3485
|
/* @__PURE__ */ jsxs31("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
|
|
3405
3486
|
groups ? visibleGroups.map((g) => {
|
|
@@ -3412,9 +3493,9 @@ function MultiSelectFilter({
|
|
|
3412
3493
|
onClick: () => toggleGroup(g),
|
|
3413
3494
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3414
3495
|
children: [
|
|
3415
|
-
/* @__PURE__ */
|
|
3416
|
-
/* @__PURE__ */
|
|
3417
|
-
counts && /* @__PURE__ */
|
|
3496
|
+
/* @__PURE__ */ jsx36(TriCheck, { state }),
|
|
3497
|
+
/* @__PURE__ */ jsx36("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
|
|
3498
|
+
counts && /* @__PURE__ */ jsx36(OptionCount, { n: countFor(g.id) })
|
|
3418
3499
|
]
|
|
3419
3500
|
}
|
|
3420
3501
|
),
|
|
@@ -3427,9 +3508,9 @@ function MultiSelectFilter({
|
|
|
3427
3508
|
onClick: () => toggle(c.id),
|
|
3428
3509
|
className: "flex w-full items-center gap-2.5 rounded-control py-2 pl-9 pr-2 text-left transition-colors hover:bg-subtle",
|
|
3429
3510
|
children: [
|
|
3430
|
-
/* @__PURE__ */
|
|
3431
|
-
/* @__PURE__ */
|
|
3432
|
-
counts && /* @__PURE__ */
|
|
3511
|
+
/* @__PURE__ */ jsx36(TriCheck, { state: checked ? "all" : "none" }),
|
|
3512
|
+
/* @__PURE__ */ jsx36("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
|
|
3513
|
+
counts && /* @__PURE__ */ jsx36(OptionCount, { n: countFor(c.id) })
|
|
3433
3514
|
]
|
|
3434
3515
|
},
|
|
3435
3516
|
c.id
|
|
@@ -3445,26 +3526,26 @@ function MultiSelectFilter({
|
|
|
3445
3526
|
onClick: () => toggle(o.id),
|
|
3446
3527
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3447
3528
|
children: [
|
|
3448
|
-
/* @__PURE__ */
|
|
3529
|
+
/* @__PURE__ */ jsx36(
|
|
3449
3530
|
"span",
|
|
3450
3531
|
{
|
|
3451
3532
|
className: cn(
|
|
3452
3533
|
"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
|
|
3453
3534
|
checked ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3454
3535
|
),
|
|
3455
|
-
children: checked && /* @__PURE__ */
|
|
3536
|
+
children: checked && /* @__PURE__ */ jsx36(Check7, { size: 13, strokeWidth: 3 })
|
|
3456
3537
|
}
|
|
3457
3538
|
),
|
|
3458
|
-
/* @__PURE__ */
|
|
3459
|
-
counts && /* @__PURE__ */
|
|
3539
|
+
/* @__PURE__ */ jsx36("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
|
|
3540
|
+
counts && /* @__PURE__ */ jsx36(OptionCount, { n: countFor(o.id) })
|
|
3460
3541
|
]
|
|
3461
3542
|
},
|
|
3462
3543
|
o.id
|
|
3463
3544
|
);
|
|
3464
3545
|
}),
|
|
3465
|
-
(groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */
|
|
3546
|
+
(groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ jsx36("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
|
|
3466
3547
|
] }),
|
|
3467
|
-
showFooter ? /* @__PURE__ */
|
|
3548
|
+
showFooter ? /* @__PURE__ */ jsx36(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ jsx36("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ jsxs31(
|
|
3468
3549
|
"button",
|
|
3469
3550
|
{
|
|
3470
3551
|
type: "button",
|
|
@@ -3491,8 +3572,8 @@ function TriCheck({ state }) {
|
|
|
3491
3572
|
filled ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3492
3573
|
),
|
|
3493
3574
|
children: [
|
|
3494
|
-
state === "all" && /* @__PURE__ */
|
|
3495
|
-
state === "some" && /* @__PURE__ */
|
|
3575
|
+
state === "all" && /* @__PURE__ */ jsx36(Check7, { size: 13, strokeWidth: 3 }),
|
|
3576
|
+
state === "some" && /* @__PURE__ */ jsx36(Minus2, { size: 13, strokeWidth: 3 })
|
|
3496
3577
|
]
|
|
3497
3578
|
}
|
|
3498
3579
|
);
|
|
@@ -3506,14 +3587,14 @@ function OptionCount({ n }) {
|
|
|
3506
3587
|
}
|
|
3507
3588
|
|
|
3508
3589
|
// src/Toggle.tsx
|
|
3509
|
-
import { jsx as
|
|
3590
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
3510
3591
|
var SIZES2 = {
|
|
3511
3592
|
sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
|
|
3512
3593
|
md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
|
|
3513
3594
|
};
|
|
3514
3595
|
function Toggle({ checked, onChange, label, size = "md", disabled, className }) {
|
|
3515
3596
|
const s = SIZES2[size];
|
|
3516
|
-
return /* @__PURE__ */
|
|
3597
|
+
return /* @__PURE__ */ jsx37(
|
|
3517
3598
|
"button",
|
|
3518
3599
|
{
|
|
3519
3600
|
type: "button",
|
|
@@ -3529,7 +3610,7 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className })
|
|
|
3529
3610
|
disabled && "cursor-not-allowed opacity-50",
|
|
3530
3611
|
className
|
|
3531
3612
|
),
|
|
3532
|
-
children: /* @__PURE__ */
|
|
3613
|
+
children: /* @__PURE__ */ jsx37(
|
|
3533
3614
|
"span",
|
|
3534
3615
|
{
|
|
3535
3616
|
className: cn(
|
|
@@ -3546,20 +3627,20 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className })
|
|
|
3546
3627
|
// src/AISpark.tsx
|
|
3547
3628
|
import { useId as useId2 } from "react";
|
|
3548
3629
|
import { Sparkles } from "lucide-react";
|
|
3549
|
-
import { Fragment as Fragment5, jsx as
|
|
3630
|
+
import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
3550
3631
|
function AISpark({ size = 16, className }) {
|
|
3551
3632
|
const id = useId2();
|
|
3552
3633
|
return /* @__PURE__ */ jsxs32(Fragment5, { children: [
|
|
3553
|
-
/* @__PURE__ */
|
|
3554
|
-
/* @__PURE__ */
|
|
3555
|
-
/* @__PURE__ */
|
|
3634
|
+
/* @__PURE__ */ jsx38("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ jsx38("defs", { children: /* @__PURE__ */ jsxs32("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
|
|
3635
|
+
/* @__PURE__ */ jsx38("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
|
|
3636
|
+
/* @__PURE__ */ jsx38("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
|
|
3556
3637
|
] }) }) }),
|
|
3557
|
-
/* @__PURE__ */
|
|
3638
|
+
/* @__PURE__ */ jsx38(Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
|
|
3558
3639
|
] });
|
|
3559
3640
|
}
|
|
3560
3641
|
|
|
3561
3642
|
// src/Freshness.tsx
|
|
3562
|
-
import { jsx as
|
|
3643
|
+
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
3563
3644
|
var dotColor = {
|
|
3564
3645
|
fresh: "bg-status-success",
|
|
3565
3646
|
recent: "bg-status-warning",
|
|
@@ -3571,7 +3652,7 @@ var srLabel = {
|
|
|
3571
3652
|
stale: "Older than a day"
|
|
3572
3653
|
};
|
|
3573
3654
|
function Freshness({ level }) {
|
|
3574
|
-
return /* @__PURE__ */
|
|
3655
|
+
return /* @__PURE__ */ jsx39(
|
|
3575
3656
|
"span",
|
|
3576
3657
|
{
|
|
3577
3658
|
className: cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotColor[level]),
|
|
@@ -3585,6 +3666,7 @@ export {
|
|
|
3585
3666
|
AdvertiserNoResults,
|
|
3586
3667
|
AdvertiserQuickFilter,
|
|
3587
3668
|
AdvertiserSearchPrompt,
|
|
3669
|
+
Badge,
|
|
3588
3670
|
BarChartPlaceholder,
|
|
3589
3671
|
Button,
|
|
3590
3672
|
Card,
|