agentic-ui-libs 1.1.0-beta.-1.0 → 1.1.0-beta.2

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.
Files changed (16) hide show
  1. package/dist/assets/agentic-ui-libs.css +1109 -537
  2. package/dist/features/tracing/components/shared/ColumnCustomization.d.ts +1 -1
  3. package/dist/features/tracing/components/shared/ColumnCustomization.d.ts.map +1 -1
  4. package/dist/features/tracing/components/shared/EmptyState.d.ts +2 -2
  5. package/dist/features/tracing/components/shared/EmptyState.d.ts.map +1 -1
  6. package/dist/features/tracing/components/shared/FilterPanel.d.ts +1 -1
  7. package/dist/features/tracing/components/shared/FilterPanel.d.ts.map +1 -1
  8. package/dist/features/tracing/components/shared/TracingListHeader.d.ts +1 -1
  9. package/dist/features/tracing/components/shared/TracingListHeader.d.ts.map +1 -1
  10. package/dist/features/tracing/components/shared/TracingTable.d.ts.map +1 -1
  11. package/dist/index.js +198 -155
  12. package/dist/shared/ui/CopyButton.d.ts +1 -0
  13. package/dist/shared/ui/CopyButton.d.ts.map +1 -1
  14. package/dist/shared/ui/daterangepicker.d.ts.map +1 -1
  15. package/dist/ui-libs.umd.js +198 -155
  16. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -977,6 +977,23 @@ const createLucideIcon = (iconName, iconNode) => {
977
977
  Component2.displayName = `${iconName}`;
978
978
  return Component2;
979
979
  };
980
+ /**
981
+ * @license lucide-react v0.294.0 - ISC
982
+ *
983
+ * This source code is licensed under the ISC license.
984
+ * See the LICENSE file in the root directory of this source tree.
985
+ */
986
+ const AlertTriangle = createLucideIcon("AlertTriangle", [
987
+ [
988
+ "path",
989
+ {
990
+ d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z",
991
+ key: "c3ski4"
992
+ }
993
+ ],
994
+ ["path", { d: "M12 9v4", key: "juzpu7" }],
995
+ ["path", { d: "M12 17h.01", key: "p32p05" }]
996
+ ]);
980
997
  /**
981
998
  * @license lucide-react v0.294.0 - ISC
982
999
  *
@@ -34825,20 +34842,21 @@ function TailwindDateRangePicker({ className, defaultValue, value, presetLabel:
34825
34842
  const getDropdownClasses = () => {
34826
34843
  return "fixed bg-white border border-gray-200 rounded-lg shadow-xl z-[99999]";
34827
34844
  };
34828
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `relative ${className}`, children: [
34845
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `relative shrink-0 ${className}`, children: [
34829
34846
  /* @__PURE__ */ jsxRuntimeExports.jsxs(
34830
34847
  "button",
34831
34848
  {
34832
34849
  ref: triggerRef,
34833
34850
  onClick: () => handleOpenChange(!open),
34834
- className: `min-w-[200px] h-[40px] px-[12px] text-left border !border-gray-300 rounded-md shadow-sm bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex items-center ${!date2 ? "text-gray-500" : "text-gray-900"}`,
34851
+ className: `w-full h-[40px] px-[14px] text-left border border-gray-300 rounded-[8px] bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex items-center gap-[8px] ${!date2 ? "text-gray-400" : "text-gray-700"}`,
34835
34852
  children: [
34836
- /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { className: "mr-2 h-[16px] w-[16px]" }),
34837
- (() => {
34853
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { className: "h-[20px] w-[20px] shrink-0" }),
34854
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 text-[14px] font-medium leading-[20px] overflow-hidden text-ellipsis whitespace-nowrap", children: (() => {
34838
34855
  const displayText = formatDateRange(date2, selectedPresetLabel);
34839
34856
  console.log("📅 Button display text:", { displayText, date: date2, selectedPresetLabel });
34840
34857
  return displayText;
34841
- })()
34858
+ })() }),
34859
+ /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 6L8 10L12 6", stroke: "#98A2B3", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) })
34842
34860
  ]
34843
34861
  }
34844
34862
  ),
@@ -36428,28 +36446,40 @@ class TracingUtils {
36428
36446
  }
36429
36447
  function EmptyState(props) {
36430
36448
  const {
36431
- icon = "search",
36449
+ icon = "alert",
36432
36450
  title,
36433
36451
  description,
36434
36452
  actionLabel,
36435
36453
  onAction,
36436
36454
  className = ""
36437
36455
  } = props;
36438
- const Icon = icon === "search" ? FileSearch : Filter;
36439
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex flex-col items-center justify-center h-full text-center p-8 ${className}`, children: [
36440
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: "w-8 h-8 text-gray-400" }) }),
36441
- /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900 mb-2", children: title }),
36442
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 max-w-md mb-6", children: description }),
36456
+ const renderIcon = () => {
36457
+ switch (icon) {
36458
+ case "search":
36459
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(FileSearch, { className: "w-[24px] h-[24px] text-gray-900", strokeWidth: 1.5 });
36460
+ case "filter":
36461
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(Filter, { className: "w-[24px] h-[24px] text-gray-900", strokeWidth: 1.5 });
36462
+ case "alert":
36463
+ default:
36464
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(AlertTriangle, { className: "w-[24px] h-[24px] text-gray-900", strokeWidth: 1.5 });
36465
+ }
36466
+ };
36467
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `flex flex-col items-center justify-center h-full w-full px-[24px] py-[16px] ${className}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[16px] items-center w-full", children: [
36468
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-[48px] h-[48px] border border-gray-300 rounded-[10px] flex items-center justify-center shrink-0", children: renderIcon() }),
36469
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[4px] items-center text-center max-w-[352px]", children: [
36470
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[16px] font-semibold leading-[24px] text-gray-900 whitespace-nowrap", children: title }),
36471
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-[14px] font-normal leading-[20px] text-gray-600 w-full", children: description })
36472
+ ] }),
36443
36473
  actionLabel && onAction && /* @__PURE__ */ jsxRuntimeExports.jsx(
36444
36474
  "button",
36445
36475
  {
36446
36476
  onClick: onAction,
36447
- className: "px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700",
36477
+ className: "mt-[8px] px-[16px] py-[10px] bg-gray-900 border border-gray-700 text-white text-[14px] font-medium leading-[20px] rounded-[8px] hover:bg-gray-800 transition-colors",
36448
36478
  "data-test-id": "empty-state-action-btn",
36449
36479
  children: actionLabel
36450
36480
  }
36451
36481
  )
36452
- ] });
36482
+ ] }) });
36453
36483
  }
36454
36484
  function LoadingSpinner(props) {
36455
36485
  const { message = "Loading...", className = "" } = props;
@@ -104490,7 +104520,6 @@ function TracingTable(props) {
104490
104520
  onRowClick,
104491
104521
  onSortChange,
104492
104522
  className = "",
104493
- emptyStateMessage = "No data available",
104494
104523
  hasInitiallyLoaded: hasInitiallyLoadedProp
104495
104524
  } = props;
104496
104525
  const hasInitiallyLoaded = hasInitiallyLoadedProp === true;
@@ -104570,8 +104599,16 @@ function TracingTable(props) {
104570
104599
  }
104571
104600
  );
104572
104601
  }
104602
+ const showEmptyState = hasInitiallyLoaded && !loading && data.length === 0;
104573
104603
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `flex flex-col h-full tracing-table-with-pagination rounded-[8px] border border-gray-300 ${className}`, children: [
104574
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 ag-theme-alpine relative w-full overflow-auto", children: [
104604
+ showEmptyState ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
104605
+ EmptyState,
104606
+ {
104607
+ icon: "alert",
104608
+ title: "There is no data to display for the selected filters",
104609
+ description: "Try adjusting the filters or ensure your agentic app is deployed and receiving traffic."
104610
+ }
104611
+ ) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 ag-theme-alpine relative w-full overflow-auto", children: [
104575
104612
  loading && hasInitiallyLoaded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center z-10", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-3", children: [
104576
104613
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }),
104577
104614
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-gray-600 text-sm font-medium", children: "Loading..." })
@@ -104591,13 +104628,7 @@ function TracingTable(props) {
104591
104628
  rowHeight: 52,
104592
104629
  animateRows: true,
104593
104630
  enableCellTextSelection: true,
104594
- suppressNoRowsOverlay: loading || !hasInitiallyLoaded,
104595
- overlayNoRowsTemplate: `<div class="flex flex-col items-center justify-center h-full text-gray-500">
104596
- <svg class="w-12 h-12 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
104597
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
104598
- </svg>
104599
- <p class="text-sm">${emptyStateMessage}</p>
104600
- </div>`
104631
+ suppressNoRowsOverlay: true
104601
104632
  }
104602
104633
  )
104603
104634
  ] }),
@@ -104675,7 +104706,7 @@ function TracingListHeader(props) {
104675
104706
  title,
104676
104707
  description,
104677
104708
  searchConfig,
104678
- searchPlaceholder = "Search...",
104709
+ searchPlaceholder = "Search by Session ID, Trace ID ,...",
104679
104710
  searchValue = "",
104680
104711
  onSearchChange,
104681
104712
  showSearch = true,
@@ -104757,21 +104788,21 @@ function TracingListHeader(props) {
104757
104788
  onTimeRangeChange(normalizedDateRange, presetLabel);
104758
104789
  }
104759
104790
  };
104760
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 w-full p-[24px] pb-[12px]", children: [
104761
- /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-lg font-bold text-gray-900 w-full", children: title }),
104762
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 w-full", children: [
104763
- /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-500 text-xs w-full", children: description }),
104764
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 justify-end shrink-0", children: [
104765
- showSearch && (useAdvancedSearch || onSearchChange) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch h-[40px] border border-gray-300 bg-white rounded-md", children: [
104766
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center h-full", children: [
104791
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[8px] w-full pt-[24px] pb-[8px] px-[24px] bg-white", children: [
104792
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-[8px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "text-[18px] font-semibold leading-[28px] text-gray-900", children: title }) }) }),
104793
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[16px] justify-end w-full", children: [
104794
+ /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "flex-1 min-w-0 text-[12px] font-normal leading-[16px] text-gray-600 overflow-hidden text-ellipsis line-clamp-1", children: description }),
104795
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] shrink-0", children: [
104796
+ showSearch && (useAdvancedSearch || onSearchChange) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch h-[40px] border border-gray-300 bg-white rounded-[8px] w-[220px] overflow-hidden", children: [
104797
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center flex-1 px-[14px] py-[10px] gap-[8px]", children: [
104767
104798
  /* @__PURE__ */ jsxRuntimeExports.jsx(
104768
104799
  "button",
104769
104800
  {
104770
104801
  onClick: handleSearchSubmit,
104771
- className: "flex items-center justify-center w-10 h-full text-gray-400 hover:text-gray-600 shrink-0",
104802
+ className: "flex items-center justify-center text-gray-500 hover:text-gray-600 shrink-0",
104772
104803
  title: "Search",
104773
104804
  type: "button",
104774
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "w-4 h-4" })
104805
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "w-[16px] h-[16px]", strokeWidth: 1.5 })
104775
104806
  }
104776
104807
  ),
104777
104808
  /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -104786,7 +104817,7 @@ function TracingListHeader(props) {
104786
104817
  handleSearchSubmit();
104787
104818
  }
104788
104819
  },
104789
- className: "w-[160px] h-full pr-3 text-sm bg-transparent border-none outline-none",
104820
+ className: "flex-1 text-[14px] leading-[20px] text-gray-900 placeholder:text-gray-400 bg-transparent border-none outline-none overflow-hidden text-ellipsis whitespace-nowrap",
104790
104821
  "data-test-id": "tracing-list-search-input"
104791
104822
  }
104792
104823
  )
@@ -104836,19 +104867,19 @@ function TracingListHeader(props) {
104836
104867
  value: typeof timeRange === "object" ? timeRange : void 0,
104837
104868
  presetLabel: timeRangePresetLabel,
104838
104869
  onDateRangeChange: handleDateRangeChange,
104839
- className: "min-w-[200px]"
104870
+ className: "w-[172px]"
104840
104871
  }
104841
104872
  ),
104842
104873
  /* @__PURE__ */ jsxRuntimeExports.jsxs(
104843
104874
  "button",
104844
104875
  {
104845
104876
  onClick: onFiltersClick,
104846
- className: `inline-flex items-center h-[40px] px-4 border rounded-md text-sm font-medium ${TracingUtils.getActiveFiltersCount(filters) > 0 ? "border-blue-600 text-blue-700 bg-blue-50" : "!border-gray-300 text-gray-700 bg-white hover:bg-gray-50"}`,
104877
+ className: `inline-flex items-center justify-center h-[40px] px-[16px] py-[8px] gap-[8px] border rounded-[8px] text-[14px] font-medium leading-[20px] ${TracingUtils.getActiveFiltersCount(filters) > 0 ? "border-blue-600 text-blue-700 bg-blue-50" : "border-gray-300 text-gray-700 bg-white hover:bg-gray-50"}`,
104847
104878
  "data-test-id": "tracing-list-filters-btn",
104848
104879
  children: [
104849
- /* @__PURE__ */ jsxRuntimeExports.jsx(Filter, { className: "w-4 h-4 mr-2" }),
104880
+ /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M1.33325 3.06667C1.33325 2.6933 1.33325 2.50661 1.40599 2.36401C1.46991 2.23856 1.57189 2.13658 1.69734 2.07266C1.83994 2 2.02663 2 2.39992 2H13.5999C13.9732 2 14.1599 2 14.3025 2.07266C14.4279 2.13658 14.5299 2.23856 14.5939 2.36401C14.6666 2.50661 14.6666 2.6933 14.6666 3.06667V3.51294C14.6666 3.69214 14.6666 3.78173 14.6447 3.86505C14.6253 3.93888 14.5933 4.00882 14.5503 4.07184C14.5016 4.14295 14.4339 4.20164 14.2986 4.31901L10.0348 8.01433C9.89929 8.1317 9.83154 8.19039 9.78291 8.26149C9.73989 8.32451 9.70798 8.39445 9.68859 8.46828C9.66659 8.5516 9.66659 8.64119 9.66659 8.82039V12.3056C9.66659 12.4359 9.66659 12.5011 9.64556 12.5575C9.62697 12.6073 9.59675 12.6519 9.55749 12.6877C9.51299 12.7281 9.45246 12.7524 9.33139 12.8008L7.06472 13.7074C6.81963 13.8054 6.69709 13.8545 6.59876 13.834C6.51276 13.8161 6.43728 13.765 6.38875 13.6918C6.33325 13.6081 6.33325 13.4761 6.33325 13.2122V8.82039C6.33325 8.64119 6.33325 8.5516 6.31126 8.46828C6.29187 8.39445 6.25996 8.32451 6.21693 8.26149C6.16831 8.19039 6.10055 8.1317 5.96505 8.01433L1.70127 4.319C1.56591 4.20164 1.49823 4.14295 1.44959 4.07184C1.40656 4.00882 1.37456 3.93888 1.35516 3.86505C1.33325 3.78173 1.33325 3.69214 1.33325 3.51294V3.06667Z", stroke: "currentColor", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) }),
104850
104881
  "Filters",
104851
- TracingUtils.getActiveFiltersCount(filters) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 px-2 py-0.5 bg-blue-600 text-white text-xs rounded-full", "data-test-id": "tracing-list-active-filters-count", children: TracingUtils.getActiveFiltersCount(filters) })
104882
+ TracingUtils.getActiveFiltersCount(filters) > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "px-[8px] py-[2px] bg-blue-600 text-white text-[12px] leading-[16px] rounded-full", "data-test-id": "tracing-list-active-filters-count", children: TracingUtils.getActiveFiltersCount(filters) })
104852
104883
  ]
104853
104884
  }
104854
104885
  ),
@@ -104856,10 +104887,10 @@ function TracingListHeader(props) {
104856
104887
  "button",
104857
104888
  {
104858
104889
  onClick: onModifyColumnsClick,
104859
- className: "inline-flex items-center justify-center w-10 h-10 p-0 border !border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed",
104890
+ className: "inline-flex items-center justify-center w-[40px] h-[40px] p-[8px] border border-gray-300 rounded-[8px] bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed",
104860
104891
  title: "Modify Columns",
104861
104892
  "data-test-id": "tracing-list-modify-columns-btn",
104862
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3.33333 14L3.33333 10M3.33333 10C4.06971 10 4.66667 9.40305 4.66667 8.66667C4.66667 7.93029 4.06971 7.33333 3.33333 7.33333C2.59695 7.33333 2 7.93029 2 8.66667C2 9.40305 2.59695 10 3.33333 10ZM3.33333 4.66667V2M8 14V10M8 4.66667V2M8 4.66667C7.26362 4.66667 6.66667 5.26362 6.66667 6C6.66667 6.73638 7.26362 7.33333 8 7.33333C8.73638 7.33333 9.33333 6.73638 9.33333 6C9.33333 5.26362 8.73638 4.66667 8 4.66667ZM12.6667 14V11.3333M12.6667 11.3333C13.403 11.3333 14 10.7364 14 10C14 9.26362 13.403 8.66667 12.6667 8.66667C11.9303 8.66667 11.3333 9.26362 11.3333 10C11.3333 10.7364 11.9303 11.3333 12.6667 11.3333ZM12.6667 6V2", stroke: "#344054", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) })
104893
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M3.33333 14L3.33333 10M3.33333 10C4.06971 10 4.66667 9.40305 4.66667 8.66667C4.66667 7.93029 4.06971 7.33333 3.33333 7.33333C2.59695 7.33333 2 7.93029 2 8.66667C2 9.40305 2.59695 10 3.33333 10ZM3.33333 4.66667V2M8 14V10M8 4.66667V2M8 4.66667C7.26362 4.66667 6.66667 5.26362 6.66667 6C6.66667 6.73638 7.26362 7.33333 8 7.33333C8.73638 7.33333 9.33333 6.73638 9.33333 6C9.33333 5.26362 8.73638 4.66667 8 4.66667ZM12.6667 14V11.3333M12.6667 11.3333C13.403 11.3333 14 10.7364 14 10C14 9.26362 13.403 8.66667 12.6667 8.66667C11.9303 8.66667 11.3333 9.26362 11.3333 10C11.3333 10.7364 11.9303 11.3333 12.6667 11.3333ZM12.6667 6V2", stroke: "#344054", strokeWidth: "1.33", strokeLinecap: "round", strokeLinejoin: "round" }) })
104863
104894
  }
104864
104895
  )
104865
104896
  ] })
@@ -104907,42 +104938,45 @@ function ColumnCustomization(props) {
104907
104938
  /* @__PURE__ */ jsxRuntimeExports.jsx(
104908
104939
  "div",
104909
104940
  {
104910
- className: "fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300 ease-in-out"
104941
+ className: "fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300 ease-in-out",
104942
+ onClick: handleCancel
104911
104943
  }
104912
104944
  ),
104913
104945
  /* @__PURE__ */ jsxRuntimeExports.jsxs(
104914
104946
  "div",
104915
104947
  {
104916
- className: `fixed top-0 right-0 bottom-0 z-50 bg-white shadow-2xl flex flex-col animate-slideIn ${className}`,
104948
+ className: `fixed top-0 right-0 bottom-0 z-50 bg-white shadow-[0px_20px_24px_-4px_rgba(16,24,40,0.08),0px_8px_8px_-4px_rgba(16,24,40,0.03)] flex flex-col animate-slideIn ${className}`,
104917
104949
  style: { width: "540px" },
104918
104950
  children: [
104919
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-6 py-3 border-b border-gray-300 h-[64px] shrink-0", children: [
104920
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: "Modify Columns" }) }),
104951
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[16px] px-[24px] py-[12px] border_default_bottom shrink-0", children: [
104952
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center gap-[16px] flex-1 h-[44px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-[18px] font-semibold leading-[28px] text-gray-900 flex-1", children: "Modify Columns" }) }),
104921
104953
  /* @__PURE__ */ jsxRuntimeExports.jsx(
104922
104954
  "button",
104923
104955
  {
104924
104956
  onClick: handleCancel,
104925
- className: "p-1 rounded-md hover:bg-gray-100 flex items-center justify-center w-8 h-8",
104957
+ className: "w-[32px] h-[32px] flex items-center justify-center rounded-md hover:bg-gray-100",
104926
104958
  title: "Close",
104927
104959
  "data-test-id": "column-customization-close-btn",
104928
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4 text-gray-900" })
104960
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-[16px] h-[16px] text-gray-900", strokeWidth: 2 })
104929
104961
  }
104930
104962
  )
104931
104963
  ] }),
104932
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto px-6 py-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [
104933
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
104934
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
104935
- /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm font-medium text-gray-900", children: [
104936
- visibleCount,
104937
- "/",
104938
- totalCount
104964
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto p-[24px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[16px]", children: [
104965
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center gap-[10px] w-full", children: [
104966
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] flex-1 whitespace-nowrap", children: [
104967
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-[14px] leading-[20px]", children: [
104968
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium text-gray-900", children: [
104969
+ visibleCount,
104970
+ "/",
104971
+ totalCount
104972
+ ] }),
104973
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-gray-600", children: " columns selected" })
104939
104974
  ] }),
104940
- /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600", children: "columns selected" }),
104941
104975
  /* @__PURE__ */ jsxRuntimeExports.jsx(
104942
104976
  "button",
104943
104977
  {
104944
104978
  onClick: handleClearSelection,
104945
- className: "text-sm font-medium text-blue-600 hover:text-blue-700 ml-2",
104979
+ className: "text-[14px] font-medium leading-[20px] text-blue-600 hover:text-blue-700",
104946
104980
  "data-test-id": "column-customization-clear-selection-btn",
104947
104981
  children: "Clear selection"
104948
104982
  }
@@ -104952,7 +104986,7 @@ function ColumnCustomization(props) {
104952
104986
  "button",
104953
104987
  {
104954
104988
  onClick: handleRevertToDefault,
104955
- className: "text-sm font-medium text-gray-700 hover:text-gray-900",
104989
+ className: "text-[14px] font-medium leading-[20px] text-gray-700 hover:text-gray-900 shrink-0",
104956
104990
  "data-test-id": "column-customization-revert-default-btn",
104957
104991
  children: "Revert to default"
104958
104992
  }
@@ -104964,57 +104998,64 @@ function ColumnCustomization(props) {
104964
104998
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
104965
104999
  "div",
104966
105000
  {
104967
- className: "border-t border-gray-200 py-3 px-3",
104968
- children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: `flex items-center gap-3 ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"}`, children: [
104969
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center mt-0.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
104970
- "input",
104971
- {
104972
- type: "checkbox",
104973
- checked: isChecked,
104974
- disabled: isDisabled,
104975
- onChange: () => !isDisabled && toggleColumn(col.field),
104976
- className: `w-5 h-5 rounded-md border-2 ${isChecked ? isDisabled ? "bg-blue-200 border-blue-200" : "bg-blue-600 border-blue-600" : "bg-white border-gray-300"} ${isDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`,
104977
- style: {
104978
- appearance: "none",
104979
- backgroundImage: isChecked ? `url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.5L4.5 8L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")` : "none",
104980
- backgroundRepeat: "no-repeat",
104981
- backgroundPosition: "center"
104982
- },
104983
- "data-test-id": `column-customization-checkbox-${col.field}`
104984
- }
104985
- ) }),
104986
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
105001
+ className: "border_secondary_top border_secondary_bottom p-[12px] -mb-px first:mb-0",
105002
+ children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: `flex items-start gap-[12px] ${isDisabled ? "cursor-not-allowed" : "cursor-pointer"}`, children: [
105003
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-center shrink-0", children: [
105004
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
105005
+ "div",
105006
+ {
105007
+ className: `w-[20px] h-[20px] rounded-[6px] flex items-center justify-center transition-colors ${isChecked ? isDisabled ? "bg-blue-200 border border-blue-200" : "bg-blue-600 border border-blue-600" : "bg-white border border-gray-300"} ${isDisabled ? "opacity-50" : ""}`,
105008
+ onClick: () => !isDisabled && toggleColumn(col.field),
105009
+ children: isChecked && /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "w-[14px] h-[14px] text-white", strokeWidth: 2.5 })
105010
+ }
105011
+ ),
105012
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
105013
+ "input",
105014
+ {
105015
+ type: "checkbox",
105016
+ checked: isChecked,
105017
+ disabled: isDisabled,
105018
+ onChange: () => !isDisabled && toggleColumn(col.field),
105019
+ className: "sr-only",
105020
+ "data-test-id": `column-customization-checkbox-${col.field}`
105021
+ }
105022
+ )
105023
+ ] }),
105024
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
104987
105025
  "span",
104988
105026
  {
104989
- className: `text-sm font-medium ${isDisabled ? "text-gray-400" : "text-gray-700"}`,
105027
+ className: `flex-1 text-[14px] font-medium leading-[20px] ${isDisabled ? "text-gray-700" : "text-gray-700"}`,
104990
105028
  children: col.headerName
104991
105029
  }
104992
- ) })
105030
+ )
104993
105031
  ] })
104994
105032
  },
104995
105033
  col.field
104996
105034
  );
104997
105035
  }) })
104998
105036
  ] }) }),
104999
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-gray-300 px-6 py-3 flex items-center justify-end gap-2 h-[64px] shrink-0", children: [
105000
- /* @__PURE__ */ jsxRuntimeExports.jsx(
105001
- "button",
105002
- {
105003
- onClick: handleCancel,
105004
- className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50",
105005
- "data-test-id": "column-customization-cancel-btn",
105006
- children: "Cancel"
105007
- }
105008
- ),
105009
- /* @__PURE__ */ jsxRuntimeExports.jsx(
105010
- "button",
105011
- {
105012
- onClick: handleSave,
105013
- className: "px-4 py-2 text-sm font-medium text-white bg-gray-900 border border-gray-700 rounded-lg hover:bg-gray-800",
105014
- "data-test-id": "column-customization-save-btn",
105015
- children: "Save"
105016
- }
105017
- )
105037
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] px-[24px] py-[12px] border_default_top shrink-0", children: [
105038
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" }),
105039
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
105040
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
105041
+ "button",
105042
+ {
105043
+ onClick: handleCancel,
105044
+ className: "px-[16px] py-[10px] text-[14px] font-medium leading-[20px] text-gray-700 bg-white border border-gray-300 rounded-[8px] hover:bg-gray-50",
105045
+ "data-test-id": "column-customization-cancel-btn",
105046
+ children: "Cancel"
105047
+ }
105048
+ ),
105049
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
105050
+ "button",
105051
+ {
105052
+ onClick: handleSave,
105053
+ className: "px-[16px] py-[10px] text-[14px] font-medium leading-[20px] text-white bg-gray-900 border border-gray-700 rounded-[8px] hover:bg-gray-800",
105054
+ "data-test-id": "column-customization-save-btn",
105055
+ children: "Save"
105056
+ }
105057
+ )
105058
+ ] })
105018
105059
  ] })
105019
105060
  ]
105020
105061
  }
@@ -105127,8 +105168,8 @@ function FilterPanel(props) {
105127
105168
  {
105128
105169
  type: "text",
105129
105170
  disabled: true,
105130
- placeholder: "Enter value",
105131
- className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-lg text-sm text-gray-400 bg-gray-50"
105171
+ placeholder: "Enter Value",
105172
+ className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-[8px] text-[14px] leading-[20px] text-gray-400 bg-white"
105132
105173
  }
105133
105174
  );
105134
105175
  }
@@ -105160,7 +105201,7 @@ function FilterPanel(props) {
105160
105201
  const date2 = e3.target.value ? new Date(e3.target.value).toISOString() : "";
105161
105202
  handleFilterChange(index, "value", date2);
105162
105203
  },
105163
- className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-lg text-sm text-gray-900 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
105204
+ className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-[8px] text-[14px] leading-[20px] text-gray-900 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
105164
105205
  "data-test-id": `filter-panel-datetime-input-${index}`
105165
105206
  }
105166
105207
  );
@@ -105174,8 +105215,8 @@ function FilterPanel(props) {
105174
105215
  const numValue = e3.target.value === "" ? void 0 : Number(e3.target.value);
105175
105216
  handleFilterChange(index, "value", numValue);
105176
105217
  },
105177
- placeholder: "Enter value",
105178
- className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-lg text-sm text-gray-900 bg-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
105218
+ placeholder: "Enter Value",
105219
+ className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-[8px] text-[14px] leading-[20px] text-gray-900 bg-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
105179
105220
  "data-test-id": `filter-panel-number-input-${index}`
105180
105221
  }
105181
105222
  );
@@ -105202,8 +105243,8 @@ function FilterPanel(props) {
105202
105243
  type: "text",
105203
105244
  value: filter.value ?? "",
105204
105245
  onChange: (e3) => handleFilterChange(index, "value", e3.target.value),
105205
- placeholder: "Enter value",
105206
- className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-lg text-sm text-gray-900 bg-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
105246
+ placeholder: "Enter Value",
105247
+ className: "w-full h-[40px] px-[14px] py-[10px] border border-gray-300 rounded-[8px] text-[14px] leading-[20px] text-gray-900 bg-white placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
105207
105248
  "data-test-id": `filter-panel-text-input-${index}`
105208
105249
  }
105209
105250
  );
@@ -105213,24 +105254,24 @@ function FilterPanel(props) {
105213
105254
  return operator;
105214
105255
  };
105215
105256
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `bg-white shadow-[0px_20px_24px_-4px_rgba(16,24,40,0.08),0px_8px_8px_-4px_rgba(16,24,40,0.03)] w-full h-full flex flex-col ${className}`, children: [
105216
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between px-6 py-3 border-b border-gray-300 h-[64px] shrink-0", children: [
105217
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
105218
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-10 h-10 border border-gray-300 rounded-lg flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "18", height: "17", viewBox: "0 0 18 17", fill: "none", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M0.650146 1.98372C0.650146 1.51701 0.650146 1.28366 0.740974 1.1054C0.820869 0.948597 0.948353 0.821113 1.10515 0.741219C1.28341 0.650391 1.51677 0.650391 1.98348 0.650391H15.9835C16.4502 0.650391 16.6835 0.650391 16.8618 0.741219C17.0186 0.821113 17.1461 0.948597 17.226 1.1054C17.3168 1.28366 17.3168 1.51701 17.3168 1.98372V2.54155C17.3168 2.76555 17.3168 2.87755 17.2894 2.98169C17.2652 3.07398 17.2253 3.16142 17.1714 3.24019C17.1106 3.32908 17.026 3.40243 16.8567 3.54914L11.5269 8.16831C11.3576 8.31501 11.273 8.38836 11.2122 8.47726C11.1584 8.55603 11.1184 8.64347 11.0942 8.73576C11.0668 8.8399 11.0668 8.9519 11.0668 9.1759V13.5324C11.0668 13.6953 11.0668 13.7768 11.0405 13.8473C11.0173 13.9095 10.9795 13.9653 10.9304 14.01C10.8747 14.0606 10.7991 14.0908 10.6477 14.1514L7.81441 15.2847C7.50812 15.4072 7.35498 15.4685 7.23204 15.4429C7.12453 15.4206 7.03019 15.3567 6.96952 15.2652C6.90015 15.1605 6.90015 14.9956 6.90015 14.6657V9.1759C6.90015 8.9519 6.90015 8.8399 6.87278 8.73576C6.84852 8.64347 6.80859 8.55603 6.75474 8.47726C6.69396 8.38836 6.60933 8.31501 6.44005 8.16831L1.11024 3.54914C0.940967 3.40244 0.856331 3.32908 0.795556 3.24019C0.7417 3.16142 0.701774 3.07398 0.677518 2.98169C0.650146 2.87755 0.650146 2.76555 0.650146 2.54155V1.98372Z", stroke: "#475467", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
105219
- /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: title })
105257
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[16px] px-[24px] py-[12px] border_default_bottom shrink-0", children: [
105258
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[16px] flex-1 h-[44px]", children: [
105259
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-[40px] h-[40px] border border-gray-300 rounded-[8px] flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M1.66675 3.83333C1.66675 3.36662 1.66675 3.13327 1.75758 2.95501C1.83747 2.79821 1.96496 2.67072 2.12175 2.59083C2.30001 2.5 2.53337 2.5 3.00008 2.5H17.0001C17.4668 2.5 17.7001 2.5 17.8784 2.59083C18.0352 2.67072 18.1627 2.79821 18.2426 2.95501C18.3334 3.13327 18.3334 3.36662 18.3334 3.83333V4.39117C18.3334 4.61517 18.3334 4.72716 18.306 4.83131C18.2818 4.9236 18.2418 5.01103 18.188 5.0898C18.1272 5.17869 18.0426 5.25205 17.8733 5.39876L12.5435 10.0179C12.3742 10.1646 12.2896 10.238 12.2288 10.3269C12.175 10.4057 12.135 10.4931 12.1108 10.5854C12.0834 10.6895 12.0834 10.8015 12.0834 11.0255V15.382C12.0834 15.5449 12.0834 15.6263 12.0571 15.6969C12.0338 15.7591 11.9961 15.8149 11.947 15.8596C11.8913 15.9102 11.8157 15.9405 11.6643 16.001L8.83099 17.1343C8.52471 17.2568 8.37156 17.3181 8.24862 17.2925C8.14112 17.2702 8.04678 17.2063 7.98611 17.1148C7.91675 17.0101 7.91675 16.8452 7.91675 16.5153V11.0255C7.91675 10.8015 7.91675 10.6895 7.88937 10.5854C7.86511 10.4931 7.82518 10.4057 7.77133 10.3269C7.71055 10.238 7.62593 10.1646 7.45665 10.0179L2.12684 5.39875C1.95756 5.25205 1.87293 5.17869 1.81215 5.0898C1.75829 5.01103 1.71837 4.9236 1.69411 4.83131C1.66675 4.72716 1.66675 4.61517 1.66675 4.39117V3.83333Z", stroke: "#475467", strokeWidth: "1.66667", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
105260
+ /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-[18px] font-semibold leading-[28px] text-gray-900", children: title })
105220
105261
  ] }),
105221
105262
  /* @__PURE__ */ jsxRuntimeExports.jsx(
105222
105263
  "button",
105223
105264
  {
105224
105265
  onClick: handleCancel,
105225
- className: "p-1 rounded-md hover:bg-gray-100 flex items-center justify-center w-8 h-8",
105266
+ className: "w-[32px] h-[32px] flex items-center justify-center rounded-md hover:bg-gray-100",
105226
105267
  title: "Close",
105227
105268
  "data-test-id": "filter-panel-close-btn",
105228
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4 text-gray-900" })
105269
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-[16px] h-[16px] text-gray-900", strokeWidth: 2 })
105229
105270
  }
105230
105271
  )
105231
105272
  ] }),
105232
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto px-6 py-6", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-4", children: [
105233
- /* @__PURE__ */ jsxRuntimeExports.jsx("table", { className: "w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx("tbody", { children: wipFilters.map((filter, index) => {
105273
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto p-[24px]", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-[16px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-[16px]", children: [
105274
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-[8px]", children: wipFilters.map((filter, index) => {
105234
105275
  const column = filter.column ? availableColumns.find((c3) => c3.field === filter.column) : void 0;
105235
105276
  const operators = column ? column.operators : filter.type ? getOperatorsForType(filter.type) : [];
105236
105277
  const parameterOptions = availableColumns.map((col) => ({
@@ -105241,71 +105282,72 @@ function FilterPanel(props) {
105241
105282
  label: formatOperator(op),
105242
105283
  value: op
105243
105284
  }));
105244
- return /* @__PURE__ */ jsxRuntimeExports.jsxs("tr", { children: [
105245
- /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "pr-2 py-1 text-sm text-gray-600 whitespace-nowrap w-12", children: index === 0 ? "Where" : "And" }),
105246
- /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
105285
+ return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
105286
+ /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "w-[50px] shrink-0 text-[14px] font-medium leading-[20px] text-gray-900 whitespace-nowrap overflow-hidden text-ellipsis", children: index === 0 ? "Where" : "And" }),
105287
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
105247
105288
  Select,
105248
105289
  {
105249
105290
  options: parameterOptions,
105250
105291
  value: filter.column || "",
105251
105292
  onChange: (value) => handleFilterChange(index, "column", value),
105252
- placeholder: "Column",
105253
- className: "min-w-[140px]"
105293
+ placeholder: "Select Parameter",
105294
+ className: "w-full"
105254
105295
  }
105255
105296
  ) }),
105256
- /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
105297
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
105257
105298
  Select,
105258
105299
  {
105259
105300
  options: operatorOptions,
105260
105301
  value: filter.operator || "",
105261
105302
  onChange: (value) => handleFilterChange(index, "operator", value),
105262
- placeholder: "Operator",
105303
+ placeholder: "Select Operator",
105263
105304
  disabled: !filter.column,
105264
- className: "min-w-[120px]"
105305
+ className: "w-full"
105265
105306
  }
105266
105307
  ) }),
105267
- /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-[160px]", children: renderValueInput(filter, index) }) }),
105268
- /* @__PURE__ */ jsxRuntimeExports.jsx("td", { className: "p-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
105308
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: renderValueInput(filter, index) }),
105309
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center py-[10px] shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
105269
105310
  "button",
105270
105311
  {
105271
105312
  onClick: () => handleRemoveFilter(index),
105272
- className: "p-2 hover:bg-gray-100 rounded text-gray-500 hover:text-gray-700",
105313
+ className: "text-gray-500 hover:text-gray-700",
105273
105314
  title: "Remove filter",
105274
105315
  "data-test-id": `filter-panel-delete-filter-${index}`,
105275
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-4 h-4" })
105316
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "w-[16px] h-[16px]", strokeWidth: 1.5 })
105276
105317
  }
105277
105318
  ) })
105278
105319
  ] }, `filter-${index}`);
105279
- }) }) }),
105280
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-2 items-start mt-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
105320
+ }) }),
105321
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-[8px] items-start", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
105281
105322
  "button",
105282
105323
  {
105283
105324
  onClick: handleAddFilter,
105284
- className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-blue-600 bg-white border border-blue-300 rounded-lg hover:bg-blue-50",
105325
+ className: "inline-flex items-center gap-[8px] px-[16px] py-[10px] text-[14px] font-medium leading-[20px] text-blue-700 bg-white border border-blue-300 rounded-[8px] hover:bg-blue-50",
105285
105326
  "data-test-id": "filter-panel-add-filter-btn",
105286
105327
  children: [
105287
- /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-4 h-4" }),
105328
+ /* @__PURE__ */ jsxRuntimeExports.jsx(Plus, { className: "w-[16px] h-[16px]", strokeWidth: 2 }),
105288
105329
  "New filter"
105289
105330
  ]
105290
105331
  }
105291
105332
  ) })
105292
- ] }) }),
105293
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border-t border-gray-300 px-6 py-3 h-[64px] flex items-center justify-between shrink-0", children: [
105333
+ ] }) }) }),
105334
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px] px-[24px] py-[12px] border_default_top shrink-0", children: [
105294
105335
  /* @__PURE__ */ jsxRuntimeExports.jsx(
105295
105336
  "button",
105296
105337
  {
105297
105338
  onClick: handleReset,
105298
- className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50",
105339
+ className: "px-[16px] py-[10px] text-[14px] font-medium leading-[20px] text-gray-700 bg-white border border-gray-300 rounded-[8px] hover:bg-gray-50",
105299
105340
  "data-test-id": "filter-panel-reset-btn",
105300
105341
  children: "Reset filters"
105301
105342
  }
105302
105343
  ),
105303
- /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
105344
+ /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" }),
105345
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-[8px]", children: [
105304
105346
  /* @__PURE__ */ jsxRuntimeExports.jsx(
105305
105347
  "button",
105306
105348
  {
105307
105349
  onClick: handleCancel,
105308
- className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50",
105350
+ className: "px-[16px] py-[10px] text-[14px] font-medium leading-[20px] text-gray-700 bg-white border border-gray-300 rounded-[8px] hover:bg-gray-50",
105309
105351
  "data-test-id": "filter-panel-cancel-btn",
105310
105352
  children: "Cancel"
105311
105353
  }
@@ -105314,7 +105356,7 @@ function FilterPanel(props) {
105314
105356
  "button",
105315
105357
  {
105316
105358
  onClick: handleApply,
105317
- className: "px-4 py-2 text-sm font-medium text-white bg-gray-900 border border-gray-700 rounded-lg hover:bg-gray-800",
105359
+ className: "px-[16px] py-[10px] text-[14px] font-medium leading-[20px] text-white bg-gray-900 border border-gray-700 rounded-[8px] hover:bg-gray-800",
105318
105360
  "data-test-id": "filter-panel-apply-btn",
105319
105361
  children: "Apply"
105320
105362
  }
@@ -106535,6 +106577,7 @@ const CopyButton$1 = ({
106535
106577
  text,
106536
106578
  className = "",
106537
106579
  iconClassName = "",
106580
+ iconStyle,
106538
106581
  title = "Copy to clipboard",
106539
106582
  onCopySuccess,
106540
106583
  onCopyError,
@@ -106548,19 +106591,19 @@ const CopyButton$1 = ({
106548
106591
  case "sm":
106549
106592
  return {
106550
106593
  button: "p-1",
106551
- icon: "w-3 h-3",
106594
+ iconStyle: { width: "12px", height: "12px" },
106552
106595
  tooltip: "text-xs py-1 px-2"
106553
106596
  };
106554
106597
  case "lg":
106555
106598
  return {
106556
106599
  button: "p-2",
106557
- icon: "w-5 h-5",
106600
+ iconStyle: { width: "20px", height: "20px" },
106558
106601
  tooltip: "text-sm py-2 px-3"
106559
106602
  };
106560
106603
  default:
106561
106604
  return {
106562
106605
  button: "p-1.5",
106563
- icon: "w-4 h-4",
106606
+ iconStyle: { width: "16px", height: "16px" },
106564
106607
  tooltip: "text-xs py-1 px-2"
106565
106608
  };
106566
106609
  }
@@ -106623,7 +106666,7 @@ const CopyButton$1 = ({
106623
106666
  onClick: copyToClipboard2,
106624
106667
  className: `${sizeClasses2.button} hover:bg-gray-100 rounded transition-colors ${className}`,
106625
106668
  title,
106626
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: `${sizeClasses2.icon} text-gray-400 ${iconClassName}` })
106669
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: `text-gray-400 ${iconClassName}`, style: { ...sizeClasses2.iconStyle, ...iconStyle } })
106627
106670
  }
106628
106671
  ),
106629
106672
  /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -107757,7 +107800,7 @@ const DataModal = ({
107757
107800
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-700", children: [
107758
107801
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4", children: [
107759
107802
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
107760
- /* @__PURE__ */ jsxRuntimeExports.jsx(FileCode, { className: "w-5 h-5 text-gray-400" }),
107803
+ /* @__PURE__ */ jsxRuntimeExports.jsx(FileCode, { style: { width: "20px", height: "20px", stroke: "#9CA3AF" } }),
107761
107804
  /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-100", children: title })
107762
107805
  ] }),
107763
107806
  isValidJson && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-1 ml-4 pl-4 border-l border-gray-700", children: [
@@ -107767,7 +107810,7 @@ const DataModal = ({
107767
107810
  onClick: () => setViewMode("interactive"),
107768
107811
  className: `p-1.5 hover:bg-gray-700 rounded transition-colors ${viewMode === "interactive" ? "bg-gray-700" : ""}`,
107769
107812
  title: "Collapsed JSON view (fold/unfold)",
107770
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListTree, { className: "w-4 h-4 text-gray-400" })
107813
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListTree, { style: { width: "16px", height: "16px", stroke: "#9CA3AF" } })
107771
107814
  }
107772
107815
  ),
107773
107816
  /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -107776,7 +107819,7 @@ const DataModal = ({
107776
107819
  onClick: () => setViewMode("plain"),
107777
107820
  className: `p-1.5 hover:bg-gray-700 rounded transition-colors ${viewMode === "plain" ? "bg-gray-700" : ""}`,
107778
107821
  title: "Plain JSON view",
107779
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeft, { className: "w-4 h-4 text-gray-400" })
107822
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeft, { style: { width: "16px", height: "16px", stroke: "#9CA3AF" } })
107780
107823
  }
107781
107824
  )
107782
107825
  ] })
@@ -107788,7 +107831,7 @@ const DataModal = ({
107788
107831
  text: stringifyJsonNode(parsedData),
107789
107832
  title: "Copy content",
107790
107833
  className: "p-2 rounded-lg hover:bg-gray-700",
107791
- iconClassName: "w-4 h-4 text-gray-400"
107834
+ iconStyle: { width: "16px", height: "16px", stroke: "#9CA3AF" }
107792
107835
  }
107793
107836
  ),
107794
107837
  /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -107797,7 +107840,7 @@ const DataModal = ({
107797
107840
  onClick: onClose,
107798
107841
  className: "p-2 hover:bg-gray-700 rounded-lg transition-colors",
107799
107842
  title: "Close",
107800
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-4 h-4 text-gray-400" })
107843
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { style: { width: "16px", height: "16px", stroke: "#9CA3AF" } })
107801
107844
  }
107802
107845
  )
107803
107846
  ] })
@@ -107875,7 +107918,7 @@ const JsonViewer = ({
107875
107918
  onClick: () => onToggleKey == null ? void 0 : onToggleKey(fullPath),
107876
107919
  className: `flex items-center gap-1 p-1 rounded transition-colors ${darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100"}`,
107877
107920
  children: [
107878
- isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: `w-3 h-3 ${darkMode ? "text-gray-500" : "text-gray-400"}` }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: `w-3 h-3 ${darkMode ? "text-gray-500" : "text-gray-400"}` }),
107921
+ isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { style: { width: "12px", height: "12px", stroke: darkMode ? "#6B7280" : "#9CA3AF" } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { style: { width: "12px", height: "12px", stroke: darkMode ? "#6B7280" : "#9CA3AF" } }),
107879
107922
  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: `text-xs ${darkMode ? "text-gray-300" : "text-gray-600"}`, children: [
107880
107923
  "Array[",
107881
107924
  value.length,
@@ -107910,7 +107953,7 @@ const JsonViewer = ({
107910
107953
  onClick: () => onToggleKey == null ? void 0 : onToggleKey(fullPath),
107911
107954
  className: `flex items-center gap-1 p-1 rounded transition-colors ${darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100"}`,
107912
107955
  children: [
107913
- isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: `w-3 h-3 ${darkMode ? "text-gray-500" : "text-gray-400"}` }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: `w-3 h-3 ${darkMode ? "text-gray-500" : "text-gray-400"}` }),
107956
+ isExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { style: { width: "12px", height: "12px", stroke: darkMode ? "#6B7280" : "#9CA3AF" } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { style: { width: "12px", height: "12px", stroke: darkMode ? "#6B7280" : "#9CA3AF" } }),
107914
107957
  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: `text-xs ${darkMode ? "text-gray-300" : "text-gray-600"}`, children: [
107915
107958
  "Object ",
107916
107959
  "{",
@@ -108078,7 +108121,7 @@ const DataViewer = ({
108078
108121
  }
108079
108122
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
108080
108123
  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${darkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"} border rounded-md overflow-hidden ${className}`, "data-id": "data_viewer_root", children: [
108081
- showHeader && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-[#F9FAFB] border-b border-[#EAECF0] px-4 py-2 flex items-center justify-between", "data-id": "data_viewer_header", children: [
108124
+ showHeader && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-[#F9FAFB] border_secondary_bottom px-4 py-2 flex items-center justify-between", "data-id": "data_viewer_header", children: [
108082
108125
  isValidJson && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", "data-id": "data_viewer_header_view_toggles", children: [
108083
108126
  /* @__PURE__ */ jsxRuntimeExports.jsx(
108084
108127
  "button",
@@ -108087,7 +108130,7 @@ const DataViewer = ({
108087
108130
  className: `p-1 hover:bg-gray-200 rounded transition-colors ${currentViewMode === "interactive" ? "bg-gray-200" : ""}`,
108088
108131
  title: "Collapsed JSON view (fold/unfold)",
108089
108132
  "data-id": "data_viewer_header_btn_interactive",
108090
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListTree, { className: "w-4 h-4 text-[#98A2B3]" })
108133
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(ListTree, { style: { width: "16px", height: "16px", stroke: "#98A2B3" } })
108091
108134
  }
108092
108135
  ),
108093
108136
  /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -108097,7 +108140,7 @@ const DataViewer = ({
108097
108140
  className: `p-1 hover:bg-gray-200 rounded transition-colors ${currentViewMode === "plain" ? "bg-gray-200" : ""}`,
108098
108141
  title: "Plain JSON view",
108099
108142
  "data-id": "data_viewer_header_btn_plain",
108100
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeft, { className: "w-4 h-4 text-[#98A2B3]" })
108143
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlignLeft, { style: { width: "16px", height: "16px", stroke: "#98A2B3" } })
108101
108144
  }
108102
108145
  )
108103
108146
  ] }),
@@ -108110,7 +108153,7 @@ const DataViewer = ({
108110
108153
  className: "p-1 hover:bg-gray-200 rounded transition-colors",
108111
108154
  title: "Expand to full screen",
108112
108155
  "data-id": "data_viewer_header_btn_expand",
108113
- children: /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize2, { className: "w-4 h-4 text-[#98A2B3]" })
108156
+ children: /* @__PURE__ */ jsxRuntimeExports.jsx(Maximize2, { style: { width: "16px", height: "16px", stroke: "#98A2B3" } })
108114
108157
  }
108115
108158
  ),
108116
108159
  /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -108119,7 +108162,7 @@ const DataViewer = ({
108119
108162
  text: stringifyJsonNode(parsedData),
108120
108163
  title: "Copy content",
108121
108164
  className: "p-1",
108122
- iconClassName: "w-4 h-4 text-[#98A2B3]"
108165
+ iconStyle: { width: "16px", height: "16px", stroke: "#98A2B3" }
108123
108166
  }
108124
108167
  )
108125
108168
  ] })
@@ -139399,7 +139442,7 @@ function handlePaste(view, _2, slice2) {
139399
139442
  return true;
139400
139443
  } else return false;
139401
139444
  }
139402
- function handleMouseDown(view, startEvent) {
139445
+ function handleMouseDown$1(view, startEvent) {
139403
139446
  var _cellUnderMouse;
139404
139447
  if (startEvent.button != 0) return;
139405
139448
  if (startEvent.ctrlKey || startEvent.metaKey) return;
@@ -139469,8 +139512,8 @@ function cellUnderMouse(view, event) {
139469
139512
  top: event.clientY
139470
139513
  });
139471
139514
  if (!mousePos) return null;
139472
- const pos = mousePos.inside >= 0 ? mousePos.inside : mousePos.pos;
139473
- return cellAround(view.state.doc.resolve(pos));
139515
+ let { inside, pos } = mousePos;
139516
+ return inside >= 0 && cellAround(view.state.doc.resolve(inside)) || cellAround(view.state.doc.resolve(pos));
139474
139517
  }
139475
139518
  var TableView$1 = class TableView {
139476
139519
  constructor(node, defaultCellMinWidth) {
@@ -139562,7 +139605,7 @@ function columnResizing({ handleWidth = 5, cellMinWidth = 25, defaultCellMinWidt
139562
139605
  handleMouseLeave(view);
139563
139606
  },
139564
139607
  mousedown: (view, event) => {
139565
- handleMouseDown$1(view, event, cellMinWidth, defaultCellMinWidth);
139608
+ handleMouseDown(view, event, cellMinWidth, defaultCellMinWidth);
139566
139609
  }
139567
139610
  },
139568
139611
  decorations: (state) => {
@@ -139621,7 +139664,7 @@ function handleMouseLeave(view) {
139621
139664
  const pluginState = columnResizingPluginKey.getState(view.state);
139622
139665
  if (pluginState && pluginState.activeHandle > -1 && !pluginState.dragging) updateHandle(view, -1);
139623
139666
  }
139624
- function handleMouseDown$1(view, event, cellMinWidth, defaultCellMinWidth) {
139667
+ function handleMouseDown(view, event, cellMinWidth, defaultCellMinWidth) {
139625
139668
  var _view$dom$ownerDocume;
139626
139669
  if (!view.editable) return false;
139627
139670
  const win = (_view$dom$ownerDocume = view.dom.ownerDocument.defaultView) !== null && _view$dom$ownerDocume !== void 0 ? _view$dom$ownerDocume : window;
@@ -139768,7 +139811,7 @@ function tableEditing({ allowTableNodeSelection = false } = {}) {
139768
139811
  },
139769
139812
  props: {
139770
139813
  decorations: drawCellSelection,
139771
- handleDOMEvents: { mousedown: handleMouseDown },
139814
+ handleDOMEvents: { mousedown: handleMouseDown$1 },
139772
139815
  createSelectionBetween(view) {
139773
139816
  return tableEditingKey.getState(view.state) != null ? view.state.selection : null;
139774
139817
  },